1import { useEffect, useState } from "preact/hooks";2import { useBootProgress, usePendingWrites } from "@nzip/lofi/preact";34/**5 * Live facts in the top bar, read from the runtime and the browser: storage6 * state, network state, and writes waiting to sync. Pull the cable and the7 * network fact flips while the board keeps working; that behavior is the8 * demo's whole argument, so it is measured, not asserted.9 */10export default function StatusStrip() {11 const boot = useBootProgress();12 const pending = usePendingWrites();13 const [online, setOnline] = useState(true);1415 useEffect(() => {16 const update = () => setOnline(navigator.onLine);17 update();18 globalThis.addEventListener("online", update);19 globalThis.addEventListener("offline", update);20 return () => {21 globalThis.removeEventListener("online", update);22 globalThis.removeEventListener("offline", update);23 };24 }, []);2526 const storage = boot.phase === "ready"27 ? "open"28 : boot.phase === "failed"29 ? "failed"30 : boot.phase === "downloading"31 ? "downloading"32 : "opening";3334 return (35 <p class="status-strip" role="status">36 <span data-fact="storage">on-device storage: {storage}</span>37 <span data-fact="network" data-online={online ? "yes" : "no"}>38 network: {online ? "online" : "offline"}39 </span>40 <span data-fact="pending">unsynced writes: {pending.count}</span>41 </p>42 );43}