\n {children}\n

\n );\n}\n\nfunction Setup({ health, onRetry }: { health: { notion: boolean; gate: boolean }; onRetry: () => void }) {\n return (\n

⚡ Task Matrix — one-time setup

Two secrets and you're live everywhere, forever.

\n {health.notion ? \"✅\" : \"1️⃣\"} NOTION_API_KEY\n
- \n Create an integration at{\" \"}\n \n notion.so/my-integrations\n {\" \"}\n and copy its secret\n
- \n In Notion, open the Tasks database → ••• → Connections → add your integration\n
- \n Paste the secret{\" \"}\n \n here\n \n
\n
\n {health.gate ? \"✅\" : \"2️⃣\"} MATRIX_KEY\n
- \n Any password you like — it keeps your tasks off the public internet. Set it{\" \"}\n \n here\n \n
\n

\n \n I've set them — let's go\n \n

\n );\n}\n\nfunction KeyGate({ onSubmit, error }: { onSubmit: (k: string) => void; error: string }) {\n const [v, setV] = useState(\"\");\n return (\n

\n {\n e.preventDefault();\n if (v.trim()) onSubmit(v);\n }}\n className=\"max-w-sm w-full rounded-2xl border border-white/10 bg-white/5 p-8 text-center\"\n >\n

🔐

Task Matrix

Enter your matrix key

\n {error &&

{error}

}\n setV(e.target.value)}\n autoFocus\n className=\"w-full rounded-xl bg-black/30 border border-white/10 px-4 py-3 text-slate-100 outline-none focus:border-indigo-400\"\n placeholder=\"••••••••\"\n />\n \n \n

\n );\n}\n\nfunction Board({ onAuthFail }: { onAuthFail: () => void }) {\n const [tasks, setTasks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [toasts, setToasts] = useState([]);\n const [dragId, setDragId] = useState(null);\n const [selectedId, setSelectedId] = useState(null);\n const [dropTarget, setDropTarget] = useState(null);\n const [popping, setPopping] = useState>(new Set());\n const [showParked, setShowParked] = useState(false);\n const toastSeq = useRef(0);\n\n function toast(msg: string, retry?: () => void) {\n const id = ++toastSeq.current;\n setToasts((ts) => [...ts, { id, msg, retry }]);\n if (!retry) setTimeout(() => setToasts((ts) => ts.filter((t) => t.id !== id)), 5000);\n }\n\n async function load(silent = false) {\n if (!silent) setLoading(true);\n try {\n const { tasks } = await api(\"/api/tasks\");\n setTasks(tasks);\n } catch (e: any) {\n if (e.status === 401) return onAuthFail();\n toast(`Couldn't load tasks: ${e.message}`, () => load());\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n load();\n const onFocus = () => load(true);\n window.addEventListener(\"focus\", onFocus);\n return () => window.removeEventListener(\"focus\", onFocus);\n }, []);\n\n function patchLocal(id: string, patch: Partial) {\n setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, ...patch } : t)));\n }\n\n async function move(id: string, quadrant: string | null) {\n const before = tasks.find((t) => t.id === id);\n if (!before || before.quadrant === quadrant) return setSelectedId(null);\n patchLocal(id, { quadrant });\n setSelectedId(null);\n try {\n await api(\"/api/update\", { id, quadrant });\n } catch (e: any) {\n if (e.status === 401) return onAuthFail();\n patchLocal(id, { quadrant: before.quadrant });\n toast(`Couldn't move \"${before.name}\": ${e.message}`, () => move(id, quadrant));\n }\n }\n\n async function toggleBig3(t: Task) {\n const next = !t.big3;\n if (next && tasks.filter((x) => x.big3).length >= 3) {\n return toast(\"Big 3 is full — unstar one first. That's the whole point. ⭐\");\n }\n patchLocal(t.id, { big3: next });\n try {\n await api(\"/api/update\", { id: t.id, big3: next });\n } catch (e: any) {\n if (e.status === 401) return onAuthFail();\n patchLocal(t.id, { big3: t.big3 });\n toast(`Couldn't update Big 3: ${e.message}`, () => toggleBig3(t));\n }\n }\n\n async function markDone(t: Task) {\n setPopping((s) => new Set(s).add(t.id));\n setTimeout(() => setTasks((ts) => ts.filter((x) => x.id !== t.id)), 430);\n try {\n await api(\"/api/update\", { id: t.id, done: true });\n } catch (e: any) {\n if (e.status === 401) return onAuthFail();\n setPopping((s) => {\n const n = new Set(s);\n n.delete(t.id);\n return n;\n });\n setTasks((ts) => (ts.some((x) => x.id === t.id) ? ts : [...ts, t]));\n toast(`Couldn't complete \"${t.name}\": ${e.message}`, () => markDone(t));\n }\n }\n\n async function quickAdd(name: string, quadrant: string | null) {\n const temp: Task = {\n id: `tmp-${Date.now()}`,\n url: \"\",\n name,\n status: \"To do\",\n priority: quadrant === \"Do First\" ? \"High\" : null,\n quadrant,\n due: null,\n big3: false,\n tags: [],\n owners: [],\n created: new Date().toISOString(),\n };\n setTasks((ts) => [...ts, temp]);\n try {\n const { task } = await api(\"/api/create\", { name, quadrant, priority: temp.priority });\n setTasks((ts) => ts.map((t) => (t.id === temp.id ? { ...task, owners: [] } : t)));\n } catch (e: any) {\n if (e.status === 401) return onAuthFail();\n setTasks((ts) => ts.filter((t) => t.id !== temp.id));\n toast(`Couldn't add \"${name}\": ${e.message}`, () => quickAdd(name, quadrant));\n }\n }\n\n async function autoSort() {\n const unsorted = tasks.filter((t) => !t.quadrant || t.quadrant === \"Backlog\");\n for (const t of unsorted) move(t.id, suggest(t));\n }\n\n const big3 = tasks.filter((t) => t.big3);\n const unsorted = tasks.filter((t) => !t.quadrant || t.quadrant === \"Backlog\");\n const parked = tasks.filter((t) => t.quadrant && PARKED.includes(t.quadrant));\n const byQuadrant = (q: string) => tasks.filter((t) => t.quadrant === q);\n const moveMode = dragId !== null || selectedId !== null;\n\n return (\n

setSelectedId(null)}>\n {/* Header */}\n

⚡ Task Matrix

\n \n {tasks.length} open · synced with Notion\n \n

\n load()}\n className=\"px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-slate-300\"\n >\n {loading ? \"⏳ syncing…\" : \"↻ refresh\"}\n \n \n open in Notion ↗\n \n \n view source\n \n

\n\n {/* Big 3 */}\n

⭐ Today's Big 3

\n {big3.length}/3 — star any card to pick\n

\n {big3.length === 0\n ?

Nothing starred yet. If today went perfectly, which three got done?

\n : (\n

\n {big3.map((t) => (\n

\n \n {t.name}\n \n

\n ))}\n

\n )}\n

\n\n

\n {/* Tray */}\n e.preventDefault()}\n onDrop={(e) => {\n e.preventDefault();\n const id = e.dataTransfer.getData(\"text/plain\");\n if (id) move(id, null);\n setDragId(null);\n setDropTarget(null);\n }}\n onClick={(e) => {\n if (selectedId) {\n e.stopPropagation();\n move(selectedId, null);\n }\n }}\n >\n

📥 Unsorted

\n {unsorted.length}\n {unsorted.length > 0 && (\n {\n e.stopPropagation();\n autoSort();\n }}\n className=\"ml-auto text-xs px-2 py-1 rounded-lg bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30\"\n title=\"File everything by priority + due date\"\n >\n ✨ auto-sort\n \n )}\n

Drag onto the board, or tap a card then tap a box.

\n {unsorted.map((t) => (\n setSelectedId(selectedId === t.id ? null : t.id)}\n onDragStart={() => setDragId(t.id)}\n onDragEnd={() => setDragId(null)}\n onDone={() => markDone(t)}\n onStar={() => toggleBig3(t)}\n />\n ))}\n {unsorted.length === 0 &&

Inbox zero. Iconic. 💅

}\n

\n quickAdd(name, null)} />\n\n {parked.length > 0 && (\n

\n {\n e.stopPropagation();\n setShowParked(!showParked);\n }}\n className=\"text-xs text-slate-500 hover:text-slate-300\"\n >\n {showParked ? \"▾\" : \"▸\"} 🅿️ Parked — blocked / delegated / L&D ({parked.length})\n \n {showParked && (\n

\n {parked.map((t) => (\n setSelectedId(selectedId === t.id ? null : t.id)}\n onDragStart={() => setDragId(t.id)}\n onDragEnd={() => setDragId(null)}\n onDone={() => markDone(t)}\n onStar={() => toggleBig3(t)}\n />\n ))}\n

\n )}\n

\n )}\n \n\n {/* The 2×2 */}\n

\n {QUADRANTS.map((q) => {\n const items = byQuadrant(q.id);\n const overloaded = q.id === \"Do First\" && items.length > 5;\n return (\n {\n e.preventDefault();\n setDropTarget(q.id);\n }}\n onDragLeave={() => setDropTarget((d) => (d === q.id ? null : d))}\n onDrop={(e) => {\n e.preventDefault();\n const id = e.dataTransfer.getData(\"text/plain\");\n if (id) move(id, q.id);\n setDragId(null);\n setDropTarget(null);\n }}\n onClick={(e) => {\n if (selectedId) {\n e.stopPropagation();\n move(selectedId, q.id);\n }\n }}\n >\n

\n {q.emoji} {q.id}\n

\n {q.axis}\n {items.length}\n

{q.hint}

\n {overloaded && (\n

\n 🚨 {items.length} fires. If everything's urgent, nothing is — move something right or down.\n

\n )}\n {moveMode && (\n

\n drop / tap to move here\n

\n )}\n

\n {items.map((t) => (\n setSelectedId(selectedId === t.id ? null : t.id)}\n onDragStart={() => setDragId(t.id)}\n onDragEnd={() => setDragId(null)}\n onDone={() => markDone(t)}\n onStar={() => toggleBig3(t)}\n />\n ))}\n

\n quickAdd(name, q.id)} />\n \n );\n })}\n

