\n Subscribe to Charlie's brain\n

\n {message && (\n

\n {message}\n

\n )}\n

\n );\n}\n\nfunction App() {\n const [events, setEvents] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [activeYear, setActiveYear] = useState(null);\n const [darkMode, setDarkMode] = useState(false);\n const [progress, setProgress] = useState(null);\n\n useEffect(() => {\n // Check for system dark mode preference\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n setDarkMode(mediaQuery.matches);\n \n const handleThemeChange = (e: MediaQueryListEvent) => {\n setDarkMode(e.matches);\n };\n \n mediaQuery.addEventListener('change', handleThemeChange);\n return () => mediaQuery.removeEventListener('change', handleThemeChange);\n }, []);\n\n useEffect(() => {\n loadTimelineEvents();\n }, []);\n\n const loadTimelineEvents = async () => {\n try {\n const response = await fetch('/api/timeline-events');\n \n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n \n const reader = response.body?.getReader();\n if (!reader) {\n throw new Error('No response body reader available');\n }\n \n const decoder = new TextDecoder();\n let buffer = '';\n \n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n \n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split('\\n');\n buffer = lines.pop() || '';\n \n for (const line of lines) {\n if (line.startsWith('data: ')) {\n try {\n const data = JSON.parse(line.slice(6));\n \n if (data.type === 'progress') {\n setProgress(data.progress);\n } else if (data.type === 'complete') {\n setEvents(data.events);\n setLoading(false);\n setProgress(null);\n return;\n } else if (data.type === 'error') {\n throw new Error(data.error);\n }\n } catch (parseError) {\n console.error('Error parsing SSE data:', parseError);\n }\n }\n }\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load timeline');\n setLoading(false);\n setProgress(null);\n }\n };\n\n const formatDate = (timestamp: number) => {\n return new Date(timestamp).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n };\n\n const formatYear = (timestamp: number) => {\n return new Date(timestamp).getFullYear();\n };\n\n const formatMonth = (timestamp: number) => {\n return new Date(timestamp).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long'\n });\n };\n\n const scrollToYear = (year: number) => {\n const element = document.getElementById(`year-${year}`);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n setActiveYear(year);\n }\n };\n\n const getProgressPercentage = () => {\n if (!progress || progress.total === 0) return 0;\n return Math.round((progress.current / progress.total) * 100);\n };\n\n if (loading) {\n return (\n

\n {progress ? (\n

{progress.phase.replace('-', ' ').toUpperCase()}

{progress.message}

\n {progress.current}/{progress.total} ({getProgressPercentage()}%)\n

\n ) : (\n

Loading timeline...

\n )}\n

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

Error: {error}

;\n }\n\n if (events.length === 0) {\n return

No timeline events found

;\n }\n\n // Sort events by expected date\n const sortedEvents = [...events].sort((a, b) => a.expectedDate - b.expectedDate);\n \n // Get unique years for navigation\n const years = [...new Set(sortedEvents.map(event => formatYear(event.expectedDate)))].sort();\n\n // Add today's date to events\n const today = Date.now();\n const todayEvent = {\n id: 'today',\n statement: 'Today',\n originalQuestion: 'Today',\n expectedDate: today,\n confidence: 100,\n volume: 0,\n url: '#',\n creator: '',\n emojis: '📅'\n };\n\n // Insert today into the sorted events\n const eventsWithToday = [...sortedEvents];\n let todayInserted = false;\n for (let i = 0; i < eventsWithToday.length; i++) {\n if (eventsWithToday[i].expectedDate > today) {\n eventsWithToday.splice(i, 0, todayEvent);\n todayInserted = true;\n break;\n }\n }\n if (!todayInserted) {\n eventsWithToday.push(todayEvent);\n }\n\n return (\n

\n {/* Scrollable Year Navigation */}\n

Years

\n {years.map(year => (\n scrollToYear(year)}\n >\n {year}\n \n ))}\n

\n\n

WHEN

\n A timeline of the future, based on{' '}\n \n Manifold Markets\n {' '}\n forecasts.\n

\n by{' '}\n \n Charlie\n \n

\n \n

\n\n

\n {isFirstOfYear && (\n
\n {year}\n
\n )}\n \n {isFirstOfMonth && !isFirstOfYear && (\n
\n {month}\n
\n )}\n \n
\n {/* Emojis positioned to the left of timeline for non-mobile */}\n {event.emojis && (\n
\n {event.emojis}\n
\n )}\n \n
\n \n {isTodayEvent ? 'TODAY' : formatDate(event.expectedDate)}\n {/* Emojis next to date on mobile */}\n {event.emojis && {event.emojis}}\n \n
\n \n
\n {isTodayEvent ? (\n
\n Today\n
\n ) : (\n \n \n {event.statement}\n \n \n \n )}\n
\n
\n

\n\n {/* OpenMoji attribution at bottom */}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n // Handle subscription endpoint\n if (url.pathname === '/api/subscribe' && request.method === 'POST') {\n try {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const body = await request.json();\n const email = body.email?.trim();\n \n if (!email) {\n return new Response(JSON.stringify({ error: 'Email is required' }), {\n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Simple email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(email)) {\n return new Response(JSON.stringify({ error: 'Invalid email format' }), {\n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Get existing subscribers\n let subscribers: string[] = [];\n try {\n const existingData = await blob.getJSON(\"charlie-brain-subscribers\");\n if (Array.isArray(existingData)) {\n subscribers = existingData;\n }\n } catch (error) {\n // File doesn't exist yet, that's fine\n }\n \n // Check if email already exists\n if (subscribers.includes(email.toLowerCase())) {\n return new Response(JSON.stringify({ error: 'Email already subscribed' }), {\n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Add new subscriber with timestamp\n const newSubscriber = {\n email: email.toLowerCase(),\n subscribedAt: new Date().toISOString()\n };\n \n // Get detailed subscribers list\n let detailedSubscribers: any[] = [];\n try {\n const existingDetailed = await blob.getJSON(\"charlie-brain-subscribers-detailed\");\n if (Array.isArray(existingDetailed)) {\n detailedSubscribers = existingDetailed;\n }\n } catch (error) {\n // File doesn't exist yet, that's fine\n }\n \n // Add to both lists\n subscribers.push(email.toLowerCase());\n detailedSubscribers.push(newSubscriber);\n \n // Save both versions\n await blob.setJSON(\"charlie-brain-subscribers\", subscribers);\n await blob.setJSON(\"charlie-brain-subscribers-detailed\", detailedSubscribers);\n \n return new Response(JSON.stringify({ success: true, message: 'Subscribed successfully!' }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n \n } catch (error) {\n console.error('Subscription error:', error);\n return new Response(JSON.stringify({ error: 'Internal server error' }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n \n if (url.pathname === '/api/timeline-events') {\n // Use Server-Sent Events for progress updates\n const stream = new ReadableStream({\n start(controller) {\n const encoder = new TextEncoder();\n \n const sendProgress = (progress: ProgressUpdate) => {\n const data = `data: ${JSON.stringify({ type: 'progress', progress })}\\n\\n`;\n controller.enqueue(encoder.encode(data));\n };\n \n const sendComplete = (events: TimelineEvent[]) => {\n const data = `data: ${JSON.stringify({ type: 'complete', events })}\\n\\n`;\n controller.enqueue(encoder.encode(data));\n controller.close();\n };\n \n const sendError = (error: string) => {\n const data = `data: ${JSON.stringify({ type: 'error', error })}\\n\\n`;\n controller.enqueue(encoder.encode(data));\n controller.close();\n };\n \n // Start the async process\n fetchTimelineEvents(sendProgress)\n .then(sendComplete)\n .catch((error) => sendError(error.message));\n }\n });\n \n return new Response(stream, {\n headers: {\n 'Content-Type': 'text/event-stream',\n 'Cache-Control': 'no-cache',\n 'Connection': 'keep-alive',\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Headers': 'Content-Type'\n }\n });\n }\n\n return new Response(`\n \n \n WHEN - A Timeline of the Future\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",[98],"32ae138c-6ece-11f0-9132-0224a6c84d84","images.md","0198657b-44a9-70ec-b32f-aad86a5da946",["D",1754049234096],"![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/637650b1-4228-4fcd-413d-5eb9e1576700/public)",[107],"32ae0784-6ece-11f0-9132-0224a6c84d84","cache.ts","0198657b-44a9-70ec-b32f-a4773a8e9171",["D",1754049234096],"// Cache utilities for timeline data\n\n// Get unique key for this project\nfunction getProjectKey(): string {\n // Use a simple, consistent key for this project\n return \"when_timeline\";\n}\n\n// Conversion cache management\nexport async function getCachedConversion(question: string): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = getProjectKey();\n const TABLE_NAME = `${KEY}_conversion_cache_1`;\n \n // Create table if not exists - exactly like your texttoemojis project\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n question TEXT PRIMARY KEY,\n statement TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n \n const result = await sqlite.execute(\n `SELECT statement FROM ${TABLE_NAME} WHERE question = ?`,\n [question]\n );\n \n if (result.rows.length > 0) {\n console.log(`✅ Using cached conversion for: \"${question.slice(0, 50)}...\"`);\n return result.rows[0].statement as string;\n }\n \n console.log(`❌ No cache found for: \"${question.slice(0, 50)}...\"`);\n return null;\n } catch (error) {\n console.error('Error getting cached conversion:', error);\n return null;\n }\n}\n\nexport async function setCachedConversion(question: string, statement: string): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = getProjectKey();\n const TABLE_NAME = `${KEY}_conversion_cache_1`;\n \n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLE_NAME} (question, statement) VALUES (?, ?)`,\n [question, statement]\n );\n \n console.log(`💾 Cached conversion: \"${question.slice(0, 30)}...\" -> \"${statement.slice(0, 30)}...\"`);\n } catch (error) {\n console.error('Error caching conversion:', error);\n }\n}\n\n// Emoji cache management\nexport async function getCachedEmojis(text: string): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = getProjectKey();\n const TABLE_NAME = `${KEY}_emoji_cache_1`;\n \n // Create table if not exists - exactly matching your texttoemojis structure\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n text TEXT PRIMARY KEY,\n emojis TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n \n const result = await sqlite.execute(\n `SELECT emojis FROM ${TABLE_NAME} WHERE text = ?`,\n [text]\n );\n \n if (result.rows.length > 0) {\n console.log(`✅ Using cached emojis for: \"${text.slice(0, 50)}...\"`);\n return result.rows[0].emojis as string;\n }\n \n console.log(`❌ No emoji cache found for: \"${text.slice(0, 50)}...\"`);\n return null;\n } catch (error) {\n console.error('Error getting cached emojis:', error);\n return null;\n }\n}\n\nexport async function setCachedEmojis(text: string, emojis: string): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = getProjectKey();\n const TABLE_NAME = `${KEY}_emoji_cache_1`;\n \n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLE_NAME} (text, emojis) VALUES (?, ?)`,\n [text, emojis]\n );\n \n console.log(`💾 Cached emojis: \"${text.slice(0, 30)}...\" -> \"${emojis}\"`);\n } catch (error) {\n console.error('Error caching emojis:', error);\n }\n}",[113],{"_35":112,"_13":113,"_66":114,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":140,"_17":31,"_77":78,"_79":116,"_81":51,"_82":-5,"_125":141,"_18":142},{"_35":106,"_13":107,"_66":108,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":137,"_17":31,"_77":24,"_79":110,"_81":51,"_82":-5,"_125":138,"_18":139},{"_35":97,"_13":98,"_66":99,"_68":-5,"_69":70,"_71":100,"_73":74,"_37":134,"_17":102,"_77":103,"_79":104,"_81":51,"_82":-5,"_125":135,"_18":136},{"_35":91,"_13":92,"_66":93,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":131,"_17":31,"_77":78,"_79":95,"_81":51,"_82":-5,"_125":132,"_18":133},{"_35":84,"_13":85,"_66":86,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":128,"_17":31,"_77":24,"_79":89,"_81":51,"_82":-5,"_125":129,"_18":130},{"_35":64,"_13":65,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_37":124,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_125":126,"_18":127},["D",1754049682967],"children",[],[65],["D",1754049234096],[],[85],["D",1754049234096],[],[92],["D",1754050197842],[],[98],["D",1754049234096],[],[107],["D",1754049234096],[],[113],["D",1753454022202],"legacyEnvVars","httpPrivacy","description","a timeline of date markets on manifold.markets","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","6b727d94-6964-11f0-bad0-0224a6c84d84","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","5cbdcc4a696411f09ae60224a6c84d84","tursoHostname","5cbdcc4a696411f09ae60224a6c84d84-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789527031073],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_190":186},"org",{"_11":12,"_183":184,"_185":186,"_149":150,"_187":188,"_189":51},"branch",{"_17":100,"_13":16,"_35":70,"_42":43,"_45":36,"_46":179,"_180":53,"_181":43,"_182":56,"_57":14,"_54":12},19,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789556399&sig=79099f5f8ff13fa7ca88ddd17cfb358dd5de01b4572d54739a735b474a8e2cad","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":43,"_13":14,"_37":251,"_49":-5,"_144":51,"_52":53,"_145":53,"_146":147,"_148":-5,"_149":150,"_151":152,"_153":74,"_154":74,"_155":-5,"_156":31,"_55":56,"_157":158,"_159":160,"_161":252,"_163":-5,"_164":165,"_166":165,"_167":168,"_169":168,"_170":168,"_171":165,"_172":165,"_173":253,"_175":254,"_177":255,"_50":51},[233,234,235,236,237,238],"files",[233,234,235,236,237,238],"counts",{"_224":31,"_225":100,"_226":87,"_34":227,"_228":229},[212,213,214,215,216,217],"upstreamProject","upstreamBranch",{"_35":36,"_37":210,"_39":211,"_13":41,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1753454022202],["D",1784124994783],{"_35":112,"_13":113,"_66":114,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":115,"_17":31,"_77":78,"_79":116,"_81":51,"_82":-5,"_18":223},{"_35":106,"_13":107,"_66":108,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":109,"_17":31,"_77":24,"_79":110,"_81":51,"_82":-5,"_18":222},{"_35":97,"_13":98,"_66":99,"_68":-5,"_69":70,"_71":100,"_73":74,"_37":101,"_17":102,"_77":103,"_79":104,"_81":51,"_82":-5,"_18":221},{"_35":91,"_13":92,"_66":93,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":94,"_17":31,"_77":78,"_79":95,"_81":51,"_82":-5,"_18":220},{"_35":84,"_13":85,"_66":86,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":88,"_17":31,"_77":24,"_79":89,"_81":51,"_82":-5,"_18":219},{"_35":64,"_13":65,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_37":75,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_18":218},[65],[85],[92],[98],[107],[113],"pulls","branches","forks",{"_230":31,"_232":31},"connections",{"_230":31,"_231":31},"count","unfilledCount","emptyCount",{"_35":112,"_13":113,"_66":114,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":140,"_17":31,"_77":78,"_79":116,"_81":51,"_82":-5,"_125":249,"_18":250},{"_35":106,"_13":107,"_66":108,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":137,"_17":31,"_77":24,"_79":110,"_81":51,"_82":-5,"_125":247,"_18":248},{"_35":97,"_13":98,"_66":99,"_68":-5,"_69":70,"_71":100,"_73":74,"_37":134,"_17":102,"_77":103,"_79":104,"_81":51,"_82":-5,"_125":245,"_18":246},{"_35":91,"_13":92,"_66":93,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":131,"_17":31,"_77":78,"_79":95,"_81":51,"_82":-5,"_125":243,"_18":244},{"_35":84,"_13":85,"_66":86,"_68":-5,"_69":70,"_71":87,"_73":74,"_37":128,"_17":31,"_77":24,"_79":89,"_81":51,"_82":-5,"_125":241,"_18":242},{"_35":64,"_13":65,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_37":124,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_125":239,"_18":240},[],[65],[],[85],[],[92],[],[98],[],[107],[],[113],["D",1753454022202],["D",1789527031073],{"_11":12,"_190":186},{"_11":12,"_183":184,"_185":186,"_149":150,"_187":188,"_189":51},{"_17":100,"_13":16,"_35":70,"_42":43,"_45":36,"_46":179,"_180":53,"_181":43,"_182":56,"_57":14,"_54":12},"ctx",{"_173":-5,"_207":289,"_290":291,"_292":293,"_294":51,"_295":51,"_296":51,"_297":74,"_298":-5,"_299":-7,"_300":-7,"_301":31,"_302":51,"_303":51,"_304":-5,"_305":51,"_306":51,"_307":51,"_308":-5},"ENV",{"_260":261,"_262":263,"_264":41,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288},"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"]

Code