nice feature: the microwave's sounds playback speed corresponds to the simulation speed, hahahaha

src/App/App.tsx

@@ -215,7 +215,14 @@ export function App() {
         throw error; // probably a bug in the interpreter
       }
     }
-    setTime({kind: "paused", simtime: 0});
+    setTime(time => {
+      if (time.kind === "paused") {
+        return {...time, simtime: 0};
+      }
+      else {
+        return {...time, since: {simtime: 0, wallclktime: performance.now()}};
+      }
+    });
     scrollDownSidebar();
   }, [ast, scrollDownSidebar, setTime, setTrace]);
 
@@ -399,7 +406,7 @@ export function App() {
         flex: '0 0 content',
         overflowY: "auto",
         overflowX: "visible",
-        maxWidth: 'min(400px,50vw)',
+        maxWidth: '50vw',
       }}>
         <div className="stackVertical" style={{height:'100%'}}>
           <div
@@ -439,7 +446,11 @@ export function App() {
               </select>
               {trace !== null &&
                 <div>{
-                  plant.render(trace.trace[trace.idx].plantState, event => onRaise(event.name, event.param))
+                  plant.render(
+                    trace.trace[trace.idx].plantState,
+                    event => onRaise(event.name, event.param),
+                    time.kind === "paused" ? 0 : time.scale,
+                  )
                 }</div>}
             </PersistentDetails>
             <details open={showExecutionTrace} onToggle={e => setShowExecutionTrace(e.newState === "open")}><summary>execution trace</summary></details>

src/App/TopPanel.tsx

@@ -18,6 +18,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
 import StopIcon from '@mui/icons-material/Stop';
 import { InsertModes } from "./TopPanel/InsertModes";
+import { usePersistentState } from "@/util/persistent_state";
 
 export type TopPanelProps = {
   trace: TraceState | null,
@@ -42,7 +43,7 @@ const ShortCutShowKeys = <kbd>~</kbd>;
 
 export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
-  const [timescale, setTimescale] = useState(1);
+  const [timescale, setTimescale] = usePersistentState("timescale", 1);
 
   const config = trace && trace.trace[trace.idx];
 
@@ -74,7 +75,7 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on
       }
     });
     updateDisplayedTime();
-  }, [setTime, updateDisplayedTime]);
+  }, [setTime, timescale, updateDisplayedTime]);
 
   const onTimeScaleChange = useCallback((newValue: string, wallclktime: number) => {
     const asFloat = parseFloat(newValue);