Spaces:

smolagents
/

ml-intern

Running on CPU Upgrade

App Files Files Community

Henri Bonamy commited on Jan 20

Commit

c1f951a

1 Parent(s): b7bfe6f

improved design

Browse files

Files changed (8) hide show

frontend/index.html +1 -1
frontend/src/components/Chat/ApprovalFlow.tsx +80 -38
frontend/src/components/Chat/ChatInput.tsx +55 -41
frontend/src/components/Chat/MessageBubble.tsx +32 -23
frontend/src/components/CodePanel/CodePanel.tsx +61 -42
frontend/src/components/Layout/AppLayout.tsx +10 -5
frontend/src/components/SessionSidebar/SessionSidebar.tsx +131 -104
frontend/src/theme.ts +84 -44

frontend/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HF Agent</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/hf-log-only-white.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HF Agent</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

frontend/src/components/Chat/ApprovalFlow.tsx CHANGED Viewed

@@ -95,62 +95,104 @@ export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
   const currentTool = pendingApprovals.tools[currentIndex];
   return (
-    <Box sx={{
-      mt: 0,
-      mb: 4,
-      px: 2,
-      width: '100%',
-      alignSelf: 'center'
-    }}>
-      <Typography variant="subtitle2" sx={{ fontFamily: 'monospace', mb: 2, fontWeight: 600 }}>
-        ACTION REQUIRED ({currentIndex + 1}/{pendingApprovals.count}) : The agent wants to execute <Box component="span" sx={{ color: 'primary.main' }}>{currentTool.tool}</Box>
       </Typography>
       <Box component="pre" sx={{
-        bgcolor: 'background.default',
-        p: 1.5,
-        borderRadius: 0.5,
-        fontSize: '0.75rem',
-        fontFamily: 'monospace',
         overflow: 'auto',
-        maxHeight: 150,
-        mb: 2,
-        border: 1,
-        borderColor: 'divider'
       }}>
         {JSON.stringify(currentTool.arguments, null, 2)}
       </Box>
-      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
         <TextField
           fullWidth
           size="small"
-          placeholder="Feedback for rejection (optional)"
           value={feedback}
           onChange={(e) => setFeedback(e.target.value)}
           variant="outlined"
           sx={{
-            flex: 1,
-            '& .MuiOutlinedInput-root': { fontFamily: 'monospace', fontSize: '0.8rem', height: '36px' }
           }}
         />
-        <Button
-          variant="outlined"
-          color="error"
-          onClick={() => handleResolve(false)}
-          sx={{ fontFamily: 'monospace', height: '36px', px: 3 }}
-        >
-          REJECT
-        </Button>
-        <Button
-          variant="contained"
-          color="success"
-          onClick={() => handleResolve(true)}
-          sx={{ color: 'white', fontFamily: 'monospace', height: '36px', px: 3 }}
-        >
-          APPROVE
-        </Button>
       </Box>
     </Box>
   );

   const currentTool = pendingApprovals.tools[currentIndex];
   return (
+    <Box
+      className="action-card"
+      sx={{
+        mt: 2,
+        mb: 4,
+        width: '100%',
+        alignSelf: 'center',
+        padding: '18px',
+        borderRadius: 'var(--radius-md)',
+        background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
+        border: '1px solid rgba(255,255,255,0.03)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+         <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'var(--text)' }}>
+            Approval Required
+         </Typography>
+         <Typography variant="caption" sx={{ color: 'var(--muted-text)' }}>
+            ({currentIndex + 1}/{pendingApprovals.count})
+         </Typography>
+      </Box>
+      <Typography variant="body2" sx={{ color: 'var(--muted-text)' }}>
+        The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>{currentTool.tool}</Box>
       </Typography>
       <Box component="pre" sx={{
+        bgcolor: 'rgba(0,0,0,0.3)',
+        p: 2,
+        borderRadius: '8px',
+        fontSize: '0.8rem',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
         overflow: 'auto',
+        maxHeight: 200,
+        border: '1px solid rgba(255,255,255,0.05)',
+        margin: 0
       }}>
         {JSON.stringify(currentTool.arguments, null, 2)}
       </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <TextField
           fullWidth
           size="small"
+          placeholder="Feedback (optional)"
           value={feedback}
           onChange={(e) => setFeedback(e.target.value)}
           variant="outlined"
           sx={{
+            '& .MuiOutlinedInput-root': {
+                bgcolor: 'rgba(0,0,0,0.2)',
+                fontFamily: 'inherit',
+                fontSize: '0.9rem'
+            }
           }}
         />
+        <Box className="action-buttons" sx={{ display: 'flex', gap: '10px' }}>
+            <Button
+            className="btn-reject"
+            onClick={() => handleResolve(false)}
+            sx={{
+                flex: 1,
+                background: 'transparent',
+                border: '1px solid rgba(255,255,255,0.05)',
+                color: 'var(--accent-red)',
+                padding: '10px 14px',
+                borderRadius: '10px',
+                '&:hover': {
+                    bgcolor: 'rgba(224, 90, 79, 0.05)',
+                    borderColor: 'var(--accent-red)',
+                }
+            }}
+            >
+            Reject
+            </Button>
+            <Button
+            className="btn-approve"
+            onClick={() => handleResolve(true)}
+            sx={{
+                flex: 1,
+                background: 'transparent',
+                border: '1px solid rgba(255,255,255,0.05)',
+                color: 'var(--accent-green)',
+                padding: '10px 14px',
+                borderRadius: '10px',
+                '&:hover': {
+                    bgcolor: 'rgba(47, 204, 113, 0.05)',
+                    borderColor: 'var(--accent-green)',
+                }
+            }}
+            >
+            Approve
+            </Button>
+        </Box>
       </Box>
     </Box>
   );

frontend/src/components/Chat/ChatInput.tsx CHANGED Viewed

@@ -36,26 +36,22 @@ export default function ChatInput({ onSend, disabled = false }: ChatInputProps)
         zIndex: 10,
       }}
     >
