From e03df47b7154a00ad498bb78c67c2732d673303c Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Thu, 7 May 2026 17:37:32 +0800
Subject: [PATCH] feat(web): SessionStatusBadge component (4 statuses)

---
 web/src/components/acp/SessionStatusBadge.vue | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 web/src/components/acp/SessionStatusBadge.vue

diff --git a/web/src/components/acp/SessionStatusBadge.vue b/web/src/components/acp/SessionStatusBadge.vue
new file mode 100644
index 0000000..0d68410
--- /dev/null
+++ b/web/src/components/acp/SessionStatusBadge.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: 'starting' | 'running' | 'crashed' | 'exited'
+}>()
+
+const cls = computed(() => {
+  switch (props.status) {
+    case 'starting':
+      return 'bg-blue-100 text-blue-800 border-blue-300'
+    case 'running':
+      return 'bg-green-100 text-green-800 border-green-300'
+    case 'crashed':
+      return 'bg-red-100 text-red-800 border-red-300'
+    case 'exited':
+      return 'bg-gray-100 text-gray-700 border-gray-300'
+  }
+})
+
+const label = computed(() => {
+  switch (props.status) {
+    case 'starting':
+      return 'Starting'
+    case 'running':
+      return 'Running'
+    case 'crashed':
+      return 'Crashed'
+    case 'exited':
+      return 'Exited'
+  }
+})
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center px-2 py-0.5 text-xs font-medium border rounded"
+    :class="cls"
+  >
+    <span
+      class="w-1.5 h-1.5 rounded-full mr-1"
+      :class="{
+        'bg-blue-500 animate-pulse': status === 'starting',
+        'bg-green-500': status === 'running',
+        'bg-red-500': status === 'crashed',
+        'bg-gray-400': status === 'exited',
+      }"
+    />
+    {{ label }}
+  </span>
+</template>