dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/components/renderers/diff-shared.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from 'ink';
+import { diffWords } from 'diff';
+// =============================================================================
+// Diff Parsing
+// =============================================================================
+/**
+ * Parse unified diff into structured hunks
+ */
+export function parseUnifiedDiff(unified) {
+    const lines = unified.split('\n');
+    const hunks = [];
+    let currentHunk = null;
+    let oldLine = 0;
+    let newLine = 0;
+    for (const line of lines) {
+        if (line.startsWith('---') || line.startsWith('+++') || line.startsWith('Index:')) {
+            continue;
+        }
+        const hunkMatch = line.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/);
+        if (hunkMatch) {
+            if (currentHunk) {
+                hunks.push(currentHunk);
+            }
+            oldLine = parseInt(hunkMatch[1], 10);
+            newLine = parseInt(hunkMatch[3], 10);
+            currentHunk = {
+                oldStart: oldLine,
+                newStart: newLine,
+                lines: [],
+            };
+            continue;
+        }
+        if (!currentHunk)
+            continue;
+        if (line.startsWith('+')) {
+            currentHunk.lines.push({
+                type: 'addition',
+                content: line.slice(1),
+                lineNum: newLine++,
+            });
+        }
+        else if (line.startsWith('-')) {
+            currentHunk.lines.push({
+                type: 'deletion',
+                content: line.slice(1),
+                lineNum: oldLine++,
+            });
+        }
+        else if (line.startsWith(' ') || line === '') {
+            currentHunk.lines.push({
+                type: 'context',
+                content: line.startsWith(' ') ? line.slice(1) : line,
+                lineNum: newLine,
+            });
+            oldLine++;
+            newLine++;
+        }
+    }
+    if (currentHunk) {
+        hunks.push(currentHunk);
+    }
+    return hunks;
+}
+/**
+ * Find paired deletion/addition lines for word-level diff
+ */
+export function findLinePairs(lines) {
+    const pairs = new Map();
+    for (let i = 0; i < lines.length - 1; i++) {
+        const current = lines[i];
+        const next = lines[i + 1];
+        if (current.type === 'deletion' && next.type === 'addition') {
+            pairs.set(i, { del: current, add: next });
+        }
+    }
+    return pairs;
+}
+/**
+ * Compute word-level diff between two strings
+ */
+export function computeWordDiff(oldStr, newStr) {
+    const changes = diffWords(oldStr, newStr);
+    const oldParts = [];
+    const newParts = [];
+    for (const change of changes) {
+        if (change.added) {
+            newParts.push({ value: change.value, added: true });
+        }
+        else if (change.removed) {
+            oldParts.push({ value: change.value, removed: true });
+        }
+        else {
+            oldParts.push({ value: change.value });
+            newParts.push({ value: change.value });
+        }
+    }
+    return { oldParts, newParts };
+}
+// =============================================================================
+// Line Number Formatting
+// =============================================================================
+export function getLineNumWidth(maxLineNum) {
+    return Math.max(3, String(maxLineNum).length);
+}
+export function formatLineNum(num, width) {
+    return String(num).padStart(width, ' ');
+}
+/**
+ * Render a single diff line with true 2-column layout.
+ * Column 1: Fixed-width gutter (line number + symbol)
+ * Column 2: Fixed-width content area (remaining terminal width)
+ * This prevents content/backgrounds from leaking beyond boundaries.
+ */
+export function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns ?? 80;
+    const lineNumStr = formatLineNum(lineNum, lineNumWidth);
+    // Gutter: line number + space + symbol + space (e.g., " 42 - ")
+    const gutterWidth = lineNumWidth + 3;
+    // Content column width - remaining space after gutter and padding
+    // Account for padding (2 chars from DiffRenderer's paddingLeft)
+    const contentWidth = Math.max(20, terminalWidth - gutterWidth - 4);
+    // Get colors based on type
+    const getColors = () => {
+        switch (type) {
+            case 'deletion':
+                return { bg: '#662222', fg: 'white', symbol: '-', symbolColor: 'red' };
+            case 'addition':
+                return { bg: '#224466', fg: 'white', symbol: '+', symbolColor: 'blue' };
+            default:
+                return { bg: undefined, fg: undefined, symbol: ' ', symbolColor: undefined };
+        }
+    };
+    const colors = getColors();
+    // Render content with word-level diff highlighting if available
+    const renderContent = () => {
+        if (wordDiffParts && wordDiffParts.length > 0) {
+            return wordDiffParts.map((part, i) => {
+                if (type === 'deletion' && part.removed) {
+                    return (_jsx(Text, { backgroundColor: "#882222", children: part.value }, i));
+                }
+                else if (type === 'addition' && part.added) {
+                    return (_jsx(Text, { backgroundColor: "#224488", children: part.value }, i));
+                }
+                return _jsx(Text, { children: part.value }, i);
+            });
+        }
+        return content;
+    };
+    return (_jsxs(Box, { children: [_jsxs(Box, { width: gutterWidth, flexShrink: 0, children: [_jsx(Text, { color: "gray", children: lineNumStr }), _jsxs(Text, { color: colors.symbolColor, children: [" ", colors.symbol, " "] })] }), _jsx(Box, { width: contentWidth, flexShrink: 0, children: _jsx(Text, { backgroundColor: colors.bg, color: colors.fg, wrap: "wrap", children: renderContent() }) })] }));
+}
+/**
+ * Hunk separator component
+ */
+export function HunkSeparator() {
+    return (_jsx(Box, { children: _jsx(Text, { color: "gray", children: "..." }) }));
+}