-      <Box sx={{ maxWidth: 'md', mx: 'auto', width: '100%', px: 2 }}>
-        {/* Input Label and Divider */}
-        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, gap: 2 }}>
-          <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.secondary', letterSpacing: '0.05em' }}>
-            INPUT
-          </Typography>
-          <Box sx={{ flex: 1, height: '1px', bgcolor: 'divider' }} />
-        </Box>
         <Box
           sx={{
             display: 'flex',
-            gap: 1,
-            alignItems: 'center',
-            bgcolor: 'background.paper',
-            borderRadius: 1,
-            boxShadow: 4,
-            p: 1,
-            border: 1,
-            borderColor: 'divider',
           }}
         >
           <TextField
@@ -65,47 +61,65 @@ export default function ChatInput({ onSend, disabled = false }: ChatInputProps)
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder="Ask anything"
             disabled={disabled}
-            variant="outlined"
-            size="small"
             sx={{
-              '& .MuiOutlinedInput-root': {
-                padding: '9px 12px',
-                lineHeight: '1.4',
-                fontFamily: 'monospace',
-              },
-              '& .MuiInputBase-input': {
-                fontFamily: 'monospace',
-              },
-              '& .MuiOutlinedInput-notchedOutline': {
-                border: 'none',
-              },
             }}
           />
           <IconButton
             onClick={handleSend}
             disabled={disabled || !input.trim()}
             sx={{
-              border: 1,
-              borderColor: 'divider',
-              borderRadius: 1,
-              color: 'text.secondary',
               transition: 'all 0.2s',
               '&:hover': {
-                borderColor: 'primary.main',
-                color: 'primary.main',
-                bgcolor: 'transparent',
               },
               '&.Mui-disabled': {
-                borderColor: 'divider',
-                opacity: 0.5,
               },
             }}
           >
-            {disabled ? <CircularProgress size={24} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
           </IconButton>
         </Box>
       </Box>
     </Box>
   );

         zIndex: 10,
       }}
     >
+      <Box sx={{ maxWidth: '880px', mx: 'auto', width: '100%', px: 2 }}>
         <Box
+          className="composer"
           sx={{
             display: 'flex',
+            gap: '10px',
+            alignItems: 'flex-start',
+            bgcolor: 'rgba(255,255,255,0.01)',
+            borderRadius: 'var(--radius-md)',
+            p: '12px',
+            border: '1px solid rgba(255,255,255,0.03)',
+            transition: 'box-shadow 0.2s ease, border-color 0.2s ease',
+            '&:focus-within': {
+                borderColor: 'var(--accent-yellow)',
+                boxShadow: 'var(--focus)',
+            }
           }}
         >
           <TextField
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
+            placeholder="Ask anything..."
             disabled={disabled}
+            variant="standard"
+            InputProps={{
+                disableUnderline: true,
+                sx: {
+                    color: 'var(--text)',
+                    fontSize: '15px',
+                    fontFamily: 'inherit',
+                    padding: 0,
+                    lineHeight: 1.5,
+                    minHeight: '56px',
+                    alignItems: 'flex-start',
+                }
+            }}
             sx={{
+                flex: 1,
+                '& .MuiInputBase-root': {
+                    p: 0,
+                    backgroundColor: 'transparent',
+                },
+                '& textarea': {
+                    resize: 'none',
+                    padding: '0 !important',
+                }
             }}
           />
           <IconButton
             onClick={handleSend}
             disabled={disabled || !input.trim()}
             sx={{
+              mt: 1,
+              p: 1,
+              borderRadius: '10px',
+              color: 'var(--muted-text)',
               transition: 'all 0.2s',
               '&:hover': {
+                color: 'var(--accent-yellow)',
+                bgcolor: 'rgba(255,255,255,0.05)',
               },
               '&.Mui-disabled': {
+                opacity: 0.3,
               },
             }}
           >
