@burdenoff/microfe-technospam 2026.1014.1 → 2026.1030.1

package/dist/technospam/pages/ApplicationsProblemDetailsPagePage.js

@@ -1,66 +1,77 @@
 import { useTechnoSpam as e } from "../providers/TechnoSpamProvider.js";
 import { useTechnoSpamAnalytics as t } from "../hooks/useTechnoSpamAnalytics.js";
-import { PageLayout as n } from "../components/PageLayout.js";
-import { StatCard as r } from "../components/StatCard.js";
-import { formatDateTime as i, humanizeEnum as a } from "../utils/format.js";
-import { StatusBadge as o } from "../components/StatusBadge.js";
-import { EmptyView as s, ErrorView as c, LoadingRows as l } from "../components/StateViews.js";
-import { TagStrip as u } from "../components/TagStrip.js";
-import { PremiumBadge as ee, UpgradeGate as d } from "../components/UpgradeGate.js";
-import { CodePanel as f, IoBlock as p, TestResultsPanel as te } from "../components/SubmissionViews.js";
+import { cn as n } from "../utils/cn.js";
+import { PageLayout as r } from "../components/PageLayout.js";
+import { StatCard as i } from "../components/StatCard.js";
+import { formatDateTime as a, humanizeEnum as o } from "../utils/format.js";
+import { StatusBadge as s } from "../components/StatusBadge.js";
+import { EmptyView as c, ErrorView as l, LoadingRows as ee } from "../components/StateViews.js";
+import { TagStrip as te } from "../components/TagStrip.js";
+import { PremiumBadge as ne, UpgradeGate as u } from "../components/UpgradeGate.js";
+import { CodePanel as re, IoBlock as d, TestResultsPanel as ie } from "../components/SubmissionViews.js";
 import "../components/index.js";
