Most people sleep about seven or eight hours a night. That leaves 16 or 17 hours awake each day. Or about 1,000 minutes.

Let’s think about those 1,000 minutes as 100 10-minute blocks. That’s what you wake up with every day.

Throughout the day, you spend 10 minutes of your life on each block, until you eventually run out of blocks and it’s time to go to sleep.

It’s always good to step back and think about how we’re using those 100 blocks we get each day:

How many of them are put towards making your future better, and how many of them are just there to be enjoyed?
How many of them are spent with other people, and how many are for time by yourself?
How many are used to create something, and how many are used to consume something?
How many of the blocks are focused on your body, how many on your mind, and how many on neither one in particular?
Which are your favorite blocks of the day, and which are your least favorite?

\n Source: Wait But Why\n

`;\n}\n\nfunction getTimelineBlocks(records: ScreenTimeRecord[]) {\n if (!records.length) return \"\";\n\n // Sort by timestamp ascending\n const sorted = [...records].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n const offset = sorted[0].utc_offset_minutes ?? 0;\n\n // Convert to simplified points: { minuteOfDay, cumulativeValue }\n const points = sorted.map(r => {\n const d = new Date(r.timestamp);\n const localMs = d.getTime() + offset * 60000;\n const localDate = new Date(localMs);\n const minuteOfDay = localDate.getUTCHours() * 60 + localDate.getUTCMinutes();\n return { minute: minuteOfDay, value: r.total_screen_time };\n });\n\n // Helper to interpolate value at any minute\n const getValueAt = (m: number) => {\n if (points.length === 0) return 0;\n // Find first point after m\n const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) {\n // m is after all records, use last known value\n return points[points.length - 1].value;\n }\n if (idx === 0) {\n // m is before first record. \n // Return 0 to treat first record as a step/jump.\n return 0;\n }\n\n // Step function: value remains constant at previous record's value\n // until the new record is reached. This creates a \"jump\" at the new record,\n // triggering the overflow/backfill logic.\n return points[idx - 1].value;\n };\n\n const before7am = getValueAt(420);\n const at1140pm = getValueAt(1420);\n const totalRecorded = points.length > 0 ? points[points.length - 1].value : 0;\n const after1140pm = Math.max(0, totalRecorded - at1140pm);\n\n let visibleUsage = 0;\n let hiddenUsage = 0;\n let burstUsage = 0;\n let visibleBlocksCount = 0;\n let backfilledUsage = 0;\n\n // First pass: Calculate raw usage for each block\n const blockData = Array.from({ length: 100 }, (_, i) => {\n const startMin = 420 + i * 10;\n const endMin = startMin + 10;\n \n const startVal = getValueAt(startMin);\n const endVal = getValueAt(endMin);\n const rawUsage = Math.max(0, endVal - startVal);\n \n const hour = Math.floor(startMin / 60);\n const minute = startMin % 60;\n const timeLabel = `${hour}:${minute.toString().padStart(2, '0')}`;\n \n return {\n index: i,\n startMin,\n endMin,\n rawUsage,\n timeLabel,\n finalUsage: 0, // Will be calculated in second pass\n isBackfilled: false\n };\n });\n\n // Second pass: Apply backfill algorithm\n let backlog = 0;\n \n for (let i = 0; i < blockData.length; i++) {\n const block = blockData[i];\n const rawUsage = block.rawUsage;\n \n if (rawUsage <= 10) {\n // Normal case: usage fits in block\n block.finalUsage = rawUsage;\n } else {\n // Overflow case: fill current block and backfill remainder\n block.finalUsage = 10;\n const overflow = rawUsage - 10;\n backlog += overflow;\n burstUsage += overflow;\n }\n \n // Distribute backlog to previous empty blocks\n if (backlog > 0) {\n let remainingBacklog = backlog;\n \n // Work backwards from current block\n for (let j = i - 1; j >= 0 && remainingBacklog > 0; j--) {\n const prevBlock = blockData[j];\n const availableSpace = 10 - prevBlock.finalUsage;\n \n if (availableSpace > 0) {\n const toBackfill = Math.min(remainingBacklog, availableSpace);\n prevBlock.finalUsage += toBackfill;\n prevBlock.isBackfilled = true;\n remainingBacklog -= toBackfill;\n backfilledUsage += toBackfill;\n }\n }\n \n backlog = remainingBacklog;\n }\n }\n\n // PRIORITY FIX: Ensure total usage exactly matches reported screen time AND correct block count\n const currentTotal = blockData.reduce((sum, block) => sum + block.finalUsage, 0);\n const targetTotal = Math.max(0, totalRecorded - before7am - after1140pm);\n const targetBlocks = Math.ceil(targetTotal / 10);\n \n // Capture priority from Second Pass for Rebuild Phase\n // This ensures we respect the \"backwards from overflow\" placement\n const backfillPriority = new Map();\n blockData.forEach(b => backfillPriority.set(b.index, b.finalUsage));\n\n // Reset and rebuild with correct block count priority\n blockData.forEach(block => block.finalUsage = 0);\n \n // Strategy: Fill blocks completely (10 min each) until we reach the target\n let remainingMinutes = targetTotal;\n let blocksToFill = Math.min(targetBlocks, 100);\n \n // First, identify which blocks should be active based on raw usage patterns\n const blocksWithUsage = blockData.filter(b => b.rawUsage > 0);\n const blocksWithoutUsage = blockData.filter(b => b.rawUsage === 0);\n \n // Sort blocks with usage by amount (descending)\n blocksWithUsage.sort((a, b) => b.rawUsage - a.rawUsage);\n \n // For backfill blocks, prioritize those CLOSEST to actual usage\n // Find the time range where actual usage occurs\n const firstUsageBlock = blocksWithUsage.length > 0 ? Math.min(...blocksWithUsage.map(b => b.index)) : 0;\n const lastUsageBlock = blocksWithUsage.length > 0 ? Math.max(...blocksWithUsage.map(b => b.index)) : 99;\n \n // Sort backfill candidates\n blocksWithoutUsage.sort((a, b) => {\n // Primary: Use backfill logic from Second Pass (explicit backwards distribution)\n const scoreA = backfillPriority.get(a.index) || 0;\n const scoreB = backfillPriority.get(b.index) || 0;\n if (scoreA !== scoreB) return scoreB - scoreA;\n\n // Secondary: Proximity to usage (fallback for fragmentation consolidation)\n const aDistance = Math.min(Math.abs(a.index - firstUsageBlock), Math.abs(a.index - lastUsageBlock));\n const bDistance = Math.min(Math.abs(b.index - firstUsageBlock), Math.abs(b.index - lastUsageBlock));\n \n if (aDistance !== bDistance) return aDistance - bDistance;\n \n // If same distance, prefer blocks between first and last usage\n const aInRange = a.index >= firstUsageBlock && a.index <= lastUsageBlock;\n const bInRange = b.index >= firstUsageBlock && b.index <= lastUsageBlock;\n \n if (aInRange && !bInRange) return -1;\n if (bInRange && !aInRange) return 1;\n \n // Finally, prefer earlier blocks\n return a.index - b.index;\n });\n \n // Combine: usage blocks first, then backfill by proximity\n const blocksByPriority = [...blocksWithUsage, ...blocksWithoutUsage];\n \n // Fill blocks in priority order\n for (let i = 0; i < blocksToFill && remainingMinutes > 0; i++) {\n const block = blocksByPriority[i];\n const toFill = Math.min(10, remainingMinutes);\n block.finalUsage = toFill;\n remainingMinutes -= toFill;\n \n // Mark as backfilled if it had no original usage\n if (block.rawUsage === 0) {\n block.isBackfilled = true;\n }\n }\n \n // Handle any remaining fractional minutes (should be minimal)\n if (remainingMinutes > 0.01) {\n // Add to the last partially filled block\n for (let i = blocksToFill - 1; i >= 0; i--) {\n const block = blocksByPriority[i];\n if (block.finalUsage < 10) {\n const canAdd = Math.min(remainingMinutes, 10 - block.finalUsage);\n block.finalUsage += canAdd;\n remainingMinutes -= canAdd;\n break;\n }\n }\n }\n\n // Third pass: Generate HTML and calculate stats\n const blocksHtml = blockData.map(block => {\n const usage = block.finalUsage;\n \n // Calculate time range string\n const formatTime = (m: number) => {\n const h = Math.floor(m / 60);\n const min = m % 60;\n const ampm = h >= 12 && h < 24 ? 'PM' : 'AM';\n const h12 = h % 12 || 12;\n return `${h12}:${min.toString().padStart(2, '0')} ${ampm}`;\n };\n\n const timeRange = `${formatTime(block.startMin)} - ${formatTime(block.endMin)}`;\n\n // Threshold: > 0.01 min to catch any meaningful usage (lowered for accuracy)\n const isFilled = usage > 0.01;\n \n if (isFilled) {\n visibleBlocksCount++;\n }\n \n const className = isFilled ? \"square filled\" : \"square\";\n \n // Enhanced tooltip with backfill information\n let titleAttr = `${block.timeLabel} - Usage: ${usage.toFixed(1)} min`;\n let infoAttr = \"\";\n\n if (block.rawUsage > 10) {\n titleAttr += ` (overflow from ${block.rawUsage.toFixed(1)} min)`;\n infoAttr = \"Overflow\";\n }\n if (block.isBackfilled && block.rawUsage === 0) {\n titleAttr += ` (backfilled)`;\n infoAttr = \"Backfilled\";\n }\n if (block.isBackfilled && block.rawUsage > 0) {\n titleAttr += ` (${block.rawUsage.toFixed(1)} direct + ${(usage - block.rawUsage).toFixed(1)} backfilled)`;\n infoAttr = \"Mixed\";\n }\n \n return `

