Sweep remaining frontend status colors to design-system tokens (#67 follow-up)

[oleksandr-korin]

Summary

Follow-up to #67 (PR #553), which landed the semantic status token system and migrated 9 reference files. Approximately 70 frontend files still use raw color classes (bg-green-500, text-red-600, etc.) that should consume the new tokens.

Context

PR #553 introduced these tokens in tailwind.config.js:

• status-success (green)
• status-warning (yellow)
• status-danger (red)
• status-info (blue)
• status-urgent (orange)

And migrated:

• StatusIndicator.vue, CapacityMeter.vue, RunningStateToggle.vue
• utils/syncHealth.js, composables/useFormatters.js
• components/MetricsPanel.vue, components/DashboardPanel.vue, components/SchedulesPanel.vue, components/TasksPanel.vue

Per the autoplan that scoped #67, the full sweep was deliberately deferred to keep that PR reviewable.

Scope

Migrate the remaining ~70 components/views from raw color classes to the new tokens. Prefer per-domain sub-PRs to keep reviews tractable, e.g.:

• Agent views — Agents.vue, AgentDetail.vue, AgentNode.vue, AgentHeader.vue, AgentTerminal.vue, AgentCollaboration.vue
• Settings & admin — Settings.vue (~338 raw color uses!), ApiKeys.vue, Login.vue, SetupPassword.vue, MobileAdmin.vue
• Operator queue & monitoring — OperatingRoom.vue, Monitoring.vue, operator/*.vue, UnifiedActivityPanel.vue, ReplayTimeline.vue, HostTelemetry.vue
• Channels — SlackChannelPanel.vue, TelegramChannelPanel.vue, WhatsAppChannelPanel.vue, PublicLinksPanel.vue, SharingPanel.vue
• File manager — FileManager.vue, FilesPanel.vue, FileTreeNode.vue, file-manager/*.vue
• Chat & process — ChatPanel.vue, chat/*.vue, process/*.vue
• Misc panels — CredentialsPanel.vue, GitPanel.vue, SkillsPanel.vue, PlaybooksPanel.vue, TagsEditor.vue, NeverminedPanel.vue, etc.

Blocked by

#555 — about 4–5 components need new families before they can migrate cleanly:

• Purple in DashboardPanel.getStatusColors → needs accent family
• Orange/blue in RuntimeBadge.vue → needs brand-claude / brand-gemini
• Amber in AutonomyToggle.vue → needs state-autonomous (or similar)
• Rose in ReadOnlyToggle.vue → needs status-restrictive (or similar)

The status-only sweep can proceed in parallel for components that don't hit these gaps.

Acceptance

• All raw bg/text/border/ring-{green,yellow,red,blue,orange}-* references in src/frontend/src/ migrated to corresponding status-* tokens (where the color carries status meaning)
• npm run check:tokens (added in feat(frontend): semantic status color tokens (#67) #553) keeps passing across the migration
• Visual smoke pass — no perceptible color changes
• Optional but encouraged: split into per-domain sub-PRs

Out of scope

• Gray/slate/neutral palette (separate concern; likely a neutral-* token family in its own ticket)
• style.css scrollbar hex values (separate ticket)
• monitoring.js getStatusColor (returns bare names, different abstraction)

[oleksandr-korin]

Caveat surfaced during review of #561 — worth flagging before this sweep starts:

Don't blindly map bg/text/border-{amber|rose|purple}-* → state-* / accent-* tokens. A grep showed 34 files using these colors, but most are not the same semantic as state-autonomous / state-locked / accent-purple. Examples:

• text-amber-700 in many warning/advisory contexts is semantically status-warning, not state-autonomous.
• bg-rose-100 for error highlights is status-danger, not state-locked.
• bg-purple-* for branding/category badges is probably accent-purple, but each instance needs eyeballing.

Recommendation when sweeping:

• Treat each callsite as a judgment call about meaning, not a mechanical search-and-replace.
• When the meaning is ambiguous, lean toward the existing status-* family unless the color is explicitly representing a mode/state/brand/accent.
• For raw gray/slate/neutral, defer entirely until the neutral palette ticket lands.

Cross-ref: discussed in PR #561 /review.

[oleksandr-korin]

/claim

[github-actions]

@oleksandr-korin This issue is already assigned to oleksandr-korin. Use /unclaim first if you want to take over.