[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_561":562,"_563":564},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":49,"_119":120,"_121":25,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":49},"version",400,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","linear-calendar-val/frontend/components/Calendar.tsx","latestPath","fileId","7175101e-ce2f-11f0-bc30-42dde27851f2","name","Calendar.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { CalendarEvent, CreateEventRequest } from \"../../shared/types.ts\";\nimport { CalendarEventComponent } from \"./CalendarEvent.tsx\";\n\ninterface CalendarProps {\n selectedDate: Date;\n onDateChange: (date: Date) => void;\n events: CalendarEvent[];\n onCreateEvent: (request: CreateEventRequest) => Promise;\n onUpdateEvent: (eventId: string, updates: { start?: string; end?: string }) => Promise;\n onDeleteEvent: (eventId: string) => Promise;\n}\n\nconst HOUR_HEIGHT = 60;\nconst START_HOUR = 6;\nconst END_HOUR = 22;\nconst HOURS = Array.from({ length: END_HOUR - START_HOUR }, (_, i) => i + START_HOUR);\nconst DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nexport function Calendar({ \n selectedDate, \n onDateChange, \n events, \n onCreateEvent, \n onUpdateEvent,\n onDeleteEvent,\n}: CalendarProps) {\n const [currentTime, setCurrentTime] = useState(new Date());\n const [isDraggingOver, setIsDraggingOver] = useState(null);\n const calendarRef = useRef(null);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setCurrentTime(new Date());\n }, 60000);\n return () => clearInterval(interval);\n }, []);\n\n const getWeekDates = useCallback(() => {\n const startOfWeek = new Date(selectedDate);\n startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());\n startOfWeek.setHours(0, 0, 0, 0);\n \n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(startOfWeek);\n date.setDate(date.getDate() + i);\n return date;\n });\n }, [selectedDate]);\n\n const weekDates = getWeekDates();\n\n const goToPrevWeek = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() - 7);\n onDateChange(newDate);\n };\n\n const goToNextWeek = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() + 7);\n onDateChange(newDate);\n };\n\n const goToToday = () => {\n onDateChange(new Date());\n };\n\n const isToday = (date: Date) => {\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const getEventsForDate = (date: Date) => {\n return events.filter(event => {\n const eventDate = new Date(event.start);\n return eventDate.toDateString() === date.toDateString();\n });\n };\n\n const getEventStyle = (event: CalendarEvent) => {\n const start = new Date(event.start);\n const end = new Date(event.end);\n \n const startHour = start.getHours() + start.getMinutes() / 60;\n const endHour = end.getHours() + end.getMinutes() / 60;\n \n const top = (startHour - START_HOUR) * HOUR_HEIGHT;\n const height = (endHour - startHour) * HOUR_HEIGHT;\n \n return { top, height: Math.max(height, 20) };\n };\n\n const handleDragOver = (e: React.DragEvent, dateStr: string) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n setIsDraggingOver(dateStr);\n };\n\n const handleDragLeave = () => {\n setIsDraggingOver(null);\n };\n\n const handleDrop = async (e: React.DragEvent, date: Date) => {\n e.preventDefault();\n setIsDraggingOver(null);\n\n try {\n const data = JSON.parse(e.dataTransfer.getData('application/json'));\n \n const rect = e.currentTarget.getBoundingClientRect();\n const y = e.clientY - rect.top;\n const hour = Math.floor(y / HOUR_HEIGHT) + START_HOUR;\n const minutes = Math.round((y % HOUR_HEIGHT) / HOUR_HEIGHT * 60 / 15) * 15;\n \n const startTime = new Date(date);\n startTime.setHours(hour, minutes, 0, 0);\n \n const request: CreateEventRequest = {\n taskId: data.taskId,\n taskTitle: data.taskTitle,\n taskDescription: data.taskDescription,\n start: startTime.toISOString(),\n durationMinutes: 30,\n color: data.color,\n };\n \n await onCreateEvent(request);\n } catch (error) {\n console.error('Failed to create event:', error);\n }\n };\n\n const getCurrentTimePosition = () => {\n const now = new Date();\n const hour = now.getHours() + now.getMinutes() / 60;\n if (hour < START_HOUR || hour > END_HOUR) return null;\n return (hour - START_HOUR) * HOUR_HEIGHT;\n };\n\n const timePosition = getCurrentTimePosition();\n\n const formatWeekRange = () => {\n const start = weekDates[0];\n const end = weekDates[6];\n \n if (start.getMonth() === end.getMonth()) {\n return `${start.toLocaleDateString('en-US', { month: 'long' })} ${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}`;\n }\n \n return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n };\n\n return (\n

\n {formatWeekRange()}\n

\n \n

\n \n \n \n \n \n \n

\n \n \n Today\n \n

\n \n

\n \n {weekDates.map((date, i) => (\n

\n {DAYS_OF_WEEK[date.getDay()]}\n

\n {date.getDate()}\n

\n ))}\n

\n \n

\n {HOURS.map(hour => (\n

\n \n {hour === 0 ? '12 AM' : hour === 12 ? '12 PM' : hour > 12 ? `${hour - 12} PM` : `${hour} AM`}\n \n

\n ))}\n

\n \n {weekDates.map((date, dayIndex) => {\n const dateStr = date.toISOString().split('T')[0];\n const dayEvents = getEventsForDate(date);\n \n return (\n handleDragOver(e, dateStr)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, date)}\n >\n {HOURS.map(hour => (\n \n ))}\n \n {isToday(date) && timePosition !== null && (\n

\n )}\n \n {dayEvents.map(event => {\n const style = getEventStyle(event);\n return (\n \n );\n })}\n

\n );\n })}\n

\n \n );\n}\n\n","createdAt",["D",1767840238925],"branchVersion","branchId","0716f70e-ac57-11f0-8330-0224a6c84d84","id","07168da0-ac57-11f0-8330-0224a6c84d84","operational-efficiency",["D",1760815022948],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","12e799b8-c696-11f0-b262-42dde27851f2","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":49},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",419,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shapedlines","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":557,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":558,"_80":559,"_82":560,"_84":49},"tree",[221,227,242,251,258,259,260,261,262,263],"files",[221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263],"counts",{"_209":62,"_210":211,"_212":62,"_213":214,"_215":216},"contents",[128,129,130,131,132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_126":127},"0719891a-ac57-11f0-8330-0224a6c84d84","baywheels.shapedlines.com",{"_43":203,"_32":204,"_30":205,"_141":-5,"_41":42,"_40":206,"_143":25,"_38":207,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":208},{"_43":197,"_32":198,"_30":199,"_141":-5,"_41":42,"_40":200,"_143":25,"_38":201,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":202},{"_43":191,"_32":192,"_30":193,"_141":-5,"_41":42,"_40":194,"_143":25,"_38":195,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":196},{"_43":185,"_32":186,"_30":187,"_141":-5,"_41":42,"_40":188,"_143":49,"_38":189,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":190},{"_43":179,"_32":180,"_30":181,"_141":-5,"_41":42,"_40":182,"_143":49,"_38":183,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":184},{"_43":171,"_32":172,"_30":173,"_141":-5,"_41":42,"_40":174,"_143":49,"_38":175,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_27":178},{"_43":164,"_32":165,"_30":166,"_141":-5,"_41":42,"_40":167,"_143":25,"_38":168,"_13":62,"_34":20,"_36":169,"_24":49,"_146":-5,"_27":170},{"_43":157,"_32":158,"_30":159,"_141":-5,"_41":42,"_40":160,"_143":25,"_38":161,"_13":62,"_34":20,"_36":162,"_24":49,"_146":-5,"_27":163},{"_43":148,"_32":149,"_30":126,"_141":-5,"_41":42,"_40":150,"_143":49,"_38":151,"_13":152,"_34":153,"_36":154,"_24":49,"_146":155,"_27":156},{"_43":138,"_32":139,"_30":140,"_141":-5,"_41":42,"_40":142,"_143":25,"_38":144,"_13":62,"_34":20,"_36":145,"_24":49,"_146":-5,"_27":147},"964271bc-c320-11f0-8407-42dde27851f2","deno.json","9642728e-c320-11f0-8407-42dde27851f2","parentId",217,"latest",["D",1763320517573],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[139],"e188b638-ec3b-11f0-bee0-42dde27851f2","dashboard.ts",385,["D",1767840237904],40,"http","// Learn more: https://docs.val.town/vals/http/\n\nimport getPanhandleStationsData from \"./bay-wheels/panhandle-stations-data.ts\";\nimport { getSnoozedToday, setSnoozedToday } from \"./bay-wheels/snooze-utils.ts\";\n\ninterface VehicleType {\n vehicle_type_id: string;\n count: number;\n}\n\ninterface StationData {\n station_id: string;\n name: string;\n short_name: string;\n address: string | null;\n capacity: number;\n vehicle_available_count: number;\n vehicle_types_available: VehicleType[];\n num_docks_available: number;\n num_vehicles_disabled: number;\n num_docks_disabled: number;\n}\n\nfunction getBikeCounts(station: StationData) {\n const normalBikes = station.vehicle_types_available.find(v => v.vehicle_type_id === \"1\")?.count || 0;\n const eBikes = station.vehicle_types_available.find(v => v.vehicle_type_id === \"2\")?.count || 0;\n return { normalBikes, eBikes };\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n \n // Handle snooze API endpoints\n if (req.method === \"POST\" && url.pathname === \"/snooze\") {\n await setSnoozedToday(true);\n return new Response(JSON.stringify({ success: true, snoozed: true }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (req.method === \"POST\" && url.pathname === \"/unsnooze\") {\n await setSnoozedToday(false);\n return new Response(JSON.stringify({ success: true, snoozed: false }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n const panhandle_data: StationData[] = await getPanhandleStationsData();\n const isSnoozed = await getSnoozedToday();\n\n // Find the Oak and Broderick station (should be first, but let's be safe)\n const oakBroderickStation = panhandle_data.find((station) =>\n station.name.includes(\"Broderick\") && station.name.includes(\"Oak\")\n );\n\n // Define the desired order for the remaining stations\n const stationOrder = [\n \"Page St at Scott St\",\n \"Pierce St at Haight St\",\n \"Grove St at Divisadero\",\n ];\n\n // Sort the remaining stations in the specified order\n const otherStations = stationOrder.map((stationName) =>\n panhandle_data.find((station) => station.name === stationName)\n ).filter((station) => station !== undefined) as StationData[];\n\n const html = `\n \n \n \n \n \n Bay Wheels Dashboard\n \n \n \n \n

Bay Wheels Station Dashboard

\n Email notifications:\n \n

