Added Collapsible Sidebar

Data/Server/WebUI/src/Borealis.css

@@ -82,7 +82,7 @@
 input,
 select,
 button {
-    background-color: #2a2a2a;
+    background-color: #1d1d1d;
     color: #ccc;
     border: 1px solid #444;
     font-size: 12px;
@@ -91,7 +91,7 @@ button {
 /* Label / Dark Text styling */
 label {
     color: #aaa;
-    font-size: 10px;
+    font-size: 9px;
 }
 
 /* ======================================= */

Data/Server/WebUI/src/Node_Sidebar.jsx

@@ -7,7 +7,8 @@ import {
   AccordionDetails,
   Button,
   Tooltip,
-  Typography
+  Typography,
+  IconButton
 } from "@mui/material";
 import {
   ExpandMore as ExpandMoreIcon,
@@ -15,7 +16,9 @@ import {
   FileOpen as FileOpenIcon,
   DeleteForever as DeleteForeverIcon,
   DragIndicator as DragIndicatorIcon,
-  Polyline as PolylineIcon
+  Polyline as PolylineIcon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon
 } from "@mui/icons-material";
 
 export default function NodeSidebar({
@@ -27,6 +30,7 @@ export default function NodeSidebar({
   onFileInputChange
 }) {
   const [expandedCategory, setExpandedCategory] = useState(null);
+  const [collapsed, setCollapsed] = useState(false);
 
   const handleAccordionChange = (category) => (_, isExpanded) => {
     setExpandedCategory(isExpanded ? category : null);
@@ -35,12 +39,18 @@ export default function NodeSidebar({
   return (
     <div
       style={{
-        width: 300, //Width of the Node Sidebar
+        width: collapsed ? 40 : 300,
         backgroundColor: "#121212",
         borderRight: "1px solid #333",
-        overflowY: "auto"
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
       }}
     >
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {!collapsed && (
+          <>
             {/* Workflows Section */}
             <Accordion
               defaultExpanded
@@ -153,7 +163,7 @@ export default function NodeSidebar({
               </AccordionDetails>
             </Accordion>
 
-      {/* Hidden file input fallback for older browsers */}
+            {/* Hidden file input */}
             <input
               type="file"
               accept=".json,application/json"
@@ -161,6 +171,22 @@ export default function NodeSidebar({
               ref={fileInputRef}
               onChange={onFileInputChange}
             />
+          </>
+        )}
+      </div>
+
+      {/* Bottom toggle button */}
+      <div style={{ padding: "6px", borderTop: "1px solid #333", display: "flex", justifyContent: "center" }}>
+        <Tooltip title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"} placement="right">
+          <IconButton
+            onClick={() => setCollapsed(!collapsed)}
+            size="small"
+            sx={{ color: "#888" }}
+          >
+            {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          </IconButton>
+        </Tooltip>
+      </div>
     </div>
   );
 }

Data/Server/WebUI/src/nodes/Agents/Node_Agent.jsx

@@ -104,7 +104,7 @@ const BorealisAgentNode = ({ id, data }) => {
                 >
                     <option value="">-- Select --</option>
                     {Object.entries(agents).map(([id, info]) => {
-                        const label = info.status === "provisioned" ? "(Provisioned)" : "(Idle)";
+                        const label = info.status === "provisioned" ? "(Provisioned)" : "(Not Provisioned)";
                         return (
                             <option key={id} value={id}>
                                 {id} {label}
@@ -123,16 +123,8 @@ const BorealisAgentNode = ({ id, data }) => {
                 <hr style={{ margin: "6px 0", borderColor: "#444" }} />
 
                 <div style={{ fontSize: "8px", color: "#aaa" }}>
-                    Connect <strong>Instruction Nodes</strong> below to define roles.
-                    Each instruction node will send back its results (like screenshots) and act as a separate data output.
-                </div>
-
-                <div style={{ fontSize: "8px", color: "#aaa", marginTop: "4px" }}>
-                    <strong>Supported Roles:</strong>
-                    <ul style={{ paddingLeft: "14px", marginTop: "2px", marginBottom: "0" }}>
-                        <li><code>screenshot</code>: Capture a region with interval and overlay</li>
-                        {/* Future roles will be listed here */}
-                    </ul>
+                    Connect <strong>Agent Role Nodes</strong> below to define roles for this agent.
+                    Each connected <strong>Agent Role Node</strong> will send back its collected data (like screenshots) through the role node itself and act as a separate data output.
                 </div>
             </div>
         </div>

Data/Server/WebUI/tsconfig.json

@@ -21,5 +21,4 @@
   },
   "include": ["src"],
   "exclude": ["node_modules", "build", "dist"]
-  }
-  
+}