From 1e8ae5b9d7c9d9bfca408d60ed8e3a09769295a5 Mon Sep 17 00:00:00 2001
From: avilladsen <andrew.villadsen@gmail.com>
Date: Tue, 18 Nov 2025 20:18:18 -0800
Subject: [PATCH] =?UTF-8?q?fix(cli):=20fix=20crash=20on=20startup=20in=20N?=
 =?UTF-8?q?O=5FCOLOR=20mode=20(#13343)=20due=20to=20ungua=E2=80=A6=20(#133?=
 =?UTF-8?q?52)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/cli/src/ui/components/Banner.tsx     | 34 ++++++++---------
 .../ui/components/GradientRegression.test.tsx | 37 ++++++++++++++++++-
 .../cli/src/ui/components/ModelDialog.tsx     |  6 +--
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/packages/cli/src/ui/components/Banner.tsx b/packages/cli/src/ui/components/Banner.tsx
index 8003abc949..460bef540f 100644
--- a/packages/cli/src/ui/components/Banner.tsx
+++ b/packages/cli/src/ui/components/Banner.tsx
@@ -5,8 +5,7 @@
  */
 
 import { Box, Text } from 'ink';
-import Gradient from 'ink-gradient';
-import { theme } from '../semantic-colors.js';
+import { ThemedGradient } from './ThemedGradient.js';
 
 interface BannerProps {
   bannerText: string;
@@ -14,20 +13,17 @@ interface BannerProps {
   width: number;
 }
 
-export const Banner = ({ bannerText, color, width }: BannerProps) => {
-  const gradient = theme.ui.gradient;
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor={color}
-      width={width}
-      paddingLeft={1}
-      paddingRight={1}
-    >
-      <Gradient colors={gradient}>
-        <Text>{bannerText}</Text>
-      </Gradient>
-    </Box>
-  );
-};
+export const Banner = ({ bannerText, color, width }: BannerProps) => (
+  <Box
+    flexDirection="column"
+    borderStyle="round"
+    borderColor={color}
+    width={width}
+    paddingLeft={1}
+    paddingRight={1}
+  >
+    <ThemedGradient>
+      <Text>{bannerText}</Text>
+    </ThemedGradient>
+  </Box>
+);
diff --git a/packages/cli/src/ui/components/GradientRegression.test.tsx b/packages/cli/src/ui/components/GradientRegression.test.tsx
index 1b4bc8a4f7..af6d5c1df0 100644
--- a/packages/cli/src/ui/components/GradientRegression.test.tsx
+++ b/packages/cli/src/ui/components/GradientRegression.test.tsx
@@ -6,10 +6,13 @@
 
 import { describe, it, expect, vi } from 'vitest';
 import { renderWithProviders } from '../../test-utils/render.js';
-import { Footer } from './Footer.js';
-import { StatsDisplay } from './StatsDisplay.js';
 import * as SessionContext from '../contexts/SessionContext.js';
 import type { SessionStatsState } from '../contexts/SessionContext.js';
+import { Banner } from './Banner.js';
+import { Footer } from './Footer.js';
+import { Header } from './Header.js';
+import { ModelDialog } from './ModelDialog.js';
+import { StatsDisplay } from './StatsDisplay.js';
 
 // Mock the theme module
 vi.mock('../semantic-colors.js', async (importOriginal) => {
@@ -63,6 +66,36 @@ useSessionStatsMock.mockReturnValue({
 });
 
 describe('Gradient Crash Regression Tests', () => {
+  it('<Header /> should not crash when theme.ui.gradient is empty', () => {
+    const { lastFrame } = renderWithProviders(
+      <Header version="1.0.0" nightly={false} />,
+      {
+        width: 120,
+      },
+    );
+    expect(lastFrame()).toBeDefined();
+  });
+
+  it('<ModelDialog /> should not crash when theme.ui.gradient is empty', () => {
+    const { lastFrame } = renderWithProviders(
+      <ModelDialog onClose={() => {}} />,
+      {
+        width: 120,
+      },
+    );
+    expect(lastFrame()).toBeDefined();
+  });
+
+  it('<Banner /> should not crash when theme.ui.gradient is empty', () => {
+    const { lastFrame } = renderWithProviders(
+      <Banner bannerText="Test Banner" color="blue" width={80} />,
+      {
+        width: 120,
+      },
+    );
+    expect(lastFrame()).toBeDefined();
+  });
+
   it('<Footer /> should not crash when theme.ui.gradient has only one color (or empty) and nightly is true', () => {
     const { lastFrame } = renderWithProviders(<Footer />, {
       width: 120,
diff --git a/packages/cli/src/ui/components/ModelDialog.tsx b/packages/cli/src/ui/components/ModelDialog.tsx
index e61f34bf6d..caec692e01 100644
--- a/packages/cli/src/ui/components/ModelDialog.tsx
+++ b/packages/cli/src/ui/components/ModelDialog.tsx
@@ -23,7 +23,7 @@ import { useKeypress } from '../hooks/useKeypress.js';
 import { theme } from '../semantic-colors.js';
 import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSelect.js';
 import { ConfigContext } from '../contexts/ConfigContext.js';
-import Gradient from 'ink-gradient';
+import { ThemedGradient } from './ThemedGradient.js';
 
 interface ModelDialogProps {
   onClose: () => void;
@@ -115,9 +115,9 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
       <Text bold>Select Model</Text>
 
       <Box marginTop={1} marginBottom={1} flexDirection="column">
-        <Gradient colors={theme.ui.gradient}>
+        <ThemedGradient>
           <Text>{header}</Text>
-        </Gradient>
+        </ThemedGradient>
         <Text>{subheader}</Text>
       </Box>