From 332671570b4777c3b078b655d9eabae18a2803d8 Mon Sep 17 00:00:00 2001
From: Andrew Charneski <acharneski@gmail.com>
Date: Tue, 26 Nov 2024 02:30:33 -0500
Subject: [PATCH] wip

---
 .gitignore                                    |  1 -
 webapp/chat-app/.eslintrc.json                | 40 +++++++++++++
 webapp/chat-app/.gitignore                    | 23 ++++++++
 webapp/chat-app/.prettierrc                   |  9 +++
 webapp/chat-app/src/App.test.js               | 12 +++-
 webapp/chat-app/src/App.tsx                   | 52 ++++++++++++----
 webapp/chat-app/src/components/Chat/index.tsx | 31 ++++++++--
 .../chat-app/src/components/ChatInterface.tsx | 36 +++++++----
 webapp/chat-app/src/components/Header.tsx     | 20 ++++++-
 webapp/chat-app/src/components/InputArea.tsx  | 19 +++++-
 .../chat-app/src/components/Layout/index.tsx  | 15 ++++-
 webapp/chat-app/src/components/Menu/Menu.tsx  | 33 ++++++++---
 .../src/components/Menu/ThemeMenu.tsx         | 35 +++++++----
 webapp/chat-app/src/components/Menu/index.ts  |  9 ++-
 .../chat-app/src/components/MessageList.tsx   | 24 ++++++--
 webapp/chat-app/src/components/Tabs/index.tsx | 33 +++++++++--
 webapp/chat-app/src/hooks/index.ts            |  8 ++-
 webapp/chat-app/src/hooks/useTheme.ts         | 12 +++-
 webapp/chat-app/src/hooks/useWebSocket.ts     | 14 ++++-
 webapp/chat-app/src/index.js                  | 20 ++++++-
 webapp/chat-app/src/index.tsx                 | 18 +++++-
 webapp/chat-app/src/services/websocket.ts     | 42 ++++++++++---
 webapp/chat-app/src/setupTests.js             | 33 +++++++++++
 webapp/chat-app/src/store/Provider.tsx        | 17 +++++-
 webapp/chat-app/src/store/index.ts            | 18 +++++-
 .../chat-app/src/store/slices/configSlice.ts  | 33 ++++++++++-
 .../chat-app/src/store/slices/messageSlice.ts | 20 ++++++-
 webapp/chat-app/src/store/slices/uiSlice.ts   |  8 +++
 webapp/chat-app/src/store/slices/userSlice.ts | 20 ++++++-
 webapp/chat-app/src/styled.d.ts               | 39 ++++++++++++
 webapp/chat-app/src/styles/GlobalStyles.ts    | 43 ++++++++++++--
 webapp/chat-app/src/themes/ThemeProvider.tsx  | 12 +++-
 webapp/chat-app/src/themes/globalStyles.ts    | 41 ++++++++++++-
 webapp/chat-app/src/themes/index.ts           |  7 ++-
 webapp/chat-app/src/themes/themes.ts          | 49 +++++++++++++++
 ....ts (Additional changes for theme objects) | 36 +++++++++++
 webapp/chat-app/src/types.ts                  | 36 +++++++++++
 webapp/chat-app/src/types/index.ts            | 33 ++++++++++-
 webapp/chat-app/src/types/styled.d.ts         | 49 +++++++++++++++
 webapp/chat-app/src/utils/logger.ts           | 59 +++++++++++++++++++
 webapp/chat-app/tsconfig.json                 | 12 ++--
 41 files changed, 969 insertions(+), 102 deletions(-)
 create mode 100644 webapp/chat-app/.eslintrc.json
 create mode 100644 webapp/chat-app/.gitignore
 create mode 100644 webapp/chat-app/.prettierrc
 create mode 100644 webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects)
 create mode 100644 webapp/chat-app/src/utils/logger.ts

diff --git a/.gitignore b/.gitignore
index 82a24a15..78fcf9c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@ reports/
 build/
 .gradle/
 .idea/
-.*
 openai.key
 *.log
 *.log.*
diff --git a/webapp/chat-app/.eslintrc.json b/webapp/chat-app/.eslintrc.json
new file mode 100644
index 00000000..3cfef177
--- /dev/null
+++ b/webapp/chat-app/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": false,
+    "node": false
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
\ No newline at end of file
diff --git a/webapp/chat-app/.gitignore b/webapp/chat-app/.gitignore
new file mode 100644
index 00000000..f1f26100
--- /dev/null
+++ b/webapp/chat-app/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/webapp/chat-app/.prettierrc b/webapp/chat-app/.prettierrc
new file mode 100644
index 00000000..a4878bf8
--- /dev/null
+++ b/webapp/chat-app/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "auto"
+}
\ No newline at end of file
diff --git a/webapp/chat-app/src/App.test.js b/webapp/chat-app/src/App.test.js
index 1f03afee..67bcf101 100644
--- a/webapp/chat-app/src/App.test.js
+++ b/webapp/chat-app/src/App.test.js
@@ -1,8 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import App from './App';
 
+console.log('Starting App component tests...');
+
+
 test('renders learn react link', () => {
+    console.log('Testing: Rendering App component');
   render(<App />);
+    console.log('Testing: Searching for "learn react" text');
   const linkElement = screen.getByText(/learn react/i);
+    console.log('Testing: Verifying element is in document');
   expect(linkElement).toBeInTheDocument();
+    console.log('Test completed successfully');
 });
+afterAll(() => {
+    console.log('All App component tests completed');
+});
\ No newline at end of file
diff --git a/webapp/chat-app/src/App.tsx b/webapp/chat-app/src/App.tsx
index 68c60200..a833f20a 100644
--- a/webapp/chat-app/src/App.tsx
+++ b/webapp/chat-app/src/App.tsx
@@ -8,23 +8,51 @@ import ThemeProvider from './themes/ThemeProvider';
 import {Menu} from "./components/Menu/Menu";
 
 const App: React.FC = () => {
+    console.log('[App] Component rendering');
+
     const sessionId = websocket.getSessionId();
+    const isConnected = websocket.isConnected();
+    console.log('[App] WebSocket state:', {
+        sessionId,
+        isConnected,
+    });
+    React.useEffect(() => {
+        console.log('[App] Component mounted');
+        return () => {
+            console.log('[App] Component unmounting');
+        };
+    }, []);
 
     return (
         <Provider store={store}>
-            <ThemeProvider>
-                <GlobalStyles/>
-                <div className="App">
-                    <Menu/>
-                    <ChatInterface 
-                        sessionId={sessionId} 
-                        websocket={websocket}
-                        isConnected={websocket.isConnected()}
-                    />
-                </div>
-            </ThemeProvider>
+            {(() => {
+                console.log('[App] Rendering Provider with store');
+                return (
+                    <ThemeProvider>
+                        {(() => {
+                            console.log('[App] Rendering ThemeProvider');
+                            return (
+                                <>
+                                    <GlobalStyles/>
+                                    <div className="App">
+                                        <Menu/>
+                                        <ChatInterface
+                                            sessionId={sessionId}
+                                            websocket={websocket}
+                                            isConnected={isConnected}
+                                        />
+                                    </div>
+                                </>
+                            );
+                        })()}
+                    </ThemeProvider>
+                );
+            })()}
         </Provider>
     );
 };
