fix: stats logging, bonfire animation, timezone and streak fixes

app/profile/[username]/page.tsx

@@ -45,40 +45,39 @@ export async function generateMetadata({ params }: ProfilePageProps): Promise<Me
   }
 }
 
-// Build the 364-cell calendar grid (52 weeks × 7 days, Mon → Sun, oldest first)
-function buildCalendarCells(dayMap: Record<string, number>) {
-  const today = new Date()
+// UTC midnight for a given UTC year/month/day offset
+function utcDay(offsetDays = 0): Date {
+  const now = new Date()
+  return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + offsetDays))
+}
 
-  // Find the Monday 53 weeks ago
-  const start = new Date(today)
-  start.setDate(start.getDate() - 371)
-  // Rewind to the nearest Monday on or before `start`
-  const dow = start.getDay() // 0=Sun…6=Sat
-  start.setDate(start.getDate() - (dow === 0 ? 6 : dow - 1))
+// Build the 371-cell calendar grid (53 weeks × 7 days, Mon → Sun, oldest first)
+// All date arithmetic is in UTC to match toDayKey output and pomodoro_logs timestamps.
+function buildCalendarCells(dayMap: Record<string, number>) {
+  const start = utcDay(-371)
+  // Rewind to nearest Monday on or before start (UTC day-of-week)
+  const dow = start.getUTCDay() // 0=Sun…6=Sat
+  start.setUTCDate(start.getUTCDate() - (dow === 0 ? 6 : dow - 1))
 
   const cells: { date: string; minutes: number }[] = []
   const cur = new Date(start)
   while (cells.length < 53 * 7) {
     const dateStr = toDayKey(cur)
-    cells.push({
-      date: dateStr,
-      minutes: dayMap[dateStr] ?? 0,
-    })
-    cur.setDate(cur.getDate() + 1)
+    cells.push({ date: dateStr, minutes: dayMap[dateStr] ?? 0 })
+    cur.setUTCDate(cur.getUTCDate() + 1)
   }
   return cells
 }
 
 // Build last-7-days bars with labels
