@thegitai/cli 1.0.0-beta.1

package/dist/src/ui/tui/markdown-render.js

@@ -0,0 +1,455 @@
+import { line, plainLine, span, wrapText } from './text.js';
+const TABLE_BORDER_WIDTH = 2;
+const TABLE_CELL_OVERHEAD_WIDTH = 3;
+function parseInlineSegments(text) {
+    const source = String(text ?? '');
+    const segments = [];
+    let cursor = 0;
+    while (cursor < source.length) {
+        if (source[cursor] === '[' && source[cursor - 1] !== '!') {
+            const labelEnd = source.indexOf('](', cursor + 1);
+            const urlEnd = labelEnd === -1 ? -1 : source.indexOf(')', labelEnd + 2);
+            if (labelEnd > cursor + 1 && urlEnd > labelEnd + 2) {
+                const url = normalizeLinkUrl(source.slice(labelEnd + 2, urlEnd));
+                if (url) {
+                    const label = source.slice(cursor + 1, labelEnd);
+                    segments.push({ kind: 'link', text: label || url, url });
+                    cursor = urlEnd + 1;
+                    continue;
+                }
+            }
+        }
+        if (source.startsWith('**', cursor)) {
+            const end = source.indexOf('**', cursor + 2);
+            if (end > cursor + 2) {
+                segments.push({ kind: 'bold', text: source.slice(cursor + 2, end) });
+                cursor = end + 2;
+                continue;
+            }
+        }
+        if (source[cursor] === '`') {
+            const end = source.indexOf('`', cursor + 1);
+            if (end > cursor + 1) {
+                segments.push({ kind: 'code', text: source.slice(cursor + 1, end) });
+                cursor = end + 1;
+                continue;
+            }
+        }
+        let nextCursor = source.length;
+        const nextBold = source.indexOf('**', cursor);
+        const nextCode = source.indexOf('`', cursor);
+        const nextLink = source.indexOf('[', cursor);
+        if (nextBold !== -1)
+            nextCursor = Math.min(nextCursor, nextBold);
+        if (nextCode !== -1)
+            nextCursor = Math.min(nextCursor, nextCode);
+        if (nextLink !== -1)
+            nextCursor = Math.min(nextCursor, nextLink);
+        if (nextCursor === cursor)
+            nextCursor += 1;
+        segments.push({ kind: 'text', text: source.slice(cursor, nextCursor) });
+        cursor = nextCursor;
+    }
+    return segments.filter((segment) => segment.text.length > 0);
+}
+function normalizeLinkUrl(value) {
+    try {
+        const parsed = new URL(value);
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+            return null;
+        }
+        return parsed.href;
+    }
+    catch {
+        return null;
+    }
+}
+function isEscapedMarkdownPipe(source, pipeIndex) {
+    let slashCount = 0;
+    for (let index = pipeIndex - 1; index >= 0 && source[index] === '\\'; index--) {
+        slashCount++;
+    }
+    return slashCount % 2 === 1;
+}
+function splitMarkdownTableRow(line) {
+    const trimmed = String(line ?? '').trim();
+    const withoutLeadingPipe = trimmed.startsWith('|') ? trimmed.slice(1) : trimmed;
+    const trailingPipeIndex = withoutLeadingPipe.length - 1;
+    const hasTrailingBoundaryPipe = trailingPipeIndex >= 0 &&
+        withoutLeadingPipe[trailingPipeIndex] === '|' &&
+        !isEscapedMarkdownPipe(withoutLeadingPipe, trailingPipeIndex);
+    const withoutBoundaryPipes = hasTrailingBoundaryPipe
+        ? withoutLeadingPipe.slice(0, -1)
+        : withoutLeadingPipe;
+    const cells = [];
+    let cell = '';
+    for (let index = 0; index < withoutBoundaryPipes.length; index++) {
+        const char = withoutBoundaryPipes[index] ?? '';
+        if (char === '|' && !isEscapedMarkdownPipe(withoutBoundaryPipes, index)) {
+            cells.push(cell.trim().replace(/\\\|/g, '|'));
+            cell = '';
+            continue;
+        }
+        cell += char;
+    }
+    cells.push(cell.trim().replace(/\\\|/g, '|'));
+    return cells;
+}
+function isMarkdownTableRow(line) {
+    const cells = splitMarkdownTableRow(line);
+    return cells.length >= 2 && String(line ?? '').includes('|');
+}
+function isMarkdownTableSeparator(line) {
+    const cells = splitMarkdownTableRow(line);
+    return cells.length >= 2 && cells.every((cell) => /^:?-{3,}:?$/.test(cell));
+}
+function stripInlineFormattingForWidth(text) {
+    return String(text ?? '')
+        .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '$1')
+        .replace(/`([^`]*)`/g, '$1')
+        .replace(/\*\*([^*]+)\*\*/g, '$1');
+}
+function fitTableColumnWidths(columnWidths, maxWidth) {
+    const widths = columnWidths.map((width) => Math.max(3, Math.floor(width)));
+    if (widths.length === 0)
+        return widths;
+    const overhead = TABLE_BORDER_WIDTH + widths.length * TABLE_CELL_OVERHEAD_WIDTH;
+    const budget = Math.max(widths.length * 3, maxWidth - overhead);
+    const total = widths.reduce((sum, width) => sum + width, 0);
+    if (total <= budget)
+        return widths;
+    let remaining = budget;
+    const scaled = widths.map((width) => {
+        const next = Math.max(3, Math.floor((width / total) * budget));
+        remaining -= next;
+        return next;
+    });
+    while (remaining > 0) {
+        let targetIndex = 0;
+        for (let index = 1; index < widths.length; index++) {
+            if (widths[index] - scaled[index] > widths[targetIndex] - scaled[targetIndex]) {
+                targetIndex = index;
+            }
+        }
+        scaled[targetIndex]++;
+        remaining--;
+    }
+    while (remaining < 0) {
+        let targetIndex = -1;
+        for (let index = 0; index < scaled.length; index++) {
+            if (scaled[index] <= 3)
+                continue;
+            if (targetIndex === -1 || scaled[index] > scaled[targetIndex]) {
+                targetIndex = index;
+            }
+        }
+        if (targetIndex === -1)
+            break;
+        scaled[targetIndex]--;
+        remaining++;
+    }
+    return scaled;
+}
+function normalizeMarkdownTableCells(cells, columnCount) {
+    return Array.from({ length: columnCount }, (_, index) => cells[index] ?? '');
+}
+function parseMarkdownTableBlock(lines, startIndex) {
+    const headerLine = lines[startIndex] ?? '';
+    const separatorLine = lines[startIndex + 1] ?? '';
+    if (!isMarkdownTableRow(headerLine) || !isMarkdownTableSeparator(separatorLine)) {
+        return null;
+    }
+    const headers = splitMarkdownTableRow(headerLine);
+    const separators = splitMarkdownTableRow(separatorLine);
+    if (headers.length !== separators.length)
+        return null;
+    const columnCount = Math.max(headers.length, separators.length);
+    const rows = [];
+    let nextIndex = startIndex + 2;
+    while (nextIndex < lines.length && isMarkdownTableRow(lines[nextIndex] ?? '')) {
+        const cells = splitMarkdownTableRow(lines[nextIndex] ?? '');
+        if (cells.length !== columnCount)
+            break;
+        rows.push(normalizeMarkdownTableCells(cells, columnCount));
+        nextIndex++;
+    }
+    const normalizedHeaders = normalizeMarkdownTableCells(headers, columnCount);
+    const columnWidths = normalizedHeaders.map((header, columnIndex) => {
+        const values = [header, ...rows.map((row) => row[columnIndex] ?? '')];
+        return Math.max(3, ...values.map((value) => stripInlineFormattingForWidth(value).length));
+    });
+    return {
+        nextIndex,
+        table: { columnWidths, headers: normalizedHeaders, rows },
+    };
+}
+function splitFormattedLines(body) {
+    const lines = String(body ?? '')
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n')
+        .split('\n');
+    const formatted = [];
+    let inCodeBlock = false;
+    for (let index = 0; index < lines.length; index++) {
+        const lineText = lines[index] ?? '';
+        const trimmed = lineText.trim();
+        if (trimmed.startsWith('```')) {
+            inCodeBlock = !inCodeBlock;
+            continue;
+        }
+        if (inCodeBlock) {
+            formatted.push({ kind: 'code', text: lineText });
+            continue;
+        }
+        if (!trimmed) {
+            formatted.push({ kind: 'blank', text: '' });
+            continue;
+        }
+        if (/^<{3,}/.test(trimmed)) {
+            formatted.push({ kind: 'conflict-start', text: trimmed });
+            continue;
+        }
+        if (/^={3,}$/.test(trimmed)) {
+            formatted.push({ kind: 'conflict-sep', text: trimmed });
+            continue;
+        }
+        if (/^>{3,}/.test(trimmed)) {
+            formatted.push({ kind: 'conflict-end', text: trimmed });
+            continue;
+        }
+        const tableBlock = parseMarkdownTableBlock(lines, index);
+        if (tableBlock) {
+            formatted.push({ kind: 'table', table: tableBlock.table, text: '' });
+            index = tableBlock.nextIndex - 1;
+            continue;
+        }
+        const headingMatch = trimmed.match(/^(#{1,4})\s+(.*)$/);
+        if (headingMatch) {
+            formatted.push({ kind: 'heading', text: headingMatch[2] ?? '' });
+            continue;
+        }
+        const numberedMatch = trimmed.match(/^(\d+)\.\s+(.*)$/);
+        if (numberedMatch) {
+            formatted.push({
+                kind: 'numbered',
+                marker: numberedMatch[1],
+                text: numberedMatch[2] ?? '',
+            });
+            continue;
+        }
+        const bulletMatch = trimmed.match(/^[-*]\s+(.*)$/);
+        if (bulletMatch) {
+            formatted.push({ kind: 'bullet', text: bulletMatch[1] ?? '' });
+            continue;
+        }
+        const quoteMatch = trimmed.match(/^>\s+(.*)$/);
+        if (quoteMatch) {
+            formatted.push({ kind: 'quote', text: quoteMatch[1] ?? '' });
+            continue;
+        }
+        formatted.push({ kind: 'paragraph', text: lineText });
+    }
+    return formatted;
+}
+function segmentStyle(segment, bodyColor) {
+    if (segment.kind === 'bold') {
+        return { color: bodyColor, bold: true };
+    }
+    if (segment.kind === 'code') {
+        return { color: 'cyan' };
+    }
+    if (segment.kind === 'link') {
+        return { color: 'cyan', underline: true, linkUrl: segment.url };
+    }
+    return { color: bodyColor };
+}
+function styleFromSpan(part) {
+    const { text, ...style } = part;
+    void text;
+    return style;
+}
+function wrapInlineToLines(text, width, bodyColor, prefix = '') {
+    const safeWidth = Math.max(1, width);
+    const indent = prefix ? span(prefix, { color: 'gray' }) : null;
+    const indentSpaces = prefix ? span(' '.repeat(prefix.length), { color: 'gray' }) : null;
+    const segments = parseInlineSegments(text);
+    const rows = [[]];
+    let rowWidth = 0;
+    const startRow = () => {
+        rows.push([]);
+        rowWidth = 0;
+    };
+    const appendSpan = (part) => {
+        const current = rows[rows.length - 1];
+        const limit = safeWidth - (indent ? prefix.length : 0);
+        let remaining = part.text;
+        while (remaining.length > 0) {
+            const room = limit - rowWidth;
+            if (room <= 0) {
+                startRow();
+                continue;
+            }
+            if (remaining.length <= room) {
+                current.push(span(remaining, styleFromSpan(part)));
+                rowWidth += remaining.length;
+                remaining = '';
+                break;
+            }
+            current.push(span(remaining.slice(0, room), styleFromSpan(part)));
+            remaining = remaining.slice(room);
+            startRow();
+        }
+    };
+    for (const segment of segments) {
+        const style = segmentStyle(segment, bodyColor);
+        const tokens = segment.text.split(/(\s+)/).filter((token) => token.length > 0);
+        for (const token of tokens) {
+            appendSpan(span(token, style));
+        }
+    }
+    return rows.map((spans, index) => {
+        const bodySpans = spans.length > 0 ? spans : [span(' ', {})];
+        if (indent && index === 0)
+            return line(indent, ...bodySpans);
+        if (indentSpaces)
+            return line(indentSpaces, ...bodySpans);
+        return line(...bodySpans);
+    });
+}
+function padCell(text, width) {
+    const plain = stripInlineFormattingForWidth(text);
+    if (plain.length >= width)
+        return plain.slice(0, width);
+    return plain + ' '.repeat(width - plain.length);
+}
+function renderTableLines(table, width) {
+    const columnWidths = fitTableColumnWidths(table.columnWidths, width);
+    const renderRow = (cells, bold) => {
+        const parts = columnWidths.map((colWidth, index) => span(` ${padCell(cells[index] ?? '', colWidth)} `, {
+            color: 'cyan',
+            bold,
+        }));
+        return line(span('│', { color: 'cyan' }), ...parts, span('│', { color: 'cyan' }));
+    };
+    const separator = line(span('├' +
+        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┼') +
+        '┤', { color: 'cyan', dim: true }));
+    const top = line(span('┌' +
+        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┬') +
+        '┐', { color: 'cyan', dim: true }));
+    const bottom = line(span('└' +
+        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┴') +
+        '┘', { color: 'cyan', dim: true }));
+    return [
+        top,
+        renderRow(table.headers, true),
+        separator,
+        ...table.rows.map((row) => renderRow(row, false)),
+        bottom,
+    ];
+}
+function getEntryColor(kind) {
+    switch (kind) {
+        case 'assistant':
+        case 'diff':
+            return 'green';
+        case 'error':
+            return 'red';
+        case 'system':
+            return 'yellow';
+        case 'tool':
+            return 'blue';
+        case 'user':
+            return 'cyan';
+    }
+}
+export function renderFormattedBodyLines(body, width, kind) {
+    const formatted = splitFormattedLines(body);
+    const headingColor = kind === 'system' ? 'cyan' : getEntryColor(kind);
+    const bodyColor = kind === 'error' ? 'red' : undefined;
+    const bodyWidth = Math.max(1, width - 2);
+    const output = [];
+    for (let index = 0; index < formatted.length; index++) {
+        const formattedLine = formatted[index];
+        if (formattedLine.kind === 'blank') {
+            output.push(plainLine(''));
+            continue;
+        }
+        if (formattedLine.kind === 'heading') {
+            for (const wrapped of wrapText(formattedLine.text, bodyWidth)) {
+                output.push(plainLine(`  ${wrapped}`, { color: headingColor, bold: true }));
+            }
+            continue;
+        }
+        if (formattedLine.kind === 'bullet') {
+            output.push(...wrapInlineToLines(formattedLine.text, bodyWidth, bodyColor, '• '));
+            continue;
+        }
+        if (formattedLine.kind === 'numbered') {
+            const marker = `${formattedLine.marker}. `;
+            output.push(...wrapInlineToLines(formattedLine.text, bodyWidth, bodyColor, marker));
+            continue;
+        }
+        if (formattedLine.kind === 'quote') {
+            output.push(...wrapInlineToLines(formattedLine.text, bodyWidth, bodyColor, '│ '));
+            continue;
+        }
+        if (formattedLine.kind === 'code') {
+            const prev = formatted[index - 1];
+            if (prev && prev.kind !== 'code' && prev.kind !== 'blank') {
+                output.push(plainLine(''));
+            }
+            for (const wrapped of wrapText(formattedLine.text || ' ', bodyWidth)) {
+                output.push(plainLine(`    ${wrapped}`, { color: 'cyan' }));
+            }
+            const next = formatted[index + 1];
+            if (next && next.kind !== 'code' && next.kind !== 'blank') {
+                output.push(plainLine(''));
+            }
+            continue;
+        }
+        if (formattedLine.kind === 'table' && formattedLine.table) {
+            output.push(...renderTableLines(formattedLine.table, bodyWidth).map((tableLine) => {
+                const spans = tableLine.spans.map((part) => ({
+                    ...part,
+                    text: `  ${part.text}`,
+                }));
+                return { spans };
+            }));
+            continue;
+        }
+        if (formattedLine.kind === 'conflict-start') {
+            output.push(plainLine('  ━━ before ━━━━━━━━━━━━━━━', { color: 'red', dim: true }));
+            continue;
+        }
+        if (formattedLine.kind === 'conflict-sep') {
+            output.push(plainLine('  ━━━━━━━━━━━━━━━━━━━━━━━━━', { color: 'gray', dim: true }));
+            continue;
+        }
+        if (formattedLine.kind === 'conflict-end') {
+            output.push(plainLine('  ━━ after ━━━━━━━━━━━━━━━━', { color: 'green', dim: true }));
+            continue;
+        }
+        output.push(...wrapInlineToLines(formattedLine.text, bodyWidth, bodyColor, '  '));
+    }
+    return output;
+}
+export function renderPreformattedBodyLines(body, width, kind) {
+    const bodyColor = kind === 'error' ? 'red' : undefined;
+    const bodyWidth = Math.max(1, width - 8);
+    const output = [];
+    const normalizedBody = String(body ?? '').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    for (const rawLine of normalizedBody.split('\n')) {
+        if (rawLine === '') {
+            output.push(plainLine(''));
+            continue;
+        }
+        let remaining = rawLine;
+        while (remaining.length > bodyWidth) {
+            output.push(plainLine(`  ${remaining.slice(0, bodyWidth)}`, { color: bodyColor }));
+            remaining = remaining.slice(bodyWidth);
+        }
+        output.push(plainLine(`  ${remaining}`, { color: bodyColor }));
+    }
+    return output;
+}