Another good stopping point

components/status-bar.tsx

@@ -0,0 +1,62 @@
+import { useStateDesigner } from "@state-designer/react"
+import state from "state"
+import styled from "styles"
+import { useRef } from "react"
+
+export default function StatusBar() {
+  const local = useStateDesigner(state)
+  const { count, time } = useRenderCount()
+
+  const active = local.active.slice(1).map((s) => s.split("root.")[1])
+  const log = local.log[0]
+
+  return (
+    <StatusBarContainer>
+      <States>{active.join(" | ")}</States>
+      <Section>| {log}</Section>
+      <Section title="Renders | Time">
+        {count} | {time.toString().padStart(3, "0")}
+      </Section>
+    </StatusBarContainer>
+  )
+}
+
+const StatusBarContainer = styled("div", {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  width: "100%",
+  height: 40,
+  userSelect: "none",
+  borderTop: "1px solid black",
+  gridArea: "status",
+  display: "grid",
+  gridTemplateColumns: "auto 1fr auto",
+  alignItems: "center",
+  backgroundColor: "white",
+  gap: 8,
+  padding: "0 16px",
+  zIndex: 200,
+})
+
+const Section = styled("div", {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+})
+
+const States = styled("div", {})
+
+function useRenderCount() {
+  const rTime = useRef(Date.now())
+  const rCounter = useRef(0)
+
+  rCounter.current++
+  const now = Date.now()
+  let time = now - rTime.current
+  if (time > 100) {
+    time = 0
+  }
+  rTime.current = now
+
+  return { count: rCounter.current, time }
+}