Active Scripts

2024-11-26 09:33:49 +01:00 · 2021-09-18 00:16:02 -04:00 · 2021-09-18 00:16:02 -04:00 · 1996deaf0a
commit 1996deaf0a
parent 907314e76b
17 changed files with 289 additions and 189 deletions
--- a/css/loader.scss
+++ b/css/loader.scss
@ -32,7 +32,7 @@

 .loaderoverlay {
  $spinnerBoxSize: 200px;
-  $themeColor: #6f3;
+  $themeColor: #0c0;

  position: absolute;
  width: 100%;
--- a/css/styles.scss
+++ b/css/styles.scss
@ -4,7 +4,7 @@
@import "reset";

 :root {
-  --my-font-color: #6f3;
+  --my-font-color: #0c0;
  --my-background-color: #000;
  --my-highlight-color: #fff;
  --my-prompt-color: #f92672;
--- a/src/Casino/Blackjack.tsx
+++ b/src/Casino/Blackjack.tsx
@ -340,15 +340,13 @@ export class Blackjack extends Game<Props, State> {
        {/* Buttons */}
        {!gameInProgress ? (
          <div>
-            <MuiButton color="primary" onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
+            <MuiButton onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
              Start
            </MuiButton>
          </div>
        ) : (
          <div>
-            <MuiButton color="primary" onClick={this.playerHit}>
-              Hit
-            </MuiButton>
+            <MuiButton onClick={this.playerHit}>Hit</MuiButton>
            <MuiButton color="secondary" onClick={this.playerStay}>
              Stay
            </MuiButton>
--- a/src/DevMenu/ui/Adjuster.tsx
+++ b/src/DevMenu/ui/Adjuster.tsx
@ -37,12 +37,12 @@ export function Adjuster(props: IProps): React.ReactElement {
          startAdornment: (
            <>
              <Tooltip title="Add a lot">
-                <IconButton color="primary" onClick={tons} size="large">
+                <IconButton onClick={tons} size="large">
                  <DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />
                </IconButton>
              </Tooltip>
              <Tooltip title="Add">
-                <IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
+                <IconButton onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
                  <AddIcon />
                </IconButton>
              </Tooltip>
@ -51,16 +51,12 @@ export function Adjuster(props: IProps): React.ReactElement {
          endAdornment: (
            <>
              <Tooltip title="Remove">
-                <IconButton
-                  color="primary"
-                  onClick={() => subtract(typeof value !== "string" ? value : 0)}
-                  size="large"
-                >
+                <IconButton onClick={() => subtract(typeof value !== "string" ? value : 0)} size="large">
                  <RemoveIcon />
                </IconButton>
              </Tooltip>
              <Tooltip title="Reset">
-                <IconButton color="primary" onClick={reset} size="large">
+                <IconButton onClick={reset} size="large">
                  <ClearIcon />
                </IconButton>
              </Tooltip>
--- a/src/DevMenu/ui/Augmentations.tsx
+++ b/src/DevMenu/ui/Augmentations.tsx
@ -53,23 +53,21 @@ export function Augmentations(props: IProps): React.ReactElement {
              </td>
              <td>
                <Select
-                  id="dev-augs-dropdown"
-                  className="dropdown"
                  onChange={setAugmentationDropdown}
                  value={augmentation}
                  startAdornment={
                    <>
-                      <IconButton color="primary" onClick={queueAllAugs} size="large">
+                      <IconButton onClick={queueAllAugs} size="large">
                        <ReplyAllIcon />
                      </IconButton>
-                      <IconButton color="primary" onClick={queueAug} size="large">
+                      <IconButton onClick={queueAug} size="large">
                        <ReplyIcon />
                      </IconButton>
                    </>
                  }
                  endAdornment={
                    <>
-                      <IconButton color="primary" onClick={clearAugs} size="large">
+                      <IconButton onClick={clearAugs} size="large">
                        <ClearIcon />
                      </IconButton>
                    </>
--- a/src/DevMenu/ui/Factions.tsx
+++ b/src/DevMenu/ui/Factions.tsx
@ -119,10 +119,10 @@ export function Factions(props: IProps): React.ReactElement {
                    value={faction}
                    startAdornment={
                      <>
-                        <IconButton color="primary" onClick={receiveAllInvites} size="large">
+                        <IconButton onClick={receiveAllInvites} size="large">
                          <ReplyAllIcon />
                        </IconButton>
-                        <IconButton color="primary" onClick={receiveInvite} size="large">
+                        <IconButton onClick={receiveInvite} size="large">
                          <ReplyIcon />
                        </IconButton>
                      </>
--- a/src/Fconf/Fconf.js
+++ b/src/Fconf/Fconf.js
@ -207,10 +207,10 @@ function setTheme() {
    /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_BACKGROUND_COLOR) &&
    /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_PROMPT_COLOR)
  ) {
-    document.body.style.setProperty("--my-highlight-color", FconfSettings.THEME_HIGHLIGHT_COLOR);
-    document.body.style.setProperty("--my-font-color", FconfSettings.THEME_FONT_COLOR);
-    document.body.style.setProperty("--my-background-color", FconfSettings.THEME_BACKGROUND_COLOR);
-    document.body.style.setProperty("--my-prompt-color", FconfSettings.THEME_PROMPT_COLOR);
+    // document.body.style.setProperty("--my-highlight-color", FconfSettings.THEME_HIGHLIGHT_COLOR);
+    // document.body.style.setProperty("--my-font-color", FconfSettings.THEME_FONT_COLOR);
+    // document.body.style.setProperty("--my-background-color", FconfSettings.THEME_BACKGROUND_COLOR);
+    // document.body.style.setProperty("--my-prompt-color", FconfSettings.THEME_PROMPT_COLOR);
  }
 }

--- a/src/NetscriptWorker.js
+++ b/src/NetscriptWorker.js
@ -586,7 +586,7 @@ export function createAndAddWorkerScript(runningScriptObj, server, parent) {
 * Updates the online running time stat of all running scripts
 */
 export function updateOnlineScriptTimes(numCycles = 1) {
-  var time = (numCycles * Engine._idleSpeed) / 1000; //seconds
+  var time = (numCycles * CONSTANTS._idleSpeed) / 1000; //seconds
  for (const ws of workerScripts.values()) {
    ws.scriptRef.onlineRunningTime += time;
  }
--- a/src/Sidebar/ui/SidebarRoot.tsx
+++ b/src/Sidebar/ui/SidebarRoot.tsx
@ -333,18 +333,18 @@ export function SidebarRoot(props: IProps): React.ReactElement {
    <Drawer open={open} anchor="left" variant="permanent">
      <ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
        <ListItemIcon>
-          {!open ? <ChevronRightIcon color={"primary"} /> : <ChevronLeftIcon color={"primary"} />}
+          {!open ? <ChevronRightIcon color="primary" /> : <ChevronLeftIcon color="primary" />}
        </ListItemIcon>
-        <ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />
+        <ListItemText primary={<Typography>Bitburner v{CONSTANTS.Version}</Typography>} />
      </ListItem>
      <Divider />
      <List>
        <ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
          <ListItemIcon>
-            <ComputerIcon color={"primary"} />
+            <ComputerIcon color="primary" />
          </ListItemIcon>
-          <ListItemText primary={<Typography color="primary">Hacking</Typography>} />
-          {hackingOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
+          <ListItemText primary={<Typography>Hacking</Typography>} />
+          {hackingOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ListItem>
        <Collapse in={hackingOpen} timeout="auto" unmountOnExit>
          <List>
@ -435,10 +435,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
        <Divider />
        <ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
          <ListItemIcon>
-            <AccountBoxIcon color={"primary"} />
+            <AccountBoxIcon color="primary" />
          </ListItemIcon>
-          <ListItemText primary={<Typography color="primary">Character</Typography>} />
-          {characterOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
+          <ListItemText primary={<Typography>Character</Typography>} />
+          {characterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ListItem>
        <Collapse in={characterOpen} timeout="auto" unmountOnExit>
          <ListItem
@ -545,10 +545,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
        <Divider />
        <ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
          <ListItemIcon>
-            <PublicIcon color={"primary"} />
+            <PublicIcon color="primary" />
          </ListItemIcon>
-          <ListItemText primary={<Typography color="primary">World</Typography>} />
-          {worldOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
+          <ListItemText primary={<Typography>World</Typography>} />
+          {worldOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ListItem>
        <Collapse in={worldOpen} timeout="auto" unmountOnExit>
          <ListItem
@ -678,10 +678,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
        <Divider />
        <ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
          <ListItemIcon>
-            <LiveHelpIcon color={"primary"} />
+            <LiveHelpIcon color="primary" />
          </ListItemIcon>
-          <ListItemText primary={<Typography color="primary">Help</Typography>} />
-          {helpOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
+          <ListItemText primary={<Typography>Help</Typography>} />
+          {helpOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ListItem>
        <Collapse in={helpOpen} timeout="auto" unmountOnExit>
          <ListItem
--- a/src/ui/ActiveScripts/ActiveScriptsRoot.tsx
+++ b/src/ui/ActiveScripts/ActiveScriptsRoot.tsx
@ -10,6 +10,7 @@ import { ServerAccordions } from "./ServerAccordions";
 import { WorkerScript } from "../../Netscript/WorkerScript";

 import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";

 type IProps = {
  workerScripts: Map<number, WorkerScript>;
--- a/src/ui/ActiveScripts/ServerAccordion.tsx
+++ b/src/ui/ActiveScripts/ServerAccordion.tsx
@ -5,10 +5,14 @@
 import * as React from "react";

 import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+
+import Paper from "@mui/material/Paper";
+import Collapse from "@mui/material/Collapse";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import ExpandLess from "@mui/icons-material/ExpandLess";
 import { ServerAccordionContent } from "./ServerAccordionContent";

 import { BaseServer } from "../../Server/BaseServer";
@ -22,6 +26,7 @@ type IProps = {
 };

 export function ServerAccordion(props: IProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
  const server = props.server;

  // Accordion's header text
@ -38,15 +43,14 @@ export function ServerAccordion(props: IProps): React.ReactElement {
  const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`;

  return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography style={{ whiteSpace: "pre-wrap" }} color="primary">
-          {headerTxt}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails>
+    <>
+      <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
+        <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} />
-      </AccordionDetails>
-    </Accordion>
+      </Collapse>
+    </>
  );
 }
--- a/src/ui/ActiveScripts/ServerAccordionContent.tsx
+++ b/src/ui/ActiveScripts/ServerAccordionContent.tsx
@ -2,6 +2,10 @@ import React, { useState } from "react";
 import { WorkerScript } from "../../Netscript/WorkerScript";
 import { WorkerScriptAccordion } from "./WorkerScriptAccordion";
 import { AccordionButton } from "../React/AccordionButton";
+import Paper from "@mui/material/Paper";
+import List from "@mui/material/List";
+import TablePagination from "@mui/material/TablePagination";
+import { TablePaginationActionsAll } from "../React/TablePaginationActionsAll";

 const pageSize = 20;

@ -10,63 +14,34 @@ interface IProps {
 }

 export function ServerAccordionContent(props: IProps): React.ReactElement {
-  if (props.workerScripts.length > pageSize) {
-    return <ServerAccordionContentPaginated workerScripts={props.workerScripts} />;
-  }
-
-  return (
-    <ul>
-      {props.workerScripts.map((ws) => {
-        return <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />;
-      })}
-    </ul>
-  );
-}
-
-export function ServerAccordionContentPaginated(props: IProps): React.ReactElement {
  const [page, setPage] = useState(0);
-  const scripts: React.ReactElement[] = [];
-  const maxPage = Math.ceil(props.workerScripts.length / pageSize);
-  const maxScript = Math.min((page + 1) * pageSize, props.workerScripts.length);
-  for (let i = page * pageSize; i < maxScript; i++) {
-    const ws = props.workerScripts[i];
-    scripts.push(<WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />);
-  }
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };

-  function capPage(page: number): number {
-    if (page < 0) {
-      page = 0;
-    }
-
-    if (maxPage - 1 < page) {
-      page = maxPage - 1;
-    }
-
-    return page;
-  }
-
-  // in case we're on an invalid page number because scripts were killed.
-  const capped = capPage(page);
-  if (capped !== page) setPage(capped);
-
-  function changePage(n: number): void {
-    setPage((newPage) => {
-      newPage += n;
-      newPage = Math.round(newPage);
-      return capPage(newPage);
-    });
-  }
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };

  return (
    <>
-      <ul>{scripts}</ul>
-      <AccordionButton onClick={() => changePage(-1e99)} text="<<" />
-      <AccordionButton onClick={() => changePage(-1)} text="<" />
-      <span className="text">
-        {page + 1} / {maxPage}
-      </span>
-      <AccordionButton onClick={() => changePage(1)} text=">" />
-      <AccordionButton onClick={() => changePage(1e99)} text=">>" />
+      <List>
+        {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
+          <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />
+        ))}
+      </List>
+      <TablePagination
+        rowsPerPageOptions={[10, 15, 20]}
+        component="div"
+        count={props.workerScripts.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        ActionsComponent={TablePaginationActionsAll}
+      />
    </>
  );
 }
--- a/src/ui/ActiveScripts/ServerAccordions.tsx
+++ b/src/ui/ActiveScripts/ServerAccordions.tsx
@ -6,10 +6,16 @@ import React, { useState, useEffect } from "react";

 import { ServerAccordion } from "./ServerAccordion";

+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import List from "@mui/material/List";
+import TablePagination from "@mui/material/TablePagination";
 import { WorkerScript } from "../../Netscript/WorkerScript";
 import { WorkerScriptStartStopEventEmitter } from "../../Netscript/WorkerScriptStartStopEventEmitter";
 import { getServer } from "../../Server/ServerHelpers";
 import { BaseServer } from "../../Server/BaseServer";
+import { TablePaginationActionsAll } from "../React/TablePaginationActionsAll";

 // Map of server hostname -> all workerscripts on that server for all active scripts
 interface IServerData {
@ -32,6 +38,9 @@ type IState = {
 const subscriberId = "ActiveScriptsUI";

 export function ServerAccordions(props: IProps): React.ReactElement {
+  const [filter, setFilter] = useState("");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
  const setRerender = useState(false)[1];
  function rerender(): void {
    setRerender((old) => !old);
@ -45,6 +54,20 @@ export function ServerAccordions(props: IProps): React.ReactElement {
    return () => WorkerScriptStartStopEventEmitter.removeSubscriber(subscriberId);
  }, []);

+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setFilter(event.target.value);
+    setPage(0);
+  }
+
  const serverToScriptMap: IServerToScriptsMap = {};
  for (const ws of props.workerScripts.values()) {
    const server = getServer(ws.serverIp);
@ -65,13 +88,40 @@ export function ServerAccordions(props: IProps): React.ReactElement {
    if (data !== undefined) data.workerScripts.push(ws);
  }

+  const filtered = Object.values(serverToScriptMap).filter((data) => data && data.server.hostname.includes(filter));
+
  return (
-    <ul className="active-scripts-list" id="active-scripts-list">
-      {Object.values(serverToScriptMap).map((data) => {
-        return (
-          data && <ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
-        );
-      })}
-    </ul>
+    <>
+      <TextField
+        value={filter}
+        onChange={handleFilterChange}
+        color="primary"
+        autoFocus
+        variant="standard"
+        InputProps={{
+          startAdornment: <Typography m={1}>Filter:</Typography>,
+          spellCheck: false,
+        }}
+      />
+      <List>
+        {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
+          return (
+            data && (
+              <ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
+            )
+          );
+        })}
+      </List>
+      <TablePagination
+        rowsPerPageOptions={[10, 15, 20]}
+        component="div"
+        count={filtered.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        ActionsComponent={TablePaginationActionsAll}
+      />
+    </>
  );
 }
--- a/src/ui/ActiveScripts/WorkerScriptAccordion.tsx
+++ b/src/ui/ActiveScripts/WorkerScriptAccordion.tsx
@ -7,6 +7,8 @@ import * as React from "react";
 import { numeralWrapper } from "../numeralFormat";

 import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
@ -15,6 +17,12 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { AccordionButton } from "../React/AccordionButton";
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+
+import Collapse from "@mui/material/Collapse";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import ExpandLess from "@mui/icons-material/ExpandLess";

 import { killWorkerScript } from "../../Netscript/killWorkerScript";
 import { WorkerScript } from "../../Netscript/WorkerScript";
@ -30,6 +38,7 @@ type IProps = {
 };

 export function WorkerScriptAccordion(props: IProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
  const workerScript = props.workerScript;
  const scriptRef = workerScript.scriptRef;

@ -48,39 +57,42 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
  const offlineEps = scriptRef.offlineExpGained / scriptRef.offlineRunningTime;

  return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography color="primary">{props.workerScript.name}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre>
-        <pre>Args: {arrayToString(props.workerScript.args)}</pre>
-        <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>
-        <pre>Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}</pre>
-        <pre>
-          Total online production: <Money money={scriptRef.onlineMoneyMade} />
-        </pre>
-        <pre>{Array(26).join(" ") + numeralWrapper.formatExp(scriptRef.onlineExpGained) + " hacking exp"}</pre>
-        <pre>
-          Online production rate: <Money money={onlineMps} /> / second
-        </pre>
-        <pre>{Array(25).join(" ") + numeralWrapper.formatExp(onlineEps) + " hacking exp / second"}</pre>
-        <pre>
-          Total offline production: <Money money={scriptRef.offlineMoneyMade} />
-        </pre>
-        <pre>{Array(27).join(" ") + numeralWrapper.formatExp(scriptRef.offlineExpGained) + " hacking exp"}</pre>
-        <pre>
-          Offline production rate: <Money money={offlineMps} /> / second
-        </pre>
-        <pre>{Array(26).join(" ") + numeralWrapper.formatExp(offlineEps) + " hacking exp / second"}</pre>
+    <>
+      <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
+        <ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{props.workerScript.name}</Typography>} />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={open} timeout={0} unmountOnExit>
+        <Box m={3}>
+          <pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre>
+          <pre>Args: {arrayToString(props.workerScript.args)}</pre>
+          <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>
+          <pre>Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}</pre>
+          <pre>
+            Total online production: <Money money={scriptRef.onlineMoneyMade} />
+          </pre>
+          <pre>{Array(26).join(" ") + numeralWrapper.formatExp(scriptRef.onlineExpGained) + " hacking exp"}</pre>
+          <pre>
+            Online production rate: <Money money={onlineMps} /> / second
+          </pre>
+          <pre>{Array(25).join(" ") + numeralWrapper.formatExp(onlineEps) + " hacking exp / second"}</pre>
+          <pre>
+            Total offline production: <Money money={scriptRef.offlineMoneyMade} />
+          </pre>
+          <pre>{Array(27).join(" ") + numeralWrapper.formatExp(scriptRef.offlineExpGained) + " hacking exp"}</pre>
+          <pre>
+            Offline production rate: <Money money={offlineMps} /> / second
+          </pre>
+          <pre>{Array(26).join(" ") + numeralWrapper.formatExp(offlineEps) + " hacking exp / second"}</pre>

-        <Button onClick={logClickHandler}>
-          <Typography>Log</Typography>
-        </Button>
-        <IconButton onClick={killScriptClickHandler}>
-          <DeleteIcon color="error" />
-        </IconButton>
-      </AccordionDetails>
-    </Accordion>
+          <Button onClick={logClickHandler}>
+            <Typography>Log</Typography>
+          </Button>
+          <IconButton onClick={killScriptClickHandler}>
+            <DeleteIcon color="error" />
+          </IconButton>
+        </Box>
+      </Collapse>
+    </>
  );
 }
--- a/src/ui/React/GameOptionsRoot.tsx
+++ b/src/ui/React/GameOptionsRoot.tsx
@ -257,7 +257,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            </ListItem>
            <ListItem>
              <FormControlLabel
-                control={<Switch color="primary" checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
+                control={<Switch checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
                label={
                  <Tooltip
                    title={
@ -275,13 +275,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            </ListItem>
            <ListItem>
              <FormControlLabel
-                control={
-                  <Switch
-                    color="primary"
-                    checked={suppressFactionInvites}
-                    onChange={handleSuppressFactionInvitesChange}
-                  />
-                }
+                control={<Switch checked={suppressFactionInvites} onChange={handleSuppressFactionInvitesChange} />}
                label={
                  <Tooltip
                    title={
@ -299,11 +293,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            <ListItem>
              <FormControlLabel
                control={
-                  <Switch
-                    color="primary"
-                    checked={suppressTravelConfirmations}
-                    onChange={handleSuppressTravelConfirmationsChange}
-                  />
+                  <Switch checked={suppressTravelConfirmations} onChange={handleSuppressTravelConfirmationsChange} />
                }
                label={
                  <Tooltip
@ -323,7 +313,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
              <FormControlLabel
                control={
                  <Switch
-                    color="primary"
                    checked={suppressBuyAugmentationConfirmation}
                    onChange={handleSuppressBuyAugmentationConfirmationChange}
                  />
@ -344,11 +333,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            <ListItem>
              <FormControlLabel
                control={
-                  <Switch
-                    color="primary"
-                    checked={suppressHospitalizationPopup}
-                    onChange={handleSuppressHospitalizationPopupChange}
-                  />
+                  <Switch checked={suppressHospitalizationPopup} onChange={handleSuppressHospitalizationPopupChange} />
                }
                label={
                  <Tooltip
@ -368,11 +353,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
              <ListItem>
                <FormControlLabel
                  control={
-                    <Switch
-                      color="primary"
-                      checked={suppressBladeburnerPopup}
-                      onChange={handleSuppressBladeburnerPopupChange}
-                    />
+                    <Switch checked={suppressBladeburnerPopup} onChange={handleSuppressBladeburnerPopupChange} />
                  }
                  label={
                    <Tooltip
@ -391,7 +372,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            )}
            <ListItem>
              <FormControlLabel
-                control={<Switch color="primary" checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
+                control={<Switch checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
                label={
                  <Tooltip
                    title={
@ -409,7 +390,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            </ListItem>
            <ListItem>
              <FormControlLabel
-                control={<Switch color="primary" checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
+                control={<Switch checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
                label={
                  <Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
                    <Typography>Disable ascii art</Typography>
@ -419,9 +400,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
            </ListItem>
            <ListItem>
              <FormControlLabel
-                control={
-                  <Switch color="primary" checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />
-                }
+                control={<Switch checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />}
                label={
                  <Tooltip
                    title={
--- a/src/ui/React/TablePaginationActionsAll.tsx
+++ b/src/ui/React/TablePaginationActionsAll.tsx
@ -0,0 +1,69 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableFooter from "@mui/material/TableFooter";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import IconButton from "@mui/material/IconButton";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import LastPageIcon from "@mui/icons-material/LastPage";
+
+interface TablePaginationActionsProps {
+  count: number;
+  page: number;
+  rowsPerPage: number;
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+
+export function TablePaginationActionsAll(props: TablePaginationActionsProps) {
+  const theme = useTheme();
+  const { count, page, rowsPerPage, onPageChange } = props;
+
+  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, 0);
+  };
+
+  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page - 1);
+  };
+
+  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page + 1);
+  };
+
+  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
+        {theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+        {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </Box>
+  );
+}
--- a/src/ui/React/Theme.tsx
+++ b/src/ui/React/Theme.tsx
@ -23,6 +23,10 @@ export const colors = {
  warning: "#cc0",
  warningdark: "#990",

+  infolight: "#69f",
+  info: "#36c",
+  infodark: "#039",
+
  welllight: "#444",
  well: "#222",
  white: "#fff",
@ -53,6 +57,11 @@ export const theme = createTheme({
      main: colors.error,
      dark: colors.errordark,
    },
+    info: {
+      light: colors.infolight,
+      main: colors.info,
+      dark: colors.infodark,
+    },
    warning: {
      light: colors.warninglight,
      main: colors.warning,
@ -73,6 +82,7 @@ export const theme = createTheme({
      styleOverrides: {
        root: {
          backgroundColor: colors.well,
+          color: colors.primary,
        },
        input: {
          "&::placeholder": {
@ -114,22 +124,22 @@ export const theme = createTheme({
        },
      },
    },
-    // MuiButton: {
-    //   styleOverrides: {
-    //     root: {
-    //       backgroundColor: "#333",
-    //       border: "1px solid " + colors.well,
-    //       // color: colors.primary,
-    //       margin: "5px",
-    //       padding: "3px 5px",
-    //       "&:hover": {
-    //         backgroundColor: colors.black,
-    //       },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#333",
+          border: "1px solid " + colors.well,
+          // color: colors.primary,
+          margin: "5px",
+          padding: "3px 5px",
+          "&:hover": {
+            backgroundColor: colors.black,
+          },

-    //       borderRadius: 0,
-    //     },
-    //   },
-    // },
+          borderRadius: 0,
+        },
+      },
+    },
    MuiSelect: {
      styleOverrides: {
        icon: {
@ -233,11 +243,19 @@ export const theme = createTheme({
    MuiPaper: {
      styleOverrides: {
        root: {
+          borderRadius: 0,
          backgroundColor: colors.black,
          border: "1px solid " + colors.welllight,
        },
      },
    },
+    MuiTablePagination: {
+      styleOverrides: {
+        select: {
+          color: colors.primary,
+        },
+      },
+    },
  },
 });