+// Add version info to help with debugging
+console.log('[App] Version 1.0.0 loaded');
+
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Chat/index.tsx b/webapp/chat-app/src/components/Chat/index.tsx
index f80b8af9..ab0ed949 100644
--- a/webapp/chat-app/src/components/Chat/index.tsx
+++ b/webapp/chat-app/src/components/Chat/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import styled from 'styled-components';
-import { DefaultTheme } from 'styled-components';
-import { Message } from '../../types';
+import React, {useEffect} from 'react';
+import styled, {DefaultTheme} from 'styled-components';
+import {Message} from '../../types';
+import {logger} from '../../utils/logger';
 
 const ChatContainer = styled.div`
   display: flex;
@@ -26,6 +26,26 @@ interface ChatProps {
 }
 
 const Chat: React.FC<ChatProps> = ({ messages, onSendMessage }) => {
+  // Log component mount and updates
+  useEffect(() => {
+    logger.component('Chat', 'Component mounted');
+    logger.component('Chat', 'Initial messages:', messages);
+    return () => {
+      logger.component('Chat', 'Component unmounting');
+    };
+  }, []);
+  // Log when messages change
+  useEffect(() => {
+    console.log('[Chat] Messages updated:', messages);
+  }, [messages]);
+  // Wrap onSendMessage to add logging
+  const handleSendMessage = (content: string) => {
+    console.log('[Chat] Sending message:', content);
+    onSendMessage(content);
+  };
+  // Log render
+  console.log('[Chat] Rendering with', messages.length, 'messages');
+
   return (
     <ChatContainer>
       <MessageList>
@@ -37,5 +57,8 @@ const Chat: React.FC<ChatProps> = ({ messages, onSendMessage }) => {
     </ChatContainer>
   );
 };
+// Add display name for better debugging
+Chat.displayName = 'Chat';
+
 
 export default Chat;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/ChatInterface.tsx b/webapp/chat-app/src/components/ChatInterface.tsx
index 0d5d83ac..f815f1df 100644
--- a/webapp/chat-app/src/components/ChatInterface.tsx
+++ b/webapp/chat-app/src/components/ChatInterface.tsx
@@ -24,36 +24,50 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
                                                          websocket,
                                                          isConnected,
                                                      }) => {
+    console.log('[ChatInterface] Rendering with props:', {propSessionId, isConnected});
     const [sessionId] = useState(() => propSessionId || window.location.hash.slice(1) || 'new');
     const dispatch = useDispatch();
     const ws = useWebSocket(sessionId);
 
     useEffect(() => {
+        console.log('[ChatInterface] Setting up message handler for sessionId:', sessionId);
+
         const handleMessage = (data: string) => {
+            console.log('[ChatInterface] Received message:', data);
+
             const [id, version, content] = data.split(',');
             const timestamp = Date.now();
+            const messageObject = {
+                id: `${id}-${timestamp}`,
+                content: content,
+                version,
+                type: id.startsWith('u') ? 'user' as const : 'response' as const,
+                timestamp,
+            };
+            console.log('[ChatInterface] Dispatching message:', messageObject);
 
-            dispatch(
-                addMessage({
-                    id: `${id}-${timestamp}`, // Make IDs more unique
-                    content: content,
-                    version,
-                    type: id.startsWith('u') ? 'user' : 'response',
-                    timestamp,
-                })
-            );
+            dispatch(addMessage(messageObject));
         };
 
         websocket.addMessageHandler(handleMessage);
-        return () => websocket.removeMessageHandler(handleMessage);
+        return () => {
+            console.log('[ChatInterface] Cleaning up message handler for sessionId:', sessionId);
+            websocket.removeMessageHandler(handleMessage);
+        };
     }, [dispatch, ws]);
+    const handleSendMessage = (msg: string) => {
+        console.log('[ChatInterface] Sending message:', msg);
+        ws.send(msg);
+    };
+
 
     return (
         <ChatContainer>
             <MessageList/>
-            <InputArea onSendMessage={(msg) => ws.send(msg)}/>
+            <InputArea onSendMessage={handleSendMessage}/>
         </ChatContainer>
     );
 };
+console.log('[ChatInterface] Component defined');
 
 export default ChatInterface;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Header.tsx b/webapp/chat-app/src/components/Header.tsx
index 5ea39535..b078251f 100644
--- a/webapp/chat-app/src/components/Header.tsx
+++ b/webapp/chat-app/src/components/Header.tsx
@@ -21,10 +21,25 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({onThemeChange}) => {
     const [currentTheme, setTheme] = useTheme();
+    React.useEffect(() => {
+        console.log('Header mounted with theme:', currentTheme);
+        return () => {
+            console.log('Header unmounting');
+        };
+    }, []);
+    React.useEffect(() => {
+        console.log('Theme changed to:', currentTheme);
+    }, [currentTheme]);
+    const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newTheme = e.target.value as ThemeName;
+        console.log('Theme selection changed:', newTheme);
+        setTheme(newTheme);
+    };
+
 
     return (
         <HeaderContainer>
-            <ThemeSelect value={currentTheme} onChange={(e) => setTheme(e.target.value as any)}>
+            <ThemeSelect value={currentTheme} onChange={handleThemeChange}>
                 <option value="main">Day</option>
                 <option value="night">Night</option>
                 <option value="forest">Forest</option>
@@ -34,5 +49,8 @@ const Header: React.FC<HeaderProps> = ({onThemeChange}) => {
         </HeaderContainer>
     );
 };
+// Log when the component is defined
+console.log('Header component defined');
+
 
 export default Header;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/InputArea.tsx b/webapp/chat-app/src/components/InputArea.tsx
index 901c0b0a..cf0f79b5 100644
--- a/webapp/chat-app/src/components/InputArea.tsx
+++ b/webapp/chat-app/src/components/InputArea.tsx
@@ -22,21 +22,33 @@ interface InputAreaProps {
 
 const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
     const [message, setMessage] = useState('');
+    console.log('[InputArea] Rendering with message:', message);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
+        console.log('[InputArea] Form submitted with message:', message);
         if (message.trim()) {
+            console.log('[InputArea] Sending message:', message);
             onSendMessage(message);
             setMessage('');
+            console.log('[InputArea] Message sent and input cleared');
+        } else {
+            console.log('[InputArea] Empty message, not sending');
         }
     };
+    const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newMessage = e.target.value;
+        console.log('[InputArea] Message changed:', newMessage);
+        setMessage(newMessage);
+    };
+
 
     return (
         <InputContainer>
             <form onSubmit={handleSubmit}>
                 <TextArea
                     value={message}
-                    onChange={(e) => setMessage(e.target.value)}
+                    onChange={handleMessageChange}
                     placeholder="Type a message..."
                     rows={3}
                 />
@@ -45,5 +57,8 @@ const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
         </InputContainer>
     );
 };
+// Log when component is imported
+console.log('[InputArea] Component loaded');
+
 
-export default InputArea;
+export default InputArea;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Layout/index.tsx b/webapp/chat-app/src/components/Layout/index.tsx
index 6b341ca3..5509e582 100644
--- a/webapp/chat-app/src/components/Layout/index.tsx
+++ b/webapp/chat-app/src/components/Layout/index.tsx
@@ -18,7 +18,20 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  return (
+    // Log when component mounts
+    React.useEffect(() => {
+        console.log('[Layout] Component mounted');
+        return () => {
+            console.log('[Layout] Component will unmount');
+        };
+    }, []);
+    // Log when children prop changes
+    React.useEffect(() => {
+        console.log('[Layout] Children updated:', {children});
+    }, [children]);
+    console.log('[Layout] Rendering component');
+
+    return (
     <LayoutContainer>
       {/* Toolbar will go here */}
       {/* Menubar will go here */}
diff --git a/webapp/chat-app/src/components/Menu/Menu.tsx b/webapp/chat-app/src/components/Menu/Menu.tsx
index 146ed280..e0394831 100644
--- a/webapp/chat-app/src/components/Menu/Menu.tsx
+++ b/webapp/chat-app/src/components/Menu/Menu.tsx
@@ -21,11 +21,19 @@ const ToolbarLeft = styled.div`
     gap: ${({theme}) => theme.sizing.spacing.md};
 `;
 
+// BUG: This component does not open the dropdown menu
 const Dropdown = styled.div`
-    position: relative;
-    display: inline-block;
+    color: ${({theme}) => theme.colors.text.primary};
+    padding: ${({theme}) => theme.sizing.spacing.sm};
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ${({theme}) => theme.colors.primary};
+        color: white;
+    }
 
