the prompt now displays and repeats on enter

src/components/button.astro

@@ -16,6 +16,6 @@ const {href, display, color = "transparent"} = Astro.props
 		height: 100%;
 		padding: 0 20px 0 20px;
 
-		&:hover { background-color: var(--hf-button-hover-color) }
+		&:hover { background-color: var(--hf-button-hover-color) !important }
 	}
 </style>

src/components/react/fs.ts

@@ -4,6 +4,7 @@ const enum EntryType {
 	Directory,
 	File
 }
+
 type File = string
 type Entry<T> = {
 	readonly inner: T,

src/components/react/shell/events.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react"
+import type { JSX } from "react/jsx-dev-runtime"
+
+import Display from "./prompt"
+
+type SetStateAction<T> = React.Dispatch<React.SetStateAction<T>>
+const enum Key {
+	Enter     = "Enter",
+	ArrowUp   = "ArrowUp",
+	ArrowDown = "ArrowDown",
+	Tab       = "Tab"
+}
+
+function DisplayPrompt() {
+	return <>
+		<Display/>
+		<input className="shell-ps1" type="text" spellCheck={false}/>
+	</>
+}
+
+function Prompt([existingPrompts, setPrompt]: [JSX.Element[], SetStateAction<JSX.Element[]>]) {
+	const shell_prompts = document.getElementsByClassName("shell-ps1")
+	Array.from(shell_prompts).forEach((shellps1) => {
+		(shellps1 as HTMLInputElement).disabled = true
+	})
+	setPrompt([...existingPrompts, DisplayPrompt()])
+}
+
+function keyboard_stream(terminal_window: HTMLElement, existingPrompts: JSX.Element[], setPrompt: SetStateAction<JSX.Element[]>) {
+	terminal_window.addEventListener("keydown", keyboard_event => {
+		if (keyboard_event.key === Key.Enter) {
+			Prompt([existingPrompts, setPrompt])
+		} else if (keyboard_event.key === Key.ArrowUp) {
+
+		} else if (keyboard_event.key === Key.ArrowDown) {
+
+		} else if (keyboard_event.key === Key.Tab) {
+
+		}
+	})
+}
+
+function Events() {
+	const terminal_window = document.querySelector("main")
+	if (terminal_window) {
+		const [existingPrompts, setPrompt] = useState([DisplayPrompt()])
+
+		keyboard_stream(terminal_window, existingPrompts, setPrompt)
+		return existingPrompts
+	}
+	return
+}
+
+export default Events

src/components/react/shell/prompt.tsx

@@ -1,10 +1,18 @@
 import { working_dir } from "../fs"
-import rgb, { cyan, green } from "./color"
+import { cyan, green } from "./color"
 
-const GetWorkingDir = () => working_dir === "user" ? "~" : working_dir
+const userAgent = navigator.userAgent
+const browser_name_fallible = userAgent.match(/Firefox.\d+[\d.\d]+|Chrome.\d+[\d.\d]+/gm)?.map(f => f.split("/")[0])
+const browser_name = browser_name_fallible ? browser_name_fallible[0].toLowerCase() : "unknown"
 
-export default function Prompt() {
+function GetWorkingDir() {
+	return working_dir === "user" ? "~" : working_dir
+}
+
+export default function Display() {
 	const user = cyan("user")
 	const dir = green(GetWorkingDir())
-	return <p>{user}@host {dir}{"> "}</p>
-}
+	return <p>{user}@{browser_name} {dir}{"> "}</p>
+}
+
+export { userAgent }

src/components/react/terminal.tsx

@@ -1,33 +0,0 @@
-import type { JSX } from "react/jsx-dev-runtime"
-import { TermEvents } from "./term_events"
-import { createRoot } from "react-dom/client"
-import { useState } from "react"
-
-import Prompt from "./shell/prompt"
-
-const active_shell_prompt = ShellPrompt()
-
-function ShellEvents() {
-	const shell_input = document.querySelector("main")
-	if (shell_input) {
-		const [prompts, newPrompt] = useState([])
-		shell_input.addEventListener("keydown", (keyboard_event) => {
-			if (keyboard_event.key == "Enter") {
-
-			}
-		})
-	}
-}
-
-function ShellPrompt() {
-	return <div className="shell-prompt">
-		<Prompt/>
-		<input id="shell-input" type="text" spellCheck={false} autoFocus/>
-	</div>
-}
-
-export default function Shell() {
-	TermEvents()
-	ShellEvents()
-	return active_shell_prompt
-}

src/components/react/terminal/exec.tsx

@@ -0,0 +1,21 @@
+import { TermEvents } from "./events"
+import { red } from "../shell/color"
+
+import Events from "../shell/events"
+
+function Panic(message: string) {
+	return <>
+		<p>{red("=================================================")}</p>
+		<p>{red("An unexpected JavaScript error occured:")}</p>
+		<p>{red(message)}</p>
+		<p>{red("=================================================")}</p>
+	</>
+}
+
+export default function Shell() {
+	const existingPrompts = Events()
+	if (existingPrompts) {
+		return existingPrompts.map((ps1, k) => <div className="shell-prompt" key={k}>{ps1}</div>)
+	}
+	return Panic("The <main> element is missing")
+}

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Webpage from '../layouts/Webpage.astro';
 import Motd from '../components/terminal/motd.astro';
-import Terminal from '../components/react/terminal';
+import Terminal from '../components/react/terminal/exec';
 ---
 
 <Webpage title="Home">
@@ -31,5 +31,7 @@ import Terminal from '../components/react/terminal';
 		width: 90%;
 		/* Pester me when this gets undrafted */
 		caret-shape: block;
+
+		&:disabled { color: white }
 	}
 </style>