style(cli): unify footer layout to prevent extra blank lines in narrow mode

packages/cli/src/ui/components/Composer.test.tsx

@@ -563,7 +563,7 @@ describe('Composer', () => {
       const output = lastFrame();
       expect(output).toContain('ToastDisplay');
       expect(output).not.toContain('ApprovalModeIndicator');
-      expect(output).toContain('StatusDisplay');
+      expect(output).not.toContain('StatusDisplay');
     });
 
     it('shows ToastDisplay for other toast types', async () => {

packages/cli/src/ui/components/Composer.tsx

@@ -526,28 +526,20 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
             {showShortcutsHelp && <ShortcutsHelp />}
             {showUiDetails && (
               <Box
-                justifyContent={
-                  settings.merged.ui.hideContextSummary
-                    ? 'flex-start'
-                    : 'space-between'
-                }
                 width="100%"
-                flexDirection={isNarrow ? 'column' : 'row'}
+                flexDirection="row"
-                alignItems={isNarrow ? 'flex-start' : 'center'}
+                flexWrap="wrap"
+                alignItems="center"
+                marginLeft={1}
               >
-                <Box
+                {hasToast ? (
-                  marginLeft={1}
+                  <ToastDisplay />
-                  marginRight={isNarrow ? 0 : 1}
+                ) : (
-                  flexDirection="row"
+                  <>
-                  alignItems="center"
-                  flexGrow={1}
-                >
-                  {hasToast ? (
-                    <ToastDisplay />
-                  ) : (
                     <Box
-                      flexDirection={isNarrow ? 'column' : 'row'}
+                      flexDirection="row"
-                      alignItems={isNarrow ? 'flex-start' : 'center'}
+                      alignItems="center"
+                      flexWrap="wrap"
                     >
                       {showApprovalIndicator && (
                         <ApprovalModeIndicator
@@ -558,51 +550,30 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
                       {!showLoadingIndicator && (
                         <>
                           {uiState.shellModeActive && (
-                            <Box
+                            <Box marginLeft={1}>
-                              marginLeft={
-                                showApprovalIndicator && !isNarrow ? 1 : 0
-                              }
-                              marginTop={
-                                showApprovalIndicator && isNarrow ? 1 : 0
-                              }
-                            >
                               <ShellModeIndicator />
                             </Box>
                           )}
                           {showRawMarkdownIndicator && (
-                            <Box
+                            <Box marginLeft={1}>
-                              marginLeft={
-                                (showApprovalIndicator ||
-                                  uiState.shellModeActive) &&
-                                !isNarrow
-                                  ? 1
-                                  : 0
-                              }
-                              marginTop={
-                                (showApprovalIndicator ||
-                                  uiState.shellModeActive) &&
-                                isNarrow
-                                  ? 1
-                                  : 0
-                              }
-                            >
                               <RawMarkdownIndicator />
                             </Box>
                           )}
                         </>
                       )}
                     </Box>
-                  )}
+                    {!showLoadingIndicator && (
-                </Box>
+                      <>
-
+                        <Box marginLeft={1}>
-                <Box
+                          <Text color={theme.text.secondary}>·</Text>
-                  flexDirection="column"
+                        </Box>
-                  alignItems={isNarrow ? 'flex-start' : 'flex-end'}
+                        <StatusDisplay
-                >
+                          hideContextSummary={hideContextSummary}
-                  {!showLoadingIndicator && (
+                        />
-                    <StatusDisplay hideContextSummary={hideContextSummary} />
+                      </>
-                  )}
+                    )}
-                </Box>
+                  </>
+                )}
               </Box>
             )}
           </Box>

packages/cli/src/ui/components/ContextSummaryDisplay.tsx

@@ -40,7 +40,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
     skillCount === 0 &&
     backgroundProcessCount === 0
   ) {
-    return <Text> </Text>; // Render an empty space to reserve height
+    return null;
   }
 
   const openFilesText = (() => {

packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Composer > Snapshots > matches snapshot in idle state 1`] = `
 "                                                                                       ShortcutsHint
- ApprovalModeIndicator                                                                 StatusDisplay
+ ApprovalModeIndicator ·StatusDisplay
 InputPrompt:   Type your message or @path/to/file
 Footer
 "
@@ -23,8 +23,7 @@ InputPrompt:   Type your message or @path/to/file
 exports[`Composer > Snapshots > matches snapshot in narrow view 1`] = `
 "
 ShortcutsHint
- ApprovalModeIndicator
+ ApprovalModeIndicator ·StatusDisplay
-StatusDisplay
 InputPrompt:   Type your message or
 @path/to/file
 Footer