fix(ui): escaping theme dialog no longer resets theme to default (#11323)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

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

@@ -115,6 +115,7 @@ export const DialogManager = ({
         )}
         <ThemeDialog
           onSelect={uiActions.handleThemeSelect}
+          onCancel={uiActions.closeThemeDialog}
           onHighlight={uiActions.handleThemeHighlight}
           settings={settings}
           availableTerminalHeight={

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

@@ -12,6 +12,7 @@ import { KeypressProvider } from '../contexts/KeypressContext.js';
 import { SettingsContext } from '../contexts/SettingsContext.js';
 import { DEFAULT_THEME, themeManager } from '../themes/theme-manager.js';
 import { act } from 'react';
+import { waitFor } from '@testing-library/react';
 
 const createMockSettings = (
   userSettings = {},
@@ -58,6 +59,7 @@ const createMockSettings = (
 describe('ThemeDialog Snapshots', () => {
   const baseProps = {
     onSelect: vi.fn(),
+    onCancel: vi.fn(),
     onHighlight: vi.fn(),
     availableTerminalHeight: 40,
     terminalWidth: 120,
@@ -105,4 +107,28 @@ describe('ThemeDialog Snapshots', () => {
 
     expect(lastFrame()).toMatchSnapshot();
   });
+
+  it('should call onCancel when ESC is pressed', async () => {
+    const mockOnCancel = vi.fn();
+    const settings = createMockSettings();
+    const { stdin } = render(
+      <SettingsContext.Provider value={settings}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ThemeDialog
+            {...baseProps}
+            onCancel={mockOnCancel}
+            settings={settings}
+          />
+        </KeypressProvider>
+      </SettingsContext.Provider>,
+    );
+
+    act(() => {
+      stdin.write('\x1b');
+    });
+
+    await waitFor(() => {
+      expect(mockOnCancel).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -20,7 +20,10 @@ import { ScopeSelector } from './shared/ScopeSelector.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
-  onSelect: (themeName: string | undefined, scope: SettingScope) => void;
+  onSelect: (themeName: string, scope: SettingScope) => void;
+
+  /** Callback function when the dialog is cancelled */
+  onCancel: () => void;
 
   /** Callback function when a theme is highlighted */
   onHighlight: (themeName: string | undefined) => void;
@@ -32,6 +35,7 @@ interface ThemeDialogProps {
 
 export function ThemeDialog({
   onSelect,
+  onCancel,
   onHighlight,
   settings,
   availableTerminalHeight,
@@ -42,9 +46,9 @@ export function ThemeDialog({
   );
 
   // Track the currently highlighted theme name
-  const [highlightedThemeName, setHighlightedThemeName] = useState<
-    string | undefined
-  >(settings.merged.ui?.theme || DEFAULT_THEME.name);
+  const [highlightedThemeName, setHighlightedThemeName] = useState<string>(
+    settings.merged.ui?.theme || DEFAULT_THEME.name,
+  );
 
   // Generate theme items filtered by selected scope
   const customThemes =
@@ -112,7 +116,7 @@ export function ThemeDialog({
         setMode((prev) => (prev === 'theme' ? 'scope' : 'theme'));
       }
       if (key.name === 'escape') {
-        onSelect(undefined, selectedScope);
+        onCancel();
       }
     },
     { isActive: true },