use vt100 to render the terminal data in the browser(!)

6 files changed, 60 insertions, 45 deletions

diff --git a/Cargo.lock b/Cargo.lock
index b8d6565..d56d7df 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2155,6 +2155,7 @@ dependencies = [
  "seed",
  "serde",
  "serde_json",
+ "vt100",
  "wasm-bindgen",
  "web-sys",
 ]
diff --git a/teleterm-web/Cargo.toml b/teleterm-web/Cargo.toml
index a7c82b6..47496de 100644
--- a/teleterm-web/Cargo.toml
+++ b/teleterm-web/Cargo.toml
@@ -18,5 +18,6 @@ log = "0.4"
 seed = "0.4"
 serde = "1"
 serde_json = "1"
+vt100 = "0.6"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["ErrorEvent", "MessageEvent", "WebSocket"] }
diff --git a/teleterm-web/src/lib.rs b/teleterm-web/src/lib.rs
index 030ac45..5dd5a33 100644
--- a/teleterm-web/src/lib.rs
+++ b/teleterm-web/src/lib.rs
@@ -59,11 +59,7 @@ fn update(
                     serde_json::from_str(&json).unwrap();
                 match msg {
                     crate::protocol::Message::TerminalOutput { data } => {
-                        log::info!(
-                            "{}: got bytes: {}",
-                            id,
-                            String::from_utf8_lossy(&data)
-                        );
+                        model.process(&data);
                     }
                 }
             }
@@ -87,6 +83,7 @@ fn view(model: &crate::model::Model) -> impl View<Msg> {
         seed::h1!["it's a seed app"],
         seed::ul![list],
         seed::button![simple_ev(Ev::Click, Msg::Refresh), "refresh"],
+        seed::pre![model.screen()],
     ]
 }
 
diff --git a/teleterm-web/src/model.rs b/teleterm-web/src/model.rs
index 263dd7c..a90ebe2 100644
--- a/teleterm-web/src/model.rs
+++ b/teleterm-web/src/model.rs
@@ -6,6 +6,7 @@ const WATCH_URL: &str = "ws://127.0.0.1:4145/watch";
 struct WatchConn {
     #[allow(dead_code)] // no idea why it thinks this is dead
     ws: WebSocket,
+    term: vt100::Parser,
 }
 
 impl Drop for WatchConn {
@@ -44,7 +45,8 @@ impl Model {
             crate::Msg::Watch,
             orders,
         );
-        self.watch_conn = Some(WatchConn { ws })
+        let term = vt100::Parser::default();
+        self.watch_conn = Some(WatchConn { ws, term })
     }
 
     pub fn sessions(&self) -> &[Session] {
@@ -54,4 +56,18 @@ impl Model {
     pub fn update_sessions(&mut self, sessions: Vec<Session>) {
         self.sessions = sessions;
     }
+
+    pub fn process(&mut self, bytes: &[u8]) {
+        if let Some(conn) = &mut self.watch_conn {
+            conn.term.process(bytes);
+        }
+    }
+
+    pub fn screen(&self) -> String {
+        if let Some(conn) = &self.watch_conn {
+            conn.term.screen().contents()
+        } else {
+            "".to_string()
+        }
+    }
 }
diff --git a/teleterm/static/teleterm_web.js b/teleterm/static/teleterm_web.js
index ffeb4a4..afcfaf9 100644
--- a/teleterm/static/teleterm_web.js
+++ b/teleterm/static/teleterm_web.js
@@ -18,31 +18,31 @@ function addHeapObject(obj) {
     return idx;
 }
 function __wbg_elem_binding0(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(41)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(55)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding1(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(41)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(55)(arg0, arg1, addHeapObject(arg2));
 }
-function __wbg_elem_binding2(arg0, arg1) {
-    wasm.__wbg_function_table.get(195)(arg0, arg1);
+function __wbg_elem_binding2(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(59)(arg0, arg1, arg2);
 }
 function __wbg_elem_binding3(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(46)(arg0, arg1, arg2);
+    wasm.__wbg_function_table.get(55)(arg0, arg1, addHeapObject(arg2));
 }
-function __wbg_elem_binding4(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(265)(arg0, arg1, addHeapObject(arg2));
+function __wbg_elem_binding4(arg0, arg1) {
+    wasm.__wbg_function_table.get(216)(arg0, arg1);
 }
 function __wbg_elem_binding5(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(41)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(55)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding6(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(41)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(286)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding7(arg0, arg1, arg2, arg3, arg4) {
-    wasm.__wbg_function_table.get(292)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
+    wasm.__wbg_function_table.get(313)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
 }
 function __wbg_elem_binding8(arg0, arg1, arg2, arg3) {
-    wasm.__wbg_function_table.get(296)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+    wasm.__wbg_function_table.get(317)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 /**
 */
@@ -228,13 +228,16 @@ function init(module) {
     imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
         takeObject(arg0);
     };
+    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
+        const ret = getObject(arg0);
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
         const ret = getStringFromWasm(arg0, arg1);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
-        const ret = getObject(arg0);
-        return addHeapObject(ret);
+    imports.wbg.__wbindgen_cb_forget = function(arg0) {
+        takeObject(arg0);
     };
     imports.wbg.__wbindgen_cb_drop = function(arg0) {
         const obj = takeObject(arg0).original;
@@ -245,9 +248,6 @@ function init(module) {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_cb_forget = function(arg0) {
-        takeObject(arg0);
-    };
     imports.wbg.__wbindgen_json_parse = function(arg0, arg1) {
         const ret = JSON.parse(getStringFromWasm(arg0, arg1));
         return addHeapObject(ret);
@@ -884,16 +884,16 @@ function init(module) {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper232 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper241 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding3(a, state.b, arg0);
+                return __wbg_elem_binding2(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(42)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(56)(a, state.b);
                 else state.a = a;
             }
         }
@@ -902,16 +902,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper541 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper239 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = () => {
+        const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding2(a, state.b, );
+                return __wbg_elem_binding3(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(196)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(56)(a, state.b);
                 else state.a = a;
             }
         }
@@ -920,16 +920,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper949 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper243 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding4(a, state.b, arg0);
+                return __wbg_elem_binding5(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(266)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(56)(a, state.b);
                 else state.a = a;
             }
         }
@@ -938,16 +938,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper228 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper245 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding0(a, state.b, arg0);
+                return __wbg_elem_binding1(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(42)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(56)(a, state.b);
                 else state.a = a;
             }
         }
@@ -956,16 +956,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper236 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper247 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding5(a, state.b, arg0);
+                return __wbg_elem_binding0(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(42)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(56)(a, state.b);
                 else state.a = a;
             }
         }
@@ -974,16 +974,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper230 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper607 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = (arg0) => {
+        const real = () => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding1(a, state.b, arg0);
+                return __wbg_elem_binding4(a, state.b, );
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(42)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(217)(a, state.b);
                 else state.a = a;
             }
         }
@@ -992,7 +992,7 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper234 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper1018 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
@@ -1001,7 +1001,7 @@ function init(module) {
             try {
                 return __wbg_elem_binding6(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(42)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(287)(a, state.b);
                 else state.a = a;
             }
         }
diff --git a/teleterm/static/teleterm_web_bg.wasm b/teleterm/static/teleterm_web_bg.wasm
index 320e714..1539609 100644
--- a/teleterm/static/teleterm_web_bg.wasm
+++ b/teleterm/static/teleterm_web_bg.wasm