\n \n \n ${\n oakBroderickStation\n ? (() => {\n const { normalBikes, eBikes } = getBikeCounts(oakBroderickStation);\n return `\n

${oakBroderickStation.name}

${eBikes}

e-bikes available

${oakBroderickStation.vehicle_available_count}

total bikes

${normalBikes}

normal bikes

${oakBroderickStation.num_vehicles_disabled}

unavailable

${oakBroderickStation.num_docks_available}

docks available

\n `;\n })()\n : \"\"\n }\n \n \n

\n ${\n otherStations.map((station) => {\n const { normalBikes, eBikes } = getBikeCounts(station);\n return `\n

${station.name}

${eBikes}

e-bikes available

${station.vehicle_available_count}

total

${normalBikes}

normal

${station.num_vehicles_disabled}

unavail

${station.num_docks_available}

docks

\n `;\n }).join(\"\")\n }\n

\n \n \n

\n Last updated: ${new Date().toLocaleString(\"en-US\", { timeZone: \"America/Los_Angeles\" })} PT\n

\n \n \n \n

\n \n \n `;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","baywheels",[149],"965e4ebe-c320-11f0-b423-42dde27851f2","AGENTS.md","965e4f7c-c320-11f0-b423-42dde27851f2",220,["D",1763320517742],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[158],"96496a08-c320-11f0-b0c3-42dde27851f2",".vtignore","96496b3e-c320-11f0-b0c3-42dde27851f2",218,["D",1763320517603],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[165],"a4b6c36a-c811-11f0-a3e1-42dde27851f2","whoop-sleep","8ba6adea-c811-11f0-a639-42dde27851f2",343,["D",1763863855183],1,"directory",[172],"8b9813ca-c811-11f0-a639-42dde27851f2","untitled-folder-3015","8b9814b0-c811-11f0-a639-42dde27851f2",341,["D",1763863813041],[180],"03ede404-c32a-11f0-85c1-42dde27851f2","obplot-dataviz","03ede59e-c32a-11f0-85c1-42dde27851f2",236,["D",1763324567036],[186],"70b6395a-ce2f-11f0-ad1b-42dde27851f2","linear-calendar-val","70b63a4a-ce2f-11f0-ad1b-42dde27851f2",352,["D",1764536359781],[192],"5dc3b6a8-bd9d-11f0-9644-42dde27851f2","clearspace_screen_time","58c75844-bd9d-11f0-87c0-42dde27851f2",21,["D",1762714402899],[198],"5a290edc-bda5-11f0-a35b-42dde27851f2","bay-wheels","56d69024-bda5-11f0-be1c-42dde27851f2",25,["D",1762717832823],[204],"pulls","branches",2,"forks","envVars",{"_217":219,"_220":62},"connections",{"_217":62,"_218":62},"count","unfilledCount",5,"emptyCount",{"_43":203,"_32":204,"_30":205,"_141":-5,"_41":42,"_40":206,"_143":25,"_38":554,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":555,"_27":556},{"_43":545,"_32":546,"_30":547,"_141":205,"_41":42,"_40":548,"_143":49,"_38":549,"_13":550,"_34":431,"_36":551,"_24":49,"_146":-5,"_265":552,"_27":553},{"_43":536,"_32":537,"_30":538,"_141":205,"_41":42,"_40":539,"_143":49,"_38":540,"_13":541,"_34":35,"_36":542,"_24":49,"_146":-5,"_265":543,"_27":544},{"_43":527,"_32":528,"_30":529,"_141":205,"_41":42,"_40":530,"_143":49,"_38":531,"_13":532,"_34":35,"_36":533,"_24":49,"_146":-5,"_265":534,"_27":535},{"_43":519,"_32":520,"_30":521,"_141":205,"_41":42,"_40":522,"_143":49,"_38":523,"_13":395,"_34":431,"_36":524,"_24":49,"_146":-5,"_265":525,"_27":526},{"_43":511,"_32":512,"_30":513,"_141":205,"_41":42,"_40":514,"_143":25,"_38":515,"_13":211,"_34":35,"_36":516,"_24":49,"_146":-5,"_265":517,"_27":518},{"_43":197,"_32":198,"_30":199,"_141":-5,"_41":42,"_40":200,"_143":25,"_38":508,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":509,"_27":510},{"_43":500,"_32":501,"_30":502,"_141":199,"_41":42,"_40":503,"_143":25,"_38":504,"_13":211,"_34":20,"_36":505,"_24":49,"_146":-5,"_265":506,"_27":507},{"_43":493,"_32":494,"_30":57,"_141":199,"_41":42,"_40":495,"_143":25,"_38":496,"_13":176,"_34":153,"_36":497,"_24":49,"_146":-5,"_265":498,"_27":499},{"_43":485,"_32":486,"_30":487,"_141":199,"_41":42,"_40":488,"_143":25,"_38":489,"_13":176,"_34":153,"_36":490,"_24":49,"_146":-5,"_265":491,"_27":492},{"_43":477,"_32":478,"_30":479,"_141":199,"_41":42,"_40":480,"_143":25,"_38":481,"_13":176,"_34":153,"_36":482,"_24":49,"_146":-5,"_265":483,"_27":484},{"_43":468,"_32":469,"_30":470,"_141":199,"_41":42,"_40":471,"_143":25,"_38":472,"_13":473,"_34":153,"_36":474,"_24":49,"_146":-5,"_265":475,"_27":476},{"_43":459,"_32":460,"_30":461,"_141":199,"_41":42,"_40":462,"_143":25,"_38":463,"_13":464,"_34":153,"_36":465,"_24":49,"_146":-5,"_265":466,"_27":467},{"_43":451,"_32":452,"_30":453,"_141":199,"_41":42,"_40":454,"_143":25,"_38":455,"_13":62,"_34":35,"_36":456,"_24":49,"_146":-5,"_265":457,"_27":458},{"_43":443,"_32":444,"_30":445,"_141":199,"_41":42,"_40":446,"_143":25,"_38":447,"_13":176,"_34":153,"_36":448,"_24":49,"_146":-5,"_265":449,"_27":450},{"_43":435,"_32":436,"_30":437,"_141":199,"_41":42,"_40":438,"_143":25,"_38":439,"_13":421,"_34":153,"_36":440,"_24":49,"_146":-5,"_265":441,"_27":442},{"_43":425,"_32":426,"_30":427,"_141":199,"_41":42,"_40":428,"_143":25,"_38":429,"_13":430,"_34":431,"_36":432,"_24":49,"_146":-5,"_265":433,"_27":434},{"_43":416,"_32":417,"_30":418,"_141":199,"_41":42,"_40":419,"_143":25,"_38":420,"_13":421,"_34":35,"_36":422,"_24":49,"_146":-5,"_265":423,"_27":424},{"_43":407,"_32":408,"_30":409,"_141":199,"_41":42,"_40":410,"_143":25,"_38":411,"_13":412,"_34":35,"_36":413,"_24":49,"_146":-5,"_265":414,"_27":415},{"_43":399,"_32":400,"_30":401,"_141":199,"_41":42,"_40":402,"_143":25,"_38":403,"_13":176,"_34":153,"_36":404,"_24":49,"_146":-5,"_265":405,"_27":406},{"_43":390,"_32":391,"_30":392,"_141":199,"_41":42,"_40":393,"_143":25,"_38":394,"_13":395,"_34":153,"_36":396,"_24":49,"_146":-5,"_265":397,"_27":398},{"_43":191,"_32":192,"_30":193,"_141":-5,"_41":42,"_40":194,"_143":25,"_38":387,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":388,"_27":389},{"_43":382,"_32":374,"_30":377,"_141":193,"_41":42,"_40":383,"_143":49,"_38":384,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":385,"_27":386},{"_43":376,"_32":375,"_30":368,"_141":377,"_41":42,"_40":378,"_143":49,"_38":379,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":380,"_27":381},{"_43":365,"_32":366,"_30":367,"_141":368,"_41":42,"_40":369,"_143":49,"_38":370,"_13":62,"_34":35,"_36":371,"_24":49,"_146":-5,"_265":372,"_27":373},{"_43":360,"_32":336,"_30":330,"_141":193,"_41":42,"_40":361,"_143":25,"_38":362,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":363,"_27":364},{"_43":355,"_32":346,"_30":340,"_141":330,"_41":42,"_40":356,"_143":25,"_38":357,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":358,"_27":359},{"_43":347,"_32":348,"_30":349,"_141":340,"_41":42,"_40":350,"_143":49,"_38":351,"_13":211,"_34":35,"_36":352,"_24":49,"_146":-5,"_265":353,"_27":354},{"_43":337,"_32":338,"_30":339,"_141":340,"_41":42,"_40":341,"_143":25,"_38":342,"_13":176,"_34":35,"_36":343,"_24":49,"_146":-5,"_265":344,"_27":345},{"_43":327,"_32":328,"_30":329,"_141":330,"_41":42,"_40":331,"_143":49,"_38":332,"_13":211,"_34":35,"_36":333,"_24":49,"_146":-5,"_265":334,"_27":335},{"_43":185,"_32":186,"_30":187,"_141":-5,"_41":42,"_40":188,"_143":49,"_38":324,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":325,"_27":326},{"_43":319,"_32":292,"_30":286,"_141":187,"_41":42,"_40":320,"_143":49,"_38":321,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":322,"_27":323},{"_43":313,"_32":165,"_30":314,"_141":286,"_41":42,"_40":315,"_143":49,"_38":316,"_13":211,"_34":20,"_36":169,"_24":49,"_146":-5,"_265":317,"_27":318},{"_43":307,"_32":158,"_30":308,"_141":286,"_41":42,"_40":309,"_143":49,"_38":310,"_13":211,"_34":20,"_36":162,"_24":49,"_146":-5,"_265":311,"_27":312},{"_43":301,"_32":139,"_30":302,"_141":286,"_41":42,"_40":303,"_143":49,"_38":304,"_13":62,"_34":20,"_36":145,"_24":49,"_146":-5,"_265":305,"_27":306},{"_43":293,"_32":294,"_30":295,"_141":286,"_41":42,"_40":296,"_143":49,"_38":297,"_13":62,"_34":153,"_36":298,"_24":49,"_146":-5,"_265":299,"_27":300},{"_43":283,"_32":284,"_30":285,"_141":286,"_41":42,"_40":287,"_143":49,"_38":288,"_13":62,"_34":35,"_36":289,"_24":49,"_146":-5,"_265":290,"_27":291},{"_43":179,"_32":180,"_30":181,"_141":-5,"_41":42,"_40":182,"_143":49,"_38":280,"_13":62,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":281,"_27":282},{"_43":171,"_32":172,"_30":173,"_141":-5,"_41":42,"_40":174,"_143":49,"_38":277,"_13":176,"_34":177,"_36":-5,"_24":49,"_146":-5,"_265":278,"_27":279},{"_43":164,"_32":165,"_30":166,"_141":-5,"_41":42,"_40":167,"_143":25,"_38":274,"_13":62,"_34":20,"_36":169,"_24":49,"_146":-5,"_265":275,"_27":276},{"_43":157,"_32":158,"_30":159,"_141":-5,"_41":42,"_40":160,"_143":25,"_38":271,"_13":62,"_34":20,"_36":162,"_24":49,"_146":-5,"_265":272,"_27":273},{"_43":148,"_32":149,"_30":126,"_141":-5,"_41":42,"_40":150,"_143":49,"_38":268,"_13":152,"_34":153,"_36":154,"_24":49,"_146":155,"_265":269,"_27":270},{"_43":138,"_32":139,"_30":140,"_141":-5,"_41":42,"_40":142,"_143":25,"_38":264,"_13":62,"_34":20,"_36":145,"_24":49,"_146":-5,"_265":266,"_27":267},["D",1763320517573],"children",[],[139],["D",1767840237904],[],[149],["D",1763320517742],[],[158],["D",1763320517603],[],[165],["D",1763863855183],[],[172],["D",1763863813041],[],[180],"0421c7ec-c32a-11f0-ace0-42dde27851f2","whoop-sleep-obplot.ts","0421c8aa-c32a-11f0-ace0-42dde27851f2","0405b520-c32a-11f0-85c1-42dde27851f2",239,["D",1763324567353],"type SleepPoint = { date: Date; value: number };\n\nfunction generateLast30DaysData(): SleepPoint[] {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const data: SleepPoint[] = [];\n for (let i = 29; i >= 0; i--) {\n const d = new Date(today);\n d.setDate(today.getDate() - i);\n const value = Math.max(1, Math.min(100, Math.floor(Math.random() * 100) + 1));\n data.push({ date: d, value });\n }\n return data;\n}\n\nexport default (async () => {\n const Plot = await import(\"https://esm.sh/@observablehq/plot@0.6.17\");\n const data = generateLast30DaysData();\n const start = data[0].date;\n const end = data[data.length - 1].date;\n return Plot.lineY(data, { x: \"date\", y: \"value\", stroke: \"#6366f1\" }).plot({\n height: 320,\n marginLeft: 44,\n marginBottom: 36,\n x: { type: \"utc\", domain: [start, end], label: \"Date\" },\n y: { domain: [1, 100], grid: true, label: \"Sleep score\" }\n });\n})();\n",[],[186,292,284],"whoop","5de80f52-c32a-11f0-acac-42dde27851f2","whoop-http-dash.ts","5de80ffc-c32a-11f0-acac-42dde27851f2",246,["D",1763324717996],"// Learn more: https://docs.val.town/vals/http/\n\nexport default async function (req: Request): Promise {\n // Render the chart server-side from the local module\n const mod = await import(\"./whoop-sleep-obplot.ts\");\n const chartEl = await mod.default as unknown as Element;\n const chartHTML = (chartEl as any)?.outerHTML ?? \"\";\n\n const html = `\n\n\n \n \n Whoop Sleep Dashboard\n \n\n\n

Whoop Sleep (last 30 days)

\n ${chartHTML}\n

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n\n",[],[186,292,294],"0a232262-c32a-11f0-8ce6-42dde27851f2","0a232334-c32a-11f0-8ce6-42dde27851f2",245,["D",1763324577453],[],[186,292,139],"042ab42e-c32a-11f0-8d85-42dde27851f2","b833c57e-c324-11f0-a265-42dde27851f2",241,["D",1763324567357],[],[186,292,158],"0425c7f2-c32a-11f0-a3c7-42dde27851f2","b84158ec-c324-11f0-bfd8-42dde27851f2",240,["D",1763324567367],[],[186,292,165],"0405b444-c32a-11f0-85c1-42dde27851f2",237,["D",1763324567195],[253,254,255,256,257],[186,292],["D",1763324567036],[252],[186],"b807ccea-ce31-11f0-8e9a-42dde27851f2","index.tsx","71578724-ce2f-11f0-b5b9-42dde27851f2","70cf20aa-ce2f-11f0-ad1b-42dde27851f2",381,["D",1764537338449],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n\n",[],[192,336,328],"frontend","e1910a68-ec3b-11f0-87e2-42dde27851f2","CalendarEvent.tsx","717b55fa-ce2f-11f0-b168-42dde27851f2","710d75ee-ce2f-11f0-a12a-42dde27851f2",386,["D",1767840238002],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { CalendarEvent } from \"../../shared/types.ts\";\n\ninterface CalendarEventProps {\n event: CalendarEvent;\n style: { top: number; height: number };\n onUpdate: (eventId: string, updates: { start?: string; end?: string }) => Promise;\n onDelete: (eventId: string) => Promise;\n onSelect: (event: CalendarEvent) => void;\n hourHeight: number;\n startHour: number;\n}\n\nexport function CalendarEventComponent({ \n event, \n style, \n onUpdate, \n onDelete,\n onSelect,\n hourHeight,\n startHour,\n}: CalendarEventProps) {\n const [isResizing, setIsResizing] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [tempHeight, setTempHeight] = useState(null);\n const [tempTop, setTempTop] = useState(null);\n const [showMenu, setShowMenu] = useState(false);\n const eventRef = useRef(null);\n const startYRef = useRef(0);\n const startHeightRef = useRef(0);\n const startTopRef = useRef(0);\n\n const formatTime = (dateStr: string) => {\n const date = new Date(dateStr);\n return date.toLocaleTimeString('en-US', { \n hour: 'numeric', \n minute: '2-digit',\n hour12: true \n });\n };\n\n const getDuration = () => {\n const start = new Date(event.start);\n const end = new Date(event.end);\n return Math.round((end.getTime() - start.getTime()) / 60000);\n };\n\n const handleResizeStart = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n \n setIsResizing(true);\n startYRef.current = e.clientY;\n startHeightRef.current = style.height;\n\n const handleResizeMove = (moveEvent: MouseEvent) => {\n const deltaY = moveEvent.clientY - startYRef.current;\n // Only mark as interacting if there's actual movement\n if (Math.abs(deltaY) > 3) {\n wasInteractingRef.current = true;\n }\n const newHeight = Math.max(20, startHeightRef.current + deltaY);\n const snappedHeight = Math.round(newHeight / (hourHeight / 4)) * (hourHeight / 4);\n setTempHeight(snappedHeight);\n };\n\n const handleResizeEnd = async () => {\n document.removeEventListener('mousemove', handleResizeMove);\n document.removeEventListener('mouseup', handleResizeEnd);\n \n if (tempHeight !== null && tempHeight !== style.height) {\n const start = new Date(event.start);\n const hoursFromTop = (style.top + tempHeight) / hourHeight;\n const endHour = Math.floor(hoursFromTop + startHour);\n const endMinutes = Math.round((hoursFromTop + startHour - endHour) * 60);\n \n const newEnd = new Date(start);\n newEnd.setHours(endHour, endMinutes, 0, 0);\n \n try {\n await onUpdate(event.id, { end: newEnd.toISOString() });\n } catch (error) {\n console.error('Failed to update event:', error);\n }\n }\n \n setIsResizing(false);\n setTempHeight(null);\n };\n\n document.addEventListener('mousemove', handleResizeMove);\n document.addEventListener('mouseup', handleResizeEnd);\n };\n\n const handleDragStart = (e: React.MouseEvent) => {\n if (isResizing) return;\n e.preventDefault();\n \n setIsDragging(true);\n startYRef.current = e.clientY;\n startTopRef.current = style.top;\n let hasMoved = false;\n\n const handleDragMove = (moveEvent: MouseEvent) => {\n const deltaY = moveEvent.clientY - startYRef.current;\n // Only consider it a drag if there's significant movement\n if (Math.abs(deltaY) > 3) {\n hasMoved = true;\n }\n const newTop = Math.max(0, startTopRef.current + deltaY);\n const snappedTop = Math.round(newTop / (hourHeight / 4)) * (hourHeight / 4);\n setTempTop(snappedTop);\n };\n\n const handleDragEnd = async () => {\n document.removeEventListener('mousemove', handleDragMove);\n document.removeEventListener('mouseup', handleDragEnd);\n \n // If no significant movement, treat as a click\n if (!hasMoved) {\n setIsDragging(false);\n onSelect(event);\n return;\n }\n \n if (tempTop !== null && tempTop !== style.top) {\n const deltaHours = (tempTop - style.top) / hourHeight;\n \n const start = new Date(event.start);\n const end = new Date(event.end);\n \n start.setTime(start.getTime() + deltaHours * 60 * 60 * 1000);\n end.setTime(end.getTime() + deltaHours * 60 * 60 * 1000);\n \n try {\n await onUpdate(event.id, { \n start: start.toISOString(), \n end: end.toISOString() \n });\n } catch (error) {\n console.error('Failed to update event:', error);\n }\n }\n \n setIsDragging(false);\n setTempTop(null);\n };\n\n document.addEventListener('mousemove', handleDragMove);\n document.addEventListener('mouseup', handleDragEnd);\n };\n\n const handleDelete = async () => {\n try {\n await onDelete(event.id);\n } catch (error) {\n console.error('Failed to delete event:', error);\n }\n setShowMenu(false);\n };\n\n const displayHeight = tempHeight ?? style.height;\n const displayTop = tempTop ?? style.top;\n const duration = getDuration();\n const isCompact = displayHeight < 40;\n\n return (\n <>\n {\n e.preventDefault();\n setShowMenu(true);\n }}\n >\n

\n {event.title}\n

\n {!isCompact && (\n

\n {formatTime(event.start)} - {formatTime(event.end)}\n ({duration}m)\n

\n )}\n

\n \n

\n \n {event.googleEventId && (\n

\n \n

\n )}\n

\n \n {showMenu && (\n <>\n

setShowMenu(false)}\n />\n

\n \n \n Delete\n \n

\n \n )}\n \n );\n}\n\n",[],[192,336,346,338],"components","0bad34e4-ce31-11f0-ae0a-42dde27851f2","App.tsx","7169ae04-ce2f-11f0-8699-42dde27851f2",380,["D",1764537049302],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { LinearTask, CalendarEvent, LinearCycleInfo, CreateEventRequest } from \"../../shared/types.ts\";\nimport { TaskList } from \"./TaskList.tsx\";\nimport { TaskDetail } from \"./TaskDetail.tsx\";\nimport { Calendar } from \"./Calendar.tsx\";\n\nexport function App() {\n const [tasks, setTasks] = useState([]);\n const [cycle, setCycle] = useState(null);\n const [events, setEvents] = useState([]);\n const [selectedTask, setSelectedTask] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedDate, setSelectedDate] = useState(() => {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n return today;\n });\n\n // Fetch tasks from Linear\n const fetchTasks = useCallback(async () => {\n try {\n const response = await fetch('/api/linear/tasks');\n const data = await response.json();\n \n if (data.success) {\n setTasks(data.data.tasks);\n setCycle(data.data.cycle);\n } else {\n setError(data.error || 'Failed to fetch tasks');\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to fetch tasks');\n }\n }, []);\n\n // Fetch calendar events\n const fetchEvents = useCallback(async () => {\n try {\n const startOfWeek = new Date(selectedDate);\n startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());\n startOfWeek.setHours(0, 0, 0, 0);\n \n const endOfWeek = new Date(startOfWeek);\n endOfWeek.setDate(endOfWeek.getDate() + 7);\n \n const response = await fetch(\n `/api/calendar/events?start=${startOfWeek.toISOString()}&end=${endOfWeek.toISOString()}`\n );\n const data = await response.json();\n \n if (data.success) {\n setEvents(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch events:', err);\n }\n }, [selectedDate]);\n\n useEffect(() => {\n Promise.all([fetchTasks(), fetchEvents()]).finally(() => {\n setLoading(false);\n });\n }, [fetchTasks, fetchEvents]);\n\n const handleCreateEvent = async (request: CreateEventRequest) => {\n try {\n const response = await fetch('/api/calendar/events', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(request),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => [...prev, data.data]);\n return data.data;\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to create event:', err);\n throw err;\n }\n };\n\n const handleUpdateEvent = async (eventId: string, updates: { start?: string; end?: string }) => {\n try {\n const response = await fetch(`/api/calendar/events/${eventId}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => prev.map(e => e.id === eventId ? data.data : e));\n return data.data;\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to update event:', err);\n throw err;\n }\n };\n\n const handleDeleteEvent = async (eventId: string) => {\n try {\n const response = await fetch(`/api/calendar/events/${eventId}`, {\n method: 'DELETE',\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => prev.filter(e => e.id !== eventId));\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to delete event:', err);\n throw err;\n }\n };\n\n if (loading) {\n return (\n

\n Loading your tasks...\n

\n );\n }\n\n if (error) {\n return (\n

\n \n

Something went wrong

{error}

\n window.location.reload()}\n className=\"px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors\"\n >\n Try Again\n \n

\n );\n }\n\n return (\n

\n \n

\n \n {selectedTask && (\n setSelectedTask(null)}\n />\n )}\n

