feat(web): SessionStatusBadge component (4 statuses)

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>