linecraft 0.5.3 → 0.5.5

package/lib/components/code-debug.js

@@ -1,107 +1,21 @@
 // Code debug component for displaying code errors/warnings with context
 import { callComponent } from '../component.js';
 import { applyStyle } from '../utils/colors.js';
-import { wrapText, stripAnsi, truncateToWidth } from '../utils/text.js';
+import { stripAnsi, truncateToWidth, truncateFocusRange, mapColumnToDisplay, countVisibleChars, splitAtVisiblePos } from '../utils/text.js';
+import { logToFile } from '../utils/debug-log.js';
+import { fileLink } from '../utils/file-link.js';
+import { Styled } from './styled.js';
 import { grid as Grid } from '../layout/grid.js';
 import { getLineNumberColor, isDarkTerminal } from '../utils/terminal-theme.js';
-function calculateVisibleRange(code, availableWidth, targetStartCol, targetEndCol, maxColumn) {
-    const plainCode = stripAnsi(code);
-    const codeLength = plainCode.length;
-    // If code fits, show everything
-    if (codeLength <= availableWidth) {
-        return {
-            startCol: 1,
-            endCol: codeLength,
-            hasEllipsisStart: false,
-            hasEllipsisEnd: false,
-        };
-    }
-    // If maxColumn is set, we need to ensure we don't show beyond it
-    const effectiveMaxCol = maxColumn ? Math.min(maxColumn, codeLength) : codeLength;
-    // Calculate how much space we need for the target columns
-    const targetWidth = targetEndCol
-        ? targetEndCol - targetStartCol + 1
-        : 1; // Just the arrow
-    // If target doesn't fit, we'll need to truncate
-    if (targetWidth > availableWidth - 6) { // -6 for ellipsis on both sides if needed
-        // Target is too wide, just show middle with ellipsis
-        const midPoint = Math.floor((availableWidth - 6) / 2);
-        const startCol = Math.max(1, targetStartCol - midPoint);
-        const endCol = Math.min(effectiveMaxCol, startCol + availableWidth - 6);
-        return {
-            startCol,
-            endCol,
-            hasEllipsisStart: startCol > 1,
-            hasEllipsisEnd: endCol < codeLength,
-        };
-    }
-    // Try to center the target in the available space
-    const padding = Math.floor((availableWidth - targetWidth) / 2);
-    let startCol = Math.max(1, targetStartCol - padding);
-    let endCol = Math.min(effectiveMaxCol, startCol + availableWidth - 1);
-    // Adjust if we hit boundaries
-    if (endCol - startCol + 1 > availableWidth) {
-        endCol = startCol + availableWidth - 1;
-    }
-    if (endCol > effectiveMaxCol) {
-        endCol = effectiveMaxCol;
-        startCol = Math.max(1, endCol - availableWidth + 1);
-    }
-    if (startCol < 1) {
-        startCol = 1;
-        endCol = Math.min(effectiveMaxCol, availableWidth);
-    }
-    // Check if we need ellipsis
-    const hasEllipsisStart = startCol > 1;
-    const hasEllipsisEnd = endCol < codeLength;
-    return {
-        startCol,
-        endCol,
-        hasEllipsisStart,
-        hasEllipsisEnd,
-    };
-}
-/**
- * Truncate code line to show specific column range with ellipsis
- */
-function truncateCodeLine(code, visibleRange, availableWidth) {
-    const { startCol, endCol, hasEllipsisStart, hasEllipsisEnd } = visibleRange;
-    const plainCode = stripAnsi(code);
-    if (!hasEllipsisStart && !hasEllipsisEnd) {
-        // No truncation needed, but ensure it fits
-        return truncateToWidth(code, availableWidth);
-    }
-    // Extract the visible portion (1-based columns in plain text)
-    const visiblePlain = plainCode.substring(startCol - 1, endCol);
-    // Calculate available width for code (minus ellipsis)
-    const ellipsisWidth = (hasEllipsisStart ? 3 : 0) + (hasEllipsisEnd ? 3 : 0);
-    const codeWidth = availableWidth - ellipsisWidth;
-    // Truncate the visible portion if it's still too wide
-    let truncatedPlain = visiblePlain;
-    if (stripAnsi(visiblePlain).length > codeWidth) {
-        truncatedPlain = truncateToWidth(visiblePlain, codeWidth);
-    }
-    if (hasEllipsisStart && hasEllipsisEnd) {
-        // Truncate both ends - show middle portion
-        const midPoint = Math.floor(codeWidth / 2);
-        const startPart = truncateToWidth(truncatedPlain, midPoint);
-        const endPart = truncateToWidth(truncatedPlain.substring(stripAnsi(truncatedPlain).length - (codeWidth - midPoint)), codeWidth - midPoint);
-        return `...${startPart}...${endPart}...`;
-    }
-    else if (hasEllipsisStart) {
-        return `...${truncatedPlain}`;
-    }
-    else {
-        return `${truncatedPlain}...`;
-    }
-}
 /**
  * CodeDebug component - displays code errors/warnings with context
  */
 export function CodeDebug(options) {
     return (ctx) => {
-        const { startLine, startColumn, endLine, endColumn, lineBefore, errorLine, lineAfter, message, errorCode, shortMessage, filePath, fullPath, baseDir, type = 'error', maxColumn, } = options;
-        const availableWidth = ctx.availableWidth;
+        const { startLine, startColumn, endColumn, lineBefore, errorLine, lineAfter, message, errorCode, shortMessage, shortMessagePlacement = 'auto', filePath, fullPath, baseDir, type = 'error', maxColumn, } = options;
+        // If availableWidth is Infinity (during Grid measurement), use a reasonable default
+        // Otherwise use the actual available width
+        const availableWidth = Number.isFinite(ctx.availableWidth) ? ctx.availableWidth : 80;
         // Color scheme based on type
         const colors = {
             error: { primary: 'red', secondary: 'brightRed', message: 'brightRed' },
@@ -111,6 +25,8 @@ export function CodeDebug(options) {
         const colorScheme = colors[type];
         // Get appropriate line number color based on terminal theme (muted color)
         const lineNumberColor = getLineNumberColor(); // For line numbers (muted)
+        // Use brightBlack for line numbers (visible but not too bright)
+        const lineNumColor = isDarkTerminal() ? 'brightBlack' : 'black';
         // Calculate available width for code (reserve space for line numbers, separator, and spaces)
         // Calculate the maximum width needed for any line number that will be displayed
         const lineNumbersToCheck = [startLine];
@@ -122,226 +38,279 @@ export function CodeDebug(options) {
         }
         const lineNumWidth = Math.max(...lineNumbersToCheck.map(n => String(n).length));
         const codeAreaWidth = availableWidth - lineNumWidth - 3; // -3 for " │ " (space, pipe, space)
-        // Calculate visible range for error line
+        // Use truncateFocusRange to show the target range with proper truncation
         const targetEndCol = endColumn ?? startColumn;
-        const plainErrorLine = stripAnsi(errorLine);
-        const effectiveMaxCol = maxColumn ? Math.min(maxColumn, plainErrorLine.length) : plainErrorLine.length;
-        const visibleRange = calculateVisibleRange(errorLine, codeAreaWidth, startColumn, targetEndCol, effectiveMaxCol);
-        // Truncate error line
-        const truncatedErrorLine = truncateCodeLine(errorLine, visibleRange, codeAreaWidth);
-        // Calculate arrow/underline position relative to the truncated error line display
-        // Map original column positions to display positions
-        const truncatedPlain = stripAnsi(truncatedErrorLine);
-        // Helper to map original column to display position
-        const mapColumnToDisplay = (originalCol) => {
-            if (visibleRange.hasEllipsisStart && visibleRange.hasEllipsisEnd) {
-                // Format: "...start...end..."
-                // Visible range is in the middle
-                if (originalCol < visibleRange.startCol) {
-                    return 1; // Before visible, point to start
-                }
-                else if (originalCol > visibleRange.endCol) {
-                    return truncatedPlain.length; // After visible, point to end
-                }
-                else {
-                    // In visible range: position = 4 (for "...") + (col - startCol + 1)
-                    return 4 + (originalCol - visibleRange.startCol);
-                }
-            }
-            else if (visibleRange.hasEllipsisStart) {
-                // Format: "...code"
-                if (originalCol < visibleRange.startCol) {
-                    return 1;
-                }
-                else {
-                    return 4 + (originalCol - visibleRange.startCol);
-                }
-            }
-            else if (visibleRange.hasEllipsisEnd) {
-                // Format: "code..."
-                if (originalCol > visibleRange.endCol) {
-                    return truncatedPlain.length;
-                }
-                else {
-                    return originalCol;
-                }
-            }
-            else {
-                // No ellipsis, direct mapping
-                return originalCol;
+        const defaultCodeColor = isDarkTerminal() ? 'brightBlack' : 'black';
+        const styledErrorLine = applyStyle(errorLine, { color: defaultCodeColor });
+        const truncateResult = truncateFocusRange(styledErrorLine, codeAreaWidth, startColumn, targetEndCol, maxColumn);
+        const truncatedErrorLine = truncateResult.text;
+        const visibleStartCol = truncateResult.visibleStartCol;
+        const visibleEndCol = truncateResult.visibleEndCol;
+        const rangeStartCol = truncateResult.rangeStartCol;
+        const rangeEndCol = truncateResult.rangeEndCol;
+        // Helper to map original column to display position using the actual visible range
+        const mapColumnToDisplayLocal = (originalCol) => {
+            const result = mapColumnToDisplay(errorLine, truncatedErrorLine, visibleStartCol, visibleEndCol, originalCol, rangeStartCol, rangeEndCol);
+            // Debug logging
+            if (originalCol === startColumn || originalCol === endColumn) {
+                const truncatedPlain = stripAnsi(truncatedErrorLine);
+                const charAtPos = truncatedPlain[result - 1] || '?';
+                const expectedChar = errorLine[originalCol - 1] || '?';
+                logToFile(`[code-debug] Width: ${codeAreaWidth}, OriginalCol: ${originalCol}, DisplayPos: ${result}, Char: '${charAtPos}' (expected '${expectedChar}'), VisibleRange: ${visibleStartCol}-${visibleEndCol}, Truncated: "${truncatedPlain.substring(0, 50)}..."`);
             }
+            return result;
         };
         // Build the code block lines
         const codeLines = [];
         // Icon and message at the top (Oxlint style)
+        // Use grid to handle wrapping automatically
         const icon = type === 'error' ? '✖' : type === 'warning' ? '⚠' : 'ℹ';
         const iconStyled = applyStyle(icon, { color: colorScheme.message });
-        // Build the message text with optional error code
-        let messageText = message;
+        // Build the combined message text: errorCode (if present) + message
+        // The errorCode should be underlined and bold, followed by ": ", then the message
+        // All parts should have the message color
+        let messageText;
         if (errorCode) {
-            // Error code with underline - only underline the code, not the colon and space
             const errorCodeStyled = applyStyle(errorCode, {
                 color: colorScheme.message,
                 underline: true,
                 bold: true
             });
-            messageText = errorCodeStyled + ': ' + applyStyle(message, { color: colorScheme.message, bold: true });
+            // Apply message color to ": " and message parts so they maintain color after errorCode's reset
+            const colonAndMessage = applyStyle(': ' + message, { color: colorScheme.message });
+            messageText = errorCodeStyled + colonAndMessage;
         }
         else {
-            messageText = applyStyle(message, { color: colorScheme.message, bold: true });
+            messageText = message;
         }
-        // Use grid to layout: [icon (1 char)] [message (flex)]
-        // This ensures the message doesn't overflow under the icon
-        // Calculate available width for message (icon + gap + message column)
-        const iconWidth = 1; // Icon is 1 character
-        const gapWidth = 1; // columnGap is 1
-        const messageAvailableWidth = ctx.availableWidth - iconWidth - gapWidth;
-        // Wrap the message text to fit in the available width
-        // First, get the plain text to calculate wrapping
-        const plainMessageText = stripAnsi(messageText);
-        const wrappedPlainLines = wrapText(plainMessageText, messageAvailableWidth);
-        // Now we need to preserve ANSI codes in the wrapped lines
-        // For simplicity, if the message wraps, we'll create a component that returns multiple lines
-        const messageComponent = (msgCtx) => {
-            // Recalculate available width for this context
-            const msgWidth = msgCtx.availableWidth - iconWidth - gapWidth;
-            const wrapped = wrapText(plainMessageText, msgWidth);
-            // For each wrapped line, we need to preserve the ANSI styling
-            // Since the message text has ANSI codes, we need to split it while preserving codes
-            if (wrapped.length === 1) {
-                // Single line - return as is
-                return messageText;
-            }
-            // Multiple lines - we need to split the styled text
-            // This is complex because we need to preserve ANSI codes across splits
-            // For now, let's use a simpler approach: wrap the plain text and re-apply styling
-            const wrappedStyled = [];
-            let currentPos = 0;
-            for (const wrappedLine of wrapped) {
-                // Find the corresponding portion in the original styled text
-                // We'll use a simple approach: measure visible characters
-                const lineLength = wrappedLine.length;
-                let styledPortion = '';
-                let visibleCount = 0;
-                let idx = currentPos;
-                while (idx < messageText.length && visibleCount < lineLength) {
-                    if (messageText[idx] === '\x1b') {
-                        // ANSI code - include it
-                        let end = idx + 1;
-                        while (end < messageText.length && messageText[end] !== 'm') {
-                            end++;
-                        }
-                        if (end < messageText.length) {
-                            end++;
-                        }
-                        styledPortion += messageText.substring(idx, end);
-                        idx = end;
-                    }
-                    else {
-                        styledPortion += messageText[idx];
-                        idx++;
-                        visibleCount++;
-                    }
-                }
-                wrappedStyled.push(styledPortion);
-                currentPos = idx;
-            }
-            return wrappedStyled;
-        };
+        // Use Styled component to handle wrapping - it uses wrapText which prevents mid-word breaks
+        // Note: messageText may already have ANSI codes, so Styled will preserve them
+        const messageComponent = Styled({ color: colorScheme.message, overflow: 'wrap' }, messageText);
+        // Use 2-column grid: [icon, message (with optional errorCode)]
         const messageGrid = Grid({ template: [1, '1*'], columnGap: 1 }, iconStyled, messageComponent);
         const messageResult = callComponent(messageGrid, ctx);
+        const messageLines = [];
         if (messageResult && typeof messageResult === 'string') {
-            codeLines.push(messageResult);
+            messageLines.push(messageResult);
         }
         else if (Array.isArray(messageResult)) {
-            codeLines.push(...messageResult);
+            messageLines.push(...messageResult);
         }
         else {
-            // Fallback if grid returns null - just concatenate with space
-            codeLines.push(iconStyled + ' ' + messageText);
+            messageLines.push(iconStyled + ' ' + message);
         }
+        codeLines.push(...messageLines);
         // Add blank line after message before code block
         codeLines.push('');
         // Filename in brackets with line:column, connected with curved border (Oxlint style)
-        // The curve should align with the line number column (accounting for line number width)
         const pathText = baseDir && filePath.startsWith(baseDir)
             ? filePath.substring(baseDir.length + 1)
             : filePath;
-        // Only make the filename blue/bold, not the brackets, colons, or line/column numbers
-        const locationText = '[' +
-            applyStyle(pathText, { color: 'blue', bold: true }) +
-            ':' +
-            String(startLine) +
-            ':' +
-            String(startColumn) +
-            ']';
-        // Align curve with line numbers: lineNumWidth spaces + 1 space (for the space after line number)
+        // Build location line parts
         const curveIndent = ' '.repeat(lineNumWidth + 1);
-        const locationLine = curveIndent + applyStyle('╭─', { color: 'brightBlack' }) + locationText;
-        codeLines.push(locationLine);
+        const curve = applyStyle('╭─', { color: 'brightBlack' });
+        const bracketOpen = '[';
+        const colon1 = ':';
+        // Apply subtle color to line/column numbers (not colons) - use magenta for location line
+        const locationNumColor = isDarkTerminal() ? 'magenta' : 'magenta';
+        const lineNum = applyStyle(String(startLine), { color: locationNumColor });
+        const colon2 = ':';
+        const colNum = applyStyle(String(startColumn), { color: locationNumColor });
+        const bracketClose = ']';
+        // Calculate max width for path: available width minus fixed parts
+        // Fixed parts: curveIndent + ╭─ + [ + : + lineNum + : + colNum + ]
+        // Note: lineNum and colNum are now styled, so we need to use plain strings for width calculation
+        const lineNumPlain = String(startLine);
+        const colNumPlain = String(startColumn);
+        const fixedParts = curveIndent + curve + bracketOpen + colon1 + lineNumPlain + colon2 + colNumPlain + bracketClose;
+        const fixedPartsWidth = countVisibleChars(fixedParts);
+        // Ensure pathMaxWidth is finite and reasonable (cap at 40 to prevent extremely long paths)
+        const pathMaxWidth = Math.max(10, Math.min(40, availableWidth - fixedPartsWidth));
+        // Create clickable file link with styling and max width constraint
+        const pathWithLink = fileLink(fullPath, pathText);
+        const pathStyled = Styled({ color: 'blue', bold: true, overflow: 'ellipsis-start', max: pathMaxWidth }, pathWithLink);
+        // Use Grid with auto columns (content-based width, no padding)
+        // Template: [curveIndent (auto)][╭─ (auto)][[ (auto)][path (auto)][: (auto)][line (auto)][: (auto)][column (auto)][] (auto)]
+        const locationGrid = Grid({
+            template: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
+            columnGap: 0
+        }, curveIndent, curve, bracketOpen, pathStyled, colon1, lineNum, colon2, colNum, bracketClose);
+        const locationResult = callComponent(locationGrid, ctx);
+        if (locationResult && typeof locationResult === 'string') {
+            codeLines.push(locationResult);
+        }
+        else if (Array.isArray(locationResult)) {
+            codeLines.push(...locationResult);
+        }
+        else {
+            // Fallback
+            const locationLine = curveIndent + curve + bracketOpen + pathText + colon1 + lineNum + colon2 + colNum + bracketClose;
+            codeLines.push(locationLine);
+        }
         // Line before (if exists)
         if (lineBefore !== null && lineBefore !== undefined) {
             const beforeLineNum = String(startLine - 1);
             const beforeLineNumPadded = beforeLineNum.padStart(lineNumWidth);
             const truncatedBefore = truncateToWidth(lineBefore, codeAreaWidth);
-            codeLines.push(applyStyle(`${beforeLineNumPadded} `, { color: lineNumberColor, dim: isDarkTerminal() }) +
-                applyStyle('│ ', { color: 'brightBlack' }) + truncatedBefore);
+            // Make non-error lines slightly dimmer: darker on dark terminals, whiter on light terminals
+            const dimmedBefore = isDarkTerminal()
+                ? applyStyle(truncatedBefore, { dim: true })
+                : applyStyle(truncatedBefore, { color: 'brightBlack' });
+            codeLines.push(applyStyle(`${beforeLineNumPadded} `, { color: lineNumColor }) +
+                applyStyle('│ ', { color: 'brightBlack' }) + dimmedBefore);
         }
         // Error line (with space before code)
+        // truncatedErrorLine already has the default color applied
+        let highlightedErrorLine = truncatedErrorLine;
+        // Highlight the error range if endColumn is specified
+        if (endColumn && endColumn > startColumn) {
+            // Map columns to display positions in the truncated (and styled) text
+            // We need to map based on the plain truncated text, then account for ANSI codes
+            const truncatedPlain = stripAnsi(truncatedErrorLine);
+            const highlightStart = mapColumnToDisplayLocal(startColumn); // 1-based display position
+            const highlightEnd = mapColumnToDisplayLocal(endColumn); // 1-based display position
+            // Split at highlight start and end positions (splitAtVisiblePos uses 0-based)
+            const { before: beforeHighlight, after: remainingAfterStart } = splitAtVisiblePos(highlightedErrorLine, highlightStart - 1);
+            const highlightLength = highlightEnd - highlightStart + 1;
+            const { before: highlightRange, after: afterHighlight } = splitAtVisiblePos(remainingAfterStart, highlightLength);
+            // Strip existing ANSI codes from highlight range and apply new highlight color
+            // This ensures the highlight color properly overrides the default code color
+            const highlightColor = isDarkTerminal() ? 'white' : 'black';
+            const highlightPlain = stripAnsi(highlightRange);
+            const highlightedRangeStyled = applyStyle(highlightPlain, { color: highlightColor });
+            highlightedErrorLine = beforeHighlight + highlightedRangeStyled + afterHighlight;
+        }
         const errorLineNum = String(startLine);
         const errorLineNumPadded = errorLineNum.padStart(lineNumWidth);
-        let errorLineDisplay = applyStyle(`${errorLineNumPadded} `, { color: lineNumberColor, dim: isDarkTerminal() }) +
-            applyStyle('│ ', { color: 'brightBlack' }) + truncatedErrorLine;
+        let errorLineDisplay = applyStyle(`${errorLineNumPadded} `, { color: lineNumColor }) +
+            applyStyle('│ ', { color: 'brightBlack' }) + highlightedErrorLine;
         codeLines.push(errorLineDisplay);
         // Underline line (Oxlint style)
         // Format: "[lineNumWidth spaces][1 space][│][1 space][dots][underline]"
         // Calculate positions relative to the code (after "│ ")
-        const underlineStartInCode = mapColumnToDisplay(startColumn);
-        const underlineEndInCode = endColumn ? mapColumnToDisplay(endColumn) : underlineStartInCode;
+        const underlineStartInCode = mapColumnToDisplayLocal(startColumn);
+        const underlineEndInCode = endColumn ? mapColumnToDisplayLocal(endColumn) : underlineStartInCode;
         const underlineLength = underlineEndInCode - underlineStartInCode + 1;
-        // Spaces to align with the start of the underline (position in code, 1-based, minus 1 for 0-based)
+        // Spaces to align with the start of the underline
+        // underlineStartInCode is position in truncated text (which is what's displayed after │ )
+        // The ellipsis is PART of the displayed text, so we use the position directly
+        // Position is 1-based, so spacesBefore = underlineStartInCode - 1
         const spacesBefore = Math.max(0, underlineStartInCode - 1);
         // Underline line: line number width + space + │ + space + spaces + underline
-        let underlineLine = ' '.repeat(lineNumWidth) + ' ' + applyStyle('│', { color: 'brightBlack' }) + ' ';
-        if (shortMessage && underlineLength > 1) {
-            // Multi-character underline with T-bar in the middle for short message
-            const connectPosInUnderline = Math.floor(underlineLength / 2);
-            const leftPart = '─'.repeat(connectPosInUnderline);
-            const rightPart = '─'.repeat(underlineLength - connectPosInUnderline - 1);
-            underlineLine += ' '.repeat(spacesBefore) +
-                applyStyle(leftPart + '┬' + rightPart, { color: colorScheme.primary });
-        }
-        else if (shortMessage) {
-            // Single character with T-bar for short message
-            underlineLine += ' '.repeat(spacesBefore) +
-                applyStyle('┬', { color: colorScheme.primary });
+        let indicatorLine = ' '.repeat(lineNumWidth) + ' ' + applyStyle('│', { color: 'brightBlack' }) + ' ' +
+            ' '.repeat(spacesBefore);
+        // Calculate connectCol for short message (if present)
+        // This is the position where the T-bar (┬) will be, which is the middle of the underline
+        // Use positions in the truncated text (which is what's displayed)
+        const connectCol = shortMessage && underlineLength > 1
+            ? underlineStartInCode + Math.floor(underlineLength / 2)
+            : underlineStartInCode;
+        // Calculate the position of the T-bar within the indicator line (after │ and space)
+        // This is: lineNumWidth + 1 (space) + 1 (│) + 1 (space) + spacesBefore + connectPosInUnderline
+        const connectPosInIndicator = lineNumWidth + 1 + 1 + 1 + spacesBefore + (connectCol - underlineStartInCode);
+        logToFile(`[code-debug] lineNumWidth: ${lineNumWidth}, spacesBefore: ${spacesBefore}, connectCol: ${connectCol}, underlineStartInCode: ${underlineStartInCode}, connectPosInIndicator: ${connectPosInIndicator}`);
+        const underlineStartCol = underlineStartInCode;
+        const underlineEndCol = underlineEndInCode;
+        if (endColumn && underlineEndCol > underlineStartCol) {
+            // Underline with curved edges facing up
+            // Use underlineLength which was already calculated correctly (end - start + 1)
+            const underlineLen = underlineLength;
+            if (shortMessage) {
+                // With short message: T-bar in the middle
+                const connectPosInUnderline = connectCol - underlineStartInCode; // Position within the underline
+                if (underlineLen >= 3) {
+                    // Build underline with T-bar: left curve, dashes, T-bar, dashes, right curve
+                    // Total length = 1 (┖) + left dashes + 1 (┬) + right dashes + 1 (┚) = underlineLen
+                    // So: left dashes + right dashes = underlineLen - 3
+                    // T-bar is at position connectPosInUnderline (0-indexed from start), so:
+                    // - left dashes = connectPosInUnderline - 1 (before T-bar, after ┖)
+                    // - right dashes = underlineLen - 3 - (connectPosInUnderline - 1) = underlineLen - connectPosInUnderline - 2
+                    const leftPart = '─'.repeat(Math.max(0, connectPosInUnderline - 1));
+                    const rightPart = '─'.repeat(Math.max(0, underlineLen - connectPosInUnderline - 2));
+                    indicatorLine += applyStyle('┖' + leftPart + '┬' + rightPart + '┚', { color: colorScheme.primary });
+                }
+                else if (underlineLen === 2) {
+                    // Exactly 2 characters: just the brackets, no T-bar
+                    indicatorLine += applyStyle('┖┚', { color: colorScheme.primary });
+                }
+                else {
+                    // Single character, just use T
+                    indicatorLine += applyStyle('╿', { color: colorScheme.primary });
+                }
+            }
+            else {
+                // No short message: flat underline with curved ends (no T-bar)
+                // For underlineLen=2: ┖┚ (no dashes), for underlineLen=3: ┖─┚ (1 dash), etc.
+                const dashes = '─'.repeat(Math.max(0, underlineLen - 2));
+                indicatorLine += applyStyle('┖' + dashes + '┚', { color: colorScheme.primary });
+            }
         }
         else {
-            // No short message, just underline the code
-            const underlineChars = '─'.repeat(underlineLength);
-            underlineLine += ' '.repeat(spacesBefore) +
-                applyStyle(underlineChars, { color: colorScheme.primary });
+            // Single point - use ┬ (T pointing up) which has horizontal bar pointing to code, vertical line going down
+            indicatorLine += applyStyle('╿', { color: colorScheme.primary });
         }
-        codeLines.push(underlineLine);
+        codeLines.push(indicatorLine);
         // Short message connected to underline (if provided)
         if (shortMessage) {
-            const connectCol = underlineLength > 1
-                ? underlineStartInCode + Math.floor(underlineLength / 2)
-                : underlineStartInCode;
-            // Short message line: line number width + space + │ + space + spaces + connector + message
-            const shortMessageLine = ' '.repeat(lineNumWidth) + ' ' + applyStyle('│', { color: 'brightBlack' }) + ' ' +
-                ' '.repeat(Math.max(0, connectCol - 1)) +
-                applyStyle('╰── ', { color: colorScheme.primary }) +
-                applyStyle(shortMessage, { color: colorScheme.message });
-            codeLines.push(shortMessageLine);
+            // Determine placement: 'auto' means calculate which side has more available space
+            let placement = shortMessagePlacement === 'auto'
+                ? (() => {
+                    const shortMessageWidth = countVisibleChars(shortMessage);
+                    const connectorWidth = 4; // " ──╯" or "╰── " is 4 characters
+                    const totalWidth = shortMessageWidth + connectorWidth;
+                    // Available space on left: from start of code area to connectCol
+                    const availableLeft = connectCol - 1;
+                    // Available space on right: from connectCol to end of code area
+                    const availableRight = codeAreaWidth - connectCol;
+                    // Place on left if left has more space, otherwise right
+                    return availableLeft >= availableRight ? 'left' : 'right';
+                })()
+                : shortMessagePlacement;
+            if (placement === 'left') {
+                // Short message on left: message + connector pointing right (curved up)
+                // The connector " ──╯" is 4 chars: space + dash + dash + ╯
+                // The ╯ should be at connectPosInIndicator
+                // So: linePrefixWidth + spacesBeforeMessage + messageWidth + connectorWidth = connectPosInIndicator
+                // Where connectorWidth = 4 (space + 2 dashes + ╯)
+                const messageWidth = countVisibleChars(shortMessage);
+                const linePrefixWidth = lineNumWidth + 3; // lineNumWidth + space + │ + space
+                const connectorWidth = 4; // " ──╯" is 4 characters
+                const spacesBeforeMessage = Math.max(0, connectPosInIndicator - linePrefixWidth - messageWidth - connectorWidth);
+                const shortMessageLine = ' '.repeat(lineNumWidth) + ' ' + applyStyle('│', { color: 'brightBlack' }) + ' ' +
+                    ' '.repeat(spacesBeforeMessage) +
+                    applyStyle(shortMessage, { color: colorScheme.message }) +
+                    applyStyle(' ──╯', { color: colorScheme.primary });
+                codeLines.push(shortMessageLine);
+            }
+            else {
+                // Short message on right: connector pointing left (curved up) + message
+                // The connector "╰── " is 4 chars, and the last dash should connect to the T-bar
+                // The T-bar is at connectPosInIndicator, so the last dash is at connectPosInIndicator
+                // The connector "╰── " has the last dash at position 3 (0-indexed), so:
+                // connectorStartPos + 3 = connectPosInIndicator
+                // Therefore: connectorStartPos = connectPosInIndicator - 3
+                const linePrefixWidth = lineNumWidth + 3; // lineNumWidth + space + │ + space
+                const connectorStartPos = connectPosInIndicator - 3; // Connector "╰── " ends at connectPosInIndicator
+                const spacesBeforeConnector = Math.max(0, connectorStartPos - linePrefixWidth);
+                const shortMessageLine = ' '.repeat(lineNumWidth) + ' ' + applyStyle('│', { color: 'brightBlack' }) + ' ' +
+                    ' '.repeat(spacesBeforeConnector) +
+                    applyStyle('╰── ', { color: colorScheme.primary }) +
+                    ' ' + // Single space between connector and message
+                    applyStyle(shortMessage, { color: colorScheme.message });
+                codeLines.push(shortMessageLine);
+            }
         }
         // Line after (if exists)
         if (lineAfter !== null && lineAfter !== undefined) {
             const afterLineNum = String(startLine + 1);
             const afterLineNumPadded = afterLineNum.padStart(lineNumWidth);
             const truncatedAfter = truncateToWidth(lineAfter, codeAreaWidth);
-            codeLines.push(applyStyle(`${afterLineNumPadded} `, { color: lineNumberColor, dim: isDarkTerminal() }) +
-                applyStyle('│ ', { color: 'brightBlack' }) + truncatedAfter);
+            // Make non-error lines slightly dimmer: darker on dark terminals, whiter on light terminals
+            const dimmedAfter = isDarkTerminal()
+                ? applyStyle(truncatedAfter, { dim: true })
+                : applyStyle(truncatedAfter, { color: 'brightBlack' });
+            codeLines.push(applyStyle(`${afterLineNumPadded} `, { color: lineNumColor }) +
+                applyStyle('│ ', { color: 'brightBlack' }) + dimmedAfter);
         }
         // Bottom curve to close the box (Oxlint style)
         const bottomCurveIndent = ' '.repeat(lineNumWidth + 1);