fix(cli): make footer items equally spaced (#21843)

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

@@ -9,6 +9,7 @@ import { renderWithProviders } from '../../test-utils/render.js';
 import { waitFor } from '../../test-utils/async.js';
 import { FooterConfigDialog } from './FooterConfigDialog.js';
 import { createMockSettings } from '../../test-utils/settings.js';
+import { ALL_ITEMS } from '../../config/footerItems.js';
 import { act } from 'react';
 
 describe('<FooterConfigDialog />', () => {
@@ -213,4 +214,60 @@ describe('<FooterConfigDialog />', () => {
       expect(bIdxAfter).toBeLessThan(wIdxAfter);
     });
   });
+
+  it('updates the preview when Show footer labels is toggled off', async () => {
+    const settings = createMockSettings();
+    const renderResult = renderWithProviders(
+      <FooterConfigDialog onClose={mockOnClose} />,
+      { settings },
+    );
+
+    const { lastFrame, stdin, waitUntilReady } = renderResult;
+    await waitUntilReady();
+
+    // By default labels are on
+    expect(lastFrame()).toContain('workspace (/directory)');
+    expect(lastFrame()).toContain('sandbox');
+    expect(lastFrame()).toContain('/model');
+
+    // Move to "Show footer labels" (which is the second to last item)
+    for (let i = 0; i < ALL_ITEMS.length; i++) {
+      act(() => {
+        stdin.write('\u001b[B'); // Down arrow
+      });
+    }
+
+    await waitFor(() => {
+      expect(lastFrame()).toMatch(/> \[✓\] Show footer labels/);
+    });
+
+    // Toggle it off
+    act(() => {
+      stdin.write('\r');
+    });
+
+    await waitFor(() => {
+      expect(lastFrame()).toMatch(/> \[ \] Show footer labels/);
+      // The headers should no longer be in the preview
+      expect(lastFrame()).not.toContain('workspace (/directory)');
+      expect(lastFrame()).not.toContain('/model');
+
+      // We can't strictly search for "sandbox" because the menu item also says "sandbox".
+      // Let's assert that the spacer dots are now present in the preview instead.
+      const previewLine =
+        lastFrame()
+          .split('\n')
+          .find((line) => line.includes('Preview:')) || '';
+      const nextLine =
+        lastFrame().split('\n')[
+          lastFrame().split('\n').indexOf(previewLine) + 1
+        ] || '';
+      expect(nextLine).toContain('·');
+      expect(nextLine).toContain('~/project/path');
+      expect(nextLine).toContain('docker');
+      expect(nextLine).toContain('97%');
+    });
+
+    await expect(renderResult).toMatchSvgSnapshot();
+  });
 });