Added tree-like hierarchy to active scripts

src/ui/ActiveScripts/ServerAccordion.tsx

@@ -10,6 +10,7 @@ import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 
 import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import ExpandLess from "@mui/icons-material/ExpandLess";
@@ -43,14 +44,16 @@ export function ServerAccordion(props: IProps): React.ReactElement {
   const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`;
 
   return (
-    <>
-      <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
+    <Box component={Paper}>
+      <ListItemButton onClick={() => setOpen((old) => !old)}>
         <ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{headerTxt}</Typography>} />
         {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
       </ListItemButton>
-      <Collapse in={open} timeout={0} unmountOnExit>
-        <ServerAccordionContent workerScripts={props.workerScripts} />
-      </Collapse>
-    </>
+      <Box mx={2}>
+        <Collapse in={open} timeout={0} unmountOnExit>
+          <ServerAccordionContent workerScripts={props.workerScripts} />
+        </Collapse>
+      </Box>
+    </Box>
   );
 }

src/ui/ActiveScripts/ServerAccordionContent.tsx

@@ -27,7 +27,7 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
 
   return (
     <>
-      <List>
+      <List dense disablePadding>
         {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
           <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />
         ))}

src/ui/ActiveScripts/ServerAccordions.tsx

@@ -9,6 +9,7 @@ import { ServerAccordion } from "./ServerAccordion";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
 import List from "@mui/material/List";
 import TablePagination from "@mui/material/TablePagination";
 import { WorkerScript } from "../../Netscript/WorkerScript";
@@ -103,7 +104,7 @@ export function ServerAccordions(props: IProps): React.ReactElement {
           spellCheck: false,
         }}
       />
-      <List>
+      <List dense={true}>
         {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
           return (
             data && (

src/ui/ActiveScripts/WorkerScriptAccordion.tsx

@@ -59,11 +59,13 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
   return (
     <>
       <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
-        <ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{props.workerScript.name}</Typography>} />
+        <ListItemText
+          primary={<Typography style={{ whiteSpace: "pre-wrap" }}>└ {props.workerScript.name}</Typography>}
+        />
         {open ? <ExpandLess /> : <ExpandMore />}
       </ListItemButton>
       <Collapse in={open} timeout={0} unmountOnExit>
-        <Box m={3}>
+        <Box mx={4}>
           <pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre>
           <pre>Args: {arrayToString(props.workerScript.args)}</pre>
           <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>