\n );\n}\n\n",[],[192,336,346,348],"710d754e-ce2f-11f0-a12a-42dde27851f2",356,["D",1764536360393],[248,249],[192,336,346],"70cf1fe2-ce2f-11f0-ad1b-42dde27851f2",353,["D",1764536359984],[247,250],[192,336],"7196bcbe-ce2f-11f0-b5b9-42dde27851f2","calendar.ts","7196bd4a-ce2f-11f0-b5b9-42dde27851f2","713bca20-ce2f-11f0-b5b9-42dde27851f2",371,["D",1764536361294],"import { Hono } from \"https://esm.sh/hono@4.4.2\";\nimport type { CalendarEvent, CreateEventRequest, UpdateEventRequest, ApiResponse } from \"../../shared/types.ts\";\nimport * as db from \"../database/queries.ts\";\n\nconst calendarRoutes = new Hono();\n\n// Get Google OAuth credentials from environment\nfunction getGoogleCredentials() {\n const clientId = Deno.env.get('GOOGLE_CLIENT_ID');\n const clientSecret = Deno.env.get('GOOGLE_CLIENT_SECRET');\n const refreshToken = Deno.env.get('GOOGLE_REFRESH_TOKEN');\n\n if (!clientId || !clientSecret || !refreshToken) {\n throw new Error('Google Calendar credentials not configured');\n }\n\n return { clientId, clientSecret, refreshToken };\n}\n\n// Get a fresh access token using refresh token\nasync function getAccessToken(): Promise {\n const { clientId, clientSecret, refreshToken } = getGoogleCredentials();\n\n const response = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n body: new URLSearchParams({\n client_id: clientId,\n client_secret: clientSecret,\n refresh_token: refreshToken,\n grant_type: 'refresh_token',\n }),\n });\n\n if (!response.ok) {\n const error = await response.text();\n throw new Error(`Failed to refresh Google token: ${error}`);\n }\n\n const data = await response.json();\n return data.access_token;\n}\n\n// Create Google Calendar event\nasync function createGoogleEvent(\n title: string,\n description: string | null,\n start: string,\n end: string,\n color: string\n): Promise {\n const accessToken = await getAccessToken();\n\n // Map hex color to Google Calendar colorId (1-11)\n const colorId = getGoogleColorId(color);\n\n const event = {\n summary: title,\n description: description || undefined,\n start: {\n dateTime: start,\n timeZone: 'America/Los_Angeles',\n },\n end: {\n dateTime: end,\n timeZone: 'America/Los_Angeles',\n },\n colorId,\n };\n\n const response = await fetch(\n 'https://www.googleapis.com/calendar/v3/calendars/primary/events',\n {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${accessToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(event),\n }\n );\n\n if (!response.ok) {\n const error = await response.text();\n throw new Error(`Failed to create Google Calendar event: ${error}`);\n }\n\n const data = await response.json();\n return data.id;\n}\n\n// Update Google Calendar event\nasync function updateGoogleEvent(\n googleEventId: string,\n updates: { start?: string; end?: string; title?: string }\n): Promise {\n const accessToken = await getAccessToken();\n\n const patch: Record = {};\n\n if (updates.title) {\n patch.summary = updates.title;\n }\n if (updates.start) {\n patch.start = {\n dateTime: updates.start,\n timeZone: 'America/Los_Angeles',\n };\n }\n if (updates.end) {\n patch.end = {\n dateTime: updates.end,\n timeZone: 'America/Los_Angeles',\n };\n }\n\n const response = await fetch(\n `https://www.googleapis.com/calendar/v3/calendars/primary/events/${googleEventId}`,\n {\n method: 'PATCH',\n headers: {\n 'Authorization': `Bearer ${accessToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(patch),\n }\n );\n\n if (!response.ok) {\n const error = await response.text();\n throw new Error(`Failed to update Google Calendar event: ${error}`);\n }\n}\n\n// Delete Google Calendar event\nasync function deleteGoogleEvent(googleEventId: string): Promise {\n const accessToken = await getAccessToken();\n\n const response = await fetch(\n `https://www.googleapis.com/calendar/v3/calendars/primary/events/${googleEventId}`,\n {\n method: 'DELETE',\n headers: {\n 'Authorization': `Bearer ${accessToken}`,\n },\n }\n );\n\n // 404 is okay - event might already be deleted\n if (!response.ok && response.status !== 404) {\n const error = await response.text();\n throw new Error(`Failed to delete Google Calendar event: ${error}`);\n }\n}\n\n// Map hex color to Google Calendar colorId\nfunction getGoogleColorId(hexColor: string): string {\n const hex = hexColor.toLowerCase();\n\n if (hex.includes('ef') || hex.includes('f44') || hex.includes('d50')) return '11'; // Red\n if (hex.includes('f97') || hex.includes('f45')) return '6'; // Orange\n if (hex.includes('eab') || hex.includes('f6b')) return '5'; // Yellow\n if (hex.includes('10b') || hex.includes('0b8') || hex.includes('33b')) return '2'; // Green\n if (hex.includes('3b8') || hex.includes('039')) return '7'; // Blue\n if (hex.includes('8e2') || hex.includes('7c3')) return '3'; // Purple\n if (hex.includes('6b7') || hex.includes('616')) return '8'; // Gray\n\n return '9'; // Default to blueberry\n}\n\n// GET /events - Get all events (optionally filtered by date range)\ncalendarRoutes.get('/events', async (c) => {\n try {\n const start = c.req.query('start');\n const end = c.req.query('end');\n\n let events: CalendarEvent[];\n\n if (start && end) {\n events = await db.getEventsInRange(start, end);\n } else {\n events = await db.getAllEvents();\n }\n\n return c.json>({\n success: true,\n data: events,\n });\n } catch (error) {\n console.error('Error fetching events:', error);\n return c.json>({\n success: false,\n error: error instanceof Error ? error.message : 'Unknown error',\n }, 500);\n }\n});\n\n// POST /events - Create a new event\ncalendarRoutes.post('/events', async (c) => {\n try {\n const body = await c.req.json();\n\n // Calculate end time\n const startDate = new Date(body.start);\n const endDate = new Date(startDate.getTime() + body.durationMinutes * 60 * 1000);\n\n // Create in Google Calendar first\n let googleEventId: string | null = null;\n try {\n googleEventId = await createGoogleEvent(\n body.taskTitle,\n body.taskDescription,\n body.start,\n endDate.toISOString(),\n body.color\n );\n } catch (error) {\n console.error('Failed to create Google Calendar event:', error);\n // Continue without Google sync - we'll try again later\n }\n\n // Create in local database\n const event = await db.createEvent(\n body.taskId,\n body.taskTitle,\n body.taskDescription,\n body.start,\n endDate.toISOString(),\n googleEventId,\n body.color\n );\n\n return c.json>({\n success: true,\n data: event,\n });\n } catch (error) {\n console.error('Error creating event:', error);\n return c.json>({\n success: false,\n error: error instanceof Error ? error.message : 'Unknown error',\n }, 500);\n }\n});\n\n// PATCH /events/:id - Update an event\ncalendarRoutes.patch('/events/:id', async (c) => {\n try {\n const eventId = c.req.param('id');\n const body = await c.req.json();\n\n // Get current event to check for Google sync\n const currentEvent = await db.getEventById(eventId);\n if (!currentEvent) {\n return c.json>({\n success: false,\n error: 'Event not found',\n }, 404);\n }\n\n // Update in Google Calendar if synced\n if (currentEvent.googleEventId) {\n try {\n await updateGoogleEvent(currentEvent.googleEventId, {\n start: body.start,\n end: body.end,\n title: body.title,\n });\n } catch (error) {\n console.error('Failed to update Google Calendar event:', error);\n // Continue with local update\n }\n }\n\n // Update in local database\n const updatedEvent = await db.updateEvent(eventId, {\n start: body.start,\n end: body.end,\n title: body.title,\n });\n\n return c.json>({\n success: true,\n data: updatedEvent,\n });\n } catch (error) {\n console.error('Error updating event:', error);\n return c.json>({\n success: false,\n error: error instanceof Error ? error.message : 'Unknown error',\n }, 500);\n }\n});\n\n// DELETE /events/:id - Delete an event\ncalendarRoutes.delete('/events/:id', async (c) => {\n try {\n const eventId = c.req.param('id');\n\n // Get current event to check for Google sync\n const currentEvent = await db.getEventById(eventId);\n if (!currentEvent) {\n return c.json>({\n success: false,\n error: 'Event not found',\n }, 404);\n }\n\n // Delete from Google Calendar if synced\n if (currentEvent.googleEventId) {\n try {\n await deleteGoogleEvent(currentEvent.googleEventId);\n } catch (error) {\n console.error('Failed to delete Google Calendar event:', error);\n // Continue with local delete\n }\n }\n\n // Delete from local database\n await db.deleteEvent(eventId);\n\n return c.json>({\n success: true,\n data: { deleted: true },\n });\n } catch (error) {\n console.error('Error deleting event:', error);\n return c.json>({\n success: false,\n error: error instanceof Error ? error.message : 'Unknown error',\n }, 500);\n }\n});\n\nexport { calendarRoutes };\n\n",[],[192,374,375,366],"backend","routes","713bc976-ce2f-11f0-b5b9-42dde27851f2","70e3570a-ce2f-11f0-b721-42dde27851f2",358,["D",1764536360697],[245],[192,374,375],"70e35642-ce2f-11f0-b721-42dde27851f2",354,["D",1764536360113],[244],[192,374],["D",1764536359781],[243,246],[192],"5052153e-c697-11f0-a6d1-42dde27851f2","timeline-debug.ts","371cc7ee-c697-11f0-9ced-42dde27851f2",328,["D",1763701363818],3,"import { getLatestRecord, getRecordsByDateRange } from \"./clearspace-data-queries.ts\";\n\n// Debug the timeline grid display to see what's happening with block ordering\nexport default async function (req: Request): Promise {\n const record = await getLatestRecord();\n const targetDate = record?.local_date || new Date().toISOString().split('T')[0];\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n \n if (!dayRecords.length) {\n return new Response(\"No records found\", { status: 404 });\n }\n\n // Sort by timestamp ascending\n const sorted = [...dayRecords].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n const offset = sorted[0].utc_offset_minutes ?? 0;\n\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 const getValueAt = (m: number) => {\n if (points.length === 0) return 0;\n const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) return points[points.length - 1].value;\n if (idx === 0) {\n const p = points[0];\n if (p.minute === m) return p.value;\n return (m / p.minute) * p.value;\n }\n\n const p1 = points[idx - 1];\n const p2 = points[idx];\n if (p2.minute === p1.minute) return p1.value;\n \n const ratio = (m - p1.minute) / (p2.minute - p1.minute);\n return p1.value + (p2.value - p1.value) * ratio;\n };\n\n const before7am = getValueAt(420);\n const totalRecorded = points.length > 0 ? points[points.length - 1].value : 0;\n const targetTotal = Math.max(0, totalRecorded - before7am);\n\n // Create blocks with detailed info\n const blockData = Array.from({ length: 100 }, (_, i) => {\n const startMin = 420 + i * 10;\n const endMin = startMin + 10;\n const startVal = getValueAt(startMin);\n const endVal = getValueAt(endMin);\n const rawUsage = Math.max(0, endVal - startVal);\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 gridPosition: i, // Position in the 10x10 grid (0-99)\n startMin,\n rawUsage,\n timeLabel,\n finalUsage: 0,\n isBackfilled: false\n };\n });\n\n // Apply the NEW proximity-based algorithm\n const targetBlocks = Math.ceil(targetTotal / 10);\n let remainingMinutes = targetTotal;\n \n const blocksWithUsage = blockData.filter(b => b.rawUsage > 0);\n const blocksWithoutUsage = blockData.filter(b => b.rawUsage === 0);\n \n blocksWithUsage.sort((a, b) => b.rawUsage - a.rawUsage);\n \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 by proximity to actual usage\n blocksWithoutUsage.sort((a, b) => {\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 const blocksByPriority = [...blocksWithUsage, ...blocksWithoutUsage];\n \n for (let i = 0; i < targetBlocks && remainingMinutes > 0; i++) {\n const block = blocksByPriority[i];\n const toFill = Math.min(10, remainingMinutes);\n block.finalUsage = toFill;\n remainingMinutes -= toFill;\n \n if (block.rawUsage === 0) {\n block.isBackfilled = true;\n }\n }\n\n // Show first 30 blocks (first 3 rows) with detailed info\n const debugBlocks = blockData.slice(0, 30).map(block => {\n const row = Math.floor(block.gridPosition / 10);\n const col = block.gridPosition % 10;\n const isFilled = block.finalUsage > 0.01;\n \n return {\n ...block,\n row,\n col,\n isFilled,\n displayOrder: `Row ${row}, Col ${col}`\n };\n });\n\n const html = `\n\n\n \n Timeline Grid Debug\n \n\n\n

