From af1b24c6ffa4551700c9959b4ce0bcabca1875ed Mon Sep 17 00:00:00 2001
From: Dick Davis <dick@hey.com>
Date: Tue, 11 Nov 2025 21:28:21 -0600
Subject: [PATCH] Ensure app still works even when backgrounded

---
 src/lib/components/Timer.svelte |  47 ++++++++
 src/lib/stores/timer.svelte.ts  | 194 +++++++++++++++++++++++++-------
 src/lib/utils/sw-messaging.ts   |  57 ++++++++++
 static/service-worker.js        | 152 +++++++++++++++++++++++++
 4 files changed, 412 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/utils/sw-messaging.ts

diff --git a/src/lib/components/Timer.svelte b/src/lib/components/Timer.svelte
index d23d552..e04c407 100644
--- a/src/lib/components/Timer.svelte
+++ b/src/lib/components/Timer.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
 	import { timer } from '$lib/stores/timer.svelte';
 	import { formatTime } from '$lib/utils/formatTime';
 	import { playTimerSound } from '$lib/utils/audio';
 	import { sendPeriodNotification } from '$lib/utils/notifications';
+	import { startBackgroundTimer, clearBackgroundNotifications, isServiceWorkerAvailable } from '$lib/utils/sw-messaging';
 	import TimerHeader from '$lib/components/timer/TimerHeader.svelte';
 	import CircularProgress from '$lib/components/timer/CircularProgress.svelte';
 	import TimerControls from '$lib/components/timer/TimerControls.svelte';
@@ -32,10 +34,20 @@
 
 	function handleToggle() {
 		timer.toggle();
+
+		// If we're pausing, clear any background notifications
+		if (!timer.state.isRunning && isServiceWorkerAvailable()) {
+			clearBackgroundNotifications();
+		}
 	}
 
 	function handleReset() {
 		timer.reset();
+
+		// Clear any background notifications
+		if (isServiceWorkerAvailable()) {
+			clearBackgroundNotifications();
+		}
 	}
 
 	onMount(() => {
@@ -50,6 +62,41 @@
 				sendPeriodNotification(periodType);
 			}
 		});
