chore: reduce redis overhead and add upstash to costs (#653)

- increase docket heartbeat interval from 2s to 30s
- reduces redis commands by ~15x (heartbeat tracks 12 tasks)
- dead worker detection: 10s → 2.5min (acceptable for 5-min perpetual task)

- add upstash to /costs dashboard
- track redis usage in cost breakdown
- currently free tier (256MB, 500K commands/month)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <[e-mail]>

backend/src/backend/_internal/background.py

···
     async with Docket(
         name=settings.docket.name,
         url=settings.docket.url,
+        # default 2s is for systems needing fast worker failure detection
+        # with our 5-minute perpetual task, 30s is plenty responsive
+        heartbeat_interval=timedelta(seconds=30),
     ) as docket:
         _docket = docket
 

frontend/src/routes/costs/+page.svelte

···
 				breakdown: CostBreakdown;
 				note: string;
 			};
+			upstash?: {
+				amount: number;
+				note: string;
+			};
 			audd: {
 				amount: number;
 				base_cost: number;
···
 					data.costs.fly_io.amount,
 					data.costs.neon.amount,
 					data.costs.cloudflare.amount,
+					data.costs.upstash?.amount ?? 0,
 					data.costs.audd.amount
 				)
 			: 1
 	);
 
-	let maxRequests = $derived.by(() => {
-		return filteredDaily.length ? Math.max(...filteredDaily.map((d) => d.requests)) : 1;
-	});
+	// derive max requests for the daily chart based on filtered data
+	let maxRequests = $derived(
+		filteredDaily.length > 0 ? Math.max(...filteredDaily.map((d) => d.requests), 1) : 1
+	);
 
