From 3526a1a49a73285fe9805bae48e57632fcb8a131 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:30:10 +0530
Subject: [PATCH 01/22] feat: decouple menu components

---
 src/pages/PageWrapper.tsx | 71 ++++++++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/pages/PageWrapper.tsx b/src/pages/PageWrapper.tsx
index e257367b..83004fcc 100644
--- a/src/pages/PageWrapper.tsx
+++ b/src/pages/PageWrapper.tsx
@@ -13,6 +13,7 @@ import UserRoute from '../routes/userRoute';
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
 import { NotFoundPage } from '../components/dashboard/NotFound';
 import RobotCreate from '../components/robot/pages/RobotCreate';
+import { Box } from '@mui/material';
 
 export const PageWrapper = () => {
   const [open, setOpen] = useState(false);
@@ -90,34 +91,48 @@ export const PageWrapper = () => {
       <AuthProvider>
         <SocketProvider>
           <React.Fragment>
-            {/* {!browserId && location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={!!browserId} />} */}
-            {location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={false} />}
-            <Routes>
-              <Route element={<UserRoute />}>
-                <Route path="/" element={<Navigate to="/robots" replace />} />
-                <Route path="/robots/create" element={<RobotCreate />} />
-                <Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
-                <Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
-                <Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
-                <Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
-              </Route>
-              <Route element={<UserRoute />}>
-                <Route path="/recording" element={
-                  <BrowserDimensionsProvider>
-                    <RecordingPage recordingName={recordingName} />
-                  </BrowserDimensionsProvider>
-                } />
-              </Route>
-              <Route
-                path="/login"
-                element={<Login />}
-              />
-              <Route
-                path="/register"
-                element={<Register />}
-              />
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
+            {/* Sticky NavBar - only show on non-recording pages */}
+            {location.pathname !== '/recording' && (
+              <Box sx={{ 
+                position: 'sticky', 
+                top: 0, 
+                zIndex: 1100,
+                backgroundColor: 'background.paper' 
+              }}>
+                <NavBar recordingName={recordingName} isRecording={false} />
+              </Box>
+            )}
+            <Box sx={{ 
+              display: 'flex', 
+              minHeight: location.pathname !== '/recording' ? 'calc(100vh - 64px)' : '100vh' 
+            }}>
+              <Routes>
+                <Route element={<UserRoute />}>
+                  <Route path="/" element={<Navigate to="/robots" replace />} />
+                  <Route path="/robots/create" element={<RobotCreate />} />
+                  <Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
+                  <Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
+                  <Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
+                  <Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
+                </Route>
+                <Route element={<UserRoute />}>
+                  <Route path="/recording" element={
+                    <BrowserDimensionsProvider>
+                      <RecordingPage recordingName={recordingName} />
+                    </BrowserDimensionsProvider>
+                  } />
+                </Route>
+                <Route
+                  path="/login"
+                  element={<Login />}
+                />
+                <Route
+                  path="/register"
+                  element={<Register />}
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </Box>
           </React.Fragment>
         </SocketProvider>
       </AuthProvider>

From a515c9046a529f69a299db1975bfc47e82ef1241 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:30:24 +0530
Subject: [PATCH 02/22] feat: decouple menu components

---
 src/pages/MainPage.tsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index bf628fa6..65647182 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MainMenu } from "../components/dashboard/MainMenu";
-import { Stack } from "@mui/material";
+import { Stack, Box } from "@mui/material";
 import { Recordings } from "../components/robot/Recordings";
 import { Runs } from "../components/run/Runs";
 import ProxyForm from '../components/proxy/ProxyForm';
@@ -318,12 +318,31 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
     }
   }
 
-  return (
-    <Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
-      <Stack sx={{ width: 250, flexShrink: 0 }}>
+return (
+  <Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
+    {/* Sticky Sidebar */}
+    <Box sx={{ 
+      width: 250,
+      flexShrink: 0,
+      position: 'sticky',
+      top: 64, // Height of NavBar
+      height: 'calc(100vh - 64px)', 
+      overflowY: 'auto', // Allow scrolling if menu content is too long
+      zIndex: 1000 
+    }}>
       <MainMenu value={content} handleChangeContent={setContent} />
-      </Stack>
+    </Box>
+    
+    {/* Scrollable Content Area - Fills remaining space */}
+    <Box sx={{ 
+      flex: 1,
+      minWidth: 0, 
+      overflow: 'auto',
+      minHeight: 'calc(100vh - 64px)',
+      width: 'calc(100% - 250px)' 
+    }}>
       {DisplayContent()}
-    </Stack>
-  );
-};
+    </Box>
+  </Box>
+)
+}

From fb7c37dab963141c9c7429dd6519259100b9c468 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:39:35 +0530
Subject: [PATCH 03/22] feat:  match proxy layout w new menu layout

---
 src/components/proxy/ProxyForm.tsx | 88 ++++++++++++++++++------------
 1 file changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/components/proxy/ProxyForm.tsx b/src/components/proxy/ProxyForm.tsx
