[Desktop / Code tab] Chat output has poor readability UX: uniform-bold wall of text, no visible message turns, code not boxed, weak contrast

Open 💬 0 comments Opened Jun 30, 2026 by trgiangvp3

Summary

The Code tab in Claude Desktop (Windows) is hard to read and hard to scan.
Agent responses render as a flat, uniform-bold wall of text with no visible
turn structure, code shown as inline chips instead of proper blocks, and
low-contrast secondary text. Extracting information from a longer session is
tiring. The agent works fine — this is purely about the chat pane's display UX.

Environment

  • Claude Desktop version: Claude 1.15962.1 (1e236d) 2026-06-26T19:44:44.000Z
  • OS: Windows 11
  • Surface: Code tab (local session)

Problems

  1. Everything is the same bold weight — no typographic hierarchy.

Every assistant paragraph renders in the same semibold white. There is no
body-weight text, so nothing stands out and the whole pane reads like one
continuous heading. The eye has no resting weight and no anchor to scan by.

  1. No visible separation between messages/turns.

Multiple assistant outputs stack on top of each other with nothing between
them but a faint "Used N tools ›" line. There are no turn markers, dividers,
timestamps-per-message, or step labels, so it's impossible to tell where one
response ends and the next begins, or to navigate back to a specific step.

  1. Code/command output is not rendered as distinct blocks.

Commands and output mostly appear as inline code chips embedded in prose
rather than as boxed, monospace code blocks. Multi-line output has no clear
container, so it blurs into the surrounding text and is hard to copy or read.

  1. Nested lists and indentation render flat and cramped.

Hierarchy in bullet lists and nested content is unclear; sub-items don't
read as visually subordinate, so structured answers lose their structure.

  1. Low-contrast secondary text.

Tool affordances and metadata ("Used N tools ›", "Ran a command…", the
token/time summary line) are dim gray on a dark-gray background and are
easy to miss entirely — including the expandable tool-call rows the user is
meant to click.

  1. No user controls to compensate.

There is no setting for font size, line-height, weight, contrast, or theme
in the chat pane, so a user who finds it hard to read has no way to adjust it.

Impact

For anything longer than a couple of paragraphs, the Code tab becomes a dense,
undifferentiated block. Scanning for "what did it just do", finding a specific
command, or following a multi-step response all require slow, careful reading
instead of a quick glance.

This is clearly achievable — see the VS Code extension

The Claude Code VS Code extension renders the same kind of agent output in a
genuinely readable way: normal body weight with bold used only for emphasis,
a clear per-step rail that separates each turn, true boxed monospace code
blocks with IN/OUT labels, and proper nested-list indentation. It's the same
content from the same agent, so the Desktop Code tab can reach the same bar —
this issue is about bringing Desktop up to that standard, not about parity for
its own sake.

Expected

The Code tab chat pane should be readable and scannable:

  • normal body weight with bold reserved for genuine emphasis/labels,
  • clear visual separation between messages and steps (dividers / turn markers),
  • multi-line code/output rendered as distinct boxed monospace blocks,
  • clear nested-list indentation,
  • adequate contrast for secondary and tool-affordance text,
  • and ideally basic typography controls (font size, line-height, contrast).

Actual

The Code tab chat pane is visually flat and undifferentiated, making longer
responses tiring to read and scan.

Attachments

  • Desktop Code tab showing the issue: _(screenshot 1 — attached below)_
  • VS Code extension rendering the same kind of output well, for reference: _(screenshot 2 — attached below)_

<img width="1189" height="801" alt="Image" src="https://github.com/user-attachments/assets/62f31d5e-0705-4414-a0d5-273c0245a62f" />

<img width="894" height="897" alt="Image" src="https://github.com/user-attachments/assets/ec5a6cc7-cb26-4591-9b05-4ecb4fcec65d" />

View original on GitHub ↗