From 93be9ba4a5bfee5c057e8537291e1360d57e32ab Mon Sep 17 00:00:00 2001
From: Ewan Croft <contact@ewancroft.uk>
Date: Thu, 13 Aug 2026 15:06:05 +0100
Subject: [PATCH] fix(tourmaline): wire ListeningStats data through and render
 it live
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

daysScrobbled, daysScrobbledPercentage, oneHitWondersCount,
oneHitWondersPercentage, mostPopularYear, and mostPopularMonth were all
computed by the aggregator but never copied into ListenerProfile, so no
component could ever receive them. Compounding that, the one component
built to display them (ListeningStats.svelte — streaks, biggest day,
days scrobbled %, one-hit wonders, most popular month) was imported in
+page.svelte but never actually rendered there, only inside the also-
orphaned OverviewTab.svelte. The whole card was invisible end to end.

Added the missing fields to ListenerProfile, wired them through
computeProfile, replaced ListeningStats' `statsData?: any` with a
proper interface, and rendered it at the top of the live habits tab.
---
 packages/tourmaline/src/lib/client/load-profile.ts     |  6 ++++++
 packages/tourmaline/src/lib/types.ts                   |  6 ++++++
 .../tourmaline/src/routes/profile/[did]/+page.svelte   | 10 ++++++++++
 .../src/routes/profile/[did]/ListeningStats.svelte     | 10 +++++++++-
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/tourmaline/src/lib/client/load-profile.ts b/packages/tourmaline/src/lib/client/load-profile.ts
index de9f8b7..b63656d 100644
--- a/packages/tourmaline/src/lib/client/load-profile.ts
+++ b/packages/tourmaline/src/lib/client/load-profile.ts
@@ -172,6 +172,12 @@ export function computeProfile(
     longestNotListenedGap: data.longestNotListenedGap,
     recommendations: buildRecommendations(data.topArtists, data.allArtists, artistInfos),
     anniversaries: buildAnniversaries(data),
+    daysScrobbled: data.daysScrobbled,
+    daysScrobbledPercentage: data.daysScrobbledPercentage,
+    oneHitWondersCount: data.oneHitWondersCount,
+    oneHitWondersPercentage: data.oneHitWondersPercentage,
+    mostPopularYear: data.mostPopularYear,
+    mostPopularMonth: data.mostPopularMonth,
   };
 
   const sessions = deriveSessions(filtered);
diff --git a/packages/tourmaline/src/lib/types.ts b/packages/tourmaline/src/lib/types.ts
index 364b9ce..d0dc0cb 100644
--- a/packages/tourmaline/src/lib/types.ts
+++ b/packages/tourmaline/src/lib/types.ts
@@ -141,6 +141,12 @@ export interface ListenerProfile {
   longestNotListenedGap: Gap | null;
   recommendations: Recommendation[];
   anniversaries: AnniversaryGroups;
+  daysScrobbled: number;
+  daysScrobbledPercentage: number;
+  oneHitWondersCount: number;
+  oneHitWondersPercentage: number;
+  mostPopularYear: { year: string; count: number };
+  mostPopularMonth: { month: string; count: number };
 }
 
 export interface UnusualMonth {
diff --git a/packages/tourmaline/src/routes/profile/[did]/+page.svelte b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
index 2078247..1979249 100644
--- a/packages/tourmaline/src/routes/profile/[did]/+page.svelte
+++ b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
@@ -444,6 +444,16 @@
 
 		<!-- ── Habits tab ────────────────────────────────── -->
 		{:else if activeTab === 'habits'}
+			<div class="mb-6 sm:mb-8">
+				<ListeningStats
+					dailyScrobbles={profile.dailyScrobbles}
+					totalScrobbles={profile.totalScrobbles}
+					longestGap={profile.longestNotListenedGap}
+					range={dateRange}
+					statsData={profile}
+				/>
+			</div>
+
 			{#if profile.scrobblesByHour.some((n) => n > 0)}
 				<div class="mb-6 rounded border border-[var(--border)] bg-[var(--surface)] p-3 sm:mb-8 sm:p-4">
 					<h2 class="mb-3 text-base font-semibold sm:mb-4 sm:text-lg">Listening Clock</h2>
diff --git a/packages/tourmaline/src/routes/profile/[did]/ListeningStats.svelte b/packages/tourmaline/src/routes/profile/[did]/ListeningStats.svelte
index fe6d32f..054d4df 100644
--- a/packages/tourmaline/src/routes/profile/[did]/ListeningStats.svelte
+++ b/packages/tourmaline/src/routes/profile/[did]/ListeningStats.svelte
@@ -2,6 +2,14 @@
 	import { Flame, TrendingUp, Calendar, Hash, Clock, User, Zap, Star } from '@lucide/svelte';
 	import type { DailyScrobble, Gap } from '$lib/types';
 
+	interface StatsData {
+		daysScrobbled: number;
+		daysScrobbledPercentage: number;
+		oneHitWondersCount: number;
+		oneHitWondersPercentage: number;
+		mostPopularMonth: { month: string; count: number };
+	}
+
 	let {
 		dailyScrobbles = [],
 		totalScrobbles = 0,
@@ -13,7 +21,7 @@
 		totalScrobbles: number;
 		longestGap: Gap | null;
 		range?: string;
-		statsData?: any;
+		statsData?: StatsData | null;
 	} = $props();
 
 	const stats = $derived.by(() => {
-- 
2.51.2