cli: Improve markdown table rendering with box-drawing characters

- Use Unicode box-drawing characters (┌┬┐│├┼┤└┴┘─) for table borders
- Add truncateText and padText helpers using string-width for proper Unicode handling
- Proportionally shrink columns when table exceeds available width
- Add tests for truncation and proportional shrinking behavior

Author: brandonkachen

cli/src/utils/__tests__/markdown-renderer.test.tsx

@@ -182,7 +182,7 @@ describe('markdown renderer', () => {
     const output = renderMarkdown(markdown)
     const nodes = flattenNodes(output)
 
-    // Check that table structure is rendered (pipes and separators)
+    // Check that table structure is rendered with box-drawing characters
     const textContent = nodes
       .map((node) => {
         if (typeof node === 'string') return node
@@ -199,8 +199,9 @@ describe('markdown renderer', () => {
     expect(textContent).toContain('Jane')
     expect(textContent).toContain('30')
     expect(textContent).toContain('25')
-    expect(textContent).toContain('|')
-    expect(textContent).toContain('---')
+    // Table uses box-drawing characters for borders
+    expect(textContent).toContain('│')
+    expect(textContent).toContain('─')
   })
 
   test('renders code fence followed by text with quotes correctly', () => {
@@ -321,4 +322,92 @@ codebuff "implement feature" --verbose
     expect(inlineContent).toContain('git commit -m "fix: bug"')
     expect(nodes[2]).toBe(' to commit.')
   })
+
+  test('truncates table columns when content exceeds available width', () => {
+    // Table with very long content that should be truncated
+    const markdown = `| ID | This is a very long column header that should be truncated |
+| -- | ---------------------------------------------------------- |
+| 1  | This cell has extremely long content that definitely exceeds the width |`
+    
+    // Use a narrow codeBlockWidth to force truncation
+    const output = renderMarkdown(markdown, { codeBlockWidth: 50 })
+    const nodes = flattenNodes(output)
+
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // Should contain ellipsis indicating truncation of the long column
+    expect(textContent).toContain('…')
+    // The short column content should be present (ID and 1 are short enough)
+    expect(textContent).toContain('ID')
+    expect(textContent).toContain('1')
+    // Box-drawing characters should still be present
+    expect(textContent).toContain('│')
+    expect(textContent).toContain('─')
+    // The long header should be truncated (not fully present)
+    expect(textContent).not.toContain('This is a very long column header that should be truncated')
+  })
+
+  test('does not truncate table columns when content fits available width', () => {
+    const markdown = `| Name | Age |
+| ---- | --- |
+| John | 30  |`
+    
+    // Use a wide codeBlockWidth so no truncation is needed
+    const output = renderMarkdown(markdown, { codeBlockWidth: 80 })
+    const nodes = flattenNodes(output)
+
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // Should NOT contain ellipsis when content fits
+    expect(textContent).not.toContain('…')
+    // All content should be present in full
+    expect(textContent).toContain('Name')
+    expect(textContent).toContain('Age')
+    expect(textContent).toContain('John')
+    expect(textContent).toContain('30')
+  })
+
+  test('proportionally shrinks table columns when table is too wide', () => {
+    // Three columns of roughly equal width
+    const markdown = `| Column One | Column Two | Column Three |
+| ---------- | ---------- | ------------ |
+| Value1     | Value2     | Value3       |`
+    
+    // Very narrow width to force significant shrinking
+    const output = renderMarkdown(markdown, { codeBlockWidth: 30 })
+    const nodes = flattenNodes(output)
+
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // Table structure should still be present
+    expect(textContent).toContain('│')
+    expect(textContent).toContain('┌')
+    expect(textContent).toContain('└')
+    // With such narrow width, some content should be truncated
+    expect(textContent).toContain('…')
+  })
 })

cli/src/utils/markdown-renderer.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
 import remarkParse from 'remark-parse'
+import stringWidth from 'string-width'
 import { unified } from 'unified'
 
 import { logger } from './logger'
@@ -642,57 +643,176 @@ const renderLink = (link: Link, state: RenderState): ReactNode[] => {
   ]
 }
 
+/**
+ * Truncates text to fit within a specified width, adding ellipsis if needed.
+ * Uses stringWidth to properly measure Unicode and wide characters.
+ */
+const truncateText = (text: string, maxWidth: number): string => {
+  if (maxWidth < 1) return ''
+  const textWidth = stringWidth(text)
+  if (textWidth <= maxWidth) {
+    return text
+  }
+  
+  // Need to truncate - leave room for ellipsis
+  if (maxWidth === 1) return '…'
+  
+  let truncated = ''
+  let width = 0
+  for (const char of text) {
+    const charWidth = stringWidth(char)
+    if (width + charWidth + 1 > maxWidth) break // +1 for ellipsis
+    truncated += char
+    width += charWidth
+  }
+  return truncated + '…'
+}
+
+/**
+ * Pads text to reach exact width using spaces.
+ */
+const padText = (text: string, targetWidth: number): string => {
+  const currentWidth = stringWidth(text)
+  if (currentWidth >= targetWidth) return text
+  return text + ' '.repeat(targetWidth - currentWidth)
+}
+
 const renderTable = (table: Table, state: RenderState): ReactNode[] => {
-  const { palette, nextKey } = state
+  const { palette, nextKey, codeBlockWidth } = state
   const nodes: ReactNode[] = []
 
-  // Calculate column widths
-  const columnWidths: number[] = []
-  table.children.forEach((row) => {
-    (row as TableRow).children.forEach((cell, colIdx) => {
-      const cellText = nodeToPlainText(cell as TableCell)
-      const width = cellText.length
-      columnWidths[colIdx] = Math.max(columnWidths[colIdx] || 0, width)
-    })
+  // Extract all rows and their plain text content
+  const rows = table.children.map((row) => {
+    const cells = (row as TableRow).children as TableCell[]
+    return cells.map((cell) => nodeToPlainText(cell).trim())
   })
 
+  if (rows.length === 0) return nodes
+
+  // Determine number of columns
+  const numCols = Math.max(...rows.map((r) => r.length))
+  if (numCols === 0) return nodes
+
+  // Calculate natural column widths (minimum 3 chars per column)
+  const naturalWidths: number[] = Array(numCols).fill(3)
+  for (const row of rows) {
+    for (let i = 0; i < row.length; i++) {
+      const cellWidth = stringWidth(row[i] || '')
+      naturalWidths[i] = Math.max(naturalWidths[i], cellWidth)
+    }
+  }
+
+  // Calculate total width needed:
+  // Each column has its content width
+  // Separators: " │ " between columns (3 chars each), none at edges
+  const separatorWidth = 3 // ' │ '
+  const numSeparators = numCols - 1
+  const totalNaturalWidth =
+    naturalWidths.reduce((a, b) => a + b, 0) + numSeparators * separatorWidth
+
+  // Available width for the table (leave some margin)
+  const availableWidth = Math.max(20, codeBlockWidth - 2)
+
+  // Calculate final column widths
+  let columnWidths: number[]
+  if (totalNaturalWidth <= availableWidth) {
+    // Table fits - use natural widths
+    columnWidths = naturalWidths
+  } else {
+    // Table too wide - proportionally shrink columns
+    const availableForContent = availableWidth - numSeparators * separatorWidth
+    const totalNaturalContent = naturalWidths.reduce((a, b) => a + b, 0)
+    const scale = availableForContent / totalNaturalContent
+    
+    columnWidths = naturalWidths.map((w) => {
+      // Minimum 3 chars, scale the rest
+      return Math.max(3, Math.floor(w * scale))
+    })
+    
+    // Distribute any remaining width to columns that were clamped
+    let usedWidth = columnWidths.reduce((a, b) => a + b, 0)
+    let remaining = availableForContent - usedWidth
+    for (let i = 0; i < columnWidths.length && remaining > 0; i++) {
+      if (columnWidths[i] < naturalWidths[i]) {
+        const add = Math.min(remaining, naturalWidths[i] - columnWidths[i])
+        columnWidths[i] += add
+        remaining -= add
+      }
+    }
+  }
+
+  // Helper to render a horizontal separator line
+  const renderSeparator = (leftChar: string, midChar: string, rightChar: string): void => {
+    let line = leftChar
+    columnWidths.forEach((width, idx) => {
+      line += '─'.repeat(width + 2) // +2 for padding spaces
+      line += idx < columnWidths.length - 1 ? midChar : rightChar
+    })
+    nodes.push(
+      <span key={nextKey()} fg={palette.dividerFg}>
+        {line}
+      </span>,
+    )
+    nodes.push('\n')
+  }
+
+  // Render top border
+  renderSeparator('┌', '┬', '┐')
+
   // Render each row
   table.children.forEach((row, rowIdx) => {
     const isHeader = rowIdx === 0
     const cells = (row as TableRow).children as TableCell[]
 
-    // Render cells in the row
-    cells.forEach((cell, cellIdx) => {
-      const cellNodes = renderNodes(
-        cell.children as MarkdownNode[],
-        state,
-        cell.type,
+    // Render row content
+    for (let cellIdx = 0; cellIdx < numCols; cellIdx++) {
+      const cell = cells[cellIdx]
+      const cellText = cell ? nodeToPlainText(cell).trim() : ''
+      const colWidth = columnWidths[cellIdx]
+      
+      // Truncate and pad the cell content
+      const displayText = padText(truncateText(cellText, colWidth), colWidth)
+
+      // Left border for first cell
+      if (cellIdx === 0) {
+        nodes.push(
+          <span key={nextKey()} fg={palette.dividerFg}>
+            │
+          </span>,
+        )
+      }
+
+      // Cell content with padding
+      nodes.push(
+        <span
+          key={nextKey()}
+          fg={isHeader ? palette.headingFg[3] : undefined}
+          attributes={isHeader ? TextAttributes.BOLD : undefined}
+        >
+          {' '}
+          {displayText}
+          {' '}
+        </span>,
       )
-      const cellWidth = columnWidths[cellIdx] || 10
-      const cellText = nodeToPlainText(cell)
-      const padding = ' '.repeat(Math.max(0, cellWidth - cellText.length))
 
+      // Separator or right border
       nodes.push(
-        <span key={nextKey()} fg={isHeader ? palette.headingFg[3] : undefined}>
-          {cellIdx === 0 ? '| ' : ' | '}
-          {wrapSegmentsInFragments(cellNodes, nextKey())}
-          {padding}
+        <span key={nextKey()} fg={palette.dividerFg}>
+          │
         </span>,
       )
-    })
-    nodes.push(' |\n')
+    }
+    nodes.push('\n')
 
     // Add separator line after header
     if (isHeader) {
-      nodes.push('|')
-      columnWidths.forEach((width, idx) => {
-        nodes.push(idx === 0 ? ' ' : ' | ')
-        nodes.push('-'.repeat(width))
-      })
-      nodes.push(' |\n')
+      renderSeparator('├', '┼', '┤')
     }
   })
 
+  // Render bottom border
+  renderSeparator('└', '┴', '┘')
+
   nodes.push('\n')
   return nodes
 }