+            {disabled ? <CircularProgress size={20} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
           </IconButton>
         </Box>
+        {/* Powered By Badge */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1.5, gap: 0.8, opacity: 0.5 }}>
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
+            powered by
+          </Typography>
+          <img src="/claude-logo.png" alt="Claude" style={{ height: '12px', objectFit: 'contain' }} />
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--text)', fontWeight: 600, letterSpacing: '0.02em' }}>
+            claude-opus-4-5-20251101
+          </Typography>
+        </Box>
       </Box>
     </Box>
   );

frontend/src/components/Chat/MessageBubble.tsx CHANGED Viewed

@@ -10,12 +10,7 @@ interface MessageBubbleProps {
 export default function MessageBubble({ message }: MessageBubbleProps) {
   const isUser = message.role === 'user';
   const isTool = message.role === 'tool';
-  const getBgColor = () => {
-    if (isUser) return 'background.paper';
-    if (isTool) return 'background.default';
-    return 'transparent';
-  };
   return (
     <Box
@@ -23,18 +18,24 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
         display: 'flex',
         justifyContent: isUser ? 'flex-end' : 'flex-start',
         width: '100%',
       }}
     >
       <Paper
         elevation={0}
         sx={{
-          p: isTool ? 2 : isUser ? 1.5 : 1,
-          maxWidth: isTool ? '100%' : '80%',
           width: isTool ? '100%' : 'auto',
-          bgcolor: getBgColor(),
-          border: (!isUser && !isTool) ? 0 : 1,
-          borderColor: 'divider',
-          borderRadius: isUser ? 2 : undefined,
         }}
       >
         {isTool && (
@@ -57,11 +58,11 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
         {message.trace && message.trace.length > 0 && (
           <Box
             sx={{
-              bgcolor: 'background.default',
               borderRadius: 1,
               p: 1.5,
               border: 1,
-              borderColor: 'divider',
               width: '100%',
               mb: 2,
             }}
@@ -72,7 +73,7 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
                   key={log.id}
                   variant="caption"
                   component="div"
-                  sx={{ color: 'common.white', fontFamily: 'monospace', fontSize: '0.75rem' }}
                 >
                   &gt; {log.text}
                 </Typography>
@@ -83,16 +84,17 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
         <Box
           sx={{
-            '& p': { m: 0 },
             '& pre': {
-              bgcolor: 'background.default',
               p: 1.5,
               borderRadius: 1,
               overflow: 'auto',
               fontSize: '0.85rem',
             },
             '& code': {
-              bgcolor: 'background.default',
               px: 0.5,
               py: 0.25,
               borderRadius: 0.5,
@@ -104,8 +106,11 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
               p: 0,
             },
             '& a': {
-              color: 'inherit',
-              textDecoration: 'underline',
             },
             '& ul, & ol': {
               pl: 2,
@@ -119,20 +124,24 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
             },
             '& th': {
               borderBottom: '1px solid',
-              borderColor: 'divider',
               textAlign: 'left',
               p: 1,
-              bgcolor: 'action.hover',
             },
             '& td': {
               borderBottom: '1px solid',
-              borderColor: 'divider',
               p: 1,
             },
           }}
         >
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
         </Box>
       </Paper>
     </Box>
   );

 export default function MessageBubble({ message }: MessageBubbleProps) {
   const isUser = message.role === 'user';
   const isTool = message.role === 'tool';
+  const isAssistant = message.role === 'assistant';
   return (
     <Box
         display: 'flex',
         justifyContent: isUser ? 'flex-end' : 'flex-start',
         width: '100%',
+        maxWidth: '880px',
+        mx: 'auto',
       }}
     >
       <Paper
         elevation={0}
+        className={`message ${isUser ? 'user' : isAssistant ? 'assistant' : ''}`}
         sx={{
+          p: '14px 18px',
+          margin: '10px 0',
           width: isTool ? '100%' : 'auto',
+          maxWidth: '100%',
+          borderRadius: 'var(--radius-lg)',
+          borderTopLeftRadius: isAssistant ? '6px' : undefined,
+          lineHeight: 1.45,
+          boxShadow: 'var(--shadow-1)',
+          border: '1px solid rgba(255,255,255,0.03)',
+          background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
         }}
       >
         {isTool && (
         {message.trace && message.trace.length > 0 && (
           <Box
             sx={{
+              bgcolor: 'rgba(0,0,0,0.3)',
               borderRadius: 1,
               p: 1.5,
               border: 1,
+              borderColor: 'rgba(255,255,255,0.05)',
               width: '100%',
               mb: 2,
             }}
                   key={log.id}
                   variant="caption"
                   component="div"
+                  sx={{ color: 'var(--muted-text)', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace', fontSize: '0.75rem' }}
                 >
                   &gt; {log.text}
                 </Typography>
         <Box
           sx={{
+            '& p': { m: 0, color: isUser ? 'var(--text)' : 'var(--text)' }, // User might want different text color? Defaults to --text
             '& pre': {
+              bgcolor: 'rgba(0,0,0,0.5)',
               p: 1.5,
               borderRadius: 1,
               overflow: 'auto',
               fontSize: '0.85rem',
+              border: '1px solid rgba(255,255,255,0.05)',
             },
             '& code': {
+              bgcolor: 'rgba(255,255,255,0.05)',
               px: 0.5,
               py: 0.25,
               borderRadius: 0.5,
               p: 0,
             },
             '& a': {
+              color: 'var(--accent-yellow)',
+              textDecoration: 'none',
+              '&:hover': {
+                textDecoration: 'underline',
+              },
             },
             '& ul, & ol': {
               pl: 2,
             },
             '& th': {
               borderBottom: '1px solid',
+              borderColor: 'rgba(255,255,255,0.1)',
               textAlign: 'left',
               p: 1,
+              bgcolor: 'rgba(255,255,255,0.02)',
             },
             '& td': {
               borderBottom: '1px solid',
+              borderColor: 'rgba(255,255,255,0.05)',
               p: 1,
             },
           }}
         >
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
         </Box>
+        <Typography className="meta" variant="caption" sx={{ display: 'block', textAlign: 'right', mt: 1, fontSize: '11px', opacity: 0.5 }}>
+            {new Date(message.timestamp).toLocaleTimeString()}
+        </Typography>
       </Paper>
     </Box>
   );

frontend/src/components/CodePanel/CodePanel.tsx CHANGED Viewed

@@ -10,63 +10,82 @@ export default function CodePanel() {
   const { setRightPanelOpen } = useLayoutStore();
   return (
-    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
-      {/* Header - Always Visible */}
-      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
           {panelContent?.title || 'Code Panel'}
         </Typography>
-        <IconButton size="small" onClick={() => setRightPanelOpen(false)}>
           <CloseIcon fontSize="small" />
         </IconButton>
       </Box>
       {!panelContent ? (
         <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
-          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', opacity: 0.5 }}>
             NO DATA LOADED
           </Typography>
         </Box>
       ) : (
-        <Box sx={{ flex: 1, overflow: 'auto', bgcolor: 'background.default' }}>
-          {panelContent.content ? (
-            panelContent.language === 'python' ? (
-              <SyntaxHighlighter
-                language="python"
-                style={vscDarkPlus}
-                customStyle={{
-                  margin: 0,
-                  padding: '16px',
-                  background: 'transparent',
-                  fontSize: '0.8rem',
-                  fontFamily: '"JetBrains Mono", monospace',
-                }}
-                wrapLines={true}
-                wrapLongLines={true}
-              >
-                {panelContent.content}
-              </SyntaxHighlighter>
-            ) : (
-              <Box sx={{ p: 2 }}>
                 <Box component="pre" sx={{
-                  m: 0,
-                  fontFamily: 'monospace',
-                  fontSize: '0.8rem',
-                  color: 'text.primary',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-all'
                 }}>
-                  <code>{panelContent.content}</code>
                 </Box>
-              </Box>
-            )
-          ) : (
-            <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4, opacity: 0.5 }}>
-              <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
-                NO CONTENT TO DISPLAY
-              </Typography>
-            </Box>
-          )}
         </Box>
       )}
     </Box>

   const { setRightPanelOpen } = useLayoutStore();
   return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
+      {/* Header - Fixed 60px to align */}
+      <Box sx={{
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 2,
+        borderBottom: '1px solid rgba(255,255,255,0.03)'
+      }}>
+        <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
           {panelContent?.title || 'Code Panel'}
         </Typography>
+        <IconButton size="small" onClick={() => setRightPanelOpen(false)} sx={{ color: 'var(--muted-text)' }}>
           <CloseIcon fontSize="small" />
         </IconButton>
       </Box>
       {!panelContent ? (
         <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ opacity: 0.5 }}>
             NO DATA LOADED
           </Typography>
         </Box>
       ) : (
+        <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+          <Box
+            className="code-panel"
+            sx={{
+                background: '#0A0B0C',
+                borderRadius: 'var(--radius-md)',
+                padding: '18px',
+                border: '1px solid rgba(255,255,255,0.03)',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
+                fontSize: '13px',
+                lineHeight: 1.55,
+                height: '100%',
+                overflow: 'auto',
+            }}
+          >
+            {panelContent.content ? (
+                panelContent.language === 'python' ? (
+                <SyntaxHighlighter
+                    language="python"
+                    style={vscDarkPlus}
+                    customStyle={{
+                    margin: 0,
+                    padding: 0,
+                    background: 'transparent',
+                    fontSize: '13px',
+                    fontFamily: 'inherit',
+                    }}
+                    wrapLines={true}
+                    wrapLongLines={true}
+                >
+                    {panelContent.content}
+                </SyntaxHighlighter>
+                ) : (
                 <Box component="pre" sx={{
+                    m: 0,
+                    fontFamily: 'inherit',
+                    color: 'var(--text)',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all'
                 }}>
+                    <code>{panelContent.content}</code>
+                </Box>
+                )
+            ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.5 }}>
+                <Typography variant="caption">
+                    NO CONTENT TO DISPLAY
+                </Typography>
                 </Box>
+            )}
+          </Box>
         </Box>
       )}
     </Box>

frontend/src/components/Layout/AppLayout.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ import ChatInput from '@/components/Chat/ChatInput';
 import MessageList from '@/components/Chat/MessageList';
 import type { Message } from '@/types/agent';
-const DRAWER_WIDTH = 280;
 export default function AppLayout() {
   const { activeSessionId } = useSessionStore();
@@ -125,8 +125,9 @@ export default function AppLayout() {
               width: DRAWER_WIDTH,
               borderRight: '1px solid',
               borderColor: 'divider',
-              top: '40px', // Below logo bar
-              height: 'calc(100% - 40px)',
             },
           }}
           open={isLeftSidebarOpen}
@@ -181,11 +182,14 @@ export default function AppLayout() {
         <Box
           component="main"
           sx={{
             flexGrow: 1,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
           }}
         >
           {activeSessionId ? (
@@ -266,8 +270,9 @@ export default function AppLayout() {
               boxSizing: 'border-box',
               width: rightPanelWidth,
               borderLeft: 'none',
-              top: '40px', // Below logo bar
-              height: 'calc(100% - 40px)',
             },
           }}
           open={isRightPanelOpen}

 import MessageList from '@/components/Chat/MessageList';
 import type { Message } from '@/types/agent';
+const DRAWER_WIDTH = 260;
 export default function AppLayout() {
   const { activeSessionId } = useSessionStore();
               width: DRAWER_WIDTH,
               borderRight: '1px solid',
               borderColor: 'divider',
+              top: 0,
+              height: '100%',
+              bgcolor: 'var(--panel)', // Ensure correct background matches sidebar
             },
           }}
           open={isLeftSidebarOpen}
         <Box
           component="main"
+          className="chat-pane"
           sx={{
             flexGrow: 1,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
+            background: 'linear-gradient(180deg, var(--bg), var(--panel))',
+            padding: '24px',
           }}
         >
           {activeSessionId ? (
               boxSizing: 'border-box',
               width: rightPanelWidth,
               borderLeft: 'none',
+              top: 0,
+              height: '100%',
+              bgcolor: 'var(--panel)',
             },
           }}
           open={isRightPanelOpen}

frontend/src/components/SessionSidebar/SessionSidebar.tsx CHANGED Viewed

@@ -3,19 +3,14 @@ import {
   Box,
   List,
   ListItem,
-  ListItemButton,
-  ListItemText,
-  ListItemSecondaryAction,
   IconButton,
   Typography,
   Button,
   Divider,
-  Chip,
   Tooltip,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import UndoIcon from '@mui/icons-material/Undo';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
@@ -26,30 +21,29 @@ interface SessionSidebarProps {
 const StatusDiode = ({ connected }: { connected: boolean }) => (
   <Box
     sx={{
-      width: 8,
-      height: 8,
       borderRadius: '50%',
-      bgcolor: connected ? 'success.main' : 'error.main',
-      boxShadow: connected ? '0 0 0 0 rgba(46, 160, 67, 0.7)' : 'none',
-      animation: connected ? 'pulse 2s infinite' : 'none',
-      '@keyframes pulse': {
-        '0%': {
-          transform: 'scale(0.95)',
-          boxShadow: '0 0 0 0 rgba(46, 160, 67, 0.7)',
-        },
-        '70%': {
-          transform: 'scale(1)',
-          boxShadow: '0 0 0 4px rgba(46, 160, 67, 0)',
-        },
-        '100%': {
-          transform: 'scale(0.95)',
-          boxShadow: '0 0 0 0 rgba(46, 160, 67, 0)',
-        },
-      },
     }}
   />
 );
 export default function SessionSidebar({ onClose }: SessionSidebarProps) {
   const { sessions, activeSessionId, createSession, deleteSession, switchSession } =
     useSessionStore();
@@ -102,114 +96,147 @@ export default function SessionSidebar({ onClose }: SessionSidebarProps) {
   };
   return (
-    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      {/* Header */}
-      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <Box sx={{ mb: 2 }}>
-          <img
-            src="/hf-log-only-white.png"
-            alt="HF Agent"
-            style={{ height: '32px', objectFit: 'contain' }}
-          />
         </Box>
         {/* System Info / Status */}
         <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </Typography>
           <StatusDiode connected={isConnected} />
         </Box>
         <Button
           fullWidth
-          variant="outlined"
           onClick={handleNewSession}
-          sx={{ justifyContent: 'center' }}
         >
-          Create Session
         </Button>
-      </Box>
-      {/* Session List */}
-      <Box sx={{ flex: 1, overflow: 'auto' }}>
-        {sessions.length === 0 ? (
-          <Box sx={{ p: 3, textAlign: 'center' }}>
-            <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
-              NO ACTIVE SESSIONS
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              Initialize a new session to begin
-            </Typography>
-          </Box>
-        ) : (
-          <List disablePadding>
             {[...sessions].reverse().map((session, index) => {
-              const sessionNumber = sessions.length - index;
-              return (
-                <ListItem key={session.id} disablePadding divider>
-                  <ListItemButton
-                    selected={session.id === activeSessionId}
                     onClick={() => handleSelectSession(session.id)}
                     sx={{
-                      '&.Mui-selected': {
-                        bgcolor: 'action.selected',
                         '&:hover': {
-                          bgcolor: 'action.selected',
                         },
-                      },
                     }}
-                  >
-                    <ListItemText
-                      primary={
-                        <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 600 }}>
-                          SESSION {String(sessionNumber).padStart(3, '0')}
-                        </Typography>
-                      }
-                      secondary={
-                        <Typography variant="caption" sx={{ fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <span style={{ color: session.isActive ? 'var(--mui-palette-success-main)' : 'var(--mui-palette-text-secondary)' }}>
-                            {session.isActive ? 'RUNNING' : 'STOPPED'}
-                          </span>
-                          <span>·</span>
-                          <span>{formatTime(session.createdAt)}</span>
                         </Typography>
-                      }
-                    />
-                    <ListItemSecondaryAction>
-                      <IconButton
-                        edge="end"
                         size="small"
                         onClick={(e) => handleDeleteSession(session.id, e)}
-                      >
                         <DeleteIcon fontSize="small" />
-                      </IconButton>
-                    </ListItemSecondaryAction>
-                  </ListItemButton>
                 </ListItem>
-              );
             })}
-          </List>
-        )}
       </Box>
       {/* Footer */}
-      <Divider />
-      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
-          {sessions.length} SESSION{sessions.length !== 1 ? 'S' : ''}
-        </Typography>
-        <Tooltip title="Undo last turn">
-          <span>
-            <IconButton
-              onClick={handleUndo}
-              disabled={!activeSessionId || isProcessing}
-              size="small"
-            >
-              <UndoIcon fontSize="small" />
-            </IconButton>
-          </span>
-        </Tooltip>
       </Box>
     </Box>
   );

   Box,
   List,
   ListItem,
   IconButton,
   Typography,
   Button,
   Divider,
   Tooltip,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import UndoIcon from '@mui/icons-material/Undo';
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
 const StatusDiode = ({ connected }: { connected: boolean }) => (
   <Box
     sx={{
+      width: 10,
+      height: 10,
       borderRadius: '50%',
+      bgcolor: connected ? 'var(--accent-green)' : 'var(--accent-red)', // Use green/red for connection status
+      boxShadow: connected ? '0 0 6px rgba(47, 204, 113, 0.4)' : 'none',
+      transition: 'all 0.3s ease',
     }}
   />
 );
+const RunningIndicator = () => (
+    <Box
+      className="running-indicator"
+      sx={{
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        bgcolor: 'var(--accent-yellow)',
+        boxShadow: '0 0 6px rgba(199,165,0,0.18)',
+      }}
+    />
+);
 export default function SessionSidebar({ onClose }: SessionSidebarProps) {
   const { sessions, activeSessionId, createSession, deleteSession, switchSession } =
     useSessionStore();
   };
   return (
+    <Box className="sidebar" sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
+      {/* Header - Aligned with AppLayout 60px */}
+      <Box sx={{
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        px: 2,
+        borderBottom: '1px solid rgba(255,255,255,0.03)'
+      }}>
+        <Box className="brand-logo" sx={{ display: 'flex' }}>
+            <img
+              src="/hf-log-only-white.png"
+              alt="HF Agent"
+              style={{ height: '24px', objectFit: 'contain' }}
+            />
         </Box>
+      </Box>
+      {/* Content */}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 2, overflow: 'hidden' }}>
         {/* System Info / Status */}
         <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
           <StatusDiode connected={isConnected} />
+          <Typography variant="caption" sx={{ color: 'var(--muted-text)', fontFamily: 'inherit' }}>
+            {isConnected ? 'System Online' : 'Disconnected'}
+          </Typography>
         </Box>
         <Button
           fullWidth
+          className="create-session"
           onClick={handleNewSession}
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: '10px',
+            padding: '10px 14px',
+            borderRadius: 'var(--radius-md)',
+            border: '1px solid rgba(255,255,255,0.06)',
+            bgcolor: 'transparent',
+            color: 'var(--text)',
+            fontWeight: 600,
+            textTransform: 'none',
+            mb: 3,
+            '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.02)',
+                border: '1px solid rgba(255,255,255,0.1)',
+            },
+            '&::before': {
+                content: '""',
+                width: '4px',
+                height: '20px',
+                background: 'linear-gradient(180deg, var(--accent-yellow), rgba(199,165,0,0.9))',
+                borderRadius: '4px',
+            }
+          }}
         >
+          New Session
         </Button>
+        {/* Session List */}
+        <Box sx={{ flex: 1, overflow: 'auto', mx: -1, px: 1 }}>
+            <List disablePadding sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
             {[...sessions].reverse().map((session, index) => {
+                const sessionNumber = sessions.length - index;
+                const isSelected = session.id === activeSessionId;
+                return (
+                <ListItem
+                    key={session.id}
+                    disablePadding
+                    className="session-item"
                     onClick={() => handleSelectSession(session.id)}
                     sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '10px',
+                        borderRadius: 'var(--radius-md)',
+                        bgcolor: isSelected ? 'rgba(255,255,255,0.05)' : 'transparent',
+                        cursor: 'pointer',
+                        transition: 'background 0.18s ease, transform 0.08s ease',
                         '&:hover': {
+                            bgcolor: 'rgba(255,255,255,0.02)',
+                            transform: 'translateY(-1px)',
+                        },
+                        '& .delete-btn': {
+                            opacity: 0,
+                            transition: 'opacity 0.2s',
                         },
+                        '&:hover .delete-btn': {
+                            opacity: 1,
+                        }
                     }}
+                >
+                    <Box sx={{ flex: 1, overflow: 'hidden' }}>
+                        <Typography variant="body2" sx={{ fontWeight: 500, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            Session {String(sessionNumber).padStart(2, '0')}
                         </Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                            {session.isActive && <RunningIndicator />}
+                            <Typography className="time" variant="caption" sx={{ fontSize: '12px', color: 'var(--muted-text)' }}>
+                                {formatTime(session.createdAt)}
+                            </Typography>
+                        </Box>
+                    </Box>
+                    <IconButton
+                        className="delete-btn"
                         size="small"
                         onClick={(e) => handleDeleteSession(session.id, e)}
+                        sx={{ color: 'var(--muted-text)', '&:hover': { color: 'var(--accent-red)' } }}
+                    >
                         <DeleteIcon fontSize="small" />
+                    </IconButton>
                 </ListItem>
+                );
             })}
+            </List>
+        </Box>
       </Box>
       {/* Footer */}
+      <Box sx={{ p: 2, borderTop: '1px solid rgba(255,255,255,0.03)' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Typography variant="caption" className="small-note" sx={{ fontSize: '12px', color: 'var(--muted-text)' }}>
+            {sessions.length} active
+            </Typography>
+            <Tooltip title="Undo last turn">
+            <span>
+                <IconButton
+                onClick={handleUndo}
+                disabled={!activeSessionId || isProcessing}
+                size="small"
+                sx={{ color: 'var(--muted-text)', '&:hover': { color: 'var(--text)' } }}
+                >
+                <UndoIcon fontSize="small" />
+                </IconButton>
+            </span>
+            </Tooltip>
+        </Box>
       </Box>
     </Box>
   );

frontend/src/theme.ts CHANGED Viewed

@@ -4,69 +4,71 @@ const theme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#FEE133',
-      light: '#FFF066',
-      dark: '#B29F24',
     },
     secondary: {
       main: '#FF9D00',
     },
     background: {
-      default: '#0D1117',
-      paper: '#161B22',
     },
     text: {
-      primary: '#E6EDF3',
-      secondary: '#8B949E',
     },
-    divider: '#30363D',
     success: {
-      main: '#2EA043', // Muted green
     },
     error: {
-      main: '#F85149',
     },
     warning: {
-      main: '#D29922',
     },
     info: {
       main: '#58A6FF',
     },
   },
   typography: {
-    fontFamily: '"IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    h1: {
-      fontWeight: 600,
-    },
-    h2: {
-      fontWeight: 600,
-    },
-    h3: {
-      fontWeight: 600,
-    },
-    h4: {
-      fontWeight: 600,
-    },
-    h5: {
-      fontWeight: 600,
-    },
-    h6: {
-      fontWeight: 600,
-    },
-    body1: {
-      fontSize: '0.9375rem',
-    },
-    body2: {
-      fontSize: '0.875rem',
-    },
     button: {
-      fontFamily: '"JetBrains Mono", "IBM Plex Sans", monospace',
     },
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
         body: {
           scrollbarWidth: 'thin',
           '&::-webkit-scrollbar': {
             width: '8px',
@@ -81,17 +83,33 @@ const theme = createTheme({
           },
         },
         'code, pre': {
-          fontFamily: '"JetBrains Mono", "Fira Code", monospace',
         },
       },
     },
     MuiButton: {
       styleOverrides: {
         root: {
-          textTransform: 'uppercase',
           fontWeight: 600,
-          letterSpacing: '0.05em',
-          fontSize: '0.75rem',
         },
       },
     },
