\n {label}\n {showValue && {formatMinutes(value)}}\n

\n \n

\n );\n}\n\ninterface CircularProgressProps {\n percentage: number;\n size: number;\n strokeWidth: number;\n color: string;\n backgroundColor?: string;\n children?: React.ReactNode;\n}\n\nfunction CircularProgress({ \n percentage, \n size, \n strokeWidth, \n color, \n backgroundColor = \"#e5e7eb\",\n children \n}: CircularProgressProps) {\n const radius = (size - strokeWidth) / 2;\n const circumference = radius * 2 * Math.PI;\n const strokeDasharray = circumference;\n const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n return (\n

\n \n

\n {children}\n

\n );\n}\n\ninterface TimeBankVisualizerProps {\n savedMinutes: number;\n maxDisplay?: number;\n}\n\nfunction TimeBankVisualizer({ savedMinutes, maxDisplay = 120 }: TimeBankVisualizerProps) {\n const coins = Math.min(Math.floor(savedMinutes / 5), 12); // Each coin represents 5 minutes, max 12 coins\n const remainder = savedMinutes % 5;\n \n return (\n

💰 Time Bank

\n {Array.from({ length: coins }).map((_, i) => (\n \n 💎\n

\n ))}\n {remainder > 0 && (\n \n ⏱️\n

\n )}\n {savedMinutes === 0 && (\n

No time banked yet

\n )}\n \n

\n {savedMinutes > 0 ? formatMinutes(savedMinutes) : \"Start working to earn break time!\"}\n

\n \n );\n}\n\ninterface NotificationProps {\n message: string;\n type: \"success\" | \"info\" | \"warning\";\n onClose: () => void;\n}\n\nfunction Notification({ message, type, onClose }: NotificationProps) {\n useEffect(() => {\n const timer = setTimeout(onClose, 4000);\n return () => clearTimeout(timer);\n }, [onClose]);\n\n const bgColor = type === \"success\" ? \"bg-green-500\" : type === \"warning\" ? \"bg-yellow-500\" : \"bg-blue-500\";\n\n return (\n

\n {message}\n \n

\n );\n}\n\nfunction ThirdTimeApp() {\n const [state, setState] = useState({\n mode: \"idle\",\n workStartTime: null,\n breakStartTime: null,\n savedBreakMinutes: 0,\n breakFraction: 1 / 3,\n totalWorkTime: 0,\n totalBreakTime: 0,\n });\n\n const [currentTime, setCurrentTime] = useState(Date.now());\n const [notification, setNotification] = useState<{ message: string; type: \"success\" | \"info\" | \"warning\" } | null>(\n null,\n );\n\n // Update current time every second\n useEffect(() => {\n const interval = setInterval(() => setCurrentTime(Date.now()), 1000);\n return () => clearInterval(interval);\n }, []);\n\n const showNotification = useCallback((message: string, type: \"success\" | \"info\" | \"warning\" = \"info\") => {\n setNotification({ message, type });\n }, []);\n\n const startWork = useCallback(() => {\n const now = Date.now();\n setState(prev => ({\n ...prev,\n mode: \"working\",\n workStartTime: now,\n breakStartTime: null,\n }));\n setCurrentTime(now); // Sync current time to prevent negative calculation\n showNotification(\"Work session started! Focus time 🎯\", \"success\");\n }, [showNotification]);\n\n const takeBreak = useCallback(() => {\n if (!state.workStartTime) return;\n\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60; // minutes\n const earnedBreakTime = workDuration * state.breakFraction;\n const totalAvailableBreak = state.savedBreakMinutes + earnedBreakTime;\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: totalAvailableBreak,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n\n showNotification(`Break earned! You have ${formatMinutes(totalAvailableBreak)} available 🎉`, \"success\");\n }, [state.workStartTime, state.breakFraction, state.savedBreakMinutes, showNotification]);\n\n const resumeWork = useCallback(() => {\n if (!state.breakStartTime) return;\n\n const now = Date.now();\n const breakDuration = (now - state.breakStartTime) / 1000 / 60; // minutes\n const remainingBreakTime = Math.max(0, state.savedBreakMinutes - breakDuration);\n\n setState(prev => ({\n ...prev,\n mode: \"working\",\n workStartTime: now,\n breakStartTime: null,\n savedBreakMinutes: remainingBreakTime,\n totalBreakTime: prev.totalBreakTime + Math.min(breakDuration, prev.savedBreakMinutes),\n }));\n setCurrentTime(now); // Sync current time to prevent negative calculation\n\n if (remainingBreakTime > 0) {\n showNotification(`${formatMinutes(remainingBreakTime)} break time saved for later 💾`, \"info\");\n }\n showNotification(\"Back to work! Stay focused 💪\", \"success\");\n }, [state.breakStartTime, state.savedBreakMinutes, showNotification]);\n\n const handleInterruption = useCallback(() => {\n if (state.mode === \"working\" && state.workStartTime) {\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60;\n const earnedBreakTime = workDuration * state.breakFraction;\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: prev.savedBreakMinutes + earnedBreakTime,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n\n showNotification(\"Interruption break started automatically ⏸️\", \"warning\");\n }\n }, [state.mode, state.workStartTime, state.breakFraction, showNotification]);\n\n const takeBigBreak = useCallback(() => {\n if (state.mode === \"working\" && state.workStartTime) {\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60;\n setState(prev => ({\n ...prev,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n }\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: 0, // Big breaks consume all saved time\n }));\n\n showNotification(\"Big break started (meal time) 🍽️\", \"info\");\n }, [state.mode, state.workStartTime, showNotification]);\n\n const resetSession = useCallback(() => {\n setState({\n mode: \"idle\",\n workStartTime: null,\n breakStartTime: null,\n savedBreakMinutes: 0,\n breakFraction: state.breakFraction,\n totalWorkTime: 0,\n totalBreakTime: 0,\n });\n showNotification(\"Session reset 🔄\", \"info\");\n }, [state.breakFraction, showNotification]);\n\n // Calculate current session time\n const getCurrentSessionTime = () => {\n if (state.mode === \"working\" && state.workStartTime) {\n return Math.max(0, Math.floor((currentTime - state.workStartTime) / 1000));\n }\n if (state.mode === \"breaking\" && state.breakStartTime) {\n return Math.max(0, Math.floor((currentTime - state.breakStartTime) / 1000));\n }\n return 0;\n };\n\n // Calculate session stats\n const getSessionStats = (): SessionStats => {\n let workTime = state.totalWorkTime;\n let breakTime = state.totalBreakTime;\n\n if (state.mode === \"working\" && state.workStartTime) {\n workTime += (currentTime - state.workStartTime) / 1000 / 60;\n }\n if (state.mode === \"breaking\" && state.breakStartTime) {\n const currentBreakTime = (currentTime - state.breakStartTime) / 1000 / 60;\n breakTime += Math.min(currentBreakTime, state.savedBreakMinutes);\n }\n\n const totalTime = workTime + breakTime;\n const efficiency = totalTime > 0 ? (workTime / totalTime) * 100 : 0;\n\n return { workTime, breakTime, efficiency };\n };\n\n const stats = getSessionStats();\n const currentSessionTime = getCurrentSessionTime();\n\n return (\n

\n {notification && (\n setNotification(null)}\n />\n )}\n\n

Third Time

Work flexibly, break proportionally

\n\n {/* Main Timer Display */}\n

\n {state.mode === \"working\" ? (\n \n

\n {formatTime(currentSessionTime)}\n

🎯 Working

\n \n ) : state.mode === \"breaking\" ? (\n 0 ? Math.min(((currentSessionTime / 60) / state.savedBreakMinutes) * 100, 100) : 0}\n size={200}\n strokeWidth={8}\n color=\"#3b82f6\"\n >\n

\n {formatTime(currentSessionTime)}\n

☕ Breaking

\n \n ) : (\n

\n {formatTime(currentSessionTime)}\n

Ready to start

\n )}\n

