Cooler features and many many fixes later

src/routes/archive/+page.svelte

@@ -3,13 +3,19 @@
   import { onMount } from 'svelte';
   import { getMyMessages } from '$lib/firebase/messages.js';
   import { getDecayInfo } from '$lib/utils/time.js';
+  import { getStats } from '$lib/utils/stats.js';
 
   let messages = $state([]);
   let loading = $state(true);
 
+  // personal engagement stats (read/echoed/letGo) - purely local to this
+  // device (see stats.js), read once when the page mounts
+  let stats = $state({ read: 0, echoed: 0, letGo: 0 });
+
   onMount(async () => {
     messages = await getMyMessages();
     loading = false;
+    stats = getStats();
   });
 </script>
 
@@ -20,6 +26,12 @@
     <p class="subtitle">Everything you've left behind</p>
   </div>
 
+  <!-- personal engagement stats summary - a private mirror of how this
+       device has moved through the app, see stats.js -->
+  <p class="stats-line">
+    you've read {stats.read} messages, echoed {stats.echoed}, let {stats.letGo} fade.
+  </p>
+
   {#if loading}
     <div class="loading">Loading your messages...</div>
 
@@ -96,6 +108,16 @@
     color: #aaa;
   }
 
+  /* personal engagement stats - calm/muted like .subtitle, with a slight
+     contemplative italic to set it apart as a private aside rather than
+     part of the page's structural header */
+  .stats-line {
+    font-size: 0.85rem;
+    color: #999;
+    font-style: italic;
+    margin: -0.5rem 0 2rem;
+  }
+
   .loading {
     text-align: center;
     color: #aaa;