@@ -99,20 +117,42 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           backgroundImage: 'none',
         },
       },
     },
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          borderRight: '1px solid #30363D',
         },
       },
     },
   },
   shape: {
-    borderRadius: 2,
   },
 });
-export default theme;

   palette: {
     mode: 'dark',
     primary: {
+      main: '#C7A500', // --accent-yellow
     },
     secondary: {
       main: '#FF9D00',
     },
     background: {
+      default: '#0B0D10', // --bg
+      paper: '#0F1316',   // --panel
     },
     text: {
+      primary: '#E6EEF8', // --text
+      secondary: '#98A0AA', // --muted-text
     },
+    divider: 'rgba(255,255,255,0.03)',
     success: {
+      main: '#2FCC71', // --accent-green
     },
     error: {
+      main: '#E05A4F', // --accent-red
     },
     warning: {
+      main: '#C7A500',
     },
     info: {
       main: '#58A6FF',
     },
   },
   typography: {
+    fontFamily: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
+    fontSize: 15,
+    h1: { fontWeight: 600, color: '#E6EEF8' },
+    h2: { fontWeight: 600, color: '#E6EEF8' },
+    h3: { fontWeight: 600, color: '#E6EEF8' },
+    h4: { fontWeight: 600, color: '#E6EEF8' },
+    h5: { fontWeight: 600, color: '#E6EEF8' },
+    h6: { fontWeight: 600, color: '#E6EEF8' },
+    body1: { fontSize: '15px', color: '#E6EEF8' },
+    body2: { fontSize: '0.875rem', color: '#98A0AA' },
     button: {
+      fontFamily: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
+      textTransform: 'none',
+      fontWeight: 600,
     },
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
+        ':root': {
+          '--bg': '#0B0D10',
+          '--panel': '#0F1316',
+          '--surface': '#121416',
+          '--text': '#E6EEF8',
+          '--muted-text': '#98A0AA',
+          '--accent-yellow': '#C7A500',
+          '--accent-yellow-weak': 'rgba(199,165,0,0.08)',
+          '--accent-green': '#2FCC71',
+          '--accent-red': '#E05A4F',
+          '--shadow-1': '0 6px 18px rgba(2,6,12,0.55)',
+          '--radius-lg': '20px',
+          '--radius-md': '12px',
+          '--focus': '0 0 0 3px rgba(199,165,0,0.12)',
+        },
         body: {
+          background: 'linear-gradient(180deg, var(--bg), #090B0D)',
+          color: 'var(--text)',
           scrollbarWidth: 'thin',
           '&::-webkit-scrollbar': {
             width: '8px',
           },
         },
         'code, pre': {
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
+        },
+        '.brand-logo': {
+          position: 'relative',
+          padding: '6px',
+          borderRadius: '8px',
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: '-6px',
+            borderRadius: '10px',
+            background: 'var(--accent-yellow-weak)',
+            zIndex: -1,
+            pointerEvents: 'none',
+          },
         },
       },
     },
     MuiButton: {
       styleOverrides: {
         root: {
+          borderRadius: '10px',
           fontWeight: 600,
+          transition: 'transform 0.06s ease, background 0.12s ease, box-shadow 0.12s ease',
+          '&:hover': {
+            transform: 'translateY(-1px)',
+          },
         },
       },
     },
       styleOverrides: {
         root: {
           backgroundImage: 'none',
+          backgroundColor: 'transparent', // Default to transparent for gradients
         },
       },
     },
     MuiDrawer: {
       styleOverrides: {
         paper: {
+          backgroundColor: 'var(--panel)',
+          borderRight: '1px solid rgba(255,255,255,0.03)',
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 'var(--radius-md)',
+            '& fieldset': {
+              borderColor: 'rgba(255,255,255,0.03)',
+            },
+            '&:hover fieldset': {
+              borderColor: 'rgba(255,255,255,0.1)',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: 'var(--accent-yellow)',
+              borderWidth: '1px',
+              boxShadow: 'var(--focus)',
+            },
+          },
         },
       },
     },
   },
   shape: {
+    borderRadius: 12,
   },
 });
+export default theme;