`/insights` HTML report truncates bar-chart category labels

/insights HTML report truncates bar-chart category labels

Summary

The HTML report generated by /insights clips longer category labels in its bar charts
(e.g. "WHAT YOU WANTED", "SESSION TYPES"). Labels are cut off with an ellipsis even when
there is ample horizontal room in the report, making the affected rows unreadable.

Affected labels (examples from a real report)

• Conceptual Explanation → shown as Conceptual Expl...
• Information Lookup → shown as Information Look...
• Iterative Refinement → shown as Iterative Refinem...

Root cause

The report's inline CSS gives the label column a fixed width that is too narrow for many
of the category names the report itself generates:

.bar-label { width: 100px; font-size: 11px; color: #475569; flex-shrink: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

With width: 100px + text-overflow: ellipsis, any label longer than ~14 characters at
11px is truncated. Several of the categories the report emits exceed that.

Suggested fixes (any one of these)

1. Increase the fixed width (e.g. width: 150px) — simplest, preserves bar alignment.
2. Use min-width instead of a hard width so the column can grow to fit content.
3. Add a title attribute to each .bar-label so the full text is available on hover

even if visually truncated.

Option 1 alone resolves all observed truncation while keeping the bars aligned within the
800px container's two-column layout.

Environment

• OS: Windows 11
• Claude Code: native installer (claude.exe)
• Report path: ~/.claude/usage-data/report-*.html

Workaround

Post-processing the generated report*.html to rewrite .bar-label { width: 100px; →
150px; fully resolves the truncation client-side.