Remove context percentage in footer by default (#12326)

packages/cli/src/config/settingsSchema.test.ts

@@ -159,6 +159,10 @@ describe('SettingsSchema', () => {
       expect(
         getSettingsSchema().ui.properties.showMemoryUsage.showInDialog,
       ).toBe(true);
+      expect(
+        getSettingsSchema().ui.properties.footer.properties
+          .hideContextPercentage.showInDialog,
+      ).toBe(true);
       expect(getSettingsSchema().general.properties.vimMode.showInDialog).toBe(
         true,
       );

packages/cli/src/config/settingsSchema.ts

@@ -388,6 +388,15 @@ const SETTINGS_SCHEMA = {
             description: 'Hide the model name and context usage in the footer.',
             showInDialog: true,
           },
+          hideContextPercentage: {
+            type: 'boolean',
+            label: 'Hide Context Window Percentage',
+            category: 'UI',
+            requiresRestart: false,
+            default: true,
+            description: 'Hides the context window remaining percentage.',
+            showInDialog: true,
+          },
         },
       },
       hideFooter: {

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { describe, it, expect, vi } from 'vitest';
 import {
   renderWithProviders,
   createMockSettings,
@@ -120,6 +121,13 @@ describe('<Footer />', () => {
     const { lastFrame } = renderWithProviders(<Footer />, {
       width: 120,
       uiState: { sessionStats: mockSessionStats },
+      settings: createMockSettings({
+        ui: {
+          footer: {
+            hideContextPercentage: false,
+          },
+        },
+      }),
     });
     expect(lastFrame()).toContain(defaultProps.model);
     expect(lastFrame()).toMatch(/\(\d+% context left\)/);
@@ -129,6 +137,13 @@ describe('<Footer />', () => {
     const { lastFrame } = renderWithProviders(<Footer />, {
       width: 99,
       uiState: { sessionStats: mockSessionStats },
+      settings: createMockSettings({
+        ui: {
+          footer: {
+            hideContextPercentage: false,
+          },
+        },
+      }),
     });
     expect(lastFrame()).toContain(defaultProps.model);
     expect(lastFrame()).toMatch(/\(\d+%\)/);
@@ -192,6 +207,13 @@ describe('<Footer />', () => {
       const { lastFrame } = renderWithProviders(<Footer />, {
         width: 120,
         uiState: { sessionStats: mockSessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideContextPercentage: false,
+            },
+          },
+        }),
       });
       expect(lastFrame()).toMatchSnapshot('complete-footer-wide');
     });
@@ -247,10 +269,49 @@ describe('<Footer />', () => {
       expect(lastFrame()).toMatchSnapshot('footer-only-sandbox');
     });
 
+    it('hides the context percentage when hideContextPercentage is true', () => {
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { sessionStats: mockSessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideContextPercentage: true,
+            },
+          },
+        }),
+      });
+      expect(lastFrame()).toContain(defaultProps.model);
+      expect(lastFrame()).not.toMatch(/\(\d+% context left\)/);
+    });
+
+    it('shows the context percentage when hideContextPercentage is false', () => {
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { sessionStats: mockSessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideContextPercentage: false,
+            },
+          },
+        }),
+      });
+      expect(lastFrame()).toContain(defaultProps.model);
+      expect(lastFrame()).toMatch(/\(\d+% context left\)/);
+    });
+
     it('renders complete footer in narrow terminal (baseline narrow)', () => {
       const { lastFrame } = renderWithProviders(<Footer />, {
         width: 79,
         uiState: { sessionStats: mockSessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideContextPercentage: false,
+            },
+          },
+        }),
       });
       expect(lastFrame()).toMatchSnapshot('complete-footer-narrow');
     });

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

@@ -60,6 +60,8 @@ export const Footer: React.FC = () => {
   const hideSandboxStatus =
     settings.merged.ui?.footer?.hideSandboxStatus || false;
   const hideModelInfo = settings.merged.ui?.footer?.hideModelInfo || false;
+  const hideContextPercentage =
+    settings.merged.ui?.footer?.hideContextPercentage ?? true;
 
   const pathLength = Math.max(20, Math.floor(mainAreaWidth * 0.25));
   const displayPath = shortenPath(tildeifyPath(targetDir), pathLength);
@@ -145,12 +147,17 @@ export const Footer: React.FC = () => {
         <Box alignItems="center" justifyContent="flex-end">
           <Box alignItems="center">
             <Text color={theme.text.accent}>
-              {model}{' '}
-              <ContextUsageDisplay
-                promptTokenCount={promptTokenCount}
-                model={model}
-                terminalWidth={mainAreaWidth}
-              />
+              {model}
+              {!hideContextPercentage && (
+                <>
+                  {' '}
+                  <ContextUsageDisplay
+                    promptTokenCount={promptTokenCount}
+                    model={model}
+                    terminalWidth={mainAreaWidth}
+                  />
+                </>
+              )}
             </Text>
             {showMemoryUsage && <MemoryUsageDisplay />}
           </Box>