better stats

bun.lock

···
       "name": "plcbundle-watch",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
+        "date-fns": "^4.1.0",
+        "numeral": "^2.0.6",
         "tailwindcss": "^4.1.16",
       },
       "devDependencies": {
···
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
···
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "numeral": ["numeral@2.0.6", "", {}, "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="],
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 

package.json

···
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "date-fns": "^4.1.0",
+    "numeral": "^2.0.6",
     "tailwindcss": "^4.1.16"
   }
 }

src/App.svelte

···
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { Progress } from '@skeletonlabs/skeleton-svelte';
   import instancesData from './instances.json';
+  import { formatDistanceToNow, addSeconds } from 'date-fns';
+  import numeral from 'numeral';
+  
 
   type Instance = {
     url: string,
···
   let lastKnownBundle = $state({
     number: 0,
     hash: null,
+    mempool: null,
+    mempoolPercent: 0,
   })
 
   let instances = $state(instancesData)
   let instancesSorted = $derived(instances.sort((a, b) => a.status?.responseTime > b.status?.responseTime ? 1 : -1))
 
+  function formatNumber(n: number) {
+    return numeral(n).format()
+  }
+
   async function getStatus(instance: Instance) {
     let statusResp: object | undefined;
     let url: string = instance.url;
···
       if (status?.bundles?.last_bundle > lastKnownBundle.number) {
         lastKnownBundle.number = status?.bundles?.last_bundle
         lastKnownBundle.hash = status?.bundles?.head_hash
+        lastKnownBundle.time = status?.bundles?.end_time
+
+        if (status?.mempool?.count > lastKnownBundle.mempool) {
+          lastKnownBundle.mempool = status?.mempool?.count
+          lastKnownBundle.mempoolPercent = Math.round((lastKnownBundle.mempool/100)*100)/100
+          lastKnownBundle.etaNext = addSeconds(new Date(), status?.mempool?.eta_next_bundle_seconds)
+        }
       }
       instance.status = status
     }))
···
 <main class="w-full mt-10">
   <div class="max-w-4xl mx-auto px-3">
 
-    <header>
-      <h1 class="text-3xl">plcbundle instances</h1>
+    <header class="flex items-center gap-2 flex-wrap">
+      <div class="grow">
+        <h1 class="text-3xl ">plcbundle instances</h1>
+      </div>
+      <div class="">
+          <button type="button" class="btn btn-sm preset-tonal-primary"  onclick={() => doCheck()}>Refresh</button>
+      </div>      
     </header>
 
-    <div class="flex items-center gap-2 mt-10 flex-wrap">
-      <div class="grow flex items-center text-lg">
-        <div><span class="opacity-50">Last known bundle:</span> <span class="font-semibold">{lastKnownBundle.number}</span> [<span class="font-mono text-base">{lastKnownBundle?.hash?.slice(0, 7)}</span>]</div>
+    <div class="flex gap-10 mt-6 grid grid-cols-2">
+      <div>
+        <h2 class="opacity-75 text-sm">Last known bundle</h2>
+        <div>
+          <div class="flex items-center gap-5">
+            <div class="font-semibold text-3xl">{lastKnownBundle.number}</div>
+            <div class="mt-1 font-mono badge preset-outlined-primary-500 text-xs">{lastKnownBundle?.hash?.slice(0, 7)}</div>
+          </div>
+          <div>
+            <span class="opacity-50">{#if lastKnownBundle?.time} {formatDistanceToNow(lastKnownBundle.time, { addSuffix: true })}{/if}</span>
+          </div>
+        </div>
       </div>
-      <div class="">
-          <button type="button" class="btn btn-sm preset-tonal-primary"  onclick={() => doCheck()}>Refresh</button>
+      <div>
+        <div>
+            <h2 class="opacity-75 text-sm">Next bundle</h2>
+        </div>
+        <div class="flex gap-4">
+          <div class="mt-4">
+            <Progress value={lastKnownBundle.mempoolPercent} class="items-center">
+              <Progress.Circle style="--size: 48px; --thickness: 6px;">
+                <Progress.CircleTrack />
+                <Progress.CircleRange />
+              </Progress.Circle>
+              <!--Progress.ValueText class="text-xs opacity-50" /-->
+            </Progress>
+          </div>
+          {#if lastKnownBundle.number > 0}
+            <div>
+              <div class="font-semibold text-2xl animate-pulse">{lastKnownBundle.number + 1}</div>
+              <div>{formatNumber(lastKnownBundle.mempool)} / 10,000 <span class="opacity-50">({lastKnownBundle.mempoolPercent}%)</span></div>
+              {#if lastKnownBundle.etaNext}
+                <div class="mt-2 opacity-50">ETA: {formatDistanceToNow(lastKnownBundle.etaNext)}</div>
+              {/if}
+            </div>
+          {/if}
+        </div>
       </div>
     </div>      
 
-    <table class="table mt-4">
+    <table class="table mt-10">
       <thead>
         <tr>
           <th>endpoint</th>
···
             <td><a href={instance.url} target="_blank" class="font-semibold">{instance.url.replace("https://", "")}</a></td>
             <td>{#if instance.status?.bundles?.last_bundle === lastKnownBundle.number}✅{:else if instance.status}🔄{:else}⌛{/if}</td>
             <td>{#if instance.status?.bundles?.last_bundle}{instance.status?.bundles?.last_bundle}{/if}</td>
-            <td>{#if instance.status?.mempool && instance.status?.bundles?.last_bundle === lastKnownBundle.number}{instance.status?.mempool.count}{:else if instance.status}<span class="opacity-25">syncing</span>{/if}</td>
+            <td>{#if instance.status?.mempool && instance.status?.bundles?.last_bundle === lastKnownBundle.number}{formatNumber(instance.status?.mempool.count)}{:else if instance.status}<span class="opacity-25">syncing</span>{/if}</td>
             <td><span class="font-mono text-xs">{#if instance.status?.bundles?.head_hash}{instance.status?.bundles?.head_hash.slice(0, 7)}{/if}</span></td>
             <td><span class="font-mono text-xs">{#if instance.status?.bundles?.root_hash}{instance.status?.bundles?.root_hash.slice(0, 7)}{/if}</span></td>
             <td>{#if instance.status?.server?.version}{instance.status?.server?.version}{/if}</td>