Repository navigation
Render every status and message role badge through the shared Badge - #623
Merged
Merged
Conversation
The agent cards carried a light-only Tailwind status pill and an ad-hoc provider chip; Agent Interactions and the sandbox runner each kept a status color map of their own; the conversation stream's role pills had their colors inline per theme. Each is now the dashboard's Badge (soft tint, strong mono text, radius 4, theme tokens), with one status tone map (statusTone) and one role map (roleBadge) in primitives, so the same word reads the same on every surface and in both themes. roleBubble keeps its shape for the callers that read its colors, over the shared tones. Two tones join the tokens for the system and developer roles. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FVSMckjfmJy2QWSb4wRrGh
The evaluation report paints with ActiveAgent::Evals::DesignTokens, which the parity test holds equal to the dashboard's tokens.css; the two tones added there for the message roles go here too. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FVSMckjfmJy2QWSb4wRrGh
TonsOfFun
pushed a commit
that referenced
this pull request
Oct 22, 2026
Both Unreleased sections are kept: the CLI under Added, #623's badge under Changed. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RSuPEbVwjxwJub8eAmGM9N
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Justin: "Even the agent cards on the agent list view should be consistent same with the pills across message role and other usages."
The dashboard has one badge,
Badgeincomponents/dashboard/primitives.jsx(soft tint, strong mono text, radius 4, theme tokens), used by Projects, Evaluations and Explorations. The agent cards did not use it: a light-only Tailwindrounded-fullstatus pill and an ad-hoc gray provider chip. Agent Interactions and the sandbox runner each kept a status color map of their own, and the conversation stream's role pills carried their colors inline per theme. Four looks for the same word.What changes
primitives.jsx:statusTone(status)— one map from a record's status to a tone (active/complete/ready→ success,draft/pending→ warning,running→ info,failed/expired→ error,archived/cancelled→ muted, unknown → muted, case-insensitive) — androleBadge(role)/ROLE_BADGESfor the five message roles. Two tones joinTONEandtokens.css(systempurple,devteal, light and dark) for the roles the existing four tones did not cover.AgentList.jsx: the card's status is<Badge tone={statusTone(agent.status)}>, the provider chip<Badge tone="muted">. The cards follow the dark theme now, which the Tailwind pill did not.InteractionStream.jsx: the role pill is aBadge;roleBubble(role, darkMode)keeps its shape for the callers that read.color/.label(session previews in InteractionsView) but resolves over the shared tones, so a role looks the same in the stream, a preview and a badge.AgentInteractions.jsx,SandboxRunner.jsx: the six run / session / result status pills areBadge+statusTone; theirgetStatusColormaps go.action_agent.js,action_agent.css); changelog under a new## [Unreleased].Left as they are: the sidebar nav counts (counts, not status), the agent legend dots and the progress bars in analytics.
Checks
npm test: 711 pass, 0 fail (test/badgeTones.test.mjsis new: the status map, the role map, every tone resolvable byBadge,roleBubbleover the shared tones in both themes, the rendered badge's colors/mono/radius).npm run build: output committed; the frontend CI job checks the bundle matches its source.Generated by Claude Code