diff --git a/src/frontend/src/components/AgentHeader.vue b/src/frontend/src/components/AgentHeader.vue index c80ae6909..d9475624a 100644 --- a/src/frontend/src/components/AgentHeader.vue +++ b/src/frontend/src/components/AgentHeader.vue @@ -162,7 +162,7 @@ Workspace - BETA + BETA -
-

Subscription Usage Limit

-

{{ error }}

+
+

Subscription Usage Limit

+

{{ error }}

diff --git a/src/frontend/src/components/DashboardPanel.vue b/src/frontend/src/components/DashboardPanel.vue index 0aaa00564..ddc61f26b 100644 --- a/src/frontend/src/components/DashboardPanel.vue +++ b/src/frontend/src/components/DashboardPanel.vue @@ -510,7 +510,7 @@ const getStatusColors = (color) => { gray: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300', blue: 'bg-status-info-100 text-status-info-800 dark:bg-status-info-900/50 dark:text-status-info-300', orange: 'bg-status-urgent-100 text-status-urgent-800 dark:bg-status-urgent-900/50 dark:text-status-urgent-300', - purple: 'bg-accent-accent-purple-100 text-accent-accent-purple-800 dark:bg-accent-accent-purple-900/50 dark:text-accent-accent-purple-300' + purple: 'bg-accent-purple-100 text-accent-purple-800 dark:bg-accent-purple-900/50 dark:text-accent-purple-300' } return colorMap[color] || colorMap.gray } 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..d6c240e70 100644 --- a/src/frontend/src/components/TasksPanel.vue +++ b/src/frontend/src/components/TasksPanel.vue @@ -201,7 +201,7 @@ :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 === 'paid' ? '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/WhatsAppChannelPanel.vue b/src/frontend/src/components/WhatsAppChannelPanel.vue index 0cf4e7cb6..96dfd8a72 100644 --- a/src/frontend/src/components/WhatsAppChannelPanel.vue +++ b/src/frontend/src/components/WhatsAppChannelPanel.vue @@ -82,7 +82,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..0ad58d459 100644 --- a/src/frontend/src/components/operator/NotificationsPanel.vue +++ b/src/frontend/src/components/operator/NotificationsPanel.vue @@ -119,7 +119,7 @@
diff --git a/src/frontend/src/components/operator/QueueCard.vue b/src/frontend/src/components/operator/QueueCard.vue index f1fc61b45..e90ec0f24 100644 --- a/src/frontend/src/components/operator/QueueCard.vue +++ b/src/frontend/src/components/operator/QueueCard.vue @@ -217,7 +217,7 @@ function typePill(type) { return { approval: 'bg-accent-purple-50 text-accent-purple-600 dark:bg-accent-purple-900/20 dark:text-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..25cd26029 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 @@ > @@ -236,7 +236,7 @@ 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', 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..a20b3ed8b 100644 --- a/src/frontend/src/components/operator/QueueList.vue +++ b/src/frontend/src/components/operator/QueueList.vue @@ -164,7 +164,7 @@ function typeIconColor(type) { const colors = { approval: 'text-accent-purple-500 dark:text-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..883182f47 100644 --- a/src/frontend/src/components/settings/McpKeysTab.vue +++ b/src/frontend/src/components/settings/McpKeysTab.vue @@ -83,7 +83,7 @@ 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 @@