+
+		// Handle page visibility changes for background operation
+		if (browser) {
+			const handleVisibilityChange = () => {
+				if (document.hidden) {
+					// Tab is hidden/minimized - hand off to service worker
+					if (timer.state.isRunning && timer.state.startedAt && isServiceWorkerAvailable()) {
+						startBackgroundTimer({
+							startedAt: timer.state.startedAt,
+							periodType: timer.state.periodType,
+							cycleCount: timer.state.cycleCount,
+							durations: timer.getDurations()
+						});
+					}
+				} else {
+					// Tab is visible again - take back control
+					if (isServiceWorkerAvailable()) {
+						// Clear any scheduled service worker notifications
+						clearBackgroundNotifications();
+					}
+
+					// Sync timer state from timeline
+					if (timer.state.isRunning && timer.state.startedAt) {
+						timer.syncFromTimeline();
+					}
+				}
+			};
+
+			document.addEventListener('visibilitychange', handleVisibilityChange);
+
+			// Cleanup
+			return () => {
+				document.removeEventListener('visibilitychange', handleVisibilityChange);
+			};
+		}
 	});
 
 	onDestroy(() => {
diff --git a/src/lib/stores/timer.svelte.ts b/src/lib/stores/timer.svelte.ts
index 856e62f..e8509d9 100644
--- a/src/lib/stores/timer.svelte.ts
+++ b/src/lib/stores/timer.svelte.ts
@@ -7,6 +7,8 @@ export interface TimerState {
 	remainingSeconds: number;
 	cycleCount: number; // 1-4
 	isRunning: boolean;
+	startedAt: number | null; // timestamp when current period started
+	pausedAt: number | null; // timestamp when paused
 }
 
 const FOCUS_DURATION = 25 * 60; // 25 minutes
@@ -14,6 +16,71 @@ const SHORT_REST_DURATION = 5 * 60; // 5 minutes
 const LONG_REST_DURATION = 30 * 60; // 30 minutes
 const STORAGE_KEY = 'pomodoro-timer-state';
 
+// Get the duration for a given period type and cycle count
+function getPeriodDuration(periodType: PeriodType, cycleCount: number): number {
+	if (periodType === 'focus') {
+		return FOCUS_DURATION;
+	} else {
+		// Rest period: long rest after 4th cycle, short rest otherwise
+		return cycleCount === 4 ? LONG_REST_DURATION : SHORT_REST_DURATION;
+	}
+}
+
+// Calculate what the current state should be based on elapsed time from start
+// This is the "timeline calculation" that replays through periods
+function calculateStateFromTimeline(
+	startedAt: number,
+	initialPeriodType: PeriodType,
+	initialCycleCount: number,
+	now: number = Date.now()
+): { periodType: PeriodType; cycleCount: number; remainingSeconds: number; periodsCompleted: number } {
+	let elapsedSeconds = Math.floor((now - startedAt) / 1000);
+	let currentPeriodType = initialPeriodType;
+	let currentCycleCount = initialCycleCount;
+	let periodsCompleted = 0;
+
+	// Keep advancing through periods until we find where we are now
+	while (true) {
+		const periodDuration = getPeriodDuration(currentPeriodType, currentCycleCount);
+
+		if (elapsedSeconds < periodDuration) {
+			// We're in the middle of this period
+			return {
+				periodType: currentPeriodType,
+				cycleCount: currentCycleCount,
+				remainingSeconds: periodDuration - elapsedSeconds,
+				periodsCompleted
+			};
+		}
+
+		// This period is complete, move to next
+		elapsedSeconds -= periodDuration;
+		periodsCompleted++;
+
+		// Advance to next period
+		if (currentPeriodType === 'focus') {
+			currentPeriodType = 'rest';
+		} else {
+			// Rest period ended
+			if (currentCycleCount === 4) {
+				// After 4th rest, reset to cycle 1
+				currentCycleCount = 1;
+				currentPeriodType = 'focus';
+				// Stop advancing - full cycle complete
+				return {
+					periodType: currentPeriodType,
+					cycleCount: currentCycleCount,
+					remainingSeconds: getPeriodDuration(currentPeriodType, currentCycleCount),
+					periodsCompleted
+				};
+			} else {
+				currentCycleCount++;
+				currentPeriodType = 'focus';
+			}
+		}
+	}
+}
+
 // Load initial state from localStorage or use defaults
 function getInitialState(): TimerState {
 	if (browser) {
@@ -32,7 +99,9 @@ function getInitialState(): TimerState {
 		periodType: 'focus',
 		remainingSeconds: FOCUS_DURATION,
 		cycleCount: 1,
-		isRunning: false
+		isRunning: false,
+		startedAt: null,
+		pausedAt: null
 	};
 }
 
@@ -48,56 +117,75 @@ let state = $state<TimerState>(getInitialState());
 let intervalId: number | null = null;
 let periodEndCallbacks: Array<(periodType: PeriodType) => void> = [];
 
-// Timer tick function
+// Timer tick function - recalculates from timestamp
 function tick() {
-	if (state.remainingSeconds > 0) {
-		state.remainingSeconds--;
-		saveState();
-	} else {
-		// Period ended, transition to next period
-		progressToNextPeriod();
-	}
-}
+	if (!state.startedAt) return;
 
-// Progress to the next period
-function progressToNextPeriod() {
-	const oldPeriodType = state.periodType;
+	// Calculate current state from timeline
+	const calculated = calculateStateFromTimeline(
+		state.startedAt,
+		state.periodType,
+		state.cycleCount
+	);
 
-	if (state.periodType === 'focus') {
-		// Focus period ended, start rest period
-		if (state.cycleCount === 4) {
-			// After 4th cycle, long rest
-			state.periodType = 'rest';
-			state.remainingSeconds = LONG_REST_DURATION;
-		} else {
-			// Short rest after cycles 1-3
-			state.periodType = 'rest';
-			state.remainingSeconds = SHORT_REST_DURATION;
-		}
-	} else {
-		// Rest period ended
-		if (state.cycleCount === 4) {
-			// After long rest, reset to cycle 1 and stop
-			state.cycleCount = 1;
-			state.periodType = 'focus';
-			state.remainingSeconds = FOCUS_DURATION;
+	// Check if we've completed any periods
+	if (calculated.periodsCompleted > 0) {
+		// Period(s) have ended - update state and notify
+		const oldPeriodType = state.periodType;
+		state.periodType = calculated.periodType;
+		state.cycleCount = calculated.cycleCount;
+		state.remainingSeconds = calculated.remainingSeconds;
+
+		// Adjust startedAt to reflect the new period start
+		const now = Date.now();
+		const periodDuration = getPeriodDuration(calculated.periodType, calculated.cycleCount);
+		state.startedAt = now - (periodDuration - calculated.remainingSeconds) * 1000;
+
+		// Check if we've completed a full 4-cycle sequence
+		if (calculated.periodType === 'focus' && calculated.cycleCount === 1 && calculated.periodsCompleted >= 8) {
+			// Stop after completing 4 focus + 4 rest periods
 			state.isRunning = false;
 			if (intervalId !== null) {
 				clearInterval(intervalId);
 				intervalId = null;
 			}
-		} else {
-			// Increment cycle count and continue to next focus period
-			state.cycleCount++;
-			state.periodType = 'focus';
-			state.remainingSeconds = FOCUS_DURATION;
 		}
+
+		saveState();
+
+		// Notify callbacks for each completed period
+		// For simplicity, just notify for the most recent transition
+		periodEndCallbacks.forEach((callback) => callback(calculated.periodType));
+	} else {
+		// Still in same period, just update remaining time
+		state.remainingSeconds = calculated.remainingSeconds;
 	}
+}
+
+// Sync state from timeline (used when resuming from background)
+function syncFromTimeline() {
+	if (!state.startedAt) return;
+
+	const calculated = calculateStateFromTimeline(
+		state.startedAt,
+		state.periodType,
+		state.cycleCount
+	);
+
+	// Update state
+	state.periodType = calculated.periodType;
+	state.cycleCount = calculated.cycleCount;
+	state.remainingSeconds = calculated.remainingSeconds;
+
+	// Adjust startedAt to reflect current period start
+	const now = Date.now();
+	const periodDuration = getPeriodDuration(calculated.periodType, calculated.cycleCount);
+	state.startedAt = now - (periodDuration - calculated.remainingSeconds) * 1000;
 
 	saveState();
 
-	// Notify all callbacks that period ended
-	periodEndCallbacks.forEach((callback) => callback(state.periodType));
+	// Return number of periods completed (for notification purposes)
+	return calculated.periodsCompleted;
 }
 
 export const timer = {
@@ -109,6 +197,19 @@ export const timer = {
 	// Start the timer
 	start() {
 		if (!state.isRunning) {
+			const now = Date.now();
+
+			if (state.pausedAt) {
+				// Resuming from pause - adjust startedAt to account for pause duration
+				const pauseDuration = now - state.pausedAt;
+				state.startedAt = state.startedAt ? state.startedAt + pauseDuration : now;
+				state.pausedAt = null;
+			} else if (!state.startedAt) {
+				// Starting fresh - set initial timestamp
+				const periodDuration = getPeriodDuration(state.periodType, state.cycleCount);
+				state.startedAt = now - (periodDuration - state.remainingSeconds) * 1000;
+			}
+
 			state.isRunning = true;
 			saveState();
 			intervalId = window.setInterval(tick, 1000);
@@ -119,6 +220,7 @@ export const timer = {
 	pause() {
 		if (state.isRunning && intervalId !== null) {
 			state.isRunning = false;
+			state.pausedAt = Date.now();
 			saveState();
 			clearInterval(intervalId);
 			intervalId = null;
@@ -141,9 +243,25 @@ export const timer = {
 		state.remainingSeconds = FOCUS_DURATION;
 		state.cycleCount = 1;
 		state.isRunning = false;
+		state.startedAt = null;
+		state.pausedAt = null;
 		saveState();
 	},
 
+	// Sync from timeline (for resuming from background)
+	syncFromTimeline() {
+		return syncFromTimeline();
+	},
+
+	// Get durations (exposed for service worker communication)
+	getDurations() {
+		return {
+			focus: FOCUS_DURATION,
+			shortRest: SHORT_REST_DURATION,
+			longRest: LONG_REST_DURATION
+		};
+	},
+
 	// Subscribe to period end events (returns unsubscribe function)
 	onPeriodEnd(callback: (periodType: PeriodType) => void) {
 		periodEndCallbacks.push(callback);
diff --git a/src/lib/utils/sw-messaging.ts b/src/lib/utils/sw-messaging.ts
new file mode 100644
index 0000000..1603998
--- /dev/null
+++ b/src/lib/utils/sw-messaging.ts
@@ -0,0 +1,57 @@
+import { browser } from '$app/environment'
+import type { PeriodType } from '$lib/stores/timer.svelte'
+
+export interface TimerPayload {
+  startedAt: number
+  periodType: PeriodType
+  cycleCount: number
+  durations: {
+    focus: number
+    shortRest: number
+    longRest: number
+  }
+}
+
+/**
+ * Send a message to the service worker
+ */
+async function sendToServiceWorker (type: string, payload?: TimerPayload): Promise<void> {
+  if (!browser) return
+
+  try {
+    const registration = await navigator.serviceWorker.ready
+    if (registration.active) {
+      registration.active.postMessage({ type, payload })
+    }
+  } catch (error) {
+    console.error('Failed to send message to service worker:', error)
+  }
+}
+
+/**
+ * Start background timer in service worker
+ */
+export async function startBackgroundTimer (payload: TimerPayload): Promise<void> {
+  await sendToServiceWorker('START_TIMER', payload)
+}
+
+/**
+ * Stop background timer in service worker
+ */
+export async function stopBackgroundTimer (): Promise<void> {
+  await sendToServiceWorker('STOP_TIMER')
+}
+
+/**
+ * Clear all scheduled notifications in service worker
+ */
+export async function clearBackgroundNotifications (): Promise<void> {
+  await sendToServiceWorker('CLEAR_NOTIFICATIONS')
+}
+
+/**
+ * Check if service worker is available and ready
+ */
+export function isServiceWorkerAvailable (): boolean {
+  return browser && 'serviceWorker' in navigator
+}
diff --git a/static/service-worker.js b/static/service-worker.js
index 4e93252..55fc8ca 100644
--- a/static/service-worker.js
+++ b/static/service-worker.js
@@ -44,3 +44,155 @@ self.addEventListener('fetch', (event) => {
       })
   )
 })
+
+// ============================================================================
+// Timer Logic for Background Operation
+// ============================================================================
+
+// Timer state stored in service worker
+const timerState = {
+  isActive: false,
+  startedAt: null,
+  periodType: null, // 'focus' or 'rest'
+  cycleCount: null,
+  durations: null, // { focus, shortRest, longRest }
+  timeoutId: null
+}
+
+// Helper: Get duration for a period
+function getPeriodDuration (periodType, cycleCount, durations) {
+  if (periodType === 'focus') {
+    return durations.focus
+  } else {
+    return cycleCount === 4 ? durations.longRest : durations.shortRest
+  }
+}
+
+// Helper: Calculate next period after current one ends
+function getNextPeriod (periodType, cycleCount) {
+  if (periodType === 'focus') {
+    // Focus → Rest (same cycle)
+    return { periodType: 'rest', cycleCount }
+  } else {
+    // Rest → Focus (next cycle, or reset to 1)
+    if (cycleCount === 4) {
+      // After 4th rest, reset to cycle 1
+      return { periodType: 'focus', cycleCount: 1, shouldStop: true }
+    } else {
+      return { periodType: 'focus', cycleCount: cycleCount + 1 }
+    }
+  }
+}
+
+// Schedule notification for when current period ends
+function scheduleNotification () {
+  if (!timerState.isActive || !timerState.startedAt) {
+    return
+  }
+
+  // Clear any existing timeout
+  if (timerState.timeoutId !== null) {
+    clearTimeout(timerState.timeoutId)
+    timerState.timeoutId = null
+  }
+
+  // Calculate how long until current period ends
+  const periodDuration = getPeriodDuration(
+    timerState.periodType,
+    timerState.cycleCount,
+    timerState.durations
+  )
+  const endTime = timerState.startedAt + periodDuration * 1000
+  const timeUntilEnd = endTime - Date.now()
+
+  if (timeUntilEnd <= 0) {
+    // Period already ended, show notification immediately and advance
+    showPeriodNotification()
+    advanceToNextPeriod()
+  } else {
+    // Schedule notification for end of period
+    timerState.timeoutId = setTimeout(() => {
+      showPeriodNotification()
+      advanceToNextPeriod()
+    }, timeUntilEnd)
+  }
+}
+
+// Show notification for period end
+function showPeriodNotification () {
+  const nextPeriod = getNextPeriod(timerState.periodType, timerState.cycleCount)
+  const title = nextPeriod.periodType === 'focus' ? '🍅 Focus Time!' : '☕ Rest Time!'
+  const body = nextPeriod.periodType === 'focus'
+    ? `Cycle ${nextPeriod.cycleCount} - Time to focus!`
+    : timerState.cycleCount === 4
+      ? 'Take a long break!'
+      : 'Take a short break!'
+
+  self.registration.showNotification(title, {
+    body,
+    icon: '/favicon.svg',
+    badge: '/favicon.svg',
+    tag: 'pomodoro-timer',
+    requireInteraction: false,
+    silent: false
+  })
+}
+
+// Advance to next period and schedule next notification
+function advanceToNextPeriod () {
+  if (!timerState.isActive) return
+
+  const next = getNextPeriod(timerState.periodType, timerState.cycleCount)
+
+  if (next.shouldStop) {
+    // Full 4-cycle sequence complete, stop timer
+    timerState.isActive = false
+    timerState.startedAt = null
+    timerState.timeoutId = null
+    return
+  }
+
+  // Update to next period
+  timerState.periodType = next.periodType
+  timerState.cycleCount = next.cycleCount
+  timerState.startedAt = Date.now()
+
+  // Schedule next notification
+  scheduleNotification()
+}
+
+// Clear all scheduled notifications
+function clearNotifications () {
+  if (timerState.timeoutId !== null) {
+    clearTimeout(timerState.timeoutId)
+    timerState.timeoutId = null
+  }
+  timerState.isActive = false
+  timerState.startedAt = null
+}
+
+// Message handler for communication with app
+self.addEventListener('message', (event) => {
+  const { type, payload } = event.data
+
+  switch (type) {
+    case 'START_TIMER':
+      // Start background timer
+      timerState.isActive = true
+      timerState.startedAt = payload.startedAt
+      timerState.periodType = payload.periodType
+      timerState.cycleCount = payload.cycleCount
+      timerState.durations = payload.durations
+      scheduleNotification()
+      break
+
+    case 'STOP_TIMER':
+    case 'CLEAR_NOTIFICATIONS':
+      // Clear all scheduled notifications
+      clearNotifications()
+      break
+
+    default:
+      console.warn('Unknown message type:', type)
+  }
+})