Timeline Grid Debug

\n \n

Summary

Total Screen Time: ${totalRecorded} min

Target Blocks: ${targetBlocks} blocks

Active Blocks: ${blockData.filter(b => b.finalUsage > 0.01).length} blocks

First Usage Block: ${firstUsageBlock} (${blockData[firstUsageBlock]?.timeLabel})

Last Usage Block: ${lastUsageBlock} (${blockData[lastUsageBlock]?.timeLabel})

Usage Range: ${blocksWithUsage.length} blocks with actual usage

\n\n

Grid Preview (First 3 Rows: 7:00-9:50 AM)

\n ${debugBlocks.map(block => \n `

${block.index}

`\n ).join('')}\n

\n\n

Block Details (First 30 blocks)

\n \n \n \n \n \n \n \n \n \n \n ${debugBlocks.map(block => `\n \n \n \n \n \n \n \n \n \n `).join('')}\n

Grid Pos	Time	Raw Usage	Final Usage	Filled?	Backfilled?	Display
${block.gridPosition}	${block.timeLabel}	${block.rawUsage.toFixed(1)}	${block.finalUsage.toFixed(1)}	${block.isFilled ? 'YES' : 'NO'}	${block.isBackfilled ? 'YES' : 'NO'}	${block.displayOrder}

\n\n

Priority Order (First 20 blocks by algorithm priority)

\n \n \n ${blocksByPriority.slice(0, 20).map((block, i) => `\n 0.01 ? (block.isBackfilled ? 'backfilled' : 'filled') : ''}\">\n \n \n \n \n \n \n \n `).join('')}\n

Priority	Grid Pos	Time	Raw Usage	Final Usage	Reason
${i + 1}	${block.gridPosition}	${block.timeLabel}	${block.rawUsage.toFixed(1)}	${block.finalUsage.toFixed(1)}	${block.rawUsage > 0 ? 'Has raw usage' : 'Backfill candidate'}

\n\n

Data Points

\n \n \n ${points.slice(0, 20).map(p => `\n \n \n \n \n `).join('')}\n

Time	Cumulative Value
${Math.floor(p.minute / 60)}:${String(p.minute % 60).padStart(2, '0')}	${p.value} min

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[198,391],"418ca732-c695-11f0-82b7-42dde27851f2","debug-mismatch.ts","14a2344e-c695-11f0-9a9c-42dde27851f2",311,["D",1763700480045],"import { getLatestRecord, getRecordsByDateRange, ScreenTimeRecord } from \"./clearspace-data-queries.ts\";\n\n// Debug endpoint to investigate volume vs timeline mismatch\nexport default async function (req: Request): Promise {\n const record = await getLatestRecord();\n const totalMinutes = record?.total_screen_time || 0;\n const volumeBlocks = Math.ceil(totalMinutes / 10);\n \n // Get timeline data\n const targetDate = record?.local_date || new Date().toISOString().split('T')[0];\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n \n if (!dayRecords.length) {\n return new Response(\"No records found\", { status: 404 });\n }\n\n // Sort by timestamp ascending\n const sorted = [...dayRecords].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\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 const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) {\n return points[points.length - 1].value;\n }\n if (idx === 0) {\n const p = points[0];\n if (p.minute === m) return p.value;\n return (m / p.minute) * p.value;\n }\n\n const p1 = points[idx - 1];\n const p2 = points[idx];\n if (p2.minute === p1.minute) return p1.value;\n \n const ratio = (m - p1.minute) / (p2.minute - p1.minute);\n return p1.value + (p2.value - p1.value) * ratio;\n };\n\n // Process all 100 blocks with detailed logging\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,\n isBackfilled: false,\n startVal,\n endVal\n };\n });\n\n // Apply backfill algorithm with detailed tracking\n let backlog = 0;\n let totalBackfilled = 0;\n const backfillLog = [];\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 block.finalUsage = rawUsage;\n } else {\n // Overflow case\n block.finalUsage = 10;\n const overflow = rawUsage - 10;\n backlog += overflow;\n backfillLog.push(`Block ${i} (${block.timeLabel}): ${rawUsage.toFixed(1)} min overflow, backlog now ${backlog.toFixed(1)}`);\n }\n \n // Distribute backlog to previous empty blocks\n if (backlog > 0) {\n let remainingBacklog = backlog;\n const backfillDetails = [];\n \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 if (prevBlock.rawUsage === 0) {\n prevBlock.isBackfilled = true;\n }\n remainingBacklog -= toBackfill;\n totalBackfilled += toBackfill;\n backfillDetails.push(` → Block ${j} (${prevBlock.timeLabel}): +${toBackfill.toFixed(1)} min`);\n }\n }\n \n if (backfillDetails.length > 0) {\n backfillLog.push(...backfillDetails);\n }\n \n backlog = remainingBacklog;\n }\n }\n\n // Count active blocks\n const timelineActiveBlocks = blockData.filter(b => b.finalUsage > 0.05).length;\n \n // Generate detailed report\n const activeBlocksDetails = blockData\n .filter(b => b.finalUsage > 0.05)\n .map(b => ({\n time: b.timeLabel,\n rawUsage: b.rawUsage.toFixed(1),\n finalUsage: b.finalUsage.toFixed(1),\n isBackfilled: b.isBackfilled,\n startVal: b.startVal.toFixed(1),\n endVal: b.endVal.toFixed(1)\n }));\n\n const html = `\n\n\n \n Debug: Volume vs Timeline Mismatch\n \n\n\n

