Haxxor!

components/REPL/REPLInput.tsx

@@ -38,9 +38,12 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba
         return false;
     };
 
-    return <div className={styles.wrapper}>
+    return <div className={styles.wrapperwrapper}>
-        <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} />
+        <span className={styles.inputstart}>$&nbsp;</span>
-        <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+        <div className={styles.wrapper}>
+            <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
+            <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+        </div>
     </div>;
 };
 

lib/commands/definitions.tsx

@@ -36,29 +36,29 @@ export function printSyntax(cmd: Command): string[] {
     let flagsDesc = [];
     if (cmd.flags && cmd.flags.length > 0) {
         flagsOption = " [";
+        flagsDesc.push("");
         flagsDesc.push("Flags:");
         cmd.flags.forEach((flag => {
             flagsOption += `-${flag.short} `;
             flagsDesc.push(`\t-${flag.short}\t--${flag.long}\t${flag.desc}`);
         }));
         flagsOption = flagsOption.substring(0, flagsOption.length-1) + "]";
-        flagsDesc.push("");
     }
 
     let subcmdOption = "";
     let subcmdDesc = [];
     if (cmd.subcommands && cmd.subcommands.length > 0) {
         subcmdOption = " [";
+        subcmdDesc.push("");
         subcmdDesc.push("Subcommands:");
         cmd.subcommands.forEach((subcmd => {
             subcmdOption += `${subcmd.name}|`;
             subcmdDesc.push(`\t${subcmd.name}\t${subcmd.desc}`);
         }));
         subcmdOption = subcmdOption.substring(0, subcmdOption.length-1) + "]";
-        subcmdDesc.push("");
     }
 
-    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`, ""].concat(flagsDesc).concat(subcmdDesc);   
+    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc);   
 }
 
 const about: Command = {

pages/index.tsx

@@ -1,9 +1,12 @@
 import type { NextPage } from "next";
 import REPL from "../components/REPL";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
-    <REPL />
+    <div className={styles.container}>
+      <REPL />
+    </div>
   );
 };
 

styles/Home.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    padding: 10px;
+}

styles/REPL/REPLHistory.module.css

@@ -1,10 +1,12 @@
 .container {
-    height: 70vh;
     overflow: auto;
     display: flex;
     flex-direction: column-reverse;
+    flex-grow: 2;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
 }
 
 .line {
-    border-bottom: 1px solid #000;
+    padding: 3px 0;
 }

styles/REPL/REPLInput.module.css

@@ -1,18 +1,36 @@
 .wrapper > input, .wrapper > span {
+    padding: .125rem 0;
     font-size: 1.25rem;
-    font-family: "CascadiaCode";
+    font-family: "CascadiaCode", monospace;
-    padding: .125rem .25rem;
+    display: flex;
-    width: calc(100% - 1rem);
+    flex-direction: row;
+    flex-wrap: nowrap;
+    color: var(--repl-color);
 }
 
 .wrapper {
     position: relative;
-    border: 2px solid #000;
+    flex-grow: 2;
+    display: block;
+}
+
+.wrapperwrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.inputstart {
+    padding: .125rem 0;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
 }
 
 .in, .in:focus {
     border: 0;
     outline-width: 0;
+    background: transparent;
 }
 
 .completionWrapper {
@@ -34,5 +52,5 @@
 }
 
 .completion {
-    color: #ccc
+    color: var(--repl-color-hint);
 }

styles/globals.css

@@ -5,4 +5,13 @@
 
 * {
   box-sizing: border-box;
+  --repl-color: #188a18;
+  --repl-color-hint: #092909;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--repl-color);
+  background: #000;
 }