diff --git a/src/App.tsx b/src/App.tsx
index f528557b..a8ba827b 100644
--- a/src/App.tsx
+++ b/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}
/>
+
+
;
+}
+
+class Repl extends React.Component {
+ constructor(props: ReplProperties) {
+ super(props);
+ this.onClick = this.onClick.bind(this);
+ }
+ private async onClick(): Promise {
+ 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 (
+
+ );
+ }
+}
+
+export { Repl };
diff --git a/src/Stop.tsx b/src/Stop.tsx
new file mode 100644
index 00000000..850e4303
--- /dev/null
+++ b/src/Stop.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Connection } from './Connection';
+
+interface StopProperties {
+ readonly connection: React.RefObject;
+}
+
+class Stop extends React.Component {
+ constructor(props: StopProperties) {
+ super(props);
+ this.onClick = this.onClick.bind(this);
+ }
+ private async onClick(): Promise {
+ 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 (
+
+ );
+ }
+}
+
+export { Stop };