From da89c161bb43f1ef7b07ca56652957f84d6405d2 Mon Sep 17 00:00:00 2001
From: HemilSangani <hemil@sanskartechnolab.com>
Date: Thu, 28 May 2026 11:31:01 +0530
Subject: [PATCH 1/2] refactor: render StatusBadge via frappe-ui Badge

---
 admin/frontend/components.d.ts                |  1 +
 admin/frontend/src/components/StatusBadge.vue | 28 +++++++++++++++++++
 admin/frontend/src/index.css                  | 13 +++++++++
 admin/frontend/src/pages/Apps.vue             |  3 +-
 admin/frontend/src/pages/Processes.vue        | 14 +++++++---
 admin/frontend/src/pages/SiteDetail.vue       |  7 +++--
 admin/frontend/src/pages/Sites.vue            |  3 +-
 admin/frontend/src/pages/TaskDetail.vue       | 15 +++++++---
 admin/frontend/src/pages/TaskList.vue         | 18 +++++++++---
 9 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 admin/frontend/src/components/StatusBadge.vue

diff --git a/admin/frontend/components.d.ts b/admin/frontend/components.d.ts
index 0202d59..873cd53 100644
--- a/admin/frontend/components.d.ts
+++ b/admin/frontend/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     FilePickerField: typeof import('./src/components/FilePickerField.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StatusBadge: typeof import('./src/components/StatusBadge.vue')['default']
     TerminalOutput: typeof import('./src/components/TerminalOutput.vue')['default']
   }
 }
