fix nested environment scopes + highlight runtime errors in editor

src/App/App.css

@@ -30,9 +30,7 @@ details:has(+ details) {
   cursor: pointer;
 }
 .runtimeState.active {
-  /* background-color: rgba(255, 140, 0, 0.2); */
   background-color: rgba(0,0,255,0.2);
-  /* border: solid black 3px; */
   border: solid blue 1px;
 }
 
@@ -40,6 +38,11 @@ details:has(+ details) {
   background-color: lightpink;
   color: darkred;
 }
+
+.runtimeState.runtimeError.active {
+  border-color: darkred;
+}
+
 /* details:not(:has(details)) > summary::marker {
   color: white;
 } */

src/App/App.tsx

@@ -151,6 +151,13 @@ export function App() {
   const parsed = useMemo(() => editorState && conns && parseStatechart(editorState, conns), [editorState, conns]);
   const ast = parsed && parsed[0];
   const syntaxErrors = parsed && parsed[1];
+  const allErrors = syntaxErrors && [
+    ...syntaxErrors,
+    ...(trace && trace.trace[trace.idx].kind === "error") ? [{
+      message: trace.trace[trace.idx].error.message,
+      shapeUid: trace.trace[trace.idx].error.highlight[0],
+    }] : [],
+  ]
 
   // append editor state to undo history
   const makeCheckPoint = useCallback(() => {
@@ -395,7 +402,8 @@ export function App() {
         </div>
         {/* Editor */}
         <div style={{flexGrow: 1, overflow: "auto"}}>
-          {editorState && conns && syntaxErrors && <VisualEditor {...{state: editorState, setState: setEditorState, conns, trace, setTrace, syntaxErrors, insertMode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}}/>}
+          {editorState && conns && syntaxErrors &&
+            <VisualEditor {...{state: editorState, setState: setEditorState, conns, trace, setTrace, syntaxErrors: allErrors, insertMode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}}/>}
         </div>
       </div>
 

src/App/RTHistory.tsx

@@ -50,7 +50,10 @@ export const RTHistoryItem = memo(function RTHistoryItem({ast, idx, item, prevIt
     </div>;
   }
   else {
-    return <div className="runtimeState runtimeError">
+    // error item
+    return <div
+      className={"runtimeState runtimeError" + (active ? " active" : "")}
+      onMouseDown={useCallback(() => onMouseDown(idx, item.simtime), [idx, item.simtime])}>
       <div>
         {formatTime(item.simtime)}
         &emsp;
@@ -68,7 +71,8 @@ function ShowEnvironment(props: {environment: Environment}) {
   return <div>{
     [...props.environment.entries()]
       .filter(([variable]) => !variable.startsWith('_'))
-      .map(([variable,value]) => `${variable}: ${value}`).join(', ')
+      // we strip the first 5 characters from 'variable' (remove "root.")
+      .map(([variable,value]) => `${variable.slice(5)}: ${value}`).join(', ')
   }</div>;
 }
 

src/App/TopPanel/TopPanel.tsx

@@ -259,5 +259,11 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on
         </div>
       </div>
     </div>
+    <div className="toolbarGroup">
+      {location.host === "localhost:3000" ?
+        <a href={`https://deemz.org/public/statebuddy/${location.hash}`}>production</a>
+        : <a href={`http://localhost:3000/${location.hash}`}>development</a>
+      }
+    </div>
   </div>;
 });

src/App/useAudioContext.ts

@@ -27,7 +27,6 @@ export function useAudioContext(speed: number) {
   }), [ctx]);
 
   function play(url: string, loop: boolean) {
-    console.log('play', url);
     const srcPromise = url2AudioBuf(url)
       .then(audioBuf => {
         const src = ctx.createBufferSource();