refactor(cli): extract InputModeBanner as parent component to PendingImagesBanner

- Create new InputModeBanner component in its own file
- Move usageBannerShowTime state management into InputModeBanner
- Always render PendingImagesBanner alongside mode banners
- Simplify ChatInputBar by removing conditional banner rendering

Author: brandonkachen

cli/src/components/chat-input-bar.tsx

@@ -2,12 +2,10 @@ import React from 'react'
 
 import { AgentModeToggle } from './agent-mode-toggle'
 import { FeedbackContainer } from './feedback-container'
+import { InputModeBanner } from './input-mode-banner'
 import { MultipleChoiceForm } from './ask-user'
 import { MultilineInput, type MultilineInputHandle } from './multiline-input'
-import { PendingImagesBanner } from './pending-images-banner'
-import { ReferralBanner } from './referral-banner'
 import { SuggestionMenu, type SuggestionItem } from './suggestion-menu'
-import { UsageBanner } from './usage-banner'
 import { useChatStore } from '../state/chat-store'
 import { useAskUserBridge } from '../hooks/use-ask-user-bridge'
 
@@ -21,23 +19,6 @@ import type { InputMode } from '../utils/input-modes'
 
 type Theme = ReturnType<typeof useTheme>
 
-const InputModeBanner = ({
-  inputMode,
-  usageBannerShowTime,
-}: {
-  inputMode: InputMode
-  usageBannerShowTime: number
-}) => {
-  switch (inputMode) {
-    case 'usage':
-      return <UsageBanner showTime={usageBannerShowTime} />
-    case 'referral':
-      return <ReferralBanner />
-    default:
-      return null
-  }
-}
-
 interface ChatInputBarProps {
   // Input state
   inputValue: string
@@ -110,17 +91,6 @@ export const ChatInputBar = ({
 }: ChatInputBarProps) => {
   const inputMode = useChatStore((state) => state.inputMode)
   const setInputMode = useChatStore((state) => state.setInputMode)
-  const hasPendingImages = useChatStore((state) => state.pendingImages.length > 0)
-
-  const [usageBannerShowTime, setUsageBannerShowTime] = React.useState(() =>
-    Date.now(),
-  )
-
-  React.useEffect(() => {
-    if (inputMode === 'usage') {
-      setUsageBannerShowTime(Date.now())
-    }
-  }, [inputMode])
 
   const modeConfig = getInputModeConfig(inputMode)
   const askUserState = useChatStore((state) => state.askUserState)
@@ -391,14 +361,7 @@ export const ChatInputBar = ({
           </box>
         </box>
       </box>
-      {hasPendingImages ? (
-        <PendingImagesBanner />
-      ) : (
-        <InputModeBanner
-          inputMode={inputMode}
-          usageBannerShowTime={usageBannerShowTime}
-        />
-      )}
+      <InputModeBanner />
     </>
   )
 }

cli/src/components/input-mode-banner.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { PendingImagesBanner } from './pending-images-banner'
+import { ReferralBanner } from './referral-banner'
+import { UsageBanner } from './usage-banner'
+import { useChatStore } from '../state/chat-store'
+
+/**
+ * Banner component that shows contextual information below the input box.
+ * Shows mode-specific banners based on the current input mode.
+ */
+export const InputModeBanner = () => {
+  const inputMode = useChatStore((state) => state.inputMode)
+
+  const [usageBannerShowTime, setUsageBannerShowTime] = React.useState(() =>
+    Date.now(),
+  )
+
+  React.useEffect(() => {
+    if (inputMode === 'usage') {
+      setUsageBannerShowTime(Date.now())
+    }
+  }, [inputMode])
+
+  switch (inputMode) {
+    case 'default':
+    case 'image':
+      return <PendingImagesBanner />
+    case 'usage':
+      return <UsageBanner showTime={usageBannerShowTime} />
+    case 'referral':
+      return <ReferralBanner />
+    default:
+      return null
+  }
+}