From 7ce6bf7b281a7d29e3aa3da484a06bdebaf27b0c Mon Sep 17 00:00:00 2001
From: Keith Guerin <keithguerin@gmail.com>
Date: Sun, 1 Mar 2026 23:58:06 -0800
Subject: [PATCH] style(cli): unify footer layout to prevent extra blank lines
 in narrow mode

---
 .../cli/src/ui/components/Composer.test.tsx   |  2 +-
 packages/cli/src/ui/components/Composer.tsx   | 79 ++++++-------------
 .../ui/components/ContextSummaryDisplay.tsx   |  2 +-
 .../__snapshots__/Composer.test.tsx.snap      |  5 +-
 4 files changed, 29 insertions(+), 59 deletions(-)

diff --git a/packages/cli/src/ui/components/Composer.test.tsx b/packages/cli/src/ui/components/Composer.test.tsx
index 21701191e7..3ecc9ba8c5 100644
--- a/packages/cli/src/ui/components/Composer.test.tsx
+++ b/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 () => {
diff --git a/packages/cli/src/ui/components/Composer.tsx b/packages/cli/src/ui/components/Composer.tsx
index 739aa88ad2..174746d314 100644
--- a/packages/cli/src/ui/components/Composer.tsx
+++ b/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'}
-                alignItems={isNarrow ? 'flex-start' : 'center'}
+                flexDirection="row"
+                flexWrap="wrap"
+                alignItems="center"
+                marginLeft={1}
               >
-                <Box
-                  marginLeft={1}
-                  marginRight={isNarrow ? 0 : 1}
-                  flexDirection="row"
-                  alignItems="center"
-                  flexGrow={1}
-                >
-                  {hasToast ? (
-                    <ToastDisplay />
-                  ) : (
+                {hasToast ? (
+                  <ToastDisplay />
+                ) : (
+                  <>
                     <Box
-                      flexDirection={isNarrow ? 'column' : 'row'}
-                      alignItems={isNarrow ? 'flex-start' : 'center'}
+                      flexDirection="row"
+                      alignItems="center"
+                      flexWrap="wrap"
                     >
                       {showApprovalIndicator && (
                         <ApprovalModeIndicator
@@ -558,51 +550,30 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
                       {!showLoadingIndicator && (
                         <>
                           {uiState.shellModeActive && (
-                            <Box
-                              marginLeft={
-                                showApprovalIndicator && !isNarrow ? 1 : 0
-                              }
-                              marginTop={
-                                showApprovalIndicator && isNarrow ? 1 : 0
-                              }
-                            >
+                            <Box marginLeft={1}>
                               <ShellModeIndicator />
                             </Box>
                           )}
                           {showRawMarkdownIndicator && (
-                            <Box
-                              marginLeft={
-                                (showApprovalIndicator ||
-                                  uiState.shellModeActive) &&
-                                !isNarrow
-                                  ? 1
-                                  : 0
-                              }
-                              marginTop={
-                                (showApprovalIndicator ||
-                                  uiState.shellModeActive) &&
-                                isNarrow
-                                  ? 1
-                                  : 0
-                              }
-                            >
+                            <Box marginLeft={1}>
                               <RawMarkdownIndicator />
                             </Box>
                           )}
                         </>
                       )}
                     </Box>
-                  )}
-                </Box>
-
-                <Box
-                  flexDirection="column"
-                  alignItems={isNarrow ? 'flex-start' : 'flex-end'}
-                >
-                  {!showLoadingIndicator && (
-                    <StatusDisplay hideContextSummary={hideContextSummary} />
-                  )}
-                </Box>
+                    {!showLoadingIndicator && (
+                      <>
+                        <Box marginLeft={1}>
+                          <Text color={theme.text.secondary}>·</Text>
+                        </Box>
+                        <StatusDisplay
+                          hideContextSummary={hideContextSummary}
+                        />
+                      </>
+                    )}
+                  </>
+                )}
               </Box>
             )}
           </Box>
diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
index f3c4a31839..696793bc06 100644
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
+++ b/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 = (() => {
diff --git a/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap
index d4adf77ba6..0bffdf3d3e 100644
--- a/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap
+++ b/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
-StatusDisplay
+ ApprovalModeIndicator ·StatusDisplay
 InputPrompt:   Type your message or
 @path/to/file
 Footer