Debug: Volume vs Timeline Mismatch

\n \n

Summary

Total Screen Time: ${totalMinutes} minutes

Volume Blocks (${totalMinutes}/10): ${volumeBlocks} blocks

Timeline Active Blocks: ${timelineActiveBlocks} blocks

Data Points: ${points.length} records

Date: ${targetDate}

\n\n ${volumeBlocks !== timelineActiveBlocks ? `\n

⚠️ MISMATCH DETECTED

Difference: ${timelineActiveBlocks - volumeBlocks} blocks

Timeline has ${timelineActiveBlocks - volumeBlocks > 0 ? 'MORE' : 'FEWER'} active blocks than expected.

\n ` : '

✅ No Mismatch

Volume and timeline blocks match perfectly!

'}\n\n

Data Points (${points.length} records)

\n \n \n ${points.map(p => ``).join('')}\n

Time	Minute of Day	Cumulative Value
${new Date(p.minute * 60000 + offset * 60000).toISOString().substr(11, 5)}	${p.minute}	${p.value}

\n\n

Active Timeline Blocks (${timelineActiveBlocks} blocks)

\n \n \n ${activeBlocksDetails.map(b => `\n 10 ? 'overflow' : '')}\">\n \n \n \n \n \n \n \n `).join('')}\n

Time	Raw Usage	Final Usage	Start Val	End Val	Type
${b.time}	${b.rawUsage}	${b.finalUsage}	${b.startVal}	${b.endVal}	${b.isBackfilled ? 'Backfilled' : (parseFloat(b.rawUsage) > 10 ? 'Overflow' : 'Direct')}

\n\n ${backfillLog.length > 0 ? `\n

Backfill Log

${backfillLog.join('\\n')}

\n ` : ''}\n\n

Statistics

Total Backfilled: ${totalBackfilled.toFixed(1)} minutes
Remaining Backlog: ${backlog.toFixed(1)} minutes
Backfilled Blocks: ${blockData.filter(b => b.isBackfilled).length}
Overflow Blocks: ${blockData.filter(b => b.rawUsage > 10).length}

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[198,400],"4823a44e-c4fe-11f0-a5ff-42dde27851f2","cs-screen-time.ts","b46af9ba-bd9a-11f0-b212-42dde27851f2",280,["D",1763525685944],6,"// fetch(\n// \"https://api.thescreentimenetwork.com/v1/getScreenTimeToday?handle=shapedlines\",\n// {\n// headers: {\n// \"x-api-key\":\n// \"a093dea40372497d633fbcab6a0ed74a9098dd4ec8f0b69361865d9db233cfbb\",\n// },\n// },\n// )\n// .then((response) => response.json())\n// .then((data) => console.log(data));\n\nfetch(\n \"https://api.thescreentimenetwork.com/v1/getScreenTimeHistorical?handle=shapedlines\",\n {\n headers: {\n \"x-api-key\": Deno.env.get(\"clearspace_api_key\"),\n },\n },\n)\n .then((response) => response.json())\n .then((data) => console.log(data));",[],[198,408],"9c813dcc-c4fd-11f0-9821-42dde27851f2","clearspace_screentime_today.ts","74baa8da-c4fa-11f0-9a57-42dde27851f2",279,["D",1763525397958],11,"export default async function clearspace_screentime_today() {\n const response = await fetch(\n \"https://api.thescreentimenetwork.com/v1/getScreenTimeToday?handle=shapedlines\",\n {\n headers: {\n \"x-api-key\": Deno.env.get(\"clearspace_api_key\"),\n },\n },\n );\n\n const data = await response.json();\n return data;\n}",[],[198,417],"fdc95c1e-c4fc-11f0-a93a-42dde27851f2","clearspace-today-cron.ts","7f3b81e8-c4fb-11f0-89bd-42dde27851f2",272,["D",1763525131702],14,"interval","// Learn more: https://docs.val.town/vals/cron/\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport clearspace_screentime_today from \"./clearspace_screentime_today.ts\";\n\nconst TABLE_NAME = 'clearspace_screentime_data';\n\n// Initialize database table\nasync function initDatabase() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\n handle TEXT NOT NULL,\n total_screen_time INTEGER NOT NULL,\n last_seen INTEGER NOT NULL,\n local_date TEXT NOT NULL,\n day_of_week TEXT NOT NULL,\n utc_offset_minutes INTEGER NOT NULL,\n raw_response TEXT NOT NULL\n )`);\n}\n\nexport default async function (interval: Interval) {\n try {\n // Initialize database\n await initDatabase();\n \n // Pull data from clearspace\n const clearspace_screentime_response = await clearspace_screentime_today();\n console.log(\"Received response:\", clearspace_screentime_response);\n\n // Check if response is valid\n if (!clearspace_screentime_response?.data) {\n console.error(\"Invalid response structure:\", clearspace_screentime_response);\n return;\n }\n\n const data = clearspace_screentime_response.data;\n \n // Insert data into database\n await sqlite.execute(`\n INSERT INTO ${TABLE_NAME} (\n handle, \n total_screen_time, \n last_seen, \n local_date, \n day_of_week, \n utc_offset_minutes,\n raw_response\n ) VALUES (?, ?, ?, ?, ?, ?, ?)\n `, [\n data.handle,\n data.totalScreenTime,\n data.lastSeen,\n data.localDate,\n data.dayOfWeek,\n data.utcOffsetMinutes,\n JSON.stringify(clearspace_screentime_response)\n ]);\n\n console.log(`Successfully stored screen time data: ${data.totalScreenTime} minutes for ${data.localDate}`);\n \n } catch (error) {\n console.error(\"Error in clearspace cron:\", error);\n throw error; // Re-throw to see full stack trace\n }\n}\n\n//data: {\n// handle: \"shapedlines\",\n// totalScreenTime: 240,\n// lastSeen: 1763521786,\n// localDate: \"2025-11-18\",\n// dayOfWeek: \"Tuesday\",\n// utcOffsetMinutes: -480\n// }",[],[198,426],"96b7ac5a-c69c-11f0-916b-42dde27851f2","clearspace-graphs-http.ts","39530560-c5ba-11f0-b80c-42dde27851f2",338,["D",1763703629419],"// Learn more: https://docs.val.town/vals/http/\nimport { \n getRecordsByDateRange,\n getLatestRecord,\n ScreenTimeRecord\n} from \"./clearspace-data-queries.ts\";\n\ntype HourlyCumulativePoint = {\n hour: number; // 0-23, local hour\n minutes: number; // cumulative minutes\n};\n\nfunction toLocalDateFromTimestamp(timestamp: string, utcOffsetMinutes: number): Date {\n const utcMs = new Date(timestamp).getTime();\n return new Date(utcMs + utcOffsetMinutes * 60_000);\n}\n\nfunction computeCumulativeByHour(records: ScreenTimeRecord[]): HourlyCumulativePoint[] {\n if (!records.length) return [];\n \n // Use utc_offset_minutes from the most recent record (they should be consistent)\n const offset = records[0].utc_offset_minutes ?? 0;\n \n // Group by local hour: take the max cumulative within each hour\n const hourToMax: Map = new Map();\n for (const r of records) {\n const local = toLocalDateFromTimestamp(r.timestamp, r.utc_offset_minutes ?? offset);\n const hour = local.getHours();\n const prev = hourToMax.get(hour) ?? -Infinity;\n if (r.total_screen_time > prev) {\n hourToMax.set(hour, r.total_screen_time);\n }\n }\n \n // Return only the hours that have data; do NOT forward-fill\n const points: HourlyCumulativePoint[] = Array.from(hourToMax.entries())\n .sort((a, b) => a[0] - b[0])\n .map(([hour, minutes]) => ({ hour, minutes }));\n return points;\n}\n\ntype HourlyPoint = {\n hour: number; // 0-23, local hour\n minutes: number; // minutes during that hour (non-cumulative)\n};\n\n// Compute per-hour (non-cumulative) minutes by hour for the current local day.\n// We approximate by taking the max cumulative reading within each hour and\n// subtracting the max cumulative reading from the previous hour (or 0 for hour 0).\nfunction computeHourlyMinutesByHour(records: ScreenTimeRecord[]): HourlyPoint[] {\n if (!records.length) return [];\n const offset = records[0].utc_offset_minutes ?? 0;\n\n // Map of hour -> max cumulative minutes observed within that hour\n const endWithinHour: Map = new Map();\n for (const r of records) {\n const local = toLocalDateFromTimestamp(r.timestamp, r.utc_offset_minutes ?? offset);\n const hour = local.getHours();\n const prev = endWithinHour.get(hour) ?? -Infinity;\n if (r.total_screen_time > prev) {\n endWithinHour.set(hour, r.total_screen_time);\n }\n }\n\n // Sort hours and compute per-hour increments as differences of consecutive hour maxima\n const sortedHours = Array.from(endWithinHour.keys()).sort((a, b) => a - b);\n const points: HourlyPoint[] = [];\n let prevMax = 0;\n for (const h of sortedHours) {\n const maxThisHour = endWithinHour.get(h)!;\n const minutesThisHour = Math.max(0, Math.round(maxThisHour - prevMax));\n points.push({ hour: h, minutes: minutesThisHour });\n prevMax = Math.max(prevMax, maxThisHour);\n }\n return points;\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 try {\n const url = new URL(req.url);\n const dateParam = url.searchParams.get('date');\n\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 // Determine the target local date using the latest record (authoritative from API)\n // const latest = await getLatestRecord();\n // const targetDate = latest?.local_date || new Date().toISOString().split(\"T\")[0];\n \n // Load all records for that local date\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n // Sort ascending by timestamp to make computation deterministic\n dayRecords.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n \n const cumulativeSeries = computeCumulativeByHour(dayRecords).map(p => ({\n ...p,\n hours: Math.round((p.minutes / 60) * 100) / 100\n }));\n const hourlySeries = computeHourlyMinutesByHour(dayRecords);\n \n const pageTitle = \"Clearspace Screen Time Graphs\";\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 graphTitle = `Cumulative Screen Time Today (by hour, bars) — ${displayDate}`;\n const hourlyGraphTitle = `Hourly Screen Time Today (per hour, bars) — ${displayDate}`;\n \n const html = `\n\n\n \n \n ${pageTitle}\n \n \n\n\n

${pageTitle}

\n \n

\n ← Prev\n

${displayDate}

\n Next →\n

\n \n

${graphTitle}

\n Minutes of screen time accumulated across the day; non-decreasing curve using the max reading per hour.\n

\n \n

${hourlyGraphTitle}

\n Estimated minutes of screen time within each hour. If an hour had no readings,\n its usage may be reflected in the next hour with data.\n

\n \n \n\n`;\n \n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (error) {\n console.error(\"Error rendering screen time graphs:\", error);\n return new Response(\"Internal Server Error\", { status: 500 });\n }\n}\n\n\n",[],[198,436],"18e8d380-c4fd-11f0-b455-42dde27851f2","clearspace-data-viewer.ts","16dfad52-c4fd-11f0-beda-42dde27851f2",275,["D",1763525177207],"import { \n getAllRecords, \n getTodayRecords, \n getLatestRecord, \n getDailyAggregatedData,\n getHourlyDataForDate,\n getStatsSummary \n} from \"./clearspace-data-queries.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n const searchParams = url.searchParams;\n\n try {\n // Route handling\n if (path === \"/\" || path === \"/all\") {\n const records = await getAllRecords();\n return new Response(JSON.stringify(records, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/today\") {\n const records = await getTodayRecords();\n return new Response(JSON.stringify(records, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/latest\") {\n const record = await getLatestRecord();\n return new Response(JSON.stringify(record, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/daily\") {\n const days = parseInt(searchParams.get(\"days\") || \"30\");\n const data = await getDailyAggregatedData(days);\n return new Response(JSON.stringify(data, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/hourly\") {\n const date = searchParams.get(\"date\");\n if (!date) {\n return new Response(\"Missing 'date' parameter (format: YYYY-MM-DD)\", { \n status: 400 \n });\n }\n const data = await getHourlyDataForDate(date);\n return new Response(JSON.stringify(data, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/stats\") {\n const stats = await getStatsSummary();\n return new Response(JSON.stringify(stats, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n if (path === \"/dashboard\") {\n // Simple HTML dashboard\n const stats = await getStatsSummary();\n const latest = await getLatestRecord();\n const dailyData = await getDailyAggregatedData(7); // Last 7 days\n \n const html = `\n \n \n \n Clearspace Screen Time Dashboard\n \n \n \n

Clearspace Screen Time Dashboard

\n \n

Latest Reading

${latest?.total_screen_time || 0} min

${latest?.local_date || 'No data'}

\n \n

Total Records

${stats.total_records}

Data points collected

\n \n

Average Daily

${Math.round(stats.avg_daily_screen_time || 0)} min

All time average

\n \n

Last 7 Days

\n ${dailyData.map(day => `\n

\n ${day.local_date} (${day.day_of_week})\n ${Math.round(day.avg_screen_time)} min avg\n ${day.data_points} readings\n

\n `).join('')}\n

\n \n

API Endpoints

/all - All records

/today - Today's records

/latest - Latest record

/daily?days=30 - Daily aggregated data

/hourly?date=2024-01-01 - Hourly data for date

/stats - Statistics summary

\n \n \n `;\n \n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n \n // Default: show available endpoints\n const endpoints = {\n endpoints: {\n \"/\": \"All records\",\n \"/all\": \"All records\", \n \"/today\": \"Today's records\",\n \"/latest\": \"Latest record\",\n \"/daily?days=30\": \"Daily aggregated data (default 30 days)\",\n \"/hourly?date=YYYY-MM-DD\": \"Hourly data for specific date\",\n \"/stats\": \"Statistics summary\",\n \"/dashboard\": \"HTML dashboard view\"\n }\n };\n \n return new Response(JSON.stringify(endpoints, null, 2), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n \n } catch (error) {\n console.error(\"Error in clearspace data viewer:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n}",[],[198,444],"0867ff68-c4fd-11f0-aed0-42dde27851f2","clearspace-data-queries.ts","08680062-c4fd-11f0-aed0-42dde27851f2",273,["D",1763525149515],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\n\nconst TABLE_NAME = 'clearspace_screentime_data';\n\nexport interface ScreenTimeRecord {\n id: number;\n timestamp: string;\n handle: string;\n total_screen_time: number;\n last_seen: number;\n local_date: string;\n day_of_week: string;\n utc_offset_minutes: number;\n raw_response: string;\n}\n\n/**\n * Get all screen time records\n */\nexport async function getAllRecords(): Promise {\n const { rows } = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n ORDER BY timestamp DESC\n `);\n return rows as ScreenTimeRecord[];\n}\n\n/**\n * Get records for a specific date range\n */\nexport async function getRecordsByDateRange(startDate: string, endDate: string): Promise {\n const { rows } = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE local_date BETWEEN ? AND ?\n ORDER BY timestamp DESC\n `, [startDate, endDate]);\n return rows as ScreenTimeRecord[];\n}\n\n/**\n * Get records for today\n */\nexport async function getTodayRecords(): Promise {\n const today = new Date().toISOString().split('T')[0];\n const { rows } = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE DATE(timestamp) = ?\n ORDER BY timestamp DESC\n `, [today]);\n return rows as ScreenTimeRecord[];\n}\n\n/**\n * Get the latest record\n */\nexport async function getLatestRecord(): Promise {\n const { rows } = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n ORDER BY timestamp DESC \n LIMIT 1\n `);\n return rows.length > 0 ? rows[0] as ScreenTimeRecord : null;\n}\n\n/**\n * Get daily aggregated data (useful for charts)\n */\nexport async function getDailyAggregatedData(days: number = 30): Promise> {\n const { rows } = await sqlite.execute(`\n SELECT \n local_date,\n day_of_week,\n AVG(total_screen_time) as avg_screen_time,\n MAX(total_screen_time) as max_screen_time,\n MIN(total_screen_time) as min_screen_time,\n COUNT(*) as data_points\n FROM ${TABLE_NAME} \n WHERE timestamp >= datetime('now', '-${days} days')\n GROUP BY local_date, day_of_week\n ORDER BY local_date DESC\n `);\n return rows as Array<{\n local_date: string;\n day_of_week: string;\n avg_screen_time: number;\n max_screen_time: number;\n min_screen_time: number;\n data_points: number;\n }>;\n}\n\n/**\n * Get hourly data for a specific date (useful for intraday analysis)\n */\nexport async function getHourlyDataForDate(date: string): Promise> {\n const { rows } = await sqlite.execute(`\n SELECT \n CAST(strftime('%H', timestamp) AS INTEGER) as hour,\n AVG(total_screen_time) as avg_screen_time,\n COUNT(*) as data_points\n FROM ${TABLE_NAME} \n WHERE DATE(timestamp) = ?\n GROUP BY hour\n ORDER BY hour\n `, [date]);\n return rows as Array<{\n hour: number;\n avg_screen_time: number;\n data_points: number;\n }>;\n}\n\n/**\n * Get statistics summary\n */\nexport async function getStatsSummary(): Promise<{\n total_records: number;\n date_range: { earliest: string; latest: string };\n avg_daily_screen_time: number;\n max_daily_screen_time: number;\n min_daily_screen_time: number;\n}> {\n const { rows: countRows } = await sqlite.execute(`\n SELECT COUNT(*) as total_records FROM ${TABLE_NAME}\n `);\n \n const { rows: dateRows } = await sqlite.execute(`\n SELECT \n MIN(timestamp) as earliest,\n MAX(timestamp) as latest\n FROM ${TABLE_NAME}\n `);\n \n const { rows: statsRows } = await sqlite.execute(`\n SELECT \n AVG(total_screen_time) as avg_daily_screen_time,\n MAX(total_screen_time) as max_daily_screen_time,\n MIN(total_screen_time) as min_daily_screen_time\n FROM ${TABLE_NAME}\n `);\n \n return {\n total_records: countRows[0].total_records,\n date_range: {\n earliest: dateRows[0].earliest,\n latest: dateRows[0].latest\n },\n avg_daily_screen_time: statsRows[0].avg_daily_screen_time,\n max_daily_screen_time: statsRows[0].max_daily_screen_time,\n min_daily_screen_time: statsRows[0].min_daily_screen_time\n };\n}",[],[198,452],"1d19ee72-c808-11f0-b590-42dde27851f2","clearspace-10min-debug-http.ts","99eddd9a-c68d-11f0-907a-42dde27851f2",339,["D",1763859762194],4,"import { getRecordsByDateRange, ScreenTimeRecord } from \"./clearspace-data-queries.ts\";\n\nexport default async function (req: Request): Promise {\n try {\n const url = new URL(req.url);\n const queryDate = url.searchParams.get(\"date\");\n const today = new Date().toISOString().split(\"T\")[0];\n \n // Default to today if no date provided\n const targetDate = queryDate || today;\n \n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n\n // Calculate previous and next dates for navigation\n const currentDateObj = new Date(targetDate);\n \n const prevDateObj = new Date(currentDateObj);\n prevDateObj.setDate(prevDateObj.getDate() - 1);\n const prevDate = prevDateObj.toISOString().split(\"T\")[0];\n \n const nextDateObj = new Date(currentDateObj);\n nextDateObj.setDate(nextDateObj.getDate() + 1);\n const nextDate = nextDateObj.toISOString().split(\"T\")[0];\n\n // Sort by timestamp ascending\n const sorted = [...dayRecords].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n const offset = sorted[0]?.utc_offset_minutes ?? 0;\n\n // Process records to add incremental usage\n const tableData = sorted.map((record, index) => {\n const prev = index > 0 ? sorted[index - 1] : null;\n const incremental = prev \n ? record.total_screen_time - prev.total_screen_time \n : record.total_screen_time; // First record assumes diff from 0\n \n // Format timestamp to local time\n const d = new Date(record.timestamp);\n const localMs = d.getTime() + offset * 60000;\n const localDate = new Date(localMs);\n const timeStr = localDate.toLocaleTimeString(\"en-US\", { \n hour: \"numeric\", \n minute: \"2-digit\",\n hour12: true \n });\n\n return {\n timestamp: timeStr,\n cumulative: record.total_screen_time,\n incremental: Math.round(incremental * 100) / 100,\n raw: record\n };\n });\n\n const html = `\n\n\n \n \n Clearspace Raw Data Debug\n \n\n\n

Screen Time Data Log

\n Back to Today\n

\n\n

\n \n ← ${prevDate}\n \n \n

\n \n ${targetDate === today ? 'Today' : ''}\n

\n\n \n ${nextDate} →\n \n

\n\n

Showing ${tableData.length} records for ${targetDate}

\n \n

\n \n \n \n \n \n \n \n \n \n \n ${tableData.length === 0 ? `\n \n ` : tableData.map(row => `\n \n \n \n \n \n \n `).join('')}\n \n

Time	Cumulative (min)	Incremental (min)	Raw UTC
No data found for ${targetDate}
${row.timestamp}	${row.cumulative.toFixed(1)}	10 ? 'text-red-600 font-bold' : row.incremental < 0 ? 'text-orange-500' : 'text-gray-600'}\">\n ${row.incremental > 0 ? '+' : ''}${row.incremental.toFixed(1)}\n	${row.raw.timestamp}

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (error: any) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n}\n",[],[198,460],"80cd6528-cd50-11f0-9444-42dde27851f2","clearspace-100-blocks.ts","5823165c-c5cd-11f0-bfbb-42dde27851f2",350,["D",1764440609039],31,"import { getLatestRecord, getRecordsByDateRange, ScreenTimeRecord } from \"./clearspace-data-queries.ts\";\n\nfunction renderExplanation() {\n return `\n

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) => \n new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()\n );\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 using step function\n const getValueAt = (m: number) => {\n if (points.length === 0) return 0;\n const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) return points[points.length - 1].value;\n if (idx === 0) return 0;\n return points[idx - 1].value;\n };\n\n // Pass 1: Calculate raw usage for each 10-minute block (7 AM = min 420 to 11:40 PM = min 1420)\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); // Don't cap - keep full value\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 startMin, \n endMin, \n rawUsage, \n timeLabel,\n usage: 0, // Will be set in Pass 2\n isBackfilled: false,\n backfilledFromIndex: -1 // Track source block for backfill\n };\n });\n\n // Pass 2: Apply backfill algorithm\n let backlog = 0;\n let totalBackfilled = 0;\n \n for (let i = 0; i < blockData.length; i++) {\n const block = blockData[i];\n \n if (block.rawUsage <= 10) {\n // Normal case: usage fits in block\n block.usage = block.rawUsage;\n } else {\n // Overflow case: fill current block with 10 min, add overflow to backlog\n block.usage = 10;\n const overflow = block.rawUsage - 10;\n backlog += overflow;\n }\n \n // Distribute backlog backwards into empty/partial 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.usage;\n \n if (availableSpace > 0) {\n const toBackfill = Math.min(remainingBacklog, availableSpace);\n prevBlock.usage += toBackfill;\n prevBlock.isBackfilled = true;\n prevBlock.backfilledFromIndex = i; // Track which block caused this backfill\n remainingBacklog -= toBackfill;\n totalBackfilled += toBackfill;\n }\n }\n \n backlog = remainingBacklog;\n }\n }\n\n // Generate HTML\n const blocksHtml = blockData.map(block => {\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 const isFilled = block.usage > 0.5; // Threshold for visual display\n const className = isFilled ? \"square filled\" : \"square\";\n \n // Build tooltip with backfill information\n let titleText = `${block.timeLabel} - ${block.usage.toFixed(1)} min`;\n let infoAttr = \"\";\n \n if (block.rawUsage > 10) {\n titleText += ` (overflow from ${block.rawUsage.toFixed(1)} min)`;\n infoAttr = \"Overflow\";\n } else if (block.isBackfilled && block.rawUsage === 0) {\n // Pure backfill - show source block time\n if (block.backfilledFromIndex >= 0) {\n const sourceBlock = blockData[block.backfilledFromIndex];\n const sourceTime = formatTime(sourceBlock.startMin);\n titleText += ` (Backfilled from ${sourceTime})`;\n infoAttr = `Backfilled from ${sourceTime}`;\n } else {\n titleText += ` (backfilled)`;\n infoAttr = \"Backfilled\";\n }\n } else if (block.isBackfilled && block.rawUsage > 0) {\n // Mixed - show both direct and backfilled with source\n if (block.backfilledFromIndex >= 0) {\n const sourceBlock = blockData[block.backfilledFromIndex];\n const sourceTime = formatTime(sourceBlock.startMin);\n titleText += ` (${block.rawUsage.toFixed(1)} direct + ${(block.usage - block.rawUsage).toFixed(1)} from ${sourceTime})`;\n infoAttr = `Mixed (from ${sourceTime})`;\n } else {\n titleText += ` (${block.rawUsage.toFixed(1)} direct + ${(block.usage - block.rawUsage).toFixed(1)} backfilled)`;\n infoAttr = \"Mixed\";\n }\n }\n \n return `

