localhost 5005

src/App.tsx

@@ -2,35 +2,8 @@ import React from 'react';
 import { AgentProvider, useAgent } from './contexts/AgentContext';
 import ChatInterface from './components/ChatInterface';
 import AgentSelector from './components/AgentSelector';
-import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
-
-const theme = createTheme({
-  palette: {
-    mode: 'light',
-    primary: {
-      main: '#7C3AED', // violet
-      light: '#A78BFA',
-      dark: '#5B21B6',
-      contrastText: '#ffffff',
-    },
-    secondary: {
-      main: '#06B6D4', // cyan
-      light: '#67E8F9',
-      dark: '#0E7490',
-      contrastText: '#003543',
-    },
-    background: {
-      default: '#f7f9fc',
-      paper: '#ffffff',
-    },
-  },
-  shape: {
-    borderRadius: 12,
-  },
-  typography: {
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-  },
-});
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import theme from './theme';
 
 function App() {
   return (

src/theme.ts

@@ -0,0 +1,106 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  shape: {
+    borderRadius: 2, // Sharp corners (reduced from default 4)
+  },
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#424242', // Medium grey for primary actions
+      light: '#616161', // Lighter grey for hover states
+      dark: '#212121',  // Darker grey for active states
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: '#757575', // Light grey for secondary actions
+      contrastText: '#ffffff',
+    },
+    background: {
+      default: '#121212', // Very dark grey for main background
+      paper: '#1e1e1e',   // Slightly lighter grey for cards/paper
+    },
+    text: {
+      primary: '#ffffff', // White for primary text
+      secondary: '#b0b0b0', // Light grey for secondary text
+    },
+    divider: 'rgba(255, 255, 255, 0.12)', // Subtle white for dividers
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: '2px',
+          fontWeight: 500,
+          padding: '8px 20px',
+          transition: 'all 0.2s ease-in-out',
+        },
+        contained: {
+          boxShadow: 'none',
+          '&:hover': {
+            transform: 'translateY(-1px)',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+          },
+        },
+        outlined: {
+          borderColor: 'rgba(255, 255, 255, 0.23)',
+          '&:hover': {
+            borderColor: 'rgba(255, 255, 255, 0.5)',
+            backgroundColor: 'rgba(255, 255, 255, 0.04)',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '2px',
+          backgroundImage: 'none',
+          border: '1px solid rgba(255, 255, 255, 0.05)',
+          '&:hover': {
+            boxShadow: '0 8px 16px rgba(0,0,0,0.3)',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: '2px',
+          backgroundImage: 'none',
+          border: '1px solid rgba(255, 255, 255, 0.05)',
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          background: '#1a1a1a',
+          boxShadow: '0 2px 10px rgba(0,0,0,0.3)',
+          borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: 'rgba(255, 255, 255, 0.1)',
+            },
+            '&:hover fieldset': {
+              borderColor: 'rgba(255, 255, 255, 0.3)',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: '#616161',
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default theme;