\n\n {state.savedBreakMinutes > 0 && (\n

\n \n

\n )}\n\n {/* Action Buttons */}\n

\n {state.mode === \"idle\" && (\n \n Start Working\n \n )}\n\n {state.mode === \"working\" && (\n

\n \n Take Break\n \n

\n \n Interruption\n \n \n Big Break\n \n

\n )}\n\n {state.mode === \"breaking\" && (\n \n Resume Work\n \n )}\n

\n\n {/* Break Fraction Settings */}\n

Break Fraction Settings

\n \n {/* Visual representation of current fraction */}\n

Current ratio: Work vs Break time

\n Work\n

\n Break\n

\n For every hour worked, earn {Math.round(state.breakFraction * 60)} minutes of break time\n

\n\n

\n {BREAK_FRACTIONS.map((fraction) => (\n setState(prev => ({ ...prev, breakFraction: fraction.value }))}\n className={`p-3 rounded-lg text-sm font-medium transition-all duration-200 ${\n state.breakFraction === fraction.value\n ? \"bg-blue-500 text-white shadow-lg transform scale-105\"\n : \"bg-gray-100 hover:bg-gray-200 text-gray-700 hover:scale-102\"\n }`}\n title={fraction.description}\n >\n

{fraction.label}

{Math.round(fraction.value * 60)}min/h

\n \n ))}\n

\n \n {BREAK_FRACTIONS.find(f => f.value === state.breakFraction)?.description}\n \n

\n\n {/* Session Stats */}\n

Session Overview

\n \n {/* Visual Progress Bars */}\n

\n \n \n

\n\n {/* Efficiency Meter */}\n

\n = 75 ? \"#10b981\" : stats.efficiency >= 60 ? \"#f59e0b\" : \"#ef4444\"}\n >\n

{Math.round(stats.efficiency)}%

Efficiency

\n \n

\n\n {/* Stats Grid */}\n

{formatMinutes(stats.workTime)}

Work Time

\n {Math.round((stats.workTime / Math.max(stats.workTime + stats.breakTime, 1)) * 100)}% of session\n

{formatMinutes(stats.breakTime)}

Break Time

\n {Math.round((stats.breakTime / Math.max(stats.workTime + stats.breakTime, 1)) * 100)}% of session\n

{formatMinutes(stats.workTime + stats.breakTime)}

Total Time

\n {Math.round((stats.workTime + stats.breakTime) / 60 * 10) / 10}h session\n

\n\n {/* Work/Break Ratio Visualization */}\n {(stats.workTime > 0 || stats.breakTime > 0) && (\n

Work/Break Ratio

\n Work: {Math.round((stats.workTime / (stats.workTime + stats.breakTime)) * 100)}%\n Break: {Math.round((stats.breakTime / (stats.workTime + stats.breakTime)) * 100)}%\n

\n )}\n

\n\n {/* Reset Button */}\n

\n \n Reset Session\n \n

\n\n {/* Help Text */}\n

How it works:

\n\n

• Work for any duration you choose
• Earn break time equal to work time ÷ fraction
• Unused break time is saved for later
• Use \"Interruption\" for non-work interruptions
• Use \"Big Break\" for meals (consumes saved time)
\n • See{\" \"}\n \n this LessWrong article\n {\" \"}\n for more info!\n

\n );\n}\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[122,139],"833b6d9c-3a7e-11f0-99f5-9e149126039e","index.html","9decbeb0-4450-4f2d-a912-f72b633f00eb",["D",1748297549008],"\n\n \n \n \n Third Time - Productivity Timer\n \n \n \n \n \n

\n \n \n",[],[122,146],"833b6ad6-3a7e-11f0-99f5-9e149126039e","backend","1e3f7540-4370-4d2f-bf3d-cc62766dcce9",["D",1748297549008],[158],[153],{"_36":159,"_13":160,"_62":161,"_64":154,"_66":67,"_68":69,"_70":71,"_38":162,"_17":73,"_74":163,"_76":164,"_78":51,"_79":-5,"_96":165,"_18":166},"833b62a2-3a7e-11f0-99f5-9e149126039e","index.ts","4a7bcf6a-fab0-4ddd-9ca4-2aea7ac1f4d0",["D",1748297549008],"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main app\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[153,160],"8336a582-3a7e-11f0-99f5-9e149126039e",["D",1748297549008],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","8acb974a-4b91-4d4a-b000-6f28827b7e16","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","b74060f0-0f1d-44f1-bee2-bdb9c9cf72e4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_204":-5,"_205":206,"_173":174,"_207":208,"_209":51},"branch",{"_17":109,"_13":16,"_36":67,"_42":167,"_45":37,"_46":200,"_201":53,"_202":43,"_203":57,"_58":14,"_54":12},29,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://secure.gravatar.com/avatar/109fa713caf4e083c57622b7c6dad365.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":167,"_13":14,"_38":281,"_49":-5,"_169":51,"_52":53,"_170":53,"_171":-5,"_172":-5,"_173":174,"_175":161,"_176":71,"_177":71,"_178":-5,"_179":69,"_56":180,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":186,"_187":186,"_188":189,"_190":189,"_191":189,"_192":186,"_193":186,"_194":282,"_196":283,"_198":284,"_50":51},[248,250,254,256,257,258],"files",[248,249,250,251,252,253,254,255,256,257,258],"counts",{"_239":73,"_240":69,"_241":69,"_35":242,"_243":244},[237],{"_36":81,"_13":19,"_62":65,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":82,"_17":73,"_74":83,"_76":-5,"_78":51,"_79":-5,"_18":236},"upstreamProject",{"_36":43,"_13":14,"_171":-5,"_172":-5,"_52":53,"_194":234},"upstreamBranch",{"_36":37,"_38":232,"_40":233,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1748282405481],["D",1766522557154],{"_11":55,"_210":235},"https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon",[19],{"_36":60,"_13":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_38":72,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_18":238},[19,61],"pulls","branches","forks",{"_245":73,"_247":73},"connections",{"_245":73,"_246":73},"count","unfilledCount","emptyCount",{"_36":152,"_13":153,"_62":154,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":155,"_17":73,"_74":83,"_76":-5,"_78":51,"_79":-5,"_96":279,"_18":280},{"_36":159,"_13":160,"_62":161,"_64":154,"_66":67,"_68":69,"_70":71,"_38":162,"_17":73,"_74":163,"_76":164,"_78":51,"_79":-5,"_96":277,"_18":278},{"_36":121,"_13":122,"_62":123,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":124,"_17":73,"_74":83,"_76":-5,"_78":51,"_79":-5,"_96":275,"_18":276},{"_36":145,"_13":146,"_62":147,"_64":123,"_66":67,"_68":69,"_70":71,"_38":148,"_17":73,"_74":24,"_76":149,"_78":51,"_79":-5,"_96":273,"_18":274},{"_36":138,"_13":139,"_62":140,"_64":123,"_66":67,"_68":32,"_70":71,"_38":141,"_17":133,"_74":75,"_76":142,"_78":51,"_79":-5,"_96":271,"_18":272},{"_36":130,"_13":131,"_62":132,"_64":123,"_66":67,"_68":133,"_70":71,"_38":134,"_17":69,"_74":24,"_76":135,"_78":51,"_79":-5,"_96":269,"_18":270},{"_36":81,"_13":19,"_62":65,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":114,"_17":73,"_74":83,"_76":-5,"_78":51,"_79":-5,"_96":267,"_18":268},{"_36":60,"_13":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_38":118,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_96":265,"_18":266},{"_36":106,"_13":107,"_62":108,"_64":-5,"_66":67,"_68":109,"_70":71,"_38":110,"_17":69,"_74":24,"_76":111,"_78":51,"_79":-5,"_96":263,"_18":264},{"_36":99,"_13":100,"_62":101,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":102,"_17":73,"_74":24,"_76":103,"_78":51,"_79":-5,"_96":261,"_18":262},{"_36":91,"_13":92,"_62":93,"_64":-5,"_66":67,"_68":69,"_70":71,"_38":94,"_17":73,"_74":75,"_76":95,"_78":51,"_79":-5,"_96":259,"_18":260},[],[92],[],[100],[],[107],[],[19,61],[255],[19],[],[122,131],[],[122,139],[],[122,146],[251,252,253],[122],[],[153,160],[249],[153],["D",1748297549008],{"_11":12,"_210":206},{"_11":12,"_204":-5,"_205":206,"_173":174,"_207":208,"_209":51},{"_17":109,"_13":16,"_36":67,"_42":167,"_45":37,"_46":200,"_201":53,"_202":43,"_203":57,"_58":14,"_54":12},"ctx",{"_194":-5,"_229":318,"_319":320,"_321":322,"_323":51,"_324":51,"_325":51,"_326":71,"_327":-5,"_328":-7,"_329":-7,"_330":73,"_331":51,"_332":51,"_333":-5,"_334":51,"_335":51,"_336":51,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":16,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]