refactor(frontend): sweep slice 9 + drift catch-up — 24 files (#554) - #809
Merged
Conversation
Final design-system sweep. Migrates the last 24 files with raw semantic palette references to the token system (#554). Slice 9 targets (judgment-heavy, grew significantly since slice 8): - views/Settings.vue (161 refs — Settings split into tabs + audit log) - views/ExecutionDetail.vue (98 refs) Drift catch-up — slice 8 regressions: - components/TasksPanel.vue (new `session` trigger badge) - components/AgentHeader.vue (BETA pill) Drift catch-up — new files since slice 8: - components/SessionPanel.vue (28 refs) - views/AgentWorkspace.vue (6 refs) - components/settings/McpKeysTab.vue (5 refs) Drift catch-up — previously un-migrated files: - views/PublicChat.vue (16) - components/process/RoleMatrix.vue (12) - components/operator/QueueItemDetail.vue (10) - components/ChatPanel.vue (8) - components/ResourceModal.vue (7) - components/SharingPanel.vue (6) - components/FileSharingPanel.vue (6) - components/OnboardingChecklist.vue (5) - components/operator/QueueCard.vue (4) - components/file-manager/FileTreeNode.vue (4) - components/WhatsAppChannelPanel.vue (4) - stores/operatorQueue.js (3) - components/operator/QueueList.vue (2) - components/operator/NotificationsPanel.vue (2) - components/file-manager/FilePreview.vue (2) - components/PublicLinksPanel.vue (2) - views/Dashboard.vue (1) Mappings (palette-equivalent — no visual change): - yellow → status-warning - green → status-success - red → status-danger - orange → status-urgent - amber → state-autonomous - rose → state-locked - purple → accent-purple Post-migration the entire frontend has zero raw semantic palette references — slice 10 can now focus on defining action-primary / state-selected token families and cleaning up the deferred indigo/blue/sky/teal residuals. Verification: - grep across src/ for raw semantic colors → 0 results - npm run check:tokens → 10 tokens equivalent, all references resolve - npm run build → clean - e2e: deferred to CI (local Trinity stack was down) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
oleksandr-korin
added
the
ui
Review caught a perl regex bug that affected both slice 8 (#614, already on dev) and slice 9 (this PR). The bulk-migration prefix list included `accent` (intended for Tailwind's `accent-*` form-control utility), but this matched already-migrated `accent-purple-X` references and double-substituted them to `accent-accent-purple-X`. Tailwind silently rendered the typo'd class as form-control accent color with shade — visually identical purple, but syntactically broken and unintended. Reverts all `accent-accent-purple` → `accent-purple` across the 8 affected source files: - DashboardPanel.vue (pre-existing from slice 8, now fixed) - AgentHeader.vue (introduced in slice 9) - TasksPanel.vue (introduced in slice 9, slice 8 had it too) - settings/McpKeysTab.vue (introduced in slice 9) - operator/QueueItemDetail (introduced in slice 9) - operator/QueueList (introduced in slice 9) - operator/QueueCard (introduced in slice 9) - operator/NotificationsPanel (introduced in slice 9) Verified clean: zero `accent-accent` patterns in src/, check:tokens passes, build clean. Note for slice 10: the perl regex needs `accent` removed from the prefix-list alternation to prevent re-introduction. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
vybe
approved these changes
May 12, 2026
vybe
left a comment
vybe
left a comment
Contributor
There was a problem hiding this comment.
LGTM. Clean mechanical sweep — zero behavior change, correct token mappings, accent-accent-purple double-prefix caught and fixed in the same PR. CI fully green including e2e.
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
Final design-system token sweep (#554). Migrates the last 24 files containing raw semantic palette references — zero remaining anywhere in
src/after this lands.Composition
Slice 9 targets (grew significantly since slice 8):
views/Settings.vue— 161 refs (Settings was split into tabs + audit log work)views/ExecutionDetail.vue— 98 refsDrift catch-up — slice 8 regressions (2 refs):
components/TasksPanel.vue(newsessiontrigger badge)components/AgentHeader.vue(BETA pill)Drift catch-up — new files since slice 8 (39 refs):
components/SessionPanel.vue(28)views/AgentWorkspace.vue(6)components/settings/McpKeysTab.vue(5)Drift catch-up — previously un-migrated files (~80 refs):
views/PublicChat.vue(16),components/process/RoleMatrix.vue(12),components/operator/QueueItemDetail.vue(10),components/ChatPanel.vue(8),components/ResourceModal.vue(7),components/SharingPanel.vue(6),components/FileSharingPanel.vue(6),components/OnboardingChecklist.vue(5),components/operator/QueueCard.vue(4),components/file-manager/FileTreeNode.vue(4),components/WhatsAppChannelPanel.vue(4),stores/operatorQueue.js(3),components/operator/QueueList.vue(2),components/operator/NotificationsPanel.vue(2),components/file-manager/FilePreview.vue(2),components/PublicLinksPanel.vue(2),views/Dashboard.vue(1)Mappings (palette-equivalent — zero visual change)
yellow→status-warninggreen→status-successred→status-dangerorange→status-urgentamber→state-autonomousrose→state-lockedpurple→accent-purpleAfter this lands
Slice 10 (final) can focus on:
action-primaryfor indigo,state-selectedfor selected-state blue)Verification
grep -rE '(text\|bg\|border\|ring\|...)-(red\|green\|yellow\|orange\|amber\|rose\|purple)-\d+' src/→ 0 resultsnpm run check:tokens→ ✅ 10 tokens equivalent, all references resolvenpm run build→ ✅ cleanTest plan
frontend-buildCI greenfrontend-e2eCI green (label:ui)Part of #554 — final mechanical sweep before slice 10's structural work.
🤖 Generated with Claude Code