feat(web): learning view, jeopardy board, terminal embed, notifications

apps/web/README.md

@@ -46,6 +46,46 @@ numeric fields; invalid bundles fail loudly instead of rendering. Set
 Filters write `?difficulty=&type=&track=` query params, so filtered views are
 shareable URLs while the grid itself renders server-side.
 
+### Learning, challenges, notifications
+
+`/learn`, `/learn/[pathSlug]`, `/learn/[pathSlug]/[moduleSlug]`,
+`/challenges`, and `/notifications` read and mutate through the same-origin
+proxy from client components (`lib/api-browser.ts`). These surfaces are
+inherently per-user and interactive, so the browser owns the fetch lifecycle:
+loading skeletons first, an inline sign-in prompt on 401/403, and a problem-
+details error banner otherwise. Response types live once in
+`@openrange/contracts` (`ApiClient.learning`, `.challenges`, `.notifications`);
+the web app casts nothing.
+
+Two behaviors worth knowing:
+
+- Quiz feedback shows only per-question correctness returned by
+  `POST /api/or/quiz/{section_id}/attempt`. Answer keys never reach the
+  browser, so the UI cannot leak them.
+- The module reading pane offers a language switcher only when a probe of
+  `GET /api/or/learning/modules/{slug}?lang=<code>` answers 200 for a
+  candidate language ("when 200 else hide"). Today no candidate answers 200,
+  so the switcher stays hidden until localization ships backend-side.
+
+### Browser terminal
+
+`/terminal` attaches xterm.js to the gateway WebSocket at
+`/terminal/{instance_id}?token=...` (binary frames carry keystrokes and PTY
+output; text frames are control JSON such as resize, plus the initial
+`{"type":"session"}` handshake used for `?resume=` reconnects).
+
+Token reality check (grep before you trust this): the gateway verifies
+short-lived `lab-v1` tokens (`apps/lab-gateway/src/openrange/gateway/tokens.py`),
+but the FastAPI side has **no minting endpoint yet** — there is no
+`POST /api/labs/{id}/terminal-token` route in `apps/api`, and the tokens
+module docstring says minting lands in a later branch. Until that endpoint
+ships, the page therefore stays gated behind selecting a READY lab from your
+own instance list, and Connect reports precisely that the token endpoint is
+missing instead of pretending to attach. When the endpoint exists, the same
+client connects for real: it expects `{token}` from
+`POST /api/or/labs/{id}/terminal-token` and opens
+`${NEXT_PUBLIC_GATEWAY_WS_URL:-ws://localhost:8772}/terminal/{id}?token=...`.
+
 ### Styling and accessibility
 
 - `packages/ui` owns tokens (`tokens.css`: near-black surfaces, single lime
@@ -56,8 +96,11 @@ shareable URLs while the grid itself renders server-side.
 - Keyboard support: skip link as first tab stop, visible focus rings
   everywhere, native `<dialog>` for modals (focus trap + Escape for free),
   WAI-ARIA tabs pattern in the Tabs primitive, reduced-motion-safe animations.
-- Playwright runs axe on `/`, `/catalog`, `/login` at 320 px and 1280 px, plus
-  a keyboard-only journey test.
+- The top navigation marks the active route with `aria-current="page"`;
+  below the `md` breakpoint it collapses into a disclosure menu button.
+- Playwright runs axe on `/`, `/catalog`, `/login`, `/learn`, and
+  `/challenges` at 320 px and 1280 px, plus a keyboard-only journey test and
+  mocked-API journeys for enroll/module/quiz and challenge flag submission.
 
 ## Local development
 
@@ -70,6 +113,9 @@ Environment variables (see `.env.example` at the repo root):
 
 - `ORIGIN_API_URL`: where FastAPI listens (default `http://localhost:8700`).
 - `OPENRANGE_CONTENT_DIR`: override for the content bundle directory.
+- `NEXT_PUBLIC_GATEWAY_WS_URL`: gateway WebSocket base for the browser
+  terminal (default `ws://localhost:8772`); production Caddy exposes it under
+  `/gateway/*`, so set `wss://<host>/gateway`.
 
 ## Commands
 

apps/web/app/challenges/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { ChallengeBoard } from '@/components/ChallengeBoard';
+
+export const metadata: Metadata = { title: 'Challenges' };
+
+export default function ChallengesPage() {
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+      <header>
+        <h1 className="m-0 text-2xl font-semibold tracking-tight sm:text-3xl">Challenges</h1>
+        <p className="mt-2 mb-0 max-w-[60ch] text-sm leading-relaxed text-muted">
+          A jeopardy board of standalone puzzles. Points may decay as solves pile up on dynamic
+          challenges; submit flags from each challenge's detail view.
+        </p>
+      </header>
+      <ChallengeBoard />
+    </div>
+  );
+}

apps/web/app/learn/[pathSlug]/[moduleSlug]/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next';
+import { ModuleReader } from '@/components/ModuleReader';
+
+export const metadata: Metadata = { title: 'Module' };
+
+interface Props {
+  params: Promise<{ pathSlug: string; moduleSlug: string }>;
+}
+
+export default async function ModulePage({ params }: Props) {
+  const { pathSlug, moduleSlug } = await params;
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
+      <ModuleReader pathSlug={pathSlug} moduleSlug={moduleSlug} />
+    </div>
+  );
+}

apps/web/app/learn/[pathSlug]/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next';
+import { PathOutline } from '@/components/PathOutline';
+
+export const metadata: Metadata = { title: 'Learning path' };
+
+interface Props {
+  params: Promise<{ pathSlug: string }>;
+}
+
+export default async function LearningPathPage({ params }: Props) {
+  const { pathSlug } = await params;
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-14">
+      <PathOutline pathSlug={pathSlug} />
+    </div>
+  );
+}

apps/web/app/learn/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { LearnCatalog } from '@/components/LearnCatalog';
+
+export const metadata: Metadata = { title: 'Learn' };
+
+export default function LearnPage() {
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+      <header>
+        <h1 className="m-0 text-2xl font-semibold tracking-tight sm:text-3xl">Learning paths</h1>
+        <p className="mt-2 mb-0 max-w-[60ch] text-sm leading-relaxed text-muted">
+          Guided curricula that pair reading, quizzes, and live lab rooms. Enroll to track section
+          completion and earn a certificate when the required modules are done.
+        </p>
+      </header>
+      <LearnCatalog />
+    </div>
+  );
+}

apps/web/app/notifications/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import { NotificationsView } from '@/components/NotificationsView';
+
+export const metadata: Metadata = { title: 'Notifications' };
+
+export default function NotificationsPage() {
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
+      <header>
+        <h1 className="m-0 text-2xl font-semibold tracking-tight sm:text-3xl">Notifications</h1>
+        <p className="mt-2 mb-0 max-w-[60ch] text-sm leading-relaxed text-muted">
+          Unread items first. Control channels and muted categories below the feed.
+        </p>
+      </header>
+      <div className="mt-8">
+        <NotificationsView />
+      </div>
+    </div>
+  );
+}

apps/web/app/terminal/page.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { getCurrentUser, getServerApiClient } from '@/lib/api-server';
+import type { LabInstance } from '@openrange/contracts';
+import { TerminalClient } from '@/components/TerminalClient';
+
+export const metadata: Metadata = { title: 'Terminal' };
+export const dynamic = 'force-dynamic';
+
+export default async function TerminalPage() {
+  const user = await getCurrentUser();
+  if (user === null) {
+    redirect('/login');
+  }
+
+  let labs: LabInstance[] = [];
+  let apiError: string | null = null;
+  try {
+    labs = [...(await (await getServerApiClient()).labs.list())];
+  } catch {
+    apiError = 'Could not load your labs. Is the API server running?';
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+      <header>
+        <h1 className="m-0 text-2xl font-semibold tracking-tight sm:text-3xl">Terminal</h1>
+        <p className="mt-2 mb-0 max-w-[60ch] text-sm leading-relaxed text-muted">
+          An SSH shell into one of your lab instances, bridged through the gateway. Pick a READY
+          lab; every keystroke stays inside that isolated session.
+        </p>
+      </header>
+
+      {apiError !== null ? (
+        <p
+          role="alert"
+          className="mt-8 rounded-md border border-warning bg-panel px-4 py-3 text-sm text-warning"
+        >
+          {apiError}
+        </p>
+      ) : (
+        <TerminalClient labs={labs} />
+      )}
+
+      <p className="mb-0 mt-6 text-xs leading-relaxed text-muted">
+        Need a target first?{' '}
+        <Link href="/catalog" className="text-accent underline underline-offset-4">
+          Start a lab
+        </Link>{' '}
+        from any room page.
+      </p>
+    </div>
+  );
+}

apps/web/components/ChallengeBoard.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Skeleton } from '@openrange/ui';
+import type { ChallengeCategory, ChallengeSummary } from '@openrange/contracts';
+import { apiProxy, isAuthError, ProxyError } from '@/lib/api-browser';
+import { ChallengeModal } from './ChallengeModal';
+import { SignInPrompt } from './SignInPrompt';
+
+type Load =
+  | { kind: 'loading' }
+  | { kind: 'signedOut' }
+  | { kind: 'error'; message: string }
+  | { kind: 'ready'; challenges: ChallengeSummary[] };
+
+/** Display order for categories; unknown categories append in API order. */
+const CATEGORY_ORDER: readonly ChallengeCategory[] = [
+  'web',
+  'crypto',
+  'pwn',
+  'rev',
+  'forensics',
+  'misc',
+  'osint',
+];
+
+export function ChallengeBoard() {
+  const [load, setLoad] = useState<Load>({ kind: 'loading' });
+  const [openSlug, setOpenSlug] = useState<string | null>(null);
+  const [solvedSlugs, setSolvedSlugs] = useState<readonly string[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    apiProxy<ChallengeSummary[]>('challenges').then(
+      (challenges) => {
+        if (!cancelled) {
+          setLoad({ kind: 'ready', challenges });
+        }
+      },
+      (error: unknown) => {
+        if (cancelled) {
+          return;
+        }
+        if (isAuthError(error)) {
+          setLoad({ kind: 'signedOut' });
+        } else {
+          setLoad({
+            kind: 'error',
+            message: error instanceof ProxyError ? error.message : 'Could not reach the server.',
+          });
+        }
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Modal callbacks must be stable: the detail loader depends on them.
+  const markSolved = useCallback((slug: string) => {
+    setSolvedSlugs((current) => (current.includes(slug) ? current : [...current, slug]));
+  }, []);
+
+  if (load.kind === 'loading') {
+    return (
+      <div className="mt-8 grid gap-4 lg:grid-cols-3" aria-busy="true">
+        {[0, 1, 2].map((slot) => (
+          <Skeleton key={slot} label="Loading challenges" width="100%" height="16rem" />
+        ))}
+      </div>
+    );
+  }
+
+  if (load.kind === 'signedOut') {
+    return <SignInPrompt what="play challenges" />;
+  }
+
+  if (load.kind === 'error') {
+    return (
+      <p
+        role="alert"
+        className="mt-8 rounded-md border border-warning bg-panel px-4 py-3 text-sm text-warning"
+      >
+        {load.message}
+      </p>
+    );
+  }
+
+  const grouped = new Map<string, ChallengeSummary[]>();
+  for (const challenge of load.challenges) {
+    const bucket = grouped.get(challenge.category) ?? [];
+    bucket.push(challenge);
+    grouped.set(challenge.category, bucket);
+  }
+  const categories = [...grouped.keys()].sort((a, b) => {
+    const ia = CATEGORY_ORDER.indexOf(a as ChallengeCategory);
+    const ib = CATEGORY_ORDER.indexOf(b as ChallengeCategory);
+    return (ia === -1 ? CATEGORY_ORDER.length : ia) - (ib === -1 ? CATEGORY_ORDER.length : ib);
+  });
+
+  return (
+    <>
+      <p
+        aria-live="polite"
+        className="mt-6 mb-4 font-mono text-xs uppercase tracking-wide text-muted"
+      >
+        {load.challenges.length} {load.challenges.length === 1 ? 'challenge' : 'challenges'} on the
+        board · {solvedSlugs.length} solved by you
+      </p>
+
+      {categories.map((category) => {
+        const items = grouped.get(category) ?? [];
+        return (
+          <section key={category} aria-labelledby={`category-${category}`} className="mb-8">
+            <h2
+              id={`category-${category}`}
+              className="m-0 mb-3 font-mono text-sm font-semibold uppercase tracking-widest text-content"
+            >
+              {category}
+              <span className="ml-2 font-normal normal-case tracking-normal text-muted">
+                {items.length} {items.length === 1 ? 'challenge' : 'challenges'}
+              </span>
+            </h2>
+            <ul className="grid list-none gap-2 p-0 sm:grid-cols-2 lg:grid-cols-4">
+              {items.map((challenge) => {
+                const solved = solvedSlugs.includes(challenge.slug);
+                return (
+                  <li key={challenge.slug}>
+                    <button
+                      type="button"
+                      onClick={() => setOpenSlug(challenge.slug)}
+                      aria-label={`${challenge.name}, ${challenge.points} points, ${challenge.solve_count} solves${solved ? ', solved' : ''}`}
+                      className={[
+                        'flex h-full w-full flex-col items-start gap-1 rounded-lg border px-3 py-3 text-left transition-colors',
+                        solved
+                          ? 'border-accent/60 bg-panel'
+                          : 'border-edge bg-panel hover:border-edge-strong',
+                      ].join(' ')}
+                    >
+                      <span className="w-full break-words text-sm font-medium text-content">
+                        {challenge.name}
+                      </span>
+                      <span className="font-mono text-xs text-muted">
+                        {challenge.points} pts · {challenge.solve_count} solves
+                      </span>
+                      {solved ? (
+                        <span className="rounded bg-accent/15 px-1.5 py-0.5 font-mono text-[0.7rem] uppercase tracking-wide text-accent">
+                          Solved
+                        </span>
+                      ) : null}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+        );
+      })}
+
+      {openSlug !== null ? (
+        <ChallengeModal
+          key={openSlug}
+          slug={openSlug}
+          onClose={() => setOpenSlug(null)}
+          onSolved={markSolved}
+        />
+      ) : null}
+    </>
+  );
+}