/* web-tabs.jsx — Log, History, Insights tab content for the web shell */
// ═══════════════════════════════════════════════════════════════
// LOG TAB
// ═══════════════════════════════════════════════════════════════
function WebLog({ scenario, tdee = TDEE, windowDays = 3, onUpdateDailyIntake, unitSystem = 'metric' }) {
if (scenario.dailyTotalOnly) {
return
{/* LEFT — timeline */}
{/* search input */}
{/* recents row */}
recent
{FOOD_LIBRARY.slice(0, 5).map((f, i) => (
{f.kcal}
))}
{/* timeline */}
{slotOrder.map((slot, idx) => (
{slot}
{mealsBySlot[slot].reduce((s, m) => s + m.kcal, 0)} kcal
{mealsBySlot[slot].length === 0 ? (
+
add a {slot}
) : (
mealsBySlot[slot].map((m, i) =>
)
)}
))}
{/* RIGHT — totals + macros + suggestions */}
{/* today header */}
{totals.kcal.toLocaleString()}
/ {TDEE.toLocaleString()} kcal
{TDEE - totals.kcal > 0
? `${TDEE - totals.kcal} kcal of headroom before you cross maintenance.`
: `${totals.kcal - TDEE} kcal above maintenance today.`}
{/* daily progress bar */}
{FOOD_LIBRARY.slice(0, 6).map((f, i) => (
{f.name}
{f.kcal} kcal
))}
date
daily total
save day
{days.map((day, index) => {
const key = day.dateKey || day.date;
const isLogged = day.dayStatus === 'logged' || day.intakeSource === 'logged';
const zone = Number.isFinite(day.balance) ? classify(day.balance, tdee) : null;
const color = zone ? ZONES[zone].hex : 'var(--ink-3)';
const balanceLabel = Number.isFinite(day.balance) ? (day.balance >= 0 ? `+${day.balance}` : `${day.balance}`) : 'N/A';
return (
{day.dow}
{displayDate(day.date)}
kcal
{balanceLabel}
{isLogged ? 'logged' : 'empty'}
{zone || 'N/A'}
);
})}
{Number.isFinite(today.intake) ? today.intake.toLocaleString() : 'N/A'}
{Number.isFinite(today.intake) ? 'kcal intake' : 'no total logged'}
{reading.state}.
{todayStatusBody(reading, unitSystem)}
);
}
function dailyTotalInputStyle(fontSize = 18) {
return {
width: '100%',
minWidth: 0,
boxSizing: 'border-box',
background: 'transparent',
border: 'none',
outline: 'none',
color: 'var(--ink)',
fontFamily: "'JetBrains Mono', monospace",
fontSize,
fontVariantNumeric: 'tabular-nums',
};
}
function MealRow({ meal }) {
return (
{meal.time}
{meal.kcal} kcal
);
}
function MacroPip({ color, label, g }) {
return (
{label} {g}g
);
}
function DailyBar({ consumed, target }) {
const pct = Math.min(1, consumed / target);
return (
0
{Math.round(pct * 100)}%
{target}
);
}
function MacroRing({ label, value, target, unit, color }) {
const pct = Math.min(1, value / target);
const R = 30, C = 2 * Math.PI * R;
return (
{label}
of {target}{unit}
);
}
// ═══════════════════════════════════════════════════════════════
// HISTORY TAB
// ═══════════════════════════════════════════════════════════════
function WebHistory({ scenario, tdee = TDEE, windowDays = 3 }) {
const isNarrow = useIsNarrow();
const history = scenario.dailyTotalOnly
? scenario.days.map((day) => ({ ...day, dateObj: parseEntryDate(day), label: displayDate(day.date) }))
: HISTORY.map((day) => ({ ...day, dateObj: day.date }));
if (history.length === 0) {
return
{/* LEFT — calendar */}
0 ? '+' : ''}${Math.round(overallAvg)} kcal/day`}
/>
{/* day-of-week header */}
{['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'].map((d) => (
{d}
))}
{grid.map((cell, i) => {
if (cell === null) {
return
;
}
if (cell === 'future') {
return (
);
}
const idx = history.indexOf(cell);
const isToday = idx === todayIdx;
const isSelected = idx === selectedIdx;
const isLogged = cell.intakeSource === 'logged' && Number.isFinite(cell.balance);
return (
setSelectedIdx(idx)} style={{
background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
display: 'flex', justifyContent: 'center', aspectRatio: '1 / 1',
position: 'relative',
}}>
{isLogged
?
);
})}
legend
fluid level = caloric balance
{/* RIGHT — selected day + stats */}
{label}
);
}
function EmptyCalendarDay({ label, isToday, size = 82 }) {
return (
{label}
N/A
);
}
function MiniSummary({ label, value, unit }) {
return (
);
}
function getZoneStreaks(days, tdee) {
const streaks = {
gaining: { count: 0, startLabel: '' },
keeping: { count: 0, startLabel: '' },
losing: { count: 0, startLabel: '' },
};
const current = {
gaining: { count: 0, startLabel: '' },
keeping: { count: 0, startLabel: '' },
losing: { count: 0, startLabel: '' },
};
days.forEach((day) => {
const dayZone = day.intakeSource === 'logged' && Number.isFinite(day.balance)
? classify(day.balance, tdee)
: null;
Object.keys(current).forEach((zone) => {
if (dayZone === zone) {
if (current[zone].count === 0) current[zone].startLabel = day.label || displayDate(day.date);
current[zone].count += 1;
if (current[zone].count > streaks[zone].count) {
streaks[zone] = { ...current[zone] };
}
} else {
current[zone] = { count: 0, startLabel: '' };
}
});
});
return streaks;
}
function ZoneStreakRow({ zone, streak }) {
const color = ZONES[zone].hex;
return (
{streak.count}
{zone} days
{streak.count ? `started ${streak.startLabel.toLowerCase()}` : 'N/A'}
);
}
function WeeklyBars({ weeks, tdee = TDEE }) {
// each bar: vertical, anchored at center line. up = gaining (rust), down = losing (moss).
const H = 80;
const max = Math.max(800, ...weeks.map((w) => Math.abs(w.avg || 0))) * 1.1;
return (
{/* center axis */}
{weeks.map((w, i) => {
if (w.avg == null) {
return (
);
}
const zone = classify(w.avg, tdee);
const color = ZONES[zone].hex;
const h = Math.abs(w.avg) / max * (H / 2);
const top = w.avg >= 0 ? H / 2 - h : H / 2;
return (
w{i + 1}
= 0 ? top - 14 : top + h + 2,
fontSize: 10, color: 'var(--ink-2)',
}}>{w.avg > 0 ? '+' : ''}{Math.round(w.avg)}
);
})}
{/* Projection hero */}
{hasLoggedDays ? <>at this pace, in four weeks {' '}
you'll be{' '} : <>projection is{' '}}
{endWeight}
{hasLoggedDays && {weightLabel} }.
{hasLoggedDays
? <>That's {projSign}{proj4w} {weightLabel} from today's {startWeightDisplay} {weightLabel} — assuming the recent logged days continue.
This is a simple estimate from calorie balance, not a recommendation.
: <>N/A until at least one daily total is logged.}
{/* insight cards */}
{hasPatternData ?
{scenario.dailyTotalOnly ?
0 ? '+' : ''}${Math.round(loggedAvg)}`} text="kcal/day average on logged days." color={accent} />
{/* axes */}
{kg.toFixed ? kg.toFixed(1) : kg}
))}
{/* x labels */}
today
+ 4 weeks
{/* historical (solid grey) */}
`${histX(p.w)},${yScale(p.kg)}`).join(' ')}
fill="none" stroke="var(--ink-2)" strokeWidth="1.6"
/>
{/* projected (accent dashed → solid gradient) */}
`${projX(p.w)},${yScale(p.kg)}`).join(' ')}
fill="none" stroke={accent} strokeWidth="2.2" strokeDasharray="0"
/>
{/* endpoint dot */}
);
}
function InsightCard({ title, eyebrow, children }) {
return (
);
}
function DowChart({ dowAvg, tdee = TDEE }) {
const labels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const max = Math.max(...dowAvg.map(Math.abs)) * 1.15 || 500;
const H = 110;
return (
{dowAvg.map((v, i) => {
const zone = classify(v, tdee);
const color = ZONES[zone].hex;
const h = Math.abs(v) / max * (H / 2 - 8);
const top = v >= 0 ? H / 2 - h : H / 2;
return (
);
})}
);
}
function EmptyDataView({ title, detail }) {
return (
);
}
function InsufficientData({ label, detail }) {
return (
{label}
{detail && {detail} }
);
}
function DailyTotalSummary({ days, tdee }) {
if (days.length === 0) {
return
{days.map((day, index) => {
const zone = classify(day.balance, tdee);
const color = ZONES[zone].hex;
const width = Math.max(8, Math.abs(day.balance) / max * 100);
return (
{displayDate(day.date)}
{day.balance > 0 ? '+' : ''}{day.balance}
);
})}
{h}
);
})}
{meals.map((m, i) => {
const [hh, mm] = m.time.split(':').map(Number);
const t = (hh + mm / 60) / 24;
const a = t * Math.PI * 2 - Math.PI / 2;
const x = cx + Math.cos(a) * R, y = cy + Math.sin(a) * R;
const r = Math.max(3, Math.sqrt(m.kcal) / 6);
return (
{meals.length} meals
);
}
function ObsList({ children }) {
return {children}
;
}
function Obs({ hi, text, color }) {
return (
{hi}
{text}
);
}
function parseEntryDate(day) {
if (day.dateObj instanceof Date) return day.dateObj;
const parsed = new Date(day.date);
if (!Number.isNaN(parsed.getTime())) return parsed;
const fallback = new Date();
fallback.setDate(day.d || fallback.getDate());
return fallback;
}
Object.assign(window, { WebLog, WebHistory, WebInsights });