-    &:hover .dropdown-content {
+    &:hover .div {
         display: block;
     }
 `;
@@ -69,17 +77,24 @@ export const Menu: React.FC = () => {
     const [, setTheme] = useTheme();
 
     const handleThemeChange = (theme: ThemeName) => {
+        console.log(`Theme changed to: ${theme}`);
         setTheme(theme);
     };
 
     const handleModalOpen = (modalType: string) => {
+        console.log(`Opening modal: ${modalType}`);
         dispatch(showModal(modalType));
     };
 
+    const handleLogout = () => {
+        console.log('User logging out');
+    };
+
+
     return (
         <MenuContainer>
             <ToolbarLeft>
-                <DropButton href="/">
+                <DropButton href="/" onClick={() => console.log('Navigating to home')}>
                     <FontAwesomeIcon icon={faHome}/> Home
                 </DropButton>
 
@@ -87,12 +102,12 @@ export const Menu: React.FC = () => {
                     <DropButton>App</DropButton>
                     <DropdownContent>
                         <DropdownItem onClick={() => handleModalOpen('sessions')}>Session List</DropdownItem>
-                        <DropdownItem href="">New</DropdownItem>
+                        <DropdownItem onClick={() => console.log('Creating new session')}>New</DropdownItem>
                     </DropdownContent>
                 </Dropdown>
 
                 <Dropdown>
-                    <DropButton>
+                    <DropButton onClick={() => console.log('Session menu clicked')}>
                         <FontAwesomeIcon icon={faCog}/> Session
                     </DropButton>
                     <DropdownContent>
@@ -110,7 +125,7 @@ export const Menu: React.FC = () => {
                 <ThemeMenu/>
 
                 <Dropdown>
-                    <DropButton>About</DropButton>
+                    <DropButton onClick={() => console.log('About menu clicked')}>About</DropButton>
                     <DropdownContent>
                         <DropdownItem onClick={() => handleModalOpen('privacy')}>Privacy Policy</DropdownItem>
                         <DropdownItem onClick={() => handleModalOpen('tos')}>Terms of Service</DropdownItem>
@@ -119,13 +134,13 @@ export const Menu: React.FC = () => {
             </ToolbarLeft>
 
             <Dropdown>
-                <DropButton>
+                <DropButton onClick={() => console.log('Login menu clicked')}>
                     <FontAwesomeIcon icon={faSignInAlt}/> Login
                 </DropButton>
                 <DropdownContent>
                     <DropdownItem onClick={() => handleModalOpen('user-settings')}>Settings</DropdownItem>
                     <DropdownItem onClick={() => handleModalOpen('user-usage')}>Usage</DropdownItem>
-                    <DropdownItem>
+                    <DropdownItem onClick={handleLogout}>
                         <FontAwesomeIcon icon={faSignOutAlt}/> Logout
                     </DropdownItem>
                 </DropdownContent>
diff --git a/webapp/chat-app/src/components/Menu/ThemeMenu.tsx b/webapp/chat-app/src/components/Menu/ThemeMenu.tsx
index f76e1742..3a2f1939 100644
--- a/webapp/chat-app/src/components/Menu/ThemeMenu.tsx
+++ b/webapp/chat-app/src/components/Menu/ThemeMenu.tsx
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import {useTheme} from '../../hooks/useTheme';
 import {themes} from '../../themes/themes';
 
+const LOG_PREFIX = '[ThemeMenu]';
+
 const ThemeMenuContainer = styled.div`
     position: relative;
     display: inline-block;
@@ -52,29 +54,42 @@ const ThemeOption = styled.button`
 export const ThemeMenu: React.FC = () => {
     const [currentTheme, setTheme] = useTheme();
     const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+        console.log(`${LOG_PREFIX} Current theme:`, currentTheme);
+    }, [currentTheme]);
+
 
     const handleThemeChange = (themeName: keyof typeof themes) => {
+        console.log(`${LOG_PREFIX} Changing theme from ${currentTheme} to ${themeName}`);
         setTheme(themeName);
         setIsOpen(false);
     };
+    const handleMenuToggle = () => {
+        console.log(`${LOG_PREFIX} Theme menu ${!isOpen ? 'opening' : 'closing'}`);
+        setIsOpen(!isOpen);
+    };
+
 
     return (
         <ThemeMenuContainer>
-            <ThemeButton onClick={() => setIsOpen(!isOpen)}>
+            <ThemeButton onClick={handleMenuToggle}>
                 Theme: {currentTheme}
             </ThemeButton>
             {isOpen && (
                 <ThemeList>
-                    {Object.keys(themes).map((themeName) => (
-                        <ThemeOption
-                            key={themeName}
-                            onClick={() => handleThemeChange(themeName as keyof typeof themes)}
-                        >
-                            {themeName}
-                        </ThemeOption>
-                    ))}
+                    {Object.keys(themes).map((themeName) => {
+                        console.log(`${LOG_PREFIX} Rendering theme option:`, themeName);
+                        return (
+                            <ThemeOption
+                                key={themeName}
+                                onClick={() => handleThemeChange(themeName as keyof typeof themes)}
+                            >
+                                {themeName}
+                            </ThemeOption>
+                        );
+                    })}
                 </ThemeList>
             )}
         </ThemeMenuContainer>
     );
-};
+};
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Menu/index.ts b/webapp/chat-app/src/components/Menu/index.ts
index 1671a9ff..5de4a223 100644
--- a/webapp/chat-app/src/components/Menu/index.ts
+++ b/webapp/chat-app/src/components/Menu/index.ts
@@ -1 +1,8 @@
-export {ThemeMenu} from './ThemeMenu';
+// Logging utility for menu components
+const logMenuComponent = (componentName: string) => {
+    console.log(`Menu Component Loaded: ${componentName}`);
+};
+
+// Log when ThemeMenu is imported
+logMenuComponent('ThemeMenu');
+export {ThemeMenu} from './ThemeMenu';
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/MessageList.tsx b/webapp/chat-app/src/components/MessageList.tsx
index e2fa5fdf..68abe420 100644
--- a/webapp/chat-app/src/components/MessageList.tsx
+++ b/webapp/chat-app/src/components/MessageList.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import {useSelector} from 'react-redux';
 import {RootState} from '../store';
+import {logger} from '../utils/logger';
 
 const MessageListContainer = styled.div`
   flex: 1;
@@ -31,17 +32,32 @@ const MessageItem = styled.div<{ type: 'user' | 'system' | 'response' }>`
 `;
 
 const MessageList: React.FC = () => {
+  logger.component('MessageList', 'Rendering component');
+  // Log when component is mounted/unmounted
+  React.useEffect(() => {
+    logger.component('MessageList', 'Component mounted');
+    return () => {
+      logger.component('MessageList', 'Component unmounted');
+    };
+  }, []);
   const messages = useSelector((state: RootState) => state.messages.messages);
+  React.useEffect(() => {
+    logger.debug('MessageList - Messages updated', messages);
+  }, [messages]);
 
   return (
     <MessageListContainer>
-      {messages.map((message) => (
+      {messages.map((message) => {
+        logger.debug('MessageList - Rendering message', message);
+        return (
           <MessageItem key={`${message.id}-${message.timestamp}`} type={message.type}>
-          {message.content}
-        </MessageItem>
-      ))}
+            {message.content}
+          </MessageItem>
+        );
+      })}
     </MessageListContainer>
   );
 };
 
+
 export default MessageList;
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Tabs/index.tsx b/webapp/chat-app/src/components/Tabs/index.tsx
index 98cc85b6..7cb0535d 100644
--- a/webapp/chat-app/src/components/Tabs/index.tsx
+++ b/webapp/chat-app/src/components/Tabs/index.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
-import { DefaultTheme } from 'styled-components';
+import React, {useEffect} from 'react';
+import styled, {DefaultTheme} from 'styled-components';
 
 const TabContainer = styled.div`
   display: flex;
@@ -30,22 +29,44 @@ interface TabsProps {
 }
 
 const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange, children }) => {
+  // Log when component mounts or updates
+  useEffect(() => {
+    console.log('Tabs component mounted/updated with:', {
+      tabsCount: tabs.length,
+      activeTab,
+      availableTabs: tabs.map(t => t.id)
+    });
+    return () => {
+      console.log('Tabs component unmounting');
+    };
+  }, [tabs, activeTab]);
+  const handleTabClick = (tabId: string) => {
+    console.log('Tab clicked:', tabId);
+    onTabChange(tabId);
+  };
+
   return (
     <TabContainer>
       <TabList>
-        {tabs.map(tab => (
+        {tabs.map(tab => {
+          console.log('Rendering tab:', tab.id, 'active:', activeTab === tab.id);
+          return (
           <TabButton
             key={tab.id}
             active={activeTab === tab.id}
-            onClick={() => onTabChange(tab.id)}
+            onClick={() => handleTabClick(tab.id)}
           >
             {tab.label}
           </TabButton>
-        ))}
+          )
+        })}
       </TabList>
       {children}
     </TabContainer>
   );
 };
+// Add component display name for better debugging
+Tabs.displayName = 'Tabs';
+
 
 export default Tabs;
\ No newline at end of file
diff --git a/webapp/chat-app/src/hooks/index.ts b/webapp/chat-app/src/hooks/index.ts
index eeb6a0e5..b5263fbe 100644
--- a/webapp/chat-app/src/hooks/index.ts
+++ b/webapp/chat-app/src/hooks/index.ts
@@ -1 +1,7 @@
-export { useWebSocket } from './useWebSocket';
\ No newline at end of file
+import {logger} from '../utils/logger';
+
+// Export hooks with debug logging
+logger.debug('Loading hooks from hooks/index.ts');
+
+export { useWebSocket } from './useWebSocket';
+logger.debug('Finished loading hooks');
\ No newline at end of file
diff --git a/webapp/chat-app/src/hooks/useTheme.ts b/webapp/chat-app/src/hooks/useTheme.ts
index 0c3a059d..54e917bf 100644
--- a/webapp/chat-app/src/hooks/useTheme.ts
+++ b/webapp/chat-app/src/hooks/useTheme.ts
@@ -5,23 +5,31 @@ import {setTheme} from '../store/slices/uiSlice';
 import {RootState} from '../store';
 
 export const useTheme = (initialTheme?: ThemeName): [ThemeName, (theme: ThemeName) => void] => {
-  const dispatch = useDispatch();
+    console.log('useTheme hook initialized with:', {initialTheme});
+
+    const dispatch = useDispatch();
   const currentTheme = useSelector((state: RootState) => state.ui.theme);
+    console.log('Current theme from state:', currentTheme);
 
     const updateTheme = useCallback(
         (newTheme: ThemeName) => {
+            console.log('Updating theme to:', newTheme);
             dispatch(setTheme(newTheme));
             localStorage.setItem('theme', newTheme);
+            console.log('Theme updated in localStorage');
         },
         [dispatch]
     );
 
     // Use initialTheme if provided and no theme is set in state
   React.useEffect(() => {
+      console.log('Theme effect running with:', {initialTheme, currentTheme});
     if (initialTheme && !currentTheme) {
+        console.log('Setting initial theme:', initialTheme);
       updateTheme(initialTheme);
     }
   }, [initialTheme, currentTheme, updateTheme]);
+    console.log('useTheme hook returning:', {currentTheme});
 
   return [currentTheme, updateTheme];
-};
+};
\ No newline at end of file
diff --git a/webapp/chat-app/src/hooks/useWebSocket.ts b/webapp/chat-app/src/hooks/useWebSocket.ts
index 1d83f3da..eaa433c2 100644
--- a/webapp/chat-app/src/hooks/useWebSocket.ts
+++ b/webapp/chat-app/src/hooks/useWebSocket.ts
@@ -5,23 +5,35 @@ export const useWebSocket = (sessionId: string) => {
     const [isConnected, setIsConnected] = useState(false);
 
     useEffect(() => {
+        console.log(`[WebSocket] Initializing with sessionId: ${sessionId}`);
+
         const handleConnection = () => {
+            console.log('[WebSocket] Connected successfully');
             setIsConnected(true);
         };
+
         const handleDisconnection = () => {
+            console.log('[WebSocket] Disconnected');
             setIsConnected(false);
         };
+
         WebSocketService.addMessageHandler(handleConnection);
+        WebSocketService.addMessageHandler(handleDisconnection);
         WebSocketService.connect(sessionId);
 
         return () => {
+            console.log('[WebSocket] Cleaning up connection');
             WebSocketService.removeMessageHandler(handleConnection);
+            WebSocketService.removeMessageHandler(handleDisconnection);
             WebSocketService.disconnect();
         };
     }, [sessionId]);
 
     return {
-        send: (message: string) => WebSocketService.send(message),
+        send: (message: string) => {
+            console.log('[WebSocket] Sending message:', message);
+            return WebSocketService.send(message);
+        },
         isConnected
     };
 };
\ No newline at end of file
diff --git a/webapp/chat-app/src/index.js b/webapp/chat-app/src/index.js
index 87a4b309..8e83ecac 100644
--- a/webapp/chat-app/src/index.js
+++ b/webapp/chat-app/src/index.js
@@ -3,17 +3,35 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+// Log application startup
+console.log('Starting Chat Application...');
+
 
 if (typeof document !== 'undefined') {
+  console.log('Initializing React root element');
   const root = ReactDOM.createRoot(document.getElementById('root'));
+  try {
   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
+    console.log('React application successfully rendered');
+  } catch (error) {
+    console.error('Failed to render React application:', error);
+  }
+} else {
+  console.warn('Document is undefined - application may be running in a non-browser environment');
 }
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
\ No newline at end of file
+reportWebVitals((metric) => {
+  console.log('Web Vital:', {
+    name: metric.name,
+    value: metric.value,
+    rating: metric.rating,
+    delta: metric.delta
+  });
+});
\ No newline at end of file
diff --git a/webapp/chat-app/src/index.tsx b/webapp/chat-app/src/index.tsx
index 61ce8cd3..485fbb91 100644
--- a/webapp/chat-app/src/index.tsx
+++ b/webapp/chat-app/src/index.tsx
@@ -5,12 +5,26 @@ import App from './App';
 import {store} from './store';
 import './index.css';
 
+console.log('Application initializing...');
+
+
 const rootElement = document.getElementById('root');
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) {
+  console.error('Failed to find root element in DOM');
+  throw new Error('Failed to find the root element');
+}
+
 const root = createRoot(rootElement);
+console.log('React root created successfully');
+try {
 
 root.render(
   <Provider store={store}>
     <App />
   </Provider>
-);
\ No newline at end of file
+);
+  console.log('Application rendered successfully');
+} catch (error) {
+  console.error('Failed to render application:', error);
+  throw error;
+}
\ No newline at end of file
diff --git a/webapp/chat-app/src/services/websocket.ts b/webapp/chat-app/src/services/websocket.ts
index 3a5c47b8..e2e7618d 100644
--- a/webapp/chat-app/src/services/websocket.ts
+++ b/webapp/chat-app/src/services/websocket.ts
@@ -20,6 +20,7 @@ export class WebSocketService {
 
   connect(sessionId: string): void {
     try {
+      console.log(`[WebSocket] Initiating connection with sessionId: ${sessionId}`);
       // Clear any existing connection timeout
       if (this.connectionTimeout) {
         clearTimeout(this.connectionTimeout);
@@ -29,62 +30,79 @@ export class WebSocketService {
       const path = this.getWebSocketPath();
       // Only create new connection if not already connected or reconnecting
       if (!this.isConnected() && !this.isReconnecting) {
+        const wsUrl = `${this.protocol}//${this.host}:${this.port}${path}ws?sessionId=${sessionId}`;
+        console.log(`[WebSocket] Connecting to: ${wsUrl}`);
         this.ws = new WebSocket(
-            `${this.protocol}//${this.host}:${this.port}${path}ws?sessionId=${sessionId}`
+            wsUrl
         );
         this.setupEventHandlers();
         // Set connection timeout
         this.connectionTimeout = setTimeout(() => {
           if (this.ws?.readyState !== WebSocket.OPEN) {
+            console.warn('[WebSocket] Connection timeout reached, attempting to reconnect');
             this.ws?.close();
             this.attemptReconnect();
           }
         }, 5000);
       }
     } catch (error) {
-      console.error('WebSocket connection error:', error);
+      console.error('[WebSocket] Connection error:', error);
       this.attemptReconnect();
     }
   }
 
   removeMessageHandler(handler: (data: any) => void): void {
+    const handlersBeforeRemoval = this.messageHandlers.length;
     this.messageHandlers = this.messageHandlers.filter((h) => h !== handler);
+    const handlersAfterRemoval = this.messageHandlers.length;
+    console.log(`[WebSocket] Message handler removed. Handlers count: ${handlersAfterRemoval}`);
   }
 
   addMessageHandler(handler: (data: any) => void): void {
     this.messageHandlers.push(handler);
+    console.log(`[WebSocket] New message handler added. Handlers count: ${this.messageHandlers.length}`);
   }
 
   disconnect(): void {
     if (this.ws) {
+      console.log('[WebSocket] Initiating disconnect');
       if (this.connectionTimeout) {
         clearTimeout(this.connectionTimeout);
       }
       this.isReconnecting = false;
       this.ws.close();
       this.ws = null;
+      console.log('[WebSocket] Disconnected successfully');
     }
   }
 
   send(message: string): void {
     if (this.ws?.readyState === WebSocket.OPEN) {
+      console.debug('[WebSocket] Sending message:', message.substring(0, 100) + (message.length > 100 ? '...' : ''));
       this.ws.send(message);
+    } else {
+      console.warn('[WebSocket] Cannot send message - connection not open');
     }
   }
 
   private getWebSocketPath(): string {
     const path = window.location.pathname;
     const strings = path.split('/');
-    return strings.length >= 2 && strings[1] !== '' && strings[1] !== 'index.html'
+    const wsPath = strings.length >= 2 && strings[1] !== '' && strings[1] !== 'index.html'
       ? '/' + strings[1] + '/'
       : '/';
+    console.debug(`[WebSocket] Calculated WebSocket path: ${wsPath}`);
+    return wsPath;
   }
 
   private setupEventHandlers(): void {
-    if (!this.ws) return;
+    if (!this.ws) {
+      console.warn('[WebSocket] Cannot setup event handlers - no WebSocket instance');
+      return;
+    }
 
     this.ws.onopen = () => {
-      console.log('WebSocket connected');
+      console.log('[WebSocket] Connection established successfully');
       this.reconnectAttempts = 0;
       this.isReconnecting = false;
       if (this.connectionTimeout) {
@@ -92,18 +110,22 @@ export class WebSocketService {
       }
     };
     this.ws.onmessage = (event) => {
+      console.debug('[WebSocket] Message received:',
+          typeof event.data === 'string'
+              ? event.data.substring(0, 100) + (event.data.length > 100 ? '...' : '')
+              : 'Binary data');
       this.messageHandlers.forEach((handler) => handler(event.data));
     };
 
     this.ws.onclose = () => {
-      console.log('WebSocket disconnected');
+      console.log('[WebSocket] Connection closed');
       if (!this.isReconnecting) {
         this.attemptReconnect();
       }
     };
 
     this.ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
+      console.error('[WebSocket] Error occurred:', error);
       if (this.ws?.readyState !== WebSocket.OPEN) {
         this.attemptReconnect();
       }
@@ -114,15 +136,17 @@ export class WebSocketService {
     if (this.isReconnecting) return;
 
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.error('Max reconnection attempts reached');
+      console.error(`[WebSocket] Max reconnection attempts (${this.maxReconnectAttempts}) reached`);
       return;
     }
     this.isReconnecting = true;
+    const delay = Math.min(1000 * Math.pow(1.5, this.reconnectAttempts), 30000);
+    console.log(`[WebSocket] Attempting reconnect #${this.reconnectAttempts + 1} in ${delay}ms`);
 
     setTimeout(() => {
       this.reconnectAttempts++;
       this.connect(this.sessionId);
-    }, Math.min(1000 * Math.pow(1.5, this.reconnectAttempts), 30000));
+    }, delay);
   }
 }
 