\n\n {/* Toasts */}\n

\n {toasts.map((t) => (\n \n {t.msg}\n {t.retry && (\n {\n setToasts((ts) => ts.filter((x) => x.id !== t.id));\n t.retry!();\n }}\n className=\"px-2 py-1 rounded-lg bg-rose-500/20 text-rose-300 hover:bg-rose-500/30\"\n >\n retry\n \n )}\n setToasts((ts) => ts.filter((x) => x.id !== t.id))}\n className=\"text-slate-500 hover:text-slate-300\"\n >\n ✕\n \n

\n ))}\n

\n \n );\n}\n\nfunction Card(props: {\n t: Task;\n suggestion?: string;\n popping: boolean;\n selected: boolean;\n onSelect: () => void;\n onDragStart: () => void;\n onDragEnd: () => void;\n onDone: () => void;\n onStar: () => void;\n}) {\n const { t } = props;\n const due = dueInfo(t.due);\n const prDot = t.priority === \"High\"\n ? \"bg-purple-400\"\n : t.priority === \"Med\"\n ? \"bg-yellow-400\"\n : t.priority === \"Low\"\n ? \"bg-amber-700\"\n : \"bg-slate-700\";\n return (\n {\n e.dataTransfer.setData(\"text/plain\", t.id);\n props.onDragStart();\n }}\n onDragEnd={props.onDragEnd}\n onClick={(e) => {\n e.stopPropagation();\n props.onSelect();\n }}\n className={`group rounded-xl border bg-slate-900/60 px-3 py-2 cursor-grab active:cursor-grabbing select-none ${\n props.popping ? \"done-pop\" : \"\"\n } ${props.selected ? \"border-indigo-400 ring-2 ring-indigo-400/40\" : \"border-white/10 hover:border-white/25\"}`}\n >\n

\n {\n e.stopPropagation();\n props.onDone();\n }}\n title=\"Mark done in Notion\"\n className=\"mt-0.5 text-slate-600 hover:text-emerald-400 text-base leading-none\"\n >\n ◯\n \n

