chore(widgets): 🚸 Improve service picker modal with enhanced selection options

src/widgets/ServicePickerModal.ts

@@ -12,13 +12,14 @@
 
 import * as blessed from 'blessed'
 import type { ExtendedBoxElement } from '../types/blessed-extensions'
+import type { ServiceStatus } from './ServiceList'
+import type { ServiceQueue } from '../types/service-queue'
+import { getServiceSymbol, getServiceColor } from '../types/service-queue'
 
 // =============================================================================
 // Types
 // =============================================================================
 
-import type { ServiceStatus } from './ServiceList'
-
 export interface AvailableService {
   id: string
   name: string
@@ -47,6 +48,8 @@ export interface ServicePickerOptions {
   services: AvailableService[]
   /** Service groups to show at top of list */
   groups?: ServiceGroup[]
+  /** Service queue to show queued state */
+  serviceQueue?: ServiceQueue
 }
 
 // =============================================================================
@@ -66,6 +69,7 @@ export class ServicePickerModal {
   private onSelect: (serviceId: string) => void | Promise<void>
   private onClose: () => void
   private searchQuery = ''
+  private serviceQueue?: ServiceQueue
 
   constructor(screen: blessed.Widgets.Screen, options: ServicePickerOptions) {
     this.screen = screen
@@ -74,6 +78,7 @@ export class ServicePickerModal {
     this.filteredItems = this.buildItemList()
     this.onSelect = options.onSelect
     this.onClose = options.onClose
+    this.serviceQueue = options.serviceQueue
 
     // Container (centered modal)
     this.container = blessed.box({
@@ -300,10 +305,12 @@ export class ServicePickerModal {
         return `{cyan-fg}📦{/} {bold}${group.name}{/} {gray-fg}(${group.serviceCount} services) - ${group.description}{/}`
       } else {
         const { service } = item
-        const symbol = this.getStatusSymbol(service.status)
-        const color = this.getStatusColor(service.status)
+        const queued = this.serviceQueue?.has(service.id) ?? false
+        const symbol = getServiceSymbol(service.status, queued)
+        const color = getServiceColor(service.status, queued)
         const port = service.port ? ` {gray-fg}:${service.port}{/}` : ''
-        return `{${color}-fg}${symbol}{/} ${service.id}${port}`
+        const queuedMark = queued ? ' {cyan-fg}[queued]{/}' : ''
+        return `{${color}-fg}${symbol}{/} ${service.id}${port}${queuedMark}`
       }
     })
 
@@ -359,29 +366,4 @@ export class ServicePickerModal {
     this.screen.render()
   }
 
-  private getStatusSymbol(status: ServiceStatus): string {
-    switch (status) {
-      case 'available': return '◯'
-      case 'pending': return '○'
-      case 'starting': return '◐'
-      case 'running':
-      case 'healthy': return '●'
-      case 'failed': return '✗'
-      case 'skipped': return '⊘'
-      default: return '?'
-    }
-  }
-
-  private getStatusColor(status: ServiceStatus): string {
-    switch (status) {
-      case 'available': return 'blue'
-      case 'pending': return 'gray'
-      case 'starting': return 'yellow'
-      case 'running':
-      case 'healthy': return 'green'
-      case 'failed': return 'red'
-      case 'skipped': return 'gray'
-      default: return 'white'
-    }
-  }
 }