`;\n }).join(\"\");\n\n // Recalculate final stats with corrected totals\n const finalTotal = blockData.reduce((sum, block) => sum + block.finalUsage, 0);\n const finalActiveBlocks = blockData.filter(b => b.finalUsage > 0.01).length;\n const finalBackfilledUsage = blockData.filter(b => b.isBackfilled).reduce((sum, b) => sum + b.finalUsage, 0);\n visibleUsage = finalTotal; // Use the exact corrected total\n visibleBlocksCount = finalActiveBlocks;\n\n return {\n html: blocksHtml,\n stats: {\n before7am,\n after1140pm,\n visibleUsage: finalTotal, // Guaranteed to match target\n hiddenUsage: 0, // Reset since we're prioritizing accuracy\n burstUsage: 0, // Should be zero with new approach\n backfilledUsage: finalBackfilledUsage,\n visibleBlocksCount: finalActiveBlocks,\n totalCalculated: finalTotal,\n totalTarget: targetTotal,\n targetBlocks: targetBlocks\n }\n };\n}\n\n// Helper to manipulate dates\nfunction addDays(dateStr: string, days: number): string {\n const date = new Date(dateStr);\n date.setDate(date.getDate() + days);\n return date.toISOString().split('T')[0];\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const dateParam = url.searchParams.get('date');\n // Default to PT timezone for \"today\"\n const today = new Date().toLocaleDateString('en-CA', {\n timeZone: 'America/Los_Angeles'\n });\n \n // Default to today if no param provided\n const targetDate = dateParam || today;\n const prevDate = addDays(targetDate, -1);\n const nextDate = addDays(targetDate, 1);\n \n // Fetch records for the specific date\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n const latestRecord = dayRecords.length > 0 ? dayRecords[0] : null;\n \n const totalMinutes = latestRecord?.total_screen_time || 0;\n const hasData = dayRecords.length > 0;\n \n // 1. Volume Grid\n const numFilled = Math.ceil(totalMinutes / 10);\n \n // 2. Timeline Grid\n const timelineData = getTimelineBlocks(dayRecords);\n \n // Handle case where no records exist\n const timelineHtml = typeof timelineData === 'string' ? timelineData : timelineData.html;\n const timelineStats = typeof timelineData === 'string' ? null : timelineData.stats;\n\n // Volume Grid - Updated to match timeline active blocks\n const timelineActiveCount = timelineStats?.visibleBlocksCount || 0;\n const actualActiveBlocks = timelineActiveCount > 0 ? timelineActiveCount : numFilled;\n \n const volumeBlocks = Array.from({ length: 100 }, (_, i) => {\n const row = Math.floor(i / 10);\n const col = i % 10;\n const logicalIndex = (9 - row) * 10 + col;\n const isFilled = logicalIndex < actualActiveBlocks;\n const className = isFilled ? \"square filled\" : \"square\";\n const titleAttr = isFilled \n ? `Block ${logicalIndex + 1}` \n : `Block ${logicalIndex + 1}`;\n return `

