refactor(cli): consolidate banner state into input mode system

Replace isUsageVisible boolean with inputMode state management.
Add "usage" mode to InputMode type and update all references.
Simplifies state by using single inputMode instead of separate visibility flags.

Author: brandonkachen

cli/src/commands/usage.ts

@@ -19,7 +19,7 @@ export async function handleUsageCommand(): Promise<{
 
   // Show the usage banner - the useUsageQuery hook will automatically fetch
   // the data when the banner becomes visible
-  useChatStore.getState().setIsUsageVisible(true)
+  useChatStore.getState().setInputMode('usage')
 
   const postUserMessage: PostUserMessageFn = (prev) => prev
   return { postUserMessage }

cli/src/state/chat-store.ts

@@ -5,10 +5,9 @@ import { immer } from 'zustand/middleware/immer'
 import { clamp } from '../utils/math'
 import { loadModePreference, saveModePreference } from '../utils/settings'
 
-import type { InputMode } from '../utils/input-modes'
-
 import type { ChatMessage } from '../types/chat'
 import type { AgentMode } from '../utils/constants'
+import type { InputMode } from '../utils/input-modes'
 import type { RunState } from '@codebuff/sdk'
 
 export type InputValue = {
@@ -35,7 +34,6 @@ export type ChatStoreState = {
   lastMessageMode: AgentMode | null
   sessionCreditsUsed: number
   runState: RunState | null
-  isUsageVisible: boolean
   isAnnouncementVisible: boolean
   inputMode: InputMode
   isRetrying: boolean
@@ -68,7 +66,6 @@ type ChatStoreActions = {
   setLastMessageMode: (mode: AgentMode | null) => void
   addSessionCredits: (credits: number) => void
   setRunState: (runState: RunState | null) => void
-  setIsUsageVisible: (visible: boolean) => void
   setIsAnnouncementVisible: (visible: boolean) => void
   setInputMode: (mode: InputMode) => void
   setIsRetrying: (retrying: boolean) => void
@@ -95,7 +92,6 @@ const initialState: ChatStoreState = {
   lastMessageMode: null,
   sessionCreditsUsed: 0,
   runState: null,
-  isUsageVisible: false,
   isAnnouncementVisible: true,
   inputMode: 'default' as InputMode,
   isRetrying: false,
@@ -209,11 +205,6 @@ export const useChatStore = create<ChatStore>()(
         state.runState = runState ? castDraft(runState) : null
       }),
 
-    setIsUsageVisible: (visible) =>
-      set((state) => {
-        state.isUsageVisible = visible
-      }),
-
     setIsAnnouncementVisible: (visible) =>
       set((state) => {
         state.isAnnouncementVisible = visible
@@ -250,7 +241,6 @@ export const useChatStore = create<ChatStore>()(
         state.runState = initialState.runState
           ? castDraft(initialState.runState)
           : null
-        state.isUsageVisible = initialState.isUsageVisible
         state.isAnnouncementVisible = initialState.isAnnouncementVisible
         state.inputMode = initialState.inputMode
         state.isRetrying = initialState.isRetrying

cli/src/utils/fetch-usage.ts

@@ -19,7 +19,7 @@ export interface FetchAndUpdateUsageParams {
   getAuthToken?: () => string | undefined
   getChatStore?: () => {
     sessionCreditsUsed: number
-    setIsUsageVisible: (visible: boolean) => void
+    setInputMode: (mode: 'usage' | 'default') => void
   }
   logger?: Logger
   fetch?: typeof globalThis.fetch
@@ -77,7 +77,7 @@ export async function fetchAndUpdateUsage(
     // We no longer update the store here since usage data is managed by TanStack Query.
 
     if (showBanner) {
-      chatStore.setIsUsageVisible(true)
+      chatStore.setInputMode('usage')
     }
 
     return true

cli/src/utils/input-modes.ts

@@ -3,7 +3,7 @@
 // 1. Add it to the InputMode type
 // 2. Add its configuration to INPUT_MODE_CONFIGS
 
-export type InputMode = 'default' | 'bash' | 'referral'
+export type InputMode = 'default' | 'bash' | 'referral' | 'usage'
 
 // Theme color keys that are valid color values (must match ChatTheme keys)
 export type ThemeColorKey = 'foreground' | 'background' | 'error' | 'warning' | 'success' | 'info' | 'muted'
@@ -48,6 +48,14 @@ export const INPUT_MODE_CONFIGS: Record<InputMode, InputModeConfig> = {
     showAgentModeToggle: false,
     disableSlashSuggestions: true,
   },
+  usage: {
+    icon: null,
+    color: 'foreground',
+    placeholder: 'type a message...',
+    widthAdjustment: 0,
+    showAgentModeToggle: true,
+    disableSlashSuggestions: false,
+  },
 }
 
 export function getInputModeConfig(mode: InputMode): InputModeConfig {