\n \n \n \n\n",[],[274,276],"14dbf743-5c35-4060-939b-e1a5cec1d70b","favicon.svg","15bfb9e8-64a9-11f1-9f04-1607ee4eb77e",9,["D",1781081280226],"\n",[],[274,284],"fbf90203-7e2f-4a5f-933f-98d1d8b58959","useAsync.ts","681ccd0c-64a9-11f1-8a10-1607ee4eb77e","703b1b97-31a1-458d-a821-ab79e9a8cd5b",16,["D",1781081418407],"import { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport interface AsyncState {\n data: T | null;\n loading: boolean;\n error: string | null;\n reload: () => void;\n}\n\n/** Load data on mount with loading/error/empty handling baked in. */\nexport function useAsync(fn: () => Promise, deps: unknown[] = []): AsyncState {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const load = useCallback(() => {\n setLoading(true);\n setError(null);\n fn()\n .then((d) => setData(d))\n .catch((e) => setError(e?.message ?? \"Failed to load\"))\n .finally(() => setLoading(false));\n }, deps);\n\n useEffect(() => { load(); }, [load]);\n\n return { data, loading, error, reload: load };\n}\n",[],[274,300,292],"lib","5eafc814-4eb9-4f63-bcb7-5a5f99f174f3","api.ts","21c5a81a-64a9-11f1-9f04-1607ee4eb77e",11,["D",1781081300395],"/** Tiny typed fetch wrapper for the DevTrack API. */\nasync function req(path: string, init?: RequestInit): Promise {\n const res = await fetch(path, {\n headers: { \"Content-Type\": \"application/json\" },\n ...init,\n });\n if (!res.ok) {\n let msg = `Request failed (${res.status})`;\n try {\n const j = await res.json();\n if (j.error) msg = j.error;\n } catch { /* ignore */ }\n const err = new Error(msg) as Error & { status?: number };\n err.status = res.status;\n throw err;\n }\n return res.json() as Promise;\n}\n\nexport const api = {\n me: () => req(\"/api/me\"),\n logout: () => req(\"/auth/logout\", { method: \"POST\" }),\n sync: () => req(\"/api/sync\", { method: \"POST\" }),\n github: () => req(\"/api/github\"),\n dashboard: () => req(\"/api/dashboard\"),\n updateProfile: (body: any) => req(\"/api/profile\", { method: \"PUT\", body: JSON.stringify(body) }),\n setTheme: (theme: string) => req(\"/api/profile/theme\", { method: \"PUT\", body: JSON.stringify({ theme }) }),\n preferences: () => req(\"/api/preferences\"),\n updatePreferences: (body: any) => req(\"/api/preferences\", { method: \"PUT\", body: JSON.stringify(body) }),\n goals: () => req(\"/api/goals\"),\n addGoal: (body: any) => req(\"/api/goals\", { method: \"POST\", body: JSON.stringify(body) }),\n updateGoal: (id: number, body: any) => req(`/api/goals/${id}`, { method: \"PUT\", body: JSON.stringify(body) }),\n deleteGoal: (id: number) => req(`/api/goals/${id}`, { method: \"DELETE\" }),\n notifications: () => req(\"/api/notifications\"),\n markNotificationsRead: () => req(\"/api/notifications/read\", { method: \"POST\" }),\n reviewRepo: (repoId: number) => req(`/api/ai/review/${repoId}`, { method: \"POST\" }),\n analyzeResume: (body: any) => req(\"/api/ai/resume\", { method: \"POST\", body: JSON.stringify(body) }),\n resumeHistory: () => req(\"/api/ai/resume/history\"),\n startInterview: (body: any) => req(\"/api/ai/interview/start\", { method: \"POST\", body: JSON.stringify(body) }),\n gradeAnswer: (body: any) => req(\"/api/ai/interview/grade\", { method: \"POST\", body: JSON.stringify(body) }),\n matchInternships: (body: any) => req(\"/api/ai/internships\", { method: \"POST\", body: JSON.stringify(body) }),\n};\n\nexport function formatBytes(n: number): string {\n if (n > 1e9) return (n / 1e9).toFixed(1) + \" GB\";\n if (n > 1e6) return (n / 1e6).toFixed(1) + \" MB\";\n if (n > 1e3) return (n / 1e3).toFixed(1) + \" KB\";\n return n + \" B\";\n}\n\nexport const LANG_COLORS: Record = {\n TypeScript: \"#3178c6\", JavaScript: \"#f1e05a\", Python: \"#3572A5\", Java: \"#b07219\",\n \"C++\": \"#f34b7d\", C: \"#555555\", \"C#\": \"#178600\", Go: \"#00ADD8\", Rust: \"#dea584\",\n Ruby: \"#701516\", PHP: \"#4F5D95\", Swift: \"#F05138\", Kotlin: \"#A97BFF\", Dart: \"#00B4AB\",\n HTML: \"#e34c26\", CSS: \"#563d7c\", Shell: \"#89e051\", Vue: \"#41b883\", Jupyter: \"#DA5B0B\",\n};\nexport function langColor(name: string): string {\n return LANG_COLORS[name] ?? \"#818cf8\";\n}\n",[],[274,300,302],"c79c6609-8f70-4e56-8449-2257ed369847",["D",1781081300395],[249,250],[274,300],"eed25bc7-2596-4c76-be73-78dc787978d2","ui.tsx","385fdac8-64a9-11f1-93c5-1607ee4eb77e","ada7f859-cf48-42e9-9089-5808b28f27c1",12,["D",1781081338316],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/* ------------------------------- Layout -------------------------------- */\nexport function Card({ children, className = \"\", ...rest }: any) {\n return (\n \n {children}\n \n );\n}\n\nexport function Button({ children, variant = \"primary\", className = \"\", ...rest }: any) {\n const base =\n \"inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed\";\n const variants: Record = {\n primary: \"bg-brand-500 hover:bg-brand-400 text-white shadow-lg shadow-brand-500/20 hover:-translate-y-0.5\",\n ghost: \"bg-ink-700/60 hover:bg-ink-600 text-slate-200 border border-ink-600\",\n outline: \"border border-ink-600 hover:border-brand-400 hover:text-brand-400 text-slate-300\",\n danger: \"bg-rose-500/90 hover:bg-rose-500 text-white\",\n };\n return (\n \n );\n}\n\nexport function Badge({ children, color = \"brand\" }: { children: any; color?: string }) {\n const colors: Record = {\n brand: \"bg-brand-500/15 text-brand-400 border-brand-500/30\",\n green: \"bg-accent-500/15 text-accent-400 border-accent-500/30\",\n amber: \"bg-amber-500/15 text-amber-400 border-amber-500/30\",\n rose: \"bg-rose-500/15 text-rose-400 border-rose-500/30\",\n slate: \"bg-ink-700 text-slate-400 border-ink-600\",\n };\n return (\n \n {children}\n \n );\n}\n\n/* --------------------------- States: loading --------------------------- */\nexport function Skeleton({ className = \"\" }: { className?: string }) {\n return

;\n}\n\nexport function LoadingCard() {\n return (\n \n \n \n \n \n );\n}\n\nexport function Spinner({ className = \"\" }: { className?: string }) {\n return (\n \n );\n}\n\n/* ----------------------------- States: empty --------------------------- */\nexport function EmptyState({ icon, title, body, action }: any) {\n return (\n

{icon}

{title}

{body}

\n {action &&

{action}

}\n

\n );\n}\n\nexport function ErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {\n return (\n

⚠️

Something went wrong

{message}

\n {onRetry && (\n \n )}\n

\n );\n}\n\n/* ----------------------------- Score ring ------------------------------ */\nexport function ScoreRing({ value, label, size = 120, color = \"#818cf8\" }: any) {\n const r = (size - 16) / 2;\n const circ = 2 * Math.PI * r;\n const offset = circ - (Math.max(0, Math.min(100, value)) / 100) * circ;\n return (\n

\n \n

\n {Math.round(value)}\n / 100\n

\n {label && {label}}\n

\n );\n}\n\n/* ----------------------------- Progress bar ---------------------------- */\nexport function ProgressBar({ value, color = \"#818cf8\" }: { value: number; color?: string }) {\n return (\n

\n \n

\n );\n}\n\n/* -------------------------- Charts (inline SVG) ------------------------ */\nexport function BarChart({ data, color = \"#818cf8\", height = 160 }: {\n data: { label: string; value: number }[]; color?: string; height?: number;\n}) {\n if (!data.length) return null;\n const max = Math.max(...data.map((d) => d.value), 1);\n return (\n

\n {data.map((d, i) => (\n

\n \n {d.label}\n

\n ))}\n

\n );\n}\n\n/** Contribution heatmap (GitHub-style), expects days [{date,count}]. */\nexport function Heatmap({ days }: { days: { date: string; count: number }[] }) {\n if (!days?.length) return null;\n const max = Math.max(...days.map((d) => d.count), 1);\n const shade = (c: number) => {\n if (c === 0) return \"#14161f\";\n const t = c / max;\n if (t > 0.75) return \"#10b981\";\n if (t > 0.5) return \"#34d399\";\n if (t > 0.25) return \"#6ee7b7\";\n return \"#1f5f4a\";\n };\n // group into weeks (columns)\n const weeks: { date: string; count: number }[][] = [];\n for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));\n return (\n

\n {weeks.map((week, wi) => (\n

\n {week.map((d, di) => (\n \n ))}\n

\n ))}\n

\n );\n}\n\n/* -------------------------------- Toast -------------------------------- */\nexport function Toast({ message, type = \"info\" }: { message: string; type?: string }) {\n if (!message) return null;\n const colors: Record = {\n info: \"bg-ink-700 border-ink-600 text-slate-200\",\n success: \"bg-accent-500/15 border-accent-500/40 text-accent-400\",\n error: \"bg-rose-500/15 border-rose-500/40 text-rose-300\",\n };\n return (\n

\n {message}\n

\n );\n}\n",[],[274,322,314],"components","52c184d0-3a0d-4e90-9442-36914b0c89a8","Sidebar.tsx","6278c338-64a9-11f1-b9ff-1607ee4eb77e",15,["D",1781081408946],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { View } from \"./App.tsx\";\n\nconst NAV: { id: View; label: string; icon: string }[] = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n { id: \"github\", label: \"GitHub Profile\", icon: \"🐙\" },\n { id: \"repos\", label: \"AI Repo Review\", icon: \"🤖\" },\n { id: \"resume\", label: \"Resume Analyzer\", icon: \"📄\" },\n { id: \"interview\", label: \"Interview Prep\", icon: \"🎤\" },\n { id: \"internships\", label: \"Internships\", icon: \"🎯\" },\n { id: \"goals\", label: \"Goals\", icon: \"🚀\" },\n { id: \"settings\", label: \"Settings\", icon: \"⚙️\" },\n];\n\nexport function Sidebar({ view, go, me, onLogout }: {\n view: View; go: (v: View) => void; me: any; onLogout: () => void;\n}) {\n const [open, setOpen] = useState(false);\n const avatar = me?.profile?.avatar_url || me?.github?.avatar_url;\n const name = me?.profile?.display_name || me?.github?.name || me?.user?.github_login || \"Developer\";\n\n const navClick = (id: View) => { go(id); setOpen(false); };\n\n return (\n <>\n {/* mobile top bar */}\n

\n DevTrack AI\n \n

\n\n {open &&

setOpen(false)} />}\n\n \n

\n \n DevTrack AI\n

\n\n

\n {NAV.map((item) => (\n navClick(item.id)}\n className={`flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all ${\n view === item.id\n ? \"bg-brand-500/15 text-brand-300 border border-brand-500/30\"\n : \"text-slate-400 hover:bg-ink-800 hover:text-slate-200 border border-transparent\"\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n\n

\n {avatar\n ? $\"\"$ \n :

}\n

{name}

@{me?.user?.github_login}

\n \n

\n \n \n );\n}\n",[],[274,322,324],"4bd04e1c-368f-4439-8427-c05d1a623ab2","Landing.tsx","573e3a8e-64a9-11f1-8cde-1607ee4eb77e",14,["D",1781081390101],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Badge, Button } from \"./ui.tsx\";\n\nconst FEATURES = [\n { icon: \"📊\", title: \"Real Analytics\", body: \"Growth score, portfolio score, streaks and skill progress — all computed live from your GitHub.\" },\n { icon: \"🤖\", title: \"AI Repo Review\", body: \"Code quality scoring, README suggestions, best practices and feature ideas for every project.\" },\n { icon: \"📄\", title: \"Resume Analyzer\", body: \"ATS scoring and targeted, recruiter-grade improvement suggestions.\" },\n { icon: \"🎤\", title: \"Interview Prep\", body: \"Mock technical & behavioral interviews with instant AI feedback on your answers.\" },\n { icon: \"🎯\", title: \"Internship Matching\", body: \"Match scores, skill-gap analysis and career recommendations tailored to your work.\" },\n { icon: \"🔥\", title: \"Coding Streaks\", body: \"Track your contribution streaks and momentum with a live GitHub-style heatmap.\" },\n];\n\nfunction Logo() {\n return (\n

\n \n DevTrack AI\n

\n );\n}\n\nexport function Landing({ githubConfigured }: { githubConfigured?: boolean }) {\n return (\n

\n {/* glow */}\n

\n\n

\n \n

\n view source\n \n

\n\n

\n ● Live • Connect real GitHub data\n

\n Your developer growth,
measured by AI\n

\n DevTrack AI connects your GitHub and turns your real activity into analytics, AI code reviews,\n resume scoring, interview prep, and internship matches — a recruiter-ready portfolio in one place.\n

\n \n \n \n \n

\n {!githubConfigured && (\n

\n Setup needed: add your GitHub OAuth Client ID & Secret to enable sign-in.\n

\n )}\n

\n\n

\n {FEATURES.map((f, i) => (\n \n

{f.icon}

{f.title}

{f.body}

\n ))}\n

\n\n

Ready to level up your developer profile?

\n \n

\n \n\n \n

\n );\n}\n\nexport function GithubIcon({ className = \"\" }: { className?: string }) {\n return (\n \n );\n}\n",[],[274,322,332],"9d9f59f9-acb8-46f7-923e-2203d9ba0183","App.tsx","43df8498-64a9-11f1-9c56-1607ee4eb77e",13,["D",1781081357609],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport { Spinner, Toast } from \"./ui.tsx\";\nimport { Landing } from \"./Landing.tsx\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { Dashboard } from \"./pages/Dashboard.tsx\";\nimport { GitHubPage } from \"./pages/GitHubPage.tsx\";\nimport { Settings } from \"./pages/Settings.tsx\";\nimport { RepoReview } from \"./pages/RepoReview.tsx\";\nimport { ResumeAnalyzer } from \"./pages/ResumeAnalyzer.tsx\";\nimport { Interview } from \"./pages/Interview.tsx\";\nimport { Internships } from \"./pages/Internships.tsx\";\nimport { Goals } from \"./pages/Goals.tsx\";\n\nexport type View =\n | \"dashboard\" | \"github\" | \"repos\" | \"resume\" | \"interview\" | \"internships\" | \"goals\" | \"settings\";\n\nexport const ToastContext = React.createContext<(msg: string, type?: string) => void>(() => {});\n\nfunction useHashView(): [View, (v: View) => void] {\n const parse = (): View => (location.hash.replace(\"#/\", \"\") || \"dashboard\") as View;\n const [view, setView] = useState(parse());\n useEffect(() => {\n const onHash = () => setView(parse());\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n const go = (v: View) => { location.hash = `#/${v}`; setView(v); };\n return [view, go];\n}\n\nexport function App() {\n const [me, setMe] = useState(undefined); // undefined = loading\n const [view, go] = useHashView();\n const [toast, setToast] = useState<{ msg: string; type: string }>({ msg: \"\", type: \"info\" });\n\n const showToast = (msg: string, type = \"info\") => {\n setToast({ msg, type });\n setTimeout(() => setToast({ msg: \"\", type: \"info\" }), 3200);\n };\n\n const refreshMe = () => api.me().then(setMe).catch(() => setMe({ user: null }));\n\n useEffect(() => { refreshMe(); }, []);\n\n // Surface OAuth errors from query string.\n useEffect(() => {\n const params = new URLSearchParams(location.search);\n const err = params.get(\"error\");\n if (err) {\n const map: Record = {\n github_not_configured: \"GitHub OAuth isn't configured yet. Add your Client ID & Secret.\",\n oauth_failed: \"GitHub sign-in failed. Please try again.\",\n missing_code: \"GitHub sign-in was cancelled.\",\n };\n showToast(map[err] ?? \"Sign-in error\", \"error\");\n history.replaceState(null, \"\", location.pathname);\n }\n if (params.get(\"view\")) { location.hash = \"#/dashboard\"; history.replaceState(null, \"\", location.pathname); }\n }, []);\n\n if (me === undefined) {\n return (\n

\n \n

\n );\n }\n\n if (!me?.user) {\n return (\n \n \n \n \n );\n }\n\n const pages: Record = {\n dashboard: ,\n github: ,\n repos: ,\n resume: ,\n interview: ,\n internships: ,\n goals: ,\n settings: ,\n };\n\n return (\n \n

\n { await api.logout(); location.href = \"/\"; }} />\n

\n {pages[view] ?? pages.dashboard}\n

\n \n \n );\n}\n",[],[274,322,340],"52fba970-68a2-4dea-baf1-ff006e092950","Settings.tsx","dcb03104-64a9-11f1-937f-1607ee4eb77e","5df2ea3e-2213-49b0-9d57-4408fcf0baa3",["D",1781081613991],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../../lib/api.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, Spinner } from \"../ui.tsx\";\n\nfunction Field({ label, ...rest }: any) {\n return (\n

\n {label}\n \n

\n );\n}\n\nfunction Toggle({ label, desc, checked, onChange }: any) {\n return (\n

{label}

\n {desc &&

{desc}

}\n

\n \n

\n );\n}\n\nexport function Settings({ me, onUpdate }: { me: any; onUpdate: () => void }) {\n const toast = useContext(ToastContext);\n const p = me?.profile ?? {};\n const [form, setForm] = useState({\n display_name: p.display_name ?? \"\", headline: p.headline ?? \"\", bio: p.bio ?? \"\",\n location: p.location ?? \"\", website: p.website ?? \"\", avatar_url: p.avatar_url ?? \"\",\n });\n const [saving, setSaving] = useState(false);\n const [theme, setThemeState] = useState(p.theme ?? \"dark\");\n const [prefs, setPrefs] = useState(null);\n const [syncing, setSyncing] = useState(false);\n\n useEffect(() => { api.preferences().then((r) => setPrefs(r.preferences)).catch(() => {}); }, []);\n\n const set = (k: string, v: string) => setForm((f) => ({ ...f, [k]: v }));\n\n const save = async () => {\n setSaving(true);\n try { await api.updateProfile(form); toast(\"Profile saved\", \"success\"); onUpdate(); }\n catch (e: any) { toast(e.message, \"error\"); }\n finally { setSaving(false); }\n };\n\n const changeTheme = async (t: string) => {\n setThemeState(t);\n document.documentElement.classList.toggle(\"dark\", t === \"dark\");\n try { await api.setTheme(t); } catch { /* ignore */ }\n };\n\n const savePrefs = async (next: any) => {\n setPrefs(next);\n try { await api.updatePreferences(next); toast(\"Preferences updated\", \"success\"); }\n catch (e: any) { toast(e.message, \"error\"); }\n };\n\n const sync = async () => {\n setSyncing(true);\n try { await api.sync(); toast(\"GitHub re-synced\", \"success\"); }\n catch (e: any) { toast(e.message, \"error\"); }\n finally { setSyncing(false); }\n };\n\n return (\n

Settings

\n\n {/* profile */}\n \n

Profile

\n {form.avatar_url\n ? $\"\"$ \n :

👤

}\n

\n set(\"avatar_url\", e.target.value)} placeholder=\"https://…\" />\n

\n set(\"display_name\", e.target.value)} />\n set(\"headline\", e.target.value)} placeholder=\"Full-stack developer\" />\n set(\"location\", e.target.value)} />\n set(\"website\", e.target.value)} />\n

\n Bio\n

set(\"bio\", e.target.value)} rows={3}\n            className=\"w-full resize-y rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n        </div>\n        <div className=\"mt-4\"><Button onClick={save} disabled={saving}>{saving ? <><Spinner /> Saving…</> : \"Save profile\"}</Button></div>\n      </Card>\n\n      {/* github sync */}\n      <Card className=\"p-6\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h3 className=\"text-sm font-semibold text-slate-200\">GitHub Connection</h3>\n            <p className=\"mt-1 text-xs text-slate-500\">\n              Connected as <span className=\"text-brand-400\">@{me?.user?.github_login}</span>\n              {me?.github?.synced_at ? ` · last synced ${new Date(me.github.synced_at).toLocaleString()}` : \"\"}\n            </p>\n          </div>\n          <Badge color=\"green\">● Connected</Badge>\n        </div>\n        <div className=\"mt-4 flex gap-2\">\n          <Button variant=\"ghost\" onClick={sync} disabled={syncing}>{syncing ? <><Spinner /> Syncing…</> : \"🔄 Re-sync GitHub data\"}</Button>\n          <a href=\"/auth/github\"><Button variant=\"outline\">Reconnect</Button></a>\n        </div>\n      </Card>\n\n      {/* theme */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-3 text-sm font-semibold text-slate-200\">Theme</h3>\n        <div className=\"flex gap-2\">\n          {[[\"dark\", \"🌙 Dark\"], [\"light\", \"☀️ Light\"]].map(([t, label]) => (\n            <button key={t} onClick={() => changeTheme(t)}\n              className={`rounded-xl border px-4 py-2.5 text-sm transition-all ${theme === t ? \"border-brand-500/50 bg-brand-500/15 text-brand-300\" : \"border-ink-600 text-slate-400 hover:bg-ink-800\"}`}>\n              {label}\n            </button>\n          ))}\n        </div>\n      </Card>\n\n      {/* notifications */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-1 text-sm font-semibold text-slate-200\">Notification Preferences</h3>\n        {prefs ? (\n          <div className=\"divide-y divide-ink-700\">\n            <Toggle label=\"Weekly growth report\" desc=\"A summary of your activity every week\" checked={!!prefs.email_weekly} onChange={(v: boolean) => savePrefs({ ...prefs, email_weekly: v ? 1 : 0 })} />\n            <Toggle label=\"Goal reminders\" desc=\"Nudges when goals are due\" checked={!!prefs.email_goal_reminders} onChange={(v: boolean) => savePrefs({ ...prefs, email_goal_reminders: v ? 1 : 0 })} />\n            <Toggle label=\"Product updates\" desc=\"New features and announcements\" checked={!!prefs.email_product} onChange={(v: boolean) => savePrefs({ ...prefs, email_product: v ? 1 : 0 })} />\n            <Toggle label=\"In-app notifications\" desc=\"Show notifications inside DevTrack\" checked={!!prefs.push_enabled} onChange={(v: boolean) => savePrefs({ ...prefs, push_enabled: v ? 1 : 0 })} />\n          </div>\n        ) : <div className=\"py-4 text-sm text-slate-500 flex items-center gap-2\"><Spinner /> Loading…</div>}\n      </Card>\n\n      {/* account security */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-3 text-sm font-semibold text-slate-200\">Account & Security</h3>\n        <div className=\"space-y-2 text-sm text-slate-400\">\n          <p>Email: <span className=\"text-slate-200\">{me?.user?.email || \"Not provided by GitHub\"}</span></p>\n          <p>Account created: <span className=\"text-slate-200\">{me?.user?.created_at ? new Date(me.user.created_at).toLocaleDateString() : \"—\"}</span></p>\n          <p>Sessions are encrypted, HttpOnly cookies and expire after 30 days. We never store your GitHub password.</p>\n        </div>\n        <div className=\"mt-4 flex gap-2\">\n          <Button variant=\"ghost\" onClick={async () => { await api.logout(); location.href = \"/\"; }}>Sign out</Button>\n        </div>\n      </Card>\n\n      <p className=\"pb-6 text-center text-xs text-slate-600\"><a href=\"/source\" className=\"hover:text-slate-400\">view source</a></p>\n    </div>\n  );\n}\n",[],[274,322,355,348],"pages","bce9640a-33ec-4d82-b465-c14567e72aca","ResumeAnalyzer.tsx","a4f5eb78-64a9-11f1-8a10-1607ee4eb77e",20,["D",1781081520449],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../../lib/api.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, ScoreRing, Spinner } from \"../ui.tsx\";\n\nexport function ResumeAnalyzer() {\n  const toast = useContext(ToastContext);\n  const [text, setText] = useState(\"\");\n  const [role, setRole] = useState(\"Software Engineer Intern\");\n  const [filename, setFilename] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [result, setResult] = useState<any>(null);\n\n  const onFile = async (e: any) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n    setFilename(file.name);\n    if (file.type === \"application/pdf\" || file.name.endsWith(\".pdf\")) {\n      toast(\"PDF detected — please paste the text below for best results.\", \"info\");\n      return;\n    }\n    setText(await file.text());\n  };\n\n  const analyze = async () => {\n    if (text.trim().length < 50) { toast(\"Please paste at least a few lines of your resume.\", \"error\"); return; }\n    setBusy(true);\n    try {\n      const res = await api.analyzeResume({ text, targetRole: role, filename: filename || \"resume.txt\" });\n      setResult(res.result);\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setBusy(false); }\n  };\n\n  const scoreColor = result?.atsScore >= 75 ? \"#34d399\" : result?.atsScore >= 50 ? \"#f59e0b\" : \"#f43f5e\";\n\n  return (\n    <div className=\"space-y-5 animate-fade-up\">\n      <div>\n        <h1 className=\"text-2xl font-bold text-slate-50\">Resume Analyzer</h1>\n        <p className=\"text-sm text-slate-500\">Get an ATS score and recruiter-grade improvement suggestions.</p>\n      </div>\n\n      <Card className=\"p-6 space-y-4\">\n        <div className=\"grid gap-4 sm:grid-cols-2\">\n          <div>\n            <label className=\"mb-1 block text-xs font-medium text-slate-400\">Target role</label>\n            <input value={role} onChange={(e) => setRole(e.target.value)}\n              className=\"w-full rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          </div>\n          <div>\n            <label className=\"mb-1 block text-xs font-medium text-slate-400\">Upload (.txt / .md)</label>\n            <input type=\"file\" accept=\".txt,.md,.pdf\" onChange={onFile}\n              className=\"w-full rounded-xl border border-ink-600 bg-ink-900 px-3 py-2 text-sm text-slate-400 file:mr-3 file:rounded-lg file:border-0 file:bg-ink-700 file:px-3 file:py-1.5 file:text-slate-200\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"mb-1 block text-xs font-medium text-slate-400\">Resume text</label>\n          <textarea value={text} onChange={(e) => setText(e.target.value)} rows={9} placeholder=\"Paste your resume content here…\"\n            className=\"w-full resize-y rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n        </div>\n        <Button onClick={analyze} disabled={busy}>{busy ? <><Spinner /> Analyzing…</> : \"Analyze resume\"}</Button>\n      </Card>\n\n      {result && (\n        <Card className=\"p-6 animate-fade-up\">\n          <div className=\"flex flex-col items-center gap-5 sm:flex-row sm:items-start\">\n            <ScoreRing value={result.atsScore} label=\"ATS Score\" color={scoreColor} />\n            <p className=\"flex-1 text-sm leading-relaxed text-slate-300\">{result.summary}</p>\n          </div>\n          <div className=\"mt-6 grid gap-5 sm:grid-cols-2\">\n            <div>\n              <h4 className=\"mb-2 text-sm font-semibold text-accent-400\">💪 Strengths</h4>\n              <ul className=\"space-y-1.5 text-xs text-slate-400\">{(result.strengths ?? []).map((s: string, i: number) => <li key={i}>• {s}</li>)}</ul>\n            </div>\n            <div>\n              <h4 className=\"mb-2 text-sm font-semibold text-rose-300\">⚠️ Weaknesses</h4>\n              <ul className=\"space-y-1.5 text-xs text-slate-400\">{(result.weaknesses ?? []).map((s: string, i: number) => <li key={i}>• {s}</li>)}</ul>\n            </div>\n          </div>\n          <div className=\"mt-5\">\n            <h4 className=\"mb-2 text-sm font-semibold text-brand-400\">🛠 Suggestions</h4>\n            <ul className=\"space-y-1.5 text-xs text-slate-400\">{(result.suggestions ?? []).map((s: string, i: number) => <li key={i}>• {s}</li>)}</ul>\n          </div>\n          {result.missingKeywords?.length > 0 && (\n            <div className=\"mt-5\">\n              <h4 className=\"mb-2 text-sm font-semibold text-slate-200\">Missing keywords</h4>\n              <div className=\"flex flex-wrap gap-2\">{result.missingKeywords.map((k: string) => <Badge key={k} color=\"amber\">{k}</Badge>)}</div>\n            </div>\n          )}\n        </Card>\n      )}\n    </div>\n  );\n}\n",[],[274,322,355,357],"3afa32f3-96e6-401c-a43f-e48afc029be9","RepoReview.tsx","97cd2e16-64a9-11f1-b9ff-1607ee4eb77e",19,["D",1781081498417],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, langColor } from \"../../lib/api.ts\";\nimport { useAsync } from \"../../lib/useAsync.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, EmptyState, ErrorState, LoadingCard, ScoreRing, Spinner } from \"../ui.tsx\";\n\nfunction ReviewPanel({ review }: { review: any }) {\n  return (\n    <div className=\"mt-4 space-y-5 border-t border-ink-700 pt-5 animate-fade-up\">\n      <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:items-start\">\n        <ScoreRing value={review.score} label=\"Overall\" />\n        <p className=\"flex-1 text-sm leading-relaxed text-slate-300\">{review.summary}</p>\n      </div>\n      <div className=\"grid gap-4 sm:grid-cols-2\">\n        <Card className=\"p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <h4 className=\"text-sm font-semibold text-slate-200\">Code Quality</h4>\n            <Badge color=\"brand\">{review.codeQuality?.score ?? 0}/100</Badge>\n          </div>\n          <ul className=\"space-y-1.5 text-xs text-slate-400\">\n            {(review.codeQuality?.notes ?? []).map((n: string, i: number) => <li key={i}>• {n}</li>)}\n          </ul>\n        </Card>\n        <Card className=\"p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <h4 className=\"text-sm font-semibold text-slate-200\">README</h4>\n            <Badge color=\"green\">{review.readme?.score ?? 0}/100</Badge>\n          </div>\n          <ul className=\"space-y-1.5 text-xs text-slate-400\">\n            {(review.readme?.suggestions ?? []).map((n: string, i: number) => <li key={i}>• {n}</li>)}\n          </ul>\n        </Card>\n      </div>\n      <div className=\"grid gap-4 sm:grid-cols-2\">\n        <div>\n          <h4 className=\"mb-2 text-sm font-semibold text-slate-200\">✅ Best Practices</h4>\n          <ul className=\"space-y-1.5 text-xs text-slate-400\">{(review.bestPractices ?? []).map((n: string, i: number) => <li key={i}>• {n}</li>)}</ul>\n        </div>\n        <div>\n          <h4 className=\"mb-2 text-sm font-semibold text-slate-200\">💡 Feature Ideas</h4>\n          <ul className=\"space-y-1.5 text-xs text-slate-400\">{(review.featureIdeas ?? []).map((n: string, i: number) => <li key={i}>• {n}</li>)}</ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function RepoReview() {\n  const toast = useContext(ToastContext);\n  const { data, loading, error, reload } = useAsync(() => api.github(), []);\n  const [reviews, setReviews] = useState<Record<number, any>>({});\n  const [busy, setBusy] = useState<number | null>(null);\n  const [openId, setOpenId] = useState<number | null>(null);\n\n  const review = async (repoId: number) => {\n    setBusy(repoId);\n    try {\n      const res = await api.reviewRepo(repoId);\n      setReviews((r) => ({ ...r, [repoId]: res.review }));\n      setOpenId(repoId);\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setBusy(null); }\n  };\n\n  if (loading) return <div className=\"space-y-4\"><LoadingCard /><LoadingCard /></div>;\n  if (error) return <ErrorState message={error} onRetry={reload} />;\n  if (!data?.connected || !data.repos?.length) {\n    return <Card><EmptyState icon=\"🤖\" title=\"No repositories to review\" body=\"Connect and sync your GitHub to get AI-powered reviews of your projects.\" action={<a href=\"/auth/github\"><Button>Connect GitHub</Button></a>} /></Card>;\n  }\n\n  const repos = (data.repos as any[]).filter((r) => !r.is_fork);\n\n  return (\n    <div className=\"space-y-5 animate-fade-up\">\n      <div>\n        <h1 className=\"text-2xl font-bold text-slate-50\">AI Repository Review</h1>\n        <p className=\"text-sm text-slate-500\">Code quality scoring, README feedback, best practices and feature ideas — powered by AI.</p>\n      </div>\n      {repos.map((r) => (\n        <Card key={r.repo_id} className=\"p-5\">\n          <div className=\"flex flex-wrap items-center justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <div className=\"flex items-center gap-2\">\n                <p className=\"font-semibold text-slate-100\">{r.name}</p>\n                {r.language && <span className=\"flex items-center gap-1 text-xs text-slate-400\"><span className=\"h-2 w-2 rounded-full\" style={{ background: langColor(r.language) }} />{r.language}</span>}\n                <span className=\"text-xs text-slate-500\">⭐ {r.stars}</span>\n              </div>\n              <p className=\"mt-1 max-w-xl truncate text-xs text-slate-500\">{r.description || \"No description\"}</p>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {(reviews[r.repo_id] || r.ai_score != null) && (\n                <Badge color=\"brand\">Score {reviews[r.repo_id]?.score ?? r.ai_score}</Badge>\n              )}\n              <Button variant={reviews[r.repo_id] ? \"ghost\" : \"primary\"} onClick={() =>\n                reviews[r.repo_id] ? setOpenId(openId === r.repo_id ? null : r.repo_id) : review(r.repo_id)}\n                disabled={busy === r.repo_id}>\n                {busy === r.repo_id ? <><Spinner /> Analyzing…</> : reviews[r.repo_id] ? (openId === r.repo_id ? \"Hide\" : \"View review\") : \"Review with AI\"}\n              </Button>\n            </div>\n          </div>\n          {openId === r.repo_id && reviews[r.repo_id] && <ReviewPanel review={reviews[r.repo_id]} />}\n        </Card>\n      ))}\n    </div>\n  );\n}\n",[],[274,322,355,365],"8bb74955-8b84-4808-abc2-ea1089d1a640","Interview.tsx","b2cd241e-64a9-11f1-8cde-1607ee4eb77e",21,["D",1781081543716],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../../lib/api.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, EmptyState, ScoreRing, Spinner } from \"../ui.tsx\";\n\nconst KINDS = [\n  { id: \"technical\", label: \"Technical\", icon: \"💻\" },\n  { id: \"behavioral\", label: \"Behavioral\", icon: \"🗣\" },\n  { id: \"mixed\", label: \"Mixed\", icon: \"🎯\" },\n];\n\nexport function Interview() {\n  const toast = useContext(ToastContext);\n  const [role, setRole] = useState(\"Software Engineer Intern\");\n  const [kind, setKind] = useState(\"mixed\");\n  const [busy, setBusy] = useState(false);\n  const [questions, setQuestions] = useState<any[] | null>(null);\n  const [answers, setAnswers] = useState<Record<number, string>>({});\n  const [feedback, setFeedback] = useState<Record<number, any>>({});\n  const [grading, setGrading] = useState<number | null>(null);\n\n  const start = async () => {\n    setBusy(true); setQuestions(null); setFeedback({}); setAnswers({});\n    try {\n      const res = await api.startInterview({ role, kind });\n      if (!res.questions?.length) { toast(\"Couldn't generate questions, try again.\", \"error\"); }\n      setQuestions(res.questions);\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setBusy(false); }\n  };\n\n  const grade = async (i: number, q: string) => {\n    if (!(answers[i]?.trim())) { toast(\"Write an answer first.\", \"error\"); return; }\n    setGrading(i);\n    try {\n      const res = await api.gradeAnswer({ question: q, answer: answers[i] });\n      setFeedback((f) => ({ ...f, [i]: res.feedback }));\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setGrading(null); }\n  };\n\n  const diffColor = (d: string) => d === \"hard\" ? \"rose\" : d === \"medium\" ? \"amber\" : \"green\";\n\n  return (\n    <div className=\"space-y-5 animate-fade-up\">\n      <div>\n        <h1 className=\"text-2xl font-bold text-slate-50\">Interview Preparation</h1>\n        <p className=\"text-sm text-slate-500\">Mock interviews with technical & behavioral questions and instant AI feedback.</p>\n      </div>\n\n      <Card className=\"p-6 space-y-4\">\n        <div className=\"grid gap-4 sm:grid-cols-2\">\n          <div>\n            <label className=\"mb-1 block text-xs font-medium text-slate-400\">Target role</label>\n            <input value={role} onChange={(e) => setRole(e.target.value)}\n              className=\"w-full rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          </div>\n          <div>\n            <label className=\"mb-1 block text-xs font-medium text-slate-400\">Interview type</label>\n            <div className=\"flex gap-2\">\n              {KINDS.map((k) => (\n                <button key={k.id} onClick={() => setKind(k.id)}\n                  className={`flex-1 rounded-xl border px-3 py-2.5 text-sm transition-all ${kind === k.id ? \"border-brand-500/50 bg-brand-500/15 text-brand-300\" : \"border-ink-600 text-slate-400 hover:bg-ink-800\"}`}>\n                  {k.icon} {k.label}\n                </button>\n              ))}\n            </div>\n          </div>\n        </div>\n        <Button onClick={start} disabled={busy}>{busy ? <><Spinner /> Generating…</> : \"🎤 Start mock interview\"}</Button>\n      </Card>\n\n      {busy && <Card className=\"p-10 flex justify-center\"><Spinner className=\"h-7 w-7 text-brand-400\" /></Card>}\n\n      {questions && questions.length === 0 && (\n        <Card><EmptyState icon=\"🤔\" title=\"No questions generated\" body=\"Please try starting the interview again.\" /></Card>\n      )}\n\n      {questions?.map((q, i) => (\n        <Card key={i} className=\"p-5 animate-fade-up\" style={{ animationDelay: `${i * 50}ms` }}>\n          <div className=\"flex items-start justify-between gap-3\">\n            <p className=\"font-medium text-slate-100\">Q{i + 1}. {q.question}</p>\n            <div className=\"flex shrink-0 gap-2\">\n              <Badge color=\"slate\">{q.category}</Badge>\n              <Badge color={diffColor(q.difficulty)}>{q.difficulty}</Badge>\n            </div>\n          </div>\n          <textarea value={answers[i] ?? \"\"} onChange={(e) => setAnswers((a) => ({ ...a, [i]: e.target.value }))} rows={4}\n            placeholder=\"Type your answer…\"\n            className=\"mt-3 w-full resize-y rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          <div className=\"mt-2 flex justify-end\">\n            <Button variant=\"ghost\" onClick={() => grade(i, q.question)} disabled={grading === i}>\n              {grading === i ? <><Spinner /> Grading…</> : \"Get feedback\"}\n            </Button>\n          </div>\n          {feedback[i] && (\n            <div className=\"mt-3 rounded-xl border border-ink-700 bg-ink-900/60 p-4 animate-fade-up\">\n              <div className=\"flex items-center gap-3\">\n                <ScoreRing value={feedback[i].score} size={72} />\n                <p className=\"flex-1 text-sm text-slate-300\">{feedback[i].feedback}</p>\n              </div>\n              {feedback[i].improvements?.length > 0 && (\n                <ul className=\"mt-3 space-y-1 text-xs text-slate-400\">\n                  {feedback[i].improvements.map((s: string, j: number) => <li key={j}>• {s}</li>)}\n                </ul>\n              )}\n              <details className=\"mt-3 text-xs text-slate-500\">\n                <summary className=\"cursor-pointer hover:text-slate-300\">Show ideal answer</summary>\n                <p className=\"mt-2 text-slate-400\">{q.idealAnswer}</p>\n              </details>\n            </div>\n          )}\n        </Card>\n      ))}\n    </div>\n  );\n}\n",[],[274,322,355,373],"0d55225e-5293-43da-9b00-09c932dcefc8","Internships.tsx","bd211ec0-64a9-11f1-9c56-1607ee4eb77e",22,["D",1781081561045],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../../lib/api.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, ProgressBar, ScoreRing, Spinner } from \"../ui.tsx\";\n\nexport function Internships() {\n  const toast = useContext(ToastContext);\n  const [role, setRole] = useState(\"Software Engineer Intern\");\n  const [busy, setBusy] = useState(false);\n  const [match, setMatch] = useState<any>(null);\n\n  const run = async () => {\n    setBusy(true);\n    try {\n      const res = await api.matchInternships({ targetRole: role });\n      setMatch(res.match);\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setBusy(false); }\n  };\n\n  const impColor = (i: string) => i === \"high\" ? \"rose\" : i === \"medium\" ? \"amber\" : \"green\";\n\n  return (\n    <div className=\"space-y-5 animate-fade-up\">\n      <div>\n        <h1 className=\"text-2xl font-bold text-slate-50\">Internship Matching</h1>\n        <p className=\"text-sm text-slate-500\">Match score, skill-gap analysis and career recommendations from your real GitHub profile.</p>\n      </div>\n\n      <Card className=\"p-6\">\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-end\">\n          <div className=\"flex-1\">\n            <label className=\"mb-1 block text-xs font-medium text-slate-400\">Target role</label>\n            <input value={role} onChange={(e) => setRole(e.target.value)}\n              className=\"w-full rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          </div>\n          <Button onClick={run} disabled={busy}>{busy ? <><Spinner /> Matching…</> : \"🎯 Find my matches\"}</Button>\n        </div>\n      </Card>\n\n      {busy && <Card className=\"p-10 flex justify-center\"><Spinner className=\"h-7 w-7 text-brand-400\" /></Card>}\n\n      {match && (\n        <>\n          <Card className=\"p-6 animate-fade-up\">\n            <div className=\"flex flex-col items-center gap-5 sm:flex-row sm:items-start\">\n              <ScoreRing value={match.matchScore} label=\"Match Score\" color=\"#34d399\" />\n              <p className=\"flex-1 text-sm leading-relaxed text-slate-300\">{match.summary}</p>\n            </div>\n          </Card>\n\n          <div className=\"grid gap-5 lg:grid-cols-2\">\n            <Card className=\"p-6\">\n              <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Matched Roles</h3>\n              <div className=\"space-y-3\">\n                {(match.matchedRoles ?? []).map((r: any, i: number) => (\n                  <div key={i} className=\"rounded-xl border border-ink-700 p-4\">\n                    <div className=\"mb-1 flex items-center justify-between\">\n                      <p className=\"font-medium text-slate-100\">{r.title}</p>\n                      <Badge color=\"green\">{r.fit}% fit</Badge>\n                    </div>\n                    <ProgressBar value={r.fit} color=\"#34d399\" />\n                    <p className=\"mt-2 text-xs text-slate-400\">{r.reason}</p>\n                  </div>\n                ))}\n              </div>\n            </Card>\n\n            <Card className=\"p-6\">\n              <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Skill Gaps</h3>\n              <div className=\"space-y-3\">\n                {(match.skillGaps ?? []).map((g: any, i: number) => (\n                  <div key={i} className=\"rounded-xl border border-ink-700 p-4\">\n                    <div className=\"mb-1 flex items-center justify-between\">\n                      <p className=\"font-medium text-slate-100\">{g.skill}</p>\n                      <Badge color={impColor(g.importance)}>{g.importance}</Badge>\n                    </div>\n                    <p className=\"text-xs text-slate-400\">{g.howToLearn}</p>\n                  </div>\n                ))}\n              </div>\n            </Card>\n          </div>\n\n          <Card className=\"p-6\">\n            <h3 className=\"mb-3 text-sm font-semibold text-slate-200\">Career Recommendations</h3>\n            <ul className=\"space-y-2 text-sm text-slate-400\">\n              {(match.careerRecommendations ?? []).map((r: string, i: number) => <li key={i}>→ {r}</li>)}\n            </ul>\n          </Card>\n        </>\n      )}\n    </div>\n  );\n}\n",[],[274,322,355,381],"1fc049f3-dc30-4e42-960a-fcc47ff5b4ca","Goals.tsx","c8b1fa7a-64a9-11f1-8cde-1607ee4eb77e",23,["D",1781081580448],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../../lib/api.ts\";\nimport { useAsync } from \"../../lib/useAsync.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, EmptyState, ErrorState, LoadingCard, ProgressBar } from \"../ui.tsx\";\n\nconst CATEGORIES = [\"Contributions\", \"Stars\", \"Repos\", \"Learning\", \"Career\"];\n\nexport function Goals() {\n  const toast = useContext(ToastContext);\n  const { data, loading, error, reload } = useAsync(() => api.goals(), []);\n  const [title, setTitle] = useState(\"\");\n  const [category, setCategory] = useState(CATEGORIES[0]);\n  const [target, setTarget] = useState(\"\");\n  const [adding, setAdding] = useState(false);\n\n  const add = async () => {\n    if (!title.trim()) { toast(\"Give your goal a title.\", \"error\"); return; }\n    setAdding(true);\n    try {\n      await api.addGoal({ title, category, target: target ? Number(target) : null });\n      setTitle(\"\"); setTarget(\"\");\n      toast(\"Goal added\", \"success\");\n      reload();\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setAdding(false); }\n  };\n\n  const updateProgress = async (g: any, progress: number) => {\n    const status = g.target && progress >= g.target ? \"completed\" : \"active\";\n    await api.updateGoal(g.id, { progress, status });\n    reload();\n  };\n\n  const remove = async (id: number) => { await api.deleteGoal(id); reload(); };\n\n  return (\n    <div className=\"space-y-5 animate-fade-up\">\n      <div>\n        <h1 className=\"text-2xl font-bold text-slate-50\">Goals</h1>\n        <p className=\"text-sm text-slate-500\">Set and track personal growth goals.</p>\n      </div>\n\n      <Card className=\"p-6\">\n        <div className=\"grid gap-3 sm:grid-cols-12\">\n          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder=\"e.g. Reach 500 contributions this year\"\n            className=\"sm:col-span-6 rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          <select value={category} onChange={(e) => setCategory(e.target.value)}\n            className=\"sm:col-span-3 rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\">\n            {CATEGORIES.map((c) => <option key={c}>{c}</option>)}\n          </select>\n          <input value={target} onChange={(e) => setTarget(e.target.value)} type=\"number\" placeholder=\"Target #\"\n            className=\"sm:col-span-2 rounded-xl border border-ink-600 bg-ink-900 px-3 py-2.5 text-sm text-slate-200 focus:border-brand-400 focus:outline-none\" />\n          <Button onClick={add} disabled={adding} className=\"sm:col-span-1\">Add</Button>\n        </div>\n      </Card>\n\n      {loading ? <><LoadingCard /><LoadingCard /></>\n        : error ? <ErrorState message={error} onRetry={reload} />\n        : !data?.goals?.length\n          ? <Card><EmptyState icon=\"🚀\" title=\"No goals yet\" body=\"Add your first growth goal above — track contributions, stars, learning targets and more.\" /></Card>\n          : (\n            <div className=\"space-y-3\">\n              {data.goals.map((g: any) => {\n                const pct = g.target ? Math.min(100, (g.progress / g.target) * 100) : (g.status === \"completed\" ? 100 : g.progress);\n                return (\n                  <Card key={g.id} className=\"p-5\">\n                    <div className=\"flex items-start justify-between gap-3\">\n                      <div className=\"min-w-0\">\n                        <div className=\"flex items-center gap-2\">\n                          <p className=\"font-medium text-slate-100\">{g.title}</p>\n                          {g.status === \"completed\" && <Badge color=\"green\">✓ done</Badge>}\n                        </div>\n                        <p className=\"text-xs text-slate-500\">{g.category}{g.target ? ` · ${g.progress}/${g.target}` : \"\"}</p>\n                      </div>\n                      <button onClick={() => remove(g.id)} className=\"text-xs text-slate-500 hover:text-rose-400\">Delete</button>\n                    </div>\n                    <div className=\"mt-3\"><ProgressBar value={pct} color={g.status === \"completed\" ? \"#34d399\" : \"#818cf8\"} /></div>\n                    <div className=\"mt-3 flex gap-2\">\n                      <Button variant=\"ghost\" className=\"!px-3 !py-1.5 text-xs\" onClick={() => updateProgress(g, (g.progress || 0) + 1)}>+1</Button>\n                      {g.target && <Button variant=\"ghost\" className=\"!px-3 !py-1.5 text-xs\" onClick={() => updateProgress(g, (g.progress || 0) + 10)}>+10</Button>}\n                      {g.status !== \"completed\" && <Button variant=\"outline\" className=\"!px-3 !py-1.5 text-xs\" onClick={() => updateProgress(g, g.target || g.progress)}>Mark done</Button>}\n                    </div>\n                  </Card>\n                );\n              })}\n            </div>\n          )}\n    </div>\n  );\n}\n",[],[274,322,355,389],"6e2b4c78-19c4-43cd-a988-33b753822d91","GitHubPage.tsx","89ae26c8-64a9-11f1-937f-1607ee4eb77e",18,["D",1781081474727],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, formatBytes, langColor } from \"../../lib/api.ts\";\nimport { useAsync } from \"../../lib/useAsync.ts\";\nimport { ToastContext } from \"../App.tsx\";\nimport { Badge, Button, Card, EmptyState, ErrorState, Heatmap, LoadingCard, Skeleton, Spinner } from \"../ui.tsx\";\n\nexport function GitHubPage() {\n  const toast = useContext(ToastContext);\n  const { data, loading, error, reload } = useAsync(() => api.github(), []);\n  const [syncing, setSyncing] = useState(false);\n\n  const sync = async () => {\n    setSyncing(true);\n    try { await api.sync(); toast(\"Synced\", \"success\"); reload(); }\n    catch (e: any) { toast(e.message, \"error\"); }\n    finally { setSyncing(false); }\n  };\n\n  if (loading) return <div className=\"space-y-5\"><Skeleton className=\"h-40 w-full rounded-2xl\" /><LoadingCard /><LoadingCard /></div>;\n  if (error) return <ErrorState message={error} onRetry={reload} />;\n  if (!data?.connected) {\n    return <Card><EmptyState icon=\"🐙\" title=\"GitHub not connected\" body=\"Connect your GitHub account to display your profile.\" action={<a href=\"/auth/github\"><Button>Connect GitHub</Button></a>} /></Card>;\n  }\n\n  const p = data.profile;\n  const langs = Object.entries(data.languages as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 10);\n  const totalBytes = langs.reduce((s, [, b]) => s + b, 0) || 1;\n  const repos = data.repos as any[];\n\n  return (\n    <div className=\"space-y-6 animate-fade-up\">\n      {/* profile header */}\n      <Card className=\"overflow-hidden\">\n        <div className=\"h-20 bg-gradient-to-r from-brand-600/30 to-accent-500/20\" />\n        <div className=\"flex flex-col gap-4 px-6 pb-6 sm:flex-row sm:items-end\">\n          <img src={p.avatar_url} alt=\"\" className=\"-mt-10 h-24 w-24 rounded-2xl border-4 border-ink-850 bg-ink-800\" />\n          <div className=\"flex-1\">\n            <h1 className=\"text-xl font-bold text-slate-50\">{p.name || p.login}</h1>\n            <a href={`https://github.com/${p.login}`} target=\"_blank\" rel=\"noreferrer\" className=\"text-sm text-brand-400 hover:underline\">@{p.login}</a>\n            {p.bio && <p className=\"mt-2 max-w-xl text-sm text-slate-400\">{p.bio}</p>}\n            <div className=\"mt-2 flex flex-wrap gap-3 text-xs text-slate-500\">\n              {p.company && <span>🏢 {p.company}</span>}\n              {p.location && <span>📍 {p.location}</span>}\n              {p.blog && <a href={p.blog.startsWith(\"http\") ? p.blog : `https://${p.blog}`} target=\"_blank\" rel=\"noreferrer\" className=\"hover:text-slate-300\">🔗 {p.blog}</a>}\n            </div>\n          </div>\n          <Button variant=\"ghost\" onClick={sync} disabled={syncing}>{syncing ? <><Spinner /> Syncing…</> : \"🔄 Sync\"}</Button>\n        </div>\n        <div className=\"grid grid-cols-2 divide-x divide-ink-700 border-t border-ink-700 sm:grid-cols-4\">\n          {[[\"Followers\", p.followers], [\"Following\", p.following], [\"Repos\", p.public_repos], [\"Stars\", p.total_stars]].map(([l, v]) => (\n            <div key={l as string} className=\"px-4 py-4 text-center\">\n              <p className=\"text-2xl font-bold text-slate-50\">{Number(v).toLocaleString()}</p>\n              <p className=\"text-xs text-slate-500\">{l}</p>\n            </div>\n          ))}\n        </div>\n      </Card>\n\n      {/* languages */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Languages</h3>\n        {langs.length ? (\n          <>\n            <div className=\"mb-4 flex h-3 w-full overflow-hidden rounded-full\">\n              {langs.map(([name, bytes]) => (\n                <div key={name} style={{ width: `${(bytes / totalBytes) * 100}%`, background: langColor(name) }} title={`${name}: ${formatBytes(bytes)}`} />\n              ))}\n            </div>\n            <div className=\"flex flex-wrap gap-x-5 gap-y-2 text-sm\">\n              {langs.map(([name, bytes]) => (\n                <span key={name} className=\"flex items-center gap-2 text-slate-300\">\n                  <span className=\"h-2.5 w-2.5 rounded-full\" style={{ background: langColor(name) }} />\n                  {name} <span className=\"text-slate-500\">{((bytes / totalBytes) * 100).toFixed(1)}%</span>\n                </span>\n              ))}\n            </div>\n          </>\n        ) : <p className=\"text-sm text-slate-500\">No language data.</p>}\n      </Card>\n\n      {/* contributions */}\n      <Card className=\"p-6\">\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold text-slate-200\">Contribution Activity</h3>\n          <Badge color=\"green\">{data.contributions.total.toLocaleString()} in the last year</Badge>\n        </div>\n        <Heatmap days={data.contributions.days} />\n      </Card>\n\n      {/* repositories */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Repositories ({repos.length})</h3>\n        {repos.length ? (\n          <div className=\"grid gap-3 sm:grid-cols-2\">\n            {repos.map((r) => (\n              <a key={r.repo_id} href={r.html_url} target=\"_blank\" rel=\"noreferrer\"\n                className=\"rounded-xl border border-ink-700 p-4 transition-all hover:-translate-y-0.5 hover:border-brand-500/40\">\n                <div className=\"flex items-center justify-between\">\n                  <p className=\"truncate font-medium text-slate-200\">{r.name}</p>\n                  {r.is_fork ? <Badge color=\"slate\">fork</Badge> : null}\n                </div>\n                <p className=\"mt-1 line-clamp-2 h-8 text-xs text-slate-500\">{r.description || \"No description\"}</p>\n                <div className=\"mt-3 flex items-center gap-3 text-xs text-slate-400\">\n                  {r.language && <span className=\"flex items-center gap-1\"><span className=\"h-2 w-2 rounded-full\" style={{ background: langColor(r.language) }} />{r.language}</span>}\n                  <span>⭐ {r.stars}</span>\n                  <span>🍴 {r.forks}</span>\n                </div>\n              </a>\n            ))}\n          </div>\n        ) : <p className=\"text-sm text-slate-500\">No repositories found.</p>}\n      </Card>\n    </div>\n  );\n}\n",[],[274,322,355,397],"d4bbbba1-f165-4719-8979-6785488f3236","Dashboard.tsx","7991bc00-64a9-11f1-9038-1607ee4eb77e",17,["D",1781081447693],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, langColor } from \"../../lib/api.ts\";\nimport { useAsync } from \"../../lib/useAsync.ts\";\nimport { ToastContext, type View } from \"../App.tsx\";\nimport {\n  BarChart, Button, Card, EmptyState, ErrorState, Heatmap,\n  LoadingCard, ProgressBar, ScoreRing, Skeleton, Spinner,\n} from \"../ui.tsx\";\n\nfunction Stat({ label, value, sub, icon }: any) {\n  return (\n    <Card className=\"p-5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium uppercase tracking-wide text-slate-500\">{label}</span>\n        <span className=\"text-lg\">{icon}</span>\n      </div>\n      <p className=\"mt-2 text-3xl font-bold text-slate-50\">{value}</p>\n      {sub && <p className=\"mt-1 text-xs text-slate-500\">{sub}</p>}\n    </Card>\n  );\n}\n\nexport function Dashboard({ go }: { go: (v: View) => void }) {\n  const toast = useContext(ToastContext);\n  const { data, loading, error, reload } = useAsync(() => api.dashboard(), []);\n  const [syncing, setSyncing] = useState(false);\n\n  const sync = async () => {\n    setSyncing(true);\n    try {\n      await api.sync();\n      toast(\"GitHub data synced\", \"success\");\n      reload();\n    } catch (e: any) { toast(e.message, \"error\"); }\n    finally { setSyncing(false); }\n  };\n\n  if (loading) {\n    return (\n      <div className=\"space-y-6\">\n        <Skeleton className=\"h-9 w-48\" />\n        <div className=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-4\">{[0, 1, 2, 3].map((i) => <LoadingCard key={i} />)}</div>\n        <div className=\"grid gap-5 lg:grid-cols-3\"><LoadingCard /><LoadingCard /><LoadingCard /></div>\n      </div>\n    );\n  }\n  if (error) return <ErrorState message={error} onRetry={reload} />;\n\n  if (!data?.ready) {\n    return (\n      <Card>\n        <EmptyState\n          icon=\"🐙\"\n          title=\"Sync your GitHub to build your dashboard\"\n          body=\"We'll pull your repositories, stars, languages and contribution history to compute your real analytics. No mock data — everything comes from your actual GitHub activity.\"\n          action={<Button onClick={sync} disabled={syncing}>{syncing ? <><Spinner /> Syncing…</> : \"Sync GitHub now\"}</Button>}\n        />\n      </Card>\n    );\n  }\n\n  const d = data;\n  return (\n    <div className=\"space-y-6 animate-fade-up\">\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-slate-50\">Dashboard</h1>\n          <p className=\"text-sm text-slate-500\">Your real developer growth, measured.</p>\n        </div>\n        <Button variant=\"ghost\" onClick={sync} disabled={syncing}>\n          {syncing ? <><Spinner /> Syncing…</> : <>🔄 Re-sync</>}\n        </Button>\n      </div>\n\n      {/* score rings */}\n      <div className=\"grid gap-5 md:grid-cols-3\">\n        <Card className=\"flex flex-col items-center p-6\">\n          <ScoreRing value={d.growthScore} label=\"Growth Score\" color=\"#818cf8\" />\n          <p className=\"mt-2 text-center text-xs text-slate-500\">Recent momentum: commits, streaks & shipping</p>\n        </Card>\n        <Card className=\"flex flex-col items-center p-6\">\n          <ScoreRing value={d.portfolioScore} label=\"Portfolio Score\" color=\"#34d399\" />\n          <p className=\"mt-2 text-center text-xs text-slate-500\">Breadth, docs, diversity & traction</p>\n        </Card>\n        <Card className=\"flex flex-col items-center justify-center p-6\">\n          <div className=\"text-5xl\">🔥</div>\n          <p className=\"mt-2 text-3xl font-bold text-slate-50\">{d.streak.current} days</p>\n          <p className=\"text-sm font-medium text-slate-300\">Current streak</p>\n          <p className=\"mt-1 text-xs text-slate-500\">Longest: {d.streak.longest} days</p>\n        </Card>\n      </div>\n\n      {/* stats */}\n      <div className=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        <Stat label=\"Contributions\" value={d.totalContributions.toLocaleString()} sub=\"last 12 months\" icon=\"📈\" />\n        <Stat label=\"Total Stars\" value={d.totalStars.toLocaleString()} sub=\"across all repos\" icon=\"⭐\" />\n        <Stat label=\"Public Repos\" value={d.publicRepos} sub=\"on GitHub\" icon=\"📦\" />\n        <Stat label=\"Followers\" value={d.followers} sub=\"on GitHub\" icon=\"👥\" />\n      </div>\n\n      {/* charts + skills */}\n      <div className=\"grid gap-5 lg:grid-cols-3\">\n        <Card className=\"p-6 lg:col-span-2\">\n          <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Monthly Contributions</h3>\n          {d.monthly?.length\n            ? <BarChart data={d.monthly.map((m: any) => ({ label: m.month.slice(5), value: m.count }))} />\n            : <p className=\"text-sm text-slate-500\">No contribution data yet.</p>}\n        </Card>\n        <Card className=\"p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Skill Progress</h3>\n          <div className=\"space-y-3\">\n            {d.skills?.length\n              ? d.skills.slice(0, 6).map((s: any) => (\n                <div key={s.name}>\n                  <div className=\"mb-1 flex justify-between text-xs\">\n                    <span className=\"text-slate-300\">{s.name}</span>\n                    <span className=\"text-slate-500\">{s.level}%</span>\n                  </div>\n                  <ProgressBar value={s.level} color={langColor(s.name)} />\n                </div>\n              ))\n              : <p className=\"text-sm text-slate-500\">No language data yet.</p>}\n          </div>\n        </Card>\n      </div>\n\n      {/* heatmap */}\n      <Card className=\"p-6\">\n        <h3 className=\"mb-4 text-sm font-semibold text-slate-200\">Contribution Activity</h3>\n        <Heatmap days={d.contributionsDays} />\n      </Card>\n\n      {/* top repos */}\n      <Card className=\"p-6\">\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold text-slate-200\">Top Repositories</h3>\n          <button className=\"text-xs text-brand-400 hover:underline\" onClick={() => go(\"repos\")}>Review with AI →</button>\n        </div>\n        <div className=\"space-y-2\">\n          {d.topRepos?.length\n            ? d.topRepos.map((r: any) => (\n              <a key={r.repo_id} href={r.html_url} target=\"_blank\" rel=\"noreferrer\"\n                className=\"flex items-center justify-between rounded-xl border border-ink-700 px-4 py-3 transition-colors hover:border-brand-500/40\">\n                <div className=\"min-w-0\">\n                  <p className=\"truncate font-medium text-slate-200\">{r.name}</p>\n                  <p className=\"truncate text-xs text-slate-500\">{r.description || \"No description\"}</p>\n                </div>\n                <div className=\"ml-4 flex items-center gap-3 text-xs text-slate-400\">\n                  {r.language && <span className=\"flex items-center gap-1\"><span className=\"h-2 w-2 rounded-full\" style={{ background: langColor(r.language) }} />{r.language}</span>}\n                  <span>⭐ {r.stars}</span>\n                </div>\n              </a>\n            ))\n            : <p className=\"text-sm text-slate-500\">No repositories found.</p>}\n        </div>\n      </Card>\n    </div>\n  );\n}\n",[],[274,322,355,405],"5dac4a17-b2cf-44a5-96b1-2c1b369943d8",["D",1781081447693],[236,237,238,239,240,241,242,243],[274,322,355],"05670704-fec1-4790-95af-9c659b9ec11b",["D",1781081338316],[235,244,245,246,247],[274,322],"a8f57a88-41cd-4054-869c-df3572a16e1f",["D",1781081274132],[234,248,251,252,253],[274],["D",1781081122153],[],[18,84],["D",1781081097986],[],[18,69],["D",1781081136564],[],[18,93],["D",1781081157607],[],[18,102],["D",1781081189587],[],[18,111],["D",1781081097986],[228,229,230,231,232],[18],["D",1781081075707],{"_11":12,"_162":75},{"_11":12,"_158":75,"_74":75,"_31":73,"_159":160,"_161":30},{"_43":149,"_13":16,"_37":40,"_150":115,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_57":-5,"_181":479,"_480":481,"_482":483,"_484":30,"_485":30,"_486":30,"_487":24,"_488":-5,"_489":-7,"_490":-7,"_491":26,"_492":30,"_493":30,"_494":-5,"_495":30,"_496":30,"_497":30,"_498":-5},"ENV",{"_450":451,"_452":453,"_454":16,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476,"_477":478},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]
</article></body></html>

{title}

Something went wrong

\n Your developer growth,measured by AI\n

{f.title}

Ready to level up your developer profile?

Settings

Profile

\n Your developer growth,
measured by AI\n

History · backend