From 64efe384bbef658d278aa01b1f0b03cc672c4ad3 Mon Sep 17 00:00:00 2001
From: Edward Palmer <user.email=891364+elp2@users.noreply.github.com>
Date: Wed, 8 Jan 2025 18:02:34 +0000
Subject: [PATCH] Add error highlighting and keep status when the VM throws.

TESTED=Added broken code and confirmed it got hit in test / normal runs.
---
 components/src/stores/vm.store.ts | 10 +++++++---
 web/src/pages/vm.tsx              | 23 ++++++++++-------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/src/stores/vm.store.ts b/components/src/stores/vm.store.ts
index 48f8cbd01..e676fe5b8 100644
--- a/components/src/stores/vm.store.ts
+++ b/components/src/stores/vm.store.ts
@@ -102,7 +102,10 @@ function reduceVMTest(
   try {
     stack = vmTest.vm.vmStack().reverse();
   } catch (e) {
-    setStatus("Runtime error: Invalid stack");
+    dispatch.current({
+      action: "setError",
+      payload: new Error("Runtime error: Invalid stack"),
+    });
   }
 
   return {
@@ -374,7 +377,7 @@ export function makeVmStore(
         return done;
       } catch (e) {
         setStatus(`Runtime error: ${(e as Error).message}`);
-        dispatch.current({ action: "setValid", payload: false });
+        dispatch.current({ action: "setError", payload: e });
         return true;
       }
     },
@@ -395,10 +398,11 @@ export function makeVmStore(
         if (animate) {
           dispatch.current({ action: "update" });
         }
+
         return done;
       } catch (e) {
         setStatus(`Runtime error: ${(e as Error).message}`);
-        dispatch.current({ action: "setValid", payload: false });
+        dispatch.current({ action: "setError", payload: e });
         return true;
       }
     },
diff --git a/web/src/pages/vm.tsx b/web/src/pages/vm.tsx
index ede3c6f9d..80fc6afd1 100644
--- a/web/src/pages/vm.tsx
+++ b/web/src/pages/vm.tsx
@@ -252,28 +252,25 @@ const VM = () => {
             actions.setVm(source);
           }}
           language={"vm"}
-          highlight={
-            state.controls.valid && state.vm.showHighlight
-              ? state.vm.highlight
-              : undefined
-          }
+          highlight={state.vm.showHighlight ? state.vm.highlight : undefined}
+          highlightType={state.controls.valid ? "highlight" : "error"}
           error={state.controls.error}
         />
       </Panel>
       <Panel className="vm" header={<Trans>VM Structures</Trans>}>
-        {state.controls.valid && state.vm.Stack.length > 0 && (
-          <>
+        <>
+          {state.vm.Stack.length > 0 && (
             <VMStackFrame
               statics={state.vm.Statics}
               temp={state.vm.Temp}
               frame={state.vm.Stack[0]}
             />
-            <CallStack
-              stack={state.vm.Stack}
-              addedSysInit={state.vm.AddedSysInit}
-            />
-          </>
-        )}
+          )}
+          <CallStack
+            stack={state.vm.Stack}
+            addedSysInit={state.vm.AddedSysInit}
+          />
+        </>
       </Panel>
       <Panel className="display" style={{ gridArea: "display" }}>
         <Screen