diff --git a/ui-tui/src/components/markdown.tsx b/ui-tui/src/components/markdown.tsx index d3b6710b9ea..9c18086147d 100644 --- a/ui-tui/src/components/markdown.tsx +++ b/ui-tui/src/components/markdown.tsx @@ -1,5 +1,5 @@ import { Box, Link, Text } from '@hermes/ink' -import { memo, type ReactNode, useMemo } from 'react' +import { Fragment, memo, type ReactNode, useMemo } from 'react' import { ensureEmojiPresentation } from '../lib/emoji.js' import { highlightLine, isHighlightable } from '../lib/syntax.js' @@ -97,18 +97,35 @@ export const stripInlineMarkup = (v: string) => const renderTable = (k: number, rows: string[][], t: Theme) => { const widths = rows[0]!.map((_, ci) => Math.max(...rows.map(r => stripInlineMarkup(r[ci] ?? '').length))) + // Thin divider under the header. Without it tables look like prose + // with extra spacing because the header is just amber-coloured text + // (#15534). We avoid full borders on purpose — column widths come + // from `stripInlineMarkup(...).length` (UTF-16 code units, not + // display width), so a real outline often misaligns on emoji and + // East-Asian wide characters; one dim solid rule (`─`) under row 0 + // plus tab-style column gaps reads cleanly on every terminal we + // tested. + const sep = widths.map(w => '─'.repeat(Math.max(1, w))).join(' ') + return ( {rows.map((row, ri) => ( - - {widths.map((w, ci) => ( - - - {' '.repeat(Math.max(0, w - stripInlineMarkup(row[ci] ?? '').length))} - {ci < widths.length - 1 ? ' ' : ''} + + + {widths.map((w, ci) => ( + + + {' '.repeat(Math.max(0, w - stripInlineMarkup(row[ci] ?? '').length))} + {ci < widths.length - 1 ? ' ' : ''} + + ))} + + {ri === 0 && rows.length > 1 ? ( + + {sep} - ))} - + ) : null} + ))} )