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>