refactor(cli): migrate message queue to use queue-store

Migrate use-message-queue hook to use the new queue-store instead of
local useState. This is the first step in reducing prop drilling.

Changes:
- Update use-message-queue to read from and write to queue-store
- Fix queue-store setCanProcessQueue to accept SetStateAction type
- Maintain backward compatibility with existing API

All tests pass (231/231) and typecheck is clean.

Author: brandonkachen

cli/src/hooks/use-message-queue.ts

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
+import { useQueueStore } from '../state/queue-store'
 
 export type StreamStatus = 'idle' | 'waiting' | 'streaming'
 
@@ -7,17 +8,28 @@ export const useMessageQueue = (
   isChainInProgressRef: React.MutableRefObject<boolean>,
   activeAgentStreamsRef: React.MutableRefObject<number>,
 ) => {
-  const [queuedMessages, setQueuedMessages] = useState<string[]>([])
-  const [streamStatus, setStreamStatus] = useState<StreamStatus>('idle')
-  const [canProcessQueue, setCanProcessQueue] = useState<boolean>(true)
-  const [queuePaused, setQueuePaused] = useState<boolean>(false)
+  const {
+    queuedMessages,
+    streamStatus,
+    canProcessQueue,
+    queuePaused,
+    addToQueue: addToQueueStore,
+    clearQueue: clearQueueStore,
+    pauseQueue: pauseQueueStore,
+    resumeQueue: resumeQueueStore,
+    setStreamStatus,
+    setCanProcessQueue,
+    startStreaming: startStreamingStore,
+    stopStreaming: stopStreamingStore,
+  } = useQueueStore()
 
   const queuedMessagesRef = useRef<string[]>([])
   const streamTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const streamIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const streamMessageIdRef = useRef<string | null>(null)
   const isQueuePausedRef = useRef<boolean>(false)
 
+  // Sync refs with store state
   useEffect(() => {
     queuedMessagesRef.current = queuedMessages
   }, [queuedMessages])
@@ -60,7 +72,7 @@ export const useMessageQueue = (
       const nextMessage = queuedList[0]
       const remainingMessages = queuedList.slice(1)
       queuedMessagesRef.current = remainingMessages
-      setQueuedMessages(remainingMessages)
+      useQueueStore.setState({ queuedMessages: remainingMessages })
       sendMessage(nextMessage)
     }, 100)
 
@@ -74,38 +86,36 @@ export const useMessageQueue = (
     activeAgentStreamsRef,
   ])
 
-  const addToQueue = useCallback((message: string) => {
-    const newQueue = [...queuedMessagesRef.current, message]
-    queuedMessagesRef.current = newQueue
-    setQueuedMessages(newQueue)
-  }, [])
+  const addToQueue = useCallback(
+    (message: string) => {
+      const newQueue = [...queuedMessagesRef.current, message]
+      queuedMessagesRef.current = newQueue
+      addToQueueStore(message)
+    },
+    [addToQueueStore],
+  )
 
   const pauseQueue = useCallback(() => {
-    setQueuePaused(true)
-    setCanProcessQueue(false)
-  }, [])
+    pauseQueueStore()
+  }, [pauseQueueStore])
 
   const resumeQueue = useCallback(() => {
-    setQueuePaused(false)
-    setCanProcessQueue(true)
-  }, [])
+    resumeQueueStore()
+  }, [resumeQueueStore])
 
   const clearQueue = useCallback(() => {
     const current = queuedMessagesRef.current
     queuedMessagesRef.current = []
-    setQueuedMessages([])
-    return current
-  }, [])
+    return clearQueueStore()
+  }, [clearQueueStore])
 
   const startStreaming = useCallback(() => {
-    setStreamStatus('streaming')
-    setCanProcessQueue(false)
-  }, [])
+    startStreamingStore()
+  }, [startStreamingStore])
 
   const stopStreaming = useCallback(() => {
-    setStreamStatus('idle')
-    setCanProcessQueue(!queuePaused)
-  }, [queuePaused])
+    stopStreamingStore()
+  }, [stopStreamingStore])
 
   return {
     queuedMessages,

cli/src/state/queue-store.ts

@@ -16,7 +16,7 @@ export type QueueStoreActions = {
   pauseQueue: () => void
   resumeQueue: () => void
   setStreamStatus: (status: StreamStatus) => void
-  setCanProcessQueue: (can: boolean) => void
+  setCanProcessQueue: (value: boolean | ((prev: boolean) => boolean)) => void
   startStreaming: () => void
   stopStreaming: () => void
 }
@@ -64,9 +64,10 @@ export const useQueueStore = create<QueueStore>()(
         state.streamStatus = status
       }),
 
-    setCanProcessQueue: (can) =>
+    setCanProcessQueue: (value) =>
       set((state) => {
-        state.canProcessQueue = can
+        state.canProcessQueue =
+          typeof value === 'function' ? value(state.canProcessQueue) : value
       }),
 
     startStreaming: () =>