add stop and repl buttons

src/App.tsx

@@ -4,6 +4,8 @@ import './App.css';
 import { Connection } from './Connection';
 import { Terminal } from './Terminal';
 import { Run } from './Run';
+import { Stop } from './Stop';
+import { Repl } from './Repl';
 import { Flash } from './Flash';
 
 import 'ace-builds/src-noconflict/mode-python';
@@ -21,6 +23,8 @@ function App(): JSX.Element {
                     ref={connection}
                 />
                 <Run connection={connection} editor={editor} />
+                <Stop connection={connection} />
+                <Repl connection={connection} />
                 <Flash />
             </header>
             <Terminal

src/Repl.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Connection } from './Connection';
+
+interface ReplProperties {
+    readonly connection: React.RefObject<Connection>;
+}
+
+class Repl extends React.Component<ReplProperties> {
+    constructor(props: ReplProperties) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+    private async onClick(): Promise<void> {
+        try {
+            // send 4 space characters
+            await this.props.connection.current?.write(
+                new Uint8Array([0x20, 0x20, 0x20, 0x20]),
+            );
+        } catch (err) {
+            alert(err);
+        }
+    }
+
+    render(): JSX.Element {
+        return (
+            <button name="connect" onClick={this.onClick}>
+                Repl
+            </button>
+        );
+    }
+}
+
+export { Repl };

src/Stop.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Connection } from './Connection';
+
+interface StopProperties {
+    readonly connection: React.RefObject<Connection>;
+}
+
+class Stop extends React.Component<StopProperties> {
+    constructor(props: StopProperties) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+    private async onClick(): Promise<void> {
+        try {
+            // send CTRL+C, CTRL+C, CTRL+D
+            await this.props.connection.current?.write(
+                new Uint8Array([0x03, 0x03, 0x04]),
+            );
+        } catch (err) {
+            alert(err);
+        }
+    }
+
+    render(): JSX.Element {
+        return (
+            <button name="connect" onClick={this.onClick}>
+                Stop
+            </button>
+        );
+    }
+}
+
+export { Stop };