[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69d5784fe8548191af96095e6d5cc39b","versionInt","title","168-home-v2-prototype","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// Local lightweight UI primitives so the preview does not depend on external component fetches.\nfunction Card({ className = \"\", children }) {\n return

{children}

;\n}\n\nfunction CardHeader({ className = \"\", children }) {\n return

{children}

;\n}\n\nfunction CardContent({ className = \"\", children }) {\n return

{children}

;\n}\n\nfunction CardTitle({ className = \"\", children }) {\n return

{children}

;\n}\n\nfunction CardDescription({ className = \"\", children }) {\n return

{children}

;\n}\n\nfunction Button({ className = \"\", variant = \"default\", size = \"default\", children, ...props }) {\n const base = \"inline-flex items-center justify-center gap-1 font-medium transition disabled:opacity-50 disabled:pointer-events-none\";\n const variants = {\n default: \"bg-slate-900 text-white hover:bg-slate-800\",\n outline: \"border border-slate-200 bg-white text-slate-700 hover:bg-slate-50\",\n ghost: \"text-slate-600 hover:bg-slate-50\",\n };\n const sizes = {\n default: \"px-4 py-2 text-sm\",\n sm: \"px-3 py-1.5 text-xs\",\n };\n return ;\n}\n\nfunction Textarea({ className = \"\", ...props }) {\n return

;\n}\n\nfunction Input({ className = \"\", ...props }) {\n  return <input className={`w-full border border-slate-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-slate-200 ${className}`} {...props} />;\n}\n\nfunction Badge({ className = \"\", children }) {\n  return <span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs ${className}`}>{children}</span>;\n}\n\nfunction Dialog({ open, children }) {\n  if (!open) return null;\n  return <>{children}</>;\n}\n\nfunction DialogContent({ className = \"\", children }) {\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\">\n      <div className={`w-full bg-white p-6 shadow-2xl ${className}`}>{children}</div>\n    </div>\n  );\n}\n\nfunction DialogHeader({ className = \"\", children }) {\n  return <div className={`mb-4 ${className}`}>{children}</div>;\n}\n\nfunction DialogTitle({ className = \"\", children }) {\n  return <div className={`text-lg font-semibold text-slate-900 ${className}`}>{children}</div>;\n}\n\nfunction DialogDescription({ className = \"\", children }) {\n  return <div className={`mt-1 text-sm text-slate-500 ${className}`}>{children}</div>;\n}\n\n// Inline icon fallback: avoids CDN fetch failures from lucide-react in preview.\nfunction IconText({ children, className = \"\" }) {\n  return <span className={`inline-flex items-center justify-center leading-none ${className}`}>{children}</span>;\n}\n\nconst Calendar = (props) => <IconText {...props}>📅</IconText>;\nconst CheckCircle2 = (props) => <IconText {...props}>✓</IconText>;\nconst ChevronRight = (props) => <IconText {...props}>›</IconText>;\nconst Circle = (props) => <IconText {...props}>○</IconText>;\nconst Eye = (props) => <IconText {...props}>👁</IconText>;\nconst Home = (props) => <IconText {...props}>⌂</IconText>;\nconst ListTodo = (props) => <IconText {...props}>☑</IconText>;\nconst Moon = (props) => <IconText {...props}>☾</IconText>;\nconst Pin = (props) => <IconText {...props}>📌</IconText>;\nconst Plus = (props) => <IconText {...props}>＋</IconText>;\nconst Repeat = (props) => <IconText {...props}>↻</IconText>;\nconst Sparkles = (props) => <IconText {...props}>✦</IconText>;\nconst Sun = (props) => <IconText {...props}>☀</IconText>;\n\nconst STORAGE_KEY = \"home-os-v2-react\";\n\nconst ROUTINES = {\n  morning: {\n    id: \"morning\",\n    label: \"Morning Check-in\",\n    description: \"Review calendar, process email, and prioritize your top 3.\",\n    icon: Sun,\n    steps: [\n      {\n        title: \"Review today + next 3 days\",\n        body: \"Scan today and the next 3 days in your calendar and capture anything that could slip.\",\n      },\n      {\n        title: \"Process email\",\n        body: \"Use a short timer. Capture anything that needs action.\",\n      },\n      {\n        title: \"Prioritize Top 3\",\n        body: \"Reorder your top three. The first item becomes your MIT automatically.\",\n      },\n    ],\n  },\n  evening: {\n    id: \"evening\",\n    label: \"Evening Wind-down\",\n    description: \"Review tomorrow, clear hot tasks, and leave a note.\",\n    icon: Moon,\n    steps: [\n      {\n        title: \"Review tomorrow\",\n        body: \"Look at tomorrow’s calendar and get situational awareness without doing tomorrow’s planning tonight.\",\n      },\n      {\n        title: \"Resolve hot tasks\",\n        body: \"Every hot task must be completed or reassigned. Nothing stays hot overnight.\",\n      },\n      {\n        title: \"Leave a shared note\",\n        body: \"Capture anything your future self or partner should know. Convert it later only if it becomes a real task.\",\n      },\n    ],\n  },\n  sunday: {\n    id: \"sunday\",\n    label: \"Sunday Reset\",\n    description: \"Review notes, triage the week, and align with your partner.\",\n    icon: Calendar,\n    steps: [\n      {\n        title: \"Review notes from the week\",\n        body: \"Go through everything that came up this week. Convert anything actionable into a task and acknowledge the rest.\",\n      },\n      {\n        title: \"Triage tasks + plan the week\",\n        body: \"Review all upcoming tasks and add anything missing so the week is mapped intentionally by day.\",\n      },\n      {\n        title: \"Partner alignment\",\n        body: \"Align on the week ahead: school logistics, work commitments, meals, and any shared responsibilities.\",\n      },\n    ],\n  },\n  monthly: {\n    id: \"monthly\",\n    label: \"Monthly Life Review\",\n    description: \"Close the loop on the month and design the next one intentionally.\",\n    icon: Sparkles,\n    steps: [\n      {\n        title: \"Review notes (close open loops)\",\n        body: \"Go through all notes from the last month. Convert anything actionable into a task and acknowledge everything else. Nothing carries forward unprocessed.\",\n      },\n      {\n        title: \"Review all tasks (clean slate)\",\n        body: \"Review all outstanding tasks. Complete, delete, or reschedule them so nothing is stale or ambiguous going into the next month.\",\n      },\n      {\n        title: \"Look 4–6 weeks ahead\",\n        body: \"Scan your calendar for the next 4–6 weeks. Capture anything that requires prep (travel, events, payments, deadlines).\",\n      },\n      {\n        title: \"Design next month\",\n        body: \"Define the 3–5 key things that matter next month. Add them as tasks with intentional timing so your future weeks are already shaped.\",\n      },\n    ],\n  },\n};\n\nfunction uid() {\n  return Math.random().toString(36).slice(2, 9);\n}\n\nfunction formatLocalDate(date) {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nfunction todayStr() {\n  return formatLocalDate(new Date());\n}\n\nfunction addDaysToDate(baseDate, days) {\n  const d = new Date(baseDate);\n  d.setDate(d.getDate() + days);\n  return formatLocalDate(d);\n}\n\nfunction parseDate(dateStr) {\n  const [y, m, d] = dateStr.split(\"-\").map(Number);\n  return new Date(y, m - 1, d);\n}\n\nfunction daysAway(dateStr) {\n  if (!dateStr) return null;\n  const now = new Date();\n  now.setHours(0, 0, 0, 0);\n  return Math.round((parseDate(dateStr) - now) / 86400000);\n}\n\nfunction classifyTemp(task) {\n  if (!task.dueDate) return \"cold\";\n  const n = daysAway(task.dueDate);\n  if (n <= 0) return \"hot\";\n  if (n <= 5) return \"warm\";\n  return \"cold\";\n}\n\nfunction dueLabel(dateStr) {\n  if (!dateStr) return \"No due date\";\n  const n = daysAway(dateStr);\n  if (n <= 0) return \"Due today\";\n  if (n === 1) return \"Due tomorrow\";\n  if (n <= 14) return `${n}d away`;\n  return `${Math.ceil(n / 7)}w away`;\n}\n\nfunction dueWeekLabel(dateStr) {\n  if (!dateStr) return \"No due date\";\n  const n = daysAway(dateStr);\n  if (n === null) return \"No due date\";\n  if (n < 0) return \"Past due\";\n  if (n <= 6) {\n    return parseDate(dateStr).toLocaleDateString(\"en-US\", { weekday: \"long\" });\n  }\n  return parseDate(dateStr).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction timeSinceLabel(timestamp) {\n  const diffMs = Date.now() - timestamp;\n  const diffMin = Math.floor(diffMs / 60000);\n  if (diffMin < 60) return `${diffMin}m ago`;\n  const diffHr = Math.floor(diffMin / 60);\n  if (diffHr < 24) return `${diffHr}h ago`;\n  const diffDay = Math.floor(diffHr / 24);\n  return `${diffDay}d ago`;\n}\n\nfunction greetingText() {\n  const h = new Date().getHours();\n  if (h < 12) return \"Good morning\";\n  if (h < 17) return \"Good afternoon\";\n  return \"Good evening\";\n}\n\nfunction isSunday(d = new Date()) {\n  return d.getDay() === 0;\n}\n\nfunction isLastSunday(d = new Date()) {\n  if (d.getDay() !== 0) return false;\n  const next = new Date(d);\n  next.setDate(d.getDate() + 7);\n  return next.getMonth() !== d.getMonth();\n}\n\nfunction loadFromStorage() {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (!raw) return null;\n    return JSON.parse(raw);\n  } catch {\n    return null;\n  }\n}\n\nfunction saveToStorage(data) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n}\n\nfunction seedData() {\n  return {\n    tasks: [\n      {\n        id: uid(),\n        text: \"Review marathon spectator plan\",\n        dueDate: todayStr(),\n        completed: false,\n        createdAt: Date.now() - 10000,\n      },\n      {\n        id: uid(),\n        text: \"Text Lorraine final race update\",\n        dueDate: addDaysToDate(new Date(), 1),\n        completed: false,\n        createdAt: Date.now() - 9000,\n      },\n      {\n        id: uid(),\n        text: \"Finalize taxes tonight\",\n        dueDate: addDaysToDate(new Date(), 4),\n        completed: false,\n        createdAt: Date.now() - 8000,\n      },\n    ],\n    days: {},\n  };\n}\n\nfunction getDailyRecord(data, date = todayStr()) {\n  return data.days?.[date] || { routinesDone: [], eveningNotes: [] };\n}\n\nfunction computeStreak(data) {\n  let streak = 0;\n  const today = new Date();\n  for (let i = 0; i < 365; i++) {\n    const d = new Date(today);\n    d.setDate(today.getDate() - i);\n    const key = formatLocalDate(d);\n    const rec = data.days?.[key];\n    if (rec?.routinesDone?.includes(\"morning\")) streak++;\n    else if (i > 0) break;\n  }\n  return streak;\n}\n\nfunction sortNotes(notes = []) {\n  return [...notes].sort((a, b) => {\n    if (a.pinned && !b.pinned) return -1;\n    if (!a.pinned && b.pinned) return 1;\n    return b.createdAt - a.createdAt;\n  });\n}\n\nfunction getNotesFromLastDays(data, days = 7) {\n  const notes = [];\n  for (let i = 0; i < days; i++) {\n    const d = new Date();\n    d.setDate(d.getDate() - i);\n    const key = formatLocalDate(d);\n    const rec = data.days?.[key];\n    if (rec?.eveningNotes?.length) {\n      notes.push(...rec.eveningNotes.map((note) => ({ ...note, sourceDate: key })));\n    }\n  }\n  return sortNotes(notes);\n}\n\nfunction quoteForDay() {\n  const quotes = [\n    \"An ounce of prevention is worth a pound of cure.\",\n    \"More is lost by indecision than wrong decision.\",\n    \"Well begun is half done.\",\n    \"A good plan today is better than a perfect plan tomorrow.\",\n  ];\n  const dayIndex = Math.floor(Date.now() / 86400000);\n  return quotes[dayIndex % quotes.length];\n}\n\nfunction tempTone(temp) {\n  if (temp === \"hot\") return \"bg-red-50 text-red-700 border-red-200\";\n  if (temp === \"warm\") return \"bg-amber-50 text-amber-700 border-amber-200\";\n  return \"bg-slate-50 text-slate-700 border-slate-200\";\n}\n\nfunction SharedNoteCard({ note, onConvert, onAcknowledge, onTogglePin, onEdit }) {\n  const cardTone = note.acknowledged ? \"border-emerald-200 bg-emerald-50/60\" : note.pinned ? \"border-amber-200 bg-amber-50/50\" : \"border-blue-200 bg-white\";\n\n  return (\n    <div className={`rounded-2xl border p-3 transition-all ${cardTone}`}>\n      <div className=\"whitespace-pre-wrap text-sm text-slate-800\">{note.text}</div>\n      <div className=\"mt-2 flex flex-wrap gap-2\">\n        {note.acknowledged ? <Badge variant=\"outline\" className=\"border-emerald-200 bg-emerald-50 text-emerald-700\">Acknowledged</Badge> : null}\n        {note.pinned ? <Badge variant=\"outline\" className=\"border-amber-200 bg-amber-50 text-amber-700\">Pinned</Badge> : null}\n        {note.sourceDate ? <Badge variant=\"outline\">{note.sourceDate}</Badge> : null}\n        <Badge variant=\"outline\">{timeSinceLabel(note.createdAt)}</Badge>\n      </div>\n      <div className=\"mt-3 flex flex-wrap gap-2\">\n        <Button size=\"sm\" className=\"rounded-xl\" onClick={() => onConvert(note)}>\n          Convert to task\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" className=\"rounded-xl\" onClick={() => onAcknowledge(note)}>\n          <Eye className=\"mr-1 h-4 w-4\" />{note.acknowledged ? \"Acknowledged\" : \"Acknowledge\"}\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" className=\"rounded-xl\" onClick={() => onEdit(note)}>\n          Edit\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" className=\"rounded-xl\" onClick={() => onTogglePin(note)}>\n          <Pin className=\"mr-1 h-4 w-4\" />{note.pinned ? \"Unpin\" : \"Pin\"}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction TaskMiniRow({ task, onToggleTask }) {\n  return (\n    <div className=\"flex items-center gap-3 rounded-2xl border border-slate-200 p-3\">\n      <button onClick={() => onToggleTask(task.id)} className=\"text-slate-400 hover:text-slate-700\">\n        {task.completed ? <CheckCircle2 className=\"h-5 w-5 text-emerald-600\" /> : <Circle className=\"h-5 w-5\" />}\n      </button>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm text-slate-800\">{task.text}</div>\n        <div className=\"mt-1 flex flex-wrap gap-2 text-xs text-slate-500\">\n          <Badge variant=\"outline\" className={tempTone(classifyTemp(task))}>{dueLabel(task.dueDate)}</Badge>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction NextActionCard({ onOpenRoutine, onOpenTasks, onPullForward, hasCompletedEvening, hasCompletedMorning, hotTaskCount, futureTaskCount }) {\n  const now = new Date();\n  const h = now.getHours();\n\n  // 1) Morning not done (before noon)\n  if (!hasCompletedMorning && h < 12) {\n    return (\n      <Card className=\"border-blue-200 bg-blue-50/40 shadow-sm\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Do this next</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-slate-900\">Morning Check-in</h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">\n                Start your day: review today and the next 3 days, capture tasks, and set your top 3.\n              </p>\n            </div>\n            <div className=\"rounded-2xl bg-blue-100 p-3 text-blue-700\">\n              <Sun className=\"h-6 w-6\" />\n            </div>\n          </div>\n          <div className=\"mt-5 flex justify-end\">\n            <Button className=\"rounded-2xl\" onClick={() => onOpenRoutine(\"morning\")}>\n              Open Morning Check-in\n              <ChevronRight className=\"ml-2 h-4 w-4\" />\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  // 2) After evening complete → done state\n  if (hasCompletedEvening) {\n    return (\n      <Card className=\"border-emerald-200 bg-emerald-50/40 shadow-sm transition-all animate-pulse\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Do this next</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-emerald-700 flex items-center gap-2\">\n                You’re done. <CheckCircle2 className=\"h-6 w-6\" />\n              </h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">\n                Today is complete. Nothing is carrying over. Check back in tomorrow morning.\n              </p>\n            </div>\n            <div className=\"rounded-2xl bg-emerald-100 p-3 text-emerald-700\">\n              <CheckCircle2 className=\"h-6 w-6\" />\n            </div>\n          </div>\n\n          <div className=\"mt-5 rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4 text-sm italic text-slate-700\">\n            “{quoteForDay()}”\n          </div>\n\n          <div className=\"mt-5 flex justify-end\">\n            <Button variant=\"outline\" className=\"rounded-2xl\" onClick={() => onOpenRoutine(\"evening\")}>\n              Reopen Evening Wind-down\n              <ChevronRight className=\"ml-2 h-4 w-4\" />\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  // 3) Sunday/monthly after 2 PM still wins over normal evening cadence\n  if (isSunday(now) && isLastSunday(now) && h >= 14) {\n    return (\n      <Card className=\"border-slate-200 bg-white shadow-sm\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Do this next</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-slate-900\">Monthly Life Review</h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">Close the loop on the month and design the next one intentionally.</p>\n            </div>\n            <div className=\"rounded-2xl bg-slate-100 p-3 text-slate-700\"><Sparkles className=\"h-6 w-6\" /></div>\n          </div>\n          <div className=\"mt-5 flex justify-end\">\n            <Button className=\"rounded-2xl\" onClick={() => onOpenRoutine(\"monthly\")}>Open Monthly Life Review<ChevronRight className=\"ml-2 h-4 w-4\" /></Button>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  if (isSunday(now) && h >= 14) {\n    return (\n      <Card className=\"border-slate-200 bg-white shadow-sm\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Do this next</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-slate-900\">Sunday Reset</h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">Review notes, triage the week, and align with your partner.</p>\n            </div>\n            <div className=\"rounded-2xl bg-slate-100 p-3 text-slate-700\"><Calendar className=\"h-6 w-6\" /></div>\n          </div>\n          <div className=\"mt-5 flex justify-end\">\n            <Button className=\"rounded-2xl\" onClick={() => onOpenRoutine(\"sunday\")}>Open Sunday Reset<ChevronRight className=\"ml-2 h-4 w-4\" /></Button>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  // 4) After morning and before 4 PM → focus execution on hot tasks first\n  if (h < 16 && hotTaskCount > 0) {\n    return (\n      <Card className=\"border-red-200 bg-red-50/50 shadow-sm\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-red-700\">Do this next</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-slate-900\">Work hot tasks</h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">\n                You have {hotTaskCount} hot task{hotTaskCount !== 1 ? \"s\" : \"\"}. Work these before pulling anything forward.\n              </p>\n            </div>\n            <div className=\"rounded-2xl bg-red-100 p-3 text-red-700\"><ListTodo className=\"h-6 w-6\" /></div>\n          </div>\n          <div className=\"mt-5 flex justify-end\">\n            <Button className=\"rounded-2xl\" onClick={onOpenTasks}>Open tasks<ChevronRight className=\"ml-2 h-4 w-4\" /></Button>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  // 5) After morning and before 4 PM, no hot tasks → ahead / optional pull-forward\n  if (h < 16 && hotTaskCount === 0) {\n    return (\n      <Card className=\"border-emerald-200 bg-emerald-50/40 shadow-sm\">\n        <CardContent className=\"p-6\">\n          <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-emerald-700\">You’re ahead</div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <h2 className=\"font-serif text-2xl text-slate-900\">No hot tasks right now.</h2>\n              <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">\n                You’re clear for today. If you have extra capacity, you can pull from {futureTaskCount} future task{futureTaskCount !== 1 ? \"s\" : \"\"}.\n              </p>\n            </div>\n            <div className=\"rounded-2xl bg-emerald-100 p-3 text-emerald-700\"><CheckCircle2 className=\"h-6 w-6\" /></div>\n          </div>\n          <div className=\"mt-5 rounded-2xl border border-emerald-200 bg-white/70 p-4 text-sm italic text-slate-700\">\n            “{quoteForDay()}”\n          </div>\n          <div className=\"mt-5 flex justify-end\">\n            <div className=\"flex gap-2 justify-end\">\n            <Button variant=\"outline\" className=\"rounded-2xl\" onClick={onOpenTasks}>View future tasks<ChevronRight className=\"ml-2 h-4 w-4\" /></Button>\n            <Button className=\"rounded-2xl\" onClick={onPullForward}>Pull next task → today</Button>\n          </div>\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  // 6) 4 PM onward → evening wind-down\n  return (\n    <Card className=\"border-slate-200 bg-white shadow-sm\">\n      <CardContent className=\"p-6\">\n        <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Do this next</div>\n        <div className=\"flex items-start justify-between gap-4\">\n          <div>\n            <h2 className=\"font-serif text-2xl text-slate-900\">Evening Wind-down</h2>\n            <p className=\"mt-2 max-w-md text-sm leading-6 text-slate-600\">Clean the slate, resolve hot tasks, and leave a note if needed.</p>\n          </div>\n          <div className=\"rounded-2xl bg-slate-100 p-3 text-slate-700\"><Moon className=\"h-6 w-6\" /></div>\n        </div>\n        <div className=\"mt-5 rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4 text-sm italic text-slate-700\">\n          “{quoteForDay()}”\n        </div>\n        <div className=\"mt-5 flex justify-end\">\n          <Button className=\"rounded-2xl\" onClick={() => onOpenRoutine(\"evening\")}>Open Evening Wind-down<ChevronRight className=\"ml-2 h-4 w-4\" /></Button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction QuickCapture({ onAddTask }) {\n  const [text, setText] = useState(\"\");\n  const [dueDate, setDueDate] = useState(todayStr());\n\n  function submit() {\n    if (!text.trim()) return;\n    onAddTask(text.trim(), dueDate);\n    setText(\"\");\n    setDueDate(todayStr());\n  }\n\n  function handleKeyDown(e) {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      submit();\n    }\n  }\n\n  return (\n    <Card className=\"border-slate-200 bg-white shadow-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-base\">Quick capture</CardTitle>\n        <CardDescription>Press Enter to save. Shift+Enter for a new line.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-3\">\n        <Textarea\n          placeholder=\"Catch it fast…\"\n          value={text}\n          onChange={(e) => setText(e.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"rounded-xl\"\n          autoFocus\n        />\n        <div className=\"flex items-center gap-2\">\n          <Input type=\"date\" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className=\"rounded-xl\" />\n          <Button className=\"rounded-xl\" onClick={submit}>\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction QuickNoteCapture({ onAddNote }) {\n  const [text, setText] = useState(\"\");\n\n  function submit() {\n    if (!text.trim()) return;\n    onAddNote(text.trim());\n    setText(\"\");\n  }\n\n  function handleKeyDown(e) {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      submit();\n    }\n  }\n\n  return (\n    <Card className=\"border-slate-200 bg-white shadow-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-base\">Quick note</CardTitle>\n        <CardDescription>Press Enter to save. Shift+Enter for a new line.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-3\">\n        <Textarea\n          placeholder=\"Leave context for your partner or future you…\"\n          value={text}\n          onChange={(e) => setText(e.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"rounded-xl\"\n          autoFocus\n        />\n        <div className=\"flex justify-end\">\n          <Button className=\"rounded-xl\" onClick={submit}>\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction TaskEditorDialog({ task, open, onOpenChange, onSave }) {\n  const [draft, setDraft] = useState(task);\n\n  useEffect(() => {\n    setDraft(task);\n  }, [task]);\n\n  if (!draft) return null;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"rounded-3xl sm:max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>Edit task</DialogTitle>\n          <DialogDescription>Update the task and due date without leaving the list.</DialogDescription>\n        </DialogHeader>\n        <div className=\"space-y-4\">\n          <Textarea value={draft.text} onChange={(e) => setDraft({ ...draft, text: e.target.value })} className=\"rounded-xl\" />\n          <Input type=\"date\" value={draft.dueDate || \"\"} onChange={(e) => setDraft({ ...draft, dueDate: e.target.value })} className=\"rounded-xl\" />\n          <div className=\"flex justify-end gap-2\">\n            <Button variant=\"outline\" className=\"rounded-xl\" onClick={() => onOpenChange(false)}>Cancel</Button>\n            <Button className=\"rounded-xl\" onClick={() => onSave(draft)}>Save</Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction NoteEditorDialog({ note, open, onOpenChange, onSave }) {\n  const [draft, setDraft] = useState(note);\n\n  useEffect(() => {\n    setDraft(note);\n  }, [note]);\n\n  if (!draft) return null;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"rounded-3xl sm:max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>Edit note</DialogTitle>\n          <DialogDescription>Update the note without losing context.</DialogDescription>\n        </DialogHeader>\n        <div className=\"space-y-4\">\n          <Textarea value={draft.text} onChange={(e) => setDraft({ ...draft, text: e.target.value })} className=\"rounded-xl\" />\n          <div className=\"flex justify-end gap-2\">\n            <Button variant=\"outline\" className=\"rounded-xl\" onClick={() => onOpenChange(false)}>Cancel</Button>\n            <Button className=\"rounded-xl\" onClick={() => onSave(draft)}>Save</Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction TasksView({ tasks, onToggleTask, onSaveTask }) {\n  const [editingTask, setEditingTask] = useState(null);\n\n  const active = [...tasks.filter((t) => !t.completed)].sort((a, b) => {\n    const aVal = daysAway(a.dueDate) ?? 9999;\n    const bVal = daysAway(b.dueDate) ?? 9999;\n    if (aVal !== bVal) return aVal - bVal;\n    return a.createdAt - b.createdAt;\n  });\n\n  return (\n    <>\n      <Card className=\"border-slate-200 bg-white shadow-sm\">\n        <CardHeader>\n          <CardTitle className=\"text-base\">Tasks</CardTitle>\n          <CardDescription>All tasks from nearest due date to furthest out.</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          {active.length ? active.map((task) => (\n            <div key={task.id} className=\"rounded-2xl border border-slate-200 p-3\">\n              <div className=\"flex items-start gap-3\">\n                <button onClick={() => onToggleTask(task.id)} className=\"text-slate-400 hover:text-slate-700\">\n                  {task.completed ? <CheckCircle2 className=\"h-5 w-5 text-emerald-600\" /> : <Circle className=\"h-5 w-5\" />}\n                </button>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"text-sm text-slate-800\">{task.text}</div>\n                  <div className=\"mt-1 flex flex-wrap gap-2 text-xs text-slate-500\">\n                    <Badge variant=\"outline\" className={tempTone(classifyTemp(task))}>{dueLabel(task.dueDate)}</Badge>\n                    <Badge variant=\"outline\">{dueWeekLabel(task.dueDate)}</Badge>\n                  </div>\n                </div>\n                <Button variant=\"outline\" size=\"sm\" className=\"rounded-xl\" onClick={() => setEditingTask(task)}>\n                  Edit\n                </Button>\n              </div>\n            </div>\n          )) : <p className=\"text-sm text-slate-500\">No active tasks.</p>}\n        </CardContent>\n      </Card>\n\n      <TaskEditorDialog\n        task={editingTask}\n        open={!!editingTask}\n        onOpenChange={(open) => !open && setEditingTask(null)}\n        onSave={(updatedTask) => {\n          onSaveTask(updatedTask);\n          setEditingTask(null);\n        }}\n      />\n    </>\n  );\n}\n\nfunction NotesView({ notes, onConvertNote, onAcknowledgeNote, onTogglePin, onSaveNote }) {\n  const [editingNote, setEditingNote] = useState(null);\n\n  return (\n    <>\n      <Card className=\"border-slate-200 bg-white shadow-sm\">\n        <CardHeader>\n          <CardTitle className=\"text-base\">Notes</CardTitle>\n          <CardDescription>Newest at the top. Use notes for context before deciding on action.</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          {notes.length ? notes.map((note) => (\n            <SharedNoteCard\n              key={`${note.sourceDate || \"today\"}-${note.id}`}\n              note={note}\n              onConvert={onConvertNote}\n              onAcknowledge={onAcknowledgeNote}\n              onTogglePin={onTogglePin}\n              onEdit={setEditingNote}\n            />\n          )) : <p className=\"text-sm text-slate-500\">No notes yet.</p>}\n        </CardContent>\n      </Card>\n\n      <NoteEditorDialog\n        note={editingNote}\n        open={!!editingNote}\n        onOpenChange={(open) => !open && setEditingNote(null)}\n        onSave={(updatedNote) => {\n          onSaveNote(updatedNote);\n          setEditingNote(null);\n        }}\n      />\n    </>\n  );\n}\n\nfunction RoutinesView({ onOpenRoutine }) {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-2\">\n      {Object.values(ROUTINES).map((routine) => {\n        const Icon = routine.icon;\n        return (\n          <Card key={routine.id} className=\"border-slate-200 bg-white shadow-sm\">\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-3 text-base\">\n                <Icon className=\"h-5 w-5\" />\n                {routine.label}\n              </CardTitle>\n              <CardDescription>{routine.description}</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              <div className=\"space-y-2 text-sm text-slate-600\">\n                {routine.steps.map((step, idx) => (\n                  <div key={step.title}>• {idx + 1}. {step.title}</div>\n                ))}\n              </div>\n              <Button className=\"rounded-2xl\" onClick={() => onOpenRoutine(routine.id)}>\n                Open routine\n                <ChevronRight className=\"ml-2 h-4 w-4\" />\n              </Button>\n            </CardContent>\n          </Card>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction RoutineDialog({\n  routineId,\n  open,\n  onOpenChange,\n  tasks,\n  onToggleTask,\n  onReassignTask,\n  noteDraft,\n  setNoteDraft,\n  onSaveNote,\n  notes,\n  onConvertNote,\n  onAcknowledgeNote,\n  onTogglePin,\n  onCompleteRoutine,\n}) {\n  const [stepIndex, setStepIndex] = useState(0);\n  const [morningTopThree, setMorningTopThree] = useState([]);\n\n  function defaultTopThree() {\n    return [...tasks.filter((t) => !t.completed)]\n      .sort((a, b) => {\n        const aVal = daysAway(a.dueDate) ?? 9999;\n        const bVal = daysAway(b.dueDate) ?? 9999;\n        if (aVal !== bVal) return aVal - bVal;\n        return a.createdAt - b.createdAt;\n      })\n      .slice(0, 3);\n  }\n\n  useEffect(() => {\n    if (open) {\n      setStepIndex(0);\n      setMorningTopThree(defaultTopThree());\n    }\n  }, [open, routineId]);\n\n  if (!routineId) return null;\n\n  const routine = ROUTINES[routineId];\n  const step = routine.steps[stepIndex];\n  const isLast = stepIndex === routine.steps.length - 1;\n  const hotTasks = tasks.filter((task) => !task.completed && classifyTemp(task) === \"hot\");\n  const weeklyNotesLocal = notes || [];\n  const unackWeeklyNotes = weeklyNotesLocal.filter((n) => !n.acknowledged);\n  const tomorrow = addDaysToDate(new Date(), 1);\n  const tomorrowTasks = tasks.filter((task) => !task.completed && task.dueDate === tomorrow);\n  const warmTasks = tasks.filter((task) => !task.completed && classifyTemp(task) === \"warm\");\n  const sortedWeeklyNotes = sortNotes(notes || []);\n\n  function moveMorningTask(idx, dir) {\n    const next = [...morningTopThree];\n    const newIdx = idx + dir;\n    if (newIdx < 0 || newIdx >= next.length) return;\n    [next[idx], next[newIdx]] = [next[newIdx], next[idx]];\n    setMorningTopThree(next);\n  }\n\n  function nextStep() {\n    if (routineId === \"evening\" && stepIndex === 1 && hotTasks.length > 0) return;\n    if (routineId === \"sunday\" && stepIndex === 0 && unackWeeklyNotes.length > 0) return;\n\n    if (isLast) {\n      onCompleteRoutine(routineId);\n      onOpenChange(false);\n      return;\n    }\n\n    setStepIndex((s) => s + 1);\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"rounded-3xl sm:max-w-2xl max-h-[80vh] overflow-y-auto\">\n        <DialogHeader>\n          <DialogTitle>{routine.label}</DialogTitle>\n          <DialogDescription>\n            Step {stepIndex + 1} of {routine.steps.length} — {step.title}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"space-y-5\">\n          <div className=\"h-2 overflow-hidden rounded-full bg-slate-100\">\n            <div\n              className=\"h-full rounded-full bg-slate-900 transition-all\"\n              style={{ width: `${((stepIndex + 1) / routine.steps.length) * 100}%` }}\n            />\n          </div>\n\n          <div>\n            <h3 className=\"font-serif text-2xl text-slate-900\">{step.title}</h3>\n            <p className=\"mt-2 text-sm leading-6 text-slate-600\">{step.body}</p>\n          </div>\n\n          {routineId === \"morning\" && (stepIndex === 0 || stepIndex === 1) ? (\n            <QuickCapture onAddTask={(text, dueDate) => onReassignTask(null, null, text)} />\n          ) : null}\n\n          {routineId === \"morning\" && stepIndex === 2 ? (\n            <div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\">\n              <div className=\"mb-3 text-sm text-slate-700\">\n                Default order is nearest due date first. Reorder the top 3 based on judgment. The first task is your MIT.\n              </div>\n              <div className=\"space-y-3\">\n                {morningTopThree.length ? morningTopThree.map((task, idx) => (\n                  <div key={task.id} className=\"flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white p-3\">\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"text-sm text-slate-900\">{idx + 1}. {task.text}</div>\n                      <div className=\"mt-1 flex flex-wrap gap-2 text-xs text-slate-500\">\n                        <Badge variant=\"outline\" className={tempTone(classifyTemp(task))}>{dueLabel(task.dueDate)}</Badge>\n                        {idx === 0 ? <Badge variant=\"outline\" className=\"border-emerald-200 bg-emerald-50 text-emerald-700\">MIT</Badge> : <Badge variant=\"outline\">Top 3</Badge>}\n                      </div>\n                    </div>\n                    <div className=\"flex gap-1\">\n                      <Button size=\"sm\" variant=\"outline\" className=\"rounded-xl\" onClick={() => moveMorningTask(idx, -1)} disabled={idx === 0}>↑</Button>\n                      <Button size=\"sm\" variant=\"outline\" className=\"rounded-xl\" onClick={() => moveMorningTask(idx, 1)} disabled={idx === morningTopThree.length - 1}>↓</Button>\n                    </div>\n                  </div>\n                )) : (\n                  <div className=\"rounded-2xl border border-slate-200 bg-white p-4 text-sm text-slate-500\">No active tasks to prioritize.</div>\n                )}\n              </div>\n            </div>\n          ) : null}\n\n          {routineId === \"evening\" && stepIndex === 0 ? (\n            <div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\">\n              <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Tomorrow preview</div>\n              <div className=\"space-y-2 text-sm text-slate-700\">\n                <div>• {tomorrowTasks.length} task{tomorrowTasks.length !== 1 ? \"s\" : \"\"} due tomorrow</div>\n                <div>• {warmTasks.length} task{warmTasks.length !== 1 ? \"s\" : \"\"} coming up</div>\n                <div className=\"pt-2 text-xs text-slate-500\">Awareness only — full prioritization happens in the morning.</div>\n              </div>\n            </div>\n          ) : null}\n\n          {routineId === \"evening\" && stepIndex === 1 ? (\n            <div className=\"rounded-2xl border border-red-200 bg-red-50/60 p-4\">\n              <div className=\"mb-3 text-xs font-medium uppercase tracking-[0.24em] text-red-700\">Hot tasks must be resolved now</div>\n              {hotTasks.length ? (\n                <div className=\"space-y-3\">\n                  {hotTasks.map((task) => (\n                    <div key={task.id} className=\"rounded-2xl border border-red-200 bg-white p-3 shadow-sm\">\n                      <div className=\"text-sm text-slate-900\">{task.text}</div>\n                      <div className=\"mt-2 text-xs text-slate-500\">Pick a new date or complete it now.</div>\n                      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n                        <Button size=\"sm\" className=\"rounded-xl\" onClick={() => onToggleTask(task.id)}>Complete</Button>\n                        <Input\n                          type=\"date\"\n                          value={task.dueDate || \"\"}\n                          onChange={(e) => onReassignTask(task.id, e.target.value)}\n                          className=\"w-auto min-w-[170px] rounded-xl\"\n                        />\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <p className=\"text-sm text-slate-600\">No hot tasks remain. You are clear for tomorrow.</p>\n              )}\n            </div>\n          ) : null}\n\n          {routineId === \"evening\" && stepIndex === 2 ? (\n            <div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\">\n              <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Leave a shared note</div>\n              <div className=\"flex gap-2\">\n                <Textarea\n                  placeholder=\"Anything your partner or future you should know...\"\n                  value={noteDraft}\n                  onChange={(e) => setNoteDraft(e.target.value)}\n                  className=\"rounded-xl\"\n                />\n                <Button className=\"rounded-xl\" onClick={onSaveNote}>\n                  <Plus className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            </div>\n          ) : null}\n\n          {routineId === \"sunday\" && stepIndex === 0 ? (\n            <div className=\"space-y-3\">\n              {sortedWeeklyNotes.length ? (\n                sortedWeeklyNotes.map((note) => (\n                  <div key={`${note.sourceDate}-${note.id}`} className=\"space-y-2\">\n                    <div className=\"text-xs uppercase tracking-[0.18em] text-slate-400\">{note.sourceDate}</div>\n                    <SharedNoteCard\n                      note={note}\n                      onConvert={onConvertNote}\n                      onAcknowledge={onAcknowledgeNote}\n                      onTogglePin={onTogglePin}\n                      onEdit={() => {}}\n                    />\n                  </div>\n                ))\n              ) : (\n                <div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-500\">No notes from the last 7 days to review.</div>\n              )}\n\n              {unackWeeklyNotes.length > 0 && (\n                <div className=\"rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\">\n                  Process all notes to continue ({unackWeeklyNotes.length} remaining)\n                </div>\n              )}\n            </div>\n          ) : null}\n\n          {routineId === \"sunday\" && stepIndex === 1 ? (\n            <div className=\"space-y-4\">\n              <div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\">\n                <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">All upcoming tasks</div>\n                <div className=\"space-y-3\">\n                  {[...tasks.filter((t) => !t.completed)]\n                    .sort((a, b) => (daysAway(a.dueDate) ?? 999) - (daysAway(b.dueDate) ?? 999))\n                    .map((task) => (\n                      <div key={task.id} className=\"rounded-2xl border border-slate-200 bg-white p-3\">\n                        <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n                          <div>\n                            <div className=\"text-sm text-slate-900\">{task.text}</div>\n                            <div className=\"mt-1 text-xs text-slate-500\">{dueWeekLabel(task.dueDate)}</div>\n                          </div>\n                          <div className=\"flex flex-wrap items-center gap-2\">\n                            <Badge variant=\"outline\" className={tempTone(classifyTemp(task))}>{dueLabel(task.dueDate)}</Badge>\n                            <input\n                              type=\"date\"\n                              value={task.dueDate || \"\"}\n                              onChange={(e) => onReassignTask(task.id, e.target.value)}\n                              className=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    ))}\n                </div>\n              </div>\n\n              <div className=\"rounded-2xl border border-slate-200 bg-white p-4\">\n                <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Add tasks for the week</div>\n                <QuickCapture onAddTask={(text, dueDate) => onReassignTask(null, null, text)} />\n              </div>\n            </div>\n          ) : null}\n\n          {routineId === \"sunday\" && stepIndex === 2 ? (\n            <div className=\"space-y-4\">\n              <div className=\"rounded-2xl border border-blue-200 bg-blue-50 p-4\">\n                <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-blue-700\">Weekly alignment checklist</div>\n                <div className=\"space-y-2 text-sm text-slate-700\">\n                  <div>☐ Hudson dropoff / pickup schedule confirmed</div>\n                  <div>☐ Work commitments aligned</div>\n                  <div>☐ Lexi / family coordination reviewed</div>\n                  <div>☐ Meals / key plans discussed</div>\n                  <div>☐ Any conflicts resolved</div>\n                </div>\n              </div>\n\n              <div className=\"rounded-2xl border border-slate-200 bg-white p-4\">\n                <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">Notes for partner</div>\n                <div className=\"flex gap-2\">\n                  <Textarea\n                    placeholder=\"Anything to align on for the week...\"\n                    value={noteDraft}\n                    onChange={(e) => setNoteDraft(e.target.value)}\n                    className=\"rounded-xl\"\n                  />\n                  <Button className=\"rounded-xl\" onClick={onSaveNote}>\n                    <Plus className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n              </div>\n\n              {/* NEW: Weekly Summary Output */}\n              <div className=\"rounded-2xl border border-emerald-200 bg-emerald-50 p-4\">\n                <div className=\"mb-2 text-xs font-medium uppercase tracking-[0.24em] text-emerald-700\">Weekly summary (share)</div>\n                <div className=\"text-sm text-slate-800 space-y-2\">\n                  <div><strong>📅 Upcoming Week:</strong> Review calendar together (external)</div>\n                  <div><strong>👶 Hudson Schedule:</strong> Confirm dropoff / pickup</div>\n                  <div><strong>💰 Cash Flow:</strong> Any large expenses next 30 days?</div>\n                  <div><strong>📊 Net Worth:</strong> Quick check (on track?)</div>\n                  <div><strong>⚠️ Risks / Action Items:</strong> Review top tasks</div>\n                  <div><strong>💬 Discussion Points:</strong> Notes above</div>\n                </div>\n                <div className=\"mt-3 text-xs text-slate-500\">Use this as your 1-page agenda with your partner.</div>\n              </div>\n            </div>\n          ) : null}\n\n          <div className=\"flex justify-between\">\n            <Button variant=\"outline\" className=\"rounded-2xl\" onClick={() => onOpenChange(false)}>\n              Close\n            </Button>\n            <Button\n              className=\"rounded-2xl\"\n              disabled={(routineId === \"evening\" && stepIndex === 1 && hotTasks.length > 0) || (routineId === \"sunday\" && stepIndex === 0 && unackWeeklyNotes.length > 0)}\n              onClick={nextStep}\n            >\n              {isLast ? \"Done\" : \"Next step\"}\n              {!isLast ? <ChevronRight className=\"ml-2 h-4 w-4\" /> : null}\n            </Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport default function HomeOSV2Prototype() {\n  const [data, setData] = useState(() => loadFromStorage() || seedData());\n  const [noteInput, setNoteInput] = useState(\"\");\n  const [page, setPage] = useState(\"today\");\n  const [activeRoutine, setActiveRoutine] = useState(null);\n  const [routineOpen, setRoutineOpen] = useState(false);\n  const [routineNoteDraft, setRoutineNoteDraft] = useState(\"\");\n  const [quickTaskOpen, setQuickTaskOpen] = useState(false);\n  const [quickNoteOpen, setQuickNoteOpen] = useState(false);\n\n  useEffect(() => {\n    saveToStorage(data);\n  }, [data]);\n\n  useEffect(() => {\n    function onKeyDown(e) {\n      const target = e.target;\n      const tag = target?.tagName;\n      const isTypingField = tag === \"INPUT\" || tag === \"TEXTAREA\" || tag === \"SELECT\" || target?.isContentEditable;\n      if (isTypingField) return;\n      if ((e.key === \"t\" || e.key === \"T\") && !routineOpen && !quickTaskOpen && !quickNoteOpen) {\n        e.preventDefault();\n        setQuickTaskOpen(true);\n      }\n      if ((e.key === \"n\" || e.key === \"N\") && !routineOpen && !quickTaskOpen && !quickNoteOpen) {\n        e.preventDefault();\n        setQuickNoteOpen(true);\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [routineOpen, quickTaskOpen, quickNoteOpen]);\n\n  const daily = getDailyRecord(data);\n  const weeklyNotes = getNotesFromLastDays(data, 7);\n  const homeNotes = weeklyNotes.filter((n) => !n.acknowledged);\n  const sortedNotes = weeklyNotes;\n  const unacknowledged = weeklyNotes.filter((n) => !n.acknowledged);\n  const activeTasks = useMemo(() => data.tasks.filter((t) => !t.completed), [data.tasks]);\n  const hotTasks = useMemo(\n    () => [...activeTasks].filter((t) => classifyTemp(t) === \"hot\").sort((a, b) => (daysAway(a.dueDate) ?? 999) - (daysAway(b.dueDate) ?? 999)),\n    [activeTasks]\n  );\n  const warmTasks = useMemo(\n    () => [...activeTasks].filter((t) => classifyTemp(t) === \"warm\").sort((a, b) => (daysAway(a.dueDate) ?? 999) - (daysAway(b.dueDate) ?? 999)),\n    [activeTasks]\n  );\n\n  function updateDaily(patch) {\n    setData((prev) => ({\n      ...prev,\n      days: {\n        ...(prev.days || {}),\n        [todayStr()]: { ...getDailyRecord(prev), ...patch },\n      },\n    }));\n  }\n\n  function addTask(text, dueDate = todayStr()) {\n    if (!text || !String(text).trim()) return;\n    setData((prev) => ({\n      ...prev,\n      tasks: [\n        {\n          id: uid(),\n          text: String(text).trim(),\n          dueDate,\n          completed: false,\n          createdAt: Date.now(),\n        },\n        ...prev.tasks,\n      ],\n    }));\n  }\n\n  function reassignTask(taskId, daysToAdd, adHocText) {\n    if (adHocText) {\n      addTask(adHocText);\n      return;\n    }\n\n    const nextDueDate = typeof daysToAdd === \"string\" ? daysToAdd : addDaysToDate(new Date(), daysToAdd);\n\n    setData((prev) => ({\n      ...prev,\n      tasks: prev.tasks.map((task) =>\n        task.id === taskId ? { ...task, dueDate: nextDueDate } : task\n      ),\n    }));\n  }\n\n  function saveTask(updatedTask) {\n    setData((prev) => ({\n      ...prev,\n      tasks: prev.tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task)),\n    }));\n  }\n\n  function toggleTask(id) {\n    setData((prev) => ({\n      ...prev,\n      tasks: prev.tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task)),\n    }));\n  }\n\n  function addNote(text) {\n    if (!text.trim()) return;\n    updateDaily({\n      eveningNotes: [\n        ...(daily.eveningNotes || []),\n        { id: uid(), text, createdAt: Date.now(), acknowledged: false, pinned: false },\n      ],\n    });\n    setNoteInput(\"\");\n  }\n\n  function acknowledgeNote(note) {\n    const targetDate = note.sourceDate || todayStr();\n    setData((prev) => ({\n      ...prev,\n      days: {\n        ...(prev.days || {}),\n        [targetDate]: {\n          ...getDailyRecord(prev, targetDate),\n          eveningNotes: (getDailyRecord(prev, targetDate).eveningNotes || []).map((n) =>\n            n.id === note.id ? { ...n, acknowledged: true } : n\n          ),\n        },\n      },\n    }));\n  }\n\n  function togglePin(note) {\n    const targetDate = note.sourceDate || todayStr();\n    setData((prev) => ({\n      ...prev,\n      days: {\n        ...(prev.days || {}),\n        [targetDate]: {\n          ...getDailyRecord(prev, targetDate),\n          eveningNotes: (getDailyRecord(prev, targetDate).eveningNotes || []).map((n) =>\n            n.id === note.id ? { ...n, pinned: !n.pinned } : n\n          ),\n        },\n      },\n    }));\n  }\n\n  function convertNoteToTask(note) {\n    const targetDate = note.sourceDate || todayStr();\n    setData((prev) => ({\n      ...prev,\n      tasks: [\n        {\n          id: uid(),\n          text: note.text,\n          dueDate: addDaysToDate(new Date(), 7),\n          completed: false,\n          createdAt: Date.now(),\n        },\n        ...prev.tasks,\n      ],\n      days: {\n        ...(prev.days || {}),\n        [targetDate]: {\n          ...getDailyRecord(prev, targetDate),\n          eveningNotes: (getDailyRecord(prev, targetDate).eveningNotes || []).map((n) =>\n            n.id === note.id ? { ...n, acknowledged: true } : n\n          ),\n        },\n      },\n    }));\n  }\n\n  function saveNote(updatedNote) {\n    const targetDate = updatedNote.sourceDate || todayStr();\n    setData((prev) => ({\n      ...prev,\n      days: {\n        ...(prev.days || {}),\n        [targetDate]: {\n          ...getDailyRecord(prev, targetDate),\n          eveningNotes: (getDailyRecord(prev, targetDate).eveningNotes || []).map((n) =>\n            n.id === updatedNote.id ? { ...n, text: updatedNote.text } : n\n          ),\n        },\n      },\n    }));\n  }\n\n  function openRoutine(routineId) {\n    setActiveRoutine(routineId);\n    setRoutineNoteDraft(\"\");\n    setRoutineOpen(true);\n  }\n\n  function completeRoutine(routineId) {\n    updateDaily({\n      routinesDone: Array.from(new Set([...(daily.routinesDone || []), routineId])),\n    });\n  }\n\n  function saveRoutineNote() {\n    if (!routineNoteDraft.trim()) return;\n    addNote(routineNoteDraft.trim());\n    setRoutineNoteDraft(\"\");\n  }\n\n  return (\n    <div className=\"min-h-screen bg-stone-50 text-slate-900\">\n      <div className=\"mx-auto max-w-5xl px-4 pb-16 pt-6\">\n        <div className=\"mb-6 flex items-center justify-between gap-4\">\n          <div>\n            <div className=\"text-xs font-medium uppercase tracking-[0.24em] text-slate-500\">168 / Home</div>\n            <h1 className=\"mt-2 font-serif text-3xl\">{greetingText()}.</h1>\n          </div>\n          <div className=\"text-sm text-slate-600 flex items-center gap-2\">🔥 {computeStreak(data)} day streak {computeStreak(data) > 0 && <span className=\"text-emerald-600\">• building momentum</span>}</div>\n        </div>\n\n        <div className=\"mb-6 grid gap-2 rounded-3xl border border-slate-200 bg-white p-2 shadow-sm md:grid-cols-4\">\n          {[\n            { id: \"today\", label: \"Today\", icon: Home },\n            { id: \"tasks\", label: \"Tasks\", icon: ListTodo },\n            { id: \"notes\", label: \"Notes\", icon: Eye },\n            { id: \"routines\", label: \"Routines\", icon: Repeat },\n          ].map((item) => {\n            const Icon = item.icon;\n            const active = page === item.id;\n            return (\n              <button\n                key={item.id}\n                onClick={() => setPage(item.id)}\n                className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm transition ${active ? \"bg-slate-900 text-white\" : \"text-slate-600 hover:bg-slate-50\"}`}\n              >\n                <Icon className=\"h-4 w-4\" />\n                {item.label}\n              </button>\n            );\n          })}\n        </div>\n\n        {page === \"today\" ? (\n          <div className=\"space-y-6\">\n            <NextActionCard\n              onOpenRoutine={openRoutine}\n              onOpenTasks={() => setPage(\"tasks\")}\n              onPullForward={() => {\n                const future = [...activeTasks]\n                  .filter((t) => classifyTemp(t) !== \"hot\")\n                  .sort((a, b) => (daysAway(a.dueDate) ?? 9999) - (daysAway(b.dueDate) ?? 9999));\n                if (future.length) {\n                  reassignTask(future[0].id, todayStr());\n                }\n              }}\n              hasCompletedEvening={(daily.routinesDone || []).includes(\"evening\")}\n              hasCompletedMorning={(daily.routinesDone || []).includes(\"morning\")}\n              hotTaskCount={hotTasks.length}\n              futureTaskCount={activeTasks.filter((t) => classifyTemp(t) !== \"hot\").length}\n            />\n\n            <QuickCapture onAddTask={addTask} />\n\n            <div className=\"grid gap-4 md:grid-cols-2\">\n              <Card className=\"border-slate-200 bg-white shadow-sm\">\n                <CardHeader>\n                  <CardTitle className=\"text-base\">Today at a glance</CardTitle>\n                  <CardDescription>The few things that matter right now.</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-3\">\n                  {hotTasks.length ? hotTasks.map((task) => <TaskMiniRow key={task.id} task={task} onToggleTask={toggleTask} />) : <p className=\"text-sm text-slate-500\">Nothing urgent.</p>}\n                </CardContent>\n              </Card>\n\n              <Card className=\"border-slate-200 bg-white shadow-sm\">\n                <CardHeader>\n                  <CardTitle className=\"text-base\">Coming up</CardTitle>\n                  <CardDescription>What is due soon, before it becomes urgent.</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-3\">\n                  {warmTasks.length ? warmTasks.map((task) => <TaskMiniRow key={task.id} task={task} onToggleTask={toggleTask} />) : <p className=\"text-sm text-slate-500\">Nothing coming up soon.</p>}\n                </CardContent>\n              </Card>\n            </div>\n\n            <Card className=\"border-slate-200 bg-white shadow-sm\">\n              <CardHeader>\n                <CardTitle className=\"flex items-center justify-between gap-4 text-base\">\n                  <span>Shared notes</span>\n                  <span className=\"text-xs text-slate-500\">{unacknowledged.length} new</span>\n                </CardTitle>\n                <CardDescription>Keep important context visible, not buried in messages.</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                {unacknowledged.length > 0 && (\n                  <div className=\"rounded-xl border border-blue-200 bg-blue-50 p-3 text-sm text-blue-700\">\n                    Review {unacknowledged.length} new note{unacknowledged.length > 1 ? \"s\" : \"\"}\n                  </div>\n                )}\n\n                <div className=\"flex gap-2\">\n                  <Textarea\n                    placeholder=\"Add a note for your partner or future you...\"\n                    value={noteInput}\n                    onChange={(e) => setNoteInput(e.target.value)}\n                    className=\"rounded-xl\"\n                  />\n                  <Button className=\"rounded-xl\" onClick={() => addNote(noteInput)}>\n                    <Plus className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n\n                {homeNotes.length ? (\n                  homeNotes.map((note) => (\n                    <SharedNoteCard\n                      key={`${note.sourceDate || \"today\"}-${note.id}`}\n                      note={note}\n                      onConvert={convertNoteToTask}\n                      onAcknowledge={acknowledgeNote}\n                      onTogglePin={togglePin}\n                      onEdit={() => {}}\n                    />\n                  ))\n                ) : (\n                  <p className=\"text-sm text-slate-500\">No notes yet.</p>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        ) : null}\n\n        {page === \"tasks\" ? <TasksView tasks={data.tasks} onToggleTask={toggleTask} onSaveTask={saveTask} /> : null}\n        {page === \"notes\" ? <NotesView notes={sortedNotes} onConvertNote={convertNoteToTask} onAcknowledgeNote={acknowledgeNote} onTogglePin={togglePin} onSaveNote={saveNote} /> : null}\n        {page === \"routines\" ? <RoutinesView onOpenRoutine={openRoutine} /> : null}\n      </div>\n\n      <RoutineDialog\n        routineId={activeRoutine}\n        open={routineOpen}\n        onOpenChange={setRoutineOpen}\n        tasks={data.tasks}\n        onToggleTask={toggleTask}\n        onReassignTask={reassignTask}\n        noteDraft={routineNoteDraft}\n        setNoteDraft={setRoutineNoteDraft}\n        onSaveNote={saveRoutineNote}\n        notes={weeklyNotes}\n        onConvertNote={convertNoteToTask}\n        onAcknowledgeNote={acknowledgeNote}\n        onTogglePin={togglePin}\n        onCompleteRoutine={completeRoutine}\n      />\n\n      <Dialog open={quickTaskOpen} onOpenChange={setQuickTaskOpen}>\n        <DialogContent className=\"rounded-3xl sm:max-w-lg\">\n          <DialogHeader>\n            <DialogTitle>Quick task</DialogTitle>\n            <DialogDescription>Press T anytime to capture a task with a due date.</DialogDescription>\n          </DialogHeader>\n          <QuickCapture\n            onAddTask={(text, dueDate) => {\n              addTask(text, dueDate);\n              setQuickTaskOpen(false);\n            }}\n          />\n        </DialogContent>\n      </Dialog>\n\n      <Dialog open={quickNoteOpen} onOpenChange={setQuickNoteOpen}>\n        <DialogContent className=\"rounded-3xl sm:max-w-lg\">\n          <DialogHeader>\n            <DialogTitle>Quick note</DialogTitle>\n            <DialogDescription>Press N anytime to capture context for later.</DialogDescription>\n          </DialogHeader>\n          <QuickNoteCapture\n            onAddNote={(text) => {\n              addNote(text);\n              setQuickNoteOpen(false);\n            }}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","16066725711395644832","traceTime",1781990786924]
</article></body></html>