`;\n }).join(\"\");\n\n // Calculate stats\n const activeBlocks = blockData.filter(b => b.usage > 0.5).length;\n const totalUsage = blockData.reduce((sum, b) => sum + b.usage, 0);\n\n return {\n html: blocksHtml,\n stats: {\n visibleBlocksCount: activeBlocks,\n totalCalculated: totalUsage,\n backfilledUsage: totalBackfilled\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",[],[198,469],"bfc31112-c696-11f0-831e-42dde27851f2","block-count-test.ts","bdfa0f8e-c696-11f0-96ca-42dde27851f2",323,["D",1763701121300],"import { getLatestRecord, getRecordsByDateRange } from \"./clearspace-data-queries.ts\";\n\n// Simple test to verify block count matches expected value\nexport default async function (req: Request): Promise {\n const record = await getLatestRecord();\n const totalMinutes = record?.total_screen_time || 0;\n const expectedBlocks = Math.ceil(totalMinutes / 10);\n \n // Get timeline data using the same logic as main page\n const targetDate = record?.local_date || new Date().toISOString().split('T')[0];\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n \n if (!dayRecords.length) {\n return new Response(\"No records found\", { status: 404 });\n }\n\n // Sort by timestamp ascending\n const sorted = [...dayRecords].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n const offset = sorted[0].utc_offset_minutes ?? 0;\n\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 const getValueAt = (m: number) => {\n if (points.length === 0) return 0;\n const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) return points[points.length - 1].value;\n if (idx === 0) {\n const p = points[0];\n if (p.minute === m) return p.value;\n return (m / p.minute) * p.value;\n }\n\n const p1 = points[idx - 1];\n const p2 = points[idx];\n if (p2.minute === p1.minute) return p1.value;\n \n const ratio = (m - p1.minute) / (p2.minute - p1.minute);\n return p1.value + (p2.value - p1.value) * ratio;\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 const targetTotal = Math.max(0, totalRecorded - before7am - after1140pm);\n const targetBlocks = Math.ceil(targetTotal / 10);\n\n // Initialize blocks\n const blockData = Array.from({ length: 100 }, (_, i) => {\n const startMin = 420 + i * 10;\n const endMin = startMin + 10;\n const startVal = getValueAt(startMin);\n const endVal = getValueAt(endMin);\n const rawUsage = Math.max(0, endVal - startVal);\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 rawUsage,\n timeLabel,\n finalUsage: 0,\n isBackfilled: false\n };\n });\n\n // Apply NEW algorithm: Fill blocks completely to hit exact target\n let remainingMinutes = targetTotal;\n let blocksToFill = Math.min(targetBlocks, 100);\n \n // Prioritize blocks with actual raw usage first, then by time order\n const blocksByPriority = [...blockData].sort((a, b) => {\n if (a.rawUsage > 0 && b.rawUsage === 0) return -1;\n if (b.rawUsage > 0 && a.rawUsage === 0) return 1;\n if (a.rawUsage !== b.rawUsage) return b.rawUsage - a.rawUsage;\n return a.index - b.index;\n });\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 if (block.rawUsage === 0) {\n block.isBackfilled = true;\n }\n }\n\n // Count actual active blocks\n const actualActiveBlocks = blockData.filter(b => b.finalUsage > 0.01).length;\n const actualTotal = blockData.reduce((sum, b) => sum + b.finalUsage, 0);\n \n const success = actualActiveBlocks === expectedBlocks && Math.abs(actualTotal - targetTotal) < 0.01;\n\n const html = `\n\n\n \n Block Count Test\n \n\n\n

