1 files changed, 60 insertions, 13 deletions
diff --git a/packages/cli/src/ui/hooks/useThemeCommand.ts b/packages/cli/src/ui/hooks/useThemeCommand.ts
index c32a7c2e..b1ae170f 100644
--- a/packages/cli/src/ui/hooks/useThemeCommand.ts
+++ b/packages/cli/src/ui/hooks/useThemeCommand.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { themeManager } from '../themes/theme-manager.js';
 import { LoadedSettings, SettingScope } from '../../config/settings.js'; // Import LoadedSettings, AppSettings, MergedSetting
 
@@ -20,36 +20,83 @@ interface UseThemeCommandReturn {
 
 export const useThemeCommand = (
   loadedSettings: LoadedSettings,
+  setThemeError: (error: string | null) => void,
 ): UseThemeCommandReturn => {
   // Determine the effective theme
   const effectiveTheme = loadedSettings.merged.theme;
 
   // Initial state: Open dialog if no theme is set in either user or workspace settings
-  const [isThemeDialogOpen, setIsThemeDialogOpen] = useState(
-    effectiveTheme === undefined,
-  );
+  const [isThemeDialogOpen, setIsThemeDialogOpen] = useState(false);
   // TODO: refactor how theme's are accessed to avoid requiring a forced render.
   const [, setForceRender] = useState(0);
 
+  // Apply initial theme on component mount
+  useEffect(() => {
+    try {
+      themeManager.setActiveTheme(effectiveTheme);
+      setThemeError(null); // Clear any previous theme error on success
+    } catch (error: unknown) {
+      // If theme is not found during initial load, open the theme selection dialog and set error message
+      if (
+        error instanceof Error &&
+        error.message.includes('Theme') &&
+        error.message.includes('not found')
+      ) {
+        setIsThemeDialogOpen(true);
+        setThemeError(
+          `Error: ${error instanceof Error ? error.message : String(error)}`,
+        );
+      } else {
+        console.error(
+          `Error setting initial theme: ${error instanceof Error ? error.message : String(error)}`,
+        );
+        setThemeError(
+          `Error setting initial theme: ${error instanceof Error ? error.message : String(error)}`,
+        );
+      }
+    }
+  }, [effectiveTheme, setThemeError]); // Re-run if effectiveTheme or setThemeError changes
+
   const openThemeDialog = useCallback(() => {
     setIsThemeDialogOpen(true);
   }, []);
 
-  const applyTheme = useCallback((themeName: string | undefined) => {
-    try {
-      themeManager.setActiveTheme(themeName);
-      setForceRender((v) => v + 1); // Trigger potential re-render
-    } catch (error) {
-      console.error(`Error setting theme: ${error}`);
-    }
-  }, []);
+  const applyTheme = useCallback(
+    (themeName: string | undefined) => {
+      try {
+        themeManager.setActiveTheme(themeName);
+        setForceRender((v) => v + 1); // Trigger potential re-render
+        setThemeError(null); // Clear any previous theme error on success
+      } catch (error: unknown) {
+        // If theme is not found, open the theme selection dialog and set error message
+        if (
+          error instanceof Error &&
+          error.message.includes('Theme') &&
+          error.message.includes('not found')
+        ) {
+          setIsThemeDialogOpen(true);
+          setThemeError(
+            `Error: ${error instanceof Error ? error.message : String(error)}`,
+          );
+        } else {
+          console.error(
+            `Error setting theme: ${error instanceof Error ? error.message : String(error)}`,
+          );
+          setThemeError(
+            `Error setting theme: ${error instanceof Error ? error.message : String(error)}`,
+          );
+        }
+      }
+    },
+    [setForceRender, setThemeError],
+  );
 
   const handleThemeHighlight = useCallback(
     (themeName: string | undefined) => {
       applyTheme(themeName);
     },
     [applyTheme],
-  ); // Added applyTheme to dependencies
+  );
 
   const handleThemeSelect = useCallback(
     (themeName: string | undefined, scope: SettingScope) => {