Skip to content

TUI: renderTable has no border lines — table rows visually indistinguishable from plain text #15534

@lwj-9650

Description

@lwj-9650

Problem

The TUI markdown renderer (ui-tui/src/components/markdown.tsx) detects GFM pipe tables correctly, but renderTable only produces aligned columns without any border lines — no | separators, no - row dividers. The output looks like plain aligned text, making tables nearly indistinguishable from regular paragraphs, especially in dark terminal themes.

What renderTable currently outputs (conceptual)

  Header1   Header2   Header3       <- amber color
  data      data      data          <- default color
  data      data      data

No box-drawing characters, no pipe separators, no row dividers.

What users expect

Something with visible borders — either Unicode box-drawing or at minimum pipe+dash separators:

  | Header1 | Header2 | Header3 |
  |---------|---------|---------|
  | data    | data    | data    |
  | data    | data    | data    |

Or with Unicode box-drawing:

  ╔════════╦════════╦════════╗
  ║ Header ║ Header ║ Header ║
  ╠════════╬════════╬════════╣
  ║ data   ║ data   ║ data   ║
  ╚════════╩════════╩════════╝

Context

  • File: ui-tui/src/components/markdown.tsx, function renderTable
  • The function uses Ink Box + Text components with paddingLeft: 2 and column alignment via stringWidth, but draws no borders
  • Header row gets t.color.amber, data rows get default color — this is the only visual differentiation
  • Telegram had the same problem (PR feat(telegram): auto-wrap markdown tables in code blocks #11794) and solved it by wrapping tables in fenced code blocks. A similar approach could work for TUI, or better yet, add native border rendering

Suggested Fix

Option A: Add Unicode box-drawing borders (configurable via theme)

Option B: Add pipe+dash separators to match GFM rendering

Option C: Wrap detected tables in a styled Ink Box with borderStyle

Option C would leverage Ink's existing border support (borderStyle: "round" | "single" | "double" | "bold") and would be the most consistent with the rest of the TUI's visual style.

Environment

  • Hermes version: 2182de55 (latest HEAD)
  • Terminal: Windows Terminal (WSL2)
  • TUI mode: hermes --tui

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low — cosmetic, nice to havecomp/tuiTerminal UI (ui-tui/ + tui_gateway/)type/bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions