Merge pull request #17114 from NousResearch/bb/tui-table-separator

fix(tui): visually distinguish markdown table rows from prose (#15534)

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 (
     <Box flexDirection="column" key={k} paddingLeft={2}>
       {rows.map((row, ri) => (
-        <Box key={ri}>
-          {widths.map((w, ci) => (
-            <Text color={ri === 0 ? t.color.amber : undefined} key={ci}>
-              <MdInline t={t} text={row[ci] ?? ''} />
-              {' '.repeat(Math.max(0, w - stripInlineMarkup(row[ci] ?? '').length))}
-              {ci < widths.length - 1 ? '  ' : ''}
+        <Fragment key={ri}>
+          <Box>
+            {widths.map((w, ci) => (
+              <Text bold={ri === 0} color={ri === 0 ? t.color.amber : undefined} key={ci}>
+                <MdInline t={t} text={row[ci] ?? ''} />
+                {' '.repeat(Math.max(0, w - stripInlineMarkup(row[ci] ?? '').length))}
+                {ci < widths.length - 1 ? '  ' : ''}
+              </Text>
+            ))}
+          </Box>
+          {ri === 0 && rows.length > 1 ? (
+            <Text color={t.color.dim} dimColor>
+              {sep}
             </Text>
-          ))}
-        </Box>
+          ) : null}
+        </Fragment>
       ))}
     </Box>
   )