index 9b1e8ba5..c0902f41 100644
--- a/src/components/proxy/ProxyForm.tsx
+++ b/src/components/proxy/ProxyForm.tsx
@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
     }, []);
 
     return (
-        <>
-            <FormContainer>
-                <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
+        <Box sx={{ 
+            display: 'flex', 
+            gap: 4, 
+            p: 5,
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box'
+        }}>
+            <Box sx={{ 
+                flex: 1,
+                minWidth: 0, 
+                maxWidth: 600
+            }}>
+                <Typography variant="h6" gutterBottom component="div">
                     {t('proxy.title')}
                 </Typography>
-                <Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
+                <Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
                     <Tab label={t('proxy.tab_standard')} />
                 </Tabs>
 
                 {tabIndex === 0 && (
                     isProxyConfigured ? (
-                        <Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
-                            <TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
+                        <Box sx={{ width: '100%', mt: 1 }}>
+                            <TableContainer component={Paper} sx={{ mb: 2 }}>
                                 <Table>
                                     <TableHead>
                                         <TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
                             <Button variant="outlined" color="primary" onClick={testProxy}>
                                 {t('proxy.test_proxy')}
                             </Button>
-                            <Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
+                            <Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
                                 {t('proxy.remove_proxy')}
                             </Button>
                         </Box>
                     ) : (
-                        <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
-                            <FormControl>
+                        <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
+                            <Box sx={{ mb: 2 }}>
                                 <TextField
                                     label={t('proxy.server_url')}
                                     name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
                                         </span>
                                     }
                                 />
-                            </FormControl>
-                            <FormControl>
+                            </Box>
+                            <Box sx={{ mb: 2 }}>
                                 <FormControlLabel
                                     control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
                                     label={t('proxy.requires_auth')}
                                 />
-                            </FormControl>
+                            </Box>
                             {requiresAuth && (
                                 <>
-                                    <FormControl>
+                                    <Box sx={{ mb: 2 }}>
                                         <TextField
                                             label={t('proxy.username')}
                                             name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
                                             error={!!errors.username}
                                             helperText={errors.username || ''}
                                         />
-                                    </FormControl>
-                                    <FormControl>
+                                    </Box>
+                                    <Box sx={{ mb: 2 }}>
                                         <TextField
                                             label={t('proxy.password')}
                                             name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
                                             error={!!errors.password}
                                             helperText={errors.password || ''}
                                         />
-                                    </FormControl>
+                                    </Box>
                                 </>
                             )}
                             <Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
                             </Button>
                         </Box>
                     ))}
-            </FormContainer>
+            </Box>
 
-            <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
-                <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
-                <br />
-                <b>{t('proxy.alert.right_way')}</b>
-                <br />
-                {t('proxy.alert.proxy_url')} http://proxy.com:1337
-                <br />
-                {t('proxy.alert.username')} myusername
-                <br />
-                {t('proxy.alert.password')} mypassword
-                <br />
-                <br />
-                <b>{t('proxy.alert.wrong_way')}</b>
-                <br />
-
-                {t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
-            </Alert>
-        </>
+            {/* Instructions Section */}
+            <Box sx={{ 
+                flex: 1,
+                minWidth: 0, 
+                maxWidth: 600
+            }}>
+                <Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
+                    <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
+                    <br />
+                    <b>{t('proxy.alert.right_way')}</b>
+                    <br />
+                    {t('proxy.alert.proxy_url')} http://proxy.com:1337
+                    <br />
+                    {t('proxy.alert.username')} myusername
+                    <br />
+                    {t('proxy.alert.password')} mypassword
+                    <br />
+                    <br />
+                    <b>{t('proxy.alert.wrong_way')}</b>
+                    <br />
+                    {t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
+                </Alert>
+            </Box>
+        </Box>
     );
 };
 
+
 export default ProxyForm;
\ No newline at end of file

From e1d10042d75c4f552e537fcb7e6b168dd9f233d3 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:39:48 +0530
Subject: [PATCH 04/22] fix: format

---
 src/components/proxy/ProxyForm.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/proxy/ProxyForm.tsx b/src/components/proxy/ProxyForm.tsx