Block Count Verification

\n \n

${success ? '✅ TEST PASSED' : '❌ TEST FAILED'}

${success ? 'Block count and total minutes are correct!' : 'Block count or total minutes are incorrect.'}

\n\n

Results

\n Total Screen Time:\n ${totalRecorded} min\n

\n Expected Blocks (${totalRecorded}÷10):\n ${expectedBlocks} blocks\n

\n Actual Active Blocks:\n ${actualActiveBlocks} blocks\n

\n Target Total in Grid:\n ${targetTotal.toFixed(1)} min\n

\n Actual Total in Grid:\n ${actualTotal.toFixed(1)} min\n

\n Backfilled Blocks:\n ${blockData.filter(b => b.isBackfilled).length} blocks\n

\n Remaining Minutes:\n ${remainingMinutes.toFixed(3)} min\n

\n\n

Algorithm Summary

Strategy: Fill exactly ${targetBlocks} blocks with ${targetTotal} minutes total

Priority: Blocks with raw usage first, then chronological order

Result: ${success ? 'Perfect match!' : 'Needs adjustment'}

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[198,478],"b9feea64-c694-11f0-a44b-42dde27851f2","backfill-demo.ts","b815364a-c694-11f0-9e37-42dde27851f2",308,["D",1763700252631],"// Demo endpoint to show backfill algorithm in action\nexport default async function (req: Request): Promise {\n // Create sample data that demonstrates overflow scenarios\n const sampleData = [\n { minute: 420, value: 0 }, // 7:00 AM - 0 minutes\n { minute: 430, value: 0 }, // 7:10 AM - 0 minutes \n { minute: 440, value: 0 }, // 7:20 AM - 0 minutes\n { minute: 450, value: 0 }, // 7:30 AM - 0 minutes\n { minute: 460, value: 0 }, // 7:40 AM - 0 minutes\n { minute: 470, value: 0 }, // 7:50 AM - 0 minutes\n { minute: 480, value: 0 }, // 8:00 AM - 0 minutes\n { minute: 490, value: 0 }, // 8:10 AM - 0 minutes\n { minute: 500, value: 0 }, // 8:20 AM - 0 minutes\n { minute: 510, value: 100 }, // 8:30 AM - 100 minutes (OVERFLOW!)\n { minute: 520, value: 105 }, // 8:40 AM - 105 minutes\n { minute: 530, value: 110 }, // 8:50 AM - 110 minutes\n ];\n\n // Helper to interpolate value at any minute\n const getValueAt = (m: number) => {\n if (sampleData.length === 0) return 0;\n const idx = sampleData.findIndex(p => p.minute >= m);\n \n if (idx === -1) {\n return sampleData[sampleData.length - 1].value;\n }\n if (idx === 0) {\n const p = sampleData[0];\n if (p.minute === m) return p.value;\n return (m / p.minute) * p.value;\n }\n\n const p1 = sampleData[idx - 1];\n const p2 = sampleData[idx];\n if (p2.minute === p1.minute) return p1.value;\n \n const ratio = (m - p1.minute) / (p2.minute - p1.minute);\n return p1.value + (p2.value - p1.value) * ratio;\n };\n\n // Process first 20 blocks (7:00 AM - 10:20 AM) to show the algorithm\n const blockData = Array.from({ length: 20 }, (_, 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,\n isBackfilled: false\n };\n });\n\n // Apply backfill algorithm\n let backlog = 0;\n let totalBackfilled = 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 block.finalUsage = rawUsage;\n } else {\n // Overflow case\n block.finalUsage = 10;\n const overflow = rawUsage - 10;\n backlog += overflow;\n }\n \n // Distribute backlog to previous empty blocks\n if (backlog > 0) {\n let remainingBacklog = backlog;\n \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 if (prevBlock.rawUsage === 0) {\n prevBlock.isBackfilled = true;\n }\n remainingBacklog -= toBackfill;\n totalBackfilled += toBackfill;\n }\n }\n \n backlog = remainingBacklog;\n }\n }\n\n // Generate HTML table showing the results\n const tableRows = blockData.map(block => {\n const bgColor = block.finalUsage > 0.05 ? '#fca5a5' : '#f3f4f6';\n const textColor = block.isBackfilled ? '#3b82f6' : '#111827';\n const fontWeight = block.isBackfilled ? 'bold' : 'normal';\n \n return `\n \n ${block.timeLabel}\n ${block.rawUsage.toFixed(1)}\n ${block.finalUsage.toFixed(1)}\n ${block.isBackfilled ? 'Yes' : 'No'}\n \n `;\n }).join('');\n\n const html = `\n\n\n \n \n Backfill Algorithm Demo\n \n\n\n

Backfill Algorithm Demo

\n \n

Scenario:

At 8:30 AM, the cron job reports 100 minutes of screen time, but the previous reading at 8:20 AM was 0 minutes. This means 100 minutes of usage appeared in a 10-minute window - an overflow situation.

Solution: Instead of clamping to 10 minutes and losing 90 minutes, we backfill the previous empty blocks (7:00-8:20 AM) to distribute the usage.

\n\n \n \n \n \n \n \n \n \n \n \n ${tableRows}\n \n

Time Block	Raw Usage (min)	Final Usage (min)	Backfilled?

\n\n

${totalBackfilled.toFixed(1)}

Minutes Backfilled

${backlog.toFixed(1)}

Remaining Overflow

${blockData.filter(b => b.isBackfilled).length}

Blocks Backfilled

${blockData.filter(b => b.finalUsage > 0.05).length}

Total Active Blocks

\n\n

Result:

✅ Volume preserved: All 100 minutes are represented in the grid

✅ Timeline approximated: Usage is distributed backwards from the sync point

✅ Visual clarity: No single \"exploded\" block with impossible usage

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[198,486],"14f2135a-c696-11f0-b2b7-42dde27851f2","accuracy-test.ts",319,["D",1763700834719],"import { getLatestRecord, getRecordsByDateRange, ScreenTimeRecord } from \"./clearspace-data-queries.ts\";\n\n// Test endpoint to verify the algorithm hits exact screen time targets\nexport default async function (req: Request): Promise {\n const record = await getLatestRecord();\n const totalMinutes = record?.total_screen_time || 0;\n \n // Get timeline data\n const targetDate = record?.local_date || new Date().toISOString().split('T')[0];\n const dayRecords = await getRecordsByDateRange(targetDate, targetDate);\n \n if (!dayRecords.length) {\n return new Response(\"No records found\", { status: 404 });\n }\n\n // Sort by timestamp ascending\n const sorted = [...dayRecords].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\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 const idx = points.findIndex(p => p.minute >= m);\n \n if (idx === -1) {\n return points[points.length - 1].value;\n }\n if (idx === 0) {\n const p = points[0];\n if (p.minute === m) return p.value;\n return (m / p.minute) * p.value;\n }\n\n const p1 = points[idx - 1];\n const p2 = points[idx];\n if (p2.minute === p1.minute) return p1.value;\n \n const ratio = (m - p1.minute) / (p2.minute - p1.minute);\n return p1.value + (p2.value - p1.value) * ratio;\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 // Calculate what should be in the grid\n const expectedInGrid = Math.max(0, totalRecorded - before7am - after1140pm);\n\n // Run the algorithm\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,\n isBackfilled: false\n };\n });\n\n // Apply backfill algorithm\n let backlog = 0;\n let backfilledUsage = 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 block.finalUsage = rawUsage;\n } else {\n block.finalUsage = 10;\n const overflow = rawUsage - 10;\n backlog += overflow;\n }\n \n if (backlog > 0) {\n let remainingBacklog = backlog;\n \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 if (prevBlock.rawUsage === 0) {\n prevBlock.isBackfilled = true;\n }\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\n const currentTotal = blockData.reduce((sum, block) => sum + block.finalUsage, 0);\n const targetTotal = expectedInGrid;\n const adjustment = targetTotal - currentTotal;\n\n if (Math.abs(adjustment) > 0.01) {\n const activeBlocks = blockData.filter(b => b.finalUsage > 0);\n \n if (activeBlocks.length > 0) {\n const adjustmentPerBlock = adjustment / activeBlocks.length;\n \n for (const block of activeBlocks) {\n const newUsage = Math.max(0, Math.min(10, block.finalUsage + adjustmentPerBlock));\n block.finalUsage = newUsage;\n }\n \n // Fine-tune to hit exact target\n const finalTotal = blockData.reduce((sum, block) => sum + block.finalUsage, 0);\n const finalAdjustment = targetTotal - finalTotal;\n \n if (Math.abs(finalAdjustment) > 0.01 && activeBlocks.length > 0) {\n for (const block of activeBlocks) {\n const maxAdjustment = finalAdjustment > 0 ? (10 - block.finalUsage) : -block.finalUsage;\n const actualAdjustment = Math.sign(finalAdjustment) * Math.min(Math.abs(finalAdjustment), Math.abs(maxAdjustment));\n \n if (Math.abs(actualAdjustment) > 0.01) {\n block.finalUsage += actualAdjustment;\n break;\n }\n }\n }\n }\n }\n\n // Final calculations\n const finalTotal = blockData.reduce((sum, block) => sum + block.finalUsage, 0);\n const activeBlocks = blockData.filter(b => b.finalUsage > 0.01).length;\n const accuracy = Math.abs(finalTotal - expectedInGrid) < 0.01;\n\n const html = `\n\n\n \n Accuracy Test Results\n \n\n\n

