refactor: fix running state theme and add pulse dot to status badges (TODO 1.2)

admin/frontend/src/index.css

@@ -7,6 +7,18 @@ html {
   z-index: 50;
 }
 
+/* Reusable pulsing dot — indicates live / in-progress state */
+.pulse-dot {
+  @apply relative inline-flex h-2 w-2;
+}
+.pulse-dot::before {
+  content: '';
+  @apply absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75;
+}
+.pulse-dot::after {
+  content: '';
+  @apply relative inline-flex h-2 w-2 rounded-full bg-blue-500;
+}
 /* @tailwindcss/forms sets appearance:none on all inputs, which strips the system font Safari
    uses to render password masking bullets — they appear as boxes without this override.
    We are doing to for safari compatibility!

admin/frontend/src/pages/Processes.vue

@@ -15,7 +15,7 @@ let countdown = 15
 let timer
 
 const router = useRouter()
-const STATUS_COLOR = { running: 'green', stopped: 'red', error: 'red', unknown: 'gray' }
+const STATUS_COLOR = { running: 'blue', stopped: 'red', error: 'red', unknown: 'gray' }
 
 const anyRunning = computed(() => processes.value.some(p => p.status === 'running'))
 
@@ -116,14 +116,17 @@ onUnmounted(() => clearInterval(timer))
         :columns="columns"
         :rows="rows"
         row-key="name"
-        :options="{ selectable: false, showTooltip: false }"
-      >
+        :options="{ selectable: false, showTooltip: false }">
         <template #cell="{ column, item }">
           <Badge
             v-if="column.key === 'status'"
             :label="item"
             :theme="STATUS_COLOR[item] || 'gray'"
-          />
+          >
+            <template v-if="item === 'running'" #prefix>
+              <span class="pulse-dot" />
+            </template>
+          </Badge>
           <span v-else-if="column.key === 'cpu_percent'">
             {{ item != null ? item.toFixed(1) + '%' : '—' }}
           </span>

admin/frontend/src/pages/TaskDetail.vue

@@ -27,7 +27,7 @@ const expandedSteps = ref(new Set())
 let es = null
 const terminal = ref(null)
 
-const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray' }
+const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray', stopped: 'red' }
 
 function fmtDate(iso) {
   if (!iso) return '—'
@@ -191,8 +191,12 @@ onUnmounted(() => { if (es) { es.close(); es = null } })
       <div class="flex flex-wrap items-center gap-3">
         <Badge
           :label="streaming ? 'running…' : task.status"
-          :theme="TASK_COLOR[task.status] || 'gray'"
-        />
+          :theme="streaming ? 'blue' : (TASK_COLOR[task.status] || 'gray')"
+        >
+          <template v-if="streaming" #prefix>
+            <span class="pulse-dot" />
+          </template>
+        </Badge>
         <span class="font-mono text-sm font-medium">{{ task.command }}</span>
         <span
           v-if="Object.keys(task.args).length"

admin/frontend/src/pages/TaskList.vue

@@ -7,19 +7,22 @@ const loading = ref(true)
 const error = ref('')
 const statusFilter = ref('all')
 
-const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray' }
-
 const filterButtons = ['all', 'running', 'success', 'failed', 'killed'].map(s => ({
   label: s.charAt(0).toUpperCase() + s.slice(1),
   value: s,
 }))
 
+const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray', stopped: 'red' }
+
 const columns = [
   { label: 'Command', key: 'command', width: '140px' },
   { label: 'Context', key: '_args' },
   {
     label: 'Status', key: 'status', width: '90px',
-    prefix: ({ row }) => h(Badge, { label: row.status, theme: TASK_COLOR[row.status] || 'gray' }),
+    prefix: ({ row }) => h(Badge, {
+      label: row.status,
+      theme: TASK_COLOR[row.status] || 'gray',
+    }, row.status === 'running' ? { prefix: () => h('span', { class: 'pulse-dot' }) } : {}),
     getLabel: () => '',
   },
   { label: 'Started', key: '_started', width: '150px' },