index c0902f41..b9e60b86 100644
--- a/src/components/proxy/ProxyForm.tsx
+++ b/src/components/proxy/ProxyForm.tsx
@@ -156,17 +156,17 @@ const ProxyForm: React.FC = () => {
     }, []);
 
     return (
-        <Box sx={{ 
-            display: 'flex', 
-            gap: 4, 
+        <Box sx={{
+            display: 'flex',
+            gap: 4,
             p: 5,
             width: '100%',
             maxWidth: '100%',
             boxSizing: 'border-box'
         }}>
-            <Box sx={{ 
+            <Box sx={{
                 flex: 1,
-                minWidth: 0, 
+                minWidth: 0,
                 maxWidth: 600
             }}>
                 <Typography variant="h6" gutterBottom component="div">
@@ -269,9 +269,9 @@ const ProxyForm: React.FC = () => {
             </Box>
 
             {/* Instructions Section */}
-            <Box sx={{ 
+            <Box sx={{
                 flex: 1,
-                minWidth: 0, 
+                minWidth: 0,
                 maxWidth: 600
             }}>
                 <Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>

From 2aa4aff6089d43075ce47d95cba4c004d857eb74 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:54:35 +0530
Subject: [PATCH 05/22] feat:  match api layout w new menu layout

---
 src/components/api/ApiKey.tsx | 137 +++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 69 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 9feb9551..2da3502f 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -107,73 +107,72 @@ const ApiKeyManager = () => {
   }
 
   return (
-    <Container sx={{ alignSelf: 'flex-start' }}>
-      <Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
-        Start by creating an API key below. Then,
-        <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
-          test your API
-        </a>
-        or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
-          API documentation
-        </a> for setup instructions.
-      </Typography>
-      <Typography
-        variant="h6"
-        gutterBottom
-        component="div"
-        style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
-      >
-        {t('apikey.title')}
-      </Typography>
-      {apiKey ? (
-        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>{t('apikey.table.name')}</TableCell>
-                <TableCell>{t('apikey.table.key')}</TableCell>
-                <TableCell>{t('apikey.table.actions')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>{apiKeyName}</TableCell>
-                <TableCell>
-                  <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
-                    {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
-                  </Box>
-                </TableCell>
-                <TableCell>
-                  <Tooltip title={t('apikey.actions.copy')}>
-                    <IconButton onClick={copyToClipboard}>
-                      <ContentCopy />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
-                    <IconButton onClick={() => setShowKey(!showKey)}>
-                      {showKey ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title={t('apikey.actions.delete')}>
-                    <IconButton onClick={deleteApiKey} color="error">
-                      <Delete />
-                    </IconButton>
-                  </Tooltip>
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      ) : (
-        <>
-          <Typography>{t('apikey.no_key_message')}</Typography>
-          <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
-            {t('apikey.generate_button')}
-          </Button>
-        </>
-      )}
-    </Container>
-  );
-};
-
+  <Container sx={{ alignSelf: 'flex-start' }}>
+    <Typography variant="body1" sx={{ marginBottom: '40px' }}>
+      Start by creating an API key below. Then,
+      <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
+        test your API
+      </a>
+      or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+        API documentation
+      </a> for setup instructions.
+    </Typography>
+    <Typography
+      variant="h6"
+      gutterBottom
+      component="div"
+      style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
+    >
+      {t('apikey.title')}
+    </Typography>
+    {apiKey ? (
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>{t('apikey.table.name')}</TableCell>
+              <TableCell>{t('apikey.table.key')}</TableCell>
+              <TableCell>{t('apikey.table.actions')}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>{apiKeyName}</TableCell>
+              <TableCell>
+                <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
+                  {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Tooltip title={t('apikey.actions.copy')}>
+                  <IconButton onClick={copyToClipboard}>
+                    <ContentCopy />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
+                  <IconButton onClick={() => setShowKey(!showKey)}>
+                    {showKey ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title={t('apikey.actions.delete')}>
+                  <IconButton onClick={deleteApiKey} color="error">
+                    <Delete />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    ) : (
+      <>
+        <Typography>{t('apikey.no_key_message')}</Typography>
+        <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
+          {t('apikey.generate_button')}
+        </Button>
+      </>
+    )}
+  </Container>
+);
+}
 export default ApiKeyManager;
\ No newline at end of file

From 95ac9ce91343dd20035d39dfc39a66e41862066b Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:54:48 +0530
Subject: [PATCH 06/22] chore: lint

---
 src/components/api/ApiKey.tsx | 134 +++++++++++++++++-----------------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 2da3502f..c29f4ec8 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -107,72 +107,72 @@ const ApiKeyManager = () => {
   }
 
   return (
-  <Container sx={{ alignSelf: 'flex-start' }}>
-    <Typography variant="body1" sx={{ marginBottom: '40px' }}>
-      Start by creating an API key below. Then,
-      <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
-        test your API
-      </a>
-      or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
-        API documentation
-      </a> for setup instructions.
-    </Typography>
-    <Typography
-      variant="h6"
-      gutterBottom
-      component="div"
-      style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
-    >
-      {t('apikey.title')}
-    </Typography>
-    {apiKey ? (
-      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>{t('apikey.table.name')}</TableCell>
-              <TableCell>{t('apikey.table.key')}</TableCell>
-              <TableCell>{t('apikey.table.actions')}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <TableCell>{apiKeyName}</TableCell>
-              <TableCell>
-                <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
-                  {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
-                </Box>
-              </TableCell>
-              <TableCell>
-                <Tooltip title={t('apikey.actions.copy')}>
-                  <IconButton onClick={copyToClipboard}>
-                    <ContentCopy />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
-                  <IconButton onClick={() => setShowKey(!showKey)}>
-                    {showKey ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title={t('apikey.actions.delete')}>
-                  <IconButton onClick={deleteApiKey} color="error">
-                    <Delete />
-                  </IconButton>
-                </Tooltip>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    ) : (
-      <>
-        <Typography>{t('apikey.no_key_message')}</Typography>
-        <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
-          {t('apikey.generate_button')}
-        </Button>
-      </>
-    )}
-  </Container>
-);
+    <Container sx={{ alignSelf: 'flex-start' }}>
+      <Typography variant="body1" sx={{ marginBottom: '40px' }}>
+        Start by creating an API key below. Then,
+        <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
+          test your API
+        </a>
+        or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+          API documentation
+        </a> for setup instructions.
+      </Typography>
+      <Typography
+        variant="h6"
+        gutterBottom
+        component="div"
+        style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
+      >
+        {t('apikey.title')}
+      </Typography>
+      {apiKey ? (
+        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('apikey.table.name')}</TableCell>
+                <TableCell>{t('apikey.table.key')}</TableCell>
+                <TableCell>{t('apikey.table.actions')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableCell>{apiKeyName}</TableCell>
+                <TableCell>
+                  <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
+                    {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
+                  </Box>
+                </TableCell>
+                <TableCell>
+                  <Tooltip title={t('apikey.actions.copy')}>
+                    <IconButton onClick={copyToClipboard}>
+                      <ContentCopy />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
+                    <IconButton onClick={() => setShowKey(!showKey)}>
+                      {showKey ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={t('apikey.actions.delete')}>
+                    <IconButton onClick={deleteApiKey} color="error">
+                      <Delete />
+                    </IconButton>
+                  </Tooltip>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <>
+          <Typography>{t('apikey.no_key_message')}</Typography>
+          <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
+            {t('apikey.generate_button')}
+          </Button>
+        </>
+      )}
+    </Container>
+  );
 }
 export default ApiKeyManager;
\ No newline at end of file

From 11fa50f727f1fbb272dd8034e2770849819acdad Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:55:51 +0530
Subject: [PATCH 07/22] chore: hidden api key

---
 src/components/api/ApiKey.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index c29f4ec8..1e0386c9 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -140,7 +140,7 @@ const ApiKeyManager = () => {
                 <TableCell>{apiKeyName}</TableCell>
                 <TableCell>
                   <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
-                    {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
+                    {showKey ? `${apiKey?.substring(0, 20)}...` : '***************'}
                   </Box>
                 </TableCell>
                 <TableCell>

From c394198321c38829ff57f5f7d825fd021b6c7cd1 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 21:09:30 +0530
Subject: [PATCH 08/22] feat:  match robot config layout w new menu layout

---
 .../robot/pages/RobotConfigPage.tsx           | 238 +++++++++---------
 1 file changed, 117 insertions(+), 121 deletions(-)

diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index d52b985e..ac841f0b 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -59,142 +59,138 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
   };
 
   return (
+  <Box sx={{
+    maxWidth: 1000,
+    margin: '50px auto',
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%', 
+    height: 'auto', 
+    minHeight: 'calc(100vh - 64px)',
+    boxSizing: 'border-box'
+  }}>
     <Box sx={{
-      maxWidth: 1000,
-      margin: '50px auto',
+      display: 'flex',
+      alignItems: 'center',
+      maxHeight: '64px',
+      mb: 2,
+      flexShrink: 0
+    }}>
+      <IconButton
+        onClick={onArrowBack ? onArrowBack : handleBack}
+        sx={{
+          ml: -1,
+          mr: 1,
+          color: theme.palette.text.primary,
+          backgroundColor: 'transparent !important',
+          '&:hover': {
+            backgroundColor: 'transparent !important',
+          },
+          '&:active': {
+            backgroundColor: 'transparent !important',
+          },
+          '&:focus': {
+            backgroundColor: 'transparent !important',
+          },
+          '&:focus-visible': {
+            backgroundColor: 'transparent !important',
+          },
+        }}
+        disableRipple
+      >
+        <ArrowBack />
+      </IconButton>
+      {icon && (
+        <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
+          {icon}
+        </Box>
+      )}
+      <Typography
+        variant="h5"
+        sx={{
+          color: theme.palette.text.primary,
+          lineHeight: 1.2
+        }}
+      >
+        {title}
+      </Typography>
+    </Box>
+    <Divider sx={{ mb: 4, flexShrink: 0 }} />
+
+    <Box sx={{
+      flex: 1,
       display: 'flex',
       flexDirection: 'column',
-      width: '1000px',
-      height: '100%',
-      overflowY: 'auto', // Allow scrolling if content exceeds height
+      minHeight: 0,
+      mt: 2,
+      mb: 3,
     }}>
-      {/* Header Section - Fixed Position */}
-      <Box sx={{
-        display: 'flex',
-        alignItems: 'center',
-        maxHeight: '64px',
-        mb: 2,
-        flexShrink: 0
-      }}>
-        <IconButton
-          onClick={onArrowBack ? onArrowBack : handleBack}
-          sx={{
-            ml: -1,
-            mr: 1,
-            color: theme.palette.text.primary,
-            backgroundColor: 'transparent !important',
-            '&:hover': {
-              backgroundColor: 'transparent !important',
-            },
-            '&:active': {
-              backgroundColor: 'transparent !important',
-            },
-            '&:focus': {
-              backgroundColor: 'transparent !important',
-            },
-            '&:focus-visible': {
-              backgroundColor: 'transparent !important',
-            },
-          }}
-          disableRipple
-        >
-          <ArrowBack />
-        </IconButton>
-        {icon && (
-          <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
-            {icon}
-          </Box>
+      {children}
+    </Box>
+
+    {(showSaveButton || showCancelButton || onBackToSelection) && (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
+          gap: 2,
+          pt: 3, 
+          borderTop: `1px solid ${theme.palette.divider}`,
+          flexShrink: 0,
+          width: '100%',
+        }}
+      >
+        {onBackToSelection && (
+          <Button
+            variant="outlined"
+            onClick={onBackToSelection}
+            disabled={isLoading}
+            sx={{
+              color: '#ff00c3 !important',
+              borderColor: '#ff00c3 !important',
+              backgroundColor: 'white !important',
+            }} >
+            {backToSelectionText || t("buttons.back_arrow")}
+          </Button>
         )}
-        <Typography
-          variant="h5"
-          sx={{
-            color: theme.palette.text.primary,
-            lineHeight: 1.2
-          }}
-        >
-          {title}
-        </Typography>
-      </Box>
-      <Divider sx={{ mb: 4, flexShrink: 0 }} />
 
-      {/* Content Section */}
-      <Box sx={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: 0,
-        mt: 2,
-        mb: 3,
-      }}>
-        {children}
-      </Box>
-
-      {/* Action Buttons */}
-      {(showSaveButton || showCancelButton || onBackToSelection) && (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
-            gap: 2,
-            pt: 3, // Reduce padding top to minimize space above
-            borderTop: `1px solid ${theme.palette.divider}`,
-            flexShrink: 0,
-            width: '100%',
-          }}
-        >
-          {/* Left side - Back to Selection button */}
-          {onBackToSelection && (
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          {showCancelButton && (
             <Button
               variant="outlined"
-              onClick={onBackToSelection}
+              onClick={handleBack}
               disabled={isLoading}
               sx={{
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
                 backgroundColor: 'white !important',
               }} >
-              {backToSelectionText || t("buttons.back_arrow")}
+              {cancelButtonText || t("buttons.cancel")}
             </Button>
           )}
-
-          {/* Right side - Save/Cancel buttons */}
-          <Box sx={{ display: 'flex', gap: 2 }}>
-            {showCancelButton && (
-              <Button
-                variant="outlined"
-                onClick={handleBack}
-                disabled={isLoading}
-                sx={{
-                  color: '#ff00c3 !important',
-                  borderColor: '#ff00c3 !important',
-                  backgroundColor: 'white !important',
-                }} >
-                {cancelButtonText || t("buttons.cancel")}
-              </Button>
-            )}
-            {showSaveButton && onSave && (
-              <Button
-                variant="contained"
-                onClick={onSave}
-                disabled={isLoading}
-                sx={{
-                  bgcolor: '#ff00c3',
-                  '&:hover': {
-                    bgcolor: '#cc0099',
-                    boxShadow: 'none',
-                  },
-                  textTransform: 'none',
-                  fontWeight: 500,
-                  px: 3,
+          {showSaveButton && onSave && (
+            <Button
+              variant="contained"
+              onClick={onSave}
+              disabled={isLoading}
+              sx={{
+                bgcolor: '#ff00c3',
+                '&:hover': {
+                  bgcolor: '#cc0099',
                   boxShadow: 'none',
-                }}
-              >
-                {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
-              </Button>
-            )}
-          </Box>
+                },
+                textTransform: 'none',
+                fontWeight: 500,
+                px: 3,
+                boxShadow: 'none',
+              }}
+            >
+              {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
+            </Button>
+          )}
         </Box>
-      )}
-    </Box>
-  );
-};
+      </Box>
+    )}
+  </Box>
+);
+}

From 75bb63d19423eaea908063e337d02542c844e158 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 21:09:38 +0530
Subject: [PATCH 09/22] chore: lint

---
 .../robot/pages/RobotConfigPage.tsx           | 232 +++++++++---------
 1 file changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index ac841f0b..ccf6452b 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -59,138 +59,138 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
   };
 
   return (
-  <Box sx={{
-    maxWidth: 1000,
-    margin: '50px auto',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%', 
-    height: 'auto', 
-    minHeight: 'calc(100vh - 64px)',
-    boxSizing: 'border-box'
-  }}>
     <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      maxHeight: '64px',
-      mb: 2,
-      flexShrink: 0
-    }}>
-      <IconButton
-        onClick={onArrowBack ? onArrowBack : handleBack}
-        sx={{
-          ml: -1,
-          mr: 1,
-          color: theme.palette.text.primary,
-          backgroundColor: 'transparent !important',
-          '&:hover': {
-            backgroundColor: 'transparent !important',
-          },
-          '&:active': {
-            backgroundColor: 'transparent !important',
-          },
-          '&:focus': {
-            backgroundColor: 'transparent !important',
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent !important',
-          },
-        }}
-        disableRipple
-      >
-        <ArrowBack />
-      </IconButton>
-      {icon && (
-        <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
-          {icon}
-        </Box>
-      )}
-      <Typography
-        variant="h5"
-        sx={{
-          color: theme.palette.text.primary,
-          lineHeight: 1.2
-        }}
-      >
-        {title}
-      </Typography>
-    </Box>
-    <Divider sx={{ mb: 4, flexShrink: 0 }} />
-
-    <Box sx={{
-      flex: 1,
+      maxWidth: 1000,
+      margin: '50px auto',
       display: 'flex',
       flexDirection: 'column',
-      minHeight: 0,
-      mt: 2,
-      mb: 3,
+      width: '100%',
+      height: 'auto',
+      minHeight: 'calc(100vh - 64px)',
+      boxSizing: 'border-box'
     }}>
-      {children}
-    </Box>
-
-    {(showSaveButton || showCancelButton || onBackToSelection) && (
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
-          gap: 2,
-          pt: 3, 
-          borderTop: `1px solid ${theme.palette.divider}`,
-          flexShrink: 0,
-          width: '100%',
-        }}
-      >
-        {onBackToSelection && (
-          <Button
-            variant="outlined"
-            onClick={onBackToSelection}
-            disabled={isLoading}
-            sx={{
-              color: '#ff00c3 !important',
-              borderColor: '#ff00c3 !important',
-              backgroundColor: 'white !important',
-            }} >
-            {backToSelectionText || t("buttons.back_arrow")}
-          </Button>
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        maxHeight: '64px',
+        mb: 2,
+        flexShrink: 0
+      }}>
+        <IconButton
+          onClick={onArrowBack ? onArrowBack : handleBack}
+          sx={{
+            ml: -1,
+            mr: 1,
+            color: theme.palette.text.primary,
+            backgroundColor: 'transparent !important',
+            '&:hover': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:active': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus-visible': {
+              backgroundColor: 'transparent !important',
+            },
+          }}
+          disableRipple
+        >
+          <ArrowBack />
+        </IconButton>
+        {icon && (
+          <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
+            {icon}
+          </Box>
         )}
+        <Typography
+          variant="h5"
+          sx={{
+            color: theme.palette.text.primary,
+            lineHeight: 1.2
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Divider sx={{ mb: 4, flexShrink: 0 }} />
 
-        <Box sx={{ display: 'flex', gap: 2 }}>
-          {showCancelButton && (
+      <Box sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        mt: 2,
+        mb: 3,
+      }}>
+        {children}
+      </Box>
+
+      {(showSaveButton || showCancelButton || onBackToSelection) && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
+            gap: 2,
+            pt: 3,
+            borderTop: `1px solid ${theme.palette.divider}`,
+            flexShrink: 0,
+            width: '100%',
+          }}
+        >
+          {onBackToSelection && (
             <Button
               variant="outlined"
-              onClick={handleBack}
+              onClick={onBackToSelection}
               disabled={isLoading}
               sx={{
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
                 backgroundColor: 'white !important',
               }} >
-              {cancelButtonText || t("buttons.cancel")}
+              {backToSelectionText || t("buttons.back_arrow")}
             </Button>
           )}
-          {showSaveButton && onSave && (
-            <Button
-              variant="contained"
-              onClick={onSave}
-              disabled={isLoading}
-              sx={{
-                bgcolor: '#ff00c3',
-                '&:hover': {
-                  bgcolor: '#cc0099',
+
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            {showCancelButton && (
+              <Button
+                variant="outlined"
+                onClick={handleBack}
+                disabled={isLoading}
+                sx={{
+                  color: '#ff00c3 !important',
+                  borderColor: '#ff00c3 !important',
+                  backgroundColor: 'white !important',
+                }} >
+                {cancelButtonText || t("buttons.cancel")}
+              </Button>
+            )}
+            {showSaveButton && onSave && (
+              <Button
+                variant="contained"
+                onClick={onSave}
+                disabled={isLoading}
+                sx={{
+                  bgcolor: '#ff00c3',
+                  '&:hover': {
+                    bgcolor: '#cc0099',
+                    boxShadow: 'none',
+                  },
+                  textTransform: 'none',
+                  fontWeight: 500,
+                  px: 3,
                   boxShadow: 'none',
-                },
-                textTransform: 'none',
-                fontWeight: 500,
-                px: 3,
-                boxShadow: 'none',
-              }}
-            >
-              {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
-            </Button>
-          )}
+                }}
+              >
+                {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
+              </Button>
+            )}
+          </Box>
         </Box>
-      </Box>
-    )}
-  </Box>
-);
+      )}
+    </Box>
+  );
 }

From fbaf588169b3a1abbc91e80e390a4c8fa030374d Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 21:53:51 +0530
Subject: [PATCH 10/22] fix: remove minHeight

---
 src/components/robot/pages/RobotConfigPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index ccf6452b..e87c552c 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -66,7 +66,6 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       flexDirection: 'column',
       width: '100%',
       height: 'auto',
-      minHeight: 'calc(100vh - 64px)',
       boxSizing: 'border-box'
     }}>
       <Box sx={{

From 5b5aa0d5ab058ad4c789321fd5e5b8f3ab0a1eac Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 21:57:14 +0530
Subject: [PATCH 11/22] fix: margins

---
 src/components/robot/pages/RobotConfigPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index e87c552c..a5435ca3 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -122,7 +122,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
         flexDirection: 'column',
         minHeight: 0,
         mt: 2,
-        mb: 3,
+        mb: 5,
       }}>
         {children}
       </Box>

From c235ac240e55bd1e81d110105edd59b8cb258a52 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:01:34 +0530
Subject: [PATCH 12/22] fix: inherit bg for cancel button

---
 src/components/robot/pages/RobotConfigPage.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index a5435ca3..6675aa3d 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -121,7 +121,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
         display: 'flex',
         flexDirection: 'column',
         minHeight: 0,
-        mt: 2,
+        mt: 1.8,
         mb: 5,
       }}>
         {children}
@@ -160,9 +160,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                 onClick={handleBack}
                 disabled={isLoading}
                 sx={{
-                  color: '#ff00c3 !important',
-                  borderColor: '#ff00c3 !important',
-                  backgroundColor: 'white !important',
+                  backgroundColor: 'inherit !important',
                 }} >
                 {cancelButtonText || t("buttons.cancel")}
               </Button>

From 56467d5560c8a1632d0b9a1801f5dd6c0822aa75 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:01:58 +0530
Subject: [PATCH 13/22] feat: cleaner UI

---
 .../robot/pages/ScheduleSettingsPage.tsx      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/robot/pages/ScheduleSettingsPage.tsx b/src/components/robot/pages/ScheduleSettingsPage.tsx
index e386cfec..9f308487 100644
--- a/src/components/robot/pages/ScheduleSettingsPage.tsx
+++ b/src/components/robot/pages/ScheduleSettingsPage.tsx
@@ -188,8 +188,8 @@ export const ScheduleSettingsPage = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          "& > *": { marginBottom: "20px" },
-          marginTop: "-20px",
+          gap: 3,
+          width: "100%",
         }}
       >
         <>
