Skip to content

refactor(frontend): migrate operator queue to design-system tokens (#554) - #569

Merged
vybe merged 1 commit into
devfrom
feature/554-sweep-operator-queue
Apr 29, 2026
Merged

refactor(frontend): migrate operator queue to design-system tokens (#554)#569
vybe merged 1 commit into
devfrom
feature/554-sweep-operator-queue

Conversation

@oleksandr-korin

@oleksandr-korin oleksandr-korin commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

Summary

First slice of the #554 sweep — migrates the 6 operator-queue components (src/frontend/src/components/operator/) from raw status colors to the semantic tokens introduced in #67 (PR #553) and #555 (PR #561). Visual output is unchanged.

Refs #554 — this is one focused domain slice; the issue stays open for follow-up slices on agent views, settings, channels, etc.

Migration scope

56 sites migrated across 6 files. Each callsite was reviewed for semantic intent (per the I2 caveat), not search-and-replaced.

File Sites
NotificationsPanel.vue 22 (priority/type/status badges, counts, row backgrounds, ack button)
QueueCard.vue 5 (option buttons, type/priority pills)
QueueItemDetail.vue 11 (same as above + response box)
QueueList.vue 9 (priority dots/labels, status badge)
QueueStats.vue 8 (priority indicators)
ResolvedCard.vue 1 (resolved indicator)

Token mapping

Token Used for
status-success completion / acknowledged / approval option / responded
status-danger critical priority / urgent / pending count / reject option / expired
status-urgent high priority
status-warning medium priority / question type / pending status
status-info low / normal priority indicator
accent-purple "approval" / "status" type categorical pills

All tokens are 1:1 palette aliases — generated CSS is byte-identical to the raw classes they replace.

Deferred — by design, not oversight

38 raw color references remain in this folder. Each falls into one of three categories that need their own design decision before they can be mass-migrated:

  1. Blue for primary actions (~25 sites) — buttons (bg-blue-600), links (text-blue-600), focus rings (focus:ring-blue-500). Needs an action-primary token family.
  2. Blue for selected state (~5 sites) — list-item highlight, expanded card border. Needs a state-selected token (similar to how state-autonomous was added in Define remaining design-system token families (accent, brand, state) #555).
  3. Amber for "alert" type (~6 sites) — would need to either map to status-warning (palette shift yellow vs amber → visible color change, violates Add centralized design system with semantic color tokens #67 AC) or stay raw until the alert type gets its own token.
  4. Green for "Acknowledge Selected" bulk button (~2 sites) — falls under category 1.

These are tracked in #555 follow-up territory; flagging here so reviewers can confirm the deferral.

Test plan

  • npm run check:tokens passes (verified locally)
  • npm run build succeeds (verified locally)
  • CI: frontend-build workflow passes
  • Visual smoke: open /operator (Operating Room) — Queue list dots, priority/status badges, expanded queue card option buttons, resolved cards. All colors should look identical to before.
  • Dark mode: re-verify above

Refs #554

🤖 Generated with Claude Code

@oleksandr-korin @claude
refactor(frontend): migrate operator queue to design-system tokens (#554
6ac8bef 
)

First slice of the #554 sweep: migrates the 6 operator-queue components
from raw status colors to the semantic tokens introduced in #67/#555.

Files migrated:
  - NotificationsPanel.vue  44 sites — priority/type/status badges, counts
  - QueueCard.vue           10 sites — option buttons, type/priority pills
  - QueueItemDetail.vue     22 sites — same pattern + response box
  - QueueList.vue           18 sites — priority dots/labels, status badge
  - QueueStats.vue          16 sites — priority indicators
  - ResolvedCard.vue         2 sites — resolved status indicator

Token usage:
  status-success → completion / acknowledged / approval option
  status-danger  → critical / urgent priority / pending / reject option
  status-urgent  → high priority
  status-warning → medium priority / question type / pending status
  status-info    → low/normal priority indicator
  accent-purple  → "approval" / "status" type categorical pills

Deferred per the #554 caveat (these need their own design decision
before mass migration):
  - Blue for primary actions (buttons, links) — needs `action-primary`
  - Blue for selected-state highlight — needs `state-selected`
  - Blue for "question" type pill — decorative-categorical
  - Amber for "alert" type — palette-shift vs `status-warning` (yellow)
  - Green for "Acknowledge Selected" bulk button — primary action

Verified via npm run check:tokens (10 tokens valid) and npm run build.

Refs #554

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@oleksandr-korin oleksandr-korin mentioned this pull request Apr 28, 2026
Merged
4 tasks
vybe
vybe approved these changes Apr 29, 2026
View reviewed changes

@vybe vybe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — clean token migration, semantics correct, deferred items well-documented. Approved.

@vybe
vybe merged commit b19b03c into dev Apr 29, 2026
1 check passed
vybe added a commit that referenced this pull request Apr 29, 2026
@oleksandr-korin @claude @vybe
feat(frontend): Playwright e2e harness gated on ui label (#556) (#571)
747d156 
* feat(frontend): Playwright e2e harness gated on `ui` label (#556)

Phase 2 of #556 (frontend test infrastructure). Adds @playwright/test as a
dev dependency and a minimal smoke-test harness covering login, dashboard,
agents, operating room, and templates pages.

Files:
  src/frontend/playwright.config.js     Chromium-only, baseURL configurable
  src/frontend/e2e/auth.setup.js        Storage-state pattern (login once,
                                        reuse session across specs)
  src/frontend/e2e/smoke.spec.js        4 cross-page smoke tests
  src/frontend/e2e/README.md            How to run + add tests
  src/frontend/.gitignore               Excludes session state + reports
  src/frontend/package.json             test:e2e[:ui|:headed|:update] scripts
  .github/workflows/frontend-e2e.yml    Runs only on PRs with `ui` label

CI strategy: e2e is opt-in via the `ui` label rather than running on every
frontend PR — the workflow stands up the full Trinity docker-compose stack
and adds ~5 min runtime per PR. Backend-only PRs skip it.

Out of scope (separate slices of #556):
  - Vitest unit / component tests (Phase 1)
  - vue-tsc type checking (Phase 3)
  - Visual regression baseline for the design system (added per-component
    in #569 follow-ups)

Local verification: `cd src/frontend && ADMIN_PASSWORD=<pwd> npm run test:e2e`
against a running ./scripts/deploy/start.sh stack. CI is the canonical
verification path.

Refs #556

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* docs(requirements): add 8.8 Frontend E2E Test Infrastructure entry (#556)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: vybe <me@evyborov.com>
This was referenced Apr 29, 2026
Merged
Open
vybe pushed a commit that referenced this pull request Apr 30, 2026
@oleksandr-korin @claude
refactor(frontend): migrate Monitoring view to design-system tokens (#…
9a4655c 
…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>
vybe pushed a commit that referenced this pull request Apr 30, 2026
@oleksandr-korin @claude @vybe
refactor(frontend): migrate ApiKeys + tier e2e tests by @smoke tag (#554
0587d72 
/#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
@oleksandr-korin @claude
refactor(frontend): migrate ApiKeys + tier e2e tests by @smoke tag (#554
a3011c4 
/#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>
@oleksandr-korin oleksandr-korin mentioned this pull request May 12, 2026
Closed
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@vybe vybe vybe approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@oleksandr-korin @vybe