[FEATURE] Mod API: let mods draw smaller text (a size prop on Text, or custom CSS)
Preflight Checklist
- [x] I have searched existing requests and this feature hasn't been requested yet
- [x] This is a single feature request (not multiple features)
Problem Statement
A mod can't draw text smaller than its pane's body size. In the desktop app's Code tab, every Text in a mod's pane comes out at the app's body size (13px at the default density). TextProps has props for color, weight, decoration and wrapping, but none for size, and no pane or $.ui.open option changes it.
The app's own panels use smaller sizes for secondary text. The Background tasks panel draws a workflow card's title at body size, and its meta lines (kind, status and elapsed time; agents and tokens) and its description at the footnote size (12px), muted. A mod that shows the same kind of information can match the native colors and spacing, but not the size, so its cards look heavier and denser than the native ones beside them.
Proposed Solution
Either of these would solve it. The first is the smaller change; the second is more general.
1. A size prop on Text that takes the design system's named sizes rather than pixels:
<Text size="footnote" dimColor>4 agents · 35.33M tokens · $14.99 est.</Text>
- Values: at least
'caption','footnote'and'body'(the default), drawn with the same tokens the native panels use, so they follow density and text scaling like the rest of the app. - Line height follows the size.
- A nested
Textinherits it, as it doescoloranddimColor. - The terminal ignores it (a cell has one size), so the same tree works on both surfaces.
- Client surface modules get it too, since
ClientElementsshares the element table.
2. Custom CSS on the desktop. Let a mod style its own elements with CSS: a style prop on desktop elements, or a stylesheet the mod ships that applies only inside its own panes, with a className prop to target it:
<Text style={{ fontSize: 'var(--cds-font-size-footnote)', lineHeight: 'var(--cds-leading-footnote)' }}>
4 agents · 35.33M tokens · $14.99 est.
</Text>
- It can be limited to safe properties (font size, line height, letter spacing, font weight, numeric figures, spacing) and scoped to the mod's own pane, so a mod can't restyle or cover the app around it.
- With the app's design tokens available as CSS variables, mod UI would follow theme, density and text scaling like native UI.
- The terminal ignores it.
- It would also cover smaller gaps the props can't, such as tabular figures so a live counter doesn't jitter as its digits change.
Alternative Solutions
What I tried with the current elements:
- Markdown headings (
####to######) render at body size, and raw HTML such as<small>is shown as literal text. - Markdown inline code is the only thing that comes out smaller (body minus 1px), but it is monospace on a chip background, so prose reads as code.
- Svg text can be any size, but on the desktop it is drawn as an image: no app font, no wrapping, no selection, and its color doesn't follow a theme change until the next draw.
- Body size with the native colors, which is what the mod does now. It is legible, but visually heavier than the native panel.
Priority
Low - Nice to have
Feature Category
Developer tools/SDK
Use Case Example
- My mod, workflow-monitor, draws a pane with a card per workflow, modelled on the Background tasks panel: a title, a line with the elapsed time, a line with agents, tokens and estimated cost, and the workflow's description.
- I open it beside the native Background tasks panel in the Code tab.
- Today its summary lines and description are a size larger than the native ones, so the two panels read differently.
- With
size="footnote"on those lines, the card would match the native one, with its title at body size.
Additional Context
- Claude Code 2.1.295, Claude desktop app (Code tab, package 2.31226.1.0), Windows 11.
TextPropsin this build:hover,color,backgroundColor,dimColor,bold,italic,underline,strikethrough,inverse,wrap.- Related: #101090 (text drawn by mods can't be selected on the desktop).