Make StatusBar background transparent when only scroll-to-bottom button

is shown

Author: brandonkachen

cli/src/chat.tsx

@@ -385,6 +385,7 @@ export const Chat = ({
     queuedCount,
     clearQueue,
     resumeQueue,
+    inputHasText: Boolean(inputValue),
     baseHandleCtrlC,
   })
 

cli/src/components/status-bar.tsx

@@ -97,6 +97,10 @@ export const StatusBar = ({
 
   const statusIndicatorContent = renderStatusIndicator()
   const elapsedTimeContent = renderElapsedTime()
+  
+  // Only show gray background when there's status indicator or timer content
+  const hasContent = statusIndicatorContent || elapsedTimeContent
+  
   return (
     <box
       style={{
@@ -106,7 +110,7 @@ export const StatusBar = ({
         paddingLeft: 1,
         paddingRight: 1,
         gap: 1,
-        backgroundColor: theme.surface,
+        backgroundColor: hasContent ? theme.surface : 'transparent',
       }}
     >
       <box

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

@@ -5,6 +5,7 @@ interface UseQueueControlsParams {
   queuedCount: number
   clearQueue: () => string[]
   resumeQueue: () => void
+  inputHasText: boolean
   baseHandleCtrlC: () => true
 }
 
@@ -13,6 +14,7 @@ export const useQueueControls = ({
   queuedCount,
   clearQueue,
   resumeQueue,
+  inputHasText,
   baseHandleCtrlC,
 }: UseQueueControlsParams) => {
   const handleCtrlC = useCallback(() => {