error reporting in editor window

index.html

@@ -215,10 +215,10 @@
 				-->
         <aside class="
 					flex flex-col items-center w-14
-					h-screen py-2 overflow-y-auto
+					h-screen py-2 overflow-y-scroll
 					border-r rtl:border-l
 					rtl:border-r-0 bg-neutral-900
-					dark:border-gray-700"
+					dark:border-neutral-700 border-none"
 				>
         <nav class="flex flex-col space-y-6">
             <a id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
@@ -312,8 +312,9 @@
  
          </ul>
          <!-- Here comes the editor itself -->
-          <div id="editor" class="invisible relative flex flex-row flex-grow overflow-hidden overflow-y-hidden z-10">
+          <div id="editor" class="invisible relative flex flex-row h-screen overflow-y-scroll">
 					</div>
+          <p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>
       </div>
       <script type="module" src="/src/main.ts"></script>

src/API.ts

@@ -63,6 +63,15 @@ export class UserAPI {
     //this.load = samples("github:tidalcycles/Dirt-Samples/master");
   }
 
+  _reportError = (error: any): void => {
+    console.log(error)
+    if (!this.app.show_error) {
+      this.app.error_line.innerHTML = error as string;
+      this.app.error_line.classList.remove('hidden');
+      setInterval(() => this.app.error_line.classList.add('hidden'), 2000)
+    }
+  }
+
   // =============================================================
   // Time functions
   // =============================================================

src/Evaluator.ts

@@ -18,10 +18,11 @@ const tryCatchWrapper = (
   return new Promise((resolve, _) => {
     try {
       Function(
-        `"use strict";try{${codeReplace(code)}} catch (e) {console.log(e)};`
+        `"use strict";try{${codeReplace(code)}} catch (e) {console.log(e); _reportError(e);};`
       ).call(application.api);
       resolve(true);
     } catch (error) {
+      application.error_line.innerHTML = error as string;
       console.log(error);
       resolve(false);
     }
@@ -71,6 +72,7 @@ export const tryEvaluate = async (
       }
     }
   } catch (error) {
+    application.error_line.innerHTML = error as string;
     console.log(error);
   }
 };
@@ -87,6 +89,7 @@ export const evaluate = async (
     ]);
     if (code.evaluations) code.evaluations++;
   } catch (error) {
+    application.error_line.innerHTML = error as string;
     console.log(error);
   }
 };

src/main.ts

@@ -163,6 +163,10 @@ export class Editor {
     "vim-mode"
   ) as HTMLButtonElement;
 
+  // Error line
+  error_line: HTMLElement = document.getElementById("error_line") as HTMLElement
+  show_error: boolean = false
+ 
   constructor() {
     // ================================================================================
     // Loading the universe from local storage