fix

webapp/src/hooks/useTheme.ts

@@ -3,6 +3,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {ThemeName} from '../types';
 import {setTheme} from '../store/slices/uiSlice';
 import {RootState} from '../store';
+import {themeStorage} from '../services/appConfig';
 
 export const useTheme = (initialTheme?: ThemeName): [ThemeName, (theme: ThemeName) => void] => {
     console.group('🎨 useTheme Hook');
@@ -13,6 +14,14 @@ export const useTheme = (initialTheme?: ThemeName): [ThemeName, (theme: ThemeNam
 
     const dispatch = useDispatch();
     const currentTheme = useSelector((state: RootState) => state.ui.theme);
+    // Load saved theme on mount
+    React.useEffect(() => {
+        const savedTheme = themeStorage.getTheme();
+        if (savedTheme && savedTheme !== currentTheme) {
+            console.log('🔄 Loading saved theme:', savedTheme);
+            dispatch(setTheme(savedTheme));
+        }
+    }, []);
     console.log('🔍 Theme from Redux:', {
         currentTheme,
         stateSnapshot: new Date().toISOString()
@@ -27,7 +36,7 @@ export const useTheme = (initialTheme?: ThemeName): [ThemeName, (theme: ThemeNam
                 timestamp: new Date().toISOString()
             });
             dispatch(setTheme(newTheme));
-            localStorage.setItem('theme', newTheme);
+            themeStorage.setTheme(newTheme);
             console.log('💾 LocalStorage updated');
             console.groupEnd();
         },
@@ -43,7 +52,8 @@ export const useTheme = (initialTheme?: ThemeName): [ThemeName, (theme: ThemeNam
             timestamp: new Date().toISOString()
         });
 
-        if (initialTheme && !currentTheme) {
+        const savedTheme = themeStorage.getTheme();
+        if (initialTheme && !currentTheme && initialTheme !== savedTheme) {
             console.log('✨ Setting initial theme:', {
                 theme: initialTheme,
                 reason: 'No current theme set'

webapp/src/services/appConfig.ts

@@ -1,10 +1,66 @@
 import {store} from '../store';
 
 import {setAppInfo} from '../store/slices/configSlice';
+import {ThemeName} from '../types';
 
 const LOG_PREFIX = '[AppConfig]';
 
 const BASE_API_URL = process.env.REACT_APP_API_URL || window.location.origin;
+const STORAGE_KEYS = {
+  THEME: 'theme',
+} as const;
+// Type guard for theme validation
+const isValidTheme = (theme: unknown): theme is ThemeName => {
+  const validThemes = ['main', 'night', 'forest', 'pony', 'alien', 'sunset', 'ocean', 'cyberpunk'] as const;
+  return typeof theme === 'string' && validThemes.includes(theme as ThemeName);
+};
+export const themeStorage = {
+  /**
+   * Get theme with validation and fallback
+   */
+  getTheme(): ThemeName {
+    try {
+      const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME);
+      if (isValidTheme(savedTheme)) {
+        console.log(`${LOG_PREFIX} Retrieved theme:`, savedTheme);
+        return savedTheme;
+      }
+      console.warn(`${LOG_PREFIX} Invalid saved theme, using default`);
+      return 'main';
+    } catch (error) {
+      console.error(`${LOG_PREFIX} Error retrieving theme:`, error);
+      return 'main';
+    }
+  },
+  /**
+   * Set theme with validation and error handling
+   */
+  setTheme(theme: ThemeName): boolean {
+    if (!isValidTheme(theme)) {
+      console.error(`${LOG_PREFIX} Invalid theme:`, theme);
+      return false;
+    }
+    try {
+      localStorage.setItem(STORAGE_KEYS.THEME, theme);
+      console.log(`${LOG_PREFIX} Theme saved:`, theme);
+      return true;
+    } catch (error) {
+      console.error(`${LOG_PREFIX} Failed to save theme:`, error);
+      return false;
+    }
+  },
+  /**
+   * Clear theme setting
+   */
+  clearTheme(): void {
+    try {
+      localStorage.removeItem(STORAGE_KEYS.THEME);
+      console.log(`${LOG_PREFIX} Theme setting cleared`);
+    } catch (error) {
+      console.error(`${LOG_PREFIX} Failed to clear theme:`, error);
+    }
+  }
+};
 
 
 export const fetchAppConfig = async (sessionId: string) => {

webapp/src/types.ts

@@ -3,9 +3,6 @@ export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien' | 'sunset
 
 // Define log levels
 export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
-// Define TabObservers type
-export type TabObservers = Map<string, Map<string, MutationObserver>>;
-
 
 // Define console styles
 export interface ConsoleStyle {
@@ -25,18 +22,6 @@ export interface ConsoleConfig {
     styles: Record<LogLevel, ConsoleStyle>;
 }
 
-
-// Define log entry interface
-export interface LogEntry {
-    timestamp: number;
-    level: LogLevel;
-    message: string;
-    data?: unknown;
-    source?: string;
-    stackTrace?: string;
-    consoleOutput?: string;
-}
-
 // Message type
 export interface Message {
     id: string;

webui/src/main/resources/application/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.32ca5a31.css",
-    "main.js": "/static/js/main.19572024.js",
+    "main.js": "/static/js/main.5ff54c09.js",
     "static/js/9017.98ad007d.chunk.js": "/static/js/9017.98ad007d.chunk.js",
     "static/js/5536.9c75127e.chunk.js": "/static/js/5536.9c75127e.chunk.js",
     "static/js/7035.2bce51c5.chunk.js": "/static/js/7035.2bce51c5.chunk.js",
@@ -73,7 +73,7 @@
     "static/js/5195.756798f5.chunk.js": "/static/js/5195.756798f5.chunk.js",
     "index.html": "/index.html",
     "main.32ca5a31.css.map": "/static/css/main.32ca5a31.css.map",
-    "main.19572024.js.map": "/static/js/main.19572024.js.map",
+    "main.5ff54c09.js.map": "/static/js/main.5ff54c09.js.map",
     "9017.98ad007d.chunk.js.map": "/static/js/9017.98ad007d.chunk.js.map",
     "5536.9c75127e.chunk.js.map": "/static/js/5536.9c75127e.chunk.js.map",
     "7035.2bce51c5.chunk.js.map": "/static/js/7035.2bce51c5.chunk.js.map",
@@ -141,6 +141,6 @@
   },
   "entrypoints": [
     "static/css/main.32ca5a31.css",
-    "static/js/main.19572024.js"
+    "static/js/main.5ff54c09.js"
   ]
 }

webui/src/main/resources/application/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.19572024.js"></script><link href="/static/css/main.32ca5a31.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.5ff54c09.js"></script><link href="/static/css/main.32ca5a31.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

webui/src/main/resources/application/static/js/main.5ff54c09.js.LICENSE.txt

@@ -0,0 +1,72 @@
+/*!
+ * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+/*! @license DOMPurify 3.2.2 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.2/LICENSE */
+
+/*! Bundled license information:
+
+js-yaml/dist/js-yaml.mjs:
+  (*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT *)
+*/
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */