@burdenoff/microfe-technospam 2026.1102.1 → 2026.1102.3

package/dist/technospam/pages/ApplicationsProblemDetailsPagePage.js

@@ -6,73 +6,76 @@ import { StatCard as a } from "../components/StatCard.js";
 import { formatDateTime as o, humanizeEnum as s } from "../utils/format.js";
 import { StatusBadge as c } from "../components/StatusBadge.js";
 import { PremiumBadge as ee, UpgradeGate as l } from "../components/UpgradeGate.js";
-import { EmptyView as te, ErrorView as u, LoadingRows as ne } from "../components/StateViews.js";
-import { TagStrip as re } from "../components/TagStrip.js";
-import { CodePanel as ie, IoBlock as d, TestResultsPanel as ae } from "../components/SubmissionViews.js";
-import { notify as f } from "../lib/toast.js";
-import { useProblemQuery as oe, useRegradeSubmission as se, useSubmissionsQuery as ce, useSubmitSolution as le } from "../api/technospamApi.js";
-import { SubmissionReviewPanel as ue } from "../components/SubmissionReviewPanel.js";
+import { EmptyView as te, ErrorView as ne, LoadingRows as re } from "../components/StateViews.js";
+import { TagStrip as ie } from "../components/TagStrip.js";
+import { CodePanel as ae, IoBlock as oe, TestResultsPanel as se } from "../components/SubmissionViews.js";
+import { notify as u } from "../lib/toast.js";
+import { useProblemQuery as ce, useRegradeSubmission as le, useSubmissionsQuery as ue, useSubmitSolution as de } from "../api/technospamApi.js";
+import { SubmissionReviewPanel as fe } from "../components/SubmissionReviewPanel.js";
+import { TechnoSpamErrorBoundary as pe } from "../components/TechnoSpamErrorBoundary.js";
 import "../components/index.js";