-import { notify as m } from "../lib/toast.js";
-import { useProblemQuery as ne, useRegradeSubmission as re, useSubmissionsQuery as ie, useSubmitSolution as ae } from "../api/technospamApi.js";
-import { useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Clock as y, Code2 as b, FileText as x, FlaskConical as oe, Layers as S, RefreshCw as se, Send as ce, Trophy as C } from "lucide-react";
-import { useSearchParams as w } from "react-router";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import { Badge as le, Button as D, GlassCard as O, Select as ue, SelectContent as de, SelectItem as fe, SelectTrigger as pe, SelectValue as me, Skeleton as k, Textarea as he } from "@burdenoff/fe-libs/ui";
+import { notify as f } from "../lib/toast.js";
+import { useProblemQuery as ae, useRegradeSubmission as oe, useSubmissionsQuery as se, useSubmitSolution as ce } from "../api/technospamApi.js";
+import { FOCUS_PARAMS as le } from "../utils/pageContext.js";
+import { focusableCardProps as p, useFocusedRecordParam as ue } from "../hooks/useFocusedRecordParam.js";
+import { useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { Clock as v, Code2 as y, FileText as b, FlaskConical as de, Layers as x, RefreshCw as S, Send as fe, Trophy as C } from "lucide-react";
+import { useSearchParams as pe } from "react-router";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Badge as me, Button as E, GlassCard as D, Select as he, SelectContent as ge, SelectItem as _e, SelectTrigger as ve, SelectValue as ye, Skeleton as O, Textarea as be } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/ApplicationsProblemDetailsPagePage.tsx
-var A = [
+var k = [
 	"javascript",
 	"python",
 	"typescript"
-];
-function ge({ s: e }) {
-	return /* @__PURE__ */ E("div", {
-		className: "rounded-lg border border-transparent px-2 py-3 transition-colors hover:border-border-seam hover:bg-bg-sunken",
-		children: [/* @__PURE__ */ E("div", {
+], xe = 3e3, Se = 3 * 6e4;
+function Ce({ s: e, focused: t, onToggle: r }) {
+	return /* @__PURE__ */ T("div", {
+		className: n("cursor-pointer rounded-lg border border-transparent px-2 py-3 transition-colors hover:border-border-seam hover:bg-bg-sunken", t && "ring-2 ring-accent-primary"),
+		...p(t, r),
+		children: [/* @__PURE__ */ T("div", {
 			className: "flex flex-wrap items-center gap-x-4 gap-y-1",
 			children: [
-				/* @__PURE__ */ T(o, { status: e.verdict }),
-				/* @__PURE__ */ E("span", {
+				/* @__PURE__ */ w("button", {
+					type: "button",
+					"aria-pressed": t,
+					"aria-label": `Focus submission from ${a(e.createdAt)}`,
+					onClick: r,
+					className: "rounded-full",
+					children: /* @__PURE__ */ w(s, { status: e.verdict })
+				}),
+				/* @__PURE__ */ T("span", {
 					className: "inline-flex items-center gap-1 text-sm font-medium text-text-primary",
 					children: [
-						/* @__PURE__ */ T(b, { size: 13 }),
+						/* @__PURE__ */ w(y, { size: 13 }),
 						" ",
-						a(e.language)
+						o(e.language)
 					]
 				}),
-				/* @__PURE__ */ E("span", {
+				/* @__PURE__ */ T("span", {
 					className: "inline-flex items-center gap-1 text-xs text-text-muted",
 					children: [
-						/* @__PURE__ */ T(y, { size: 12 }),
+						/* @__PURE__ */ w(v, { size: 12 }),
 						" ",
 						e.runtimeMs,
 						" ms"
 					]
 				}),
-				/* @__PURE__ */ E("span", {
+				/* @__PURE__ */ T("span", {
 					className: "inline-flex items-center gap-1 text-xs text-text-muted",
 					children: [
-						/* @__PURE__ */ T(C, { size: 12 }),
+						/* @__PURE__ */ w(C, { size: 12 }),
 						" ",
 						e.pointsAwarded,
 						" pts"
 					]
 				}),
-				/* @__PURE__ */ T("span", {
+				/* @__PURE__ */ w("span", {
 					className: "ml-auto text-xs text-text-muted",
-					children: i(e.createdAt)
+					children: a(e.createdAt)
 				})
 			]
-		}), e.totalCount > 0 ? /* @__PURE__ */ E("p", {
+		}), e.totalCount > 0 ? /* @__PURE__ */ T("p", {
 			className: "mt-1 px-0.5 text-xs text-text-muted",
 			children: [
 				"Passed ",
@@ -72,267 +83,296 @@ function ge({ s: e }) {
 		}) : null]
 	});
 }
-function j() {
-	let [i] = w(), j = i.get("id") ?? "", { currentUser: M, workspaceId: N } = e(), P = M?.id, { emit: F } = t(), { data: I, loading: _e, error: L, refetch: R } = ne(j);
-	h(() => {
-		j && F("technospam.problem.viewed", {
-			workspaceId: N,
-			entityId: j,
+function A() {
+	let [n] = pe(), a = n.get("id") ?? "", [p, A] = ue(le.submission), { currentUser: we, workspaceId: j } = e(), M = we?.id, { emit: N } = t(), { data: Te, loading: Ee, error: P, refetch: F } = ae(a);
+	m(() => {
+		a && N("technospam.problem.viewed", {
+			workspaceId: j,
+			entityId: a,
 			entityType: "TEC_PROBLEM"
 		});
 	}, [
+		a,
 		j,
-		N,
-		F
+		N
 	]);
-	let { data: z, loading: ve, error: B, refetch: V } = ie({
-		...P ? { learnerId: P } : {},
-		problemId: j
-	}), [ye, { loading: H }] = ae(), [be, { loading: U }] = re(), W = I?.tecProblem ?? null, G = g(() => W?.languages?.length ? W.languages : A, [W]), [K, q] = v(""), [J, Y] = v(""), X = _(!1);
-	h(() => {
-		W && !X.current && (q(W.languages[0] ?? A[0]), Y(W.starterCode ?? ""), X.current = !0);
-	}, [W]);
-	let Z = g(() => [...z?.tecListSubmissions?.items ?? []].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()), [z]), xe = async () => {
-		if (!j) return;
-		if (!K) {
-			m.error("Pick a language", "Choose a language before submitting.");
+	let { data: I, loading: De, error: L, refetch: R } = se({
+		...M ? { learnerId: M } : {},
+		problemId: a
+	}), [Oe, { loading: z }] = ce(), [ke, { loading: B }] = oe(), V = Te?.tecProblem ?? null, H = h(() => V?.languages?.length ? V.languages : k, [V]), [U, W] = _(""), [G, K] = _(""), q = g(!1);
+	m(() => {
+		V && !q.current && (W(V.languages[0] ?? k[0]), K(V.starterCode ?? ""), q.current = !0);
+	}, [V]);
+	let J = h(() => [...I?.tecListSubmissions?.items ?? []].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()), [I]), Ae = async () => {
+		if (!a) return;
+		if (!U) {
+			f.error("Pick a language", "Choose a language before submitting.");
 			return;
 		}
-		if (!J.trim()) {
-			m.error("Add your solution", "Write some code before submitting.");
+		if (!G.trim()) {
+			f.error("Add your solution", "Write some code before submitting.");
 			return;
 		}
-		F("technospam.problem.submit_clicked", {
-			workspaceId: N,
-			entityId: j,
+		N("technospam.problem.submit_clicked", {
+			workspaceId: j,
+			entityId: a,
 			entityType: "TEC_PROBLEM",
-			language: K
+			language: U
 		});
-		let e = await ye({ variables: { input: {
-			problemId: j,
-			language: K,
-			code: J
+		let e = await Oe({ variables: { input: {
+			problemId: a,
+			language: U,
+			code: G
 		} } });
 		if (e.data?.tecSubmitSolution) {
-			F("technospam.problem.submitted", {
-				workspaceId: N,
-				entityId: j,
+			N("technospam.problem.submitted", {
+				workspaceId: j,
+				entityId: a,
 				entityType: "TEC_PROBLEM",
 				submissionId: e.data.tecSubmitSolution.id
 			});
 			let t = e.data.tecSubmitSolution;
-			t.verdict === "PENDING" ? m.info("Solution submitted", "The grader is not available right now — your submission was saved and can be re-run.") : t.verdict === "ACCEPTED" ? m.success("Accepted", `Passed all ${t.totalCount} test cases.`) : m.error(a(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), await Promise.all([R(), V()]);
+			t.verdict === "PENDING" ? f.info("Solution submitted", "Grading has started — your verdict will appear here in a moment.") : t.verdict === "ACCEPTED" ? f.success("Accepted", `Passed all ${t.totalCount} test cases.`) : f.error(o(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), await Promise.all([F(), R()]);
+		}
+	}, je = async (e) => {
+		let t = (await ke({ variables: { id: e } })).data?.tecRegradeSubmission;
+		t && (t.verdict === "PENDING" ? f.error("Still pending", "The grader is not available yet. Please try again shortly.") : f.success("Grading complete", `Verdict: ${o(t.verdict)}.`), await Promise.all([F(), R()]));
+	}, Y = J.find((e) => (e.testResults?.length ?? 0) > 0) ?? null, X = J[0] ?? null, Z = X?.verdict === "PENDING" ? X.id : null, [Q, Me] = _(null), Ne = Z !== null && Q !== Z;
+	m(() => {
+		if (!Z || Q === Z) return;
+		let e = Date.now(), t = window.setInterval(() => {
+			if (Date.now() - e > Se) {
+				window.clearInterval(t), Me(Z);
+				return;
+			}
+			R();
+		}, xe);
+		return () => window.clearInterval(t);
+	}, [
+		Z,
+		Q,
+		R
+	]);
+	let $ = g(null);
+	return m(() => {
+		if (Z) {
+			$.current = Z;
+			return;
 		}
-	}, Se = async (e) => {
-		let t = (await be({ variables: { id: e } })).data?.tecRegradeSubmission;
-		t && (t.verdict === "PENDING" ? m.error("Still pending", "The grader is not available yet. Please try again shortly.") : m.success("Grading complete", `Verdict: ${a(t.verdict)}.`), await Promise.all([R(), V()]));
-	}, Q = Z.find((e) => (e.testResults?.length ?? 0) > 0) ?? null, $ = Z[0] ?? null;
-	return _e && !W ? /* @__PURE__ */ E(n, {
+		let e = $.current;
+		if (!e) return;
+		let t = J.find((t) => t.id === e);
+		!t || t.verdict === "PENDING" || ($.current = null, t.verdict === "ACCEPTED" ? f.success("Accepted", `Passed all ${t.totalCount} test cases.`) : f.error(o(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), F());
+	}, [
+		Z,
+		J,
+		F
+	]), Ee && !V ? /* @__PURE__ */ T(r, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		children: [/* @__PURE__ */ T(k, { className: "mb-4 h-28 w-full rounded-xl" }), /* @__PURE__ */ T(k, { className: "h-72 w-full rounded-xl" })]
-	}) : L || !W ? /* @__PURE__ */ T(n, {
+		children: [/* @__PURE__ */ w(O, { className: "mb-4 h-28 w-full rounded-xl" }), /* @__PURE__ */ w(O, { className: "h-72 w-full rounded-xl" })]
+	}) : P || !V ? /* @__PURE__ */ w(r, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		children: L ? /* @__PURE__ */ T(c, {
+		children: P ? /* @__PURE__ */ w(l, {
 			title: "Couldn't load problem",
-			error: L
-		}) : /* @__PURE__ */ T(s, {
+			error: P
+		}) : /* @__PURE__ */ w(c, {
 			title: "Problem not found",
 			description: "This problem may have been unpublished."
 		})
-	}) : /* @__PURE__ */ E(n, {
+	}) : /* @__PURE__ */ T(r, {
 		hero: !0,
 		backPath: "/applications/problems-page",
-		title: W.title,
-		description: W.topic ?? void 0,
+		title: V.title,
+		description: V.topic ?? void 0,
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ T("div", {
 				className: "mb-5 flex flex-wrap items-center gap-2",
 				children: [
-					/* @__PURE__ */ T(o, {
-						status: W.difficulty,
+					/* @__PURE__ */ w(s, {
+						status: V.difficulty,
 						kind: "level"
 					}),
-					/* @__PURE__ */ T(o, { status: W.status }),
-					W.topic ? /* @__PURE__ */ E(le, {
+					/* @__PURE__ */ w(s, { status: V.status }),
+					V.topic ? /* @__PURE__ */ T(me, {
 						variant: "outline",
 						className: "gap-1",
 						children: [
-							/* @__PURE__ */ T(S, { size: 12 }),
+							/* @__PURE__ */ w(x, { size: 12 }),
 							" ",
-							W.topic
+							V.topic
 						]
 					}) : null,
-					W.isPremiumOnly ? /* @__PURE__ */ T(ee, { locked: W.isLocked }) : null,
-					/* @__PURE__ */ T(u, { tags: W.tags })
+					V.isPremiumOnly ? /* @__PURE__ */ w(ne, { locked: V.isLocked }) : null,
+					/* @__PURE__ */ w(te, { tags: V.tags })
 				]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ T("div", {
 				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ T(r, {
+					/* @__PURE__ */ w(i, {
 						label: "Points",
-						value: W.points,
+						value: V.points,
 						icon: C,
 						tone: "amber"
 					}),
-					/* @__PURE__ */ T(r, {
+					/* @__PURE__ */ w(i, {
 						label: "Languages",
-						value: G.length,
-						icon: b,
+						value: H.length,
+						icon: y,
 						tone: "blue"
 					}),
-					/* @__PURE__ */ T(r, {
+					/* @__PURE__ */ w(i, {
 						label: "Difficulty",
-						value: a(W.difficulty),
-						icon: S,
+						value: o(V.difficulty),
+						icon: x,
 						tone: "purple"
 					}),
-					/* @__PURE__ */ T(r, {
+					/* @__PURE__ */ w(i, {
 						label: "My submissions",
-						value: Z.length,
-						icon: x,
+						value: J.length,
+						icon: b,
 						tone: "teal"
 					})
 				]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ T("div", {
 				className: "grid grid-cols-1 gap-5 lg:grid-cols-3",
-				children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ T("div", {
 					className: "space-y-5 lg:col-span-2",
 					children: [
-						/* @__PURE__ */ E(O, {
+						/* @__PURE__ */ T(D, {
 							className: "p-5",
-							children: [/* @__PURE__ */ T("h2", {
+							children: [/* @__PURE__ */ w("h2", {
 								className: "mb-2 text-base font-semibold text-text-primary",
 								children: "Problem statement"
-							}), W.isLocked ? /* @__PURE__ */ T(d, { description: "This problem's statement is part of a paid TechnoSpam plan. Ask a workspace admin to upgrade to unlock it." }) : W.statement ? /* @__PURE__ */ T("p", {
+							}), V.isLocked ? /* @__PURE__ */ w(u, { description: "This problem's statement is part of a paid TechnoSpam plan. Ask a workspace admin to upgrade to unlock it." }) : V.statement ? /* @__PURE__ */ w("p", {
 								className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
-								children: W.statement
-							}) : /* @__PURE__ */ T("p", {
+								children: V.statement
+							}) : /* @__PURE__ */ w("p", {
 								className: "py-4 text-center text-sm text-text-muted",
 								children: "The statement for this problem is being prepared."
 							})]
 						}),
-						W.isLocked ? /* @__PURE__ */ T(d, {
+						V.isLocked ? /* @__PURE__ */ w(u, {
 							compact: !0,
 							description: "Starter code and sample test cases unlock with a paid TechnoSpam plan."
-						}) : W.starterCode ? /* @__PURE__ */ E(O, {
+						}) : V.starterCode ? /* @__PURE__ */ T(D, {
 							className: "p-5",
-							children: [/* @__PURE__ */ T("h2", {
+							children: [/* @__PURE__ */ w("h2", {
 								className: "mb-3 text-base font-semibold text-text-primary",
 								children: "Starter code"
-							}), /* @__PURE__ */ T(f, {
-								label: a(G[0] ?? "code"),
+							}), /* @__PURE__ */ w(re, {
+								label: o(H[0] ?? "code"),
 								bodyClassName: "max-h-72",
-								children: W.starterCode
+								children: V.starterCode
 							})]
 						}) : null,
-						/* @__PURE__ */ E(O, {
+						/* @__PURE__ */ T(D, {
 							className: "p-5",
 							children: [
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ T("div", {
 									className: "mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
-									children: [/* @__PURE__ */ T("h2", {
+									children: [/* @__PURE__ */ w("h2", {
 										className: "text-base font-semibold text-text-primary",
 										children: "Submit a solution"
-									}), /* @__PURE__ */ E("div", {
+									}), /* @__PURE__ */ T("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ T("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "text-sm text-text-secondary",
 											children: "Language"
-										}), /* @__PURE__ */ E(ue, {
-											value: K,
-											onValueChange: q,
-											children: [/* @__PURE__ */ T(pe, {
+										}), /* @__PURE__ */ T(he, {
+											value: U,
+											onValueChange: W,
+											children: [/* @__PURE__ */ w(ve, {
 												className: "w-full sm:w-48",
-												children: /* @__PURE__ */ T(me, { placeholder: "Choose a language" })
-											}), /* @__PURE__ */ T(de, { children: G.map((e) => /* @__PURE__ */ T(fe, {
+												children: /* @__PURE__ */ w(ye, { placeholder: "Choose a language" })
+											}), /* @__PURE__ */ w(ge, { children: H.map((e) => /* @__PURE__ */ w(_e, {
 												value: e,
-												children: a(e)
+												children: o(e)
 											}, e)) })]
 										})]
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ T("div", {
 									className: "overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm",
-									children: [/* @__PURE__ */ E("div", {
+									children: [/* @__PURE__ */ T("div", {
 										className: "flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2",
-										children: [/* @__PURE__ */ E("div", {
+										children: [/* @__PURE__ */ T("div", {
 											className: "flex items-center gap-1.5",
 											children: [
-												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-error-border" }),
-												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-warning-border" }),
-												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-success-border" })
+												/* @__PURE__ */ w("span", { className: "h-2.5 w-2.5 rounded-full bg-status-error-border" }),
+												/* @__PURE__ */ w("span", { className: "h-2.5 w-2.5 rounded-full bg-status-warning-border" }),
+												/* @__PURE__ */ w("span", { className: "h-2.5 w-2.5 rounded-full bg-status-success-border" })
 											]
-										}), /* @__PURE__ */ E("span", {
+										}), /* @__PURE__ */ T("span", {
 											className: "inline-flex items-center gap-1.5 font-mono text-xs text-text-muted",
 											children: [
-												/* @__PURE__ */ T(b, { size: 13 }),
+												/* @__PURE__ */ w(y, { size: 13 }),
 												" ",
-												K ? a(K) : "solution"
+												U ? o(U) : "solution"
 											]
 										})]
-									}), /* @__PURE__ */ T(he, {
-										value: J,
-										onChange: (e) => Y(e.target.value),
+									}), /* @__PURE__ */ w(be, {
+										value: G,
+										onChange: (e) => K(e.target.value),
 										placeholder: "Write your solution…",
 										className: "min-h-[280px] resize-y rounded-none border-0 bg-transparent font-mono text-xs leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0",
 										spellCheck: !1
 									})]
 								}),
-								/* @__PURE__ */ E(D, {
+								/* @__PURE__ */ T(E, {
 									className: "mt-4 w-full",
-									onClick: xe,
-									disabled: H || !J.trim(),
+									onClick: Ae,
+									disabled: z || !G.trim(),
 									children: [
-										/* @__PURE__ */ T(ce, { size: 16 }),
+										/* @__PURE__ */ w(fe, { size: 16 }),
 										" ",
-										H ? "Running test cases…" : "Run & submit"
+										z ? "Running test cases…" : "Run & submit"
 									]
 								}),
-								/* @__PURE__ */ T("p", {
+								/* @__PURE__ */ w("p", {
 									className: "mt-2 text-center text-xs text-text-muted",
 									children: "Your code runs against this problem's test cases in an isolated sandbox."
 								})
 							]
 						}),
-						W.publicTestCases?.length ? /* @__PURE__ */ E(O, {
+						V.publicTestCases?.length ? /* @__PURE__ */ T(D, {
 							className: "p-5",
 							children: [
-								/* @__PURE__ */ E("h2", {
+								/* @__PURE__ */ T("h2", {
 									className: "mb-1 flex items-center gap-2 text-base font-semibold text-text-primary",
-									children: [/* @__PURE__ */ T(oe, { size: 16 }), " Sample test cases"]
+									children: [/* @__PURE__ */ w(de, { size: 16 }), " Sample test cases"]
 								}),
-								/* @__PURE__ */ T("p", {
+								/* @__PURE__ */ w("p", {
 									className: "mb-3 text-sm text-text-secondary",
 									children: "Your solution reads each input from stdin and must print the expected output. Hidden test cases are also run when you submit."
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ w("div", {
 									className: "space-y-3",
-									children: W.publicTestCases.map((e) => /* @__PURE__ */ E("div", {
+									children: V.publicTestCases.map((e) => /* @__PURE__ */ T("div", {
 										className: "rounded-xl border border-border-seam p-3",
-										children: [/* @__PURE__ */ E("div", {
+										children: [/* @__PURE__ */ T("div", {
 											className: "mb-2 flex flex-wrap items-center gap-x-3 gap-y-1",
-											children: [/* @__PURE__ */ T("span", {
+											children: [/* @__PURE__ */ w("span", {
 												className: "text-sm font-medium text-text-primary",
 												children: e.name
-											}), /* @__PURE__ */ E("span", {
+											}), /* @__PURE__ */ T("span", {
 												className: "inline-flex items-center gap-1 text-xs text-text-muted",
 												children: [
-													/* @__PURE__ */ T(y, { size: 12 }),
+													/* @__PURE__ */ w(v, { size: 12 }),
 													" ",
 													e.timeLimitMs,
 													" ms limit"
 												]
 											})]
-										}), /* @__PURE__ */ E("div", {
+										}), /* @__PURE__ */ T("div", {
 											className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
-											children: [/* @__PURE__ */ T(p, {
+											children: [/* @__PURE__ */ w(d, {
 												label: "Input",
 												value: e.input
-											}), /* @__PURE__ */ T(p, {
+											}), /* @__PURE__ */ w(d, {
 												label: "Expected output",
 												value: e.expectedOutput
 											})]
@@ -341,56 +381,66 @@ function j() {
 								})
 							]
 						}) : null,
-						Q ? /* @__PURE__ */ E(O, {
-							className: "p-5",
-							children: [/* @__PURE__ */ T("h2", {
-								className: "mb-3 text-base font-semibold text-text-primary",
-								children: "Latest run"
-							}), /* @__PURE__ */ T(te, { submission: Q })]
-						}) : $ && $.verdict === "PENDING" ? /* @__PURE__ */ E(O, {
+						Z ? /* @__PURE__ */ T(D, {
 							className: "p-5",
 							children: [
-								/* @__PURE__ */ T("h2", {
+								/* @__PURE__ */ w("h2", {
 									className: "mb-2 text-base font-semibold text-text-primary",
 									children: "Latest run"
 								}),
-								/* @__PURE__ */ T("p", {
+								Ne ? /* @__PURE__ */ T("p", {
+									className: "mb-3 inline-flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ w(S, {
+										size: 14,
+										className: "animate-spin"
+									}), "Grading your submission — the grader is starting up. Your verdict will appear here automatically."]
+								}) : /* @__PURE__ */ w("p", {
 									className: "mb-3 text-sm text-text-secondary",
-									children: "Your most recent submission has not been graded yet — the grader was unavailable when you submitted. You can re-run it without resubmitting your code."
+									children: "Your most recent submission has not been graded yet — the grader was unavailable. You can re-run it without resubmitting your code."
 								}),
-								/* @__PURE__ */ E(D, {
+								/* @__PURE__ */ T(E, {
 									variant: "outline",
-									onClick: () => void Se($.id),
-									disabled: U,
+									onClick: () => void je(Z),
+									disabled: B,
 									children: [
-										/* @__PURE__ */ T(se, { size: 16 }),
+										/* @__PURE__ */ w(S, { size: 16 }),
 										" ",
-										U ? "Re-running…" : "Re-run grader"
+										B ? "Re-running…" : "Re-run grader"
 									]
 								})
 							]
+						}) : Y ? /* @__PURE__ */ T(D, {
+							className: "p-5",
+							children: [/* @__PURE__ */ w("h2", {
+								className: "mb-3 text-base font-semibold text-text-primary",
+								children: "Latest run"
+							}), /* @__PURE__ */ w(ie, { submission: Y })]
 						}) : null
 					]
-				}), /* @__PURE__ */ T("div", {
+				}), /* @__PURE__ */ w("div", {
 					className: "lg:col-span-1",
-					children: /* @__PURE__ */ E(O, {
+					children: /* @__PURE__ */ T(D, {
 						className: "p-5",
-						children: [/* @__PURE__ */ T("h2", {
+						children: [/* @__PURE__ */ w("h2", {
 							className: "mb-3 text-base font-semibold text-text-primary",
 							children: "My submissions"
-						}), ve && !Z.length ? /* @__PURE__ */ T(l, {
+						}), De && !J.length ? /* @__PURE__ */ w(ee, {
 							count: 3,
 							height: "h-12"
-						}) : B ? /* @__PURE__ */ T(c, {
+						}) : L ? /* @__PURE__ */ w(l, {
 							title: "Couldn't load submissions",
-							error: B
-						}) : Z.length === 0 ? /* @__PURE__ */ T(s, {
-							icon: /* @__PURE__ */ T(x, { size: 24 }),
+							error: L
+						}) : J.length === 0 ? /* @__PURE__ */ w(c, {
+							icon: /* @__PURE__ */ w(b, { size: 24 }),
 							title: "No submissions yet",
 							description: "Submit a solution above to see your verdicts and points here."
-						}) : /* @__PURE__ */ T("div", {
+						}) : /* @__PURE__ */ w("div", {
 							className: "space-y-1",
-							children: Z.map((e) => /* @__PURE__ */ T(ge, { s: e }, e.id))
+							children: J.map((e) => /* @__PURE__ */ w(Ce, {
+								s: e,
+								focused: p === e.id,
+								onToggle: () => A(p === e.id ? null : e.id)
+							}, e.id))
 						})]
 					})
 				})]
@@ -399,6 +449,6 @@ function j() {
 	});
 }
 //#endregion
-export { j as ApplicationsProblemDetailsPagePage };
+export { A as ApplicationsProblemDetailsPagePage };
 
 //# sourceMappingURL=ApplicationsProblemDetailsPagePage.js.map