aiexecode 1.0.75 → 1.0.81

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: 1 },
+        // 상단 테두리
+        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);
+}