} />

{/* segmented tabs */}

{["Overview", "Habits", "Trends", "Streaks"].map((s, i) => ( {s} ))}

{/* insight */}

Meditate is your strongest habit right now — 28 days and counting.

{/* sort chips */}

Sort by {["Streak", "Rate", "Name"].map((s, i) => ( {s} ))}

{/* per-habit list */} {STATS_HABITS.map((h, i) => { const cells = h.pattern .slice(-7) .split("") .map((c) => c === "1"); return (

{h.name} {h.atRisk && ( Log today )}

= 21 ? T.habit.orange : T.ink2, fontVariantNumeric: "tabular-nums", }} > {h.streak}d {h.streak >= 7 && ( = 14 ? "#FDE8CE" : T.bgAlt, display: "flex", alignItems: "center", justifyContent: "center", }} > = 14 ? T.habit.orange : T.faint} sw={1.6} /> )}

{h.rate}%

{/* mini 7-day heatmap */}

{cells.map((done, ci) => (

))}

); })}

); // ════════════════════════════════════════════════════════════ // DETAIL SCREEN DATA (shared by all three) // ════════════════════════════════════════════════════════════ const DETAIL_DAYS = 84; const DETAIL_NOW = new Date(2024, 4, 16); const DETAIL_MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const ONCE_MISSES = new Set([4, 11, 17, 27, 34, 41, 53, 62, 70, 80]); const ONCE_DATA = Array.from({ length: DETAIL_DAYS }, (_, i) => ({ date: new Date(DETAIL_NOW.getTime() - (DETAIL_DAYS - 1 - i) * 86400000), done: !ONCE_MISSES.has(i), })); const COUNT_DATA = Array.from({ length: DETAIL_DAYS }, (_, i) => { const base = 6 + Math.round(Math.sin(i * 0.55) * 2 + Math.cos(i * 0.27) * 1.6); let v = Math.max(2, Math.min(11, base)); if (i === DETAIL_DAYS - 1) v = 3; if (i === DETAIL_DAYS - 2) v = 9; if (i === DETAIL_DAYS - 9) v = 0; return { date: new Date(DETAIL_NOW.getTime() - (DETAIL_DAYS - 1 - i) * 86400000), value: v, target: 8, }; }); const TIMER_DATA = Array.from({ length: DETAIL_DAYS }, (_, i) => { const skips = new Set([6, 14, 23, 31, 42, 53, 61, 68, 78]); if (skips.has(i)) return { date: new Date(DETAIL_NOW.getTime() - (DETAIL_DAYS - 1 - i) * 86400000), sessions: [], target: 20, }; const base = Math.round(15 + Math.sin(i * 0.38) * 6 + (i % 3 === 0 ? 4 : 0)); if (i % 9 === 4) return { date: new Date(DETAIL_NOW.getTime() - (DETAIL_DAYS - 1 - i) * 86400000), sessions: [Math.max(8, base - 6), Math.max(6, base - 8)], target: 20, }; if (i === DETAIL_DAYS - 1) return { date: DETAIL_NOW, sessions: [], target: 20 }; return { date: new Date(DETAIL_NOW.getTime() - (DETAIL_DAYS - 1 - i) * 86400000), sessions: [Math.max(6, Math.min(34, base))], target: 20, }; }); // ── shared detail components ───────────────────────────────── const DetailHeader = ({ name, color, sub }) => (

{name}

{sub}

); const DetailSectionLabel = ({ left, right }) => (

{left} {right && ( {right} )}

); const DetailStatsStrip = ({ items }) => (

{items.map((it, i) => (

{it.value} {it.unit && ( {it.unit} )}

{it.label}

))}

); const DetailFooterCards = ({ color }) => (

Desk Tracker ON

Reminder Daily · 7:00 AM

); // ── HeatmapGrid (once-type) ────────────────────────────────── const DetailHeatmap = ({ data, color, cols = 14 }) => { const todayDow = (DETAIL_NOW.getDay() + 6) % 7; const DOW = ["M", "T", "W", "T", "F", "S", "S"]; const grid = Array.from({ length: cols * 7 }, () => null); let c = cols - 1, r = todayDow; for (let i = data.length - 1; i >= 0; i--) { if (c < 0) break; grid[c * 7 + r] = { done: data[i].done, date: data[i].date }; r -= 1; if (r < 0) { r = 6; c -= 1; } } return (