diff --git a/webapp/chat-app/src/setupTests.js b/webapp/chat-app/src/setupTests.js
index 8f2609b7..0dae9d5d 100644
--- a/webapp/chat-app/src/setupTests.js
+++ b/webapp/chat-app/src/setupTests.js
@@ -3,3 +3,36 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+// Store original console methods
+const originalConsole = {
+    log: console.log,
+    error: console.error,
+    warn: console.warn,
+    info: console.info,
+};
+// Custom formatter for test console output
+const formatTestOutput = (type, ...args) => {
+    return `[TEST ${type.toUpperCase()}] ${args.join(' ')}`;
+};
+// Override console methods for tests
+beforeAll(() => {
+    console.log = (...args) => {
+        originalConsole.log(formatTestOutput('log', ...args));
+    };
+    console.error = (...args) => {
+        originalConsole.error(formatTestOutput('error', ...args));
+    };
+    console.warn = (...args) => {
+        originalConsole.warn(formatTestOutput('warn', ...args));
+    };
+    console.info = (...args) => {
+        originalConsole.info(formatTestOutput('info', ...args));
+    };
+});
+// Restore original console methods after tests
+afterAll(() => {
+    console.log = originalConsole.log;
+    console.error = originalConsole.error;
+    console.warn = originalConsole.warn;
+    console.info = originalConsole.info;
+});
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/Provider.tsx b/webapp/chat-app/src/store/Provider.tsx
index f8f945da..26ba80d7 100644
--- a/webapp/chat-app/src/store/Provider.tsx
+++ b/webapp/chat-app/src/store/Provider.tsx
@@ -1,13 +1,24 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { store } from './index';
+import React, {useEffect} from 'react';
+import {Provider} from 'react-redux';
+import {store} from './index';
 
 interface StoreProviderProps {
   children: React.ReactNode;
 }
 
 export const StoreProvider: React.FC<StoreProviderProps> = ({ children }) => {
+  useEffect(() => {
+    console.log('[StoreProvider] Mounted');
+    return () => {
+      console.log('[StoreProvider] Unmounted');
+    };
+  }, []);
+  console.log('[StoreProvider] Rendering');
+
   return <Provider store={store}>{children}</Provider>;
 };
+// Log store initialization
+console.log('[StoreProvider] Module initialized, store:', store);
+
 
 export default StoreProvider;
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/index.ts b/webapp/chat-app/src/store/index.ts
index 7d43ce9c..3c23dc05 100644
--- a/webapp/chat-app/src/store/index.ts
+++ b/webapp/chat-app/src/store/index.ts
@@ -1,8 +1,19 @@
-import { configureStore } from '@reduxjs/toolkit';
+import {configureStore} from '@reduxjs/toolkit';
 import configReducer from './slices/configSlice';
 import messageReducer from './slices/messageSlice';
 import uiReducer from './slices/uiSlice';
 import userReducer from './slices/userSlice';
+import {Middleware} from 'redux';
+// Custom middleware for logging actions and state changes
+const logger: Middleware = (store) => (next) => (action) => {
+  console.group(`Redux Action: ${action.type}`);
+  console.log('Previous State:', store.getState());
+  console.log('Action:', action);
+  const result = next(action);
+  console.log('Next State:', store.getState());
+  console.groupEnd();
+  return result;
+};
 
 export const store = configureStore({
   reducer: {
@@ -11,6 +22,11 @@ export const store = configureStore({
     messages: messageReducer,
     user: userReducer,
   },
+  middleware: (getDefaultMiddleware) =>
+      process.env.NODE_ENV === 'development'
+          ? getDefaultMiddleware().concat(logger)
+          : getDefaultMiddleware(),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/slices/configSlice.ts b/webapp/chat-app/src/store/slices/configSlice.ts
index fec5cbf8..661f1d3f 100644
--- a/webapp/chat-app/src/store/slices/configSlice.ts
+++ b/webapp/chat-app/src/store/slices/configSlice.ts
@@ -7,6 +7,12 @@ const initialState: AppConfig = {
   loadImages: true,
   showMenubar: true,
   applicationName: 'Chat App',
+  logging: {
+    enabled: true,
+    level: 'info',
+    maxEntries: 1000,
+    persistLogs: false
+  }
 };
 
 const configSlice = createSlice({
@@ -14,21 +20,46 @@ const configSlice = createSlice({
   initialState,
   reducers: {
     updateConfig: (state: AppConfig, action: PayloadAction<Partial<AppConfig>>) => {
+      console.log('Updating config:', {
+        current: state,
+        updates: action.payload,
+        new: {...state, ...action.payload}
+      });
       return { ...state, ...action.payload };
     },
     toggleSingleInput: (state: AppConfig) => {
+      console.log('Toggling single input:', {
+        current: state.singleInput,
+        new: !state.singleInput
+      });
       state.singleInput = !state.singleInput;
     },
     toggleStickyInput: (state: AppConfig) => {
+      console.log('Toggling sticky input:', {
+        current: state.stickyInput,
+        new: !state.stickyInput
+      });
       state.stickyInput = !state.stickyInput;
     },
     toggleLoadImages: (state: AppConfig) => {
+      console.log('Toggling load images:', {
+        current: state.loadImages,
+        new: !state.loadImages
+      });
       state.loadImages = !state.loadImages;
     },
     toggleMenubar: (state: AppConfig) => {
+      console.log('Toggling menubar:', {
+        current: state.showMenubar,
+        new: !state.showMenubar
+      });
       state.showMenubar = !state.showMenubar;
     },
     setApplicationName: (state: AppConfig, action: PayloadAction<string>) => {
+      console.log('Setting application name:', {
+        current: state.applicationName,
+        new: action.payload
+      });
       state.applicationName = action.payload;
     },
   },
@@ -43,4 +74,4 @@ export const {
   setApplicationName,
 } = configSlice.actions;
 
-export default configSlice.reducer;
+export default configSlice.reducer;
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/slices/messageSlice.ts b/webapp/chat-app/src/store/slices/messageSlice.ts
index b64166bd..95790dbc 100644
--- a/webapp/chat-app/src/store/slices/messageSlice.ts
+++ b/webapp/chat-app/src/store/slices/messageSlice.ts
@@ -20,38 +20,56 @@ const messageSlice = createSlice({
   initialState,
   reducers: {
     addMessage: (state: MessageState, action: PayloadAction<Message>) => {
+      console.log('Adding message:', action.payload);
       state.messages.push(action.payload);
+      console.log('Updated messages state:', state.messages);
     },
     updateMessage: (state: MessageState, action: PayloadAction<{ id: string; updates: Partial<Message> }>) => {
       const { id, updates } = action.payload;
+      console.log('Updating message:', id, 'with updates:', updates);
       const messageIndex = state.messages.findIndex((msg: Message) => msg.id === id);
       if (messageIndex !== -1) {
         state.messages[messageIndex] = { ...state.messages[messageIndex], ...updates };
+        console.log('Message updated successfully');
+      } else {
+        console.warn('Message not found for update:', id);
       }
     },
     deleteMessage: (state: MessageState, action: PayloadAction<string>) => {
+      console.log('Deleting message:', action.payload);
       state.messages = state.messages.filter((msg: Message) => msg.id !== action.payload);
+      console.log('Updated messages after deletion:', state.messages);
     },
     addToPendingMessages: (state: MessageState, action: PayloadAction<Message>) => {
+      console.log('Adding pending message:', action.payload);
       state.pendingMessages.push(action.payload);
+      console.log('Updated pending messages:', state.pendingMessages);
     },
     removePendingMessage: (state: MessageState, action: PayloadAction<string>) => {
+      console.log('Removing pending message:', action.payload);
       state.pendingMessages = state.pendingMessages.filter((msg: Message) => msg.id !== action.payload);
+      console.log('Updated pending messages:', state.pendingMessages);
     },
     addToMessageQueue: (state, action: PayloadAction<Message>) => {
+      console.log('Adding message to queue:', action.payload);
       state.messageQueue.push(action.payload);
+      console.log('Updated message queue:', state.messageQueue);
     },
     clearMessageQueue: (state: MessageState) => {
+      console.log('Clearing message queue');
       state.messageQueue = [];
     },
     setProcessing: (state: MessageState, action: PayloadAction<boolean>) => {
+      console.log('Setting processing state:', action.payload);
       state.isProcessing = action.payload;
     },
     clearMessages: (state: MessageState) => {
+      console.log('Clearing all messages and states');
       state.messages = [];
       state.pendingMessages = [];
       state.messageQueue = [];
       state.isProcessing = false;
+      console.log('All states cleared');
     },
   },
 });
@@ -68,4 +86,4 @@ export const {
   clearMessages,
 } = messageSlice.actions;
 
-export default messageSlice.reducer;
+export default messageSlice.reducer;
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/slices/uiSlice.ts b/webapp/chat-app/src/store/slices/uiSlice.ts
index 4d0cc265..6ddf1375 100644
--- a/webapp/chat-app/src/store/slices/uiSlice.ts
+++ b/webapp/chat-app/src/store/slices/uiSlice.ts
@@ -20,21 +20,29 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     setTheme: (state, action: PayloadAction<ThemeName>) => {
+      console.log('[UI Slice] Setting theme:', action.payload);
       state.theme = action.payload;
     },
     showModal: (state, action: PayloadAction<string>) => {
+      console.log('[UI Slice] Showing modal:', action.payload);
       state.modalOpen = true;
       state.modalType = action.payload;
     },
     hideModal: (state) => {
+      console.log('[UI Slice] Hiding modal');
       state.modalOpen = false;
       state.modalType = null;
     },
     toggleVerbose: (state) => {
+      const newVerboseState = !state.verboseMode;
+      console.log('[UI Slice] Toggling verbose mode:', newVerboseState);
       state.verboseMode = !state.verboseMode;
     }
   },
 });
 
 export const {setTheme, showModal, hideModal, toggleVerbose} = uiSlice.actions;
+// Add debug logging for initial state
+console.log('[UI Slice] Initialized with state:', initialState);
+
 export default uiSlice.reducer;
\ No newline at end of file
diff --git a/webapp/chat-app/src/store/slices/userSlice.ts b/webapp/chat-app/src/store/slices/userSlice.ts
index cfc94857..efaedda2 100644
--- a/webapp/chat-app/src/store/slices/userSlice.ts
+++ b/webapp/chat-app/src/store/slices/userSlice.ts
@@ -6,29 +6,45 @@ const initialState: UserInfo = {
   isAuthenticated: false,
   preferences: {},
 };
+// Helper function for logging state changes
+const logStateChange = (actionName: string, prevState: UserInfo, newState: UserInfo) => {
+  console.group(`User State Change: ${actionName}`);
+  console.log('Previous State:', prevState);
+  console.log('New State:', newState);
+  console.groupEnd();
+};
+
 
 const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
     setUser: (state: UserInfo, action: PayloadAction<UserInfo>) => {
-      return { ...state, ...action.payload };
+      const newState = {...state, ...action.payload};
+      logStateChange('setUser', state, newState);
+      return newState;
     },
     login: (state: UserInfo, action: PayloadAction<{ name: string }>) => {
+      const prevState = {...state};
       state.name = action.payload.name;
       state.isAuthenticated = true;
+      logStateChange('login', prevState, state);
     },
     logout: (state: UserInfo) => {
+      const prevState = {...state};
       state.name = '';
       state.isAuthenticated = false;
       state.preferences = {};
+      logStateChange('logout', prevState, state);
     },
     updatePreferences: (state: UserInfo, action: PayloadAction<Record<string, unknown>>) => {
+      const prevState = {...state};
       state.preferences = { ...state.preferences, ...action.payload };
+      logStateChange('updatePreferences', prevState, state);
     },
   },
 });
 
 export const { setUser, login, logout, updatePreferences } = userSlice.actions;
 
-export default userSlice.reducer;
+export default userSlice.reducer;
\ No newline at end of file
diff --git a/webapp/chat-app/src/styled.d.ts b/webapp/chat-app/src/styled.d.ts
index e69de29b..19e513a1 100644
--- a/webapp/chat-app/src/styled.d.ts
+++ b/webapp/chat-app/src/styled.d.ts
@@ -0,0 +1,39 @@
+import 'styled-components';
+// Extend the styled-components DefaultTheme interface
+declare module 'styled-components' {
+    export interface DefaultTheme {
+        // Add console logging related properties
+        logging: {
+            colors: {
+                error: string;
+                warning: string;
+                info: string;
+                debug: string;
+                success: string;
+            };
+            fontSize: {
+                normal: string;
+                large: string;
+            };
+            padding: {
+                message: string;
+            };
+        };
+        // Add other theme properties as needed
+        colors: {
+            primary: string;
+            secondary: string;
+            background: string;
+            text: {
+                primary: string;
+                secondary: string;
+            };
+            border: string;
+            surface: string;
+            error: string;
+            success: string;
+            warning: string;
+            info: string;
+        };
+    }
+}
\ No newline at end of file
diff --git a/webapp/chat-app/src/styles/GlobalStyles.ts b/webapp/chat-app/src/styles/GlobalStyles.ts
index bce68362..01a35986 100644
--- a/webapp/chat-app/src/styles/GlobalStyles.ts
+++ b/webapp/chat-app/src/styles/GlobalStyles.ts
@@ -1,4 +1,13 @@
-import { createGlobalStyle, DefaultTheme } from 'styled-components';
+import {createGlobalStyle, DefaultTheme} from 'styled-components';
+// Log when global styles are being applied
+const logThemeChange = (theme: DefaultTheme) => {
+    console.log('Applying global styles with theme:', {
+        background: theme.colors.background,
+        textColor: theme.colors.text.primary,
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.fontSize.md
+    });
+};
 
 export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
   * {
@@ -8,9 +17,18 @@ export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
   }
 
   body {
-    font-family: ${({ theme }: { theme: DefaultTheme }) => theme.typography.fontFamily};
-    background-color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.background};
-    color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.text.primary};
+      font-family: ${({theme}: { theme: DefaultTheme }) => {
+          logThemeChange(theme);
+          return theme.typography.fontFamily;
+      }};
+      background-color: ${({theme}: { theme: DefaultTheme }) => {
+          console.log('Setting background color:', theme.colors.background);
+          return theme.colors.background;
+      }};
+      color: ${({theme}: { theme: DefaultTheme }) => {
+          console.log('Setting text color:', theme.colors.text.primary);
+          return theme.colors.text.primary;
+      }};
     line-height: 1.5;
     font-size: ${({ theme }: { theme: DefaultTheme }) => theme.typography.fontSize.md};
   }