-	onMount(async () => {
-		try {
-			const response = await fetch(`${API_URL}/stats/costs`);
-			if (!response.ok) {
-				throw new Error(`failed to load cost data: ${response.status}`);
-			}
-			data = await response.json();
-		} catch (e) {
-			console.error('failed to load costs:', e);
-			error = e instanceof Error ? e.message : 'failed to load cost data';
-		} finally {
-			loading = false;
-		}
-	});
+	function formatCurrency(amount: number): string {
+		return `$${amount.toFixed(2)}`;
+	}
 
 	function formatDate(isoString: string): string {
-		const date = new Date(isoString);
-		return date.toLocaleDateString('en-US', {
+		return new Date(isoString).toLocaleString('en-US', {
 			month: 'short',
 			day: 'numeric',
-			year: 'numeric',
 			hour: 'numeric',
 			minute: '2-digit'
 		});
 	}
 
-	function formatCurrency(amount: number): string {
-		return `$${amount.toFixed(2)}`;
+	function formatShortDate(isoString: string): string {
+		return new Date(isoString).toLocaleString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
 	}
 
-	// calculate bar width as percentage of max
 	function barWidth(amount: number, max: number): number {
-		return Math.max(5, (amount / max) * 100);
+		if (max === 0) return 0;
+		return Math.max((amount / max) * 100, 2); // minimum 2% for visibility
 	}
+
+	onMount(async () => {
+		try {
+			const res = await fetch(`${API_URL}/stats/costs`);
+			if (!res.ok) throw new Error('failed to load costs');
+			data = await res.json();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'unknown error';
+		} finally {
+			loading = false;
+		}
+	});
 
 	async function logout() {
 		await auth.logout();
···
 					<span class="cost-note">{data.costs.cloudflare.note}</span>
 				</div>
 
+				{#if data.costs.upstash}
+					<div class="cost-item">
+						<div class="cost-header">
+							<span class="cost-name">upstash</span>
+							<span class="cost-amount">{formatCurrency(data.costs.upstash.amount)}</span>
+						</div>
+						<div class="cost-bar-bg">
+							<div
+								class="cost-bar"
+								style="width: {barWidth(data.costs.upstash.amount, maxCost)}%"
+							></div>
+						</div>
+						<span class="cost-note">{data.costs.upstash.note}</span>
+					</div>
+				{/if}
+
 				<div class="cost-item">
 					<div class="cost-header">
 						<span class="cost-name">audd</span>
···
 
 		<!-- audd details -->
 		<section class="audd-section">
-			<div class="audd-header">
-				<h2>api requests (audd)</h2>
-				<div class="time-range-toggle">
-					<button
-						class:active={timeRange === 'day'}
-						onclick={() => (timeRange = 'day')}
-					>
-						24h
-					</button>
-					<button
-						class:active={timeRange === 'week'}
-						onclick={() => (timeRange = 'week')}
-					>
-						7d
-					</button>
-					<button
-						class:active={timeRange === 'month'}
-						onclick={() => (timeRange = 'month')}
-					>
-						30d
-					</button>
-				</div>
-			</div>
+			<h2>copyright detection (audd)</h2>
 
 			<div class="audd-stats">
 				<div class="stat">
-					<span class="stat-value">{filteredTotals.requests.toLocaleString()}</span>
-					<span class="stat-label">requests ({timeRange === 'day' ? '24h' : timeRange === 'week' ? '7d' : '30d'})</span>
+					<span class="stat-value">{data.costs.audd.scans_this_period.toLocaleString()}</span>
+					<span class="stat-label">tracks scanned</span>
+				</div>
+				<div class="stat">
+					<span class="stat-value">{data.costs.audd.requests_this_period.toLocaleString()}</span>
+					<span class="stat-label">api requests</span>
 				</div>
 				<div class="stat">
 					<span class="stat-value">{data.costs.audd.remaining_free.toLocaleString()}</span>
 					<span class="stat-label">free remaining</span>
 				</div>
 				<div class="stat">
-					<span class="stat-value">{filteredTotals.scans.toLocaleString()}</span>
-					<span class="stat-label">tracks scanned</span>
+					<span class="stat-value">{data.costs.audd.flag_rate}%</span>
+					<span class="stat-label">flag rate</span>
 				</div>
 			</div>
 
-			<p class="audd-explainer">
-				1 request = 12s of audio. {data.costs.audd.free_requests.toLocaleString()} free/month,
-				then ${(5).toFixed(2)}/1k requests.
-				{#if data.costs.audd.billable_requests > 0}
-					<strong>{data.costs.audd.billable_requests.toLocaleString()} billable</strong> this billing period.
-				{/if}
-			</p>
-
-			{#if filteredDaily.length > 0}
-				<div class="daily-chart">
-					<h3>daily requests</h3>
-					<div class="chart-bars">
+			<!-- daily chart with time range toggle -->
+			{#if data.costs.audd.daily.length > 0}
+				<div class="daily-chart-container">
+					<div class="chart-header">
+						<h3>daily requests</h3>
+						<div class="time-toggle">
+							<button
+								class="toggle-btn"
+								class:active={timeRange === 'day'}
+								onclick={() => (timeRange = 'day')}
+							>
+								24h
+							</button>
+							<button
+								class="toggle-btn"
+								class:active={timeRange === 'week'}
+								onclick={() => (timeRange = 'week')}
+							>
+								7d
+							</button>
+							<button
+								class="toggle-btn"
+								class:active={timeRange === 'month'}
+								onclick={() => (timeRange = 'month')}
+							>
+								30d
+							</button>
+						</div>
+					</div>
+					<div class="chart-summary">
+						<span>{filteredTotals.requests.toLocaleString()} requests</span>
+						<span class="separator">·</span>
+						<span>{filteredTotals.scans.toLocaleString()} scans</span>
+					</div>
+					<div class="daily-chart">
 						{#each filteredDaily as day}
-							<div class="chart-bar-container">
+							<div class="day-bar-container">
 								<div
-									class="chart-bar"
-									style="height: {Math.max(4, (day.requests / maxRequests) * 100)}%"
-									title="{day.date}: {day.requests} requests ({day.scans} tracks)"
+									class="day-bar"
+									style="height: {barWidth(day.requests, maxRequests)}%"
+									title="{formatShortDate(day.date)}: {day.requests} requests, {day.scans} scans"
 								></div>
-								<span class="chart-label">{day.date.slice(5)}</span>
+								<span class="day-label">{formatShortDate(day.date)}</span>
 							</div>
 						{/each}
 					</div>
 				</div>
-			{:else}
-				<p class="no-data">no requests in this time range</p>
 			{/if}
 		</section>
 
 		<!-- support cta -->
 		<section class="support-section">
-			<div class="support-card">
-				<div class="support-icon">
-					<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-						<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-					</svg>
-				</div>
-				<div class="support-text">
-					<h3>support {APP_NAME}</h3>
-					<p>{data.support.message}</p>
-				</div>
-				<a href={data.support.url} target="_blank" rel="noopener" class="support-button">
-					support
-				</a>
-			</div>
+			<p>{data.support.message}</p>
+			<a href={data.support.url} target="_blank" rel="noopener noreferrer" class="support-link">
+				become a supporter →
+			</a>
 		</section>
-
-		<!-- footer note -->
-		<p class="footer-note">
-			{APP_NAME} is an open-source project.
-			<a href="https://github.com/zzstoatzz/plyr.fm" target="_blank" rel="noopener">view source</a>
-		</p>
 	{/if}
 </main>
 
···
 	main {
 		max-width: 600px;
 		margin: 0 auto;
-		padding: 0 1rem calc(var(--player-height, 120px) + 2rem + env(safe-area-inset-bottom, 0px));
+		padding: 2rem 1rem 6rem;
 	}
 
 	.page-header {
···
 	}
 
 	.page-header h1 {
-		font-size: var(--text-page-heading);
-		margin: 0 0 0.5rem;
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0 0 0.25rem;
 	}
 
 	.subtitle {
-		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		color: var(--text-secondary);
+		font-size: 0.875rem;
 		margin: 0;
 	}
 
-	.loading {
-		display: flex;
-		justify-content: center;
-		padding: 4rem 0;
-	}
-
+	.loading,
 	.error-state {
 		text-align: center;
 		padding: 3rem 1rem;
-		color: var(--text-secondary);
 	}
 
-	.error-state .hint {
-		color: var(--text-tertiary);
-		font-size: 0.85rem;
-		margin-top: 0.5rem;
+	.error-state p {
+		margin: 0.5rem 0;
+	}
+
+	.hint {
+		color: var(--text-secondary);
+		font-size: 0.875rem;
 	}
 
 	/* total section */
 	.total-section {
+		text-align: center;
 		margin-bottom: 2rem;
 	}
 
 	.total-card {
+		background: var(--surface);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		padding: 1.5rem;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		padding: 2rem;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 12px;
+		gap: 0.5rem;
 	}
 
 	.total-label {
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--text-tertiary);
-		margin-bottom: 0.5rem;
+		font-size: 0.875rem;
+		color: var(--text-secondary);
+		text-transform: lowercase;
 	}
 
 	.total-amount {
-		font-size: 3rem;
+		font-size: 2.5rem;
 		font-weight: 700;
 		color: var(--accent);
 	}
 
 	.updated {
-		text-align: center;
 		font-size: 0.75rem;
-		color: var(--text-tertiary);
-		margin-top: 0.75rem;
+		color: var(--text-secondary);
+		margin-top: 0.5rem;
 	}
 
 	/* breakdown section */
···
 		margin-bottom: 2rem;
 	}
 
-	.breakdown-section h2,
-	.audd-section h2 {
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--text-tertiary);
-		margin-bottom: 1rem;
+	.breakdown-section h2 {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0 0 1rem;
+		text-transform: lowercase;
 	}
 
 	.cost-bars {
···
 	}
 
 	.cost-item {
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
-		padding: 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
 	}
 
 	.cost-header {
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 0.5rem;
+		align-items: baseline;
 	}
 
 	.cost-name {
-		font-weight: 600;
-		color: var(--text-primary);
+		font-weight: 500;
+		font-size: 0.875rem;
 	}
 
 	.cost-amount {
 		font-weight: 600;
-		color: var(--accent);
-		font-variant-numeric: tabular-nums;
+		font-size: 0.875rem;
 	}
 
 	.cost-bar-bg {
 		height: 8px;
-		background: var(--bg-primary);
+		background: var(--surface);
 		border-radius: 4px;
 		overflow: hidden;
-		margin-bottom: 0.5rem;
 	}
 
 	.cost-bar {
···
 	}
 
 	.cost-bar.audd {
-		background: var(--warning);
+		background: linear-gradient(90deg, var(--accent), var(--accent-hover));
 	}
 
 	.cost-note {
 		font-size: 0.75rem;
-		color: var(--text-tertiary);
+		color: var(--text-secondary);
 	}
 
 	/* audd section */
···
 		margin-bottom: 2rem;
 	}
 
-	.audd-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 1rem;
-		gap: 1rem;
+	.audd-section h2 {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0 0 1rem;
+		text-transform: lowercase;
 	}
 
-	.audd-header h2 {
-		margin-bottom: 0;
+	.audd-stats {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 1rem;
+		margin-bottom: 1.5rem;
 	}
 
-	.time-range-toggle {
+	.stat {
+		background: var(--surface);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 1rem;
 		display: flex;
+		flex-direction: column;
 		gap: 0.25rem;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 6px;
-		padding: 0.25rem;
+	}
+
+	.stat-value {
+		font-size: 1.25rem;
+		font-weight: 600;
 	}
 
-	.time-range-toggle button {
-		padding: 0.35rem 0.75rem;
-		font-family: inherit;
+	.stat-label {
 		font-size: 0.75rem;
-		font-weight: 500;
-		background: transparent;
-		border: none;
-		border-radius: 4px;
 		color: var(--text-secondary);
-		cursor: pointer;
-		transition: all 0.15s;
+		text-transform: lowercase;
 	}
 
-	.time-range-toggle button:hover {
-		color: var(--text-primary);
+	/* daily chart */
+	.daily-chart-container {
+		background: var(--surface);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 1rem;
 	}
 
-	.time-range-toggle button.active {
-		background: var(--accent);
-		color: white;
+	.daily-chart-container h3 {
+		font-size: 0.875rem;
+		font-weight: 500;
+		margin: 0 0 0.75rem;
+		text-transform: lowercase;
 	}
 
-	.no-data {
-		text-align: center;
-		color: var(--text-tertiary);
-		font-size: 0.85rem;
-		padding: 2rem;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+	.chart-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.5rem;
 	}
 
-	.audd-stats {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 1rem;
-		margin-bottom: 1rem;
+	.chart-header h3 {
+		margin: 0;
 	}
 
-	.audd-explainer {
-		font-size: 0.8rem;
-		color: var(--text-secondary);
-		margin-bottom: 1.5rem;
-		line-height: 1.5;
+	.time-toggle {
+		display: flex;
+		gap: 0.25rem;
+		background: var(--background);
+		border-radius: 6px;
+		padding: 2px;
 	}
 
-	.audd-explainer strong {
-		color: var(--warning);
+	.toggle-btn {
+		background: transparent;
+		border: none;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		cursor: pointer;
+		border-radius: 4px;
+		transition:
+			background 0.15s,
+			color 0.15s;
 	}
 
-	.stat {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 1rem;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+	.toggle-btn:hover {
+		color: var(--text-primary);
 	}
 
-	.stat-value {
-		font-size: 1.25rem;
-		font-weight: 700;
+	.toggle-btn.active {
+		background: var(--surface);
 		color: var(--text-primary);
-		font-variant-numeric: tabular-nums;
+		font-weight: 500;
 	}
 
-	.stat-label {
-		font-size: 0.7rem;
-		color: var(--text-tertiary);
-		text-align: center;
-		margin-top: 0.25rem;
-	}
-
-	/* daily chart */
-	.daily-chart {
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
-		padding: 1rem;
-		overflow: hidden;
+	.chart-summary {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		margin-bottom: 0.75rem;
 	}
 
-	.daily-chart h3 {
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--text-tertiary);
-		margin: 0 0 1rem;
+	.chart-summary .separator {
+		margin: 0 0.5rem;
 	}
 
-	.chart-bars {
+	.daily-chart {
 		display: flex;
-		align-items: flex-end;
 		gap: 2px;
-		height: 100px;
-		width: 100%;
+		height: 80px;
+		align-items: flex-end;
+		overflow-x: auto;
 	}
 
-	.chart-bar-container {
-		flex: 1 1 0;
-		min-width: 0;
+	.day-bar-container {
+		flex: 1;
+		min-width: 20px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		gap: 4px;
 		height: 100%;
 	}
 
-	.chart-bar {
+	.day-bar {
 		width: 100%;
 		background: var(--accent);
 		border-radius: 2px 2px 0 0;
-		min-height: 4px;
-		margin-top: auto;
-		transition: height 0.3s ease;
+		min-height: 2px;
+		cursor: help;
+		transition: opacity 0.15s;
 	}
 
-	.chart-bar:hover {
+	.day-bar:hover {
 		opacity: 0.8;
 	}
 
-	.chart-label {
-		font-size: 0.55rem;
-		color: var(--text-tertiary);
-		margin-top: 0.25rem;
+	.day-label {
+		font-size: 0.625rem;
+		color: var(--text-secondary);
 		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 100%;
 	}
 
 	/* support section */
 	.support-section {
-		margin-bottom: 2rem;
-	}
-
-	.support-card {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
 		text-align: center;
-		padding: 2rem;
-		background: linear-gradient(135deg,
-			color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary)),
-			var(--bg-tertiary)
-		);
-		border: 1px solid var(--border-subtle);
+		padding: 1.5rem;
+		background: var(--surface);
+		border: 1px solid var(--border);
 		border-radius: 12px;
 	}
 
-	.support-icon {
-		color: var(--accent);
-		margin-bottom: 1rem;
-	}
-
-	.support-text h3 {
-		margin: 0 0 0.5rem;
-		font-size: 1.1rem;
-		color: var(--text-primary);
-	}
-
-	.support-text p {
-		margin: 0 0 1.5rem;
+	.support-section p {
+		margin: 0 0 1rem;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: 0.875rem;
 	}
 
-	.support-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem 1.5rem;
-		background: var(--accent);
-		color: white;
-		border-radius: 8px;
-		text-decoration: none;
-		font-weight: 600;
-		font-size: 0.9rem;
-		transition: transform 0.15s, box-shadow 0.15s;
-	}
-
-	.support-button:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
-	}
-
-	/* footer */
-	.footer-note {
-		text-align: center;
-		font-size: 0.8rem;
-		color: var(--text-tertiary);
-		padding-bottom: 1rem;
-	}
-
-	.footer-note a {
+	.support-link {
+		display: inline-block;
 		color: var(--accent);
+		font-weight: 500;
 		text-decoration: none;
 	}
 
-	.footer-note a:hover {
+	.support-link:hover {
 		text-decoration: underline;
 	}
 
 	@media (max-width: 480px) {
 		.total-amount {
-			font-size: 2.5rem;
+			font-size: 2rem;
 		}
 
 		.audd-stats {
-			grid-template-columns: 1fr;
+			grid-template-columns: 1fr 1fr;
 		}
 
-		.chart-label {
+		.day-label {
 			display: none;
 		}
 	}

scripts/costs/export_costs.py

···
 AUDD_COST_PER_1000 = 5.00  # $5 per 1000 requests
 AUDD_BASE_COST = 5.00  # $5/month base
 
-# fixed monthly costs (updated 2025-12-16)
+# fixed monthly costs (updated 2025-12-26)
 # fly.io: manually updated from cost explorer (TODO: use fly billing API)
 # neon: fixed $5/month
 # cloudflare: mostly free tier
+# upstash: free tier (256MB, 500K commands/month)
 FIXED_COSTS = {
     "fly_io": {
         "breakdown": {
···
         "domain": 1.00,
         "total": 1.16,
         "note": "r2 egress is free, pages free tier",
+    },
+    "upstash": {
+        "total": 0.00,
+        "note": "redis for docket + caching (free tier: 256MB, 500K commands/month)",
     },
 }
 
···
         plyr_fly
         + FIXED_COSTS["neon"]["total"]
         + FIXED_COSTS["cloudflare"]["total"]
+        + FIXED_COSTS["upstash"]["total"]
         + audd_stats["estimated_cost"]
     )
 
···
                     "domain": FIXED_COSTS["cloudflare"]["domain"],
                 },
                 "note": FIXED_COSTS["cloudflare"]["note"],
+            },
+            "upstash": {
+                "amount": FIXED_COSTS["upstash"]["total"],
+                "note": FIXED_COSTS["upstash"]["note"],
             },
             "audd": {
                 "amount": audd_stats["estimated_cost"],