feat(cli): add foundational stores for future refactoring

Create three new Zustand stores to prepare for reducing prop drilling:
- queue-store.ts: Message queue and streaming status management
- stream-store.ts: Streaming agents and chain progress state
- ui-store.ts: UI-related state (focused agent, input focus)

These stores are not yet integrated but provide the foundation for
future incremental migration to reduce prop drilling in Chat component.

Author: brandonkachen

cli/src/state/queue-store.ts

@@ -0,0 +1,85 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+export type StreamStatus = 'idle' | 'waiting' | 'streaming'
+
+export type QueueStoreState = {
+  queuedMessages: string[]
+  streamStatus: StreamStatus
+  canProcessQueue: boolean
+  queuePaused: boolean
+}
+
+export type QueueStoreActions = {
+  addToQueue: (message: string) => void
+  clearQueue: () => string[]
+  pauseQueue: () => void
+  resumeQueue: () => void
+  setStreamStatus: (status: StreamStatus) => void
+  setCanProcessQueue: (can: boolean) => void
+  startStreaming: () => void
+  stopStreaming: () => void
+}
+
+export type QueueStore = QueueStoreState & QueueStoreActions
+
+const initialState: QueueStoreState = {
+  queuedMessages: [],
+  streamStatus: 'idle',
+  canProcessQueue: true,
+  queuePaused: false,
+}
+
+export const useQueueStore = create<QueueStore>()(
+  immer((set, get) => ({
+    ...initialState,
+
+    addToQueue: (message) =>
+      set((state) => {
+        state.queuedMessages.push(message)
+      }),
+
+    clearQueue: () => {
+      const current = get().queuedMessages
+      set((state) => {
+        state.queuedMessages = []
+      })
+      return current
+    },
+
+    pauseQueue: () =>
+      set((state) => {
+        state.queuePaused = true
+        state.canProcessQueue = false
+      }),
+
+    resumeQueue: () =>
+      set((state) => {
+        state.queuePaused = false
+        state.canProcessQueue = true
+      }),
+
+    setStreamStatus: (status) =>
+      set((state) => {
+        state.streamStatus = status
+      }),
+
+    setCanProcessQueue: (can) =>
+      set((state) => {
+        state.canProcessQueue = can
+      }),
+
+    startStreaming: () =>
+      set((state) => {
+        state.streamStatus = 'streaming'
+        state.canProcessQueue = false
+      }),
+
+    stopStreaming: () =>
+      set((state) => {
+        const wasPaused = state.queuePaused
+        state.streamStatus = 'idle'
+        state.canProcessQueue = !wasPaused
+      }),
+  })),
+)

cli/src/state/stream-store.ts

@@ -0,0 +1,70 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+export type StreamStoreState = {
+  streamingAgents: Set<string>
+  activeSubagents: Set<string>
+  isChainInProgress: boolean
+  abortController: AbortController | null
+}
+
+export type StreamStoreActions = {
+  setStreamingAgents: (
+    value: Set<string> | ((prev: Set<string>) => Set<string>),
+  ) => void
+  setActiveSubagents: (
+    value: Set<string> | ((prev: Set<string>) => Set<string>),
+  ) => void
+  setIsChainInProgress: (value: boolean) => void
+  setAbortController: (controller: AbortController | null) => void
+  abortStream: () => void
+}
+
+export type StreamStore = StreamStoreState & StreamStoreActions
+
+const initialState: StreamStoreState = {
+  streamingAgents: new Set<string>(),
+  activeSubagents: new Set<string>(),
+  isChainInProgress: false,
+  abortController: null,
+}
+
+export const useStreamStore = create<StreamStore>()(
+  immer((set, get) => ({
+    ...initialState,
+
+    setStreamingAgents: (value) =>
+      set((state) => {
+        state.streamingAgents =
+          typeof value === 'function'
+            ? value(state.streamingAgents)
+            : value
+      }),
+
+    setActiveSubagents: (value) =>
+      set((state) => {
+        state.activeSubagents =
+          typeof value === 'function'
+            ? value(state.activeSubagents)
+            : value
+      }),
+
+    setIsChainInProgress: (value) =>
+      set((state) => {
+        state.isChainInProgress = value
+      }),
+
+    setAbortController: (controller) =>
+      set((state) => {
+        state.abortController = controller
+      }),
+
+    abortStream: () => {
+      const controller = get().abortController
+      controller?.abort()
+      set((state) => {
+        state.abortController = null
+      })
+    },
+  })),
+)

cli/src/state/ui-store.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+export type UiStoreState = {
+  focusedAgentId: string | null
+  inputFocused: boolean
+}
+
+export type UiStoreActions = {
+  setFocusedAgentId: (
+    value: string | null | ((prev: string | null) => string | null),
+  ) => void
+  setInputFocused: (focused: boolean) => void
+}
+
+export type UiStore = UiStoreState & UiStoreActions
+
+const initialState: UiStoreState = {
+  focusedAgentId: null,
+  inputFocused: true,
+}
+
+export const useUiStore = create<UiStore>()(
+  immer((set) => ({
+    ...initialState,
+
+    setFocusedAgentId: (value) =>
+      set((state) => {
+        state.focusedAgentId =
+          typeof value === 'function' ? value(state.focusedAgentId) : value
+      }),
+
+    setInputFocused: (focused) =>
+      set((state) => {
+        state.inputFocused = focused
+      }),
+  })),
+)