{DOW.map((d, i) => ( {d} ))}

{Array.from({ length: cols }).map((_, ci) => { let prevMonth = null; for (let ri = 0; ri < 7; ri++) { const cell = grid[(ci - 1) * 7 + ri]; if (cell) { prevMonth = cell.date.getMonth(); break; } } let firstCell = null; for (let ri = 0; ri < 7; ri++) { const cell = grid[ci * 7 + ri]; if (cell) { firstCell = cell; break; } } const show = firstCell && (ci === 0 || firstCell.date.getMonth() !== prevMonth); return ( {show ? DETAIL_MONTHS[firstCell.date.getMonth()] : ""} ); })}

{Array.from({ length: cols }).map((_, ci) => (

{Array.from({ length: 7 }).map((__, ri) => { const cell = grid[ci * 7 + ri]; const isToday = ci === cols - 1 && ri === todayDow; if (!cell) return ; return ( ); })}

))}

); }; // ── DailyBars (count/timer types) ──────────────────────────── const DetailBars = ({ data, color, target, valueOf, days = 28, unit }) => { const slice = data.slice(-days); const maxVal = Math.max(target * 1.3, ...slice.map(valueOf)); const pt = (v) => Math.max(2, (v / maxVal) * 100); const targetPct = (target / maxVal) * 100; return (

{/* target line */}

{target}

{slice.map((d, i) => { const v = valueOf(d); const isToday = i === slice.length - 1; return (

0 ? 3 : 2, }} /> {isToday && ( )}

); })}

); }; // ════════════════════════════════════════════════════════════ // 06a · DETAIL · ONCE (Meditate) // ════════════════════════════════════════════════════════════ const HabitDetailOnceScreen = () => { const color = T.habit.blue; const doneToday = ONCE_DATA[ONCE_DATA.length - 1].done; const currentStreak = (() => { let s = 0; for (let i = ONCE_DATA.length - 1; i >= 0; i--) { if (ONCE_DATA[i].done) s++; else break; } return s; })(); const bestStreak = (() => { let s = 0, max = 0; for (const d of ONCE_DATA) { if (d.done) { s++; max = Math.max(max, s); } else s = 0; } return max; })(); const totalDone = ONCE_DATA.filter((d) => d.done).length; const last30Done = ONCE_DATA.slice(-30).filter((d) => d.done).length; const recent = ONCE_DATA.filter((d) => d.done) .slice(-5) .reverse(); const recentTimes = ["7:14 AM", "7:08 AM", "7:22 AM", "7:11 AM", "6:58 AM"]; return (

{/* Log card */}

{doneToday && }

{doneToday ? "Done for today" : "Tap to log today"}

{doneToday ? "Logged today · 7:19 AM" : "Thursday, May 16"}

{doneToday && (

Undo + Note

)}

{currentStreak}

day streak

{/* Heatmap */}

Each square is one day · today outlined

{/* Stats */}

{/* Recent completions */} {recent.map((d, i) => (

{i === 0 ? "Today" : i === 1 ? "Yesterday" : `${DETAIL_MONTHS[d.date.getMonth()]} ${d.date.getDate()}`}

{recentTimes[i % recentTimes.length]}

))}

); }; // ════════════════════════════════════════════════════════════ // 06b · DETAIL · COUNT (Hydrate) // ════════════════════════════════════════════════════════════ const HabitDetailCountScreen = () => { const color = T.habit.pink; const today = COUNT_DATA[COUNT_DATA.length - 1]; const value = today.value; const target = today.target; const last30 = COUNT_DATA.slice(-30); const daysHit = last30.filter((d) => d.value >= target).length; const avg = (last30.reduce((s, d) => s + d.value, 0) / 30).toFixed(1); const currentStreak = (() => { let s = 0; for (let i = COUNT_DATA.length - 2; i >= 0; i--) { if (COUNT_DATA[i].value >= target) s++; else break; } return s; })(); const todayEntries = [ { t: "7:30 AM", n: "+1 cup" }, { t: "9:15 AM", n: "+1 cup" }, { t: "11:02 AM", n: "+1 cup" }, ]; return (

