From fc8616b5b34f4c98740735368cb9acda431dc51a Mon Sep 17 00:00:00 2001
From: Ewan Croft <contact@ewancroft.uk>
Date: Thu, 13 Aug 2026 15:08:35 +0100
Subject: [PATCH] feat(tourmaline): surface topArtistAvgDeltas as "Most Regular
 Listening"

topArtistAvgDeltas (average days between consecutive plays, per artist)
was already computed in load-profile.ts but had zero UI consumers.
Added a ranked list showing artists you return to at the most
consistent intervals, next to the other alternate-ranking lists
(weeks active, long-time favourites).
---
 .../src/routes/profile/[did]/+page.svelte     |  2 ++
 .../routes/profile/[did]/CatalogueTab.svelte  |  2 ++
 .../profile/[did]/ListeningCadence.svelte     | 34 +++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 packages/tourmaline/src/routes/profile/[did]/ListeningCadence.svelte

diff --git a/packages/tourmaline/src/routes/profile/[did]/+page.svelte b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
index 92e3fe6..125d02f 100644
--- a/packages/tourmaline/src/routes/profile/[did]/+page.svelte
+++ b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
@@ -33,6 +33,7 @@
 	import OnThisDay from './OnThisDay.svelte';
 	import Anniversaries from './Anniversaries.svelte';
 	import WeeksActive from './WeeksActive.svelte';
+	import ListeningCadence from './ListeningCadence.svelte';
 	import DateRangePicker from './DateRangePicker.svelte';
 	import ListeningPhases from './ListeningPhases.svelte';
 	import StoryRecap from './StoryRecap.svelte';
@@ -531,6 +532,7 @@
 			</div>
 
 			<WeeksActive artists={profile.topArtistsByWeeksActive} />
+			<ListeningCadence artists={profile.topArtistAvgDeltas} />
 
 			<!-- Top tracks + albums side by side -->
 			<div class="mb-6 grid gap-4 sm:mb-8 sm:gap-8 lg:grid-cols-2">
diff --git a/packages/tourmaline/src/routes/profile/[did]/CatalogueTab.svelte b/packages/tourmaline/src/routes/profile/[did]/CatalogueTab.svelte
index 471740c..6740a63 100644
--- a/packages/tourmaline/src/routes/profile/[did]/CatalogueTab.svelte
+++ b/packages/tourmaline/src/routes/profile/[did]/CatalogueTab.svelte
@@ -4,6 +4,7 @@
     import OnThisDay from './OnThisDay.svelte';
     import Anniversaries from './Anniversaries.svelte';
     import WeeksActive from './WeeksActive.svelte';
+    import ListeningCadence from './ListeningCadence.svelte';
     import type { ListenerProfile } from '$lib/types';
     import type { OnThisDayEntry } from '$lib/analysis/on-this-day';
 
@@ -80,6 +81,7 @@
 </div>
 
 <WeeksActive artists={profile.topArtistsByWeeksActive} />
+<ListeningCadence artists={profile.topArtistAvgDeltas} />
 
 {#if profile.discoveredArtists.length > 0 || profile.discoveredTracks.length > 0 || profile.discoveredAlbums.length > 0}
     <div class="mb-6 sm:mb-8">
diff --git a/packages/tourmaline/src/routes/profile/[did]/ListeningCadence.svelte b/packages/tourmaline/src/routes/profile/[did]/ListeningCadence.svelte
new file mode 100644
index 0000000..849c11c
--- /dev/null
+++ b/packages/tourmaline/src/routes/profile/[did]/ListeningCadence.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Repeat } from '@lucide/svelte';
+
+	let { artists }: { artists: Array<{ name: string; avgDaysBetween: number; count: number }> } = $props();
+
+	function formatCadence(days: number): string {
+		if (days < 1) return '< 1 day';
+		if (days < 2) return '~1 day';
+		return `~${Math.round(days)} days`;
+	}
+</script>
+
+{#if artists.length > 0}
+	<div class="mb-6 overflow-hidden rounded border border-[var(--border)] bg-[var(--surface)] p-3 sm:mb-8 sm:p-4">
+		<div class="mb-3 flex items-start justify-between gap-4 sm:mb-4">
+			<div>
+				<h2 class="text-base font-semibold sm:text-lg">Most Regular Listening</h2>
+				<p class="text-xs text-[var(--text-dim)]">Artists you come back to at the most consistent intervals</p>
+			</div>
+			<div class="shrink-0 text-[var(--accent)]">
+				<Repeat size={18} />
+			</div>
+		</div>
+		<ol class="space-y-2">
+			{#each artists.slice(0, 10) as artist, i (artist.name)}
+				<li class="flex items-center gap-2 overflow-hidden sm:gap-3">
+					<span class="w-5 shrink-0 text-right text-xs text-[var(--text-muted)] sm:w-6 sm:text-sm">{i + 1}</span>
+					<span class="min-w-0 shrink truncate">{artist.name}</span>
+					<span class="shrink-0 font-mono text-xs text-[var(--text-muted)] sm:text-sm">{formatCadence(artist.avgDaysBetween)}</span>
+				</li>
+			{/each}
+		</ol>
+	</div>
+{/if}
-- 
2.51.2