{cells.map((day,i)=>{
if(day===null){return
;}
const now=new Date();const isToday=day===now.getDate()&&cur.month===now.getMonth()&&cur.year===now.getFullYear();
const evts=getEvts(day);
return(
setSelectedDay(selectedDay===day?null:day)} style={{aspectRatio:"1",display:DF,flexDirection:"column",alignItems:AC,justifyContent:"center",borderRadius:10,background:isToday?T.accent:selectedDay===day?T.accentDim:"transparent",position:"relative",cursor:CP,border:selectedDay===day?`1px solid ${T.accent}`:"1px solid transparent"}}>
{day}
{evts.length>0&&!isToday&&
}
);
})}
{selectedDay&&(()=>{const ds=`${cur.year}-${String(cur.month+1).padStart(2,"0")}-${String(selectedDay).padStart(2,"0")}`;const dayTaskEvts=data.tasks.filter(t=>t.due===ds).map(t=>({id:"task-"+t.id,title:t.text,date:t.due,time:t.dueTime||"",color:T.accent,isTask:true,taskId:t.id}));const dayEvts=[...data.events.filter(e=>e.date===ds),...dayTaskEvts];return(
{MONTHS[cur.month].toUpperCase()} {selectedDay}
{dayEvts.length===0?
Nothing scheduled
:dayEvts.map((e,i)=>(
{e.title}
{e.time&&
{e.time}
}
{ev.stopPropagation();if(e.isTask){setData(d=>({...d,tasks:d.tasks.filter(t=>t.id!==e.taskId)}));}else{setData(d=>({...d,events:d.events.filter(ex=>ex.id!==e.id)}));}}} style={{background:"none",border:"none",color:T.text3,cursor:CP,fontSize:18,fontFamily:FI}}>× ))}
);})()}
UPCOMING
{upcoming.length===0&&
No events yet
}
{upcoming.map((e,i)=>(
{e.title}
{e.date}{e.time?` · ${e.time}`:""}
{e2.stopPropagation();if(e.isTask){setData(d=>({...d,tasks:d.tasks.filter(t=>t.id!==e.taskId)}));}else{setData(d=>({...d,events:d.events.filter(ev=>ev.id!==e.id)}));}}} style={{background:"none",border:"none",color:T.text3,cursor:CP,fontSize:20,padding:"0 0 0 8px",lineHeight:1,fontFamily:FI,flexShrink:0}}>×
))}
);
}
function HealthScreen({data,setData}){
const h=data.health;
const [mode,setMode]=useState("log"); // "log" | "scan"
const [ff,setFf]=useState({name:"",calories:"",protein:"",carbs:"",fat:"",meal:"Breakfast"});
const [sff,setSff]=useState(false);
const [scanning,setScanning]=useState(false);
const [scanResult,setScanResult]=useState(null);
const [cg,setCg]=useState("");const [sg,setSg]=useState("");
const fileRef=useRef(null);
const ts=h.steps[h.steps.length-1]?.count||0;
const sp=Math.min(100,Math.round((ts/h.stepGoal)*100));
const tc=h.foodLog.reduce((s,f)=>s+f.calories,0);
const cp=h.calorieGoal>0?Math.min(100,Math.round((tc/h.calorieGoal)*100)):0;
const mx=Math.max(...h.steps.map(s=>s.count),h.stepGoal,1);
const MEALS=["Breakfast","Lunch","Dinner","Snack"];
const scanImage=async(file)=>{
if(!file||scanning)return;
setScanning(true);setScanResult(null);
const reader=new FileReader();
reader.onload=async(e)=>{
const b64=e.target.result.split(",")[1];
const mediaType=file.type||"image/jpeg";
try{
const res=await fetch("/functions/claude",{
method:"POST",headers:{"Content-Type":"application/json"},
body:JSON.stringify({
model:"claude-sonnet-4-6",max_tokens:500,
messages:[{role:"user",content:[
{type:"image",source:{type:"base64",media_type:mediaType,data:b64}},
{type:"text",text:`Analyze this food image or nutrition label. Return ONLY valid JSON (no markdown):
{"name":"food name","calories":0,"protein":0,"carbs":0,"fat":0,"sugar":0,"meal":"Breakfast","confidence":"high|medium|low","note":"brief note"}
Estimate portion size if needed. If it's a nutrition label, use the per-serving values.`}
]}]
})
});
const result=await res.json();
const text=result.content?.[0]?.text||"";
const clean=text.replace(/```json|```/g,"").trim();
const parsed=JSON.parse(clean);
setScanResult(parsed);
setFf({name:parsed.name||"",calories:String(parsed.calories||""),protein:String(parsed.protein||""),carbs:String(parsed.carbs||""),fat:String(parsed.fat||""),meal:parsed.meal||"Breakfast"});
}catch(err){setScanResult({error:"Couldn't read that image. Try a clearer photo."});}
setScanning(false);
};
reader.readAsDataURL(file);
};
const addFood=()=>{
if(!ff.name||!ff.calories)return;
const entry={id:Date.now(),name:ff.name,calories:+ff.calories,protein:+ff.protein||0,carbs:+ff.carbs||0,fat:+ff.fat||0,meal:ff.meal};
setData(d=>({...d,health:{...d.health,foodLog:[...d.health.foodLog,entry]}}));
setFf({name:"",calories:"",protein:"",carbs:"",fat:"",meal:"Breakfast"});
setSff(false);setScanResult(null);
};
const removeFood=id=>setData(d=>({...d,health:{...d.health,foodLog:d.health.foodLog.filter(f=>f.id!==id)}}));
return(
STEPS TODAY
{ts.toLocaleString()}
of {h.stepGoal.toLocaleString()} · {sp}%
7-DAY STEPS
{h.steps.map((d,i)=>{const hp=(d.count/mx)*100;const it=i===h.steps.length-1;return(
{d.count>=1000?(d.count/1000).toFixed(1)+"k":d.count||"–"}
{d.date.split(" ")[1]}
);})}
CALORIES
{tc}
{Math.max(0,h.calorieGoal-tc)} kcal remaining
{h.foodLog.length>0&&(()=>{
const protein=h.foodLog.reduce((s,f)=>s+(f.protein||0),0);
const carbs=h.foodLog.reduce((s,f)=>s+(f.carbs||0),0);
const fat=h.foodLog.reduce((s,f)=>s+(f.fat||0),0);
return(
MACROS TODAY
{[["Protein",protein,"g"],["Carbs",carbs,"g"],["Fat",fat,"g"]].map(([label,val,unit])=>(
{val}
{label.toUpperCase()}
))}
);
})()}
FOOD LOG
fileRef.current?.click()} style={{fontSize:13,fontWeight:600,color:T.text2,background:"none",border:"none",cursor:CP,fontFamily:FI,letterSpacing:LS,marginRight:6}}>⊡ Scan
setSff(v=>!v)} style={{fontSize:13,fontWeight:600,color:T.accent,background:"none",border:"none",cursor:CP,fontFamily:FI,letterSpacing:LS}}>+ Add
scanImage(e.target.files[0])}/>
{scanning&&(
Analyzing your food...
Claude is reading the nutrition info
)}
{(sff||scanResult)&&!scanning&&(
)}
{MEALS.map(meal=>{
const items=h.foodLog.filter(f=>f.meal===meal);if(!items.length)return null;
return(
{meal.toUpperCase()}
{items.reduce((s,f)=>s+f.calories,0)} kcal
{items.map((item,i)=>(
{item.name}
{(item.protein||item.carbs||item.fat)>0&&
P:{item.protein||0}g · C:{item.carbs||0}g · F:{item.fat||0}g
}
{item.calories}
{e.stopPropagation();removeFood(item.id);}} style={{background:"none",border:"none",color:T.text3,cursor:CP,fontSize:18,padding:"0 0 0 8px",fontFamily:FI}}>×
))}
);
})}
);
}
function HabitsScreen({data,setData}){
const todayStr=new Date().toISOString().split("T")[0];
const [form,setForm]=useState({name:"",icon:"◈",notifTime:"08:00"});
const [sf,setSf]=useState(false);
const ICONS=["◈","◉","◎","◇","◆","▦","▤","✦","◐","◑","⊕","⊗","⊞","⊟","◫","▷","◸","⬡","⌘","⊹"];
const toggle=(habitId)=>{
setData(d=>({...d,habits:d.habits.map(h=>{
if(h.id!==habitId)return h;
const done=h.completedDates.includes(todayStr);
return{...h,completedDates:done?h.completedDates.filter(dd=>dd!==todayStr):[...h.completedDates,todayStr]};
})}));
};
const addHabit=()=>{
if(!form.name.trim())return;
setData(d=>({...d,habits:[...d.habits,{id:Date.now(),name:form.name,icon:form.icon,notifTime:form.notifTime,completedDates:[]}]}));
setForm({name:"",icon:"◈",notifTime:"08:00"});setSf(false);
};
const removeHabit=id=>setData(d=>({...d,habits:d.habits.filter(h=>h.id!==id)}));
const getStreak=(habit)=>{
let streak=0;
const d=new Date();
let maxIter=400;
while(maxIter-->0){
const ds=`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
if(!habit.completedDates.includes(ds))break;
streak++;d.setDate(d.getDate()-1);
}
return streak;
};
const last7=Array.from({length:7},(_,i)=>{
const d=new Date();d.setDate(d.getDate()-6+i);
return`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
});
return(
Habits
{data.habits.filter(h=>h.completedDates.includes(todayStr)).length}/{data.habits.length} done today
setSf(v=>!v)} className="icon-btn" style={{width:42,height:42,fontSize:22}}>+
{sf&&(
setForm(f=>({...f,name:e.target.value}))} autoFocus/>
PICK AN ICON
{ICONS.map(ic=>(
setForm(f=>({...f,icon:ic}))} style={{width:40,height:40,borderRadius:10,border:`1.5px solid ${form.icon===ic?T.accent:T.border2}`,background:form.icon===ic?T.accentDim:T.surface3,display:DF,alignItems:AC,justifyContent:"center",fontSize:20,cursor:CP,transition:"all .15s"}}>{ic}
))}
◬ Remind me at
Add Habit
setSf(false)}>Cancel
)}
{data.habits.map(habit=>{
const done=habit.completedDates.includes(todayStr);
const streak=getStreak(habit);
return(
{habit.icon}
{habit.name}
{streak > 0?`${streak} day streak`:"No streak yet"}
{habit.notifTime&&
· ◬ {habit.notifTime}
}
{e.stopPropagation();removeHabit(habit.id);}} style={{background:"none",border:"none",color:T.text3,cursor:CP,fontSize:18,padding:0,fontFamily:FI,marginRight:8}}>×
toggle(habit.id)} style={{width:36,height:36,borderRadius:10,border:`2px solid ${done?T.accent:T.border2}`,background:done?T.accentDim:"transparent",display:DF,alignItems:AC,justifyContent:"center",cursor:CP,transition:"all .2s",fontSize:18,color:done?T.accent:T.text3}}>
{done?"✓":"○"}
{last7.map((ds,i)=>{
const completed=habit.completedDates.includes(ds);
const isToday=ds===todayStr;
return(
);
})}
{["M1","M2","M3","M4","M5","M6","7"].map((d,i)=>(
{last7[i].split("-")[2]}
))}
);
})}
);
}
function JournalScreen({data,setData}){
const todayStr=new Date().toISOString().split("T")[0];
const [writing,setWriting]=useState(false);
const [content,setContent]=useState("");
const [loadingPrompt,setLoadingPrompt]=useState(false);
const [prompt,setPrompt]=useState("");
const todayEntry=data.journal.find(j=>j.date===todayStr);
const saveMood=(moodKey)=>{
setData(d=>{
const exists=d.journal.some(j=>j.date===todayStr);
if(exists)return{...d,journal:d.journal.map(j=>j.date===todayStr?{...j,mood:moodKey}:j)};
return{...d,journal:[...d.journal,{id:Date.now(),date:todayStr,content:"",mood:moodKey}]};
});
};
const saveEntry=()=>{
if(!content.trim())return;
setData(d=>{
const existing=d.journal.find(j=>j.date===todayStr);
return{...d,journal:[...d.journal.filter(j=>j.date!==todayStr),{id:Date.now(),date:todayStr,content:content.trim(),mood:existing?.mood||""}]};
});
setWriting(false);
};
const getPrompt=async()=>{
setLoadingPrompt(true);
try{
const res=await fetch("/functions/claude",{
method:"POST",headers:{"Content-Type":"application/json"},
body:JSON.stringify({model:"claude-sonnet-4-6",max_tokens:150,messages:[{role:"user",content:"Give me one thoughtful, specific daily journal reflection prompt. Just the question, no intro. Make it introspective and meaningful. Max 20 words."}]})
});
const result=await res.json();
setPrompt(result.content?.[0]?.text?.trim()||"What made today meaningful?");
}catch{setPrompt("What made today meaningful?");}
setLoadingPrompt(false);
};
return(
{new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"})}
{!writing&&
{setWriting(true);setContent(todayEntry?.content||"");}} className="icon-btn" style={{width:42,height:42,fontSize:20}}>{todayEntry?"✎":"+"} }
{!writing&&(
HOW ARE YOU FEELING?
{MOODS.map(m=>{
const sel=todayEntry?.mood===m.key;
return(
saveMood(m.key)} className="tappable" style={{flex:1,display:DF,flexDirection:"column",alignItems:AC,gap:5,padding:"10px 4px",background:sel?m.color+"33":"transparent",border:`1.5px solid ${sel?m.color:T.border}`,borderRadius:12,cursor:CP,transition:"all .15s"}}>
{m.icon}
{m.label.toUpperCase()}
);
})}
{todayEntry?.content?(
TODAY
{todayEntry.mood&&
{MOODS.find(m=>m.key===todayEntry.mood)?.icon} }
{todayEntry.content}
):(
setWriting(true)}>
✎
{todayEntry?.mood&&
{MOODS.find(m=>m.key===todayEntry.mood)?.icon} {MOODS.find(m=>m.key===todayEntry.mood)?.label}
}
Write today's entry
Capture your thoughts
REFLECTION PROMPT
{loadingPrompt?"...":"✦ New"}
{prompt||"Tap ✦ New for a reflection prompt from TDI"}
{prompt&&
{setWriting(true);setContent(todayEntry?.content||"");}} style={{...R(),gap:6,marginTop:12,fontSize:12,fontWeight:600,color:T.accent,background:"none",border:"none",cursor:CP,fontFamily:FI}}>Write about this → }
{data.journal.filter(j=>j.date!==todayStr&&(j.content||j.mood)).length>0&&(
PAST ENTRIES
{data.journal.filter(j=>j.date!==todayStr&&(j.content||j.mood)).sort((a,b)=>b.date.localeCompare(a.date)).map((entry,i,arr)=>(
{setContent(entry.content||"");setWriting(true);}}>
{entry.date}
{entry.mood&&
{MOODS.find(m=>m.key===entry.mood)?.icon} }
{entry.content
?
{entry.content}
:
Mood only
}
)}
)}
{writing&&(
{MOODS.map(m=>{
const sel=todayEntry?.mood===m.key;
return(
saveMood(m.key)} className="tappable" style={{flex:1,display:DF,flexDirection:"column",alignItems:AC,gap:3,padding:"8px 4px",background:sel?m.color+"33":"transparent",border:`1.5px solid ${sel?m.color:T.border}`,borderRadius:10,cursor:CP,transition:"all .15s"}}>
{m.icon}
{m.label.toUpperCase()}
);
})}
{prompt&&
{prompt}
}