enhance the greeter

src/App/App.tsx

@@ -43,7 +43,7 @@ export function App() {
 
   function onRaise(inputEvent: string, param: any) {
     if (rt.length>0 && rtIdx!==undefined && ast.inputEvents.some(e => e.event === inputEvent)) {
-      const simtime = getSimTime(time, performance.now());
+      const simtime = getSimTime(time, Math.round(performance.now()));
       const nextConfig = handleInputEvent(simtime, {kind: "input", name: inputEvent, param}, ast, rt[rtIdx]!);
       appendNewConfig(inputEvent, simtime, nextConfig);
     }
@@ -107,7 +107,7 @@ export function App() {
           appendNewConfig('<timer>', nextInterrupt, nextConfig);
         }
         if (time.kind === "realtime") {
-          const wallclkDelay = getWallClkDelay(time, nextInterrupt, performance.now());
+          const wallclkDelay = getWallClkDelay(time, nextInterrupt, Math.round(performance.now()));
           // console.log('scheduling timeout after', wallclkDelay);
           timeout = setTimeout(raiseTimeEvent, wallclkDelay);
         }

src/App/BottomPanel.tsx

@@ -3,8 +3,10 @@ import { TraceableError } from "../statecharts/parser";
 
 import "./BottomPanel.css";
 
+import head from "../head.svg" ;
+
 export function BottomPanel(props: {errors: TraceableError[]}) {
-  const [greeting, setGreeting] = useState("Welcome to StateBuddy, buddy!");
+  const [greeting, setGreeting] = useState(<><img src={head}/>&emsp;"Welcome to StateBuddy, buddy!"</>);
 
   useEffect(() => {
     setTimeout(() => {

src/App/TopPanel.tsx

@@ -316,7 +316,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
     <div style={{display:"inline-block"}}>
     <KeyInfo keyInfo={<kbd>~</kbd>}>
     <input id="checkbox-keys" type="checkbox" checked={showKeys} onChange={e => setShowKeys(e.target.checked)}></input>
-    <label for="checkbox-keys">see shortcuts</label>
+    <label htmlFor="checkbox-keys">see shortcuts</label>
     </KeyInfo>
     </div>
 

src/VisualEditor/VisualEditor.tsx

@@ -133,16 +133,29 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
   const refSVG = useRef<SVGSVGElement>(null);
 
   useEffect(() => {
-    const compressedState = window.location.hash.slice(1);
     try {
+      const compressedState = window.location.hash.slice(1);
+      console.log('get old state');
       const ds = new DecompressionStream("deflate");
       const writer = ds.writable.getWriter();
-      writer.write(Uint8Array.fromBase64(compressedState));
+      writer.write(Uint8Array.fromBase64(compressedState)).catch(e => {
-      writer.close();
+        console.error("could not recover state:", e);
+      });
+      writer.close().catch(e => {
+        console.error("could not recover state:", e);
+      });
 
       new Response(ds.readable).arrayBuffer().then(decompressedBuffer => {
+        try {
+          console.log('recovering state');
           const recoveredState = JSON.parse(new TextDecoder().decode(decompressedBuffer));
           setState(recoveredState);
+        }
+        catch (e) {
+        console.error("could not recover state:", e);
+      }
+      }).catch(e => {
+        console.error("could not recover state:", e);
       });
     }
     catch (e) {