package/dist/cli/ink-cli/components/renderers/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Tool Result Renderers
+ *
+ * Dispatch component that renders tool results based on display type.
+ * Uses discriminated union from ToolDisplayData for type-safe rendering.
+ */
+import type { ContentPart, ToolDisplayData } from '@dexto/core';
+export { DiffRenderer } from './DiffRenderer.js';
+export { ShellRenderer } from './ShellRenderer.js';
+export { SearchRenderer } from './SearchRenderer.js';
+export { FileRenderer } from './FileRenderer.js';
+export { GenericRenderer } from './GenericRenderer.js';
+export { DiffPreview, CreateFilePreview } from './FilePreviewRenderer.js';
+interface ToolResultRendererProps {
+    /** Display data from SanitizedToolResult.meta.display */
+    display?: ToolDisplayData;
+    /** Content parts from SanitizedToolResult.content */
+    content: ContentPart[];
+    /** Maximum lines/matches to display */
+    maxLines?: number;
+}
+/**
+ * Renders tool results based on display type.
+ * Falls back to GenericRenderer for unknown types or missing display data.
+ * Each renderer uses its own default limits - only pass maxLines to override.
+ */
+export declare function ToolResultRenderer({ display, content, maxLines }: ToolResultRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/cli/ink-cli/components/renderers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/renderers/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQhE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE1E,UAAU,uBAAuB;IAC7B,yDAAyD;IACzD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qDAAqD;IACrD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAgCzF"}

package/dist/cli/ink-cli/components/renderers/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DiffRenderer } from './DiffRenderer.js';
+import { ShellRenderer } from './ShellRenderer.js';
+import { SearchRenderer } from './SearchRenderer.js';
+import { FileRenderer } from './FileRenderer.js';
+import { GenericRenderer } from './GenericRenderer.js';
+// Re-export individual renderers for direct use
+export { DiffRenderer } from './DiffRenderer.js';
+export { ShellRenderer } from './ShellRenderer.js';
+export { SearchRenderer } from './SearchRenderer.js';
+export { FileRenderer } from './FileRenderer.js';
+export { GenericRenderer } from './GenericRenderer.js';
+// File preview renderers for approval prompts (full content, no truncation)
+export { DiffPreview, CreateFilePreview } from './FilePreviewRenderer.js';
+/**
+ * Renders tool results based on display type.
+ * Falls back to GenericRenderer for unknown types or missing display data.
+ * Each renderer uses its own default limits - only pass maxLines to override.
+ */
+export function ToolResultRenderer({ display, content, maxLines }) {
+    // Default to generic if no display data
+    const displayData = display ?? { type: 'generic' };
+    switch (displayData.type) {
+        case 'diff':
+            return (_jsx(DiffRenderer, { data: displayData, ...(maxLines !== undefined && { maxLines }) }));
+        case 'shell':
+            return (_jsx(ShellRenderer, { data: displayData, ...(maxLines !== undefined && { maxLines }) }));
+        case 'search':
+            return (_jsx(SearchRenderer, { data: displayData, ...(maxLines !== undefined && { maxMatches: maxLines }) }));
+        case 'file':
+            return _jsx(FileRenderer, { data: displayData });
+        case 'generic':
+        default:
+            return (_jsx(GenericRenderer, { content: content, ...(maxLines !== undefined && { maxLines }) }));
+    }
+}

package/dist/cli/ink-cli/components/shared/MarkdownText.d.ts

@@ -0,0 +1,38 @@
+/**
+ * MarkdownText Component
+ *
+ * Renders markdown text with terminal-appropriate styling.
+ * Handles both inline markdown (bold, code, italic) and block elements (headers, code blocks, lists).
+ *
+ * Uses wrap-ansi for proper word wrapping to avoid mid-word splits.
+ * Streaming-safe: incomplete markdown tokens won't match regex patterns,
+ * so they render as plain text until complete.
+ */
+import React from 'react';
+interface InlineSegment {
+    type: 'text' | 'bold' | 'code' | 'italic' | 'strikethrough' | 'link' | 'url';
+    content: string;
+    url?: string;
+}
+/**
+ * Parse inline markdown and return segments.
+ * Uses a single regex to find all inline patterns, processes in order.
+ */
+declare function parseInlineMarkdown(text: string): InlineSegment[];
+interface RenderInlineProps {
+    text: string;
+    defaultColor?: string;
+    /** Apply bold styling to all text segments (used for headers) */
+    bold?: boolean;
+}
+declare const RenderInline: React.NamedExoticComponent<RenderInlineProps>;
+interface MarkdownTextProps {
+    children: string;
+    /** Default text color */
+    color?: string;
+    /** Optional prefix for first line (e.g., "⏺ " for assistant messages) */
+    bulletPrefix?: string;
+}
+export declare const MarkdownText: React.NamedExoticComponent<MarkdownTextProps>;
+export { RenderInline, parseInlineMarkdown };
+//# sourceMappingURL=MarkdownText.d.ts.map

package/dist/cli/ink-cli/components/shared/MarkdownText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownText.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/shared/MarkdownText.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAwB,MAAM,OAAO,CAAC;AAU7C,UAAU,aAAa;IACnB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAG,KAAK,CAAC;IAC7E,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,EAAE,CAuE1D;AA0ID,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAkED,QAAA,MAAM,YAAY,+CAA6B,CAAC;AAMhD,UAAU,iBAAiB;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AA4RD,eAAO,MAAM,YAAY,+CAA6B,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/cli/ink-cli/components/shared/MarkdownText.js

