Add error highlighting and keep status when the VM throws.

TESTED=Added broken code and confirmed it got hit in test / normal runs.

Author: Edward Palmer

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;
       }
     },

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