feat: add status badge component

src/lib/components/common/status-badge/badge.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	import type { DeploymentStatus, ExternalModelStatus } from '$lib/types/entities';
+	import { cn } from '$lib/utils';
+
+	type Status = DeploymentStatus | ExternalModelStatus;
+
+	const STATUS_BADGE: Record<Status, string> = {
+		'not-deployed': cn('bg-white/10', 'text-white/30'),
+		pending: cn('bg-blue-500/20', 'text-blue-400'),
+		running: cn('bg-green-500/20', 'text-green-400'),
+		degraded: cn('bg-yellow-500/20', 'text-yellow-400'),
+		stopped: cn('bg-white/10', 'text-white/30'),
+		available: cn('bg-green-500/20', 'text-green-400'),
+		error: cn('bg-red-500/20', 'text-red-400'),
+		'rate-limited': cn('bg-yellow-500/20', 'text-yellow-400'),
+		'out-of-budget': cn('bg-red-500/20', 'text-red-400'),
+	};
+
+	const STATUS_DOT: Record<Status, string> = {
+		'not-deployed': 'bg-white/30',
+		pending: 'bg-blue-400',
+		running: 'bg-green-400',
+		degraded: 'bg-yellow-400',
+		stopped: 'bg-white/30',
+		available: 'bg-green-400',
+		error: 'bg-red-400',
+		'rate-limited': 'bg-yellow-400',
+		'out-of-budget': 'bg-red-400',
+	};
+
+	const STATUS_LABEL: Record<Status, string> = {
+		'not-deployed': 'Not Deployed',
+		pending: 'Pending',
+		running: 'Running',
+		degraded: 'Degraded',
+		stopped: 'Stopped',
+		available: 'Available',
+		error: 'Error',
+		'rate-limited': 'Rate',
+		'out-of-budget': 'Budget',
+	};
+</script>
+
+<script lang="ts">
+	let { class: className = '', status }: { class?: string; status: Status } = $props();
+</script>
+
+<div
+	class={[
+		'flex items-center justify-center gap-2 rounded-full px-2 py-1 text-xs font-medium transition-colors',
+		STATUS_BADGE[status],
+		className,
+	]}
+>
+	{STATUS_LABEL[status]}
+	<div class="h-1 w-1 rounded-full {STATUS_DOT[status]}"></div>
+</div>

src/lib/components/common/status-badge/index.ts

@@ -0,0 +1,3 @@
+import StatusBadge from './badge.svelte';
+
+export { StatusBadge };