waow it works :3

main.css

@@ -22,3 +22,7 @@ body {
     outline: none;
     box-shadow: none;
 }
+
+.terminal {
+    white-space: pre-wrap;
+}

src/commands/clear.rs

@@ -0,0 +1,3 @@
+pub fn clear(_rader: Vec<String>) -> Vec<String> {
+    return vec![];
+}

src/commands/mod.rs

@@ -0,0 +1,17 @@
+use log::error;
+
+mod clear;
+
+pub fn run(command: String, rader: Vec<String>) -> Vec<String> {
+    match command.as_str() {
+        "" => rader,
+        "clear" => clear::clear(rader),
+        unrecognized => unrecognized_command(unrecognized, rader),
+    }
+}
+
+fn unrecognized_command(command: &str, mut rader: Vec<String>) -> Vec<String> {
+    rader.push(format!("Unrecognized Command \"{command}\""));
+    error!("Unrecognized Command");
+    rader
+}

src/main.rs

@@ -1,17 +1,27 @@
-use yew::prelude::*;
 use log::info;
-use web_sys::{wasm_bindgen::{JsCast, UnwrapThrowExt}, HtmlInputElement};
+use web_sys::{
+    wasm_bindgen::{JsCast, UnwrapThrowExt},
+    HtmlInputElement,
+};
+use yew::prelude::*;
+
+mod commands;
+
+fn get_prompt() -> String {
+    "[user@vanten-s.com ~]$ ".to_string()
+}
 
 #[function_component]
 fn App() -> Html {
     let rader: UseStateHandle<Vec<String>> = use_state(Vec::new);
 
     let rader_handle = rader.clone();
-    let push_rad = move |rad| {
+    let push_rad = move |rad: String| {
         info!("{}", rad);
         let handle = rader_handle.clone();
         let mut val = (*handle).clone();
-        val.push(rad);
+        val.push(get_prompt() + &rad);
+        val = commands::run(rad, val);
         rader_handle.set(val);
     };
 
@@ -25,22 +35,28 @@ fn App() -> Html {
 
 #[derive(Properties, PartialEq)]
 struct InputProps {
-    pub push_rad: Callback<String>
+    pub push_rad: Callback<String>,
 }
 
 #[function_component]
 fn Input(props: &InputProps) -> Html {
     let push_rad = props.push_rad.clone();
 
-    let onchange = move |event: Event| {
-        let target: HtmlInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
+    let onkeydown = move |e: KeyboardEvent| {
+        if e.code() != "Enter" {
+            return;
+        }
+        let target: HtmlInputElement = e.target().unwrap_throw().dyn_into().unwrap_throw();
         let value = target.value();
+        let value = value;
         target.set_value("");
         push_rad.emit(value);
     };
 
     html! {
-        <input { onchange } type="text" class="input"/>
+        <>
+            <code>{ get_prompt() }</code><input { onkeydown } type="text" class="input"/>
+        </>
     }
 }
 
@@ -51,14 +67,18 @@ struct TerminalProps {
 
 #[function_component]
 fn Terminal(props: &TerminalProps) -> Html {
-    let rader: Vec<_> = props.rader.iter().map(|rad| 
+    let rader: Vec<_> = props
+        .rader
+        .iter()
+        .map(|rad| {
             html! {
                 <>
-                <span> { rad } </span>
+                    <code><wbr /> { rad } </code>
                     <br />
                 </>
             }
-    ).collect();
+        })
+        .collect();
 
     html! {
         <div id="terminal" class="terminal">