(Claude) Minimal theme: hoverable role labels, matching expand-all controls, bounded images

[cboos]

Small visual fixes to the minimal theme, found while viewing real transcripts with workflows, teammates and long MCP tool names.

Role labels show their full text on hover

A long tool name is ellipsized in the gutter, and hovering it showed nothing, for two reasons:

• The tooltip sat on a hidden element. When a tool's title is only its name (common for MCP tools), the title line is hidden (.mn-title.mn-generic), and that hidden span carried the only title. call_title now also returns role_tooltip, which the role label carries in that case (full name plus ID: toolu_…). Titles that are just a role (Thinking, Assistant, User) add none.
• The label could be covered. A pair's first card is often shorter than its role line, which then overflows into the next card; that card, later in the DOM, sat on top and swallowed the hover. .mn-role gets z-index: 1, above the cards and below every sticky bar.

When the row's own title stays visible (e.g. a plugin-provided title), the label can still be ellipsized; only the rendered width tells, so minimal.js gives a truncated .mn-role its full text as title on first hover. Nothing is added to the HTML for labels that fit.

"expand all" controls look alike

The table's own "expand all" and a fold's "expand all rows/properties" are now both italic mono at the same size. A fold's button sits either inside the params table (0.8em) or at a result's top level (e.g. a list of tool references), so a fixed ratio could not match both. The size is one registered length, --mn-ctl (@property, <length>), set to 0.72em on #transcript: a registered length computes where it is declared and inherits as that value.

Images stay inside their message

An <img> from rendered Markdown (e.g. a diagram in a file a Read tool returned) had no size bound and spilled across the neighbouring column. Every image in a message now gets max-width: 100%; height: auto, at zero specificity (:where), so rules that size an image on purpose (the inline favicon's 1em) still win.

Tests

• test_minimal_theme.py: role_tooltip is set only when a hidden title said more than a bare role.

• test_minimal_components_browser.py, on a small synthetic transcript:

  • a name-only title moves its tooltip to the role label;
  • every role label is hoverable (elementFromPoint at its centre), at 1400px and 420px;
  • a truncated label gets its full text on hover, a short one stays bare;
  • every expand-all control, in a table and at a result's top level, computes to one font;
  • a Markdown image from a 3000px-wide file fits its message.

  Each new test fails with its fix reverted.

• Snapshots: only the three minimal blocks change, by the CSS/JS above plus one role label gaining its hidden title's tooltip (🚨 Error · ID: …).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Truncated role labels reveal their full text on hover, while existing tooltips remain unchanged.
  • When a title is hidden, its additional information is available through the role label’s tooltip.
• Style
  • Transcript images stay within their message column while preserving their proportions.
  • Tool-parameter expand and row-toggle controls share consistent italic monospace styling.
  • Role labels remain accessible to hover when transcript cards overlap.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: e53ea87a-49cb-4fe3-a23f-2b988960550f

📥 Commits

Reviewing files that changed from the base of the PR and between 8695638 and 19aaf8a.

📒 Files selected for processing (4)

• claude_code_log/html/templates/transcript.html
• test/__snapshots__/test_snapshot_html.ambr
• test/test_minimal_components_browser.py
• test/test_minimal_theme.py

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The minimal theme now provides tooltips for qualifying role labels, constrains message images to their columns, and applies consistent styling to tool-parameter controls. Tests, snapshots, documentation, and showcase fixtures cover these changes.

Changes

Minimal Theme Transcript Updates

Layer / File(s)	Summary
Role-label tooltips claude_code_log/html/minimal_theme.py, claude_code_log/html/templates/transcript.html, claude_code_log/html/templates/components/minimal/minimal.js, claude_code_log/html/templates/components/minimal/layout.css, test/test_minimal_theme.py, test/test_minimal_components_browser.py, test/test_data/minimal_showcase/*, dev-docs/css-classes.md, test/__snapshots__/test_snapshot_html.ambr	call_title returns a role_tooltip for qualifying hidden titles. The transcript renders it on .mn-role. On hover, browser code adds the trimmed label as a tooltip only when the label is truncated and has no existing title.
Transcript image sizing claude_code_log/html/templates/components/minimal/components.css, test/test_minimal_components_browser.py, test/__snapshots__/test_snapshot_html.ambr	Images fit within their message column and preserve their aspect ratio. Browser tests check that a wide image stays within the message boundary.
Tool-control styling claude_code_log/html/templates/components/minimal/components.css, test/test_minimal_components_browser.py, test/__snapshots__/test_snapshot_html.ambr	Expand-all and row-toggle controls share italic monospace styling with a size set through the inherited --mn-ctl property.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant call_title
  participant transcript_template
  participant minimal_js
  call_title->>transcript_template: provide role_tooltip for qualifying hidden titles
  transcript_template->>minimal_js: render role label with title when provided
  minimal_js->>minimal_js: on hover, set trimmed text when truncated and title is absent

Loading

Suggested reviewers: daaain

Merge Risk: ⚪ Minimal · up to 19aaf

This change adds hover tooltips for role labels, matching expand-all control styling, and bounded image widths in the minimal theme. It poses no identified production risk and is ready to merge after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 55.56% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 4 files. (2 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the three main visual changes: hoverable role labels, consistent expand-all controls, and bounded images.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 55.56% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 4 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[daaain]

These sound great! Should we also add some (synthetic) transcript examples that reproduce the issue? It's always tricky to visually test when my own transcripts don't have the full diversity

[cboos]

(Claude) To see these fixes visually, this PR now carries a small synthetic fixture, test/test_data/minimal_showcase/. Render it with:

uv run claude-code-log test/test_data/minimal_showcase --theme minimal --no-cache -o showcase.html

Then open showcase.html. Use the Interleaved and Columns views; in Main only the agents are folded.

• Truncated role labels show their full text on hover.
  • The first tool's gutter label is cut off as mcp__plugin…. Its title is only its name, so that line is hidden, and the label now carries the tooltip: the full name plus ID: ….
  • ScheduleWak… has a visible title of its own, and gets its full label on hover.
• The label isn't covered by the next card. The second mcp__plugin… row is a bare call with a short result. Its role line overflows into the result card, and hovering it still works.
• "expand all" controls look alike. The first tool's JSON result folds at the result's top level. Its "expand all" and the nested "expand all properties" / "expand all rows" are now the same italic mono at the same size, wherever they sit.
• Images stay in their frame. The first agent ("Survey the web module") answers with a 1600 px wide Markdown image. In Columns it scales down to fit its column instead of spilling across the next one.

TestShowcaseFixture in test/test_minimal_theme.py pins that each of these elements stays in the fixture.

[cboos]

Images stay in their frame

Of course, a follow-up could be to enlarge it on click, using one of the many usual ways to have an image zoom pop-up.