Skip to content

fix(console): standardize Status badge colors (blue Active) on agents + brokers - #116

Merged
guohai merged 2 commits into
mainfrom
fix/brokers-status-colors-match-agents
Aug 22, 2026
Merged

fix(console): standardize Status badge colors (blue Active) on agents + brokers#116
guohai merged 2 commits into
mainfrom
fix/brokers-status-colors-match-agents

Conversation

@guohai

@guohai guohai commented Aug 22, 2026

Copy link
Copy Markdown
Collaborator

Summary

Standardize the token Status badges across the eval-agents and brokers console pages so both read identically:

  • Active → blue background (bg-blue-500)
  • Revokedvariant="destructive"

Files: admin-brokers.tsx (Manage Brokers) and console-eval-agents.tsx (Agents token table).

Scope

Client-only. No schema/server/behavior changes.

Generated with SMT smt@agora.io

…ine)

Registration/broker token Status badges now use the same variants as the
eval-agents token Status column: Revoked → destructive, Active → outline
(was deep-red / blue backgrounds).

🤖 Built with SMT <smt@agora.build>
@github-actions

Copy link
Copy Markdown

🤖 Codex Code Review

No findings.

  • The change is UI-only and matches the eval-agents token status badges in client/src/pages/console-eval-agents.tsx.
  • Badge supports both destructive and outline, so this should not introduce runtime/type issues.
  • No security, logic, performance, or maintainability concerns found in the PR diff.

Tests not run; not necessary for this small presentational change.

@github-actions

Copy link
Copy Markdown

🤖 Claude Code Review

The change is a two-line, purely presentational swap and it does exactly what the title claims.

Verified:

  • client/src/pages/admin-brokers.tsx:195-196 now matches console-eval-agents.tsx:517-519 exactly (variant="destructive" / variant="outline"), which is also what console-api-keys.tsx:164 uses. Consistency goal achieved.
  • Using variant instead of className="bg-red-700" / bg-blue-500 is the right fix, not just a color tweak: the hardcoded backgrounds overrode the variant's foreground/border tokens, so bg-blue-500 was rendering with the default variant's text-primary-foreground — a theme-dependent contrast hazard. Variants keep light/dark theming intact.
  • No behavioral, auth, or data-flow impact. No security, performance, or correctness concerns.

Minor, optional: the live-state badges in this same file (admin-brokers.tsx:47,49) still use hardcoded bg-green-500 / bg-yellow-500. That's not an inconsistency introduced here — console-eval-agents.tsx:73,75 does the identical thing, so the two pages remain aligned. If those raw colors are ever migrated to variants, both files should move together.

Looks good to merge.

Standardize the token Status badges across the eval-agents and brokers
pages: Active → blue background (bg-blue-500), Revoked → destructive.

🤖 Built with SMT <smt@agora.build>
@guohai guohai changed the title fix(console): match brokers Status colors to agents fix(console): standardize Status badge colors (blue Active) on agents + brokers Aug 22, 2026
@guohai
guohai merged commit 764ebde into main Aug 22, 2026
6 checks passed
@guohai
guohai deleted the fix/brokers-status-colors-match-agents branch August 22, 2026 06:15
@github-actions

Copy link
Copy Markdown

🤖 Codex Code Review

Findings

  • client/src/pages/console-eval-agents.tsx:519 and client/src/pages/admin-brokers.tsx:196 do not implement the PR description’s requested Active -> variant="outline" mapping. The PR leaves brokers as bg-blue-500 and changes eval-agent tokens from outline to bg-blue-500, so the final state is consistent with each other but inconsistent with the stated requirement. If the request is to match the eval-agents token Status variants described in the PR, both should be <Badge variant="outline">Active</Badge>.

No security, auth, injection, credential exposure, performance, or edge-case issues found in this small UI-only change.

@github-actions

Copy link
Copy Markdown

🤖 Claude Code Review

Purely cosmetic two-line change to badge styling. No security, logic, or performance concerns — no data flow, conditionals, or API surface is touched. The Revokedvariant="destructive" swap in admin-brokers.tsx:195 is a clear improvement (theme token instead of hardcoded bg-red-700) and matches console-eval-agents.tsx.

Two minor points on the other half of the change:

bg-blue-500 for Active bypasses the theme token that already equals it

client/src/pages/console-eval-agents.tsx:519 and client/src/pages/admin-brokers.tsx:196

In the dark theme (:root in client/src/index.css:70), --primary: 217 91% 60% is exactly #3b82f6 — i.e. Tailwind's blue-500. So <Badge className="bg-blue-500"> renders identically to <Badge variant="default"> in dark mode, while giving up the light-theme override (--primary: 217 91% 50%, index.css:118). Using variant="default" would produce the same visual result you're after, stay theme-aware, and be symmetric with the variant="destructive" sibling.

There's a small contrast consequence: bg-blue-500 keeps the default variant's text-primary-foreground, which is white in .light. White on #3b82f6 is ~3.98:1 — under WCAG AA 4.5:1 for the badge's 12px text. The intended bg-primary (hsl(217 91% 50%)) clears it at ~4.9:1. Dark mode is fine either way (~4.5:1 with the near-black foreground).

Slight consistency regression vs. #114

client/src/pages/console-api-keys.tsx:168 uses <Badge variant="default">Active</Badge>. After this PR, API keys and agents/brokers agree in dark mode but diverge in light mode. Switching these two call sites to variant="default" resolves both points at once.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant