diff --git a/ui-tui/src/components/markdown.tsx b/ui-tui/src/components/markdown.tsx index d3b6710b9e..7afae3beb6 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,33 @@ 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 are + // grapheme-approximate so a real outline often misaligns; one dim + // dashed 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} + ))} )