refactor(frontend): migrate Monitoring view to design-system tokens (#554) - #595
Merged
Conversation
…554) Slice 2 of the #554 sweep. Migrates the /monitoring view (Health tab) from raw status colors to semantic tokens. Migrations (all clear status semantics): - Service-active badge (green) - 5 summary cards: healthy / degraded / unhealthy / critical (extra) - Active alerts banner background and heading - Per-alert priority icon (urgent vs warning) - "N issues" count for unhealthy agents - getStatusBgClass / getStatusTextClass / getStatusBadgeClass — all 5 statuses route through status-success / status-warning / status-danger (with 200/700 shades for the "critical" emphasis tier) Deferred (10 raw blue refs remain): - "Auto-refresh" toggle button — selected-state highlight, needs an `action-primary` or `state-selected` token (per #554 caveat) - "Check All" admin primary action button - Per-row "trigger health check" hover/focus styling These are the same categories deferred in #569 (operator queue slice 1). A future PR can introduce `action-*` tokens to cover them across the whole codebase. Tests: - Adds /monitoring smoke spec to e2e/smoke.spec.js (5 → 6 tests) Visual regression baselines for /monitoring will land in a follow-up PR once the cross-platform snapshot capture path is in place (Linux runner font rendering ≠ macOS, so locally captured PNGs would always fail in CI). Refs #554 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
oleksandr-korin
added
the
ui
6 tasks
vybe
approved these changes
Apr 30, 2026
vybe
left a comment
vybe
left a comment
Contributor
There was a problem hiding this comment.
Validation passed. Clean 1:1 token migration, all security checks clear, smoke test added. LGTM.
vybe
pushed a commit
that referenced
this pull request
Apr 30, 2026
/#556) /api-keys page (top-level route). 19 status-color refs migrated: - Active / Revoked badges and indicators → status-success / status-danger - Revoke / Delete buttons → status-warning / status-danger - "Connect to MCP Server" info banner → status-info (banner + icon + code blocks) - "Copy before closing" warning banner → status-warning - Success-state checkmarks (modal, copy button) → status-success - "Agent" scope tag → accent-purple Deferred: - Indigo primary action buttons ("Create API Key", "Create", "I've copied") — same `action-primary` token gap as #569 / #595 - "System" scope tag (orange) — needs accent-orange (or brand-system) token; out of scope for status-only sweep Adds a tag-and-grep model so the suite can grow without coupling local-dev needs to CI runtime cost. Tag Runs in CI? Purpose ───────────────────────────────────────────────────────────────── @smoke yes Cross-page health, must always pass @visual no (local) Screenshot baselines, deferred until #596 @Interactive no (local) Multi-step flows, local-only until stable Changes: - smoke.spec.js — every test now starts with @smoke - new spec: @smoke api keys page loads - package.json — adds `npm run test:e2e:smoke` (--grep @smoke) - frontend-e2e.yml — CI now runs the smoke subset only - e2e/README.md — tag convention documented Local default (`npm run test:e2e`) still runs everything; CI now matches what `npm run test:e2e:smoke` runs locally. Refs #554 #556 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
vybe
pushed a commit
that referenced
this pull request
Apr 30, 2026
/#556) (#597) /api-keys page (top-level route). 19 status-color refs migrated: - Active / Revoked badges and indicators → status-success / status-danger - Revoke / Delete buttons → status-warning / status-danger - "Connect to MCP Server" info banner → status-info (banner + icon + code blocks) - "Copy before closing" warning banner → status-warning - Success-state checkmarks (modal, copy button) → status-success - "Agent" scope tag → accent-purple Deferred: - Indigo primary action buttons ("Create API Key", "Create", "I've copied") — same `action-primary` token gap as #569 / #595 - "System" scope tag (orange) — needs accent-orange (or brand-system) token; out of scope for status-only sweep Adds a tag-and-grep model so the suite can grow without coupling local-dev needs to CI runtime cost. Tag Runs in CI? Purpose ───────────────────────────────────────────────────────────────── @smoke yes Cross-page health, must always pass @visual no (local) Screenshot baselines, deferred until #596 @Interactive no (local) Multi-step flows, local-only until stable Changes: - smoke.spec.js — every test now starts with @smoke - new spec: @smoke api keys page loads - package.json — adds `npm run test:e2e:smoke` (--grep @smoke) - frontend-e2e.yml — CI now runs the smoke subset only - e2e/README.md — tag convention documented Local default (`npm run test:e2e`) still runs everything; CI now matches what `npm run test:e2e:smoke` runs locally. Refs #554 #556 Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
11 tasks
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
2 participants
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.
Summary
Slice 2 of the #554 sweep. Migrates the `/monitoring` (Health tab) view from raw status colors to the semantic tokens introduced in #67 / #555. Visual output unchanged.
What got migrated
26 token replacements, all 1:1 palette aliases. Net diff: 26 ins / 26 del in `Monitoring.vue`.
Deferred (10 raw blue refs remain)
Same I2 caveat as #569 — these need their own token decision before mass migration:
Tests
Visual regression — deferred
The PR description originally proposed adding visual regression baselines (`monitoring.visual.spec.js` with `toHaveScreenshot()`). Removed for this PR because:
I'll file a follow-up issue for the visual regression infrastructure work — it's the natural next step once a few more sweep slices land and the pattern is dialed.
Test plan
Refs #554
🤖 Generated with Claude Code