improvement(academy): polish, security hardening, and certificate claim UI

- Replace raw localStorage with BrowserStorage utility in local-progress
- Pre-compute slug/id Maps in content/index for O(1) course lookups
- Move blockMap construction into edge_exists branch only in validation
- Extract navBtnClass constant and MetaRow/formatDate helpers in UI
- Add rate limiting, server-side completion verification, audit logging, and nanoid cert numbers to certificate issuance endpoint
- Add useIssueCertificate mutation hook with completedLessonIds
- Wire certificate claim UI into CourseProgress: sign-in prompt, claim button with loading state, and post-issuance view with link to certificate page
- Fix lesson page scroll container and quiz scroll-on-focus bug

Author: waleedlatif1

apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx

@@ -1,10 +1,12 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { CheckCircle2, Circle, GraduationCap } from 'lucide-react'
+import { CheckCircle2, Circle, ExternalLink, GraduationCap, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { getCompletedLessons } from '@/lib/academy/local-progress'
 import type { Course } from '@/lib/academy/types'
+import { useSession } from '@/lib/auth/auth-client'
+import { useIssueCertificate } from '@/hooks/queries/academy'
 
 interface CourseProgressProps {
   course: Course
@@ -13,6 +15,8 @@ interface CourseProgressProps {
 
 export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
   const [completedIds, setCompletedIds] = useState<Set<string> | null>(null)
+  const { data: session } = useSession()
+  const { mutate: issueCertificate, isPending, data: certificate, error } = useIssueCertificate()
 
   useEffect(() => {
     setCompletedIds(getCompletedLessons())
@@ -83,21 +87,65 @@ export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
       {completedIds && totalLessons > 0 && completedCount === totalLessons && (
         <section className='px-4 pb-16 sm:px-8 md:px-[80px]'>
           <div className='mx-auto max-w-3xl rounded-[8px] border border-[#3A4A3A] bg-[#1F2A1F] p-6'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-3'>
-                <GraduationCap className='h-6 w-6 text-[#4CAF50]' />
-                <div>
-                  <p className='font-[430] text-[#ECECEC] text-[15px]'>Course Complete!</p>
-                  <p className='text-[#666] text-[13px]'>Sign in to claim your certificate.</p>
+            {certificate ? (
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center gap-3'>
+                  <GraduationCap className='h-6 w-6 text-[#4CAF50]' />
+                  <div>
+                    <p className='font-[430] text-[#ECECEC] text-[15px]'>Certificate issued!</p>
+                    <p className='font-mono text-[#666] text-[13px]'>
+                      {certificate.certificateNumber}
+                    </p>
+                  </div>
                 </div>
+                <Link
+                  href={`/academy/certificate/${certificate.certificateNumber}`}
+                  className='flex items-center gap-1.5 rounded-[5px] bg-[#4CAF50] px-4 py-2 font-[430] text-[#1C1C1C] text-[13px] transition-colors hover:bg-[#5DBF61]'
+                >
+                  View certificate
+                  <ExternalLink className='h-3.5 w-3.5' />
+                </Link>
               </div>
-              <Link
-                href='/sign-in'
-                className='rounded-[5px] bg-[#ECECEC] px-4 py-2 font-[430] text-[#1C1C1C] text-[13px] transition-colors hover:bg-white'
-              >
-                Get certificate
-              </Link>
-            </div>
+            ) : (
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center gap-3'>
+                  <GraduationCap className='h-6 w-6 text-[#4CAF50]' />
+                  <div>
+                    <p className='font-[430] text-[#ECECEC] text-[15px]'>Course Complete!</p>
+                    <p className='text-[#666] text-[13px]'>
+                      {session
+                        ? error
+                          ? 'Something went wrong. Try again.'
+                          : 'Claim your certificate of completion.'
+                        : 'Sign in to claim your certificate.'}
+                    </p>
+                  </div>
+                </div>
+                {session ? (
+                  <button
+                    type='button'
+                    disabled={isPending}
+                    onClick={() =>
+                      issueCertificate({
+                        courseId: course.id,
+                        completedLessonIds: [...completedIds],
+                      })
+                    }
+                    className='flex items-center gap-2 rounded-[5px] bg-[#ECECEC] px-4 py-2 font-[430] text-[#1C1C1C] text-[13px] transition-colors hover:bg-white disabled:opacity-50'
+                  >
+                    {isPending && <Loader2 className='h-3.5 w-3.5 animate-spin' />}
+                    {isPending ? 'Issuing…' : 'Get certificate'}
+                  </button>
+                ) : (
+                  <Link
+                    href='/sign-in'
+                    className='rounded-[5px] bg-[#ECECEC] px-4 py-2 font-[430] text-[#1C1C1C] text-[13px] transition-colors hover:bg-white'
+                  >
+                    Sign in
+                  </Link>
+                )}
+              </div>
+            )}
           </div>
         </section>
       )}

apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx

@@ -1,9 +1,24 @@
 'use client'
 
+import type React from 'react'
 import { use } from 'react'
 import { CheckCircle2, GraduationCap } from 'lucide-react'
 import { useAcademyCertificate } from '@/hooks/queries/academy'
 
+const DATE_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
+function formatDate(date: string | Date) {
+  return new Date(date).toLocaleDateString('en-US', DATE_FORMAT)
+}
+
+function MetaRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className='flex items-center justify-between px-5 py-3.5'>
+      <span className='text-[#666] text-[13px]'>{label}</span>
+      {children}
+    </div>
+  )
+}
+
 interface CertificatePageProps {
   params: Promise<{ certificateNumber: string }>
 }
@@ -56,43 +71,29 @@ export default function CertificatePage({ params }: CertificatePageProps) {
           </div>
 
           <div className='mt-6 divide-y divide-[#2A2A2A] rounded-[8px] border border-[#2A2A2A] bg-[#222]'>
-            <div className='flex items-center justify-between px-5 py-3.5'>
-              <span className='text-[#666] text-[13px]'>Certificate number</span>
+            <MetaRow label='Certificate number'>
               <span className='font-mono text-[#ECECEC] text-[13px]'>
                 {certificate.certificateNumber}
               </span>
-            </div>
-            <div className='flex items-center justify-between px-5 py-3.5'>
-              <span className='text-[#666] text-[13px]'>Issued</span>
-              <span className='text-[#ECECEC] text-[13px]'>
-                {new Date(certificate.issuedAt).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })}
-              </span>
-            </div>
-            <div className='flex items-center justify-between px-5 py-3.5'>
-              <span className='text-[#666] text-[13px]'>Status</span>
+            </MetaRow>
+            <MetaRow label='Issued'>
+              <span className='text-[#ECECEC] text-[13px]'>{formatDate(certificate.issuedAt)}</span>
+            </MetaRow>
+            <MetaRow label='Status'>
               <span
                 className={`text-[13px] capitalize ${
                   certificate.status === 'active' ? 'text-[#4CAF50]' : 'text-[#f44336]'
                 }`}
               >
                 {certificate.status}
               </span>
-            </div>
+            </MetaRow>
             {certificate.expiresAt && (
-              <div className='flex items-center justify-between px-5 py-3.5'>
-                <span className='text-[#666] text-[13px]'>Expires</span>
+              <MetaRow label='Expires'>
                 <span className='text-[#ECECEC] text-[13px]'>
-                  {new Date(certificate.expiresAt).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                  })}
+                  {formatDate(certificate.expiresAt)}
                 </span>
-              </div>
+              </MetaRow>
             )}
           </div>
 

apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx

@@ -10,6 +10,9 @@ import { LessonVideo } from '@/app/academy/components/lesson-video'
 import { ExerciseView } from './components/exercise-view'
 import { LessonQuiz } from './components/lesson-quiz'
 
+const navBtnClass =
+  'flex items-center gap-1 rounded-[5px] border border-[#2A2A2A] px-3 py-1.5 text-[#999] text-[12px] transition-colors hover:border-[#3A3A3A] hover:text-[#ECECEC]'
+
 interface LessonPageProps {
   params: Promise<{ courseSlug: string; lessonSlug: string }>
 }
@@ -74,18 +77,12 @@ export default function LessonPage({ params }: LessonPageProps) {
 
         <div className='flex items-center gap-2'>
           {prevLesson ? (
-            <Link
-              href={`/academy/${courseSlug}/${prevLesson.slug}`}
-              className='flex items-center gap-1 rounded-[5px] border border-[#2A2A2A] px-3 py-1.5 text-[#999] text-[12px] transition-colors hover:border-[#3A3A3A] hover:text-[#ECECEC]'
-            >
+            <Link href={`/academy/${courseSlug}/${prevLesson.slug}`} className={navBtnClass}>
               <ChevronLeft className='h-3.5 w-3.5' />
               Previous
             </Link>
           ) : (
-            <Link
-              href={`/academy/${courseSlug}`}
-              className='flex items-center gap-1 rounded-[5px] border border-[#2A2A2A] px-3 py-1.5 text-[#999] text-[12px] transition-colors hover:border-[#3A3A3A] hover:text-[#ECECEC]'
-            >
+            <Link href={`/academy/${courseSlug}`} className={navBtnClass}>
               <ChevronLeft className='h-3.5 w-3.5' />
               Course
             </Link>

apps/sim/app/api/academy/certificates/route.ts

@@ -8,17 +8,28 @@ import { z } from 'zod'
 import { getCourseById } from '@/lib/academy/content'
 import type { CertificateMetadata } from '@/lib/academy/types'
 import { getSession } from '@/lib/auth'
+import type { TokenBucketConfig } from '@/lib/core/rate-limiter'
+import { RateLimiter } from '@/lib/core/rate-limiter'
 
 const logger = createLogger('AcademyCertificatesAPI')
 
+const rateLimiter = new RateLimiter()
+const CERT_RATE_LIMIT: TokenBucketConfig = {
+  maxTokens: 5,
+  refillRate: 1,
+  refillIntervalMs: 60 * 60_000, // 1 per hour refill
+}
+
 const IssueCertificateSchema = z.object({
   courseId: z.string(),
+  completedLessonIds: z.array(z.string()),
 })
 
 /**
  * POST /api/academy/certificates
- * Issues a certificate for the given course.
- * The client is responsible for verifying completion locally before calling this.
+ * Issues a certificate for the given course after verifying all lessons are completed.
+ * Completion is client-attested: the client sends completed lesson IDs and the server
+ * validates them against the full lesson list for the course.
  */
 export async function POST(req: NextRequest) {
   try {
@@ -27,15 +38,34 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
+    const { allowed } = await rateLimiter.checkRateLimitDirect(
+      `academy:cert:${session.user.id}`,
+      CERT_RATE_LIMIT
+    )
+    if (!allowed) {
+      return NextResponse.json({ error: 'Too many requests' }, { status: 429 })
+    }
+
     const body = await req.json()
     const parsed = IssueCertificateSchema.safeParse(body)
     if (!parsed.success) {
       return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 })
     }
 
-    const { courseId } = parsed.data
+    const { courseId, completedLessonIds } = parsed.data
 
     const course = getCourseById(courseId)
+    if (!course) {
+      return NextResponse.json({ error: 'Course not found' }, { status: 404 })
+    }
+
+    // Verify all lessons in the course are reported as completed
+    const allLessonIds = course.modules.flatMap((m) => m.lessons.map((l) => l.id))
+    const completedSet = new Set(completedLessonIds)
+    const incomplete = allLessonIds.filter((id) => !completedSet.has(id))
+    if (incomplete.length > 0) {
+      return NextResponse.json({ error: 'Course not fully completed', incomplete }, { status: 422 })
+    }
 
     const [existing, learner] = await Promise.all([
       db
@@ -57,10 +87,6 @@ export async function POST(req: NextRequest) {
         .then((rows) => rows[0] ?? null),
     ])
 
-    if (!course) {
-      return NextResponse.json({ error: 'Course not found' }, { status: 404 })
-    }
-
     if (existing?.status === 'active') {
       return NextResponse.json({ certificate: existing })
     }
@@ -83,6 +109,12 @@ export async function POST(req: NextRequest) {
       })
       .returning()
 
+    logger.info('Certificate issued', {
+      userId: session.user.id,
+      courseId,
+      certificateNumber,
+    })
+
     return NextResponse.json({ certificate }, { status: 201 })
   } catch (error) {
     logger.error('Failed to issue certificate', { error })
@@ -120,11 +152,8 @@ export async function GET(req: NextRequest) {
   }
 }
 
-/** Generates a human-readable certificate number, e.g. SIM-2026-00042 */
+/** Generates a human-readable certificate number, e.g. SIM-2026-A3K9XZ2P */
 function generateCertificateNumber(): string {
   const year = new Date().getFullYear()
-  const suffix = Math.floor(Math.random() * 99999)
-    .toString()
-    .padStart(5, '0')
-  return `SIM-${year}-${suffix}`
+  return `SIM-${year}-${nanoid(8).toUpperCase()}`
 }

apps/sim/hooks/queries/academy.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import type { AcademyCertificate } from '@/lib/academy/types'
 import { fetchJson } from '@/hooks/selectors/helpers'
 
@@ -21,3 +21,18 @@ export function useAcademyCertificate(certificateNumber?: string, options?: { en
     staleTime: 10 * 60 * 1000,
   })
 }
+
+export function useIssueCertificate() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (variables: { courseId: string; completedLessonIds: string[] }) =>
+      fetchJson<{ certificate: AcademyCertificate }>('/api/academy/certificates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(variables),
+      }).then((d) => d.certificate),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: academyKeys.certificates() })
+    },
+  })
+}

apps/sim/lib/academy/content/index.ts

@@ -4,10 +4,13 @@ import { simFoundations } from './courses/sim-foundations'
 /** All published courses in display order. */
 export const COURSES: Course[] = [simFoundations]
 
+const bySlug = new Map(COURSES.map((c) => [c.slug, c]))
+const byId = new Map(COURSES.map((c) => [c.id, c]))
+
 export function getCourse(slug: string): Course | undefined {
-  return COURSES.find((c) => c.slug === slug)
+  return bySlug.get(slug)
 }
 
 export function getCourseById(id: string): Course | undefined {
-  return COURSES.find((c) => c.id === id)
+  return byId.get(id)
 }

apps/sim/lib/academy/local-progress.ts

@@ -1,25 +1,13 @@
-import { createLogger } from '@sim/logger'
+import { BrowserStorage } from '@/lib/core/utils/browser-storage'
 
-const logger = createLogger('AcademyProgress')
 const STORAGE_KEY = 'academy:completed'
 
 export function getCompletedLessons(): Set<string> {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    const ids: string[] = raw ? JSON.parse(raw) : []
-    return new Set(ids)
-  } catch (error) {
-    logger.warn('Failed to read lesson progress from localStorage', { error })
-    return new Set()
-  }
+  return new Set(BrowserStorage.getItem<string[]>(STORAGE_KEY, []))
 }
 
 export function markLessonComplete(lessonId: string): void {
-  try {
-    const ids = getCompletedLessons()
-    ids.add(lessonId)
-    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]))
-  } catch (error) {
-    logger.warn('Failed to persist lesson completion', { lessonId, error })
-  }
+  const ids = getCompletedLessons()
+  ids.add(lessonId)
+  BrowserStorage.setItem(STORAGE_KEY, [...ids])
 }