{/* ── Hero header ────────────────────────────────────────── */}
{/* Progress bar */}
{plan && (
)}
{/* ── Initial-load skeleton — covers widget row + timeline ───────── */}
{loading && !plan && (
{dateLabel}
{greeting},{" "} {user.firstName}.
{currentRole}{jobContext?.company ? ` · ${jobContext.company}` : ""}
{plan && (
Day {completedDays + 1} of {plan.days} · {progressPct}% done
)}
{subscriptionPlan !== "free" && (() => {
const remaining = sessionUsage.limit - sessionUsage.used;
const pct = (sessionUsage.used / sessionUsage.limit) * 100;
const barColor = remaining <= 5 ? "#dc2626" : remaining <= 10 ? "#d97706" : "var(--gr-green-500)";
return (
);
})()}
{remaining}
of {sessionUsage.limit} sessions left this month
{/* Streak */}
{streak.current > 0 && (() => {
const today = new Date().toISOString().slice(0, 10);
const lastDate = streak.last;
const isToday = lastDate === today;
const isAtRisk = !isToday && (() => {
if (!lastDate) return false;
const diff = (new Date(today) - new Date(lastDate)) / 86400000;
return diff >= 1;
})();
return (
{isAtRisk ? "Streak at risk" : "Streak"}
);
})()}
{/* Today's focus */}
{todayEntry && (
Today's focus
Plan progress
)}
{/* Mock interview progress */}
{totalMocks > 0 && (
Mock progress
)}
{/* Weak topics */}
{plan?.weak_topics?.length > 0 && (
Focus areas
)}
{/* LinkedIn */}
{jobContext?.linkedinName ? (
LinkedIn
) : (
LinkedIn
)}
{/* GitHub */}
{jobContext?.githubName ? (
GitHub
) : (
GitHub
)}
{/* No plan CTA */}
{!plan && !planLoading && (
)}
)}
{/* ── Job description ────────────────────────────────────── */}
🔥 {streak.current}
day{streak.current === 1 ? "" : "s"}
{isAtRisk
? "Do a mock today to keep your streak alive."
: isToday
? `Best: ${streak.longest} days`
: `Started yesterday · Best: ${streak.longest}`}
{todayEntry.focus}
{completedDays}
of {plan.days} days
{progressPct}%
{plan.days - completedDays} days remaining
{latestScore || "—"}
/ 10
{improvement !== 0 && completedMocks.length >= 2 && (
0 ? "#15803d" : "#dc2626", marginLeft: "auto" }}>
{improvement > 0 ? "▲" : "▼"} {Math.abs(improvement)} since first mock
)}
{totalMocks} mock{totalMocks === 1 ? "" : "s"} · avg {avgScore.toFixed(1)}
{/* Sparkline of last 10 mocks (chronological order) */}
{completedMocks.length >= 2 && (() => {
const last10 = completedMocks.slice(0, 10).reverse();
const w = 220, h = 36, pad = 2;
const xs = last10.map((_, i) => pad + (i * (w - pad * 2)) / Math.max(last10.length - 1, 1));
const ys = last10.map(m => h - pad - ((m.score - 1) / 9) * (h - pad * 2));
const path = xs.map((x, i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${ys[i].toFixed(1)}`).join(" ");
return (
);
})()}
{plan.weak_topics.map((t, i) => (
{t}
))}
{jobContext.linkedinPicture
? 
:
in
}
{jobContext.linkedinName}
Used for behavioural questions
Connect so Ari can ask questions tailored to your actual work history.
e.currentTarget.style.opacity = "0.8"} onMouseLeave={e => e.currentTarget.style.opacity = "1"} > Connect LinkedIn
{jobContext.githubAvatar
? 
:
}
{jobContext.githubLanguages?.length > 0 && (
{jobContext.githubName}
@{jobContext.github} · {jobContext.githubRepos} repos
{jobContext.githubLanguages.slice(0, 4).map(l => (
{l}
))}
)}
Connect so Ari references your real projects in technical questions.
e.currentTarget.style.opacity = "0.8"} onMouseLeave={e => e.currentTarget.style.opacity = "1"} > Connect GitHubGenerate your study plan
A day-by-day schedule built around your interview date and target role.
{jdEditing ? (
<>
) : (
<>
{jobContext?.jobDescription && (
)}
)}