Markdown rendering: H1-H6 headings have no visual hierarchy, tables render poorly #15141

Description

The TUI markdown rendering (via Glamour) has two styling issues:

1. H1-H6 headings are visually indistinguishable — all heading levels use the same color and bold style, making it impossible to tell heading levels apart.
2. Tables render poorly — they appear with disconnected box-drawing characters or look nearly like raw markdown, lacking proper visual structure.

Other markdown elements (bold, italic, strikethrough, code blocks, links, etc.) all render correctly.

Root Cause Analysis

Headings

In internal/tui/styles/markdown.go, all six heading levels are configured identically — same color, same bold, only differing by the # prefix count:

H1: ansi.StyleBlock{
    StylePrimitive: ansi.StylePrimitive{
        Prefix: "# ",
        Color:  stringPtr(adaptiveColorToString(t.MarkdownHeading())),
        Bold:   boolPtr(true),
    },
},
H2: ansi.StyleBlock{
    StylePrimitive: ansi.StylePrimitive{
        Prefix: "## ",
        Color:  stringPtr(adaptiveColorToString(t.MarkdownHeading())),
        Bold:   boolPtr(true),
    },
},
// H3-H6: same pattern — identical color and bold

Compare with Glamour's default dark theme (styles/dark.json):

"h1": { "prefix": " ", "suffix": " ", "color": "228", "background_color": "63", "bold": true },
"h2": { "prefix": "## " },
"h6": { "color": "35", "bold": false }

The default theme gives H1 a background color for strong visual emphasis, and H6 a different color with no bold — creating a clear visual hierarchy. OpenCode's config flattens this entirely.

Tables

The table config uses Unicode box-drawing characters:

Table: ansi.StyleTable{
    CenterSeparator: stringPtr("┼"),
    ColumnSeparator: stringPtr("│"),
    RowSeparator:    stringPtr("─"),
},

However, Glamour's table renderer (ansi/table.go) explicitly disables all outer borders (top, bottom, left, right), so only internal separators are drawn. Combined with potential font/terminal rendering gaps between box-drawing characters, tables look broken or like raw markdown rather than properly formatted tables.

Expected Behavior

• Headings: H1 should be visually prominent (e.g., with a background color or larger prefix), with decreasing emphasis through H6. Users should be able to distinguish heading levels at a glance.
• Tables: Tables should render as clean, connected grids — or at minimum, be clearly distinguishable from raw markdown pipe syntax.

Suggested Fix

Headings

Introduce visual differentiation per heading level, for example:

H1: { Prefix: " ", Suffix: " ", BackgroundColor: primaryColor, Color: bgColor, Bold: true }
H2: { Prefix: "## ", Color: headingColor, Bold: true }
H3: { Prefix: "### ", Color: headingColor, Bold: true }
H4: { Prefix: "#### ", Color: mutedHeadingColor, Bold: true }
H5: { Prefix: "##### ", Color: mutedHeadingColor, Bold: false }
H6: { Prefix: "###### ", Color: mutedColor, Bold: false }

Tables

Consider either:

• Removing the custom separator overrides and letting Glamour/lipgloss handle table rendering with its defaults
• Or using ASCII separators (+, |, -) which render more reliably across terminals and fonts

Environment

• OS: macOS (Darwin)
• Terminal: Multiple terminals tested
• OpenCode version: Latest (main branch)
• Locale: UTF-8