{/* Stepper log card */}

{value} /{target} cups today

{/* pips */}

{Array.from({ length: target }).map((_, i) => ( ))}

{Math.round((value * 100) / target)}% of today {target - value} cups left

{/* quick log chips */}

{["+1", "+2", "+3", "Custom"].map((l) => ( {l} ))}

{/* Bar chart */} d.value} days={28} unit="cups" />

{" "} Daily target ({target}) {" "} Today

{/* Stats */}

{/* Today's logs */} {todayEntries.map((e, i) => (

{e.n}

{e.t}

))}

); }; // ════════════════════════════════════════════════════════════ // 06c · DETAIL · TIMER (Read) // ════════════════════════════════════════════════════════════ const HabitDetailTimerScreen = () => { const color = T.habit.orange; const target = 20; const sumMins = (s) => s.reduce((a, b) => a + b, 0); const last30 = TIMER_DATA.slice(-30); const totalMonth = last30.reduce((s, d) => s + sumMins(d.sessions), 0); const daysHit = last30.filter((d) => sumMins(d.sessions) >= target).length; const allSessions = TIMER_DATA.flatMap((d) => d.sessions); const longest = Math.max(...allSessions); const avgMins = Math.round(totalMonth / 30); const recentSessions = []; for ( let i = TIMER_DATA.length - 1; i >= 0 && recentSessions.length < 5; i-- ) { const d = TIMER_DATA[i]; for (let si = d.sessions.length - 1; si >= 0; si--) { const startH = 14 + ((si + i) % 7); const startM = (si * 13 + 32) % 60; recentSessions.push({ date: d.date, mins: d.sessions[si], startH, startM, dayIdx: i, }); if (recentSessions.length >= 5) break; } } return (

{/* Session card */}

{/* Ring */}

0:00

No session yet today

Target {target} min · 0 / {target} logged

{/* preset chips + start */}

{["10", "20", "30"].map((p) => ( {p} min ))} Custom

Start 20-min session

{/* Bar chart */} d.sessions.reduce((a, b) => a + b, 0)} days={28} unit="min" />

{" "} 1st session {" "} Target

{/* Stats */}

{/* Recent sessions */} {recentSessions.map((s, i) => { const endH = s.startH + Math.floor((s.startM + s.mins) / 60); const endM = (s.startM + s.mins) % 60; const isToday = s.dayIdx === TIMER_DATA.length - 1; const isYday = s.dayIdx === TIMER_DATA.length - 2; const hit = s.mins >= target; const fmt = (h, m) => `${((h + 11) % 12) + 1}:${String(m).padStart(2, "0")} ${h < 12 ? "AM" : "PM"}`; return (

{s.mins}m

{isToday ? "Today" : isYday ? "Yesterday" : `${DETAIL_MONTHS[s.date.getMonth()]} ${s.date.getDate()}`} {hit && ( Target )}

{fmt(s.startH, s.startM)} → {fmt(endH, endM)}

); })}

); }; // ── display wrappers ─────────────────────────────────────────── // Render at a native canvas width, then scale down to a fixed display size. const PhoneScaler = ({ width = 400, scale = 0.62, children }) => { const h = width * 2.165; return (

{children}

); }; const NATIVE = 400, SCALE = 0.62; const TodayPhone = () => ( ); const HistoryPhone = () => ( ); const StatsPhone = () => ( ); Object.assign(window, { PhoneFrame, PhoneStatus, PhoneScaler, Dot, CheckPill, TodayPhone, HistoryPhone, StatsPhone, TodayScreen, HistoryScreen, StatsOverviewScreen, HabitDetailOnceScreen, HabitDetailCountScreen, HabitDetailTimerScreen, StatsHabitsScreen, HabitColorDot, StatusChip, TodayHabitRow, PI, });

{title}

{name}