@burdenoff/microfe-technospam 2026.1024.1 → 2026.1030.2

package/dist/technospam/pages/ApplicationsProblemDetailsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationsProblemDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/ApplicationsProblemDetailsPagePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  Clock,\n  Code2,\n  FileText,\n  FlaskConical,\n  Layers,\n  RefreshCw,\n  Send,\n  Tag,\n  Trophy,\n} from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Textarea,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  CodePanel,\n  EmptyView,\n  ErrorView,\n  IoBlock,\n  LoadingRows,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  TagStrip,\n  TestResultsPanel,\n  UpgradeGate,\n} from '../components';\nimport { useTechnoSpam } from '../providers/TechnoSpamProvider';\nimport {\n  useProblemQuery,\n  useRegradeSubmission,\n  useSubmissionsQuery,\n  useSubmitSolution,\n  type TecSubmission,\n} from '../api/technospamApi';\nimport { formatDateTime, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\n\nconst FALLBACK_LANGUAGES = ['javascript', 'python', 'typescript'];\n\n/**\n * A submission made while the grading sandbox is cold comes back PENDING and is\n * graded in the background (BOFF-4414). Poll the submissions list until the\n * verdict lands, giving up after a few minutes so a genuinely failed grade\n * falls back to the manual re-run button.\n */\nconst PENDING_POLL_INTERVAL_MS = 3_000;\nconst PENDING_POLL_MAX_MS = 3 * 60_000;\n\nfunction SubmissionRow({ s }: { s: TecSubmission }) {\n  return (\n    <div className=\"rounded-lg border border-transparent px-2 py-3 transition-colors hover:border-border-seam hover:bg-bg-sunken\">\n      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1\">\n        <StatusBadge status={s.verdict} />\n        <span className=\"inline-flex items-center gap-1 text-sm font-medium text-text-primary\">\n          <Code2 size={13} /> {humanizeEnum(s.language)}\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Clock size={12} /> {s.runtimeMs} ms\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Trophy size={12} /> {s.pointsAwarded} pts\n        </span>\n        <span className=\"ml-auto text-xs text-text-muted\">{formatDateTime(s.createdAt)}</span>\n      </div>\n      {s.totalCount > 0 ? (\n        <p className=\"mt-1 px-0.5 text-xs text-text-muted\">\n          Passed {s.passedCount} of {s.totalCount} test cases\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport function ApplicationsProblemDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n  const { emit } = useTechnoSpamAnalytics();\n\n  const { data, loading, error, refetch } = useProblemQuery(id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.problem.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_PROBLEM',\n      });\n    }\n  }, [id, workspaceId, emit]);\n  const {\n    data: subsData,\n    loading: subsLoading,\n    error: subsError,\n    refetch: refetchSubs,\n  } = useSubmissionsQuery({ ...(learnerId ? { learnerId } : {}), problemId: id });\n  const [submit, { loading: submitting }] = useSubmitSolution();\n  const [regrade, { loading: regrading }] = useRegradeSubmission();\n\n  const problem = data?.tecProblem ?? null;\n\n  const languages = useMemo(\n    () => (problem?.languages?.length ? problem.languages : FALLBACK_LANGUAGES),\n    [problem]\n  );\n\n  const [language, setLanguage] = useState('');\n  const [code, setCode] = useState('');\n  const initedRef = useRef(false);\n\n  useEffect(() => {\n    if (problem && !initedRef.current) {\n      setLanguage(problem.languages[0] ?? FALLBACK_LANGUAGES[0]!);\n      setCode(problem.starterCode ?? '');\n      initedRef.current = true;\n    }\n  }, [problem]);\n\n  const submissions = useMemo(\n    () =>\n      [...(subsData?.tecListSubmissions?.items ?? [])].sort(\n        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()\n      ),\n    [subsData]\n  );\n\n  const handleSubmit = async () => {\n    if (!id) return;\n    if (!language) {\n      notify.error('Pick a language', 'Choose a language before submitting.');\n      return;\n    }\n    if (!code.trim()) {\n      notify.error('Add your solution', 'Write some code before submitting.');\n      return;\n    }\n    emit('technospam.problem.submit_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_PROBLEM',\n      language,\n    });\n    const res = await submit({ variables: { input: { problemId: id, language, code } } });\n    if (res.data?.tecSubmitSolution) {\n      emit('technospam.problem.submitted', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_PROBLEM',\n        submissionId: res.data.tecSubmitSolution.id,\n      });\n      const graded = res.data.tecSubmitSolution;\n      if (graded.verdict === 'PENDING') {\n        notify.info(\n          'Solution submitted',\n          'Grading has started — your verdict will appear here in a moment.'\n        );\n      } else if (graded.verdict === 'ACCEPTED') {\n        notify.success('Accepted', `Passed all ${graded.totalCount} test cases.`);\n      } else {\n        notify.error(\n          humanizeEnum(graded.verdict),\n          `Passed ${graded.passedCount} of ${graded.totalCount} test cases.`\n        );\n      }\n      await Promise.all([refetch(), refetchSubs()]);\n    }\n  };\n\n  const handleRegrade = async (submissionId: string) => {\n    const res = await regrade({ variables: { id: submissionId } });\n    const graded = res.data?.tecRegradeSubmission;\n    if (!graded) return;\n    if (graded.verdict === 'PENDING') {\n      notify.error('Still pending', 'The grader is not available yet. Please try again shortly.');\n    } else {\n      notify.success('Grading complete', `Verdict: ${humanizeEnum(graded.verdict)}.`);\n    }\n    await Promise.all([refetch(), refetchSubs()]);\n  };\n\n  /** Most recent submission that actually carries grading detail. */\n  const latestGraded = submissions.find((s) => (s.testResults?.length ?? 0) > 0) ?? null;\n  const latestSubmission = submissions[0] ?? null;\n  const pendingId = latestSubmission?.verdict === 'PENDING' ? latestSubmission.id : null;\n\n  // Poll while the newest submission is still being graded in the background.\n  const [pollExpiredFor, setPollExpiredFor] = useState<string | null>(null);\n  const polling = pendingId !== null && pollExpiredFor !== pendingId;\n  useEffect(() => {\n    if (!pendingId || pollExpiredFor === pendingId) return undefined;\n    const startedAt = Date.now();\n    const timer = window.setInterval(() => {\n      if (Date.now() - startedAt > PENDING_POLL_MAX_MS) {\n        window.clearInterval(timer);\n        setPollExpiredFor(pendingId);\n        return;\n      }\n      void refetchSubs();\n    }, PENDING_POLL_INTERVAL_MS);\n    return () => window.clearInterval(timer);\n  }, [pendingId, pollExpiredFor, refetchSubs]);\n\n  // Announce the verdict once a background-graded submission settles.\n  const awaitedIdRef = useRef<string | null>(null);\n  useEffect(() => {\n    if (pendingId) {\n      awaitedIdRef.current = pendingId;\n      return;\n    }\n    const awaitedId = awaitedIdRef.current;\n    if (!awaitedId) return;\n    const settled = submissions.find((s) => s.id === awaitedId);\n    if (!settled || settled.verdict === 'PENDING') return;\n    awaitedIdRef.current = null;\n    if (settled.verdict === 'ACCEPTED') {\n      notify.success('Accepted', `Passed all ${settled.totalCount} test cases.`);\n    } else {\n      notify.error(\n        humanizeEnum(settled.verdict),\n        `Passed ${settled.passedCount} of ${settled.totalCount} test cases.`\n      );\n    }\n    void refetch();\n  }, [pendingId, submissions, refetch]);\n\n  if (loading && !problem) {\n    return (\n      <PageLayout title=\"Problem\" backPath=\"/applications/problems-page\">\n        <Skeleton className=\"mb-4 h-28 w-full rounded-xl\" />\n        <Skeleton className=\"h-72 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !problem) {\n    return (\n      <PageLayout title=\"Problem\" backPath=\"/applications/problems-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load problem\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Problem not found\"\n            description=\"This problem may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      hero\n      backPath=\"/applications/problems-page\"\n      title={problem.title}\n      description={problem.topic ?? undefined}\n    >\n      <div className=\"mb-5 flex flex-wrap items-center gap-2\">\n        <StatusBadge status={problem.difficulty} kind=\"level\" />\n        <StatusBadge status={problem.status} />\n        {problem.topic ? (\n          <Badge variant=\"outline\" className=\"gap-1\">\n            <Layers size={12} /> {problem.topic}\n          </Badge>\n        ) : null}\n        {problem.isPremiumOnly ? <PremiumBadge locked={problem.isLocked} /> : null}\n        <TagStrip tags={problem.tags} />\n      </div>\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Points\" value={problem.points} icon={Trophy} tone=\"amber\" />\n        <StatCard label=\"Languages\" value={languages.length} icon={Code2} tone=\"blue\" />\n        <StatCard\n          label=\"Difficulty\"\n          value={humanizeEnum(problem.difficulty)}\n          icon={Layers}\n          tone=\"purple\"\n        />\n        <StatCard label=\"My submissions\" value={submissions.length} icon={FileText} tone=\"teal\" />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-3\">\n        <div className=\"space-y-5 lg:col-span-2\">\n          <GlassCard className=\"p-5\">\n            <h2 className=\"mb-2 text-base font-semibold text-text-primary\">Problem statement</h2>\n            {problem.isLocked ? (\n              // BOFF-4416: the API already nulled `statement` for a locked\n              // premium problem — this explains why, rather than showing the\n              // generic \"being prepared\" message used for a real content gap.\n              <UpgradeGate description=\"This problem's statement is part of a paid TechnoSpam plan. Ask a workspace admin to upgrade to unlock it.\" />\n            ) : problem.statement ? (\n              <p className=\"whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                {problem.statement}\n              </p>\n            ) : (\n              <p className=\"py-4 text-center text-sm text-text-muted\">\n                The statement for this problem is being prepared.\n              </p>\n            )}\n          </GlassCard>\n\n          {problem.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"Starter code and sample test cases unlock with a paid TechnoSpam plan.\"\n            />\n          ) : problem.starterCode ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Starter code</h2>\n              <CodePanel label={humanizeEnum(languages[0] ?? 'code')} bodyClassName=\"max-h-72\">\n                {problem.starterCode}\n              </CodePanel>\n            </GlassCard>\n          ) : null}\n\n          <GlassCard className=\"p-5\">\n            <div className=\"mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <h2 className=\"text-base font-semibold text-text-primary\">Submit a solution</h2>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-sm text-text-secondary\">Language</span>\n                <Select value={language} onValueChange={setLanguage}>\n                  <SelectTrigger className=\"w-full sm:w-48\">\n                    <SelectValue placeholder=\"Choose a language\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {languages.map((l) => (\n                      <SelectItem key={l} value={l}>\n                        {humanizeEnum(l)}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <div className=\"overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm\">\n              <div className=\"flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-error-border\" />\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-warning-border\" />\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-success-border\" />\n                </div>\n                <span className=\"inline-flex items-center gap-1.5 font-mono text-xs text-text-muted\">\n                  <Code2 size={13} /> {language ? humanizeEnum(language) : 'solution'}\n                </span>\n              </div>\n              <Textarea\n                value={code}\n                onChange={(e) => setCode(e.target.value)}\n                placeholder=\"Write your solution…\"\n                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\"\n                spellCheck={false}\n              />\n            </div>\n\n            <Button\n              className=\"mt-4 w-full\"\n              onClick={handleSubmit}\n              disabled={submitting || !code.trim()}\n            >\n              <Send size={16} /> {submitting ? 'Running test cases…' : 'Run & submit'}\n            </Button>\n            <p className=\"mt-2 text-center text-xs text-text-muted\">\n              Your code runs against this problem&apos;s test cases in an isolated sandbox.\n            </p>\n          </GlassCard>\n\n          {problem.publicTestCases?.length ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-1 flex items-center gap-2 text-base font-semibold text-text-primary\">\n                <FlaskConical size={16} /> Sample test cases\n              </h2>\n              <p className=\"mb-3 text-sm text-text-secondary\">\n                Your solution reads each input from stdin and must print the expected output. Hidden\n                test cases are also run when you submit.\n              </p>\n              <div className=\"space-y-3\">\n                {problem.publicTestCases.map((testCase) => (\n                  <div key={testCase.id} className=\"rounded-xl border border-border-seam p-3\">\n                    <div className=\"mb-2 flex flex-wrap items-center gap-x-3 gap-y-1\">\n                      <span className=\"text-sm font-medium text-text-primary\">{testCase.name}</span>\n                      <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n                        <Clock size={12} /> {testCase.timeLimitMs} ms limit\n                      </span>\n                    </div>\n                    <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n                      <IoBlock label=\"Input\" value={testCase.input} />\n                      <IoBlock label=\"Expected output\" value={testCase.expectedOutput} />\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </GlassCard>\n          ) : null}\n\n          {pendingId ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-2 text-base font-semibold text-text-primary\">Latest run</h2>\n              {polling ? (\n                <p className=\"mb-3 inline-flex items-center gap-2 text-sm text-text-secondary\">\n                  <RefreshCw size={14} className=\"animate-spin\" />\n                  Grading your submission — the grader is starting up. Your verdict will appear here\n                  automatically.\n                </p>\n              ) : (\n                <p className=\"mb-3 text-sm text-text-secondary\">\n                  Your most recent submission has not been graded yet — the grader was unavailable.\n                  You can re-run it without resubmitting your code.\n                </p>\n              )}\n              <Button\n                variant=\"outline\"\n                onClick={() => void handleRegrade(pendingId)}\n                disabled={regrading}\n              >\n                <RefreshCw size={16} /> {regrading ? 'Re-running…' : 'Re-run grader'}\n              </Button>\n            </GlassCard>\n          ) : latestGraded ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Latest run</h2>\n              <TestResultsPanel submission={latestGraded} />\n            </GlassCard>\n          ) : null}\n        </div>\n\n        <div className=\"lg:col-span-1\">\n          <GlassCard className=\"p-5\">\n            <h2 className=\"mb-3 text-base font-semibold text-text-primary\">My submissions</h2>\n            {subsLoading && !submissions.length ? (\n              <LoadingRows count={3} height=\"h-12\" />\n            ) : subsError ? (\n              <ErrorView title=\"Couldn't load submissions\" error={subsError} />\n            ) : submissions.length === 0 ? (\n              <EmptyView\n                icon={<FileText size={24} />}\n                title=\"No submissions yet\"\n                description=\"Submit a solution above to see your verdicts and points here.\"\n              />\n            ) : (\n              <div className=\"space-y-1\">\n                {submissions.map((s) => (\n                  <SubmissionRow key={s.id} s={s} />\n                ))}\n              </div>\n            )}\n          </GlassCard>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ApplicationsProblemDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/ApplicationsProblemDetailsPagePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  Clock,\n  Code2,\n  FileText,\n  FlaskConical,\n  Layers,\n  RefreshCw,\n  Send,\n  Sparkles,\n  Tag,\n  Trophy,\n} from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Textarea,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  CodePanel,\n  EmptyView,\n  ErrorView,\n  IoBlock,\n  LoadingRows,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  SubmissionReviewPanel,\n  TagStrip,\n  TestResultsPanel,\n  UpgradeGate,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useProblemQuery,\n  useRegradeSubmission,\n  useSubmissionsQuery,\n  useSubmitSolution,\n  type TecSubmission,\n} from '../api/technospamApi';\nimport { formatDateTime, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport {\n  FOCUSED_CARD_CLASS,\n  focusableCardProps,\n  useFocusedRecordParam,\n} from '../hooks/useFocusedRecordParam';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { cn } from '../utils/cn';\n\nconst FALLBACK_LANGUAGES = ['javascript', 'python', 'typescript'];\n\n/**\n * A submission made while the grading sandbox is cold comes back PENDING and is\n * graded in the background (BOFF-4414). Poll the submissions list until the\n * verdict lands, giving up after a few minutes so a genuinely failed grade\n * falls back to the manual re-run button.\n */\nconst PENDING_POLL_INTERVAL_MS = 3_000;\nconst PENDING_POLL_MAX_MS = 3 * 60_000;\n\nfunction SubmissionRow({\n  s,\n  focused,\n  onToggle,\n}: {\n  s: TecSubmission;\n  /** The focused submission (`?submissionId=`) is the one the assistant acts on. */\n  focused: boolean;\n  onToggle: () => void;\n}) {\n  return (\n    <div\n      className={cn(\n        'cursor-pointer rounded-lg border border-transparent px-2 py-3 transition-colors hover:border-border-seam hover:bg-bg-sunken',\n        focused && FOCUSED_CARD_CLASS\n      )}\n      {...focusableCardProps(focused, onToggle)}\n    >\n      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1\">\n        <button\n          type=\"button\"\n          aria-pressed={focused}\n          aria-label={`Focus submission from ${formatDateTime(s.createdAt)}`}\n          onClick={onToggle}\n          className=\"rounded-full\"\n        >\n          <StatusBadge status={s.verdict} />\n        </button>\n        <span className=\"inline-flex items-center gap-1 text-sm font-medium text-text-primary\">\n          <Code2 size={13} /> {humanizeEnum(s.language)}\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Clock size={12} /> {s.runtimeMs} ms\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Trophy size={12} /> {s.pointsAwarded} pts\n        </span>\n        <span className=\"ml-auto text-xs text-text-muted\">{formatDateTime(s.createdAt)}</span>\n      </div>\n      {s.totalCount > 0 ? (\n        <p className=\"mt-1 px-0.5 text-xs text-text-muted\">\n          Passed {s.passedCount} of {s.totalCount} test cases\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport function ApplicationsProblemDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  // The focused submission lives in `?submissionId=` so the assistant's page\n  // context names it (\"explain this submission\").\n  const [focusedSubmissionId, setFocusedSubmissionId] = useFocusedRecordParam(\n    FOCUS_PARAMS.submission\n  );\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const navigate = useTechnoSpamNavigate();\n  const learnerId = currentUser?.id;\n  const { emit } = useTechnoSpamAnalytics();\n\n  const { data, loading, error, refetch } = useProblemQuery(id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.problem.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_PROBLEM',\n      });\n    }\n  }, [id, workspaceId, emit]);\n  const {\n    data: subsData,\n    loading: subsLoading,\n    error: subsError,\n    refetch: refetchSubs,\n  } = useSubmissionsQuery({ ...(learnerId ? { learnerId } : {}), problemId: id });\n  const [submit, { loading: submitting }] = useSubmitSolution();\n  const [regrade, { loading: regrading }] = useRegradeSubmission();\n\n  const problem = data?.tecProblem ?? null;\n\n  const languages = useMemo(\n    () => (problem?.languages?.length ? problem.languages : FALLBACK_LANGUAGES),\n    [problem]\n  );\n\n  const [language, setLanguage] = useState('');\n  const [code, setCode] = useState('');\n  const initedRef = useRef(false);\n\n  useEffect(() => {\n    if (problem && !initedRef.current) {\n      setLanguage(problem.languages[0] ?? FALLBACK_LANGUAGES[0]!);\n      setCode(problem.starterCode ?? '');\n      initedRef.current = true;\n    }\n  }, [problem]);\n\n  const submissions = useMemo(\n    () =>\n      [...(subsData?.tecListSubmissions?.items ?? [])].sort(\n        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()\n      ),\n    [subsData]\n  );\n\n  const handleSubmit = async () => {\n    if (!id) return;\n    if (!language) {\n      notify.error('Pick a language', 'Choose a language before submitting.');\n      return;\n    }\n    if (!code.trim()) {\n      notify.error('Add your solution', 'Write some code before submitting.');\n      return;\n    }\n    emit('technospam.problem.submit_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_PROBLEM',\n      language,\n    });\n    const res = await submit({ variables: { input: { problemId: id, language, code } } });\n    if (res.data?.tecSubmitSolution) {\n      emit('technospam.problem.submitted', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_PROBLEM',\n        submissionId: res.data.tecSubmitSolution.id,\n      });\n      const graded = res.data.tecSubmitSolution;\n      if (graded.verdict === 'PENDING') {\n        notify.info(\n          'Solution submitted',\n          'Grading has started — your verdict will appear here in a moment.'\n        );\n      } else if (graded.verdict === 'ACCEPTED') {\n        notify.success('Accepted', `Passed all ${graded.totalCount} test cases.`);\n      } else {\n        notify.error(\n          humanizeEnum(graded.verdict),\n          `Passed ${graded.passedCount} of ${graded.totalCount} test cases.`\n        );\n      }\n      await Promise.all([refetch(), refetchSubs()]);\n    }\n  };\n\n  const handleRegrade = async (submissionId: string) => {\n    const res = await regrade({ variables: { id: submissionId } });\n    const graded = res.data?.tecRegradeSubmission;\n    if (!graded) return;\n    if (graded.verdict === 'PENDING') {\n      notify.error('Still pending', 'The grader is not available yet. Please try again shortly.');\n    } else {\n      notify.success('Grading complete', `Verdict: ${humanizeEnum(graded.verdict)}.`);\n    }\n    await Promise.all([refetch(), refetchSubs()]);\n  };\n\n  /** Most recent submission that actually carries grading detail. */\n  const latestGraded = submissions.find((s) => (s.testResults?.length ?? 0) > 0) ?? null;\n  const latestSubmission = submissions[0] ?? null;\n  const pendingId = latestSubmission?.verdict === 'PENDING' ? latestSubmission.id : null;\n\n  // Poll while the newest submission is still being graded in the background.\n  const [pollExpiredFor, setPollExpiredFor] = useState<string | null>(null);\n  const polling = pendingId !== null && pollExpiredFor !== pendingId;\n  useEffect(() => {\n    if (!pendingId || pollExpiredFor === pendingId) return undefined;\n    const startedAt = Date.now();\n    const timer = window.setInterval(() => {\n      if (Date.now() - startedAt > PENDING_POLL_MAX_MS) {\n        window.clearInterval(timer);\n        setPollExpiredFor(pendingId);\n        return;\n      }\n      void refetchSubs();\n    }, PENDING_POLL_INTERVAL_MS);\n    return () => window.clearInterval(timer);\n  }, [pendingId, pollExpiredFor, refetchSubs]);\n\n  // Announce the verdict once a background-graded submission settles.\n  const awaitedIdRef = useRef<string | null>(null);\n  useEffect(() => {\n    if (pendingId) {\n      awaitedIdRef.current = pendingId;\n      return;\n    }\n    const awaitedId = awaitedIdRef.current;\n    if (!awaitedId) return;\n    const settled = submissions.find((s) => s.id === awaitedId);\n    if (!settled || settled.verdict === 'PENDING') return;\n    awaitedIdRef.current = null;\n    if (settled.verdict === 'ACCEPTED') {\n      notify.success('Accepted', `Passed all ${settled.totalCount} test cases.`);\n    } else {\n      notify.error(\n        humanizeEnum(settled.verdict),\n        `Passed ${settled.passedCount} of ${settled.totalCount} test cases.`\n      );\n    }\n    void refetch();\n  }, [pendingId, submissions, refetch]);\n\n  if (loading && !problem) {\n    return (\n      <PageLayout title=\"Problem\" backPath=\"/applications/problems-page\">\n        <Skeleton className=\"mb-4 h-28 w-full rounded-xl\" />\n        <Skeleton className=\"h-72 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !problem) {\n    return (\n      <PageLayout title=\"Problem\" backPath=\"/applications/problems-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load problem\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Problem not found\"\n            description=\"This problem may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      hero\n      backPath=\"/applications/problems-page\"\n      title={problem.title}\n      description={problem.topic ?? undefined}\n    >\n      <div className=\"mb-5 flex flex-wrap items-center gap-2\">\n        <StatusBadge status={problem.difficulty} kind=\"level\" />\n        <StatusBadge status={problem.status} />\n        {problem.topic ? (\n          <Badge variant=\"outline\" className=\"gap-1\">\n            <Layers size={12} /> {problem.topic}\n          </Badge>\n        ) : null}\n        {problem.isPremiumOnly ? <PremiumBadge locked={problem.isLocked} /> : null}\n        <TagStrip tags={problem.tags} />\n      </div>\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Points\" value={problem.points} icon={Trophy} tone=\"amber\" />\n        <StatCard label=\"Languages\" value={languages.length} icon={Code2} tone=\"blue\" />\n        <StatCard\n          label=\"Difficulty\"\n          value={humanizeEnum(problem.difficulty)}\n          icon={Layers}\n          tone=\"purple\"\n        />\n        <StatCard label=\"My submissions\" value={submissions.length} icon={FileText} tone=\"teal\" />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-3\">\n        <div className=\"space-y-5 lg:col-span-2\">\n          <GlassCard className=\"p-5\">\n            <h2 className=\"mb-2 text-base font-semibold text-text-primary\">Problem statement</h2>\n            {problem.isLocked ? (\n              // BOFF-4416: the API already nulled `statement` for a locked\n              // premium problem — this explains why, rather than showing the\n              // generic \"being prepared\" message used for a real content gap.\n              <UpgradeGate description=\"This problem's statement is part of a paid TechnoSpam plan. Ask a workspace admin to upgrade to unlock it.\" />\n            ) : problem.statement ? (\n              <p className=\"whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                {problem.statement}\n              </p>\n            ) : (\n              <p className=\"py-4 text-center text-sm text-text-muted\">\n                The statement for this problem is being prepared.\n              </p>\n            )}\n          </GlassCard>\n\n          {problem.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"Starter code and sample test cases unlock with a paid TechnoSpam plan.\"\n            />\n          ) : problem.starterCode ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Starter code</h2>\n              <CodePanel label={humanizeEnum(languages[0] ?? 'code')} bodyClassName=\"max-h-72\">\n                {problem.starterCode}\n              </CodePanel>\n            </GlassCard>\n          ) : null}\n\n          <GlassCard className=\"p-5\">\n            <div className=\"mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <h2 className=\"text-base font-semibold text-text-primary\">Submit a solution</h2>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-sm text-text-secondary\">Language</span>\n                <Select value={language} onValueChange={setLanguage}>\n                  <SelectTrigger className=\"w-full sm:w-48\">\n                    <SelectValue placeholder=\"Choose a language\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {languages.map((l) => (\n                      <SelectItem key={l} value={l}>\n                        {humanizeEnum(l)}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <div className=\"overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm\">\n              <div className=\"flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-error-border\" />\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-warning-border\" />\n                  <span className=\"h-2.5 w-2.5 rounded-full bg-status-success-border\" />\n                </div>\n                <span className=\"inline-flex items-center gap-1.5 font-mono text-xs text-text-muted\">\n                  <Code2 size={13} /> {language ? humanizeEnum(language) : 'solution'}\n                </span>\n              </div>\n              <Textarea\n                value={code}\n                onChange={(e) => setCode(e.target.value)}\n                placeholder=\"Write your solution…\"\n                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\"\n                spellCheck={false}\n              />\n            </div>\n\n            <Button\n              className=\"mt-4 w-full\"\n              onClick={handleSubmit}\n              disabled={submitting || !code.trim()}\n            >\n              <Send size={16} /> {submitting ? 'Running test cases…' : 'Run & submit'}\n            </Button>\n            <p className=\"mt-2 text-center text-xs text-text-muted\">\n              Your code runs against this problem&apos;s test cases in an isolated sandbox.\n            </p>\n          </GlassCard>\n\n          {problem.publicTestCases?.length ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-1 flex items-center gap-2 text-base font-semibold text-text-primary\">\n                <FlaskConical size={16} /> Sample test cases\n              </h2>\n              <p className=\"mb-3 text-sm text-text-secondary\">\n                Your solution reads each input from stdin and must print the expected output. Hidden\n                test cases are also run when you submit.\n              </p>\n              <div className=\"space-y-3\">\n                {problem.publicTestCases.map((testCase) => (\n                  <div key={testCase.id} className=\"rounded-xl border border-border-seam p-3\">\n                    <div className=\"mb-2 flex flex-wrap items-center gap-x-3 gap-y-1\">\n                      <span className=\"text-sm font-medium text-text-primary\">{testCase.name}</span>\n                      <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n                        <Clock size={12} /> {testCase.timeLimitMs} ms limit\n                      </span>\n                    </div>\n                    <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n                      <IoBlock label=\"Input\" value={testCase.input} />\n                      <IoBlock label=\"Expected output\" value={testCase.expectedOutput} />\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </GlassCard>\n          ) : null}\n\n          {pendingId ? (\n            <GlassCard className=\"p-5\">\n              <h2 className=\"mb-2 text-base font-semibold text-text-primary\">Latest run</h2>\n              {polling ? (\n                <p className=\"mb-3 inline-flex items-center gap-2 text-sm text-text-secondary\">\n                  <RefreshCw size={14} className=\"animate-spin\" />\n                  Grading your submission — the grader is starting up. Your verdict will appear here\n                  automatically.\n                </p>\n              ) : (\n                <p className=\"mb-3 text-sm text-text-secondary\">\n                  Your most recent submission has not been graded yet — the grader was unavailable.\n                  You can re-run it without resubmitting your code.\n                </p>\n              )}\n              <Button\n                variant=\"outline\"\n                onClick={() => void handleRegrade(pendingId)}\n                disabled={regrading}\n              >\n                <RefreshCw size={16} /> {regrading ? 'Re-running…' : 'Re-run grader'}\n              </Button>\n            </GlassCard>\n          ) : latestGraded ? (\n            <>\n              <GlassCard className=\"p-5\">\n                <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Latest run</h2>\n                <TestResultsPanel submission={latestGraded} />\n              </GlassCard>\n              <GlassCard className=\"p-5\">\n                <h2 className=\"mb-3 flex items-center gap-2 text-base font-semibold text-text-primary\">\n                  <Sparkles size={16} /> TechnoSage review\n                </h2>\n                <SubmissionReviewPanel\n                  submission={latestGraded}\n                  onOpenProblem={(problemId) =>\n                    navigate(`/applications/problem-details-page?id=${problemId}`)\n                  }\n                />\n              </GlassCard>\n            </>\n          ) : null}\n        </div>\n\n        <div className=\"lg:col-span-1\">\n          <GlassCard className=\"p-5\">\n            <h2 className=\"mb-3 text-base font-semibold text-text-primary\">My submissions</h2>\n            {subsLoading && !submissions.length ? (\n              <LoadingRows count={3} height=\"h-12\" />\n            ) : subsError ? (\n              <ErrorView title=\"Couldn't load submissions\" error={subsError} />\n            ) : submissions.length === 0 ? (\n              <EmptyView\n                icon={<FileText size={24} />}\n                title=\"No submissions yet\"\n                description=\"Submit a solution above to see your verdicts and points here.\"\n              />\n            ) : (\n              <div className=\"space-y-1\">\n                {submissions.map((s) => (\n                  <SubmissionRow\n                    key={s.id}\n                    s={s}\n                    focused={focusedSubmissionId === s.id}\n                    onToggle={() =>\n                      setFocusedSubmissionId(focusedSubmissionId === s.id ? null : s.id)\n                    }\n                  />\n                ))}\n              </div>\n            )}\n          </GlassCard>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/ApplicationsProblemsPagePage.js

@@ -8,8 +8,8 @@ import { StatusBadge as c } from "../components/StatusBadge.js";
 import { LoadMore as l } from "../components/LoadMore.js";
 import { EmptyView as ee, ErrorView as u, LoadingGrid as d } from "../components/StateViews.js";
 import { PremiumBadge as f } from "../components/UpgradeGate.js";
-import "../components/index.js";
 import { pageArg as p, usePageLimit as m, useProblemsQuery as te, useSubmissionsQuery as h } from "../api/technospamApi.js";
+import "../components/index.js";
 import { useMemo as g, useState as _ } from "react";
 import { Building2 as v, CheckCircle2 as y, Code2 as b, Flame as x, Gauge as ne, Layers as S, Search as re, Tag as C, Trophy as w } from "lucide-react";
 import { jsx as T, jsxs as E } from "react/jsx-runtime";

package/dist/technospam/pages/CoursesCourseDetailsPagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCourseDetailsPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"names":[],"mappings":"AAsQA,wBAAgB,4BAA4B,gCAgT3C"}
+{"version":3,"file":"CoursesCourseDetailsPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"names":[],"mappings":"AAoRA,wBAAgB,4BAA4B,gCA0T3C"}

package/dist/technospam/pages/CoursesCourseDetailsPagePage.js

@@ -6,40 +6,42 @@ import { StatCard as i } from "../components/StatCard.js";
 import { MediaCover as a, topicIcon as o } from "../components/MediaCover.js";
 import { formatDate as s, formatDuration as c, humanizeEnum as l } from "../utils/format.js";
 import { EmptyView as u, ErrorView as ee } from "../components/StateViews.js";
-import { TagStrip as d } from "../components/TagStrip.js";
-import { PremiumBadge as f, UpgradeGate as p } from "../components/UpgradeGate.js";
+import { TagStrip as te } from "../components/TagStrip.js";
+import { PremiumBadge as ne, UpgradeGate as d } from "../components/UpgradeGate.js";
+import { notify as f } from "../lib/toast.js";
+import { useCourseQuery as re, useEnroll as ie, useIssueCertificate as p, useMyCertificatesQuery as m, useUpdateProgress as ae } from "../api/technospamApi.js";
 import "../components/index.js";
-import { notify as m } from "../lib/toast.js";
-import { useCourseQuery as h, useEnroll as te, useIssueCertificate as ne, useMyCertificatesQuery as re, useUpdateProgress as ie } from "../api/technospamApi.js";
-import { useEffect as ae, useState as g } from "react";
-import { Award as _, BookOpen as v, CheckCircle2 as y, ChevronDown as b, Clock as x, Eye as S, FileText as C, Layers as w, Lock as T, PlayCircle as E, ShieldCheck as D, Sparkles as O, TrendingUp as k, Trophy as A, Users as oe } from "lucide-react";
-import { useSearchParams as se } from "react-router";
+import { FOCUS_PARAMS as oe } from "../utils/pageContext.js";
+import { useFocusedRecordParam as se } from "../hooks/useFocusedRecordParam.js";
+import { useEffect as h } from "react";
+import { Award as g, BookOpen as _, CheckCircle2 as v, ChevronDown as y, Clock as b, Eye as x, FileText as S, Layers as C, Lock as w, PlayCircle as T, ShieldCheck as E, Sparkles as D, TrendingUp as O, Trophy as k, Users as ce } from "lucide-react";
+import { useSearchParams as A } from "react-router";
 import { jsx as j, jsxs as M } from "react/jsx-runtime";
 import { Button as N, GlassCard as P, Skeleton as F } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCourseDetailsPagePage.tsx
 var I = {
 	VIDEO: {
-		icon: E,
+		icon: T,
 		chip: "bg-accent-primary/15 text-accent-primary",
 		badge: "border-accent-primary/25 bg-accent-primary/10 text-accent-primary"
 	},
 	ARTICLE: {
-		icon: C,
+		icon: S,
 		chip: "bg-accent-indigo/15 text-accent-indigo",
 		badge: "border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo"
 	},
 	INTERACTIVE: {
-		icon: O,
+		icon: D,
 		chip: "bg-accent-teal/15 text-accent-teal",
 		badge: "border-accent-teal/25 bg-accent-teal/10 text-accent-teal"
 	},
 	QUIZ: {
-		icon: y,
+		icon: v,
 		chip: "bg-accent-purple/15 text-accent-purple",
 		badge: "border-accent-purple/25 bg-accent-purple/10 text-accent-purple"
 	},
 	PROJECT: {
-		icon: w,
+		icon: C,
 		chip: "bg-status-warning-bg-subtle text-status-warning-text",
 		badge: "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"
 	}
@@ -50,13 +52,13 @@ function L({ icon: e, children: t }) {
 		children: [e ? /* @__PURE__ */ j(e, { size: 12 }) : null, t]
 	});
 }
-function R({ lesson: e, index: t, done: r }) {
-	let [i, a] = g(!1), o = I[e.kind] ?? I.ARTICLE, s = o.icon, u = `tec-lesson-body-${e.id}`;
+function R({ lesson: e, index: t, done: r, open: i, onToggle: a }) {
+	let o = I[e.kind] ?? I.ARTICLE, s = o.icon, u = `tec-lesson-body-${e.id}`;
 	return /* @__PURE__ */ M("div", {
 		className: "border-b border-border-seam last:border-b-0",
 		children: [/* @__PURE__ */ M("button", {
 			type: "button",
-			onClick: () => a((e) => !e),
+			onClick: a,
 			"aria-expanded": i,
 			"aria-controls": u,
 			className: "group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60",
@@ -67,7 +69,7 @@ function R({ lesson: e, index: t, done: r }) {
 				}),
 				/* @__PURE__ */ j("span", {
 					className: n("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", r ? "bg-status-success-bg-subtle text-status-success-text" : o.chip),
-					children: j(r ? y : s, { size: 17 })
+					children: j(r ? v : s, { size: 17 })
 				}),
 				/* @__PURE__ */ M("div", {
 					className: "min-w-0 flex-1",
@@ -82,7 +84,7 @@ function R({ lesson: e, index: t, done: r }) {
 						}), /* @__PURE__ */ M("span", {
 							className: "inline-flex items-center gap-1 text-xs text-text-muted",
 							children: [
-								/* @__PURE__ */ j(x, { size: 12 }),
+								/* @__PURE__ */ j(b, { size: 12 }),
 								" ",
 								c(e.estimatedMinutes)
 							]
@@ -91,19 +93,19 @@ function R({ lesson: e, index: t, done: r }) {
 				}),
 				/* @__PURE__ */ M("div", {
 					className: "flex shrink-0 items-center gap-2",
-					children: [r ? /* @__PURE__ */ j(y, {
+					children: [r ? /* @__PURE__ */ j(v, {
 						size: 18,
 						className: "text-status-success-text"
 					}) : e.isPreview ? /* @__PURE__ */ M("span", {
 						className: "inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/10 px-2 py-0.5 text-[11px] font-medium text-accent-primary",
-						children: [/* @__PURE__ */ j(S, { size: 12 }), " Preview"]
+						children: [/* @__PURE__ */ j(x, { size: 12 }), " Preview"]
 					}) : e.isLocked ? /* @__PURE__ */ M("span", {
 						className: "inline-flex items-center gap-1 rounded-full border border-status-warning-border/60 bg-status-warning-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-warning-text",
-						children: [/* @__PURE__ */ j(T, { size: 12 }), " Upgrade to unlock"]
-					}) : /* @__PURE__ */ j(T, {
+						children: [/* @__PURE__ */ j(w, { size: 12 }), " Upgrade to unlock"]
+					}) : /* @__PURE__ */ j(w, {
 						size: 15,
 						className: "text-text-muted"
-					}), /* @__PURE__ */ j(b, {
+					}), /* @__PURE__ */ j(y, {
 						size: 16,
 						"aria-hidden": !0,
 						className: n("text-text-muted transition-transform duration-200", i ? "rotate-180" : "")
@@ -113,7 +115,7 @@ function R({ lesson: e, index: t, done: r }) {
 		}), i ? /* @__PURE__ */ j("div", {
 			id: u,
 			className: "px-2 pb-4 sm:pl-11",
-			children: e.isLocked ? /* @__PURE__ */ j(p, {
+			children: e.isLocked ? /* @__PURE__ */ j(d, {
 				compact: !0,
 				description: "This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades."
 			}) : e.content ? /* @__PURE__ */ j("div", {
@@ -144,7 +146,7 @@ function z({ certificate: e, learnerName: t, courseTitle: n }) {
 			children: [
 				/* @__PURE__ */ M("div", {
 					className: "flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-text-muted",
-					children: [/* @__PURE__ */ j(_, {
+					children: [/* @__PURE__ */ j(g, {
 						size: 14,
 						className: "text-status-warning-text"
 					}), " Certificate of completion"]
@@ -195,97 +197,97 @@ function z({ certificate: e, learnerName: t, courseTitle: n }) {
 					]
 				}) : /* @__PURE__ */ M("span", {
 					className: "inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
-					children: [/* @__PURE__ */ j(D, { size: 13 }), " Verified"]
+					children: [/* @__PURE__ */ j(E, { size: 13 }), " Verified"]
 				})
 			]
 		})]
 	});
 }
 function B() {
-	let [s] = se(), g = s.get("id") ?? "", { currentUser: b, workspaceId: S } = e(), { emit: E } = t(), { data: D, loading: O, error: I, refetch: B } = h(g);
-	ae(() => {
-		g && E("technospam.course.viewed", {
-			workspaceId: S,
-			entityId: g,
+	let [s] = A(), y = s.get("id") ?? "", [x, T] = se(oe.lesson), { currentUser: E, workspaceId: D } = e(), { emit: I } = t(), { data: B, loading: V, error: H, refetch: U } = re(y);
+	h(() => {
+		y && I("technospam.course.viewed", {
+			workspaceId: D,
+			entityId: y,
 			entityType: "TEC_COURSE"
 		});
 	}, [
-		g,
-		S,
-		E
+		y,
+		D,
+		I
 	]);
-	let [V, { loading: H }] = te(), [U, { loading: W }] = ie(), { data: G, refetch: ce } = re(g ? { courseId: g } : {}), [le, { loading: K }] = ne(), q = D?.tecCourse ?? null, J = [...q?.lessons ?? []].sort((e, t) => e.position - t.position), Y = (q?.enrollments ?? []).find((e) => e.learnerId === b?.id), X = G?.tecMyCertificates ?? [], Z = X.find((e) => e.status === "ISSUED") ?? X[0], ue = !!Y && Y.progressPct >= 100, de = async () => {
-		!g || !b?.id || (E("technospam.course.certificate_claimed", {
-			workspaceId: S,
-			entityId: g,
+	let [W, { loading: G }] = ie(), [le, { loading: ue }] = ae(), { data: de, refetch: fe } = m(y ? { courseId: y } : {}), [pe, { loading: K }] = p(), q = B?.tecCourse ?? null, J = [...q?.lessons ?? []].sort((e, t) => e.position - t.position), Y = (q?.enrollments ?? []).find((e) => e.learnerId === E?.id), X = de?.tecMyCertificates ?? [], Z = X.find((e) => e.status === "ISSUED") ?? X[0], me = !!Y && Y.progressPct >= 100, he = async () => {
+		!y || !E?.id || (I("technospam.course.certificate_claimed", {
+			workspaceId: D,
+			entityId: y,
 			entityType: "TEC_COURSE"
-		}), (await le({ variables: {
-			courseId: g,
-			learnerId: b.id,
+		}), (await pe({ variables: {
+			courseId: y,
+			learnerId: E.id,
 			score: 100
-		} })).data?.tecIssueCertificate && (m.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await ce()));
-	}, fe = async () => {
-		g && (E("technospam.course.enroll_clicked", {
-			workspaceId: S,
-			entityId: g,
+		} })).data?.tecIssueCertificate && (f.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await fe()));
+	}, ge = async () => {
+		y && (I("technospam.course.enroll_clicked", {
+			workspaceId: D,
+			entityId: y,
 			entityType: "TEC_COURSE"
-		}), (await V({ variables: { input: { courseId: g } } })).data?.tecEnroll && (E("technospam.course.enrolled", {
-			workspaceId: S,
-			entityId: g,
+		}), (await W({ variables: { input: { courseId: y } } })).data?.tecEnroll && (I("technospam.course.enrolled", {
+			workspaceId: D,
+			entityId: y,
 			entityType: "TEC_COURSE"
-		}), m.success("Enrolled", `You're enrolled in "${q?.title}".`), await B()));
-	}, pe = async () => {
+		}), f.success("Enrolled", `You're enrolled in "${q?.title}".`), await U()));
+	}, _e = async () => {
 		if (!Y) return;
 		let e = Math.min(J.length, Y.lessonsCompleted + 1), t = J.length ? Math.round(e / J.length * 100) : 100;
-		(await U({ variables: { input: {
+		(await le({ variables: { input: {
 			enrollmentId: Y.id,
 			lessonsCompleted: e,
 			progressPct: t
-		} } })).data?.tecUpdateProgress && (E("technospam.course.progress_updated", {
-			workspaceId: S,
+		} } })).data?.tecUpdateProgress && (I("technospam.course.progress_updated", {
+			workspaceId: D,
 			entityId: Y.id,
 			entityType: "TEC_ENROLLMENT",
 			progressPct: t
-		}), m.success("Progress saved", `${t}% complete`), await B());
+		}), f.success("Progress saved", `${t}% complete`), await U());
 	};
-	if (O && !q) return /* @__PURE__ */ M(r, {
+	if (V && !q) return /* @__PURE__ */ M(r, {
 		title: "Course",
 		backPath: "/courses/courses-page",
 		children: [/* @__PURE__ */ j(F, { className: "mb-4 h-40 w-full rounded-2xl" }), /* @__PURE__ */ j(F, { className: "h-64 w-full rounded-xl" })]
 	});
-	if (I || !q) return /* @__PURE__ */ j(r, {
+	if (H || !q) return /* @__PURE__ */ j(r, {
 		title: "Course",
 		backPath: "/courses/courses-page",
-		children: I ? /* @__PURE__ */ j(ee, {
+		children: H ? /* @__PURE__ */ j(ee, {
 			title: "Couldn't load course",
-			error: I
+			error: H
 		}) : /* @__PURE__ */ j(u, {
 			title: "Course not found",
 			description: "This course may have been unpublished."
 		})
 	});
-	let Q = Y?.lessonsCompleted ?? 0, $ = Math.max(0, J.length - Q), me = Y && Y.progressPct >= 100 ? "Course complete — claim your certificate below." : $ === 1 ? "1 lesson to go — almost there!" : `${$} lessons to go — keep it up!`, he = `${q.topic ?? ""} ${q.title}`;
+	let Q = Y?.lessonsCompleted ?? 0, $ = Math.max(0, J.length - Q), ve = Y && Y.progressPct >= 100 ? "Course complete — claim your certificate below." : $ === 1 ? "1 lesson to go — almost there!" : `${$} lessons to go — keep it up!`, ye = `${q.topic ?? ""} ${q.title}`;
 	return /* @__PURE__ */ M(r, {
 		backPath: "/courses/courses-page",
 		title: q.title,
 		description: q.summary ?? void 0,
 		actions: Y ? /* @__PURE__ */ M(N, {
-			onClick: pe,
-			disabled: W || Q >= J.length,
-			children: [/* @__PURE__ */ j(y, { size: 16 }), Q >= J.length ? "Completed" : "Complete next lesson"]
+			onClick: _e,
+			disabled: ue || Q >= J.length,
+			children: [/* @__PURE__ */ j(v, { size: 16 }), Q >= J.length ? "Completed" : "Complete next lesson"]
 		}) : /* @__PURE__ */ M(N, {
-			onClick: fe,
-			disabled: H,
+			onClick: ge,
+			disabled: G,
 			children: [
-				/* @__PURE__ */ j(v, { size: 16 }),
+				/* @__PURE__ */ j(_, { size: 16 }),
 				" ",
-				H ? "Enrolling…" : "Enroll"
+				G ? "Enrolling…" : "Enroll"
 			]
 		}),
 		children: [
 			/* @__PURE__ */ j(a, {
 				height: "h-40",
-				seed: he,
+				seed: ye,
 				icon: o(q.topic ?? q.title),
 				className: "mb-5 rounded-2xl",
 				children: /* @__PURE__ */ M("div", {
@@ -303,19 +305,19 @@ function B() {
 							className: "flex flex-wrap items-center gap-2",
 							children: [
 								/* @__PURE__ */ j(L, {
-									icon: k,
+									icon: O,
 									children: l(q.level)
 								}),
 								/* @__PURE__ */ j(L, {
-									icon: y,
+									icon: v,
 									children: l(q.status)
 								}),
 								q.topic ? /* @__PURE__ */ j(L, {
-									icon: w,
+									icon: C,
 									children: q.topic
 								}) : null,
 								q.isPremiumOnly ? /* @__PURE__ */ j(L, {
-									icon: T,
+									icon: w,
 									children: "Premium"
 								}) : null
 							]
@@ -323,7 +325,7 @@ function B() {
 					]
 				})
 			}),
-			/* @__PURE__ */ j(d, {
+			/* @__PURE__ */ j(te, {
 				tags: q.tags,
 				className: "mb-5"
 			}),
@@ -333,25 +335,25 @@ function B() {
 					/* @__PURE__ */ j(i, {
 						label: "Lessons",
 						value: J.length,
-						icon: C,
+						icon: S,
 						tone: "blue"
 					}),
 					/* @__PURE__ */ j(i, {
 						label: "Duration",
 						value: c(q.estimatedMinutes),
-						icon: x,
+						icon: b,
 						tone: "teal"
 					}),
 					/* @__PURE__ */ j(i, {
 						label: "Enrolled",
 						value: q.enrollments?.length ?? 0,
-						icon: oe,
+						icon: ce,
 						tone: "indigo"
 					}),
 					/* @__PURE__ */ j(i, {
 						label: "Your progress",
 						value: Y ? `${Y.progressPct}%` : "Not started",
-						icon: k,
+						icon: O,
 						tone: "purple"
 					})
 				]
@@ -364,7 +366,7 @@ function B() {
 						children: [
 							/* @__PURE__ */ j("span", {
 								className: "flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary",
-								children: /* @__PURE__ */ j(k, { size: 16 })
+								children: /* @__PURE__ */ j(O, { size: 16 })
 							}),
 							/* @__PURE__ */ j("span", {
 								className: "text-sm font-semibold text-text-primary",
@@ -392,7 +394,7 @@ function B() {
 					}),
 					/* @__PURE__ */ j("p", {
 						className: "mt-2 text-xs text-text-muted",
-						children: me
+						children: ve
 					})
 				]
 			}) : null,
@@ -402,7 +404,7 @@ function B() {
 					className: n("flex items-center gap-4 border p-5", Z.status === "REVOKED" ? "border-status-error-border/60 bg-status-error-bg-subtle/20" : "border-status-success-border/60 bg-status-success-bg-subtle/30"),
 					children: [/* @__PURE__ */ j("span", {
 						className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40",
-						children: /* @__PURE__ */ j(A, { size: 26 })
+						children: /* @__PURE__ */ j(k, { size: 26 })
 					}), /* @__PURE__ */ M("div", {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ j("div", {
@@ -415,16 +417,16 @@ function B() {
 					})]
 				}), /* @__PURE__ */ j(z, {
 					certificate: Z,
-					learnerName: b?.name ?? void 0,
+					learnerName: E?.name ?? void 0,
 					courseTitle: Z.course?.title ?? q.title
 				})]
-			}) : ue ? /* @__PURE__ */ M(P, {
+			}) : me ? /* @__PURE__ */ M(P, {
 				className: "mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ M("div", {
 					className: "flex items-center gap-4",
 					children: [/* @__PURE__ */ j("span", {
 						className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40",
-						children: /* @__PURE__ */ j(A, { size: 26 })
+						children: /* @__PURE__ */ j(k, { size: 26 })
 					}), /* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("div", {
 						className: "text-base font-semibold text-text-primary",
 						children: "You finished this course"
@@ -433,10 +435,10 @@ function B() {
 						children: "Claim your verifiable certificate of completion."
 					})] })]
 				}), /* @__PURE__ */ M(N, {
-					onClick: de,
+					onClick: he,
 					disabled: K,
 					children: [
-						/* @__PURE__ */ j(_, { size: 16 }),
+						/* @__PURE__ */ j(g, { size: 16 }),
 						" ",
 						K ? "Issuing…" : "Claim certificate"
 					]
@@ -450,12 +452,12 @@ function B() {
 						children: [/* @__PURE__ */ M("h2", {
 							className: "flex items-center gap-2 text-base font-semibold text-text-primary",
 							children: [
-								/* @__PURE__ */ j(v, {
+								/* @__PURE__ */ j(_, {
 									size: 18,
 									className: "text-accent-primary"
 								}),
 								" Curriculum",
-								q.isPremiumOnly ? /* @__PURE__ */ j(f, { locked: q.isLocked }) : null
+								q.isPremiumOnly ? /* @__PURE__ */ j(ne, { locked: q.isLocked }) : null
 							]
 						}), J.length ? /* @__PURE__ */ M("span", {
 							className: "rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
@@ -469,7 +471,7 @@ function B() {
 					}),
 					q.isLocked ? /* @__PURE__ */ j("div", {
 						className: "mb-4",
-						children: /* @__PURE__ */ j(p, {
+						children: /* @__PURE__ */ j(d, {
 							compact: !0,
 							description: "This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades."
 						})
@@ -482,7 +484,9 @@ function B() {
 						children: J.map((e, t) => /* @__PURE__ */ j(R, {
 							lesson: e,
 							index: t,
-							done: t < Q
+							done: t < Q,
+							open: x === e.id,
+							onToggle: () => T(x === e.id ? null : e.id)
 						}, e.id))
 					})
 				]