-import { FOCUS_PARAMS as de } from "../utils/pageContext.js";
-import { focusableCardProps as p, useFocusedRecordParam as fe } 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 pe, Layers as x, RefreshCw as S, Send as me, Sparkles as he, Trophy as C } from "lucide-react";
-import { useSearchParams as ge } from "react-router";
-import { Fragment as _e, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { Badge as ve, Button as E, GlassCard as D, Select as ye, SelectContent as be, SelectItem as xe, SelectTrigger as Se, SelectValue as Ce, Skeleton as O, Textarea as we } from "@burdenoff/fe-libs/ui";
+import { FOCUS_PARAMS as me } from "../utils/pageContext.js";
+import { useSolutionRunner as he } from "../hooks/useSolutionRunner.js";
+import { RunOutputPanel as ge } from "../components/editor/RunOutputPanel.js";
+import { focusableCardProps as d, useFocusedRecordParam as _e } from "../hooks/useFocusedRecordParam.js";
+import { Suspense as ve, lazy as f, useEffect as p, useMemo as ye, useRef as be, useState as m } from "react";
+import { BookOpen as xe, Clock as h, Code2 as g, FileText as _, FlaskConical as Se, Layers as v, Play as Ce, RefreshCw as y, RotateCcw as we, Send as Te, Sparkles as Ee, Terminal as b, Trophy as x } from "lucide-react";
+import { useSearchParams as De } from "react-router";
+import { Fragment as Oe, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Badge as ke, Button as w, GlassCard as T, Select as Ae, SelectContent as je, SelectItem as Me, SelectTrigger as Ne, SelectValue as Pe, Skeleton as E, Textarea as D } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/ApplicationsProblemDetailsPagePage.tsx
-var k = [
+var O = [
 	"javascript",
 	"python",
 	"typescript"
-], Te = 3e3, Ee = 3 * 6e4;
-function De({ s: e, focused: t, onToggle: n }) {
-	return /* @__PURE__ */ T("div", {
+], Fe = f(() => import("../components/editor/CodeEditor.js")), Ie = 3e3, Le = 3 * 6e4;
+function Re({ s: e, focused: t, onToggle: n }) {
+	return /* @__PURE__ */ C("div", {
 		className: r("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, n),
-		children: [/* @__PURE__ */ T("div", {
+		...d(t, n),
+		children: [/* @__PURE__ */ C("div", {
 			className: "flex flex-wrap items-center gap-x-4 gap-y-1",
 			children: [
-				/* @__PURE__ */ w("button", {
+				/* @__PURE__ */ S("button", {
 					type: "button",
 					"aria-pressed": t,
 					"aria-label": `Focus submission from ${o(e.createdAt)}`,
 					onClick: n,
 					className: "rounded-full",
-					children: /* @__PURE__ */ w(c, { status: e.verdict })
+					children: /* @__PURE__ */ S(c, { status: e.verdict })
 				}),
-				/* @__PURE__ */ T("span", {
+				/* @__PURE__ */ C("span", {
 					className: "inline-flex items-center gap-1 text-sm font-medium text-text-primary",
 					children: [
-						/* @__PURE__ */ w(y, { size: 13 }),
+						/* @__PURE__ */ S(g, { size: 13 }),
 						" ",
 						s(e.language)
 					]
 				}),
-				/* @__PURE__ */ T("span", {
+				/* @__PURE__ */ C("span", {
 					className: "inline-flex items-center gap-1 text-xs text-text-muted",
 					children: [
-						/* @__PURE__ */ w(v, { size: 12 }),
+						/* @__PURE__ */ S(h, { size: 12 }),
 						" ",
 						e.runtimeMs,
 						" ms"
 					]
 				}),
-				/* @__PURE__ */ T("span", {
+				/* @__PURE__ */ C("span", {
 					className: "inline-flex items-center gap-1 text-xs text-text-muted",
 					children: [
-						/* @__PURE__ */ w(C, { size: 12 }),
+						/* @__PURE__ */ S(x, { size: 12 }),
 						" ",
 						e.pointsAwarded,
 						" pts"
 					]
 				}),
-				/* @__PURE__ */ w("span", {
+				/* @__PURE__ */ S("span", {
 					className: "ml-auto text-xs text-text-muted",
 					children: o(e.createdAt)
 				})
 			]
-		}), e.totalCount > 0 ? /* @__PURE__ */ T("p", {
+		}), e.totalCount > 0 ? /* @__PURE__ */ C("p", {
 			className: "mt-1 px-0.5 text-xs text-text-muted",
 			children: [
 				"Passed ",
@@ -84,297 +87,286 @@ function De({ s: e, focused: t, onToggle: n }) {
 		}) : null]
 	});
 }
-function A() {
-	let [r] = ge(), o = r.get("id") ?? "", [p, A] = fe(de.submission), { currentUser: Oe, workspaceId: j } = e(), ke = t(), M = Oe?.id, { emit: N } = n(), { data: Ae, loading: je, error: P, refetch: F } = oe(o);
-	m(() => {
-		o && N("technospam.problem.viewed", {
-			workspaceId: j,
-			entityId: o,
+function k() {
+	let [o] = De(), d = o.get("id") ?? "", [f, k] = _e(me.submission), { currentUser: ze, workspaceId: A } = e(), Be = t(), Ve = ze?.id, { emit: j } = n(), { data: He, loading: Ue, error: M, refetch: N } = ce(d);
+	p(() => {
+		d && j("technospam.problem.viewed", {
+			workspaceId: A,
+			entityId: d,
 			entityType: "TEC_PROBLEM"
 		});
 	}, [
-		o,
-		j,
-		N
+		d,
+		A,
+		j
 	]);
-	let { data: I, loading: Me, error: L, refetch: R } = ce({
-		...M ? { learnerId: M } : {},
-		problemId: o
-	}), [Ne, { loading: z }] = le(), [Pe, { loading: B }] = se(), V = Ae?.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]), Fe = async () => {
-		if (!o) return;
-		if (!U) {
-			f.error("Pick a language", "Choose a language before submitting.");
+	let { data: P, loading: We, error: F, refetch: I } = ue({
+		...Ve ? { learnerId: Ve } : {},
+		problemId: d
+	}), [Ge, { loading: L }] = de(), [Ke, { loading: R }] = le(), z = He?.tecProblem ?? null, B = ye(() => z?.languages?.length ? z.languages : O, [z]), [V, H] = m(""), [U, W] = m(""), [G, K] = m(!1), [qe, Je] = m(""), [q, Ye] = m("description"), J = he(), Xe = be(null), Ze = J.reset;
+	p(() => {
+		z && Xe.current !== z.id && (H(z.languages[0] ?? O[0]), W(z.starterCode ?? ""), Je(z.publicTestCases?.[0]?.input ?? ""), K(!1), Ze(), Xe.current = z.id);
+	}, [z, Ze]);
+	let Qe = (e) => {
+		H(e), J.reset();
+	}, Y = ye(() => [...P?.tecListSubmissions?.items ?? []].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()), [P]), $e = () => {
+		if (!(!d || J.running || J.warming || z?.isLocked)) {
+			if (!V) {
+				u.error("Pick a language", "Choose a language before running your code.");
+				return;
+			}
+			if (!U.trim()) {
+				u.error("Add your solution", "Write some code before running it.");
+				return;
+			}
+			j("technospam.problem.run_clicked", {
+				workspaceId: A,
+				entityId: d,
+				entityType: "TEC_PROBLEM",
+				language: V,
+				customInput: G
+			}), J.execute({
+				problemId: d,
+				language: V,
+				code: U,
+				stdin: G ? qe : null
+			});
+		}
+	}, et = () => {
+		W(z?.starterCode ?? ""), J.reset();
+	}, tt = async () => {
+		if (!d || L || z?.isLocked) return;
+		if (!V) {
+			u.error("Pick a language", "Choose a language before submitting.");
 			return;
 		}
-		if (!G.trim()) {
-			f.error("Add your solution", "Write some code before submitting.");
+		if (!U.trim()) {
+			u.error("Add your solution", "Write some code before submitting.");
 			return;
 		}
-		N("technospam.problem.submit_clicked", {
-			workspaceId: j,
-			entityId: o,
+		j("technospam.problem.submit_clicked", {
+			workspaceId: A,
+			entityId: d,
 			entityType: "TEC_PROBLEM",
-			language: U
+			language: V
 		});
-		let e = await Ne({ variables: { input: {
-			problemId: o,
-			language: U,
-			code: G
+		let e = await Ge({ variables: { input: {
+			problemId: d,
+			language: V,
+			code: U
 		} } });
 		if (e.data?.tecSubmitSolution) {
-			N("technospam.problem.submitted", {
-				workspaceId: j,
-				entityId: o,
+			j("technospam.problem.submitted", {
+				workspaceId: A,
+				entityId: d,
 				entityType: "TEC_PROBLEM",
 				submissionId: e.data.tecSubmitSolution.id
 			});
 			let t = e.data.tecSubmitSolution;
-			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(s(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), await Promise.all([F(), R()]);
+			t.verdict === "PENDING" ? u.info("Solution submitted", "Grading has started — your verdict will appear here in a moment.") : t.verdict === "ACCEPTED" ? u.success("Accepted", `Passed all ${t.totalCount} test cases.`) : u.error(s(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), await Promise.all([N(), I()]);
 		}
-	}, Ie = async (e) => {
-		let t = (await Pe({ 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: ${s(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, Le] = _(null), Re = Z !== null && Q !== Z;
-	m(() => {
+	}, nt = async (e) => {
+		let t = (await Ke({ variables: { id: e } })).data?.tecRegradeSubmission;
+		t && (t.verdict === "PENDING" ? u.error("Still pending", "The grader is not available yet. Please try again shortly.") : u.success("Grading complete", `Verdict: ${s(t.verdict)}.`), await Promise.all([N(), I()]));
+	}, X = Y.find((e) => (e.testResults?.length ?? 0) > 0) ?? null, rt = Y[0] ?? null, Z = rt?.verdict === "PENDING" ? rt.id : null, [Q, it] = m(null), at = Z !== null && Q !== Z;
+	p(() => {
 		if (!Z || Q === Z) return;
 		let e = Date.now(), t = window.setInterval(() => {
-			if (Date.now() - e > Ee) {
-				window.clearInterval(t), Le(Z);
+			if (Date.now() - e > Le) {
+				window.clearInterval(t), it(Z);
 				return;
 			}
-			R();
-		}, Te);
+			I();
+		}, Ie);
 		return () => window.clearInterval(t);
 	}, [
 		Z,
 		Q,
-		R
+		I
 	]);
-	let $ = g(null);
-	return m(() => {
+	let $ = be(null);
+	return p(() => {
 		if (Z) {
 			$.current = Z;
 			return;
 		}
 		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(s(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), F());
+		let t = Y.find((t) => t.id === e);
+		!t || t.verdict === "PENDING" || ($.current = null, t.verdict === "ACCEPTED" ? u.success("Accepted", `Passed all ${t.totalCount} test cases.`) : u.error(s(t.verdict), `Passed ${t.passedCount} of ${t.totalCount} test cases.`), N());
 	}, [
 		Z,
-		J,
-		F
-	]), je && !V ? /* @__PURE__ */ T(i, {
+		Y,
+		N
+	]), Ue && !z ? /* @__PURE__ */ C(i, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		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(i, {
+		children: [/* @__PURE__ */ S(E, { className: "mb-4 h-28 w-full rounded-xl" }), /* @__PURE__ */ S(E, { className: "h-72 w-full rounded-xl" })]
+	}) : M || !z ? /* @__PURE__ */ S(i, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		children: P ? /* @__PURE__ */ w(u, {
+		children: M ? /* @__PURE__ */ S(ne, {
 			title: "Couldn't load problem",
-			error: P
-		}) : /* @__PURE__ */ w(te, {
+			error: M
+		}) : /* @__PURE__ */ S(te, {
 			title: "Problem not found",
 			description: "This problem may have been unpublished."
 		})
-	}) : /* @__PURE__ */ T(i, {
+	}) : /* @__PURE__ */ C(i, {
 		hero: !0,
 		backPath: "/applications/problems-page",
-		title: V.title,
-		description: V.topic ?? void 0,
+		title: z.title,
+		description: z.topic ?? void 0,
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ C("div", {
 				className: "mb-5 flex flex-wrap items-center gap-2",
 				children: [
-					/* @__PURE__ */ w(c, {
-						status: V.difficulty,
+					/* @__PURE__ */ S(c, {
+						status: z.difficulty,
 						kind: "level"
 					}),
-					/* @__PURE__ */ w(c, { status: V.status }),
-					V.topic ? /* @__PURE__ */ T(ve, {
+					/* @__PURE__ */ S(c, { status: z.status }),
+					z.topic ? /* @__PURE__ */ C(ke, {
 						variant: "outline",
 						className: "gap-1",
 						children: [
-							/* @__PURE__ */ w(x, { size: 12 }),
+							/* @__PURE__ */ S(v, { size: 12 }),
 							" ",
-							V.topic
+							z.topic
 						]
 					}) : null,
-					V.isPremiumOnly ? /* @__PURE__ */ w(ee, { locked: V.isLocked }) : null,
-					/* @__PURE__ */ w(re, { tags: V.tags })
+					z.isPremiumOnly ? /* @__PURE__ */ S(ee, { locked: z.isLocked }) : null,
+					/* @__PURE__ */ S(ie, { tags: z.tags })
 				]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ C("div", {
 				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ w(a, {
+					/* @__PURE__ */ S(a, {
 						label: "Points",
-						value: V.points,
-						icon: C,
+						value: z.points,
+						icon: x,
 						tone: "amber"
 					}),
-					/* @__PURE__ */ w(a, {
+					/* @__PURE__ */ S(a, {
 						label: "Languages",
-						value: H.length,
-						icon: y,
+						value: B.length,
+						icon: g,
 						tone: "blue"
 					}),
-					/* @__PURE__ */ w(a, {
+					/* @__PURE__ */ S(a, {
 						label: "Difficulty",
-						value: s(V.difficulty),
-						icon: x,
+						value: s(z.difficulty),
+						icon: v,
 						tone: "purple"
 					}),
-					/* @__PURE__ */ w(a, {
+					/* @__PURE__ */ S(a, {
 						label: "My submissions",
-						value: J.length,
-						icon: b,
+						value: Y.length,
+						icon: _,
 						tone: "teal"
 					})
 				]
 			}),
-			/* @__PURE__ */ T("div", {
-				className: "grid grid-cols-1 gap-5 lg:grid-cols-3",
-				children: [/* @__PURE__ */ T("div", {
-					className: "space-y-5 lg:col-span-2",
+			/* @__PURE__ */ S("div", {
+				role: "tablist",
+				"aria-label": "Problem sections",
+				className: "mb-4 grid grid-cols-2 gap-1 rounded-xl border border-border-seam bg-bg-sunken p-1 lg:hidden",
+				children: [{
+					pane: "description",
+					label: "Description",
+					icon: xe
+				}, {
+					pane: "solution",
+					label: "Solution",
+					icon: g
+				}].map(({ pane: e, label: t, icon: n }) => /* @__PURE__ */ C("button", {
+					type: "button",
+					role: "tab",
+					id: `problem-tab-${e}`,
+					"aria-selected": q === e,
+					"aria-controls": `problem-pane-${e}`,
+					onClick: () => Ye(e),
+					className: r("inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", q === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"),
 					children: [
-						/* @__PURE__ */ T(D, {
+						/* @__PURE__ */ S(n, { size: 14 }),
+						" ",
+						t
+					]
+				}, e))
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "grid grid-cols-1 gap-5 lg:grid-cols-2",
+				children: [/* @__PURE__ */ C("div", {
+					id: "problem-pane-description",
+					role: "tabpanel",
+					"aria-labelledby": "problem-tab-description",
+					className: r("min-w-0 space-y-5", q !== "description" && "hidden lg:block"),
+					children: [
+						/* @__PURE__ */ C(T, {
 							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
+							children: [/* @__PURE__ */ S("h2", {
 								className: "mb-2 text-base font-semibold text-text-primary",
 								children: "Problem statement"
-							}), V.isLocked ? /* @__PURE__ */ w(l, { 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", {
+							}), z.isLocked ? /* @__PURE__ */ S(l, { description: "This problem's statement is part of a paid TechnoSpam plan. Ask a workspace admin to upgrade to unlock it." }) : z.statement ? /* @__PURE__ */ S("p", {
 								className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
-								children: V.statement
-							}) : /* @__PURE__ */ w("p", {
+								children: z.statement
+							}) : /* @__PURE__ */ S("p", {
 								className: "py-4 text-center text-sm text-text-muted",
 								children: "The statement for this problem is being prepared."
 							})]
 						}),
-						V.isLocked ? /* @__PURE__ */ w(l, {
+						z.isLocked ? /* @__PURE__ */ S(l, {
 							compact: !0,
 							description: "Starter code and sample test cases unlock with a paid TechnoSpam plan."
-						}) : V.starterCode ? /* @__PURE__ */ T(D, {
-							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
-								className: "mb-3 text-base font-semibold text-text-primary",
-								children: "Starter code"
-							}), /* @__PURE__ */ w(ie, {
-								label: s(H[0] ?? "code"),
-								bodyClassName: "max-h-72",
-								children: V.starterCode
-							})]
 						}) : null,
-						/* @__PURE__ */ T(D, {
-							className: "p-5",
-							children: [
-								/* @__PURE__ */ T("div", {
-									className: "mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
-									children: [/* @__PURE__ */ w("h2", {
-										className: "text-base font-semibold text-text-primary",
-										children: "Submit a solution"
-									}), /* @__PURE__ */ T("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ w("span", {
-											className: "text-sm text-text-secondary",
-											children: "Language"
-										}), /* @__PURE__ */ T(ye, {
-											value: U,
-											onValueChange: W,
-											children: [/* @__PURE__ */ w(Se, {
-												className: "w-full sm:w-48",
-												"aria-label": "Language",
-												children: /* @__PURE__ */ w(Ce, { placeholder: "Choose a language" })
-											}), /* @__PURE__ */ w(be, { children: H.map((e) => /* @__PURE__ */ w(xe, {
-												value: e,
-												children: s(e)
-											}, e)) })]
-										})]
-									})]
-								}),
-								/* @__PURE__ */ T("div", {
-									className: "overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm",
-									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__ */ T("div", {
-											className: "flex items-center gap-1.5",
-											children: [
-												/* @__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__ */ T("span", {
-											className: "inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary",
-											children: [
-												/* @__PURE__ */ w(y, { size: 13 }),
-												" ",
-												U ? s(U) : "solution"
-											]
-										})]
-									}), /* @__PURE__ */ w(we, {
-										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__ */ T(E, {
-									className: "mt-4 w-full",
-									onClick: Fe,
-									disabled: z || !G.trim(),
-									children: [
-										/* @__PURE__ */ w(me, { size: 16 }),
-										" ",
-										z ? "Running test cases…" : "Run & submit"
-									]
-								}),
-								/* @__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."
-								})
-							]
-						}),
-						V.publicTestCases?.length ? /* @__PURE__ */ T(D, {
+						z.publicTestCases?.length ? /* @__PURE__ */ C(T, {
 							className: "p-5",
 							children: [
-								/* @__PURE__ */ T("h2", {
+								/* @__PURE__ */ C("h2", {
 									className: "mb-1 flex items-center gap-2 text-base font-semibold text-text-primary",
-									children: [/* @__PURE__ */ w(pe, { size: 16 }), " Sample test cases"]
+									children: [/* @__PURE__ */ S(Se, { size: 16 }), " Sample test cases"]
 								}),
-								/* @__PURE__ */ w("p", {
+								/* @__PURE__ */ C("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."
+									children: [
+										"Your solution reads each input from stdin and must print the expected output.",
+										/* @__PURE__ */ S("strong", {
+											className: "font-medium text-text-primary",
+											children: " Run"
+										}),
+										" checks these samples; ",
+										/* @__PURE__ */ S("strong", {
+											className: "font-medium text-text-primary",
+											children: "Submit"
+										}),
+										" also runs the hidden test cases."
+									]
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ S("div", {
 									className: "space-y-3",
-									children: V.publicTestCases.map((e) => /* @__PURE__ */ T("div", {
+									children: z.publicTestCases.map((e) => /* @__PURE__ */ C("div", {
 										className: "rounded-xl border border-border-seam p-3",
-										children: [/* @__PURE__ */ T("div", {
+										children: [/* @__PURE__ */ C("div", {
 											className: "mb-2 flex flex-wrap items-center gap-x-3 gap-y-1",
-											children: [/* @__PURE__ */ w("span", {
+											children: [/* @__PURE__ */ S("span", {
 												className: "text-sm font-medium text-text-primary",
 												children: e.name
-											}), /* @__PURE__ */ T("span", {
+											}), /* @__PURE__ */ C("span", {
 												className: "inline-flex items-center gap-1 text-xs text-text-muted",
 												children: [
-													/* @__PURE__ */ w(v, { size: 12 }),
+													/* @__PURE__ */ S(h, { size: 12 }),
 													" ",
 													e.timeLimitMs,
 													" ms limit"
 												]
 											})]
-										}), /* @__PURE__ */ T("div", {
+										}), /* @__PURE__ */ C("div", {
 											className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
-											children: [/* @__PURE__ */ w(d, {
+											children: [/* @__PURE__ */ S(oe, {
 												label: "Input",
 												value: e.input
-											}), /* @__PURE__ */ w(d, {
+											}), /* @__PURE__ */ S(oe, {
 												label: "Expected output",
 												value: e.expectedOutput
 											})]
@@ -383,83 +375,244 @@ function A() {
 								})
 							]
 						}) : null,
-						Z ? /* @__PURE__ */ T(D, {
+						!z.isLocked && z.starterCode ? /* @__PURE__ */ C(T, {
+							className: "p-5",
+							children: [/* @__PURE__ */ S("h2", {
+								className: "mb-3 text-base font-semibold text-text-primary",
+								children: "Starter code"
+							}), /* @__PURE__ */ S(ae, {
+								label: s(B[0] ?? "code"),
+								bodyClassName: "max-h-72",
+								children: z.starterCode
+							})]
+						}) : null
+					]
+				}), /* @__PURE__ */ C("div", {
+					id: "problem-pane-solution",
+					role: "tabpanel",
+					"aria-labelledby": "problem-tab-solution",
+					className: r("min-w-0 space-y-5", q !== "solution" && "hidden lg:block"),
+					children: [
+						/* @__PURE__ */ C(T, {
+							className: "p-5",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+									children: [/* @__PURE__ */ C("h2", {
+										className: "inline-flex items-center gap-2 text-base font-semibold text-text-primary",
+										children: [/* @__PURE__ */ S(g, { size: 16 }), " Solve"]
+									}), /* @__PURE__ */ C("div", {
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ S("span", {
+												className: "text-sm text-text-secondary",
+												children: "Language"
+											}),
+											/* @__PURE__ */ C(Ae, {
+												value: V,
+												onValueChange: Qe,
+												children: [/* @__PURE__ */ S(Ne, {
+													className: "w-full sm:w-44",
+													"aria-label": "Language",
+													children: /* @__PURE__ */ S(Pe, { placeholder: "Choose a language" })
+												}), /* @__PURE__ */ S(je, { children: B.map((e) => /* @__PURE__ */ S(Me, {
+													value: e,
+													children: s(e)
+												}, e)) })]
+											}),
+											/* @__PURE__ */ S(w, {
+												variant: "ghost",
+												size: "icon",
+												onClick: et,
+												"aria-label": "Reset to starter code",
+												title: "Reset to starter code",
+												children: /* @__PURE__ */ S(we, { size: 16 })
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ C("div", {
+									className: "overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm focus-within:ring-2 focus-within:ring-border-focus",
+									children: [/* @__PURE__ */ C("div", {
+										className: "flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2",
+										children: [/* @__PURE__ */ C("div", {
+											className: "flex items-center gap-1.5",
+											"aria-hidden": "true",
+											children: [
+												/* @__PURE__ */ S("span", { className: "h-2.5 w-2.5 rounded-full bg-status-error-border" }),
+												/* @__PURE__ */ S("span", { className: "h-2.5 w-2.5 rounded-full bg-status-warning-border" }),
+												/* @__PURE__ */ S("span", { className: "h-2.5 w-2.5 rounded-full bg-status-success-border" })
+											]
+										}), /* @__PURE__ */ C("span", {
+											className: "inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary",
+											children: [
+												/* @__PURE__ */ S(g, { size: 13 }),
+												" ",
+												V ? s(V) : "solution"
+											]
+										})]
+									}), /* @__PURE__ */ S(pe, {
+										fallback: /* @__PURE__ */ S(D, {
+											value: U,
+											onChange: (e) => W(e.target.value),
+											"aria-label": `Solution code${V ? ` (${s(V)})` : ""}`,
+											placeholder: "Write your solution…",
+											spellCheck: !1,
+											className: "h-[360px] resize-none rounded-none border-0 font-mono text-xs lg:h-[440px]"
+										}),
+										children: /* @__PURE__ */ S(ve, {
+											fallback: /* @__PURE__ */ S(E, { className: "h-[360px] w-full rounded-none lg:h-[440px]" }),
+											children: /* @__PURE__ */ S(Fe, {
+												value: U,
+												onChange: W,
+												language: V,
+												ariaLabel: `Solution code${V ? ` (${s(V)})` : ""}`,
+												placeholder: "Write your solution…",
+												onRun: $e,
+												onSubmit: () => void tt(),
+												className: "h-[360px] text-xs lg:h-[440px]"
+											})
+										})
+									})]
+								}),
+								/* @__PURE__ */ C("div", {
+									className: "mt-3",
+									children: [/* @__PURE__ */ C("label", {
+										className: "inline-flex cursor-pointer items-center gap-2 text-sm text-text-secondary",
+										children: [
+											/* @__PURE__ */ S("input", {
+												type: "checkbox",
+												checked: G,
+												onChange: (e) => K(e.target.checked),
+												className: "h-4 w-4 rounded border-border-strong accent-current"
+											}),
+											/* @__PURE__ */ S(b, { size: 14 }),
+											" Run with custom input"
+										]
+									}), G ? /* @__PURE__ */ S(D, {
+										value: qe,
+										onChange: (e) => Je(e.target.value),
+										"aria-label": "Custom input (stdin)",
+										placeholder: "Input passed to your program on stdin",
+										className: "mt-2 min-h-[88px] font-mono text-xs",
+										spellCheck: !1
+									}) : null]
+								}),
+								/* @__PURE__ */ C("div", {
+									className: "mt-4 grid grid-cols-2 gap-2",
+									children: [/* @__PURE__ */ C(w, {
+										variant: "outline",
+										onClick: $e,
+										disabled: J.running || J.warming || !U.trim() || !!z.isLocked,
+										children: [
+											/* @__PURE__ */ S(Ce, { size: 16 }),
+											" ",
+											J.warming ? "Starting…" : J.running ? "Running…" : "Run"
+										]
+									}), /* @__PURE__ */ C(w, {
+										onClick: () => void tt(),
+										disabled: L || !U.trim() || !!z.isLocked,
+										children: [
+											/* @__PURE__ */ S(Te, { size: 16 }),
+											" ",
+											L ? "Submitting…" : "Submit"
+										]
+									})]
+								}),
+								/* @__PURE__ */ S("p", {
+									className: "mt-2 text-center text-xs text-text-muted",
+									children: "Code runs in an isolated sandbox. Ctrl/⌘+Enter runs, Ctrl/⌘+Shift+Enter submits; press Esc then Tab to leave the editor."
+								})
+							]
+						}),
+						/* @__PURE__ */ C(T, {
+							className: "p-5",
+							"aria-live": "polite",
+							children: [/* @__PURE__ */ C("h2", {
+								className: "mb-3 flex items-center gap-2 text-base font-semibold text-text-primary",
+								children: [/* @__PURE__ */ S(b, { size: 16 }), " Run output"]
+							}), /* @__PURE__ */ S(ge, {
+								run: J.run,
+								running: J.running,
+								warming: J.warming,
+								error: J.error
+							})]
+						}),
+						Z ? /* @__PURE__ */ C(T, {
 							className: "p-5",
 							children: [
-								/* @__PURE__ */ w("h2", {
+								/* @__PURE__ */ S("h2", {
 									className: "mb-2 text-base font-semibold text-text-primary",
-									children: "Latest run"
+									children: "Latest submission"
 								}),
-								Re ? /* @__PURE__ */ T("p", {
+								at ? /* @__PURE__ */ C("p", {
 									className: "mb-3 inline-flex items-center gap-2 text-sm text-text-secondary",
-									children: [/* @__PURE__ */ w(S, {
+									children: [/* @__PURE__ */ S(y, {
 										size: 14,
 										className: "animate-spin"
 									}), "Grading your submission — the grader is starting up. Your verdict will appear here automatically."]
-								}) : /* @__PURE__ */ w("p", {
+								}) : /* @__PURE__ */ S("p", {
 									className: "mb-3 text-sm text-text-secondary",
 									children: "Your most recent submission has not been graded yet — the grader was unavailable. You can re-run it without resubmitting your code."
 								}),
-								/* @__PURE__ */ T(E, {
+								/* @__PURE__ */ C(w, {
 									variant: "outline",
-									onClick: () => void Ie(Z),
-									disabled: B,
+									onClick: () => void nt(Z),
+									disabled: R,
 									children: [
-										/* @__PURE__ */ w(S, { size: 16 }),
+										/* @__PURE__ */ S(y, { size: 16 }),
 										" ",
-										B ? "Re-running…" : "Re-run grader"
+										R ? "Re-running…" : "Re-run grader"
 									]
 								})
 							]
-						}) : Y ? /* @__PURE__ */ T(_e, { children: [/* @__PURE__ */ T(D, {
+						}) : X ? /* @__PURE__ */ C(Oe, { children: [/* @__PURE__ */ C(T, {
 							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
+							children: [/* @__PURE__ */ S("h2", {
 								className: "mb-3 text-base font-semibold text-text-primary",
-								children: "Latest run"
-							}), /* @__PURE__ */ w(ae, { submission: Y })]
-						}), /* @__PURE__ */ T(D, {
+								children: "Latest submission"
+							}), /* @__PURE__ */ S(se, { submission: X })]
+						}), /* @__PURE__ */ C(T, {
 							className: "p-5",
-							children: [/* @__PURE__ */ T("h2", {
+							children: [/* @__PURE__ */ C("h2", {
 								className: "mb-3 flex items-center gap-2 text-base font-semibold text-text-primary",
-								children: [/* @__PURE__ */ w(he, { size: 16 }), " TechnoSage review"]
-							}), /* @__PURE__ */ w(ue, {
-								submission: Y,
-								onOpenProblem: (e) => ke(`/applications/problem-details-page?id=${e}`)
+								children: [/* @__PURE__ */ S(Ee, { size: 16 }), " TechnoSage review"]
+							}), /* @__PURE__ */ S(fe, {
+								submission: X,
+								onOpenProblem: (e) => Be(`/applications/problem-details-page?id=${e}`)
 							})]
-						})] }) : null
+						})] }) : null,
+						/* @__PURE__ */ C(T, {
+							className: "p-5",
+							children: [/* @__PURE__ */ S("h2", {
+								className: "mb-3 text-base font-semibold text-text-primary",
+								children: "My submissions"
+							}), We && !Y.length ? /* @__PURE__ */ S(re, {
+								count: 3,
+								height: "h-12"
+							}) : F ? /* @__PURE__ */ S(ne, {
+								title: "Couldn't load submissions",
+								error: F
+							}) : Y.length === 0 ? /* @__PURE__ */ S(te, {
+								icon: /* @__PURE__ */ S(_, { size: 24 }),
+								title: "No submissions yet",
+								description: "Submit a solution to see your verdicts and points here."
+							}) : /* @__PURE__ */ S("div", {
+								className: "space-y-1",
+								children: Y.map((e) => /* @__PURE__ */ S(Re, {
+									s: e,
+									focused: f === e.id,
+									onToggle: () => k(f === e.id ? null : e.id)
+								}, e.id))
+							})]
+						})
 					]
-				}), /* @__PURE__ */ w("div", {
-					className: "lg:col-span-1",
-					children: /* @__PURE__ */ T(D, {
-						className: "p-5",
-						children: [/* @__PURE__ */ w("h2", {
-							className: "mb-3 text-base font-semibold text-text-primary",
-							children: "My submissions"
-						}), Me && !J.length ? /* @__PURE__ */ w(ne, {
-							count: 3,
-							height: "h-12"
-						}) : L ? /* @__PURE__ */ w(u, {
-							title: "Couldn't load submissions",
-							error: L
-						}) : J.length === 0 ? /* @__PURE__ */ w(te, {
-							icon: /* @__PURE__ */ w(b, { size: 24 }),
-							title: "No submissions yet",
-							description: "Submit a solution above to see your verdicts and points here."
-						}) : /* @__PURE__ */ w("div", {
-							className: "space-y-1",
-							children: J.map((e) => /* @__PURE__ */ w(De, {
-								s: e,
-								focused: p === e.id,
-								onToggle: () => A(p === e.id ? null : e.id)
-							}, e.id))
-						})]
-					})
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { A as ApplicationsProblemDetailsPagePage };
+export { k as ApplicationsProblemDetailsPagePage };
 
 //# sourceMappingURL=ApplicationsProblemDetailsPagePage.js.map