\n \n {t.name}\n

\n {due && {due.label}}\n {t.status !== \"To do\" && (\n {t.status}\n )}\n {t.tags.slice(0, 2).map((tag) => (\n {tag}\n ))}\n {t.owners.map((o) => (\n \n {initials(o)}\n \n ))}\n {props.suggestion && (\n \n → {props.suggestion}\n \n )}\n

\n {\n e.stopPropagation();\n props.onStar();\n }}\n title={t.big3 ? \"Remove from Big 3\" : \"Add to Big 3\"}\n className={`text-base leading-none ${\n t.big3 ? \"text-yellow-400\" : \"text-slate-700 hover:text-yellow-400/70 opacity-0 group-hover:opacity-100\"\n }`}\n >\n ★\n \n {t.url && (\n e.stopPropagation()}\n title=\"Open in Notion\"\n className=\"text-slate-700 hover:text-slate-400 text-xs opacity-0 group-hover:opacity-100\"\n >\n ↗\n \n )}\n

\n \n );\n}\n\nfunction QuickAdd({ placeholder, onAdd }: { placeholder: string; onAdd: (name: string) => void }) {\n const [v, setV] = useState(\"\");\n return (\n e.stopPropagation()}\n onSubmit={(e) => {\n e.preventDefault();\n if (v.trim()) {\n onAdd(v.trim());\n setV(\"\");\n }\n }}\n >\n setV(e.target.value)}\n placeholder={placeholder}\n className=\"w-full text-sm rounded-lg bg-black/20 border border-white/5 focus:border-indigo-400/50 px-3 py-1.5 text-slate-200 placeholder-slate-600 outline-none\"\n />\n \n );\n}\n",[18,80],"pulls","branches",1,"forks","envVars",{"_182":176,"_184":26},"connections",{"_182":26,"_183":26},"count","unfilledCount","emptyCount",{"_34":157,"_13":18,"_63":81,"_44":-5,"_36":37,"_158":41,"_159":24,"_38":234,"_40":26,"_66":82,"_161":-5,"_68":30,"_162":-5,"_198":235,"_17":236},{"_34":170,"_13":80,"_63":79,"_44":81,"_36":37,"_158":74,"_159":24,"_38":231,"_40":26,"_66":67,"_161":172,"_68":30,"_162":-5,"_198":232,"_17":233},{"_34":166,"_13":65,"_63":64,"_44":81,"_36":37,"_158":41,"_159":24,"_38":228,"_40":26,"_66":67,"_161":168,"_68":30,"_162":-5,"_198":229,"_17":230},{"_34":220,"_13":221,"_63":222,"_44":-5,"_36":37,"_158":223,"_159":24,"_38":224,"_40":26,"_66":21,"_161":225,"_68":30,"_162":-5,"_198":226,"_17":227},{"_34":210,"_13":211,"_63":212,"_44":-5,"_36":37,"_158":213,"_159":24,"_38":214,"_40":215,"_66":216,"_161":217,"_68":30,"_162":-5,"_198":218,"_17":219},{"_34":201,"_13":202,"_63":203,"_44":-5,"_36":37,"_158":204,"_159":24,"_38":205,"_40":206,"_66":21,"_161":207,"_68":30,"_162":-5,"_198":208,"_17":209},{"_34":192,"_13":193,"_63":194,"_44":-5,"_36":37,"_158":121,"_159":24,"_38":195,"_40":41,"_66":196,"_161":197,"_68":30,"_162":-5,"_198":199,"_17":200},"c8b8c7ac-8e72-42a1-a65f-fbc3b84cb426","main.ts","222d247c-65e4-11f1-a30f-1607ee4eb77e",["D",1783410355297],"http","// task-matrix is RETIRED — the live app is the on-it val.\n// All old code is in History and the old data is untouched in this val's SQLite;\n// this stub only forwards visitors to the real board.\nconst LIVE = \"https://ltraino--f73fafd4795011f181e01607ee4eb77e.web.val.run\";\nexport default (req: Request) => {\n const u = new URL(req.url);\n return Response.redirect(LIVE + u.pathname + u.search, 302);\n};","children",[],[193],"2130a65d-d477-495f-a734-0462c2175b40","index.html","53619e88-65e4-11f1-85e1-1607ee4eb77e",17,["D",1783093696070],2,"\n\n\n\n\nOn it.\n\n\n\n\n\n\n\n\n\n

On it.

\n\n\n\n

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

Offline — new tasks are kept locally and will sync when you're back.

\n\n

The one thing

\n\n

Backlog

\n\n

Learning & development

Rituals

↻ recurring

\n\n

Do First

urgent & important

Schedule

important, not urgent

Delegate

urgent, not yours

Later

not urgent, not critical

\n\n

Blocked

Delegated

\n\n\n\n\n

\n\n

\n\n\n

\n\n

\n\n\n

\n\n

\n\n\n

\n\n

\n\n\n

\n\n

\n\n\n

\n\n

\n\n\n

The one thing

\n\n

Esc to come back

\n\n

\n\n\n\n",[],[202],"e4a84602-6c13-414b-96ac-674fa52f6da4","backup.ts","b50bbf6c-76ef-11f1-aec1-1607ee4eb77e",15,["D",1783090790436],3,"interval","// On it. — nightly snapshot to Val Town blob storage (add as a CRON file, e.g. daily at 03:00)\n// Keeps the last 30 snapshots. Never lose data again.\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nexport default async function () {\n const dump = {\n exported_at: new Date().toISOString(),\n tasks: (await sqlite.execute(\"SELECT * FROM tasks\")).rows,\n people: (await sqlite.execute(\"SELECT * FROM people\")).rows,\n settings: (await sqlite.execute(\"SELECT * FROM settings\")).rows,\n summaries: (await sqlite.execute(\"SELECT * FROM summaries\")).rows,\n };\n const key = \"matrix-backup:\" + new Date().toISOString().slice(0, 10);\n await blob.setJSON(key, dump);\n\n const entries = await blob.list(\"matrix-backup:\");\n const keys = entries.map((e) => e.key).sort();\n for (const k of keys.slice(0, Math.max(0, keys.length - 30))) {\n await blob.delete(k);\n }\n console.log(\n `Backed up ${dump.tasks.length} tasks to ${key}; ${\n Math.min(keys.length, 30)\n } snapshots kept`,\n );\n}",[],[211],"3908a207-8ba8-4dea-a913-f3ffcc8dccd7","README.md","a2202210-65e4-11f1-b68a-1607ee4eb77e",6,["D",1781216807207],"# ⚡ Task Matrix\n\nEisenhower matrix over Lauren's Notion **Tasks** database. Drag, drop, decide.\nRebuilt on Val Town so it can never die with a laptop again.\n\n## How it works\n\n- The Notion DB's **Quadrant** select (`Do First` / `Schedule` / `Delegate` / `Later`) is the single\n source of truth — every drag writes straight back to Notion. No shadow state file.\n (The old `task-matrix-state` page in Notion is obsolete and can be deleted.)\n- **⭐ Big 3** — star up to three tasks for today; writes the `Big 3` checkbox in Notion.\n- **◯ Done** — completes the task in Notion (`Status: Done`) with a satisfying pop.\n- **📥 Unsorted** — tasks with no quadrant (or `Backlog`). Each shows a suggested quadrant\n derived from Priority + Due date; **✨ auto-sort** files them all in one click.\n- **🅿️ Parked** — `Blocked` / `Delegated` / `L&D` tasks, collapsed out of the way.\n- Quick-add inputs create real Notion tasks in the right quadrant.\n- Optimistic UI with retryable error toasts — if a write fails you'll know, loudly.\n- Works on phone/iPad: tap a card, then tap the box to move it (no drag needed).\n\n## Setup (one time)\n\n| Env var | What |\n|---|---|\n| `NOTION_API_KEY` | Secret from a Notion integration ([create one](https://www.notion.so/my-integrations)), then connect it to the Tasks DB (••• → Connections) |\n| `MATRIX_KEY` | Any password — the UI asks for it once per device |\n\n## Endpoints\n\n- `GET /` — the board\n- `GET /api/health` — config check (no auth)\n- `GET /api/tasks` — open tasks (auth: `x-matrix-key` header)\n- `POST /api/update` — `{ id, quadrant? | big3? | done? }`\n- `POST /api/create` — `{ name, quadrant?, priority?, due? }`\n",[],[221],["D",1781216675559],[],[18,65],["D",1781216790908],[],[18,80],["D",1781216675559],[186,187],[18],["D",1781216592520],["D",1789520505489],{"_11":12,"_135":71},{"_11":12,"_130":131,"_70":71,"_31":69,"_132":133,"_134":30},{"_40":121,"_13":16,"_34":37,"_122":84,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_53":-5,"_154":275,"_276":277,"_278":279,"_280":30,"_281":30,"_282":30,"_283":24,"_284":-5,"_285":-7,"_286":-7,"_287":26,"_288":30,"_289":30,"_290":-5,"_291":30,"_292":30,"_293":30,"_294":-5},"ENV",{"_246":247,"_248":249,"_250":16,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274},"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"]

⚡ Task Matrix — one-time setup

Task Matrix

⭐ Today's Big 3

📥 Unsorted

\n {q.emoji} {q.id}\n

Backlog

Learning & development

Rituals

Do First

Schedule

Delegate

Later

Blocked

Delegated

Brain dump Enter to add · Esc to close

Edit task

Weekly triage

Ta-da

Shortcuts

Your matrix key

History · frontend