Pomodoro Timer

This Pomodoro timer cycles through three session types - Focus (work), Short Break, and Long Break - and ships four built-in presets you can apply with one tap: Classic (25 min work / 5 short / 15 long, long break every 4 pomodoros), Short Focus (15 / 3 / 10 over 4 sessions), Deep Work (50 / 10 / 30 over 4 sessions), and the 52/17 Rule (52 / 17 / 30 over 3 sessions, based on DeskTime's productivity-data ratio). Beyond the presets, four sliders let you tune each value independently: work duration from 5 to 90 minutes in 5-minute steps, short break 1 to 30 minutes, long break 5 to 60 minutes in 5-minute steps, and sessions-before-long-break from 2 to 8. After the configured number of focus sessions the timer routes to a long break instead of a short one, and a row of progress dots beneath the ring fills in to show how many pomodoros remain in the current cycle.

Rather than decrementing a counter every tick (which browsers throttle and clamp in background tabs, causing drift over long sessions), the timer stores an absolute end timestamp - Date.now() plus the remaining seconds times 1000 - and recomputes the time left on each tick as Math.ceil of (end time minus now), polling every 100ms. This wall-clock approach means the displayed countdown re-syncs to real elapsed time whenever the tab regains focus, so a 25-minute focus block stays accurate even if the interval itself was throttled while backgrounded. The completion chime is synthesized live with the Web Audio API rather than a sound file: three sine-wave oscillators play an ascending C5-E5-G5 major chord (523.25, 659.25, 783.99 Hz) with a short attack-and-decay envelope, and the chord repeats once 600ms later for emphasis. Because of browser autoplay policy the AudioContext is resumed from a suspended state on interaction, so the chime is reliable only after you have clicked something on the page.

Optional desktop notifications use the browser Notification API; enabling them triggers a permission prompt, and on completion a session-specific message ('Work session complete! Time for a break.', etc.) is pushed so you get an alert even when the tab is not in front. Two auto-start toggles let the timer chain sessions hands-free - auto-start breaks rolls straight from work into the break, and auto-start work resumes focus after a break - otherwise it pauses and waits for you to press play. A live statistics panel tracks completed pomodoros, total work minutes, total break minutes, current streak, and best streak, with a Reset button; note these counters live in component state only and are not saved, so they clear on page reload. Your timer configuration, however, is encoded into the page URL (durations, session count, and the two auto-start flags), so the Share button produces a link that reopens the tool with the same setup - useful for sharing a team's agreed work/break cadence.