Align provisioning UI with lifecycle states

src/lib/ui/components/ProvisioningStatusBadge.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Badge from './primitives/Badge.svelte';
+    import StatusPip from './primitives/StatusPip.svelte';
+    import { provisioningStatus } from '$ui/provisioning-queue.js';
+
+    let { state, size = 'sm' }: { state: string; size?: 'sm' | 'md' } = $props();
+    const status = $derived(provisioningStatus(state));
+</script>
+
+<Badge variant={status.tone} {size}><StatusPip tone={status.tone} size="sm" />{status.label}</Badge>

src/lib/ui/components/autoscaling/PolicyCard.svelte

@@ -13,7 +13,7 @@
     import Badge from '../primitives/Badge.svelte';
     import Button from '../primitives/Button.svelte';
     import Stat from '../primitives/Stat.svelte';
-    import StatusBadge from '../primitives/StatusBadge.svelte';
+    import ProvisioningStatusBadge from '../ProvisioningStatusBadge.svelte';
     import Tabs from '../primitives/Tabs.svelte';
     import ObservationTime from './ObservationTime.svelte';
 
@@ -207,7 +207,7 @@
                         {member ? lobbyLabel(member.name) : 'lobby'}{needsAttention
                             ? ' job'
                             : ''}</strong
-                    ><StatusBadge state={operation.state} />
+                    ><ProvisioningStatusBadge state={operation.state} />
                 </div>
                 <p>{operation.stage || 'Waiting for the next provisioning update.'}</p>
             </div>
@@ -339,7 +339,7 @@
                                         : 'Scaling evaluated'}{item.server
                                     ? ` · ${lobbyLabel(item.server)}`
                                     : ''}</strong
-                            >{#if item.operationState}<StatusBadge
+                            >{#if item.operationState}<ProvisioningStatusBadge
                                     state={item.operationState}
                                 />{/if}
                         </div>