aiexecode 1.0.157

package/src/frontend/utils/GridRenderer.js

@@ -0,0 +1,140 @@
+/**
+ * Grid Renderer
+ * 마크다운 테이블을 렌더링하는 컴포넌트
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { theme } from '../design/themeColors.js';
+import { ProcessInlineText, calculateTextWidth } from './InlineFormatter.js';
+
+/**
+ * 마크다운 테이블을 렌더링하는 컴포넌트
+ * @param {Object} props
+ * @param {string[]} props.columnHeaders - 테이블 헤더
+ * @param {string[][]} props.dataRows - 테이블 데이터 행
+ * @param {number} props.maxWidth - 터미널 최대 너비
+ */
+export const GridRenderer = ({ columnHeaders, dataRows, maxWidth }) => {
+    // 컬럼 너비 계산 (마크다운 처리 후 실제 표시 너비 기준)
+    const widthPerColumn = columnHeaders.map((headerText, columnIndex) => {
+        const headerDisplayWidth = calculateTextWidth(headerText);
+        const maxDataWidth = Math.max(
+            ...dataRows.map((rowData) => calculateTextWidth(rowData[columnIndex] || ''))
+        );
+        return Math.max(headerDisplayWidth, maxDataWidth) + 2; // 패딩 추가
+    });
+
+    // 테이블이 터미널 너비를 초과하지 않도록 조정
+    const totalRequiredWidth = widthPerColumn.reduce((sum, w) => sum + w + 1, 1);
+    const shrinkRatio = totalRequiredWidth > maxWidth ? maxWidth / totalRequiredWidth : 1;
+    const finalWidths = widthPerColumn.map((w) => Math.floor(w * shrinkRatio));
+
+    /**
+     * 셀 내용을 렌더링 (너비에 맞게 잘라내거나 패딩 추가)
+     */
+    const buildCell = (cellText, cellWidth, isHeaderCell = false) => {
+        const availableWidth = Math.max(0, cellWidth - 2);
+        const actualWidth = calculateTextWidth(cellText);
+
+        let displayText = cellText;
+        if (actualWidth > availableWidth) {
+            if (availableWidth <= 3) {
+                // 너비가 매우 작으면 단순 잘라내기
+                displayText = cellText.substring(0, Math.min(cellText.length, availableWidth));
+            } else {
+                // 이진 탐색으로 마크다운을 보존하면서 최적 절단점 찾기
+                let leftBound = 0;
+                let rightBound = cellText.length;
+                let bestFit = cellText;
+
+                while (leftBound <= rightBound) {
+                    const midPoint = Math.floor((leftBound + rightBound) / 2);
+                    const testText = cellText.substring(0, midPoint);
+                    const testWidth = calculateTextWidth(testText);
+
+                    if (testWidth <= availableWidth - 3) {
+                        bestFit = testText;
+                        leftBound = midPoint + 1;
+                    } else {
+                        rightBound = midPoint - 1;
+                    }
+                }
+
+                displayText = bestFit + '...';
+            }
+        }
+
+        // 정확한 패딩 계산
+        const finalDisplayWidth = calculateTextWidth(displayText);
+        const paddingRequired = Math.max(0, availableWidth - finalDisplayWidth);
+
+        return React.createElement(Text, null,
+            isHeaderCell
+                ? React.createElement(Text, { bold: true, color: theme.text.link },
+                    React.createElement(ProcessInlineText, { content: displayText })
+                )
+                : React.createElement(ProcessInlineText, { content: displayText }),
+            ' '.repeat(paddingRequired)
+        );
+    };
+
+    /**
+     * 테두리 렌더링
+     */
+    const buildBorderLine = (position) => {
+        const borderStyles = {
+            top: { leftCorner: '┌', junction: '┬', rightCorner: '┐', line: '─' },
+            mid: { leftCorner: '├', junction: '┼', rightCorner: '┤', line: '─' },
+            bottom: { leftCorner: '└', junction: '┴', rightCorner: '┘', line: '─' }
+        };
+
+        const style = borderStyles[position];
+        const segments = finalWidths.map((width) => style.line.repeat(width));
+        const borderText = style.leftCorner + segments.join(style.junction) + style.rightCorner;
+
+        return React.createElement(Text, { color: theme.text.secondary }, borderText);
+    };
+
+    /**
+     * 테이블 행 렌더링
+     */
+    const buildTableRow = (rowCells, isHeaderRow = false) => {
+        const renderedCells = rowCells.map((cellContent, idx) => {
+            const width = finalWidths[idx] || 0;
+            return buildCell(cellContent || '', width, isHeaderRow);
+        });
+
+        return React.createElement(Text, { color: theme.text.primary },
+            '│ ',
+            ...renderedCells.map((cell, idx) =>
+                React.createElement(React.Fragment, { key: idx },
+                    cell,
+                    idx < renderedCells.length - 1 ? ' │ ' : ''
+                )
+            ),
+            ' │'
+        );
+    };
+
+    return React.createElement(Box, { flexDirection: 'column', marginY: 0 },
+        // 상단 테두리
+        buildBorderLine('top'),
+
+        // 헤더 행
+        buildTableRow(columnHeaders, true),
+
+        // 중간 테두리
+        buildBorderLine('mid'),
+
+        // 데이터 행
+        ...dataRows.map((row, idx) =>
+            React.createElement(React.Fragment, { key: idx },
+                buildTableRow(row)
+            )
+        ),
+
+        // 하단 테두리
+        buildBorderLine('bottom')
+    );
+};