+// All date arithmetic is in UTC to match toDayKey output.
 function buildWeekDays(dayMap: Record<string, number>) {
-  const today = new Date()
   return Array.from({ length: 7 }, (_, i) => {
-    const d = new Date(today)
-    d.setDate(d.getDate() - (6 - i))
+    const d = utcDay(i - 6)
     const dateStr = toDayKey(d)
     return {
       date: dateStr,
-      label: d.toLocaleDateString('en-US', { weekday: 'short' }),
+      label: d.toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
       minutes: dayMap[dateStr] ?? 0,
       isToday: i === 6,
     }

components/profile/StatsGrid.tsx

@@ -1,7 +1,18 @@
 import { Timer, Flame, Trophy, Clock } from 'lucide-react'
 import type { Profile } from '@/types'
+import { toDayKey } from '@/lib/date'
 import { cn } from '@/lib/utils'
 
+// Returns 0 if the streak hasn't been continued recently enough to still be alive.
+// Uses a 2-day UTC window to accommodate all timezones (UTC-12 to UTC+14):
+// a user in UTC+14 stores last_active_date as their local date which can be
+// 1 day ahead of server UTC, so we check >= 2 days ago UTC.
+function effectiveStreak(currentStreak: number, lastActiveDate: string | null): number {
+  if (currentStreak === 0 || !lastActiveDate) return currentStreak
+  const twoDaysAgo = toDayKey(new Date(Date.now() - 2 * 24 * 60 * 60 * 1000))
+  return lastActiveDate >= twoDaysAgo ? currentStreak : 0
+}
+
 interface StatsGridProps {
   profile: Profile
   className?: string
@@ -58,7 +69,8 @@ function StatCard({ icon, label, value, suffix, highlight }: StatCardProps) {
 }
 
 export function StatsGrid({ profile, className }: StatsGridProps) {
-  const focusHours = Math.round(profile.total_focus_minutes / 60)
+  const focusHours = Math.floor(profile.total_focus_minutes / 60)
+  const streak = effectiveStreak(profile.current_streak, profile.last_active_date)
 
   if (profile.total_pomodoros === 0) {
     return (
@@ -95,9 +107,9 @@ export function StatsGrid({ profile, className }: StatsGridProps) {
       <StatCard
         icon={<Flame className="w-4 h-4" />}
         label="Current Streak"
-        value={profile.current_streak}
+        value={streak}
         suffix="days"
-        highlight={profile.current_streak > 0}
+        highlight={streak > 0}
       />
       <StatCard
         icon={<Trophy className="w-4 h-4" />}

components/profile/StreakCalendar.tsx

@@ -32,10 +32,10 @@ export function StreakCalendar({ cells, totalMinutesYear, totalPomodorosYear }:
   let lastMonth = -1
   cells.forEach((cell, i) => {
     const col = Math.floor(i / 7)
-    const month = new Date(cell.date + 'T00:00:00').getMonth()
+    const month = new Date(cell.date + 'T12:00:00Z').getUTCMonth()
     if (month !== lastMonth) {
       lastMonth = month
-      const label = new Date(cell.date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short' })
+      const label = new Date(cell.date + 'T12:00:00Z').toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' })
       // Only add if there's room (not last column)
       if (col < WEEKS - 1) monthLabels.push({ label, col })
     }
@@ -132,7 +132,7 @@ export function StreakCalendar({ cells, totalMinutesYear, totalPomodorosYear }:
       {/* Legend */}
       <div className="flex items-center gap-2">
         <span className="text-[10px] text-[var(--text-muted)]">Less</span>
-        {[0, 25, 60, 120, 180].map(m => (
+        {[0, 1, 25, 60, 120].map(m => (
           <div
             key={m}
             style={{

components/profile/WeeklyChart.tsx

@@ -12,7 +12,7 @@ interface WeeklyChartProps {
 export function WeeklyChart({ days }: WeeklyChartProps) {
   const maxMinutes = Math.max(...days.map(d => d.minutes), 30) // floor at 30 so bars aren't full-height for tiny values
   const totalMinutes = days.reduce((s, d) => s + d.minutes, 0)
-  const totalHours = (totalMinutes / 60).toFixed(1)
+  const totalHours = Math.floor(totalMinutes / 60)
 
   return (
     <div

components/session/KeyboardShortcutsModal.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useEffect } from 'react'
+import { X } from 'lucide-react'
+
+interface KeyboardShortcutsModalProps {
+  onClose: () => void
+}
+
+const SHORTCUTS = [
+  { keys: ['Space'], description: 'Start / pause timer' },
+  { keys: ['?'],     description: 'Toggle this help modal' },
+]
+
+export function KeyboardShortcutsModal({ onClose }: KeyboardShortcutsModalProps) {
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ background: 'rgba(0,0,0,0.55)' }}
+      onClick={onClose}
+    >
+      <div
+        className="relative rounded-2xl p-6 flex flex-col gap-4 w-full max-w-xs mx-4"
+        style={{
+          background: 'var(--bg-elevated)',
+          border: '1px solid var(--border)',
+          boxShadow: 'var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4))',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+            Keyboard shortcuts
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1 transition-colors"
+            style={{ color: 'var(--text-muted)' }}
+            aria-label="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {SHORTCUTS.map(({ keys, description }) => (
+            <div key={description} className="flex items-center justify-between gap-4">
+              <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                {description}
+              </span>
+              <div className="flex items-center gap-1 shrink-0">
+                {keys.map(k => (
+                  <kbd
+                    key={k}
+                    className="px-2 py-0.5 rounded text-xs font-mono font-medium"
+                    style={{
+                      background: 'var(--bg-secondary)',
+                      border: '1px solid var(--border)',
+                      color: 'var(--text-primary)',
+                    }}
+                  >
+                    {k}
+                  </kbd>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}