Issue Station
Sign In
Tools hereToolbox

hermes - ✅(Solved) Fix TUI: renderTable has no border lines — table rows visually indistinguishable from plain text [2 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
NousResearch/hermes-agent#15534•Fetched 2026-04-26 05:26:51
View on GitHub
Comments
0
Participants
1
Timeline
5
Reactions
0
Author
lwj-9650lwj-9650
Participants
lwj-9650lwj-9650
Timeline (top)
labeled ×3cross-referenced ×2
  • 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 #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

Root Cause

  • 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 #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

Fix Action

Fixed

PR fix notes

PR #15545: fix(tui): add Unicode box-drawing borders to renderTable (#15534)

Description (problem / solution / changelog)

Summary

renderTable in the TUI markdown renderer produced aligned columns without any visible separators — table rows were visually indistinguishable from plain text, especially in dark terminal themes.

Changes

Add Unicode box-drawing characters (│, ─, ├, ┼, ┤) to renderTable in ui-tui/src/components/markdown.tsx:

  • Pipe separators (│) between columns and at left/right edges
  • Horizontal divider (├─...─┼─...─┤) after the header row
  • Border characters use t.color.dim so they stay subtle while providing clear structure
  • Header row keeps its existing amber highlight

Before / After

Before — no borders, table looks like aligned text:

  Header1   Header2   Header3
  data      data      data

After — clear box-drawing borders:

  │ Header1 │ Header2 │ Header3 │
  ├─────────┼─────────┼─────────┤
  │ data    │ data    │ data    │

Design Decisions

  • Used Unicode box-drawing (│ ├ ┼ ┤ ─) rather than ASCII (| + - |) for clean terminal rendering — these characters are supported by all modern terminal emulators
  • Borders rendered in t.color.dim to keep them subtle and consistent with the TUI's visual style
  • No top/bottom frame lines — keeps tables compact and avoids excessive visual noise
  • Each cell and separator is a separate <Text> node so border color doesn't bleed into cell content color

Testing

  • TypeScript: no new type errors (verified with tsc --noEmit)
  • Visual: manually confirmed border alignment with varying column widths and inline markup

Fixes #15534

Changed files

  • ui-tui/src/components/markdown.tsx (modified, +31/-11)

PR #15571: fix(tui): add visible markdown table separators

Description (problem / solution / changelog)

Why change

TUI markdown tables currently render as aligned plain text with no visible separators, so rows can blend into surrounding prose. This adds explicit pipe borders plus a visible header divider, matching issue #15534's low-risk usability fix.

Files changed

  • ui-tui/src/components/markdown.tsx
  • ui-tui/src/__tests__/markdown.test.ts

Verification run

  • cd ui-tui && npm run build --prefix packages/hermes-ink
  • cd ui-tui && npm test -- --run src/__tests__/markdown.test.ts
  • cd ui-tui && npx eslint src/components/markdown.tsx src/__tests__/markdown.test.ts

Risk level

Low. TUI-only markdown table rendering change with focused tests for new formatting helpers.

Closes #15534

Changed files

  • ui-tui/src/__tests__/markdown.test.ts (modified, +22/-1)
  • ui-tui/src/components/markdown.tsx (modified, +28/-12)

Code Example

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

---

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

---

╔════════╦════════╦════════╗
  ║ Header ║ Header ║ Header ║
  ╠════════╬════════╬════════╣
  ║ data   ║ data   ║ data   ║
  ╚════════╩════════╩════════╝
RAW_BUFFERClick to expand / collapse

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 #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

extent analysis

TL;DR

Implementing Option C by wrapping detected tables in a styled Ink Box with borderStyle is the most likely fix to add visible borders to tables in the TUI markdown renderer.

Guidance

  • Verify that the renderTable function in ui-tui/src/components/markdown.tsx can be modified to wrap the table content in an Ink Box component.
  • Explore Ink's borderStyle options ("round", "single", "double", "bold") to determine which style best matches the desired table border appearance.
  • Consider adding configuration options to allow users to choose between different border styles or to disable borders altogether.
  • Test the modified renderTable function with various table formats and terminal themes to ensure consistent rendering.

Example

import { Box, Text } from 'ink';

// Within the renderTable function
return (
  <Box borderStyle="single">
    {/* Table content */}
  </Box>
);

Notes

The solution assumes that Ink's Box component can be used to add borders to the table content. If this is not the case, alternative approaches such as using Unicode box-drawing characters or pipe+dash separators may need to be explored.

Recommendation

Apply workaround by implementing Option C, as it leverages Ink's existing border support and is consistent with the rest of the TUI's visual style.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#prompt formatting#chain error#conversation history#tool integration#LLM response

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING