From b089845f1c34e5475bcae9cc8eb42fba8be9adc4 Mon Sep 17 00:00:00 2001
From: Jacob Richman <jacob314@gmail.com>
Date: Fri, 25 Jul 2025 17:36:19 -0700
Subject: [PATCH] fix(ui): remove extraneous whitespace from startup screen
 (#3990)

---
 packages/cli/src/ui/App.test.tsx              | 32 +++++++++++++++++++
 packages/cli/src/ui/App.tsx                   |  2 +-
 .../src/ui/__snapshots__/App.test.tsx.snap    | 18 +++++++++++
 packages/cli/src/ui/components/Footer.tsx     |  2 +-
 packages/cli/src/ui/components/Header.tsx     |  1 -
 packages/cli/src/ui/components/Tips.tsx       |  2 +-
 6 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 packages/cli/src/ui/__snapshots__/App.test.tsx.snap

diff --git a/packages/cli/src/ui/App.test.tsx b/packages/cli/src/ui/App.test.tsx
index 4abf2d06..93230d1c 100644
--- a/packages/cli/src/ui/App.test.tsx
+++ b/packages/cli/src/ui/App.test.tsx
@@ -657,6 +657,38 @@ describe('App UI', () => {
     });
   });
 
+  it('should render the initial UI correctly', () => {
+    const { lastFrame, unmount } = render(
+      <App
+        config={mockConfig as unknown as ServerConfig}
+        settings={mockSettings}
+        version={mockVersion}
+      />,
+    );
+    currentUnmount = unmount;
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render correctly with the prompt input box', () => {
+    vi.mocked(useGeminiStream).mockReturnValue({
+      streamingState: StreamingState.Idle,
+      submitQuery: vi.fn(),
+      initError: null,
+      pendingHistoryItems: [],
+      thought: null,
+    });
+
+    const { lastFrame, unmount } = render(
+      <App
+        config={mockConfig as unknown as ServerConfig}
+        settings={mockSettings}
+        version={mockVersion}
+      />,
+    );
+    currentUnmount = unmount;
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
   describe('with initial prompt from --prompt-interactive', () => {
     it('should submit the initial prompt automatically', async () => {
       const mockSubmitQuery = vi.fn();
diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 6163ac51..7b5aa8d0 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -748,7 +748,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
 
   return (
     <StreamingContext.Provider value={streamingState}>
-      <Box flexDirection="column" marginBottom={1} width="90%">
+      <Box flexDirection="column" width="90%">
         {/* Move UpdateNotification outside Static so it can re-render when updateMessage changes */}
         {updateMessage && <UpdateNotification message={updateMessage} />}
 
diff --git a/packages/cli/src/ui/__snapshots__/App.test.tsx.snap b/packages/cli/src/ui/__snapshots__/App.test.tsx.snap
new file mode 100644
index 00000000..891a16af
--- /dev/null
+++ b/packages/cli/src/ui/__snapshots__/App.test.tsx.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`App UI > should render correctly with the prompt input box 1`] = `
+"
+
+╭────────────────────────────────────────────────────────────────────────────────────────╮
+│ >   Type your message or @path/to/file                                                 │
+╰────────────────────────────────────────────────────────────────────────────────────────╯
+/test/dir                no sandbox (see /docs)                  model (100% context left)"
+`;
+
+exports[`App UI > should render the initial UI correctly 1`] = `
+"
+ I'm Feeling Lucky (esc to cancel, 0s)
+
+
+/test/dir                no sandbox (see /docs)                  model (100% context left)"
+`;
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 5b9e3af7..af3d8437 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -46,7 +46,7 @@ export const Footer: React.FC<FooterProps> = ({
   const percentage = promptTokenCount / limit;
 
   return (
-    <Box marginTop={1} justifyContent="space-between" width="100%">
+    <Box justifyContent="space-between" width="100%">
       <Box>
         {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>}
         {nightly ? (
diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index b99382e0..4038e415 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -38,7 +38,6 @@ export const Header: React.FC<HeaderProps> = ({
 
   return (
     <Box
-      marginBottom={1}
       alignItems="flex-start"
       width={artWidth}
       flexShrink={0}
diff --git a/packages/cli/src/ui/components/Tips.tsx b/packages/cli/src/ui/components/Tips.tsx
index 0db6611c..4aa6c112 100644
--- a/packages/cli/src/ui/components/Tips.tsx
+++ b/packages/cli/src/ui/components/Tips.tsx
@@ -16,7 +16,7 @@ interface TipsProps {
 export const Tips: React.FC<TipsProps> = ({ config }) => {
   const geminiMdFileCount = config.getGeminiMdFileCount();
   return (
-    <Box flexDirection="column" marginBottom={1}>
+    <Box flexDirection="column">
       <Text color={Colors.Foreground}>Tips for getting started:</Text>
       <Text color={Colors.Foreground}>
         1. Ask questions, edit files, or run commands.