refactor(frontend): sweep slice 9 + drift catch-up — 24 files (#554)

src/frontend/src/components/AgentHeader.vue

@@ -162,7 +162,7 @@
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 15a3 3 0 003-3V5a3 3 0 00-6 0v7a3 3 0 003 3z" />
             </svg>
             Workspace
-            <span class="px-1 py-0.5 text-[10px] font-semibold rounded bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 leading-none">BETA</span>
+            <span class="px-1 py-0.5 text-[10px] font-semibold rounded bg-state-autonomous-100 dark:bg-state-autonomous-900/40 text-state-autonomous-700 dark:text-state-autonomous-400 leading-none">BETA</span>
           </button>
           <!-- Running State Toggle -->
           <RunningStateToggle

src/frontend/src/components/ChatPanel.vue

@@ -138,9 +138,9 @@
       </ChatMessages>
 
       <!-- Error message -->
-      <div v-if="error" class="mx-6 mb-2 p-3 rounded-lg" :class="isRateLimitError ? 'bg-amber-100 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800' : 'bg-status-danger-100 dark:bg-status-danger-900/30 border border-status-danger-200 dark:border-status-danger-800'">
-        <p v-if="isRateLimitError" class="text-sm font-medium text-amber-700 dark:text-amber-400 mb-1">Subscription Usage Limit</p>
-        <p class="text-sm" :class="isRateLimitError ? 'text-amber-600 dark:text-amber-400' : 'text-status-danger-600 dark:text-status-danger-400'">{{ error }}</p>
+      <div v-if="error" class="mx-6 mb-2 p-3 rounded-lg" :class="isRateLimitError ? 'bg-state-autonomous-100 dark:bg-state-autonomous-900/30 border border-state-autonomous-200 dark:border-state-autonomous-800' : 'bg-status-danger-100 dark:bg-status-danger-900/30 border border-status-danger-200 dark:border-status-danger-800'">
+        <p v-if="isRateLimitError" class="text-sm font-medium text-state-autonomous-700 dark:text-state-autonomous-400 mb-1">Subscription Usage Limit</p>
+        <p class="text-sm" :class="isRateLimitError ? 'text-state-autonomous-600 dark:text-state-autonomous-400' : 'text-status-danger-600 dark:text-status-danger-400'">{{ error }}</p>
       </div>
 
       <!-- Voice overlay (VOICE-004) -->

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
 }

src/frontend/src/components/FileSharingPanel.vue

@@ -34,7 +34,7 @@
     <!-- Restart-required banner -->
     <div
       v-if="status.restart_required"
-      class="mb-4 rounded-md bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 px-4 py-3 text-sm text-amber-800 dark:text-amber-200"
+      class="mb-4 rounded-md bg-state-autonomous-50 dark:bg-state-autonomous-900/30 border border-state-autonomous-200 dark:border-state-autonomous-800 px-4 py-3 text-sm text-state-autonomous-800 dark:text-state-autonomous-200"
     >
       Configuration changed — restart the agent to mount or detach
       <code class="font-mono text-xs">/home/developer/public/</code>.

src/frontend/src/components/OnboardingChecklist.vue

@@ -33,7 +33,7 @@
   >
     <!-- Header -->
     <div
-      class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white cursor-pointer"
+      class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-indigo-500 to-accent-purple-500 text-white cursor-pointer"
       @click="toggleMinimized"
     >
       <div class="flex items-center gap-2">
@@ -54,7 +54,7 @@
     <!-- Celebration Banner -->
     <div
       v-if="isCelebrating && !isMinimized"
-      class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-4 py-2 flex items-center gap-2"
+      class="bg-gradient-to-r from-status-success-500 to-emerald-500 text-white px-4 py-2 flex items-center gap-2"
     >
       <span class="text-lg">🎉</span>
       <span class="text-sm font-medium">Great job! Here's your next step:</span>
@@ -66,7 +66,7 @@
       <div class="mb-4">
         <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
           <div
-            class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 transition-all duration-500"
+            class="h-full bg-gradient-to-r from-indigo-500 to-accent-purple-500 transition-all duration-500"
             :style="{ width: `${progressPercent}%` }"
           />
         </div>
@@ -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 →' }}

