feat(ui-react): Code, for a command or name in running text

[PavelLaptev]

🧢 Changes

Adds Code: inline code in mono 12 on --bg-2, at --radius-control, as design/patterns/markdown.md draws it. A command that wraps keeps its padding on each line. Stories: Default, in a sentence, and in an empty state.

☕️ Reasoning

Inline code had a look only inside Lite's Markdown. but.dev writes commands in empty states and hints, such as "Wake it up or run but mesh service restart there", as a bare mono run. Code gives every surface the same look. Lite's Markdown keeps its own CSS; it could move to Code later.

🤖 Generated with Claude Code

---

Note

Low Risk
New presentational UI component with no auth, data, or routing impact.

Overview
Adds a Code React component in ui-react so inline commands, flags, and names in hints and empty states match Markdown inline-code styling (mono 12, --bg-2, --radius-control), including wrapped-line padding via box-decoration-break: clone.

Storybook covers a default snippet, inline in body copy, and inside EmptyState descriptions. Lite Markdown styling is unchanged; callers can adopt Code where prose currently uses bare mono runs.

^{Reviewed by Cursor Bugbot for commit d361382. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

This pull request changes Lite's CSS. If the change shows on screen, before/after screenshots make it reviewable without checking the branch out — drag them into a comment, or use the lite-screenshots skill in this repository. Add the screenshots label once they are posted. Asked once; later pushes will not repeat it.

[github-actions]

🎩 Your Storybook has been served

• 🫖 Have a look
• 🔍 Inspect the changes: anything that looks different from master is waiting for your approval
• 🤖 Service entrance for agents (MCP): https://code-component--6ab536f5f40e41db628ccf1b.chromatic.com/mcp

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit f04a62d. Configure here.}

[cursor]

Code background vanishes on empty states

Medium Severity

Code paints its chip with --bg-2, the same token empty states sit on in the sidebar and details pane. On those surfaces the background, radius, and padding disappear, so a command still reads as a bare mono run — the gap this component is meant to close. InEmptyState also omits the --bg-2 host EmptyState stories use, so the clash stays hidden in Storybook.

Additional Locations (1)

• packages/ui-react/src/Code.stories.tsx#L25-L40

 

^{Reviewed by Cursor Bugbot for commit f04a62d. Configure here.}