From f0168943fad8438783fe515f611cb50153e4f84a Mon Sep 17 00:00:00 2001 From: Alex Korin Date: Tue, 12 May 2026 10:29:25 +0100 Subject: [PATCH 1/2] =?UTF-8?q?refactor(frontend):=20sweep=20slice=209=20+?= =?UTF-8?q?=20drift=20catch-up=20=E2=80=94=2024=20files=20(#554)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/frontend/src/components/AgentHeader.vue | 4 +- src/frontend/src/components/ChatPanel.vue | 6 +- .../src/components/FileSharingPanel.vue | 2 +- .../src/components/OnboardingChecklist.vue | 8 +- .../src/components/PublicLinksPanel.vue | 2 +- src/frontend/src/components/ResourceModal.vue | 6 +- src/frontend/src/components/SessionPanel.vue | 22 +-- src/frontend/src/components/SharingPanel.vue | 2 +- src/frontend/src/components/TasksPanel.vue | 10 +- .../src/components/WhatsAppChannelPanel.vue | 2 +- .../components/file-manager/FilePreview.vue | 4 +- .../components/file-manager/FileTreeNode.vue | 8 +- .../operator/NotificationsPanel.vue | 4 +- .../src/components/operator/QueueCard.vue | 4 +- .../components/operator/QueueItemDetail.vue | 8 +- .../src/components/operator/QueueList.vue | 4 +- .../src/components/process/RoleMatrix.vue | 6 +- .../src/components/settings/McpKeysTab.vue | 6 +- src/frontend/src/stores/operatorQueue.js | 4 +- src/frontend/src/views/AgentWorkspace.vue | 6 +- src/frontend/src/views/Dashboard.vue | 2 +- src/frontend/src/views/ExecutionDetail.vue | 80 +++++------ src/frontend/src/views/PublicChat.vue | 10 +- src/frontend/src/views/Settings.vue | 134 +++++++++--------- 24 files changed, 172 insertions(+), 172 deletions(-) diff --git a/src/frontend/src/components/AgentHeader.vue b/src/frontend/src/components/AgentHeader.vue index c80ae6909..f16c5754d 100644 --- a/src/frontend/src/components/AgentHeader.vue +++ b/src/frontend/src/components/AgentHeader.vue @@ -97,7 +97,7 @@ SYSTEM @@ -162,7 +162,7 @@ Workspace - BETA + BETA -
-

Subscription Usage Limit

-

{{ error }}

+
+

Subscription Usage Limit

+

{{ error }}

diff --git a/src/frontend/src/components/FileSharingPanel.vue b/src/frontend/src/components/FileSharingPanel.vue index 0f5eab715..52f5f0714 100644 --- a/src/frontend/src/components/FileSharingPanel.vue +++ b/src/frontend/src/components/FileSharingPanel.vue @@ -34,7 +34,7 @@
Configuration changed — restart the agent to mount or detach /home/developer/public/. diff --git a/src/frontend/src/components/OnboardingChecklist.vue b/src/frontend/src/components/OnboardingChecklist.vue index 5d1703ca5..21e223544 100644 --- a/src/frontend/src/components/OnboardingChecklist.vue +++ b/src/frontend/src/components/OnboardingChecklist.vue @@ -33,7 +33,7 @@ >
@@ -54,7 +54,7 @@
🎉 Great job! Here's your next step: @@ -66,7 +66,7 @@
@@ -131,7 +131,7 @@ v-if="!item.completed && item.link && isCurrentStep(index)" class="flex-shrink-0 text-xs font-medium" :class="isOnTargetPage(item) - ? 'text-amber-600 dark:text-amber-400' + ? 'text-state-autonomous-600 dark:text-state-autonomous-400' : 'text-indigo-600 dark:text-indigo-400'" > {{ isOnTargetPage(item) ? 'See above ↑' : 'Start →' }} diff --git a/src/frontend/src/components/PublicLinksPanel.vue b/src/frontend/src/components/PublicLinksPanel.vue index 11fd22309..a9e1894e3 100644 --- a/src/frontend/src/components/PublicLinksPanel.vue +++ b/src/frontend/src/components/PublicLinksPanel.vue @@ -281,7 +281,7 @@ Proxy agent's web server
-

+

Requires the agent to run a web server on port 3000 (e.g. Next.js).

diff --git a/src/frontend/src/components/ResourceModal.vue b/src/frontend/src/components/ResourceModal.vue index 364d21d6c..19e1c7058 100644 --- a/src/frontend/src/components/ResourceModal.vue +++ b/src/frontend/src/components/ResourceModal.vue @@ -23,12 +23,12 @@
-
+
- + -

+

If the agent is running, it will be automatically restarted to apply changes.

diff --git a/src/frontend/src/components/SessionPanel.vue b/src/frontend/src/components/SessionPanel.vue index 6ea76170a..1b4bf24d3 100644 --- a/src/frontend/src/components/SessionPanel.vue +++ b/src/frontend/src/components/SessionPanel.vue @@ -51,7 +51,7 @@ {{ formatContextPercent(session) }} ● ● - + {{ session.consecutive_resume_failures }} resume failure(s)

@@ -72,7 +72,7 @@ diff --git a/src/frontend/src/components/SharingPanel.vue b/src/frontend/src/components/SharingPanel.vue index 3173ee157..0438a649d 100644 --- a/src/frontend/src/components/SharingPanel.vue +++ b/src/frontend/src/components/SharingPanel.vue @@ -56,7 +56,7 @@
Heads up: you've required verified email but haven't shared with anyone or enabled Open access. Every verified user will land in Pending Access Requests and stay locked out until you approve them one by one. diff --git a/src/frontend/src/components/TasksPanel.vue b/src/frontend/src/components/TasksPanel.vue index 6f84773e9..e6bb76202 100644 --- a/src/frontend/src/components/TasksPanel.vue +++ b/src/frontend/src/components/TasksPanel.vue @@ -178,7 +178,7 @@ task.status === 'cancelled' ? 'bg-status-urgent-100 dark:bg-status-urgent-900/30 text-status-urgent-800 dark:text-status-urgent-300' : task.status === 'running' ? 'bg-status-warning-100 dark:bg-status-warning-900/30 text-status-warning-800 dark:text-status-warning-300' : task.status === 'queued' ? 'bg-state-autonomous-100 dark:bg-state-autonomous-900/30 text-state-autonomous-800 dark:text-state-autonomous-300' : - task.status === 'skipped' ? 'bg-accent-purple-100 dark:bg-accent-purple-900/30 text-accent-purple-800 dark:text-accent-purple-300' : + task.status === 'skipped' ? 'bg-accent-accent-purple-100 dark:bg-accent-accent-purple-900/30 text-accent-accent-purple-800 dark:text-accent-accent-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300' ]" > @@ -190,7 +190,7 @@ task.status === 'cancelled' ? 'bg-status-urgent-500' : task.status === 'running' ? 'bg-status-warning-500 animate-pulse' : task.status === 'queued' ? 'bg-state-autonomous-500' : - task.status === 'skipped' ? 'bg-accent-purple-500' : + task.status === 'skipped' ? 'bg-accent-accent-purple-500' : 'bg-gray-500' ]" > @@ -201,9 +201,9 @@ :class="[ 'px-1.5 py-0.5 rounded text-xs', task.triggered_by === 'chat' ? 'bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300' : - task.triggered_by === 'session' ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300' : + task.triggered_by === 'session' ? 'bg-state-autonomous-100 dark:bg-state-autonomous-900/30 text-state-autonomous-700 dark:text-state-autonomous-300' : task.triggered_by === 'manual' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : - task.triggered_by === 'schedule' ? 'bg-accent-purple-100 dark:bg-accent-purple-900/30 text-accent-purple-700 dark:text-accent-purple-300' : + task.triggered_by === 'schedule' ? 'bg-accent-accent-purple-100 dark:bg-accent-accent-purple-900/30 text-accent-accent-purple-700 dark:text-accent-accent-purple-300' : task.triggered_by === 'paid' ? 'bg-status-warning-100 dark:bg-status-warning-900/30 text-status-warning-700 dark:text-status-warning-300' : task.triggered_by === 'public' ? 'bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400' @@ -351,7 +351,7 @@
-
+
Deployment prerequisite: Cloudflare Tunnel ingress must route /api/whatsapp/webhook/* to the frontend service. See docs/requirements/PUBLIC_EXTERNAL_ACCESS_SETUP.md. diff --git a/src/frontend/src/components/file-manager/FilePreview.vue b/src/frontend/src/components/file-manager/FilePreview.vue index c4ff62594..a866e6d70 100644 --- a/src/frontend/src/components/file-manager/FilePreview.vue +++ b/src/frontend/src/components/file-manager/FilePreview.vue @@ -24,7 +24,7 @@
- +

{{ file.name }}

@@ -62,7 +62,7 @@
- +
diff --git a/src/frontend/src/components/file-manager/FileTreeNode.vue b/src/frontend/src/components/file-manager/FileTreeNode.vue index 1fd1d68b5..8499484ff 100644 --- a/src/frontend/src/components/file-manager/FileTreeNode.vue +++ b/src/frontend/src/components/file-manager/FileTreeNode.vue @@ -113,14 +113,14 @@ const fileIcon = computed(() => { }) const iconColor = computed(() => { - if (props.item.type === 'directory') return 'text-yellow-500' + if (props.item.type === 'directory') return 'text-status-warning-500' const ext = fileExtension.value - if (['mp4', 'webm', 'mov', 'avi', 'mkv'].includes(ext)) return 'text-purple-500' - if (['mp3', 'wav', 'ogg', 'm4a', 'flac', 'aac'].includes(ext)) return 'text-green-500' + if (['mp4', 'webm', 'mov', 'avi', 'mkv'].includes(ext)) return 'text-accent-purple-500' + if (['mp3', 'wav', 'ogg', 'm4a', 'flac', 'aac'].includes(ext)) return 'text-status-success-500' if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'bmp'].includes(ext)) return 'text-blue-500' if (['js', 'ts', 'jsx', 'tsx', 'py', 'go', 'rs', 'rb', 'java', 'c', 'cpp', 'h', 'css', 'scss', 'html', 'vue', 'svelte'].includes(ext)) return 'text-gray-500' - if (['pdf'].includes(ext)) return 'text-red-500' + if (['pdf'].includes(ext)) return 'text-status-danger-500' return 'text-gray-400' }) diff --git a/src/frontend/src/components/operator/NotificationsPanel.vue b/src/frontend/src/components/operator/NotificationsPanel.vue index 52214c7f8..1a4049a92 100644 --- a/src/frontend/src/components/operator/NotificationsPanel.vue +++ b/src/frontend/src/components/operator/NotificationsPanel.vue @@ -119,7 +119,7 @@
@@ -523,7 +523,7 @@ function getTypeBadge(type) { const classes = { alert: 'bg-status-danger-100 dark:bg-status-danger-900/30 text-status-danger-700 dark:text-status-danger-300', info: 'bg-status-info-100 dark:bg-status-info-900/30 text-status-info-700 dark:text-status-info-300', - status: 'bg-accent-purple-100 dark:bg-accent-purple-900/30 text-accent-purple-700 dark:text-accent-purple-300', + status: 'bg-accent-accent-purple-100 dark:bg-accent-accent-purple-900/30 text-accent-accent-purple-700 dark:text-accent-accent-purple-300', completion: 'bg-status-success-100 dark:bg-status-success-900/30 text-status-success-700 dark:text-status-success-300', question: 'bg-status-warning-100 dark:bg-status-warning-900/30 text-status-warning-700 dark:text-status-warning-300', } diff --git a/src/frontend/src/components/operator/QueueCard.vue b/src/frontend/src/components/operator/QueueCard.vue index f1fc61b45..4c16ada88 100644 --- a/src/frontend/src/components/operator/QueueCard.vue +++ b/src/frontend/src/components/operator/QueueCard.vue @@ -215,9 +215,9 @@ function optionClass(idx) { function typePill(type) { return { - approval: 'bg-accent-purple-50 text-accent-purple-600 dark:bg-accent-purple-900/20 dark:text-accent-purple-400', + approval: 'bg-accent-accent-purple-50 text-accent-accent-purple-600 dark:bg-accent-accent-purple-900/20 dark:text-accent-accent-purple-400', question: 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400', - alert: 'bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400' + alert: 'bg-state-autonomous-50 text-state-autonomous-600 dark:bg-state-autonomous-900/20 dark:text-state-autonomous-400' }[type] || '' } diff --git a/src/frontend/src/components/operator/QueueItemDetail.vue b/src/frontend/src/components/operator/QueueItemDetail.vue index 679debbf4..f325e0a35 100644 --- a/src/frontend/src/components/operator/QueueItemDetail.vue +++ b/src/frontend/src/components/operator/QueueItemDetail.vue @@ -57,7 +57,7 @@ {{ formatDate(item.created_at) }} - + @@ -179,7 +179,7 @@ > @@ -234,9 +234,9 @@ function optionSelectedClass(idx) { function typeBadge(type) { const badges = { - approval: 'bg-accent-purple-100 text-accent-purple-700 dark:bg-accent-purple-900/30 dark:text-accent-purple-400', + approval: 'bg-accent-accent-purple-100 text-accent-accent-purple-700 dark:bg-accent-accent-purple-900/30 dark:text-accent-accent-purple-400', question: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', - alert: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' + alert: 'bg-state-autonomous-100 text-state-autonomous-700 dark:bg-state-autonomous-900/30 dark:text-state-autonomous-400' } return badges[type] || '' } diff --git a/src/frontend/src/components/operator/QueueList.vue b/src/frontend/src/components/operator/QueueList.vue index 666a37b40..601fdbf2f 100644 --- a/src/frontend/src/components/operator/QueueList.vue +++ b/src/frontend/src/components/operator/QueueList.vue @@ -162,9 +162,9 @@ function typeIcon(type) { function typeIconColor(type) { const colors = { - approval: 'text-accent-purple-500 dark:text-accent-purple-400', + approval: 'text-accent-accent-purple-500 dark:text-accent-accent-purple-400', question: 'text-blue-500 dark:text-blue-400', - alert: 'text-amber-500 dark:text-amber-400' + alert: 'text-state-autonomous-500 dark:text-state-autonomous-400' } return colors[type] || 'text-gray-500' } diff --git a/src/frontend/src/components/process/RoleMatrix.vue b/src/frontend/src/components/process/RoleMatrix.vue index 5e65f5b97..5c4c6328e 100644 --- a/src/frontend/src/components/process/RoleMatrix.vue +++ b/src/frontend/src/components/process/RoleMatrix.vue @@ -40,7 +40,7 @@ Executor
- M + M Monitor
@@ -149,7 +149,7 @@
{{ warning }} @@ -314,7 +314,7 @@ function getRoleCellClass(stepId, agent) { case 'executor': return `${base} bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-400 font-semibold`; case 'monitor': - return `${base} bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 font-semibold`; + return `${base} bg-state-autonomous-100 dark:bg-state-autonomous-900/40 text-state-autonomous-700 dark:text-state-autonomous-400 font-semibold`; case 'informed': return `${base} bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-400 font-semibold`; default: diff --git a/src/frontend/src/components/settings/McpKeysTab.vue b/src/frontend/src/components/settings/McpKeysTab.vue index 6f143025f..48e089132 100644 --- a/src/frontend/src/components/settings/McpKeysTab.vue +++ b/src/frontend/src/components/settings/McpKeysTab.vue @@ -80,10 +80,10 @@ :class="key.is_active ? 'bg-status-success-100 dark:bg-status-success-900/50 text-status-success-800 dark:text-status-success-300' : 'bg-status-danger-100 dark:bg-status-danger-900/50 text-status-danger-800 dark:text-status-danger-300'"> {{ key.is_active ? 'Active' : 'Revoked' }} - + Agent - + System
@@ -232,7 +232,7 @@ {{ copiedConfig ? 'Copied!' : 'Copy Config' }}
- 
{{ getMcpConfig(createdApiKey) }}
+ 
{{ getMcpConfig(createdApiKey) }}
diff --git a/src/frontend/src/stores/operatorQueue.js b/src/frontend/src/stores/operatorQueue.js index bd2bad369..06db9cc48 100644 --- a/src/frontend/src/stores/operatorQueue.js +++ b/src/frontend/src/stores/operatorQueue.js @@ -12,8 +12,8 @@ import { useAuthStore } from './auth' // Agent display helpers const AGENT_COLORS = [ - 'bg-blue-500', 'bg-emerald-500', 'bg-purple-500', 'bg-amber-500', - 'bg-rose-500', 'bg-cyan-500', 'bg-indigo-500', 'bg-teal-500' + 'bg-blue-500', 'bg-emerald-500', 'bg-accent-purple-500', 'bg-state-autonomous-500', + 'bg-state-locked-500', 'bg-cyan-500', 'bg-indigo-500', 'bg-teal-500' ] function getAgentProfile(name) { diff --git a/src/frontend/src/views/AgentWorkspace.vue b/src/frontend/src/views/AgentWorkspace.vue index 34f9ec61b..c4b57554e 100644 --- a/src/frontend/src/views/AgentWorkspace.vue +++ b/src/frontend/src/views/AgentWorkspace.vue @@ -22,14 +22,14 @@ :class="[ 'px-2 py-0.5 text-[11px] font-medium rounded-full flex-shrink-0', agent.status === 'running' - ? 'bg-green-900/50 text-green-400' + ? 'bg-status-success-900/50 text-status-success-400' : 'bg-gray-700 text-gray-400' ]" >{{ agent.status }} - + BETA @@ -169,7 +169,7 @@ prose-headings:text-gray-100 prose-headings:font-semibold prose-p:text-gray-300 prose-p:leading-relaxed prose-strong:text-gray-100 - prose-code:text-amber-300 prose-code:bg-gray-800 prose-code:px-1 prose-code:rounded prose-code:text-xs + prose-code:text-state-autonomous-300 prose-code:bg-gray-800 prose-code:px-1 prose-code:rounded prose-code:text-xs prose-pre:bg-gray-800 prose-pre:border prose-pre:border-gray-700 prose-ul:text-gray-300 prose-ol:text-gray-300 prose-li:marker:text-gray-500 diff --git a/src/frontend/src/views/Dashboard.vue b/src/frontend/src/views/Dashboard.vue index 2e9332ed2..eaaffcef9 100644 --- a/src/frontend/src/views/Dashboard.vue +++ b/src/frontend/src/views/Dashboard.vue @@ -86,7 +86,7 @@ :class="[ 'flex items-center space-x-1 px-2 py-0.5 rounded text-xs font-medium transition-all', showTagClouds - ? 'bg-purple-600 text-white' + ? 'bg-accent-purple-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' ]" title="Toggle tag grouping clouds" diff --git a/src/frontend/src/views/ExecutionDetail.vue b/src/frontend/src/views/ExecutionDetail.vue index 873734e12..1a3c8e218 100644 --- a/src/frontend/src/views/ExecutionDetail.vue +++ b/src/frontend/src/views/ExecutionDetail.vue @@ -47,7 +47,7 @@ v-if="execution?.status === 'running'" @click="stopExecution" :disabled="isStopping" - class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center space-x-1" + class="px-3 py-1.5 bg-status-danger-600 hover:bg-status-danger-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center space-x-1" title="Stop execution" > @@ -89,15 +89,15 @@
-
- +
+ -

Failed to load execution

-

{{ error }}

+

Failed to load execution

+

{{ error }}

@@ -126,8 +126,8 @@
-
- +
+
@@ -141,8 +141,8 @@
-
- +
+
@@ -234,9 +234,9 @@
-
-
-

+
+
+

@@ -244,7 +244,7 @@

- 
{{ execution.error }}
+ 
{{ execution.error }}
@@ -259,16 +259,16 @@

-
- +
+
-

{{ streamError }}

+

{{ streamError }}

@@ -282,10 +282,10 @@
- - + + - Live + Live
@@ -351,15 +351,15 @@
-
- +
+
-
+
- {{ entry.tool }} + {{ entry.tool }} 
{{ entry.input }}
@@ -367,13 +367,13 @@
-
- +
+
-
-
Result
+
+
Result
{{ entry.content }}
@@ -382,7 +382,7 @@
- Completed + Completed {{ entry.numTurns }} turns
@@ -434,20 +434,20 @@ const MAX_STREAM_RETRIES = 12 // Max retries (12 * 5s = 60s) const statusClass = computed(() => { if (!execution.value) return '' const status = execution.value.status - if (status === 'success') return 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300' - if (status === 'failed') return 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300' + if (status === 'success') return 'bg-status-success-100 text-status-success-800 dark:bg-status-success-900/50 dark:text-status-success-300' + if (status === 'failed') return 'bg-status-danger-100 text-status-danger-800 dark:bg-status-danger-900/50 dark:text-status-danger-300' if (status === 'running') return 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300' - if (status === 'queued') return 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300' - if (status === 'skipped') return 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-300' + if (status === 'queued') return 'bg-state-autonomous-100 text-state-autonomous-800 dark:bg-state-autonomous-900/50 dark:text-state-autonomous-300' + if (status === 'skipped') return 'bg-accent-purple-100 text-accent-purple-800 dark:bg-accent-purple-900/50 dark:text-accent-purple-300' return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }) const triggerIconClass = computed(() => { if (!execution.value) return 'bg-gray-100 dark:bg-gray-700' const trigger = execution.value.triggered_by - if (trigger === 'schedule') return 'bg-purple-100 dark:bg-purple-900/50' - if (trigger === 'manual') return 'bg-amber-100 dark:bg-amber-900/50' - if (trigger === 'paid') return 'bg-yellow-100 dark:bg-yellow-900/50' + if (trigger === 'schedule') return 'bg-accent-purple-100 dark:bg-accent-purple-900/50' + if (trigger === 'manual') return 'bg-state-autonomous-100 dark:bg-state-autonomous-900/50' + if (trigger === 'paid') return 'bg-status-warning-100 dark:bg-status-warning-900/50' if (trigger === 'public') return 'bg-teal-100 dark:bg-teal-900/50' return 'bg-cyan-100 dark:bg-cyan-900/50' }) @@ -455,9 +455,9 @@ const triggerIconClass = computed(() => { const triggerIconColor = computed(() => { if (!execution.value) return 'text-gray-600 dark:text-gray-400' const trigger = execution.value.triggered_by - if (trigger === 'schedule') return 'text-purple-600 dark:text-purple-400' - if (trigger === 'manual') return 'text-amber-600 dark:text-amber-400' - if (trigger === 'paid') return 'text-yellow-600 dark:text-yellow-400' + if (trigger === 'schedule') return 'text-accent-purple-600 dark:text-accent-purple-400' + if (trigger === 'manual') return 'text-state-autonomous-600 dark:text-state-autonomous-400' + if (trigger === 'paid') return 'text-status-warning-600 dark:text-status-warning-400' if (trigger === 'public') return 'text-teal-600 dark:text-teal-400' return 'text-cyan-600 dark:text-cyan-400' }) diff --git a/src/frontend/src/views/PublicChat.vue b/src/frontend/src/views/PublicChat.vue index 2aaa6c677..0cc6ab6cf 100644 --- a/src/frontend/src/views/PublicChat.vue +++ b/src/frontend/src/views/PublicChat.vue @@ -46,13 +46,13 @@
AUTO @@ -209,14 +209,14 @@
- + Viewing past session — read only diff --git a/src/frontend/src/views/Settings.vue b/src/frontend/src/views/Settings.vue index 046884eb8..d639eca0f 100644 --- a/src/frontend/src/views/Settings.vue +++ b/src/frontend/src/views/Settings.vue @@ -82,24 +82,24 @@
@@ -179,7 +179,7 @@ v-if="anthropicKeyStatus.configured && anthropicKeyStatus.source === 'settings'" @click="removeAnthropicKey" :disabled="removingApiKey" - class="inline-flex items-center px-4 py-2 border border-red-300 dark:border-red-700 rounded-md shadow-sm text-sm font-medium text-red-700 dark:text-red-300 bg-white dark:bg-gray-700 hover:bg-red-50 dark:hover:bg-red-900/30 disabled:opacity-50 disabled:cursor-not-allowed" + class="inline-flex items-center px-4 py-2 border border-status-danger-300 dark:border-status-danger-700 rounded-md shadow-sm text-sm font-medium text-status-danger-700 dark:text-status-danger-300 bg-white dark:bg-gray-700 hover:bg-status-danger-50 dark:hover:bg-status-danger-900/30 disabled:opacity-50 disabled:cursor-not-allowed" > @@ -191,21 +191,21 @@
@@ -284,7 +284,7 @@ v-if="githubPatStatus.configured && githubPatStatus.source === 'settings'" @click="removeGithubPat" :disabled="removingGithubPat" - class="inline-flex items-center px-4 py-2 border border-red-300 dark:border-red-700 rounded-md shadow-sm text-sm font-medium text-red-700 dark:text-red-300 bg-white dark:bg-gray-700 hover:bg-red-50 dark:hover:bg-red-900/30 disabled:opacity-50 disabled:cursor-not-allowed" + class="inline-flex items-center px-4 py-2 border border-status-danger-300 dark:border-status-danger-700 rounded-md shadow-sm text-sm font-medium text-status-danger-700 dark:text-status-danger-300 bg-white dark:bg-gray-700 hover:bg-status-danger-50 dark:hover:bg-status-danger-900/30 disabled:opacity-50 disabled:cursor-not-allowed" > @@ -296,21 +296,21 @@