From 21c9416105c4b090f04e0cbee66ab6d5ac392123 Mon Sep 17 00:00:00 2001
From: ScriptSmith <ScriptSmith@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:55:03 +1000
Subject: [PATCH 1/2] Use CommandBox to group commands and example outputs

---
 src/components/output/CommandBox.js           |  65 +++++++++++
 src/components/output/CommandBox.stories.js   |  38 +++++++
 src/components/output/PreformattedBox.js      |   4 +-
 .../guide/Instructions/AccessInstructions.js  |   8 +-
 .../guide/Instructions/ConnectInstructions.js |   6 +-
 .../guide/Instructions/InstallInstructions.js | 103 ++++++++----------
 .../guide/Instructions/RunInstructions.js     |  13 +--
 .../guide/Instructions/StatusInstructions.js  |  76 +++++++------
 .../Instructions/TeardownInstructions.js      |   8 +-
 9 files changed, 211 insertions(+), 110 deletions(-)
 create mode 100644 src/components/output/CommandBox.js
 create mode 100644 src/components/output/CommandBox.stories.js

diff --git a/src/components/output/CommandBox.js b/src/components/output/CommandBox.js
new file mode 100644
index 00000000..f46660a0
--- /dev/null
+++ b/src/components/output/CommandBox.js
@@ -0,0 +1,65 @@
+import { Box, Heading, useColorModeValue } from "@chakra-ui/react";
+
+import PreformattedBox from "./PreformattedBox";
+
+function Header({ children }) {
+  return (
+    <Heading
+      size="xs"
+      border="1px"
+      backgroundColor={useColorModeValue("gray.100", "gray.800")}
+      borderColor={useColorModeValue("gray.200", "gray.500")}
+      // override docusaurus styling
+      m="0"
+      p="2"
+    >
+      {children}
+    </Heading>
+  );
+}
+
+export default function CommandBox({ command, output, editable }) {
+  return (
+    <Box border="1px" borderColor="gray.200" rounded="md" overflow="hidden">
+      <Box>
+        <Header>Command</Header>
+        <PreformattedBox
+          editable={editable}
+          type="input"
+          contentProps={{
+            ariaLabel: "Command text",
+            rounded: "",
+            ...(!output && { borderBottomRadius: "md" }),
+
+            // override docusaurus styling
+            borderRadius: "0",
+            mb: 0,
+          }}
+        >
+          {command}
+        </PreformattedBox>
+      </Box>
+      {output && (
+        <Box>
+          <Header>Output</Header>
+          <PreformattedBox
+            editable={editable}
+            type="output"
+            wrap={false}
+            contentProps={{
+              ariaLabel: "Output text",
+              rounded: "",
+              borderBottomRadius: "md",
+
+              // override docusaurus styling
+              borderRadius: "0",
+              mb: 0,
+            }}
+          >
+            {output}
+          </PreformattedBox>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/components/output/CommandBox.stories.js b/src/components/output/CommandBox.stories.js
new file mode 100644
index 00000000..13402bf6
--- /dev/null
+++ b/src/components/output/CommandBox.stories.js
@@ -0,0 +1,38 @@
+import CommandBox from "./CommandBox";
+
+export default {
+  title: "Outputs/CommandBox",
+  component: CommandBox,
+};
+
+export const CommandOnly = {
+  args: {
+    command: "ls -lah",
+  },
+};
+
+export const CommandAndOutput = {
+  args: {
+    command: "ls -lah",
+    output: "-rw-r--r-- 1 user group 0 Jan 01 00:00 file.txt",
+  },
+};
+
+export const MultilineCommandAndOutput = {
+  args: {
+    command: [
+      "echo 'Hello, world!' > file.txt",
+      "ls -lah",
+      "cat file.txt",
+    ].join("\n"),
+    output: `-rw-r--r-- 1 user group 0 Jan 01 00:00 file.txt
+Hello, world!`,
+  },
+};
+
+export const Editable = {
+  args: {
+    command: "ls -lah",
+    editable: true,
+  },
+};
diff --git a/src/components/output/PreformattedBox.js b/src/components/output/PreformattedBox.js
index a205f36e..b5b4e242 100644
--- a/src/components/output/PreformattedBox.js
+++ b/src/components/output/PreformattedBox.js
@@ -17,6 +17,7 @@ export default function PreformattedBox({
   type = "input",
   defaultRows = 10,
   wrap = true,
+  contentProps,
 }) {
   const [hover, setHover] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -26,7 +27,7 @@ export default function PreformattedBox({
   if (type === "input") {
     bg = useColorModeValue("gray.50", "gray.800");
   } else if (type === "output") {
-    bg = useColorModeValue("gray.300", "gray.700");
+    bg = useColorModeValue("gray.200", "gray.700");
   } else {
     bg = useColorModeValue("gray.50", "gray.800");
   }
@@ -64,6 +65,7 @@ export default function PreformattedBox({
         key={text}
         onSubmit={(e) => setText(e)}
         sx={wrapStyle}
+        {...contentProps}
       >
         {editable ? (
           <>
diff --git a/src/components/tool/guide/Instructions/AccessInstructions.js b/src/components/tool/guide/Instructions/AccessInstructions.js
index 4b9a84b1..fe8dabbc 100644
--- a/src/components/tool/guide/Instructions/AccessInstructions.js
+++ b/src/components/tool/guide/Instructions/AccessInstructions.js
@@ -1,6 +1,7 @@
 import { Code } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
+import CommandBox from "../../../output/CommandBox";
 import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -30,10 +31,9 @@ export function AccessInstructions({ service, port, node, username }) {
               </i>
             </InstructionText>
           )}
-          <PreformattedBox>
-            ssh -L {port}:{node || "node"}:{port} {username || "username"}
-            @lyra.qut.edu.au
-          </PreformattedBox>
+          <CommandBox
+            command={`ssh -L ${port}:${node || "node"}:${port} ${username || "username"}@lyra.qut.edu.au`}
+          />
         </>
       )}
       <InstructionHeading>Access the tool</InstructionHeading>
diff --git a/src/components/tool/guide/Instructions/ConnectInstructions.js b/src/components/tool/guide/Instructions/ConnectInstructions.js
index 614c4f0e..727f50a6 100644
--- a/src/components/tool/guide/Instructions/ConnectInstructions.js
+++ b/src/components/tool/guide/Instructions/ConnectInstructions.js
@@ -1,7 +1,7 @@
 import { Box, Code } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import AlertHelper from "../Config/AlertHelper";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -87,9 +87,7 @@ function LyraInstructions({ username }) {
           </i>
         </InstructionText>
       )}
-      <PreformattedBox>
-        ssh {username || "username"}@lyra.qut.edu.au
-      </PreformattedBox>
+      <CommandBox command={`ssh ${username || "username"}@lyra.qut.edu.au`} />
     </>
   );
 }
diff --git a/src/components/tool/guide/Instructions/InstallInstructions.js b/src/components/tool/guide/Instructions/InstallInstructions.js
index 542813d6..32cb4583 100644
--- a/src/components/tool/guide/Instructions/InstallInstructions.js
+++ b/src/components/tool/guide/Instructions/InstallInstructions.js
@@ -1,7 +1,7 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import AlertHelper from "../Config/AlertHelper";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -18,10 +18,9 @@ function SingularityBuildInstructions({ hardware, gpuVendor }) {
     }
   }
   return (
-    <PreformattedBox>
-      singularity build {containerName}{" "}
-      docker://ghcr.io/eresearchqut/ai-toolbox/hf_pipeline:{containerTag}
-    </PreformattedBox>
+    <CommandBox
+      command={`singularity build ${containerName} docker://ghcr.io/eresearchqut/ai-toolbox/hf_pipeline:${containerTag}`}
+    />
   );
 }
 function SingularityRunInstructions({ hardware, gpuVendor, service }) {
@@ -42,11 +41,9 @@ function SingularityRunInstructions({ hardware, gpuVendor, service }) {
     service === "Lyra" ? "/work/ai-toolbox/containers/" : "";
   let containerName = singularityContainerName(hardware, gpuVendor);
   return (
-    <PreformattedBox>
-      singularity run {argsString}
-      {containerLocation}
-      {containerName} bash
-    </PreformattedBox>
+    <CommandBox
+      command={`singularity run ${argsString}${containerLocation}${containerName} bash`}
+    />
   );
 }
 
@@ -119,25 +116,24 @@ export function InstallInstructions({
                     <InstructionText>
                       Download the latest version of micromamba
                     </InstructionText>
-                    <PreformattedBox>
-                      wget
-                      https://raw.githubusercontent.com/mamba-org/micromamba-releases/main/install.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={
+                        "wget https://raw.githubusercontent.com/mamba-org/micromamba-releases/main/install.sh"
+                      }
+                    />
                     <InstructionText>
                       Run the installer and follow the prompts to install
                       micromamba:
                     </InstructionText>
-                    <PreformattedBox>
-                      bash install.sh -p ~/micromamba
-                    </PreformattedBox>
+                    <CommandBox command={"bash install.sh -p ~/micromamba"} />
                     <InstructionText>
                       Create an alias for micromamba
                     </InstructionText>
-                    <PreformattedBox>
-                      {'echo "alias conda=micromamba" >> ~/.bashrc'}
-                    </PreformattedBox>
+                    <CommandBox
+                      command={"echo 'alias conda=micromamba' >> ~/.bashrc"}
+                    />
                     <InstructionText>Refresh the shell:</InstructionText>
-                    <PreformattedBox>source ~/.bashrc</PreformattedBox>
+                    <CommandBox command={"source ~/.bashrc"} />
                   </TabPanel>
                   <TabPanel>
                     <AlertHelper alertType="warning" alertDismissible={false}>
@@ -148,18 +144,19 @@ export function InstallInstructions({
                     <InstructionText>
                       Download the latest version of miniconda:
                     </InstructionText>
-                    <PreformattedBox>
-                      wget
-                      https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={
+                        "wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh"
+                      }
+                    />
                     <InstructionText>
                       Run the installer and follow the prompts to install conda:
                     </InstructionText>
-                    <PreformattedBox>
-                      bash Miniconda3-latest-Linux-x86_64.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={"bash Miniconda3-latest-Linux-x86_64.sh"}
+                    />
                     <InstructionText>Refresh the shell:</InstructionText>
-                    <PreformattedBox>source ~/.bashrc</PreformattedBox>
+                    <CommandBox command={"source ~/.bashrc"} />
                   </TabPanel>
                 </TabPanels>
               </Tabs>
@@ -169,26 +166,26 @@ export function InstallInstructions({
           <InstructionText>
             Create the conda environment (if it doesn&apos;t exist):
           </InstructionText>
-          <PreformattedBox>conda create --name hf</PreformattedBox>
+          <InstructionText>Create the conda environment:</InstructionText>
+          <CommandBox command={"conda create --name hf"} />
           <InstructionText>Activate the conda environment:</InstructionText>
-          <PreformattedBox>conda activate hf</PreformattedBox>
+          <CommandBox command={"conda activate hf"} />
           <InstructionText>Install the transformers package:</InstructionText>
-          <PreformattedBox>
-            conda install -c huggingface -c conda-forge transformers
-          </PreformattedBox>
+          <CommandBox
+            command={"conda install -c huggingface -c conda-forge transformers"}
+          />
           <InstructionText>Install pytorch:</InstructionText>
-          <PreformattedBox>
-            conda install -c pytorch -c nvidia -c conda-forge pytorch
-            torchvision torchaudio pytorch-cuda=12.1
-          </PreformattedBox>
+          <CommandBox
+            command={
+              "conda install -c pytorch -c nvidia -c conda-forge pytorch torchvision torchaudio pytorch-cuda=12.1"
+            }
+          />
           <InstructionText>Install the gradio package:</InstructionText>
-          <PreformattedBox>conda install -c conda-forge gradio</PreformattedBox>
+          <CommandBox command={"conda install -c conda-forge gradio"} />
           {isWorkstationNotebook && (
             <>
               <InstructionText>Install JupyterLab:</InstructionText>
-              <PreformattedBox>
-                conda install -c conda-forge jupyterlab
-              </PreformattedBox>
+              <CommandBox command={"conda install -c conda-forge jupyterlab"} />
             </>
           )}
         </>
@@ -218,15 +215,13 @@ export function InstallInstructions({
             <>
               <InstructionHeading>Python module</InstructionHeading>
               <InstructionText>Source the module script:</InstructionText>
-              <PreformattedBox>
-                source /etc/profile.d/modules.sh
-              </PreformattedBox>
+              <CommandBox command={"source /etc/profile.d/modules.sh"} />
               <InstructionText>Load the python module:</InstructionText>
-              <PreformattedBox>
-                module load python/3.10.8-gcccore-12.2.0-bare
-              </PreformattedBox>
+              <CommandBox
+                command={"module load python/3.10.8-gcccore-12.2.0-bare"}
+              />
               <InstructionText>Check the python version</InstructionText>
-              <PreformattedBox>python --version</PreformattedBox>
+              <CommandBox command={"python --version"} />
             </>
           )}
           <InstructionHeading>
@@ -235,17 +230,15 @@ export function InstallInstructions({
           <InstructionText>
             Create the virtual environment (if it doesn&apos;t exist):
           </InstructionText>
-          <PreformattedBox>python -m venv hf-venv</PreformattedBox>
+          <CommandBox command={"python -m venv hf-venv"} />
           <InstructionText>Activate the virtual environment:</InstructionText>
-          <PreformattedBox>source hf-venv/bin/activate</PreformattedBox>
+          <CommandBox command={"source hf-venv/bin/activate"} />
           <InstructionText>Install the base dependencies:</InstructionText>
-          <PreformattedBox>
-            pip install gradio &apos;transformers[torch]&apos;
-          </PreformattedBox>
+          <CommandBox command={"pip install gradio 'transformers[torch]'"} />
           {isWorkstationNotebook && (
             <>
               <InstructionText>Install JupyterLab:</InstructionText>
-              <PreformattedBox>pip install jupyterlab</PreformattedBox>
+              <CommandBox command={"pip install jupyterlab"} />
             </>
           )}
         </>
diff --git a/src/components/tool/guide/Instructions/RunInstructions.js b/src/components/tool/guide/Instructions/RunInstructions.js
index f438ceb7..cddc3703 100644
--- a/src/components/tool/guide/Instructions/RunInstructions.js
+++ b/src/components/tool/guide/Instructions/RunInstructions.js
@@ -1,6 +1,7 @@
 // TODO: Different operating systems
 import { Code } from "@chakra-ui/react";
 
+import CommandBox from "../../../output/CommandBox";
 import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -14,11 +15,9 @@ export function RunInstructions({ service, tool, task, model, port }) {
       {tool === "CLI" && (
         <>
           <InstructionText>Start the gradio server:</InstructionText>
-          <PreformattedBox>
-            gradio pipeline {task} --model={model}{" "}
-            --server-name=&quot;0.0.0.0&quot; --server-port={port}{" "}
-            --device-map=&quot;auto&quot;
-          </PreformattedBox>
+          <CommandBox
+            command={`gradio pipeline ${task} --model=${model} --server-name="0.0.0.0" --server-port=${port} --device-map="auto"`}
+          />
         </>
       )}
       {tool === "Script" && (
@@ -44,7 +43,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
 `}
           </PreformattedBox>
           <InstructionText>Run the script:</InstructionText>
-          <PreformattedBox>python hf_pipeline.py {port}</PreformattedBox>
+          <CommandBox command={`python hf_pipeline.py ${port}`} />
         </>
       )}
       {tool === "Notebook" && (
@@ -54,7 +53,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
               <InstructionText>
                 Run the following command to start the server:
               </InstructionText>
-              <PreformattedBox>python -m jupyterlab</PreformattedBox>
+              <CommandBox command={`python -m jupyterlab`} />
               <InstructionText>
                 Open the link to the jupyter server in your browser, and create
                 a new notebook.
diff --git a/src/components/tool/guide/Instructions/StatusInstructions.js b/src/components/tool/guide/Instructions/StatusInstructions.js
index fa9611c6..3de73a2e 100644
--- a/src/components/tool/guide/Instructions/StatusInstructions.js
+++ b/src/components/tool/guide/Instructions/StatusInstructions.js
@@ -2,7 +2,7 @@ import { Code, Table, Tbody, Td, Text, Th, Thead, Tr } from "@chakra-ui/react";
 
 import { useState } from "react";
 
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import InstructionInput from "./InstructionInput";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -29,17 +29,16 @@ export function LyraStatusInstructions({ jobType, jobName }) {
           />
           <InstructionHeading>Job status</InstructionHeading>
           <InstructionText>
-            You can check the status of your jobs by running the following
-            command:
+            Check the status of your jobs by running the following command:
           </InstructionText>
-          <PreformattedBox>qstat -xu $USER</PreformattedBox>
-          <PreformattedBox wrap={false} type="output">
-            {`pbs: 
+          <CommandBox
+            command="qstat -xu $USER"
+            output={`pbs:
                                                    Req'd  Req'd   Elap
 Job ID      Username Queue Jobname  SessID NDS TSK Memory Time  S Time
 ----------- -------- ----- -------- ------ --- --- ------ ----- - -----
-1234567.pbs username quick job-name    --    1   4   32gb 01:00 Q   --`}
-          </PreformattedBox>
+${jobIdOrPlaceholder}.pbs username quick job-name    --    1   4   32gb 01:00 Q   --`}
+          />
           <InstructionText>
             The job status will be shown in the <Code>S</Code> column.
           </InstructionText>
@@ -106,43 +105,50 @@ Job ID      Username Queue Jobname  SessID NDS TSK Memory Time  S Time
           <InstructionText>
             Run the following command to see the output files:
           </InstructionText>
-          <PreformattedBox>{`ls -lh ${jobName}.*`}</PreformattedBox>
-          <PreformattedBox wrap={false} type="output">
-            {`-rw------- 1 username default 100 Jan 01 00:00 ${jobName}.e${jobIdOrPlaceholder}
--rw------- 1 username default  80 Jan 01 00:00 ${jobName}.o${jobIdOrPlaceholder}`}
-          </PreformattedBox>
+          <CommandBox
+            command={`ls -lh ${jobName}.*`}
+            output={[
+              `-rw------- 1 username default 100 Jan 01 00:00 ${jobName}.e${jobIdOrPlaceholder}`,
+              `-rw------- 1 username default  80 Jan 01 00:00 ${jobName}.o${jobIdOrPlaceholder}`,
+            ].join("\n")}
+          />
           <InstructionText>
             Run the following command to see the output of the job:
           </InstructionText>
-          <PreformattedBox>{`cat ${jobName}.o${jobIdOrPlaceholder}`}</PreformattedBox>
-          <PreformattedBox type="output">
-            {`Hello, world!
-PBS Job ${jobIdOrPlaceholder}.pbs
-CPU time  : 00:00:00
-Wall time : 00:00:01
-Mem usage : 0b`}
-          </PreformattedBox>
+          <CommandBox
+            command={`cat ${jobName}.o${jobIdOrPlaceholder}`}
+            output={[
+              "Hello, world!",
+              `PBS Job ${jobIdOrPlaceholder}.pbs`,
+              "CPU time  : 00:00:00",
+              "Wall time : 00:00:01",
+              "Mem usage : 0b",
+            ].join("\n")}
+          />
           <InstructionText>
             Run the following command to see the error output of the job:
           </InstructionText>
-          <PreformattedBox>{`cat ${jobName}.e${jobIdOrPlaceholder}`}</PreformattedBox>
-          <PreformattedBox type="output">{`Data written to stderr`}</PreformattedBox>
+          <CommandBox
+            command={`cat ${jobName}.e${jobIdOrPlaceholder}`}
+            output={`Data written to stderr`}
+          />
           <InstructionText>
             Use the following command to get more detailed information about the
             job, including resource usage.
           </InstructionText>
-          <PreformattedBox>{`qstat -fx ${jobIdOrPlaceholder}`}</PreformattedBox>
-          <PreformattedBox wrap={false} type="output">
-            {`Job Id: ${jobIdOrPlaceholder}.pbs
-    ...
-    resources_used.cpupercent = 99
-    resources_used.cput = 00:39:22
-    resources_used.mem = 5671036kb
-    resources_used.ncpus = 1
-    resources_used.vmem = 2755392kb
-    resources_used.walltime = 00:40:51
-    ...`}
-          </PreformattedBox>
+          <CommandBox
+            command={`qstat -fx ${jobIdOrPlaceholder}`}
+            output={`Job Id: ${jobIdOrPlaceholder}.pbs
+  ...
+  resources_used.cpupercent = 99
+  resources_used.cput = 00:39:22
+  resources_used.mem = 5671036kb
+  resources_used.ncpus = 1
+  resources_used.vmem = 2755392kb
+  resources_used.walltime = 00:40:51
+  ...
+  `}
+          />
           <InstructionText>
             Observe the resource usage of the job and adjust the requested
             resources in future job submissions accordingly
diff --git a/src/components/tool/guide/Instructions/TeardownInstructions.js b/src/components/tool/guide/Instructions/TeardownInstructions.js
index 39b2886b..d02a3c3c 100644
--- a/src/components/tool/guide/Instructions/TeardownInstructions.js
+++ b/src/components/tool/guide/Instructions/TeardownInstructions.js
@@ -8,7 +8,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
 
@@ -69,12 +69,12 @@ export function TeardownInstructions({
                 To stop the job early, you need to know your job id. You can
                 either note down your job id when you submit a batch job, or
                 find the job id using the check job status command:
-                <PreformattedBox>qstat -u $USER</PreformattedBox>
               </InstructionText>
+              <CommandBox command="qstat -u $USER" />
               <InstructionText>
-                To stop the job early, run the following:
-                <PreformattedBox>{`qdel {job_id}`}</PreformattedBox>
+                To stop the job early, run the following command:
               </InstructionText>
+              <CommandBox command="qdel {job_id}" />
             </>
           )}
           <InstructionHeading>Exit the ssh session</InstructionHeading>

From 8395056eb122967ec38344e064a253ab7ab895b1 Mon Sep 17 00:00:00 2001
From: ScriptSmith <ScriptSmith@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:55:34 +1000
Subject: [PATCH 2/2] Refactoring batch scripts: - Use CommandBox - Use cat >>
 EOF rather than explaining filesystems & text editors - Remove option to
 submit batch script through stdin

---
 .../guide/Instructions/StartInstructions.js   | 91 +++++++------------
 1 file changed, 33 insertions(+), 58 deletions(-)

diff --git a/src/components/tool/guide/Instructions/StartInstructions.js b/src/components/tool/guide/Instructions/StartInstructions.js
index 140cab43..9aaddc66 100644
--- a/src/components/tool/guide/Instructions/StartInstructions.js
+++ b/src/components/tool/guide/Instructions/StartInstructions.js
@@ -1,9 +1,9 @@
-import { Code, Flex, Kbd, Radio, RadioGroup } from "@chakra-ui/react";
+import { Code } from "@chakra-ui/react";
 
 import { useState } from "react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import InstructionInput from "./InstructionInput";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -63,6 +63,9 @@ export function LyraStartInstructions({
 
   const batchJobScript = [
     "#!/bin/bash -l",
+    `#PBS -N ${jobName}`,
+    `#PBS -l walltime=${wallTimeStr}`,
+    `#PBS -l ${resources.join(":")}`,
     "",
     "cd $PBS_O_WORKDIR",
     "",
@@ -70,12 +73,12 @@ export function LyraStartInstructions({
     'echo "Data written to stderr" >&2',
   ];
 
-  const [scriptInput, setScriptInput] = useState("file");
   const [scriptPath, setScriptPath] = useState();
 
-  const cmdText = `qsub${jobParameters.join("")} -l walltime=${wallTimeStr} -l ${resources.join(
-    ":",
-  )}${jobType === "Batch" && scriptInput === "file" ? " " + (scriptPath || `${jobName}.pbs`) : ""}`;
+  const cmdText =
+    jobType === "Interactive"
+      ? `qsub${jobParameters.join("")} -l walltime=${wallTimeStr} -l ${resources.join(":")}`
+      : `qsub ${scriptPath || `${jobName}.pbs`}`;
 
   return (
     <>
@@ -84,69 +87,41 @@ export function LyraStartInstructions({
           <InstructionHeading>Create the batch job script</InstructionHeading>
           <InstructionText>
             A job script contains the commands you want to run as part of the
-            job.
-          </InstructionText>
-          <InstructionText>
-            Click the example script below to edit it, or copy it into your
-            preferred text editor.
+            job. The script will be saved on the Lyra filesystem.
           </InstructionText>
+          <InstructionInput
+            label="Script Path"
+            placeholder={`${jobName}.pbs`}
+            value={scriptPath}
+            onChange={setScriptPath}
+            helperText="Enter the path where the script will be saved, or leave blank to use the default."
+          />
           <InstructionText>
-            <TextWithLink
-              textBeforeLink={
-                "To use a text editor such as nano or vim on Lyra, refer to the tutorial on "
-              }
-              link={{
-                href: "https://qutvirtual4.qut.edu.au/group/staff/research/conducting/facilities/advanced-research-computing-storage/supercomputing/using-linux",
-                text: "this page",
-                color: "blue.500",
-                isExternal: true,
-              }}
-              hasExternalIcon={true}
-              textAfterLink={"."}
-            />
+            Run the following command to create the batch job script:
           </InstructionText>
-          <PreformattedBox editable={true} wrap={false}>
-            {batchJobScript.join("\n")}
-          </PreformattedBox>
+          <CommandBox
+            command={[
+              `cat <<'EOF' > ${jobName}.pbs`,
+              ...batchJobScript,
+              "EOF",
+              "",
+            ].join("\n")}
+          />
           <InstructionText>
-            You may either:
-            <RadioGroup defaultValue="file" onChange={setScriptInput}>
-              <Flex direction="column">
-                <Radio value="file">
-                  Save the script as a file on Lyra (eg.{" "}
-                  <Code>{jobName}.pbs</Code>)
-                </Radio>
-                <Radio value="stdin">
-                  Run the command below, then paste the script into the
-                  command&apos;s input
-                </Radio>
-              </Flex>
-            </RadioGroup>
+            Run the following command to confirm the contents of the script:
           </InstructionText>
+          <CommandBox
+            command={`cat ${jobName}.pbs`}
+            output={batchJobScript.join("\n")}
+          />
         </>
       )}
-      {jobType === "Batch" && scriptInput === "file" && (
-        <InstructionInput
-          label="Script Path"
-          placeholder={`${jobName}.pbs`}
-          value={scriptPath}
-          onChange={setScriptPath}
-          helperText="Enter the path of the script on Lyra."
-        />
-      )}
 
       <InstructionHeading>Schedule a job</InstructionHeading>
       <InstructionText>
-        In the ssh session, run the following command to schedule the{" "}
-        {jobType.toLowerCase()} job:
+        Run the following command to schedule the {jobType.toLowerCase()} job:
       </InstructionText>
-      <PreformattedBox>{cmdText}</PreformattedBox>
-      {scriptInput === "stdin" && (
-        <InstructionText>
-          Paste the batch job script above into the command&apos;s input, then
-          press <Kbd>Ctrl</Kbd> + <Kbd>D</Kbd> to submit the job.
-        </InstructionText>
-      )}
+      <CommandBox command={cmdText} output="{jobId}.pbs" />
     </>
   );
 }