From 780494697006817042007a41960b79c4eab4934d Mon Sep 17 00:00:00 2001
From: wenshao <shaojin.wensj@alibaba-inc.com>
Date: Wed, 8 Apr 2026 20:18:06 +0800
Subject: [PATCH] refactor(footer): inline status line in footer left section

Move status line from a dedicated row below the footer into the
footer's left section, replacing "? for shortcuts" when active.
High-priority messages (Ctrl+C/D, Esc, vim INSERT, shell mode)
still override the status line.

Move approval mode indicator to a separate row below the footer,
shown only when mode is non-default. This eliminates the empty
gap in default mode and matches upstream layout.
---
 packages/cli/src/ui/components/Footer.tsx | 34 ++++++++++++-----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index f22f32c94..09875d035 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -25,7 +25,7 @@ export const Footer: React.FC = () => {
   const uiState = useUIState();
   const config = useConfig();
   const { vimEnabled, vimMode } = useVimMode();
-  const { text: statusLineText, padding: statusLinePadding } = useStatusLine();
+  const { text: statusLineText } = useStatusLine();
   const { verboseMode } = useVerboseMode();
 
   const { promptTokenCount, showAutoAcceptIndicator } = {
@@ -52,9 +52,12 @@ export const Footer: React.FC = () => {
   const contextWindowSize =
     config.getContentGeneratorConfig()?.contextWindowSize;
 
-  // Left section shows one item in priority order. When a custom status line
-  // is active, only the default "? for shortcuts" hint is suppressed because
-  // the status line occupies its own row below.
+  // Left section priority: high-priority messages > status line > hint.
+  // Approval mode indicator is rendered as a separate row below when non-default.
+  const isNonDefaultMode =
+    showAutoAcceptIndicator !== undefined &&
+    showAutoAcceptIndicator !== ApprovalMode.DEFAULT;
+
   const leftContent = uiState.ctrlCPressedOnce ? (
     <Text color={theme.status.warning}>{t('Press Ctrl+C again to exit.')}</Text>
   ) : uiState.ctrlDPressedOnce ? (
@@ -65,10 +68,11 @@ export const Footer: React.FC = () => {
     <Text color={theme.text.secondary}>-- INSERT --</Text>
   ) : uiState.shellModeActive ? (
     <ShellModeIndicator />
-  ) : showAutoAcceptIndicator !== undefined &&
-    showAutoAcceptIndicator !== ApprovalMode.DEFAULT ? (
-    <AutoAcceptIndicator approvalMode={showAutoAcceptIndicator} />
-  ) : statusLineText ? null : (
+  ) : statusLineText ? (
+    <Text dimColor wrap="truncate">
+      {statusLineText}
+    </Text>
+  ) : (
     <Text color={theme.text.secondary}>{t('? for shortcuts')}</Text>
   );
 
@@ -106,8 +110,8 @@ export const Footer: React.FC = () => {
     });
   }
 
-  // When a custom status line is configured, render it as a dedicated row
-  // beneath the standard footer (matching upstream placement).
+  // Status line is inlined in the footer's left section.
+  // Approval mode indicator renders as a separate row below when non-default.
   return (
     <Box flexDirection="column" width="100%">
       <Box
@@ -137,12 +141,10 @@ export const Footer: React.FC = () => {
         </Box>
       </Box>
 
-      {/* Custom status line row — match footer's horizontal inset */}
-      {statusLineText && (
-        <Box marginLeft={2} marginRight={2} paddingX={statusLinePadding}>
-          <Text dimColor wrap="truncate">
-            {statusLineText}
-          </Text>
+      {/* Approval mode indicator — shown as separate row when non-default */}
+      {isNonDefaultMode && (
+        <Box marginLeft={2} marginRight={2}>
+          <AutoAcceptIndicator approvalMode={showAutoAcceptIndicator} />
         </Box>
       )}
     </Box>