`;\n }).join(\"\");\n\n const title = \"Clearspace 100 Blocks\";\n // Format date for display\n const dateObj = new Date(targetDate);\n const displayDate = dateObj.toLocaleDateString('en-US', { \n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric',\n timeZone: 'UTC' // Ensure we display the date as is, without timezone shift\n });\n\n const html = `\n\n\n \n \n ${title}\n \n\n\n

${title}

\n ← Prev\n

${displayDate}

\n Next →\n

\n\n

\n ${!hasData ? `\n

No Data Available

There is no screen time data recorded for this date.

\n ` : `\n \n

Volume

${totalMinutes.toFixed(0)} min total

\n ${volumeBlocks}\n

Screen Time

${actualActiveBlocks} blocks

Remaining

${100 - actualActiveBlocks} blocks

\n\n \n

Timeline (7AM - 11:40PM)

Usage by 10min blocks

\n ${timelineHtml || '

No timeline data

'}\n

${timelineStats?.visibleBlocksCount ?? 0} blocks active

>3s usage

\n `}\n\n \n ${renderExplanation()}\n

\n \n \n\n`;\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","deleted","label",[168,149],"clearspace_screen_time","permalink","https://www.val.town/x/shapedlines/operational-efficiency/code/clearspace_screen_time/clearspace-100-blocks.ts","extension","actionData","errors"]