stats

bun.lock

···
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
         "date-fns": "^4.1.0",
+        "filesize": "^11.0.13",
         "lodash": "^4.17.21",
         "numeral": "^2.0.6",
         "tailwindcss": "^4.1.16",
···
     "esrap": ["esrap@2.1.2", "", { "dependencies": { "@jridgewell/sourcemap-codec": "1.5.5" } }, "sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg=="],
 
     "fdir": ["fdir@6.5.0", "", { "optionalDependencies": { "picomatch": "4.0.3" } }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "filesize": ["filesize@11.0.13", "", {}, "sha512-mYJ/qXKvREuO0uH8LTQJ6v7GsUvVOguqxg2VTwQUkyTPXXRRWPdjuUPVqdBrJQhvci48OHlNGRnux+Slr2Rnvw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 

package.json

···
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
     "date-fns": "^4.1.0",
+    "filesize": "^11.0.13",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "tailwindcss": "^4.1.16"

src/App.svelte

···
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { filesize } from 'filesize';
   import { formatDistanceToNow, addSeconds, subSeconds, formatDate, formatISO9075 } from 'date-fns';
   import { Progress, Switch } from '@skeletonlabs/skeleton-svelte';
   import orderBy from "lodash/orderBy";
···
       root_hash: string;
       head_hash: string;
       end_time?: string;
+      total_size: number;
+      uncompressed_size: number;
     };
     server: {
       uptime: number;
···
     mempoolPercent: number;
     time?: string;
     etaNext?: Date;
+    totalSize: number;
+    totalSizeUncompressed: number;
   }
 
   let lastKnownBundle = $state<LastKnownBundle>({
···
           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)
+          lastKnownBundle.totalSize = status.bundles.total_size
+          lastKnownBundle.totalSizeUncompressed = status.bundles.uncompressed_size
         }
       }
       lastUpdated = new Date()
···
       </div>      
     </header>
 
-    <div class="flex gap-10 mt-6 grid grid-cols-2">
+    <div class="gap-10 mt-6 grid grid-cols-3">
       <div>
         <h2 class="opacity-75 text-sm">Last known bundle</h2>
         <div>
···
               <div class="font-semibold text-2xl animate-pulse">{lastKnownBundle.number + 1}</div>
               <div>{formatNumber(lastKnownBundle.mempool)} / {formatNumber(BUNDLE_OPS)} <span class="opacity-50">({lastKnownBundle.mempoolPercent}%)</span></div>
               {#if lastKnownBundle.etaNext}
-                <div class="mt-2 opacity-50">ETA: {formatDistanceToNow(lastKnownBundle.etaNext)}</div>
+                <div class="mt-1 opacity-50">ETA: {formatDistanceToNow(lastKnownBundle.etaNext)}</div>
               {/if}
             </div>
           {/if}
         </div>
       </div>
+      {#if lastKnownBundle.number > 0}
+        <div class="">
+          <div>
+              <h2 class="opacity-75 text-sm">Statistics</h2>
+          </div>
+          <div class="mt-2 grid grid-cols-1 gap-1">
+            <div><span class="opacity-50">Instances:</span> {instances.filter(i => i._head).length} latest / {instances.length} total</div>
+            <div><span class="opacity-50">Bundles Size:</span> {filesize(lastKnownBundle.totalSize)}</div>
+            <div><span class="opacity-50">Uncompressed:</span> {filesize(lastKnownBundle.totalSizeUncompressed)}</div>
+          </div>
+        </div>
+      {/if}
     </div>      
 
     <table class="table mt-10">