@@ -215,7 +215,7 @@ export const ScheduleSettingsPage = ({
                 {t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
                 {schedule.timezone} {t("schedule_settings.timezone")}
               </Typography>
-              <Box mt={2} display="flex" justifyContent="space-between">
+              <Box sx={{ mt: 2, width: "100%" }}>
                 <Button
                   onClick={deleteRobotSchedule}
                   variant="outlined"
@@ -231,7 +231,7 @@ export const ScheduleSettingsPage = ({
           ) : (
             <>
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginRight: "10px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {t("schedule_settings.labels.run_once_every")}
                 </Typography>
                 <TextField
@@ -263,7 +263,7 @@ export const ScheduleSettingsPage = ({
               </Box>
 
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
                     ? t("schedule_settings.labels.start_from_label")
                     : t("schedule_settings.labels.start_from_label")}
@@ -288,7 +288,7 @@ export const ScheduleSettingsPage = ({
 
               {settings.runEveryUnit === "MONTHS" && (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
                     {t("schedule_settings.labels.on_day_of_month")}
                   </Typography>
                   <TextField
@@ -305,10 +305,10 @@ export const ScheduleSettingsPage = ({
 
               {["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Box sx={{ marginRight: "20px" }}>
-                    <Typography sx={{ marginBottom: "5px" }}>
-                      {t("schedule_settings.labels.in_between")}
-                    </Typography>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
+                    {t("schedule_settings.labels.in_between")}
+                  </Typography>
+                  <Box sx={{ display: "flex", gap: 1 }}>
                     <TextField
                       type="time"
                       value={settings.atTimeStart}
@@ -329,7 +329,7 @@ export const ScheduleSettingsPage = ({
                 </Box>
               ) : (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
                     {t("schedule_settings.at_around")}
                   </Typography>
                   <TextField
@@ -344,7 +344,7 @@ export const ScheduleSettingsPage = ({
               )}
 
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginRight: "10px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {t("schedule_settings.timezone")}
                 </Typography>
                 <Dropdown
@@ -370,4 +370,4 @@ export const ScheduleSettingsPage = ({
       </Box>
     </RobotConfigPage>
   );
-};
+}

From 3b56d865c974c0411a74ff6827661102bc8f9312 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:03:59 +0530
Subject: [PATCH 14/22] feat: reduce width to 230

---
 src/components/dashboard/MainMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/MainMenu.tsx b/src/components/dashboard/MainMenu.tsx
index 8b500d62..cd98ef21 100644
--- a/src/components/dashboard/MainMenu.tsx
+++ b/src/components/dashboard/MainMenu.tsx
@@ -72,7 +72,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
       <Paper
         sx={{
           height: '100%',
-          width: '250px',
+          width: '230px',
           backgroundColor: theme.palette.background.paper,
           paddingTop: '0.5rem',
           color: defaultcolor,

From 439a60d2985370c56cb1db555e85a6abbcb72ece Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:04:15 +0530
Subject: [PATCH 15/22] feat: reduce width to 230

---
 src/pages/MainPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 65647182..7757ebca 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -322,7 +322,7 @@ return (
   <Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
     {/* Sticky Sidebar */}
     <Box sx={{ 
-      width: 250,
+      width: 230,
       flexShrink: 0,
       position: 'sticky',
       top: 64, // Height of NavBar

From 5727405fb2a0312dff9018f4d59006acc3244586 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:04:38 +0530
Subject: [PATCH 16/22] chore: cleanup

---
 src/pages/MainPage.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 7757ebca..4f302135 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -320,20 +320,18 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
 
 return (
   <Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
-    {/* Sticky Sidebar */}
     <Box sx={{ 
       width: 230,
       flexShrink: 0,
       position: 'sticky',
-      top: 64, // Height of NavBar
+      top: 64,
       height: 'calc(100vh - 64px)', 
-      overflowY: 'auto', // Allow scrolling if menu content is too long
+      overflowY: 'auto',
       zIndex: 1000 
     }}>
       <MainMenu value={content} handleChangeContent={setContent} />
     </Box>
     
-    {/* Scrollable Content Area - Fills remaining space */}
     <Box sx={{ 
       flex: 1,
       minWidth: 0, 

From 1b5a236246f41fac96fd73e33f44eb611d836ca4 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:05:42 +0530
Subject: [PATCH 17/22] feat: match left & right margins

---
 src/components/api/ApiKey.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 1e0386c9..88856ba8 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -27,6 +27,7 @@ const Container = styled(Box)`
   align-items: center;
   margin-top: 50px;
   margin-left: 50px;
+  margin-right: 50px;
 `;
 
 const ApiKeyManager = () => {

From 5ab8455c04e016bf3e44fe7c87646eefcb13b755 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:06:33 +0530
Subject: [PATCH 18/22] chore: remove unused import

---
 src/components/robot/pages/ScheduleSettingsPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/robot/pages/ScheduleSettingsPage.tsx b/src/components/robot/pages/ScheduleSettingsPage.tsx
index 9f308487..8933044b 100644
--- a/src/components/robot/pages/ScheduleSettingsPage.tsx
+++ b/src/components/robot/pages/ScheduleSettingsPage.tsx
@@ -7,7 +7,6 @@ import {
   Box,
   Button,
 } from "@mui/material";
-import { Schedule } from "@mui/icons-material";
 import { Dropdown } from "../../ui/DropdownMui";
 import { validMomentTimezones } from "../../../constants/const";
 import { useGlobalInfoStore } from "../../../context/globalInfo";

From 4c5191f0a0d1647ccc31d8ddf8737f93dab79370 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:12:07 +0530
Subject: [PATCH 19/22] feat:  use sidebar layout for main app pages only

---
 src/pages/PageWrapper.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/PageWrapper.tsx b/src/pages/PageWrapper.tsx
index 83004fcc..1af53681 100644
--- a/src/pages/PageWrapper.tsx
+++ b/src/pages/PageWrapper.tsx
@@ -85,26 +85,29 @@ export const PageWrapper = () => {
       }
     }
   }, [location.pathname, navigate, setBrowserId, setRecordingId, setRecordingName, setRecordingUrl]);
+
+  const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
+  const isRecordingPage = location.pathname === '/recording';
   
   return (
     <div>
       <AuthProvider>
         <SocketProvider>
           <React.Fragment>
-            {/* Sticky NavBar - only show on non-recording pages */}
-            {location.pathname !== '/recording' && (
+            {/* Show NavBar only for main app pages, not for recording pages */}
+            {!isRecordingPage && (
               <Box sx={{ 
                 position: 'sticky', 
                 top: 0, 
                 zIndex: 1100,
-                backgroundColor: 'background.paper' 
+                backgroundColor: 'background.paper'
               }}>
                 <NavBar recordingName={recordingName} isRecording={false} />
               </Box>
             )}
             <Box sx={{ 
-              display: 'flex', 
-              minHeight: location.pathname !== '/recording' ? 'calc(100vh - 64px)' : '100vh' 
+              display: isAuthPage || isRecordingPage ? 'block' : 'flex', 
+              minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
             }}>
               <Routes>
                 <Route element={<UserRoute />}>

From 8565c36c6c6398d7c25d5463facb47110e7555c3 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:18:49 +0530
Subject: [PATCH 20/22] fix: revert api key hidden

---
 src/components/api/ApiKey.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 88856ba8..b291a20c 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -140,8 +140,8 @@ const ApiKeyManager = () => {
               <TableRow>
                 <TableCell>{apiKeyName}</TableCell>
                 <TableCell>
-                  <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
-                    {showKey ? `${apiKey?.substring(0, 20)}...` : '***************'}
+                  <Box sx={{ fontFamily: 'monospace', width: '20ch' }}>
+                    {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
                   </Box>
                 </TableCell>
                 <TableCell>

From 3ca125a0971a58ce999ec5b28b059dc2f358730a Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:19:28 +0530
Subject: [PATCH 21/22] feat: increase side margins of api key table

---
 src/components/api/ApiKey.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index b291a20c..27897169 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -26,8 +26,8 @@ const Container = styled(Box)`
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
-  margin-left: 50px;
-  margin-right: 50px;
+  margin-left: 70px;
+  margin-right: 70px;
 `;
 
 const ApiKeyManager = () => {

From 5a18f61115e95ac7c2529cd1b3697ae85f7be876 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 22:33:41 +0530
Subject: [PATCH 22/22] fix: rename to extracting data

---
 public/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index c9f218d8..da0ebcc7 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -580,7 +580,7 @@
       "buttons": {
         "stop": "Stop"
       },
-      "loading": "Loading data...",
+      "loading": "Extracting data...",
       "empty_output": "No output data available",
       "captured_data": {
         "title": "Captured Data",