package/src/frontend/utils/InlineFormatter.js

@@ -0,0 +1,156 @@
+/**
+ * Inline Formatter
+ * 인라인 마크다운 요소를 파싱하여 Ink 컴포넌트로 변환
+ */
+
+import React from 'react';
+import { Text } from 'ink';
+import { theme } from '../design/themeColors.js';
+import stringWidth from 'string-width';
+
+// 마크다운 마커 길이 상수
+const MARKER_LENGTHS = {
+    BOLD: 2,           // "**"
+    ITALIC: 1,         // "*" or "_"
+    STRIKE: 2,         // "~~"
+    CODE: 1,           // "`"
+    UNDERLINE_START: 3, // "<u>"
+    UNDERLINE_END: 4    // "</u>"
+};
+
+/**
+ * 인라인 마크다운을 렌더링하는 컴포넌트
+ */
+const ProcessInlineTextInternal = ({ content }) => {
+    // 마크다운이나 URL이 없으면 바로 반환
+    if (!/[*_~`<[https?:]/.test(content)) {
+        return React.createElement(Text, { color: theme.text.primary }, content);
+    }
+
+    const elements = [];
+    let currentPosition = 0;
+    const patternRegex = /(\*\*.*?\*\*|\*.*?\*|_.*?_|~~.*?~~|\[.*?\]\(.*?\)|`+.+?`+|<u>.*?<\/u>|https?:\/\/\S+)/g;
+    let matchResult;
+
+    while ((matchResult = patternRegex.exec(content)) !== null) {
+        if (matchResult.index > currentPosition) {
+            elements.push(
+                React.createElement(Text, { key: `plain-${currentPosition}` },
+                    content.slice(currentPosition, matchResult.index)
+                )
+            );
+        }
+
+        const matchedText = matchResult[0];
+        let formattedElement = null;
+        const elementKey = `fmt-${matchResult.index}`;
+
+        try {
+            // 볼드 처리
+            if (matchedText.startsWith('**') &&
+                matchedText.endsWith('**') &&
+                matchedText.length > MARKER_LENGTHS.BOLD * 2) {
+                formattedElement = React.createElement(Text, { key: elementKey, bold: true },
+                    matchedText.slice(MARKER_LENGTHS.BOLD, -MARKER_LENGTHS.BOLD)
+                );
+            }
+            // 이탤릭 처리
+            else if (matchedText.length > MARKER_LENGTHS.ITALIC * 2 &&
+                ((matchedText.startsWith('*') && matchedText.endsWith('*')) ||
+                    (matchedText.startsWith('_') && matchedText.endsWith('_'))) &&
+                !/\w/.test(content.substring(matchResult.index - 1, matchResult.index)) &&
+                !/\w/.test(content.substring(patternRegex.lastIndex, patternRegex.lastIndex + 1)) &&
+                !/\S[./\\]/.test(content.substring(matchResult.index - 2, matchResult.index)) &&
+                !/[./\\]\S/.test(content.substring(patternRegex.lastIndex, patternRegex.lastIndex + 2))) {
+                formattedElement = React.createElement(Text, { key: elementKey, italic: true },
+                    matchedText.slice(MARKER_LENGTHS.ITALIC, -MARKER_LENGTHS.ITALIC)
+                );
+            }
+            // 취소선 처리
+            else if (matchedText.startsWith('~~') &&
+                matchedText.endsWith('~~') &&
+                matchedText.length > MARKER_LENGTHS.STRIKE * 2) {
+                formattedElement = React.createElement(Text, { key: elementKey, strikethrough: true },
+                    matchedText.slice(MARKER_LENGTHS.STRIKE, -MARKER_LENGTHS.STRIKE)
+                );
+            }
+            // 인라인 코드 처리
+            else if (matchedText.startsWith('`') &&
+                matchedText.endsWith('`') &&
+                matchedText.length > MARKER_LENGTHS.CODE) {
+                const codePattern = matchedText.match(/^(`+)(.+?)\1$/s);
+                if (codePattern && codePattern[2]) {
+                    formattedElement = React.createElement(Text, {
+                        key: elementKey,
+                        color: theme.status.warning
+                    }, codePattern[2]);
+                }
+            }
+            // 링크 처리
+            else if (matchedText.startsWith('[') &&
+                matchedText.includes('](') &&
+                matchedText.endsWith(')')) {
+                const linkPattern = matchedText.match(/\[(.*?)\]\((.*?)\)/);
+                if (linkPattern) {
+                    const linkLabel = linkPattern[1];
+                    const linkUrl = linkPattern[2];
+                    formattedElement = React.createElement(Text, { key: elementKey },
+                        linkLabel,
+                        React.createElement(Text, { color: theme.text.link }, ` (${linkUrl})`)
+                    );
+                }
+            }
+            // 밑줄 처리
+            else if (matchedText.startsWith('<u>') &&
+                matchedText.endsWith('</u>') &&
+                matchedText.length > MARKER_LENGTHS.UNDERLINE_START + MARKER_LENGTHS.UNDERLINE_END - 1) {
+                formattedElement = React.createElement(Text, { key: elementKey, underline: true },
+                    matchedText.slice(MARKER_LENGTHS.UNDERLINE_START, -MARKER_LENGTHS.UNDERLINE_END)
+                );
+            }
+            // URL 처리
+            else if (matchedText.match(/^https?:\/\//)) {
+                formattedElement = React.createElement(Text, {
+                    key: elementKey,
+                    color: theme.text.link
+                }, matchedText);
+            }
+        } catch (error) {
+            // 파싱 오류 발생 시 무시
+            formattedElement = null;
+        }
+
+        elements.push(
+            formattedElement ?? React.createElement(Text, { key: elementKey }, matchedText)
+        );
+        currentPosition = patternRegex.lastIndex;
+    }
+
+    if (currentPosition < content.length) {
+        elements.push(
+            React.createElement(Text, { key: `plain-${currentPosition}` },
+                content.slice(currentPosition)
+            )
+        );
+    }
+
+    return React.createElement(React.Fragment, null, elements.filter(el => el !== null));
+};
+
+export const ProcessInlineText = React.memo(ProcessInlineTextInternal);
+
+/**
+ * 마크다운 포맷팅을 제거하고 실제 텍스트 길이를 계산
+ * 테이블의 컬럼 너비 계산 등에 사용
+ */
+export function calculateTextWidth(content) {
+    const plainText = content
+        .replace(/\*\*(.*?)\*\*/g, '$1')
+        .replace(/\*(.*?)\*/g, '$1')
+        .replace(/_(.*?)_/g, '$1')
+        .replace(/~~(.*?)~~/g, '$1')
+        .replace(/`(.*?)`/g, '$1')
+        .replace(/<u>(.*?)<\/u>/g, '$1')
+        .replace(/.*\[(.*?)\]\(.*\)/g, '$1');
+    return stringWidth(plainText);
+}

package/src/frontend/utils/diffUtils.js

@@ -0,0 +1,235 @@
+/**
+ * diffUtils - Shared utilities for preparing diff data
+ */
+
+import { createDebugLogger } from '../../util/debug_log.js';
+
+const debugLog = createDebugLogger('ui_utils.log', 'diffUtils');
+
+/**
+ * Prepare diff data for edit_file_replace operation
+ * This function extracts the logic from ToolApprovalPrompt to ensure
+ * consistent diff display in both approval prompt and history view
+ *
+ * @param {string} oldString - The string to be replaced
+ * @param {string} newString - The replacement string
+ * @param {string} fileContent - The full file content
+ * @param {boolean} replaceAll - If true, replace all occurrences
+ * @returns {Object} Diff data object with oldContent, newContent, context, line numbers, or error
+ */
+export function prepareEditReplaceDiff(oldString, newString, fileContent, replaceAll = false) {
+    debugLog('========== prepareEditReplaceDiff START ==========');
+    debugLog(`oldString length: ${oldString?.length || 0}`);
+    debugLog(`oldString preview: ${JSON.stringify(oldString?.substring(0, 100))}`);
+    debugLog(`newString length: ${newString?.length || 0}`);
+    debugLog(`newString preview: ${JSON.stringify(newString?.substring(0, 100))}`);
+    debugLog(`fileContent length: ${fileContent?.length || 0}`);
+    debugLog(`replaceAll: ${replaceAll}`);
+
+    try {
+        if (!fileContent) {
+            debugLog('ERROR: fileContent is empty or null');
+            debugLog('========== prepareEditReplaceDiff END (ERROR) ==========');
+            return {
+                error: 'File not read yet or empty'
+            };
+        }
+
+        // Find old_string in file content
+        debugLog('Searching for old_string in file content...');
+        const index = fileContent.indexOf(oldString);
+        debugLog(`old_string found at index: ${index}`);
+
+        if (index === -1) {
+            debugLog('ERROR: old_string not found in file');
+            debugLog('========== prepareEditReplaceDiff END (ERROR) ==========');
+            return {
+                error: 'old_string not found in file'
+            };
+        }
+
+        // Split file into lines
+        debugLog('Splitting file content into lines...');
+        const lines = fileContent.split('\n');
+        const actualLines = fileContent === '' ? [] :
+            (fileContent.endsWith('\n') ? lines.slice(0, -1) : lines);
+        debugLog(`Total lines: ${lines.length}, Actual lines: ${actualLines.length}`);
+
+        // If replaceAll is true, find all occurrences and show full file diff
+        if (replaceAll) {
+            debugLog('========== REPLACE_ALL MODE ==========');
+            // Find all occurrences in the file content
+            debugLog('Finding all occurrences of old_string...');
+            const occurrences = [];
+            let searchIndex = 0;
+            while (true) {
+                const foundIndex = fileContent.indexOf(oldString, searchIndex);
+                if (foundIndex === -1) break;
+                occurrences.push(foundIndex);
+                debugLog(`  Found occurrence #${occurrences.length} at index ${foundIndex}`);
+                searchIndex = foundIndex + 1;
+            }
+            debugLog(`Total occurrences found: ${occurrences.length}`);
+
+            if (occurrences.length === 0) {
+                debugLog('ERROR: No occurrences found in replaceAll mode');
+                debugLog('========== prepareEditReplaceDiff END (ERROR) ==========');
+                return {
+                    error: 'old_string not found in file'
+                };
+            }
+
+            // Calculate affected line ranges for all occurrences
+            debugLog('Calculating affected line ranges for all occurrences...');
+            const affectedLineRanges = occurrences.map((idx, i) => {
+                const beforeMatch = fileContent.substring(0, idx);
+                const startLine = beforeMatch.split('\n').length;
+
+                const oldStringSplit = oldString.split('\n');
+                const oldStringLines = oldString.endsWith('\n')
+                    ? oldStringSplit.length - 1
+                    : oldStringSplit.length;
+                const endLine = startLine + oldStringLines - 1;
+
+                debugLog(`  Occurrence #${i + 1}: lines ${startLine}-${endLine}`);
+                return { startLine, endLine };
+            });
+
+            // Find the overall range
+            const firstAffectedLine = Math.min(...affectedLineRanges.map(r => r.startLine));
+            const lastAffectedLine = Math.max(...affectedLineRanges.map(r => r.endLine));
+            debugLog(`Overall affected range: lines ${firstAffectedLine}-${lastAffectedLine}`);
+
+            // Create old and new content for the affected range
+            const startLine = firstAffectedLine;
+            const endLine = lastAffectedLine;
+
+            debugLog(`Extracting affected lines from actualLines[${startLine - 1}:${endLine}]...`);
+            const affectedLines = actualLines.slice(startLine - 1, endLine);
+            const fullOldContent = affectedLines.join('\n');
+            debugLog(`fullOldContent length: ${fullOldContent.length} bytes, lines: ${affectedLines.length}`);
+
+            // Replace ALL occurrences in the entire file content
+            debugLog('Replacing ALL occurrences in file content...');
+            const replacedContent = fileContent.split(oldString).join(newString);
+            const replacedLines = replacedContent.split('\n');
+            const replacedActualLines = replacedContent === '' ? [] :
+                (replacedContent.endsWith('\n') ? replacedLines.slice(0, -1) : replacedLines);
+            debugLog(`Replaced content total lines: ${replacedActualLines.length}`);
+
+            // Calculate the new end line based on how many lines the replacement spans
+            debugLog('Calculating new end line...');
+            const oldLineCount = endLine - startLine + 1;
+            const newLineCount = affectedLines.join('\n').split(oldString).join(newString).split('\n').length;
+            const newEndLine = startLine + newLineCount - 1;
+            debugLog(`  oldLineCount: ${oldLineCount}`);
+            debugLog(`  newLineCount: ${newLineCount}`);
+            debugLog(`  newEndLine: ${newEndLine}`);
+
+            debugLog(`Extracting fullNewContent from replacedActualLines[${startLine - 1}:${newEndLine}]...`);
+            const fullNewContent = replacedActualLines.slice(startLine - 1, newEndLine).join('\n');
+            debugLog(`fullNewContent length: ${fullNewContent.length} bytes`);
+
+            // Extract context (2 lines before and after)
+            const contextLines = 2;
+            const contextStartIdx = Math.max(0, startLine - 1 - contextLines);
+            const contextEndIdx = Math.min(actualLines.length, endLine + contextLines);
+            debugLog(`Context: before[${contextStartIdx}:${startLine - 1}], after[${endLine}:${contextEndIdx}]`);
+
+            const ctxBefore = actualLines.slice(contextStartIdx, startLine - 1);
+            const ctxAfter = actualLines.slice(endLine, contextEndIdx);
+            debugLog(`Context before: ${ctxBefore.length} lines, after: ${ctxAfter.length} lines`);
+
+            const result = {
+                startLine: startLine,
+                endLine: endLine,
+                oldContent: fullOldContent,
+                newContent: fullNewContent,
+                contextBefore: ctxBefore,
+                contextAfter: ctxAfter,
+                contextStartLine: contextStartIdx + 1
+            };
+            debugLog('========== prepareEditReplaceDiff END (REPLACE_ALL SUCCESS) ==========');
+            return result;
+        }
+
+        // Single replacement mode (original logic)
+        debugLog('========== SINGLE REPLACEMENT MODE ==========');
+        // Calculate line numbers
+        debugLog('Calculating line numbers...');
+        const beforeMatch = fileContent.substring(0, index);
+        const startLine = beforeMatch.split('\n').length;
+        debugLog(`startLine: ${startLine}`);
+
+        // Calculate actual line count (handle trailing newline)
+        const oldStringSplit = oldString.split('\n');
+        const oldStringLines = oldString.endsWith('\n')
+            ? oldStringSplit.length - 1
+            : oldStringSplit.length;
+        const endLine = startLine + oldStringLines - 1;
+        debugLog(`oldStringLines: ${oldStringLines}, endLine: ${endLine}`);
+
+        // For partial line replacements, show the full line context
+        // For multi-line replacements, check if it's partial or full line
+        let fullOldContent, fullNewContent;
+
+        // Extract affected lines
+        debugLog(`Extracting affected lines from actualLines[${startLine - 1}:${endLine}]...`);
+        const affectedLines = actualLines.slice(startLine - 1, endLine);
+        fullOldContent = affectedLines.join('\n');
+        debugLog(`Affected lines count: ${affectedLines.length}`);
+        debugLog(`fullOldContent (from affected lines): ${JSON.stringify(fullOldContent.substring(0, 100))}`);
+
+        // Check if oldString matches the full affected lines (full line replacement)
+        // or if it's a partial replacement within those lines
+        const isFullLineMatch = (fullOldContent === oldString) ||
+                                (fullOldContent === oldString.replace(/\n$/, '')) ||
+                                (fullOldContent + '\n' === oldString);
+        debugLog(`isFullLineMatch: ${isFullLineMatch}`);
+
+        if (isFullLineMatch) {
+            // Full line replacement - use the matched content directly
+            debugLog('Full line replacement mode');
+            fullOldContent = oldString.replace(/\n$/, '');
+            fullNewContent = newString.replace(/\n$/, '');
+            debugLog(`fullOldContent length: ${fullOldContent.length}`);
+            debugLog(`fullNewContent length: ${fullNewContent.length}`);
+        } else {
+            // Partial line replacement (single or multi-line) - replace within full lines
+            debugLog('Partial line replacement mode - replacing within full lines');
+            fullNewContent = fullOldContent.split(oldString).join(newString);
+            debugLog(`fullOldContent length: ${fullOldContent.length}`);
+            debugLog(`fullNewContent length: ${fullNewContent.length}`);
+            debugLog(`fullNewContent preview: ${JSON.stringify(fullNewContent.substring(0, 100))}`);
+        }
+
+        // Extract context (2 lines before and after)
+        const contextLines = 2;
+        const contextStartIdx = Math.max(0, startLine - 1 - contextLines);
+        const contextEndIdx = Math.min(actualLines.length, endLine + contextLines);
+        debugLog(`Context: before[${contextStartIdx}:${startLine - 1}], after[${endLine}:${contextEndIdx}]`);
+
+        const ctxBefore = actualLines.slice(contextStartIdx, startLine - 1);
+        const ctxAfter = actualLines.slice(endLine, contextEndIdx);
+        debugLog(`Context before: ${ctxBefore.length} lines, after: ${ctxAfter.length} lines`);
+
+        const result = {
+            startLine: startLine,
+            endLine: endLine,
+            oldContent: fullOldContent,
+            newContent: fullNewContent,
+            contextBefore: ctxBefore,
+            contextAfter: ctxAfter,
+            contextStartLine: contextStartIdx + 1
+        };
+        debugLog('========== prepareEditReplaceDiff END (SINGLE REPLACEMENT SUCCESS) ==========');
+        return result;
+    } catch (error) {
+        debugLog(`EXCEPTION caught: ${error.message}`);
+        debugLog(`Stack trace: ${error.stack}`);
+        debugLog('========== prepareEditReplaceDiff END (EXCEPTION) ==========');
+        return {
+            error: error.message
+        };
+    }
+}