@@ -0,0 +1,362 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * MarkdownText Component
+ *
+ * Renders markdown text with terminal-appropriate styling.
+ * Handles both inline markdown (bold, code, italic) and block elements (headers, code blocks, lists).
+ *
+ * Uses wrap-ansi for proper word wrapping to avoid mid-word splits.
+ * Streaming-safe: incomplete markdown tokens won't match regex patterns,
+ * so they render as plain text until complete.
+ */
+import { memo, useMemo } from 'react';
+import { Text, Box, useStdout } from 'ink';
+import chalk from 'chalk';
+import wrapAnsi from 'wrap-ansi';
+import stringWidth from 'string-width';
+/**
+ * Parse inline markdown and return segments.
+ * Uses a single regex to find all inline patterns, processes in order.
+ */
+function parseInlineMarkdown(text) {
+    // Early return for plain text without markdown indicators
+    if (!/[*_~`\[<]|https?:\/\//.test(text)) {
+        return [{ type: 'text', content: text }];
+    }
+    const segments = [];
+    let lastIndex = 0;
+    // Combined regex for all inline patterns
+    // Order matters: longer/more specific patterns first
+    const inlineRegex = /(\*\*[^*]+\*\*|__[^_]+__|`[^`]+`|\*[^*]+\*|_[^_]+_|~~[^~]+~~|\[[^\]]+\]\([^)]+\)|https?:\/\/[^\s<]+)/g;
+    let match;
+    while ((match = inlineRegex.exec(text)) !== null) {
+        // Add text before the match
+        if (match.index > lastIndex) {
+            segments.push({ type: 'text', content: text.slice(lastIndex, match.index) });
+        }
+        const fullMatch = match[0];
+        // Determine the type and extract content
+        if (fullMatch.startsWith('**') && fullMatch.endsWith('**') && fullMatch.length > 4) {
+            // Bold: **text**
+            segments.push({ type: 'bold', content: fullMatch.slice(2, -2) });
+        }
+        else if (fullMatch.startsWith('__') && fullMatch.endsWith('__') && fullMatch.length > 4) {
+            // Bold: __text__
+            segments.push({ type: 'bold', content: fullMatch.slice(2, -2) });
+        }
+        else if (fullMatch.startsWith('`') && fullMatch.endsWith('`') && fullMatch.length > 2) {
+            // Inline code: `code`
+            segments.push({ type: 'code', content: fullMatch.slice(1, -1) });
+        }
+        else if (fullMatch.startsWith('~~') && fullMatch.endsWith('~~') && fullMatch.length > 4) {
+            // Strikethrough: ~~text~~
+            segments.push({ type: 'strikethrough', content: fullMatch.slice(2, -2) });
+        }
+        else if (fullMatch.startsWith('*') && fullMatch.endsWith('*') && fullMatch.length > 2) {
+            // Italic: *text*
+            segments.push({ type: 'italic', content: fullMatch.slice(1, -1) });
+        }
+        else if (fullMatch.startsWith('_') && fullMatch.endsWith('_') && fullMatch.length > 2) {
+            // Italic: _text_
+            segments.push({ type: 'italic', content: fullMatch.slice(1, -1) });
+        }
+        else if (fullMatch.startsWith('[') &&
+            fullMatch.includes('](') &&
+            fullMatch.endsWith(')')) {
+            // Link: [text](url)
+            const linkMatch = fullMatch.match(/\[([^\]]+)\]\(([^)]+)\)/);
+            if (linkMatch && linkMatch[1] && linkMatch[2]) {
+                segments.push({ type: 'link', content: linkMatch[1], url: linkMatch[2] });
+            }
+            else {
+                segments.push({ type: 'text', content: fullMatch });
+            }
+        }
+        else if (/^https?:\/\//.test(fullMatch)) {
+            // Raw URL
+            segments.push({ type: 'url', content: fullMatch });
+        }
+        else {
+            // Fallback: render as plain text
+            segments.push({ type: 'text', content: fullMatch });
+        }
+        lastIndex = inlineRegex.lastIndex;
+    }
+    // Add remaining text after last match
+    if (lastIndex < text.length) {
+        segments.push({ type: 'text', content: text.slice(lastIndex) });
+    }
+    return segments;
+}
+// ============================================================================
+// ANSI String Conversion (for wrap-ansi compatibility)
+// ============================================================================
+/**
+ * Convert parsed markdown segments to an ANSI-escaped string.
+ * This allows wrap-ansi to properly handle styled text while word-wrapping.
+ */
+function segmentsToAnsi(segments, defaultColor) {
+    const colorFn = getChalkColor(defaultColor);
+    return segments
+        .map((segment) => {
+        switch (segment.type) {
+            case 'bold':
+                return colorFn.bold(segment.content);
+            case 'code':
+                return chalk.cyan(segment.content);
+            case 'italic':
+                return chalk.gray(segment.content);
+            case 'strikethrough':
+                return colorFn.strikethrough(segment.content);
+            case 'link':
+                return colorFn(segment.content) + chalk.blue(` (${segment.url})`);
+            case 'url':
+                return chalk.blue(segment.content);
+            default:
+                return colorFn(segment.content);
+        }
+    })
+        .join('');
+}
+/**
+ * Get chalk color function from color name
+ */
+function getChalkColor(color) {
+    switch (color) {
+        case 'white':
+            return chalk.white;
+        case 'gray':
+            return chalk.gray;
+        case 'blue':
+            return chalk.blue;
+        case 'cyan':
+            return chalk.cyan;
+        case 'green':
+            return chalk.green;
+        case 'yellow':
+            return chalk.rgb(255, 165, 0);
+        case 'orange':
+            return chalk.rgb(255, 165, 0);
+        case 'red':
+            return chalk.red;
+        case 'magenta':
+            return chalk.green;
+        default:
+            return chalk.white;
+    }
+}
+/**
+ * Renders a paragraph with proper word wrapping using wrap-ansi.
+ * Handles bullet prefix with continuation line indentation.
+ */
+const WrappedParagraphInternal = ({ text, defaultColor, bulletPrefix, isFirstParagraph = false, }) => {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns ?? 80;
+    const wrappedLines = useMemo(() => {
+        // Parse markdown and convert to ANSI string
+        const segments = parseInlineMarkdown(text);
+        const ansiString = segmentsToAnsi(segments, defaultColor);
+        // Calculate available width
+        const prefixWidth = bulletPrefix && isFirstParagraph ? stringWidth(bulletPrefix) : 0;
+        const availableWidth = Math.max(20, terminalWidth - prefixWidth);
+        // Word-wrap the ANSI string
+        const wrapped = wrapAnsi(ansiString, availableWidth, {
+            hard: false, // Don't break in the middle of words
+            wordWrap: true, // Enable word wrapping
+            trim: false, // Don't trim whitespace
+        });
+        return wrapped.split('\n');
+    }, [text, defaultColor, bulletPrefix, isFirstParagraph, terminalWidth]);
+    // Calculate indent for continuation lines (spaces to align with first line content)
+    const continuationIndent = bulletPrefix && isFirstParagraph ? ' '.repeat(stringWidth(bulletPrefix)) : '';
+    return (_jsx(_Fragment, { children: wrappedLines.map((line, i) => {
+            const isFirstLine = i === 0;
+            const prefix = isFirstLine && bulletPrefix && isFirstParagraph
+                ? bulletPrefix
+                : continuationIndent;
+            return (_jsx(Box, { children: _jsxs(Text, { children: [prefix, line] }) }, i));
+        }) }));
+};
+const WrappedParagraph = memo(WrappedParagraphInternal);
+/**
+ * Renders inline markdown segments with appropriate styling.
+ * Used for headers and other content that doesn't need word wrapping.
+ */
+const RenderInlineInternal = ({ text, defaultColor = 'white', bold: baseBold = false, }) => {
+    const segments = parseInlineMarkdown(text);
+    return (_jsx(_Fragment, { children: segments.map((segment, i) => {
+            switch (segment.type) {
+                case 'bold':
+                    return (_jsx(Text, { bold: true, color: defaultColor, children: segment.content }, i));
+                case 'code':
+                    return (_jsx(Text, { bold: baseBold, color: "cyan", children: segment.content }, i));
+                case 'italic':
+                    return (_jsx(Text, { bold: baseBold, color: "gray", children: segment.content }, i));
+                case 'strikethrough':
+                    return (_jsx(Text, { bold: baseBold, strikethrough: true, color: defaultColor, children: segment.content }, i));
+                case 'link':
+                    return (_jsxs(Text, { bold: baseBold, color: defaultColor, children: [segment.content, _jsxs(Text, { color: "blue", children: [" (", segment.url, ")"] })] }, i));
+                case 'url':
+                    return (_jsx(Text, { bold: baseBold, color: "blue", children: segment.content }, i));
+                default:
+                    return (_jsx(Text, { bold: baseBold, color: defaultColor, children: segment.content }, i));
+            }
+        }) }));
+};
+const RenderInline = memo(RenderInlineInternal);
+/**
+ * Main MarkdownText component.
+ * Handles block-level elements (headers, code blocks, lists) and delegates
+ * paragraph rendering to WrappedParagraph for proper word wrapping.
+ */
+const MarkdownTextInternal = ({ children, color = 'white', bulletPrefix, }) => {
+    if (!children)
+        return null;
+    const defaultColor = color;
+    const lines = children.split('\n');
+    let isFirstContentLine = true; // Track first actual content for bullet prefix
+    // Regex patterns for block elements
+    const headerRegex = /^(#{1,6})\s+(.*)$/;
+    const codeFenceRegex = /^(`{3,}|~{3,})(\w*)$/;
+    const ulItemRegex = /^(\s*)([-*+])\s+(.*)$/;
+    const olItemRegex = /^(\s*)(\d+)\.\s+(.*)$/;
+    // CommonMark allows spaces between HR characters (e.g., "- - -" or "* * *")
+    const hrRegex = /^(\s*[-*_]\s*){3,}$/;
+    const blocks = [];
+    let inCodeBlock = false;
+    let codeBlockLines = [];
+    let codeBlockLang = '';
+    let codeBlockFence = '';
+    lines.forEach((line, index) => {
+        const key = `line-${index}`;
+        const trimmedLine = line.trim();
+        // Handle code block state
+        if (inCodeBlock) {
+            const fenceMatch = trimmedLine.match(codeFenceRegex);
+            // Per CommonMark spec, closing fence must use same character and be at least as long
+            if (fenceMatch &&
+                fenceMatch[1] &&
+                codeBlockFence[0] &&
+                fenceMatch[1][0] === codeBlockFence[0] &&
+                fenceMatch[1].length >= codeBlockFence.length) {
+                // End of code block
+                blocks.push(_jsx(RenderCodeBlock, { lines: codeBlockLines, language: codeBlockLang }, key));
+                inCodeBlock = false;
+                codeBlockLines = [];
+                codeBlockLang = '';
+                codeBlockFence = '';
+            }
+            else {
+                codeBlockLines.push(line);
+            }
+            return;
+        }
+        // Check for code fence start
+        const codeFenceMatch = trimmedLine.match(codeFenceRegex);
+        if (codeFenceMatch && codeFenceMatch[1]) {
+            inCodeBlock = true;
+            codeBlockFence = codeFenceMatch[1];
+            codeBlockLang = codeFenceMatch[2] || '';
+            return;
+        }
+        // Headers
+        const headerMatch = line.match(headerRegex);
+        if (headerMatch && headerMatch[1] && headerMatch[2] !== undefined) {
+            const level = headerMatch[1].length;
+            const headerText = headerMatch[2];
+            blocks.push(_jsx(RenderHeader, { level: level, text: headerText }, key));
+            return;
+        }
+        // Horizontal rule
+        if (hrRegex.test(trimmedLine)) {
+            blocks.push(_jsx(Box, { children: _jsx(Text, { color: "gray", children: '─'.repeat(40) }) }, key));
+            return;
+        }
+        // Unordered list
+        const ulMatch = line.match(ulItemRegex);
+        if (ulMatch && ulMatch[1] !== undefined && ulMatch[3] !== undefined) {
+            const indent = ulMatch[1].length;
+            const itemText = ulMatch[3];
+            blocks.push(_jsx(RenderListItem, { indent: indent, marker: "-", text: itemText, defaultColor: defaultColor }, key));
+            return;
+        }
+        // Ordered list
+        const olMatch = line.match(olItemRegex);
+        if (olMatch && olMatch[1] !== undefined && olMatch[2] && olMatch[3] !== undefined) {
+            const indent = olMatch[1].length;
+            const number = olMatch[2];
+            const itemText = olMatch[3];
+            blocks.push(_jsx(RenderListItem, { indent: indent, marker: `${number}.`, text: itemText, defaultColor: defaultColor }, key));
+            return;
+        }
+        // Empty line - add spacing
+        if (trimmedLine.length === 0) {
+            blocks.push(_jsx(Box, { height: 1 }, key));
+            return;
+        }
+        // Regular paragraph line - use WrappedParagraph for proper word wrapping
+        const usePrefix = isFirstContentLine && bulletPrefix;
+        blocks.push(_jsx(WrappedParagraph, { text: line, defaultColor: defaultColor, ...(bulletPrefix && { bulletPrefix }), isFirstParagraph: usePrefix ? true : false }, key));
+        if (usePrefix) {
+            isFirstContentLine = false;
+        }
+    });
+    // Handle unclosed code block (streaming case)
+    if (inCodeBlock && codeBlockLines.length > 0) {
+        blocks.push(_jsx(RenderCodeBlock, { lines: codeBlockLines, language: codeBlockLang, isPending: true }, "code-pending"));
+    }
+    // Wrap in column layout
+    return _jsx(Box, { flexDirection: "column", children: blocks });
+};
+const RenderHeaderInternal = ({ level, text }) => {
+    // Color based on header level
+    const headerColors = {
+        1: 'blue',
+        2: 'cyan',
+        3: 'white',
+        4: 'gray',
+        5: 'gray',
+        6: 'gray',
+    };
+    const headerColor = headerColors[level] || 'white';
+    return (_jsx(Box, { marginTop: level <= 2 ? 1 : 0, children: _jsx(RenderInline, { text: text, defaultColor: headerColor, bold: true }) }));
+};
+const RenderHeader = memo(RenderHeaderInternal);
+/**
+ * List item with proper word wrapping using wrap-ansi.
+ * Continuation lines are indented to align with the first line content.
+ */
+const RenderListItemInternal = ({ indent, marker, text, defaultColor, }) => {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns ?? 80;
+    const paddingLeft = Math.floor(indent / 2);
+    const markerWithSpace = `${marker} `;
+    const markerWidth = stringWidth(markerWithSpace);
+    const wrappedLines = useMemo(() => {
+        // Parse markdown and convert to ANSI string
+        const segments = parseInlineMarkdown(text);
+        const ansiString = segmentsToAnsi(segments, defaultColor);
+        // Available width = terminal - padding - marker
+        const availableWidth = Math.max(20, terminalWidth - paddingLeft - markerWidth);
+        // Word-wrap the ANSI string
+        const wrapped = wrapAnsi(ansiString, availableWidth, {
+            hard: false,
+            wordWrap: true,
+            trim: false,
+        });
+        return wrapped.split('\n');
+    }, [text, defaultColor, terminalWidth, paddingLeft, markerWidth]);
+    const continuationIndent = ' '.repeat(markerWidth);
+    return (_jsx(Box, { paddingLeft: paddingLeft, flexDirection: "column", children: wrappedLines.map((line, i) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: defaultColor, children: i === 0 ? markerWithSpace : continuationIndent }), _jsx(Text, { children: line })] }, i))) }));
+};
+const RenderListItem = memo(RenderListItemInternal);
+const RenderCodeBlockInternal = ({ lines, language, isPending, }) => {
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [language && _jsx(Text, { color: "gray", children: language }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [lines.map((line, i) => (_jsx(Text, { color: "cyan", children: line }, i))), isPending && _jsx(Text, { color: "gray", children: "..." })] })] }));
+};
+const RenderCodeBlock = memo(RenderCodeBlockInternal);
+// ============================================================================
+// Exports
+// ============================================================================
+export const MarkdownText = memo(MarkdownTextInternal);
+// Also export inline renderer for use in other components
+export { RenderInline, parseInlineMarkdown };

package/dist/cli/ink-cli/components/shared/VirtualizedList.d.ts

@@ -0,0 +1,44 @@
+/**
+ * VirtualizedList Component
+ * Only renders items visible in the viewport for performance.
+ */
+import type React from 'react';
+export declare const SCROLL_TO_ITEM_END: number;
+type VirtualizedListProps<T> = {
+    data: T[];
+    renderItem: (info: {
+        item: T;
+        index: number;
+    }) => React.ReactElement;
+    estimatedItemHeight: (index: number) => number;
+    keyExtractor: (item: T, index: number) => string;
+    initialScrollIndex?: number;
+    initialScrollOffsetInIndex?: number;
+    scrollbarThumbColor?: string;
+};
+export type VirtualizedListRef<T> = {
+    scrollBy: (delta: number) => void;
+    scrollTo: (offset: number) => void;
+    scrollToEnd: () => void;
+    scrollToIndex: (params: {
+        index: number;
+        viewOffset?: number;
+        viewPosition?: number;
+    }) => void;
+    scrollToItem: (params: {
+        item: T;
+        viewOffset?: number;
+        viewPosition?: number;
+    }) => void;
+    getScrollIndex: () => number;
+    getScrollState: () => {
+        scrollTop: number;
+        scrollHeight: number;
+        innerHeight: number;
+    };
+};
+export declare const VirtualizedList: <T>(props: VirtualizedListProps<T> & {
+    ref?: React.Ref<VirtualizedListRef<T>>;
+}) => React.ReactElement;
+export {};
+//# sourceMappingURL=VirtualizedList.d.ts.map