@@ -28,4 +46,21 @@ export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
   body, button, input, textarea {
     transition: background-color 0.3s ease, color 0.3s ease;
   }
+
+  /* Log when transitions complete */
+  body {
+      &:after {
+          content: '';
+          transition: background-color 0.3s ease;
+          opacity: 0;
+      }
+
+      &.theme-transition-complete:after {
+          opacity: 1;
+          ${() => {
+              console.log('Theme transition completed');
+              return '';
+          }}
+      }
+  }
 `;
\ No newline at end of file
diff --git a/webapp/chat-app/src/themes/ThemeProvider.tsx b/webapp/chat-app/src/themes/ThemeProvider.tsx
index f762b50b..8c46ea5a 100644
--- a/webapp/chat-app/src/themes/ThemeProvider.tsx
+++ b/webapp/chat-app/src/themes/ThemeProvider.tsx
@@ -10,8 +10,18 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const currentTheme = useSelector((state: RootState) => state.ui.theme);
+  console.log('[ThemeProvider] Current theme:', currentTheme);
+
   const theme = themes[currentTheme] || themes.main;
+  if (!themes[currentTheme]) {
+    console.warn('[ThemeProvider] Theme not found:', currentTheme, 'falling back to main theme');
+  }
+  console.debug('[ThemeProvider] Applied theme configuration:', theme);
+
   return <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>;
 };
+// Log available themes on module load
+console.info('[ThemeProvider] Available themes:', Object.keys(themes));
+
 
-export default ThemeProvider;
+export default ThemeProvider;
\ No newline at end of file
diff --git a/webapp/chat-app/src/themes/globalStyles.ts b/webapp/chat-app/src/themes/globalStyles.ts
index 10c7186a..0746d4b2 100644
--- a/webapp/chat-app/src/themes/globalStyles.ts
+++ b/webapp/chat-app/src/themes/globalStyles.ts
@@ -23,6 +23,45 @@ export const GlobalStyle = createGlobalStyle`
       monospace;
   }
 