src/frontend/src/components/PublicLinksPanel.vue

@@ -281,7 +281,7 @@
                       <span class="text-xs text-gray-500 dark:text-gray-400">Proxy agent's web server</span>
                     </button>
                   </div>
-                  <p v-if="formData.link_type === 'site'" class="mt-2 text-xs text-amber-600 dark:text-amber-400">
+                  <p v-if="formData.link_type === 'site'" class="mt-2 text-xs text-state-autonomous-600 dark:text-state-autonomous-400">
                     Requires the agent to run a web server on port 3000 (e.g. Next.js).
                   </p>
                 </div>

src/frontend/src/components/ResourceModal.vue

@@ -23,12 +23,12 @@
         </div>
 
         <!-- Warning Banner -->
-        <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg">
+        <div class="mt-4 p-3 bg-state-autonomous-50 dark:bg-state-autonomous-900/30 border border-state-autonomous-200 dark:border-state-autonomous-800 rounded-lg">
           <div class="flex">
-            <svg class="h-5 w-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="h-5 w-5 text-state-autonomous-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
-            <p class="ml-3 text-sm text-amber-700 dark:text-amber-300">
+            <p class="ml-3 text-sm text-state-autonomous-700 dark:text-state-autonomous-300">
               If the agent is running, it will be automatically restarted to apply changes.
             </p>
           </div>

src/frontend/src/components/SessionPanel.vue

@@ -51,7 +51,7 @@
                   <span>{{ formatContextPercent(session) }}</span>
                   <span v-if="session.cached_claude_session_id" class="text-emerald-500" title="Has working memory">●</span>
                   <span v-else class="text-gray-300 dark:text-gray-600" title="Cold (memory cleared)">●</span>
-                  <span v-if="session.consecutive_resume_failures > 0" class="text-amber-500">
+                  <span v-if="session.consecutive_resume_failures > 0" class="text-state-autonomous-500">
                     {{ session.consecutive_resume_failures }} resume failure(s)
                   </span>
                 </p>
@@ -72,7 +72,7 @@
           <button
             @click="confirmReset"
             :disabled="loading"
-            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-900/30 rounded-lg transition-colors"
+            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-state-autonomous-600 dark:text-state-autonomous-400 hover:text-state-autonomous-700 dark:hover:text-state-autonomous-300 hover:bg-state-autonomous-50 dark:hover:bg-state-autonomous-900/30 rounded-lg transition-colors"
             title="Clear working memory (keeps message history)"
           >
             <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -105,8 +105,8 @@
     <!-- Agent not running message -->
     <div v-if="agentStatus !== 'running'" class="flex-1 flex items-center justify-center">
       <div class="text-center p-8">
-        <div class="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
-          <svg class="w-8 h-8 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="w-16 h-16 bg-status-warning-100 dark:bg-status-warning-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
+          <svg class="w-8 h-8 text-status-warning-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
         </div>
@@ -122,19 +122,19 @@
       <!-- Fallback notice (E2/E3): the resume failed and we recovered -->
       <div
         v-if="fallbackNotice"
-        class="mx-6 mt-3 px-4 py-3 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg flex items-center justify-between"
+        class="mx-6 mt-3 px-4 py-3 bg-state-autonomous-50 dark:bg-state-autonomous-900/30 border border-state-autonomous-200 dark:border-state-autonomous-800 rounded-lg flex items-center justify-between"
       >
         <div class="flex items-center space-x-2">
-          <svg class="w-5 h-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-5 h-5 text-state-autonomous-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
           </svg>
-          <span class="text-sm text-amber-700 dark:text-amber-300">
+          <span class="text-sm text-state-autonomous-700 dark:text-state-autonomous-300">
             This session’s working memory expired. Starting fresh — past messages are still visible.
           </span>
         </div>
         <button
           @click="dismissFallbackNotice"
-          class="text-amber-500 hover:text-amber-700 dark:hover:text-amber-300"
+          class="text-state-autonomous-500 hover:text-state-autonomous-700 dark:hover:text-state-autonomous-300"
           title="Dismiss"
         >
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -170,8 +170,8 @@
       </ChatMessages>
 
       <!-- Error message -->
-      <div v-if="error" class="mx-6 mb-2 p-3 rounded-lg bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800">
-        <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+      <div v-if="error" class="mx-6 mb-2 p-3 rounded-lg bg-status-danger-100 dark:bg-status-danger-900/30 border border-status-danger-200 dark:border-status-danger-800">
+        <p class="text-sm text-status-danger-600 dark:text-status-danger-400">{{ error }}</p>
       </div>
 
       <!-- Input area -->
@@ -212,7 +212,7 @@
           </button>
           <button
             @click="performReset"
-            class="px-4 py-2 text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 rounded-lg"
+            class="px-4 py-2 text-sm font-medium text-white bg-state-autonomous-600 hover:bg-state-autonomous-700 rounded-lg"
           >
             Reset memory
           </button>

src/frontend/src/components/SharingPanel.vue

@@ -56,7 +56,7 @@
       <!-- Dead-end configuration warning (#446) -->
       <div
         v-if="policy.require_email && !policy.open_access && (!shares || shares.length === 0)"
-        class="mt-4 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/40 p-3 text-sm text-amber-900 dark:text-amber-200"
+        class="mt-4 rounded-lg bg-state-autonomous-50 dark:bg-state-autonomous-900/20 border border-state-autonomous-200 dark:border-state-autonomous-800/40 p-3 text-sm text-state-autonomous-900 dark:text-state-autonomous-200"
       >
         <strong>Heads up:</strong> 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.

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' :

src/frontend/src/components/WhatsAppChannelPanel.vue

@@ -82,7 +82,7 @@
       </div>
 
       <!-- Ops prerequisite notice -->
-      <div class="p-3 rounded-lg text-xs bg-amber-50 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200">
+      <div class="p-3 rounded-lg text-xs bg-state-autonomous-50 dark:bg-state-autonomous-900/30 text-state-autonomous-800 dark:text-state-autonomous-200">
         <strong>Deployment prerequisite:</strong> Cloudflare Tunnel ingress must route
         <code class="font-mono">/api/whatsapp/webhook/*</code> to the frontend service.
         See <em>docs/requirements/PUBLIC_EXTERNAL_ACCESS_SETUP.md</em>.

src/frontend/src/components/file-manager/FilePreview.vue

@@ -24,7 +24,7 @@
     <!-- Directory Preview -->
     <div v-else-if="file.type === 'directory'" class="flex-1 flex items-center justify-center">
       <div class="text-center">
-        <svg class="h-16 w-16 text-yellow-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="h-16 w-16 text-status-warning-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
         </svg>
         <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">{{ file.name }}</h3>
@@ -62,7 +62,7 @@
       <div v-else-if="isAudio" class="flex-1 flex items-center justify-center p-4">
         <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
           <div class="flex items-center justify-center mb-4">
-            <svg class="h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="h-16 w-16 text-status-success-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
             </svg>
           </div>

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'
 })

src/frontend/src/components/operator/NotificationsPanel.vue

@@ -119,7 +119,7 @@
       <div class="flex gap-2">
         <button
           @click="bulkAcknowledge"
-          class="px-3 py-1.5 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg"
+          class="px-3 py-1.5 text-xs font-medium text-white bg-status-success-600 hover:bg-status-success-700 rounded-lg"
         >
           Acknowledge Selected
         </button>

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] || ''
 }
 

src/frontend/src/components/operator/QueueItemDetail.vue

@@ -57,7 +57,7 @@
             </svg>
             {{ formatDate(item.created_at) }}
           </span>
-          <span v-if="item.expires_at" class="inline-flex items-center gap-1 text-amber-600 dark:text-amber-400">
+          <span v-if="item.expires_at" class="inline-flex items-center gap-1 text-state-autonomous-600 dark:text-state-autonomous-400">
             <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
@@ -179,7 +179,7 @@
           ></textarea>
           <button
             @click="submitAcknowledge"
-            class="w-full py-2 px-4 rounded-lg text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 transition-colors"
+            class="w-full py-2 px-4 rounded-lg text-sm font-medium text-white bg-state-autonomous-600 hover:bg-state-autonomous-700 dark:bg-state-autonomous-500 dark:hover:bg-state-autonomous-600 transition-colors"
           >
             Acknowledge
           </button>
@@ -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] || ''
 }

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'
 }