Screen Time Accuracy Test

\n \n

${accuracy ? '✅ ACCURACY TEST PASSED' : '❌ ACCURACY TEST FAILED'}

Algorithm ${accuracy ? 'successfully hits' : 'failed to hit'} the exact screen time target.

\n\n

Key Metrics

\n \n \n \n \n \n \n \n \n \n \n

Metric	Value	Notes
Total Reported Screen Time	${totalRecorded} min	From latest record
Before 7:00 AM	${before7am.toFixed(1)} min	Outside grid window
After 11:40 PM	${after1140pm.toFixed(1)} min	Outside grid window
Expected in Grid	${expectedInGrid.toFixed(1)} min	Target for algorithm
Actual in Grid	${finalTotal.toFixed(1)} min	Algorithm result
Difference	${(finalTotal - expectedInGrid).toFixed(3)} min	${Math.abs(finalTotal - expectedInGrid) < 0.01 ? '✅ Perfect' : '⚠️ Off target'}
Active Blocks	${activeBlocks}	Blocks with >0.01 min usage
Adjustment Applied	${adjustment.toFixed(3)} min	Correction for accuracy

\n\n

Breakdown

\n Total Screen Time:\n ${totalRecorded} min\n

\n - Before 7:00 AM:\n -${before7am.toFixed(1)} min\n

\n - After 11:40 PM:\n -${after1140pm.toFixed(1)} min\n

\n = Should be in Grid:\n ${expectedInGrid.toFixed(1)} min\n

\n = Actually in Grid:\n ${finalTotal.toFixed(1)} min\n

\n\n

Algorithm Status

Accuracy: ${accuracy ? 'Perfect (±0.01 min)' : `Off by ${Math.abs(finalTotal - expectedInGrid).toFixed(3)} min`}

Grid Utilization: ${activeBlocks}/100 blocks active

Backfilled Usage: ${backfilledUsage.toFixed(1)} min

Remaining Overflow: ${backlog.toFixed(1)} min

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[198,494],"342809ae-cd4f-11f0-a191-42dde27851f2","BACKFILL_ALGORITHM.md","cc10d186-c694-11f0-8fc1-42dde27851f2",349,["D",1764440050903],"# Backfill Algorithm Implementation\n\n## Problem Statement\n\nthe timeline and volume grids were not fully capturing the amount of screentime in the data to **overflow** situations. This occurred when the cron job (running every 10 minutes) reported screen time increases greater than 10 minutes in a single interval.\n\n### Example Scenario\n- Record at 9:55 AM: 0 minutes\n- Record at 10:00 AM: 100 minutes\n- **Problem**: 100 minutes appeared in a 5-minute gap\n- **Old behavior**: Clamp to 10 minutes, lose 90 minutes to \"Artifacts\"\n- **New behavior**: Distribute 100 minutes backwards into empty blocks\n\n## Solution: Backfill Algorithm\n\n### Algorithm Steps\n\n1. **Iterate through time blocks sequentially** (7:00 AM - 11:40 PM, 100 blocks of 10 minutes each)\n\n2. **Calculate raw usage** for each block based on cumulative screen time data\n\n3. **Handle overflow**:\n - If usage ≤ 10 minutes: Use actual usage\n - If usage > 10 minutes: \n - Fill current block with 10 minutes\n - Add remainder to backlog\n\n4. **Backfill process**:\n - When backlog exists, work backwards from current block\n - Fill previous empty blocks until backlog is exhausted\n - Each block can hold maximum 10 minutes\n\n\n### Implementation Details\n\n```typescript\n// Three-pass algorithm:\n// 1. Calculate raw usage for each block\n// 2. Apply backfill algorithm with backlog management\n// 3. Generate HTML and calculate statistics\n\n// Acceptance Criteria: \n// 1. the screen time total from the data should match the corresponding amount of blocks \n// 2. backfilled screen time blocks should start from the overfilled block, and overfill in a continuous manner from that block for the overfilled amount\n```\n\n### Key Features\n\n- **Volume Preservation**: All screen time minutes are represented in the grid\n- **Timeline Approximation**: Usage is distributed backwards from sync points\n- **Visual Clarity**: No single \"exploded\" blocks with impossible usage\n- **Grid Synchronization**: Volume and timeline grids always show same number of active blocks\n- **Enhanced Tooltips**: Show backfilled vs. direct usage\n- **Statistics Tracking**: New \"Backfilled\" metric in blue\n\n## Results\n\n### Before (Clamping)\n- ❌ Lost minutes to \"Artifacts/Bursts\"\n- ❌ Timeline grid didn't match volume grid\n- ❌ Poor visual representation of actual usage\n\n### After (Backfill)\n- ✅ **Volume**: Total red blocks match total screen time\n- ✅ **Timeline**: Better approximation of when usage occurred\n- ✅ **Synchronization**: Both grids show identical number of active blocks\n- ✅ **Statistics**: Clear breakdown of backfilled vs. direct usage\n- ✅ **Tooltips**: Enhanced information about block contents\n\n",[],[198,501],["D",1762714402899],[228,229,230,231,232,233,234,235,236,237,238,239,240,241],[198],"476ff6b0-c274-11f0-9f81-42dde27851f2","snooze-utils.ts","d2509ef2-c273-11f0-9bd8-42dde27851f2",160,["D",1763246511892],"import { blob } from \"https://esm.town/v/std/blob\";\n\nconst SNOOZE_KEY = \"snoozed_today\";\n\nexport async function getSnoozedToday(): Promise {\n try {\n const snoozed = await blob.getJSON(SNOOZE_KEY);\n return snoozed === true;\n } catch (error) {\n // If key doesn't exist, default to false\n return false;\n }\n}\n\nexport async function setSnoozedToday(snoozed: boolean): Promise {\n await blob.setJSON(SNOOZE_KEY, snoozed);\n}\n\n/**\n * Helper function to check if emails should be sent today.\n * Returns true if emails should be sent, false if they're snoozed.\n */\nexport async function shouldSendEmails(): Promise {\n const snoozed = await getSnoozedToday();\n return !snoozed;\n}",[],[204,512],"10506c62-c28f-11f0-96c7-42dde27851f2","reset-snooze-cron.ts","e4b40e9e-c273-11f0-9fc4-42dde27851f2",214,["D",1763258015818],"// NOTE: val town defaults to UTC time, which is why this cron is scheduled for 9am (that's 1am in PT)\n\nimport { setSnoozedToday } from \"./snooze-utils.ts\";\n\nexport default async function () {\n try {\n // Reset snooze status to false at midnight PT\n await setSnoozedToday(false);\n console.log(\n `[${new Date().toISOString()}] Successfully reset snooze status to false`,\n );\n } catch (error) {\n console.error(\n `[${new Date().toISOString()}] Failed to reset snooze status:`,\n error,\n );\n throw error;\n }\n}",[],[204,520],"15fafa8c-c277-11f0-962f-42dde27851f2","panhandle-stations-data.ts","f3860cbc-bda8-11f0-b0ec-42dde27851f2",197,["D",1763247717402],27,"import getBayWheelsData from \"./bay-wheels-data.ts\";\n\n/**\n * Filters the merged GBFS station data for specific stations.\n * @param {Array} mergedData - Array of station objects (merged info + status).\n * @returns {Array} Filtered station data.\n */\nexport default async function getPanhandleStationsData() {\n // Define the target stations\n const TARGET_STATIONS = [\n { name: \"Broderick at Oak\", short_name: \"SF-K18\" },\n { name: \"Grove at Divisadero\", short_name: \"SF-J18\" },\n { name: \"Page at Scott\", short_name: \"SF-K19\" },\n { name: \"Pierce at Haight\", short_name: \"SF-K20\" },\n ];\n\n const mergedData = await getBayWheelsData();\n\n const panhandleData = mergedData.filter((station) =>\n TARGET_STATIONS.some((target) =>\n station.short_name === target.short_name ||\n (station.name && station.name.toLowerCase() === target.name.toLowerCase())\n )\n );\n console.log(panhandleData);\n\n return panhandleData;\n}",[],[204,528],"e181ed9e-ec3b-11f0-9ac0-42dde27851f2","bay-wheels-data.ts","5e1f5898-bda5-11f0-ade4-42dde27851f2",384,["D",1767840237900],22,"export default async function getBayWheelsData() {\n // Bay Wheels GBFS feed URLs\n const STATION_INFO_URL =\n \"https://gbfs.baywheels.com/gbfs/2.3/en/station_information.json\";\n const STATION_STATUS_URL =\n \"https://gbfs.baywheels.com/gbfs/2.3/en/station_status.json\";\n\n // Fetch both feeds concurrently\n const [infoRes, statusRes] = await Promise.all([\n fetch(STATION_INFO_URL),\n fetch(STATION_STATUS_URL),\n ]);\n\n const infoJson = await infoRes.json();\n const statusJson = await statusRes.json();\n\n type StationInfo = {\n name: string;\n short_name: string | null;\n address: string | null;\n capacity: number | null;\n };\n\n // Build a map of static station info keyed by station_id\n const infoMap = new Map(\n infoJson.data.stations.map((s: any) => [\n s.station_id,\n {\n name: s.name,\n short_name: s.short_name ?? null,\n address: s.address ?? null,\n capacity: s.capacity ?? null,\n },\n ]),\n );\n\n // Merge dynamic status data with static info\n const merged = statusJson.data.stations.map((s: any) => {\n const info =\n infoMap.get(s.station_id) ?? {\n name: \"\",\n short_name: null,\n address: null,\n capacity: null,\n };\n\n // Ensure vehicle_types_available is an array\n const vehicleTypes = Array.isArray(s.vehicle_types_available)\n ? s.vehicle_types_available.map((v: any) => ({\n vehicle_type_id: v.vehicle_type_id,\n count: v.count ?? 0,\n }))\n : [];\n\n const totalVehicleCount = vehicleTypes.reduce(\n (sum: number, v: any) => sum + v.count,\n 0,\n );\n\n return {\n station_id: s.station_id,\n name: info.name,\n short_name: info.short_name,\n address: info.address,\n capacity: info.capacity,\n vehicle_available_count: totalVehicleCount,\n vehicle_types_available: vehicleTypes,\n num_docks_available: s.num_docks_available ?? null,\n num_vehicles_disabled: s.num_vehicles_disabled ?? 0,\n num_docks_disabled: s.num_docks_disabled ?? 0,\n };\n });\n\n return merged;\n}",[],[204,537],"dff8d7e8-c28e-11f0-afc0-42dde27851f2","bay-wheels-cron.ts","2bc6947c-bda7-11f0-8fbf-42dde27851f2",213,["D",1763257934718],78,"// Learn more: https://docs.val.town/vals/cron/\n// NOTE: val town defaults to UTC time, which is why this cron is scheduled for 11pm - 11:9pm (that's 3pm in PT)\nimport getPanhandleStationsData from \"./panhandle-stations-data.ts\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport { shouldSendEmails } from \"./snooze-utils.ts\";\n\nexport default async function (interval: Interval) {\n if (await shouldSendEmails()) {\n const dash_url =\n \"https://shapedlines--0719891aac5711f083300224a6c84d84.web.val.run/\";\n\n const panhandle_stations = await getPanhandleStationsData();\n\n // check status of Oak and Broderick station\n const oak_broderick = panhandle_stations.find((s) =>\n s.station_id === \"b1a957d2-5e0e-4a99-bca3-7f3db21d30eb\"\n );\n\n const oak_broderick_bikes = oak_broderick.vehicle_available_count;\n\n // send email if bikes < 4\n if (oak_broderick_bikes <= 3) {\n let subject = `${oak_broderick_bikes} bikes left at Oak/Broderick`;\n let text =\n `There are ${oak_broderick_bikes} bikes left at Oak/Broderick. To see other bikes or snooze: ${dash_url}`;\n\n await email({\n to: \"shapedlines@gmail.com\",\n subject: subject,\n text: text,\n });\n } else {\n console.log(`>3 bikes left at Oak/Broderick (${oak_broderick_bikes})`);\n }\n } else {\n console.log(\"Emails are snoozed for today\");\n }\n}",[],[204,546],["D",1762717832823],[222,223,224,225,226],[204],["D",1760815022948],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":49},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":594,"_595":596,"_597":598,"_599":49,"_600":49,"_601":49,"_602":25,"_603":-5,"_604":-7,"_605":-7,"_606":62,"_607":49,"_608":49,"_609":-5,"_610":49,"_611":49,"_612":49,"_613":-5},"ENV",{"_565":566,"_567":568,"_569":86,"_570":571,"_572":573,"_574":575,"_576":577,"_578":579,"_580":581,"_582":583,"_584":585,"_586":587,"_588":589,"_590":591,"_592":593},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v400