+  /* Console Logging Styles */
+  .console-log {
+      background-color: #f8f8f8;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      padding: 10px;
+      margin: 5px 0;
+      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+  }
+
+  .console-info {
+      color: #0066cc;
+      border-left: 4px solid #0066cc;
+  }
+
+  .console-warn {
+      color: #ff9900;
+      border-left: 4px solid #ff9900;
+  }
+
+  .console-error {
+      color: #cc0000;
+      border-left: 4px solid #cc0000;
+      background-color: #fff8f8;
+  }
+
+  .console-debug {
+      color: #666666;
+      border-left: 4px solid #666666;
+  }
+
+  .console-success {
+      color: #008800;
+      border-left: 4px solid #008800;
+      background-color: #f8fff8;
+  }
+
   button {
     cursor: pointer;
     border: none;
@@ -37,4 +76,4 @@ export const GlobalStyle = createGlobalStyle`
   input, textarea {
     font-family: inherit;
   }
-`;
+`;
\ No newline at end of file
diff --git a/webapp/chat-app/src/themes/index.ts b/webapp/chat-app/src/themes/index.ts
index 6bbb6900..76efdfd3 100644
--- a/webapp/chat-app/src/themes/index.ts
+++ b/webapp/chat-app/src/themes/index.ts
@@ -1,9 +1,14 @@
 import {themes} from './themes';
+// Log available themes on import
+console.log('Available themes:', Object.keys(themes));
 
 
 export {themes};
 export type {ThemeName} from './themes';
 export const mainTheme = themes.main;
+console.log('Main theme loaded:', themes.main.name);
 export const nightTheme = themes.night;
+console.log('Night theme loaded:', themes.night.name);
 
-// Additional themes will be added here
\ No newline at end of file
+// Additional themes will be added here
+console.log('Theme system initialized');
\ No newline at end of file
diff --git a/webapp/chat-app/src/themes/themes.ts b/webapp/chat-app/src/themes/themes.ts
index a669089c..9a9246c0 100644
--- a/webapp/chat-app/src/themes/themes.ts
+++ b/webapp/chat-app/src/themes/themes.ts
@@ -1,5 +1,13 @@
 // Define theme names
 export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien';
+// Logger for theme operations
+const logTheme = (action: string, themeName: string) => {
+  console.log(`Theme ${action}: ${themeName}`, {
+    timestamp: new Date().toISOString(),
+    theme: themeName
+  });
+};
+
 
 interface ThemeColors {
   primary: string;
@@ -30,6 +38,11 @@ interface ThemeSizing {
     md: string;
     lg: string;
   };
+  console: {
+    minHeight: string;
+    maxHeight: string;
+    padding: string;
+  };
 }
 
 interface ThemeTypography {
@@ -46,6 +59,11 @@ interface ThemeTypography {
     medium: number;
     bold: number;
   };
+  console: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+  };
 }
 
 export interface ExtendedTheme {
@@ -56,6 +74,12 @@ export interface ExtendedTheme {
 }
 
 const baseTheme = {
+  _init() {
+    console.log('Base theme initialized', {
+      spacing: this.sizing.spacing,
+      typography: this.typography.fontSize
+    });
+  },
   sizing: {
     spacing: {
       xs: '0.25rem',
@@ -69,6 +93,11 @@ const baseTheme = {
       md: '0.5rem',
       lg: '1rem',
     },
+    console: {
+      minHeight: '200px',
+      maxHeight: '500px',
+      padding: '1rem',
+    },
   },
   typography: {
     fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
@@ -84,6 +113,11 @@ const baseTheme = {
       medium: 500,
       bold: 700,
     },
+    console: {
+      fontFamily: "'Fira Code', 'Consolas', monospace",
+      fontSize: '0.9rem',
+      lineHeight: '1.5',
+    },
   },
 };
 
@@ -106,6 +140,7 @@ export const mainTheme: ExtendedTheme = {
   },
   ...baseTheme,
 };
+logTheme('initialized', 'main');
 
 export const nightTheme: ExtendedTheme = {
   name: 'night',
@@ -126,6 +161,7 @@ export const nightTheme: ExtendedTheme = {
   },
   ...baseTheme,
 };
+logTheme('initialized', 'night');
 
 export const forestTheme: ExtendedTheme = {
   name: 'forest',
@@ -146,6 +182,7 @@ export const forestTheme: ExtendedTheme = {
   },
   ...baseTheme,
 };
+logTheme('initialized', 'forest');
 
 export const ponyTheme: ExtendedTheme = {
   name: 'pony',
@@ -166,6 +203,7 @@ export const ponyTheme: ExtendedTheme = {
   },
   ...baseTheme,
 };
+logTheme('initialized', 'pony');
 
 export const alienTheme: ExtendedTheme = {
   name: 'alien',
@@ -186,6 +224,7 @@ export const alienTheme: ExtendedTheme = {
   },
   ...baseTheme,
 };
+logTheme('initialized', 'alien');
 
 export const themes = {
   main: mainTheme,
@@ -194,3 +233,13 @@ export const themes = {
   pony: ponyTheme,
   alien: alienTheme,
 };
+// Log available themes on initialization
+console.log('Available themes:', Object.keys(themes));
+// Export a helper function to log theme changes
+export const logThemeChange = (from: ThemeName, to: ThemeName) => {
+  console.log('Theme changed', {
+    from,
+    to,
+    timestamp: new Date().toISOString()
+  });
+};
\ No newline at end of file
diff --git a/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects) b/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects)
new file mode 100644
index 00000000..6f068390
--- /dev/null
+++ b/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects)	
@@ -0,0 +1,36 @@
+export const mainTheme: ExtendedTheme = {
+   name: 'main',
+   colors: {
+     primary: '#007AFF',
+     secondary: '#5856D6',
+     background: '#FFFFFF',
+     surface: '#F2F2F7',
+     text: {
+       primary: '#000000',
+       secondary: '#6E6E73',
+     },
+     border: '#C6C6C8',
+     error: '#FF3B30',
+     success: '#34C759',
+     warning: '#FF9500',
+     info: '#5856D6',
++    console: {
++      background: '#F8F8F8',
++      text: '#2C2C2E',
++      error: '#FF3B30',
++      warning: '#FF9500',
++      success: '#34C759',
++      info: '#007AFF',
++      debug: '#5856D6',
++    },
+   },
+   ...baseTheme,
++  typography: {
++    ...baseTheme.typography,
++    console: {
++      fontFamily: 'Monaco, Consolas, monospace',
++      fontSize: '0.9rem',
++      lineHeight: '1.4',
++    },
++  },
+ };
\ No newline at end of file
diff --git a/webapp/chat-app/src/types.ts b/webapp/chat-app/src/types.ts
index 24d717c7..48ae30c2 100644
--- a/webapp/chat-app/src/types.ts
+++ b/webapp/chat-app/src/types.ts
@@ -1,5 +1,17 @@
 // Define theme names
  export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien';
+// Define log levels
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+// Define log entry interface
+export interface LogEntry {
+    timestamp: number;
+    level: LogLevel;
+    message: string;
+    data?: unknown;
+    source?: string;
+}
+
 
 interface UIState {
   activeTab: string;
@@ -7,6 +19,7 @@ interface UIState {
   modalType: string | null;
   verboseMode: boolean;
   theme: ThemeName;
+    logHistory: LogEntry[];
 }
  // Message type
  export interface Message {
@@ -16,6 +29,7 @@ interface UIState {
    version: string;
    parentId?: string;
    timestamp: number;
+     logLevel?: LogLevel;
  }
  // AppConfig type
  export interface AppConfig {
@@ -24,6 +38,12 @@ interface UIState {
    loadImages: boolean;
    showMenubar: boolean;
    applicationName?: string;
+     logging: {
+         enabled: boolean;
+         level: LogLevel;
+         maxEntries?: number;
+         persistLogs?: boolean;
+     };
  }
  // UserInfo type
  export interface UserInfo {
@@ -35,8 +55,24 @@ interface UIState {
    connected: boolean;
    connecting: boolean;
    error: string | null;
+     lastLog?: LogEntry;
  }
 
+// Logger service interface
+export interface LoggerService {
+    debug(message: string, data?: unknown): void;
+
+    info(message: string, data?: unknown): void;
+
+    warn(message: string, data?: unknown): void;
+
+    error(message: string, data?: unknown): void;
+
+    getHistory(): LogEntry[];
+
+    clearHistory(): void;
+}
+
 // Export types
 export type {
   UIState
diff --git a/webapp/chat-app/src/types/index.ts b/webapp/chat-app/src/types/index.ts
index 1653d176..d39b4dd1 100644
--- a/webapp/chat-app/src/types/index.ts
+++ b/webapp/chat-app/src/types/index.ts
@@ -1,5 +1,25 @@
 // Import theme types
-import { ThemeName } from '../themes/themes';
+import {ThemeName} from '../themes/themes';
+// Console logging levels
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+// Console log entry interface
+export interface LogEntry {
+    timestamp: number;
+    level: LogLevel;
+    message: string;
+    data?: unknown;
+    source?: string;
+}
+
+// Console state interface
+export interface ConsoleState {
+    entries: LogEntry[];
+    visible: boolean;
+    filter: LogLevel[];
+    maxEntries: number;
+}
+
 
 // Message type
 export interface Message {
@@ -9,15 +29,21 @@ export interface Message {
   version: string;
   parentId?: string;
   timestamp: number;
+    logLevel?: LogLevel;
 }
-// AppConfig type 
 
+// AppConfig type 
 export interface AppConfig {
   singleInput: boolean;
   stickyInput: boolean;
   loadImages: boolean;
   showMenubar: boolean;
   applicationName?: string;
+    logging: {
+        enabled: boolean;
+        level: LogLevel;
+        maxEntries: number;
+    };
 }
 // UserInfo type
 
@@ -25,12 +51,14 @@ export interface UserInfo {
   name: string;
   isAuthenticated: boolean;
   preferences?: Record<string, unknown>;
+    debugMode?: boolean;
 }
 
 export interface WebSocketState {
   connected: boolean;
   connecting: boolean;
   error: string | null;
+    lastMessageTimestamp?: number;
 }
 
 export interface UIState {
@@ -39,6 +67,7 @@ export interface UIState {
   modalType: string | null;
   verboseMode: boolean;
   theme: ThemeName;
+    consoleState: ConsoleState;
 }
 
 // Re-export ThemeName as Theme
diff --git a/webapp/chat-app/src/types/styled.d.ts b/webapp/chat-app/src/types/styled.d.ts
index f64696f0..a8deb94a 100644
--- a/webapp/chat-app/src/types/styled.d.ts
+++ b/webapp/chat-app/src/types/styled.d.ts
@@ -16,6 +16,24 @@ declare module 'styled-components' {
       success: string;
       warning: string;
       info: string;
+        console: {
+            background: string;
+            text: string;
+            error: string;
+            warning: string;
+            success: string;
+            info: string;
+            debug: string;
+        };
+        console: {
+            background: string;
+            text: string;
+            error: string;
+            warning: string;
+            success: string;
+            info: string;
+            debug: string;
+        };
     };
     sizing: {
       spacing: {
@@ -30,6 +48,16 @@ declare module 'styled-components' {
         md: string;
         lg: string;
       };
+        console: {
+            minHeight: string;
+            maxHeight: string;
+            padding: string;
+        };
+        console: {
+            minHeight: string;
+            maxHeight: string;
+            padding: string;
+        };
     };
     typography: {
       fontFamily: string;
@@ -45,7 +73,28 @@ declare module 'styled-components' {
         medium: number;
         bold: number;
       };
+        console: {
+            fontFamily: string;
+            fontSize: string;
+            lineHeight: string;
+        };
     };
     name: string;
+      logging?: {
+          colors: {
+              error: string;
+              warning: string;
+              info: string;
+              debug: string;
+              success: string;
+          };
+          fontSize: {
+              normal: string;
+              large: string;
+          };
+          padding: {
+              message: string;
+          };
+      };
   }
 }
\ No newline at end of file
diff --git a/webapp/chat-app/src/utils/logger.ts b/webapp/chat-app/src/utils/logger.ts
new file mode 100644
index 00000000..96f6e494
--- /dev/null
+++ b/webapp/chat-app/src/utils/logger.ts
@@ -0,0 +1,59 @@
+import {LogEntry, LogLevel} from '../types';
+
+class Logger {
+    private static instance: Logger;
+    private logHistory: LogEntry[] = [];
+
+    private constructor() {
+        console.log('Logger initialized');
+    }
+
+    public static getInstance(): Logger {
+        if (!Logger.instance) {
+            Logger.instance = new Logger();
+        }
+        return Logger.instance;
+    }
+
+    private log(level: LogLevel, message: string, data?: unknown): void {
+        const entry: LogEntry = {
+            timestamp: Date.now(),
+            level,
+            message,
+            data
+        };
+
+        this.logHistory.push(entry);
+        console[level](message, data || '');
+    }
+
+    public debug(message: string, data?: unknown): void {
+        this.log('debug', message, data);
+    }
+
+    public info(message: string, data?: unknown): void {
+        this.log('info', message, data);
+    }
+
+    public warn(message: string, data?: unknown): void {
+        this.log('warn', message, data);
+    }
+
+    public error(message: string, data?: unknown): void {
+        this.log('error', message, data);
+    }
+
+    public component(name: string, message: string, data?: unknown): void {
+        this.log('debug', `[${name}] ${message}`, data);
+    }
+
+    public getHistory(): LogEntry[] {
+        return [...this.logHistory];
+    }
+
+    public clearHistory(): void {
+        this.logHistory = [];
+    }
+}
+
+export const logger = Logger.getInstance();
\ No newline at end of file
diff --git a/webapp/chat-app/tsconfig.json b/webapp/chat-app/tsconfig.json
index 24a4fea5..89014d01 100644
--- a/webapp/chat-app/tsconfig.json
+++ b/webapp/chat-app/tsconfig.json
@@ -19,11 +19,6 @@
      "jsx": "react-jsx",
     "skipDefaultLibCheck": true,
      "baseUrl": "src",
-    "plugins": [
-      {
-        "name": "typescript-styled-plugin"
-      }
-    ],
      "paths": {
        "@components/*": ["components/*"],
        "@services/*": ["services/*"],
@@ -32,7 +27,12 @@
        "@types/*": ["types/*"],
        "@themes/*": ["themes/*"],
        "@utils/*": ["utils/*"]
-     }
+     },
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin"
+      }
+    ]
    },
    "include": ["src/**/*"],
   "exclude": ["node_modules", "build", "scripts", "**/*.spec.ts", "**/*.test.ts"]