diff --git a/admin/frontend/src/components/StatusBadge.vue b/admin/frontend/src/components/StatusBadge.vue
new file mode 100644
index 0000000..1110d58
--- /dev/null
+++ b/admin/frontend/src/components/StatusBadge.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue'
+import { Badge } from 'frappe-ui'
+
+const props = defineProps({
+  variant: { type: String, default: 'badge-neutral' },
+  label: { type: String, default: '' },
+})
+
+// semantic variants → frappe-ui Badge theme
+const VARIANT_THEME = {
+  'badge-success': 'green',
+  'badge-warning': 'orange',
+  'badge-error':   'red',
+  'badge-neutral': 'gray',
+  'badge-running': 'blue',
+}
+
+const theme = computed(() => VARIANT_THEME[props.variant] ?? 'gray')
+</script>
+
+<template>
+  <Badge :theme="theme" variant="subtle" size="sm" :label="label">
+    <template v-if="variant === 'badge-running'" #prefix>
+      <span class="pulse-dot"></span>
+    </template>
+  </Badge>
+</template>
diff --git a/admin/frontend/src/index.css b/admin/frontend/src/index.css
index b965490..d3aff2c 100644
--- a/admin/frontend/src/index.css
+++ b/admin/frontend/src/index.css
@@ -6,3 +6,16 @@ html {
 .dialog-overlay {
   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;
+}
diff --git a/admin/frontend/src/pages/Apps.vue b/admin/frontend/src/pages/Apps.vue
index ac88486..6862392 100644
--- a/admin/frontend/src/pages/Apps.vue
+++ b/admin/frontend/src/pages/Apps.vue
@@ -5,6 +5,7 @@ import {
   Button, Badge, Dialog, ListView, FormControl,
   LoadingText, ErrorMessage, TextInput, Select,
 } from 'frappe-ui'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const router = useRouter()
 const apps = ref([])
@@ -81,7 +82,7 @@ const columns = computed(() => [
   },
   {
     label: 'Status', key: '_status', width: '90px',
-    prefix: ({ row }) => h(Badge, { label: row._status, theme: row._status === 'dirty' ? 'orange' : 'gray' }),
+    prefix: ({ row }) => h(StatusBadge, { label: row._status, variant: row._status === 'dirty' ? 'badge-warning' : 'badge-neutral' }),
     getLabel: () => '',
   },
   { label: 'Version', key: 'installed_version', width: '90px' },
diff --git a/admin/frontend/src/pages/Processes.vue b/admin/frontend/src/pages/Processes.vue
index f5c75b8..3739f3c 100644
--- a/admin/frontend/src/pages/Processes.vue
+++ b/admin/frontend/src/pages/Processes.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Badge, ListView, Button, LoadingText, ErrorMessage } from 'frappe-ui'
+import { ListView, Button, LoadingText, ErrorMessage } from 'frappe-ui'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const processes = ref([])
 const loading = ref(true)
@@ -12,7 +13,12 @@ let countdown = 15
 let timer
 
 const router = useRouter()
-const STATUS_COLOR = { running: 'green', stopped: 'red', error: 'red', unknown: 'gray' }
+const STATUS_COLOR = {
+  running: 'badge-running',
+  stopped: 'badge-error',
+  error: 'badge-error',
+  unknown: 'badge-neutral',
+}
 
 function openLog(filename) {
   router.push(`/logs/${filename}`)
@@ -71,10 +77,10 @@ onUnmounted(() => clearInterval(timer))
         :options="{ selectable: false, showTooltip: false }"
       >
         <template #cell="{ column, item }">
-          <Badge
+          <StatusBadge
             v-if="column.key === 'status'"
             :label="item"
-            :theme="STATUS_COLOR[item] || 'gray'"
+            :variant="STATUS_COLOR[item] || 'badge-neutral'"
           />
           <button
             v-else-if="column.key === 'log_filename' && item"
diff --git a/admin/frontend/src/pages/SiteDetail.vue b/admin/frontend/src/pages/SiteDetail.vue
index f6757b6..7b4a784 100644
--- a/admin/frontend/src/pages/SiteDetail.vue
+++ b/admin/frontend/src/pages/SiteDetail.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Button, Badge, Dialog, FormControl, LoadingText, ErrorMessage, Tabs } from 'frappe-ui'
+import { Button, Dialog, FormControl, LoadingText, ErrorMessage, Tabs } from 'frappe-ui'
 import LucideDatabase from '~icons/lucide/database'
 import LucideServer from '~icons/lucide/server'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -337,9 +338,9 @@ onMounted(() => { load(); loadRegistry() })
         <div class="flex flex-col gap-1.5">
           <div class="flex items-center gap-2">
             <h1 class="text-2xl font-semibold text-ink-gray-9">{{ siteName }}</h1>
-            <Badge
+            <StatusBadge
               :label="site.exists ? 'Online' : 'Offline'"
-              :theme="site.exists ? 'green' : 'gray'"
+              :variant="site.exists ? 'badge-success' : 'badge-neutral'"
             />
             <Badge v-if="site.site_config?.ssl" label="SSL" theme="blue" />
           </div>
diff --git a/admin/frontend/src/pages/Sites.vue b/admin/frontend/src/pages/Sites.vue
index 8c6e7d5..2f0d26c 100644
--- a/admin/frontend/src/pages/Sites.vue
+++ b/admin/frontend/src/pages/Sites.vue
@@ -3,6 +3,7 @@ import { h, ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button, Badge, Dialog, ListView, FormControl, LoadingText, ErrorMessage, Switch, TabButtons } from 'frappe-ui'
 import FilePickerField from '../components/FilePickerField.vue'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const router = useRouter()
 const sites = ref([])
@@ -49,7 +50,7 @@ const columns = computed(() => [
   { label: 'Name', key: 'name', width: '200px' },
   {
     label: 'Status', key: '_status', width: '80px',
-    prefix: ({ row }) => h(Badge, { label: row._status, theme: row._status === 'online' ? 'green' : 'gray' }),
+    prefix: ({ row }) => h(StatusBadge, { label: row._status, variant: row._status === 'online' ? 'badge-success' : 'badge-neutral' }),
     getLabel: () => '',
   },
   {
diff --git a/admin/frontend/src/pages/TaskDetail.vue b/admin/frontend/src/pages/TaskDetail.vue
index 635cbc0..51a3041 100644
--- a/admin/frontend/src/pages/TaskDetail.vue
+++ b/admin/frontend/src/pages/TaskDetail.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Button, Badge, Dialog, LoadingText, ErrorMessage } from 'frappe-ui'
+import { Button, Dialog, LoadingText, ErrorMessage } from 'frappe-ui'
 import TerminalOutput from '../components/TerminalOutput.vue'
 import { processLine } from '../utils/ansi.js'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -20,7 +21,13 @@ const actionError = ref('')
 let es = null
 const terminal = ref(null)
 
-const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray' }
+const TASK_STATUS_BADGE = {
+  running: 'badge-running',
+  success: 'badge-success',
+  failed:  'badge-error',
+  stopped: 'badge-error',
+  killed:  'badge-neutral',
+}
 
 function fmtDate(iso) {
   if (!iso) return '—'
@@ -114,9 +121,9 @@ onUnmounted(() => { if (es) { es.close(); es = null } })
 
       <!-- Header -->
       <div class="flex flex-wrap items-center gap-3">
-        <Badge
+        <StatusBadge
           :label="streaming ? 'running…' : task.status"
-          :theme="TASK_COLOR[task.status] || 'gray'"
+          :variant="streaming ? 'badge-running' : (TASK_STATUS_BADGE[task.status] || 'badge-neutral')"
         />
         <span class="font-mono text-sm font-medium">{{ task.command }}</span>
         <span
diff --git a/admin/frontend/src/pages/TaskList.vue b/admin/frontend/src/pages/TaskList.vue
index bd0dd0b..ad062e7 100644
--- a/admin/frontend/src/pages/TaskList.vue
+++ b/admin/frontend/src/pages/TaskList.vue
@@ -1,25 +1,35 @@
 <script setup>
 import { h, ref, computed, onMounted } from 'vue'
-import { Badge, ListView, TabButtons, LoadingText, ErrorMessage } from 'frappe-ui'
+import { ListView, TabButtons, LoadingText, ErrorMessage } from 'frappe-ui'
+import StatusBadge from '../components/StatusBadge.vue'
 
 const tasks = ref([])
 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_STATUS_BADGE = {
+  running: 'badge-running',
+  success: 'badge-success',
+  failed:  'badge-error',
+  stopped: 'badge-error',
+  killed:  'badge-neutral',
+}
+
 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(StatusBadge, {
+      label: row.status,
+      variant: TASK_STATUS_BADGE[row.status] || 'badge-neutral',
+    }),
     getLabel: () => '',
   },
   { label: 'Started', key: '_started', width: '150px' },

From e0849772eb850dc2255736541cfe6b6bb291a090 Mon Sep 17 00:00:00 2001
From: Hemil-Sangani <hemil@sanskartechnolab.com>
Date: Tue, 2 Jun 2026 10:36:49 +0530
Subject: [PATCH 2/2] refactor: remove StatusBadge component and replace with
 frappe-ui Badge

---
 admin/frontend/components.d.ts                |  1 -
 admin/frontend/src/components/StatusBadge.vue | 28 -------------------
 admin/frontend/src/pages/Apps.vue             |  3 +-
 admin/frontend/src/pages/Processes.vue        | 20 ++++++-------
 admin/frontend/src/pages/SiteDetail.vue       |  7 ++---
 admin/frontend/src/pages/Sites.vue            |  3 +-
 admin/frontend/src/pages/TaskDetail.vue       | 21 ++++++--------
 admin/frontend/src/pages/TaskList.vue         | 17 ++++-------
 8 files changed, 28 insertions(+), 72 deletions(-)
 delete mode 100644 admin/frontend/src/components/StatusBadge.vue

diff --git a/admin/frontend/components.d.ts b/admin/frontend/components.d.ts
index 873cd53..0202d59 100644
--- a/admin/frontend/components.d.ts
+++ b/admin/frontend/components.d.ts
@@ -13,7 +13,6 @@ declare module 'vue' {
     FilePickerField: typeof import('./src/components/FilePickerField.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    StatusBadge: typeof import('./src/components/StatusBadge.vue')['default']
     TerminalOutput: typeof import('./src/components/TerminalOutput.vue')['default']
   }
 }
diff --git a/admin/frontend/src/components/StatusBadge.vue b/admin/frontend/src/components/StatusBadge.vue
deleted file mode 100644
index 1110d58..0000000
--- a/admin/frontend/src/components/StatusBadge.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { Badge } from 'frappe-ui'
-
-const props = defineProps({
-  variant: { type: String, default: 'badge-neutral' },
-  label: { type: String, default: '' },
-})
-
-// semantic variants → frappe-ui Badge theme
-const VARIANT_THEME = {
-  'badge-success': 'green',
-  'badge-warning': 'orange',
-  'badge-error':   'red',
-  'badge-neutral': 'gray',
-  'badge-running': 'blue',
-}
-
-const theme = computed(() => VARIANT_THEME[props.variant] ?? 'gray')
-</script>
-
-<template>
-  <Badge :theme="theme" variant="subtle" size="sm" :label="label">
-    <template v-if="variant === 'badge-running'" #prefix>
-      <span class="pulse-dot"></span>
-    </template>
-  </Badge>
-</template>
diff --git a/admin/frontend/src/pages/Apps.vue b/admin/frontend/src/pages/Apps.vue
index 6862392..ac88486 100644
--- a/admin/frontend/src/pages/Apps.vue
+++ b/admin/frontend/src/pages/Apps.vue
@@ -5,7 +5,6 @@ import {
   Button, Badge, Dialog, ListView, FormControl,
   LoadingText, ErrorMessage, TextInput, Select,
 } from 'frappe-ui'
-import StatusBadge from '../components/StatusBadge.vue'
 
 const router = useRouter()
 const apps = ref([])
@@ -82,7 +81,7 @@ const columns = computed(() => [
   },
   {
     label: 'Status', key: '_status', width: '90px',
-    prefix: ({ row }) => h(StatusBadge, { label: row._status, variant: row._status === 'dirty' ? 'badge-warning' : 'badge-neutral' }),
+    prefix: ({ row }) => h(Badge, { label: row._status, theme: row._status === 'dirty' ? 'orange' : 'gray' }),
     getLabel: () => '',
   },
   { label: 'Version', key: 'installed_version', width: '90px' },
diff --git a/admin/frontend/src/pages/Processes.vue b/admin/frontend/src/pages/Processes.vue
index 3739f3c..b636758 100644
--- a/admin/frontend/src/pages/Processes.vue
+++ b/admin/frontend/src/pages/Processes.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ListView, Button, LoadingText, ErrorMessage } from 'frappe-ui'
-import StatusBadge from '../components/StatusBadge.vue'
+import { Badge, ListView, Button, LoadingText, ErrorMessage } from 'frappe-ui'
 
 const processes = ref([])
 const loading = ref(true)
@@ -13,12 +12,7 @@ let countdown = 15
 let timer
 
 const router = useRouter()
-const STATUS_COLOR = {
-  running: 'badge-running',
-  stopped: 'badge-error',
-  error: 'badge-error',
-  unknown: 'badge-neutral',
-}
+const STATUS_COLOR = { running: 'blue', stopped: 'red', error: 'red', unknown: 'gray' }
 
 function openLog(filename) {
   router.push(`/logs/${filename}`)
@@ -77,11 +71,15 @@ onUnmounted(() => clearInterval(timer))
         :options="{ selectable: false, showTooltip: false }"
       >
         <template #cell="{ column, item }">
-          <StatusBadge
+          <Badge
             v-if="column.key === 'status'"
             :label="item"
-            :variant="STATUS_COLOR[item] || 'badge-neutral'"
-          />
+            :theme="STATUS_COLOR[item] || 'gray'"
+          >
+            <template v-if="item === 'running'" #prefix>
+              <span class="pulse-dot" />
+            </template>
+          </Badge>
           <button
             v-else-if="column.key === 'log_filename' && item"
             class="text-ink-blue-2 hover:underline"
diff --git a/admin/frontend/src/pages/SiteDetail.vue b/admin/frontend/src/pages/SiteDetail.vue
index 7b4a784..f6757b6 100644
--- a/admin/frontend/src/pages/SiteDetail.vue
+++ b/admin/frontend/src/pages/SiteDetail.vue
@@ -1,10 +1,9 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Button, Dialog, FormControl, LoadingText, ErrorMessage, Tabs } from 'frappe-ui'
+import { Button, Badge, Dialog, FormControl, LoadingText, ErrorMessage, Tabs } from 'frappe-ui'
 import LucideDatabase from '~icons/lucide/database'
 import LucideServer from '~icons/lucide/server'
-import StatusBadge from '../components/StatusBadge.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -338,9 +337,9 @@ onMounted(() => { load(); loadRegistry() })
         <div class="flex flex-col gap-1.5">
           <div class="flex items-center gap-2">
             <h1 class="text-2xl font-semibold text-ink-gray-9">{{ siteName }}</h1>
-            <StatusBadge
+            <Badge
               :label="site.exists ? 'Online' : 'Offline'"
-              :variant="site.exists ? 'badge-success' : 'badge-neutral'"
+              :theme="site.exists ? 'green' : 'gray'"
             />
             <Badge v-if="site.site_config?.ssl" label="SSL" theme="blue" />
           </div>
diff --git a/admin/frontend/src/pages/Sites.vue b/admin/frontend/src/pages/Sites.vue
index 2f0d26c..8c6e7d5 100644
--- a/admin/frontend/src/pages/Sites.vue
+++ b/admin/frontend/src/pages/Sites.vue
@@ -3,7 +3,6 @@ import { h, ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button, Badge, Dialog, ListView, FormControl, LoadingText, ErrorMessage, Switch, TabButtons } from 'frappe-ui'
 import FilePickerField from '../components/FilePickerField.vue'
-import StatusBadge from '../components/StatusBadge.vue'
 
 const router = useRouter()
 const sites = ref([])
@@ -50,7 +49,7 @@ const columns = computed(() => [
   { label: 'Name', key: 'name', width: '200px' },
   {
     label: 'Status', key: '_status', width: '80px',
-    prefix: ({ row }) => h(StatusBadge, { label: row._status, variant: row._status === 'online' ? 'badge-success' : 'badge-neutral' }),
+    prefix: ({ row }) => h(Badge, { label: row._status, theme: row._status === 'online' ? 'green' : 'gray' }),
     getLabel: () => '',
   },
   {
diff --git a/admin/frontend/src/pages/TaskDetail.vue b/admin/frontend/src/pages/TaskDetail.vue
index 51a3041..e49c552 100644
--- a/admin/frontend/src/pages/TaskDetail.vue
+++ b/admin/frontend/src/pages/TaskDetail.vue
@@ -1,10 +1,9 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Button, Dialog, LoadingText, ErrorMessage } from 'frappe-ui'
+import { Button, Badge, Dialog, LoadingText, ErrorMessage } from 'frappe-ui'
 import TerminalOutput from '../components/TerminalOutput.vue'
 import { processLine } from '../utils/ansi.js'
-import StatusBadge from '../components/StatusBadge.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -21,13 +20,7 @@ const actionError = ref('')
 let es = null
 const terminal = ref(null)
 
-const TASK_STATUS_BADGE = {
-  running: 'badge-running',
-  success: 'badge-success',
-  failed:  'badge-error',
-  stopped: 'badge-error',
-  killed:  'badge-neutral',
-}
+const TASK_COLOR = { success: 'green', failed: 'red', running: 'blue', killed: 'gray', stopped: 'red' }
 
 function fmtDate(iso) {
   if (!iso) return '—'
@@ -121,10 +114,14 @@ onUnmounted(() => { if (es) { es.close(); es = null } })
 
       <!-- Header -->
       <div class="flex flex-wrap items-center gap-3">
-        <StatusBadge
+        <Badge
           :label="streaming ? 'running…' : task.status"
-          :variant="streaming ? 'badge-running' : (TASK_STATUS_BADGE[task.status] || 'badge-neutral')"
-        />
+          :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"
diff --git a/admin/frontend/src/pages/TaskList.vue b/admin/frontend/src/pages/TaskList.vue
index ad062e7..f268189 100644
--- a/admin/frontend/src/pages/TaskList.vue
+++ b/admin/frontend/src/pages/TaskList.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref, computed, onMounted } from 'vue'
-import { ListView, TabButtons, LoadingText, ErrorMessage } from 'frappe-ui'
-import StatusBadge from '../components/StatusBadge.vue'
+import { Badge, ListView, TabButtons, LoadingText, ErrorMessage } from 'frappe-ui'
 
 const tasks = ref([])
 const loading = ref(true)
@@ -13,23 +12,17 @@ const filterButtons = ['all', 'running', 'success', 'failed', 'killed'].map(s =>
   value: s,
 }))
 
-const TASK_STATUS_BADGE = {
-  running: 'badge-running',
-  success: 'badge-success',
-  failed:  'badge-error',
-  stopped: 'badge-error',
-  killed:  'badge-neutral',
-}
+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(StatusBadge, {
+    prefix: ({ row }) => h(Badge, {
       label: row.status,
-      variant: TASK_STATUS_BADGE[row.status] || 'badge-neutral',
-    }),
+      theme: TASK_COLOR[row.status] || 'gray',
+    }, row.status === 'running' ? { prefix: () => h('span', { class: 'pulse-dot' }) } : {}),
     getLabel: () => '',
   },
   { label: 'Started', key: '_started', width: '150px' },