From bd4e9bc4b8fc1207fe701a41e6931bef90abb3f6 Mon Sep 17 00:00:00 2001
From: Tobias Macey <tmacey@mit.edu>
Date: Tue, 28 Jul 2026 15:17:45 -0400
Subject: [PATCH 01/12] Strip trailing slash from channel_url (#3691)

Next.js's default trailingSlash: false means the canonical channel
route has no trailing slash, so every sitemap/API-driven request
using channel_url paid for a wasted 308 redirect round-trip.

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
---
 channels/models.py                     | 3 +--
 channels/models_test.py                | 2 +-
 channels/serializers_test.py           | 2 +-
 learning_resources/serializers_test.py | 8 ++++----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/channels/models.py b/channels/models.py
index eea800a0b6..7ae3121164 100644
--- a/channels/models.py
+++ b/channels/models.py
@@ -40,7 +40,6 @@ def annotate_channel_url(self):
                         "channel_type",
                         models.Value("/"),
                         "name",
-                        models.Value("/"),
                     ),
                 ),
                 default=None,
@@ -163,7 +162,7 @@ def __str__(self):
     def channel_url(self) -> str | None:
         """Return the channel url"""
         if self.published:
-            return frontend_absolute_url(f"/c/{self.channel_type}/{self.name}/")
+            return frontend_absolute_url(f"/c/{self.channel_type}/{self.name}")
         return None
 
     @property
diff --git a/channels/models_test.py b/channels/models_test.py
index acda047d07..8f5cc57f1b 100644
--- a/channels/models_test.py
+++ b/channels/models_test.py
@@ -37,7 +37,7 @@ def test_channel_url_for_departments(published, channel_type, detail_factory):
     if published:
         assert (
             urlparse(channel.channel_url).path
-            == f"/c/{channel_type.name}/{channel.name}/"
+            == f"/c/{channel_type.name}/{channel.name}"
         )
     else:
         assert channel.channel_url is None
diff --git a/channels/serializers_test.py b/channels/serializers_test.py
index c732473dfd..27e68bd094 100644
--- a/channels/serializers_test.py
+++ b/channels/serializers_test.py
@@ -105,7 +105,7 @@ def test_serialize_channel(  # pylint: disable=too-many-arguments
         "created_on": mocker.ANY,
         "id": channel.id,
         "channel_url": frontend_absolute_url(
-            f"/c/{channel.channel_type}/{channel.name}/"
+            f"/c/{channel.channel_type}/{channel.name}"
         ),
         "lists": [
             LearningPathPreviewSerializer(channel_list.channel_list).data
diff --git a/learning_resources/serializers_test.py b/learning_resources/serializers_test.py
index 98441468fe..c92ea24164 100644
--- a/learning_resources/serializers_test.py
+++ b/learning_resources/serializers_test.py
@@ -395,7 +395,7 @@ def test_learning_resource_serializer(  # noqa: PLR0913
                 "department_id": dept.department_id,
                 "name": dept.name,
                 "channel_url": frontend_absolute_url(
-                    f"/c/department/{Channel.objects.get(department_detail__department=dept).name}/",
+                    f"/c/department/{Channel.objects.get(department_detail__department=dept).name}",
                 ),
                 "school": {
                     "id": dept.school.id,
@@ -705,7 +705,7 @@ def test_content_file_serializer(settings, expected_types, has_channels):
                 "code": content_file.run.learning_resource.offered_by.code,
                 "display_facet": True,
                 "channel_url": frontend_absolute_url(
-                    f"/c/unit/{Channel.objects.get(unit_detail__unit=content_file.run.learning_resource.offered_by).name}/"
+                    f"/c/unit/{Channel.objects.get(unit_detail__unit=content_file.run.learning_resource.offered_by).name}"
                 )
                 if has_channels
                 else None,
@@ -717,7 +717,7 @@ def test_content_file_serializer(settings, expected_types, has_channels):
                     "name": dept.name,
                     "department_id": dept.department_id,
                     "channel_url": frontend_absolute_url(
-                        f"/c/department/{Channel.objects.get(department_detail__department=dept).name}/"
+                        f"/c/department/{Channel.objects.get(department_detail__department=dept).name}"
                     )
                     if has_channels
                     else None,
@@ -740,7 +740,7 @@ def test_content_file_serializer(settings, expected_types, has_channels):
                     "icon": topic.icon,
                     "parent": topic.parent,
                     "channel_url": frontend_absolute_url(
-                        f"/c/topic/{Channel.objects.get(topic_detail__topic=topic).name}/"
+                        f"/c/topic/{Channel.objects.get(topic_detail__topic=topic).name}"
                         if has_channels
                         else None,
                     )

From 0e31aa0a0541ccad6e0d7095de84af1145116c95 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham-quraish@users.noreply.github.com>
Date: Wed, 29 Jul 2026 13:55:30 +0500
Subject: [PATCH 02/12] fix: Show error message when a podcast episode fails to
 play (#3687)

* fix: Show error message when a podcast episode fails to play


---------

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.1.217>
---
 .../PodcastPage/AudioPlayer.styled.ts         |  34 ++
 .../PodcastPage/PodcastEmbedPlayer.test.tsx   |  63 ++++
 .../PodcastPage/PodcastEmbedPlayer.tsx        |  80 +++--
 .../PodcastPage/PodcastPlayer.test.tsx        | 297 ++++++++++++++++++
 .../app-pages/PodcastPage/PodcastPlayer.tsx   |  85 +++--
 .../app-pages/PodcastPage/useAudioPlayer.ts   | 120 ++++++-
 .../PodcastPage/usePlaybackRecovery.ts        |  90 ++++++
 7 files changed, 726 insertions(+), 43 deletions(-)
 create mode 100644 frontends/main/src/app-pages/PodcastPage/usePlaybackRecovery.ts

diff --git a/frontends/main/src/app-pages/PodcastPage/AudioPlayer.styled.ts b/frontends/main/src/app-pages/PodcastPage/AudioPlayer.styled.ts
index ee464ef660..0104f609fd 100644
--- a/frontends/main/src/app-pages/PodcastPage/AudioPlayer.styled.ts
+++ b/frontends/main/src/app-pages/PodcastPage/AudioPlayer.styled.ts
@@ -159,3 +159,37 @@ export const SpeedButton = styled.button(({ theme }) => ({
     color: theme.custom.colors.red,
   },
 }))
+
+/**
+ * Playback-failure message. Takes the progress row's grid area, replacing the
+ * seek slider — which has nothing to scrub — so the players report the failure
+ * without growing taller and pushing the fixed bar over the page content.
+ */
+export const PlaybackError = styled.div(({ theme }) => ({
+  gridArea: "progress",
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  minWidth: 0,
+  color: theme.custom.colors.red,
+  "& > svg": {
+    flexShrink: 0,
+    width: "20px",
+    height: "20px",
+  },
+}))
+
+export const PlaybackErrorText = styled(Typography)({
+  minWidth: 0,
+  // Bound the message at two lines: one fits the desktop bar, two fit the
+  // taller mobile layout, and neither can push the transport controls around.
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+})
+
+export const RetryButton = styled(SpeedButton)(({ theme }) => ({
+  borderColor: theme.custom.colors.red,
+  color: theme.custom.colors.red,
+}))
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.test.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.test.tsx
index 9de32b0ac2..ee2ac06ea3 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.test.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.test.tsx
@@ -308,6 +308,69 @@ describe("PodcastEmbedPlayer", () => {
     })
   })
 
+  describe("playback errors", () => {
+    const simulateMediaError = (audio: HTMLAudioElement, code: number) => {
+      Object.defineProperty(audio, "error", {
+        value: { code },
+        configurable: true,
+      })
+      fireEvent.error(audio)
+    }
+
+    test("shows a message when the source is rejected (e.g. HTTP 451)", async () => {
+      const { audio } = renderPlayer()
+      simulateMediaError(audio, 4) // MEDIA_ERR_SRC_NOT_SUPPORTED
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(
+        /unavailable in your region/i,
+      )
+    })
+
+    test("replaces the seek slider with the message", async () => {
+      const { audio } = renderPlayer()
+      expect(screen.getByRole("slider", { name: /seek/i })).toBeInTheDocument()
+
+      simulateMediaError(audio, 2)
+
+      await screen.findByRole("alert")
+      expect(
+        screen.queryByRole("slider", { name: /seek/i }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("reports missing audio for an episode with no audio_url", () => {
+      const resource = makeEpisode({
+        podcast_episode: {
+          ...makeEpisode().podcast_episode!,
+          audio_url: null as unknown as string,
+          episode_link: null,
+        },
+      })
+      renderPlayer(resource)
+
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        /audio isn't available for this episode/i,
+      )
+      expect(
+        screen.queryByRole("button", { name: /try again/i }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("Try again reloads the source and clears the message", async () => {
+      const { audio } = renderPlayer()
+      simulateMediaError(audio, 2)
+      await screen.findByRole("alert")
+
+      jest.clearAllMocks()
+      fireEvent.click(screen.getByRole("button", { name: /try again/i }))
+
+      expect(window.HTMLMediaElement.prototype.load).toHaveBeenCalled()
+      await waitFor(() =>
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument(),
+      )
+    })
+  })
+
   describe("no close button", () => {
     test("does not render a close button", () => {
       renderPlayer()
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.tsx
index c0d6097cfe..763dc413d2 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastEmbedPlayer.tsx
@@ -2,15 +2,18 @@
 
 import React from "react"
 import { styled } from "ol-components"
+import { VisuallyHidden } from "@mitodl/smoot-design"
 import {
   RiPlayCircleLine,
   RiPauseCircleLine,
   RiReplay10Line,
   RiForward30Line,
+  RiErrorWarningLine,
 } from "@remixicon/react"
 import type { LearningResource } from "api/v1"
 import { getEpisodeAudioUrl } from "./PodcastsListingPage/helpers"
 import { useAudioPlayer, formatClockTime } from "./useAudioPlayer"
+import { usePlaybackRecovery, RETRYING_STATUS } from "./usePlaybackRecovery"
 import {
   TrackInfo as TrackInfoBase,
   TrackTitle,
@@ -23,6 +26,9 @@ import {
   ProgressRange,
   TimeLabel,
   SpeedButton as SpeedButtonBase,
+  PlaybackError,
+  PlaybackErrorText,
+  RetryButton,
 } from "./AudioPlayer.styled"
 
 // ─── Styled components (card layout) ────────────────────────────────────────────
@@ -129,12 +135,23 @@ const PodcastEmbedPlayer: React.FC<PodcastEmbedPlayerProps> = ({
     duration,
     percent,
     speed,
+    error,
     togglePlay,
     skip,
     cycleSpeed,
     seek,
+    retry,
   } = useAudioPlayer(audioUrl)
 
+  const isPlayDisabled = isBuffering || isPlayPending || !hasAudioSource
+  const {
+    playButtonRef,
+    retryButtonRef,
+    onProgressFocus,
+    requestRetry,
+    isRetrying,
+  } = usePlaybackRecovery(error, retry, isPlayDisabled)
+
   const Wrapper = inline ? InlineWrapper : Shell
 
   return (
@@ -142,7 +159,19 @@ const PodcastEmbedPlayer: React.FC<PodcastEmbedPlayerProps> = ({
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} {...audioProps} />
 
-      <PlayerCard style={inline ? { maxWidth: "100%" } : undefined}>
+      <PlayerCard
+        style={inline ? { maxWidth: "100%" } : undefined}
+        aria-busy={isRetrying}
+      >
+        {/*
+          Mounted unconditionally, with only its text changing: a live region
+          added to the DOM at the same moment as its content is unreliably
+          announced.
+        */}
+        <VisuallyHidden aria-live="polite" aria-atomic="true">
+          {isRetrying ? RETRYING_STATUS : ""}
+        </VisuallyHidden>
+
         {resource.image?.url ? (
           <CoverArt
             src={resource.image.url}
@@ -168,6 +197,7 @@ const PodcastEmbedPlayer: React.FC<PodcastEmbedPlayerProps> = ({
           </IconButton>
 
           <PlayPauseButton
+            ref={playButtonRef}
             onClick={togglePlay}
             aria-label={
               !hasAudioSource
@@ -201,23 +231,37 @@ const PodcastEmbedPlayer: React.FC<PodcastEmbedPlayerProps> = ({
           </SpeedButton>
         </Controls>
 
-        <ProgressWrapper>
-          <TimeLabel variant="body3">{formatClockTime(currentTime)}</TimeLabel>
-          <ProgressRange
-            type="range"
-            min={0}
-            max={duration || 1}
-            value={currentTime}
-            step={1}
-            percent={percent}
-            trackHeight={8}
-            thumbSize={12}
-            aria-valuetext={formatClockTime(currentTime)}
-            aria-label="Seek"
-            onChange={(e) => seek(Number(e.target.value))}
-          />
-          <TimeLabel variant="body3">{formatClockTime(duration)}</TimeLabel>
-        </ProgressWrapper>
+        {error ? (
+          <PlaybackError role="alert">
+            <RiErrorWarningLine aria-hidden />
+            <PlaybackErrorText variant="body3">{error}</PlaybackErrorText>
+            {hasAudioSource ? (
+              <RetryButton ref={retryButtonRef} onClick={requestRetry}>
+                Try again
+              </RetryButton>
+            ) : null}
+          </PlaybackError>
+        ) : (
+          <ProgressWrapper onFocus={onProgressFocus}>
+            <TimeLabel variant="body3">
+              {formatClockTime(currentTime)}
+            </TimeLabel>
+            <ProgressRange
+              type="range"
+              min={0}
+              max={duration || 1}
+              value={currentTime}
+              step={1}
+              percent={percent}
+              trackHeight={8}
+              thumbSize={12}
+              aria-valuetext={formatClockTime(currentTime)}
+              aria-label="Seek"
+              onChange={(e) => seek(Number(e.target.value))}
+            />
+            <TimeLabel variant="body3">{formatClockTime(duration)}</TimeLabel>
+          </ProgressWrapper>
+        )}
       </PlayerCard>
     </Wrapper>
   )
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.test.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.test.tsx
index 896f7a96db..699d761807 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.test.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.test.tsx
@@ -303,6 +303,303 @@ describe("PodcastPlayer", () => {
     ).toBeDisabled()
   })
 
+  describe("playback errors", () => {
+    /**
+     * Fire an `error` event carrying a specific MediaError code, the way a
+     * browser does when the fetch or the decode fails.
+     */
+    const simulateMediaError = (audio: HTMLAudioElement, code: number) => {
+      Object.defineProperty(audio, "error", {
+        value: { code },
+        configurable: true,
+      })
+      fireEvent.error(audio)
+    }
+
+    /** Override `navigator.onLine`, which jsdom reports as `true` by default. */
+    const setOnLine = (value: boolean) => {
+      Object.defineProperty(window.navigator, "onLine", {
+        value,
+        configurable: true,
+      })
+    }
+
+    afterEach(() => setOnLine(true))
+
+    test("blames the connection, not the provider, when the device is offline", async () => {
+      const { audio } = await renderPlayer()
+      setOnLine(false)
+      // An offline request never reaches the network, so the browser reports
+      // the same code a geo-block does.
+      simulateMediaError(audio, 4) // MEDIA_ERR_SRC_NOT_SUPPORTED
+
+      const alert = await screen.findByRole("alert")
+      expect(alert).toHaveTextContent(/you appear to be offline/i)
+      expect(alert).not.toHaveTextContent(/region/i)
+    })
+
+    test("reports offline when play() rejects with no connection", async () => {
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockRejectedValue(
+        Object.assign(new Error("nope"), { name: "NotSupportedError" }),
+      )
+      setOnLine(false)
+
+      await renderPlayer()
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(
+        /you appear to be offline/i,
+      )
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockResolvedValue(
+        undefined,
+      )
+    })
+
+    test("shows a region-restriction message when the source is rejected (e.g. HTTP 451)", async () => {
+      const { audio } = await renderPlayer()
+      simulateMediaError(audio, 4) // MEDIA_ERR_SRC_NOT_SUPPORTED
+
+      const alert = await screen.findByRole("alert")
+      expect(alert).toHaveTextContent(/can't be played/i)
+      expect(alert).toHaveTextContent(/unavailable in your region/i)
+    })
+
+    test("shows a connection message on a network failure", async () => {
+      const { audio } = await renderPlayer()
+      simulateMediaError(audio, 2) // MEDIA_ERR_NETWORK
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(
+        /couldn't load this episode/i,
+      )
+    })
+
+    test("shows a damaged-file message when the audio cannot be decoded", async () => {
+      const { audio } = await renderPlayer()
+      simulateMediaError(audio, 3) // MEDIA_ERR_DECODE
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(/damaged/i)
+    })
+
+    test("ignores aborted loads, which are just track changes", async () => {
+      const { audio } = await renderPlayer()
+      simulateMediaError(audio, 1) // MEDIA_ERR_ABORTED
+
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+    })
+
+    test("replaces the seek slider with the message", async () => {
+      const { audio } = await renderPlayer()
+      expect(screen.getByRole("slider", { name: /seek/i })).toBeInTheDocument()
+
+      simulateMediaError(audio, 4)
+
+      await screen.findByRole("alert")
+      expect(
+        screen.queryByRole("slider", { name: /seek/i }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("reports missing audio without waiting for a failed load", async () => {
+      await renderPlayer(
+        makeTrack({ audioUrl: "" }),
+        {},
+        { waitForAutoPlay: false },
+      )
+
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        /audio isn't available for this episode/i,
+      )
+      // Nothing to re-fetch, so no retry is offered.
+      expect(
+        screen.queryByRole("button", { name: /try again/i }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("Try again reloads the source and plays", async () => {
+      const { audio } = await renderPlayer()
+      simulateMediaError(audio, 2)
+      await screen.findByRole("alert")
+
+      jest.clearAllMocks()
+      fireEvent.click(screen.getByRole("button", { name: /try again/i }))
+
+      expect(window.HTMLMediaElement.prototype.load).toHaveBeenCalled()
+      await waitFor(() =>
+        expect(window.HTMLMediaElement.prototype.play).toHaveBeenCalled(),
+      )
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+    })
+
+    describe("focus handoff", () => {
+      test("moves focus to Try again when the focused control is replaced", async () => {
+        const { audio, simulateCanPlay } = await renderPlayer()
+        await simulateCanPlay()
+
+        const slider = screen.getByRole("slider", { name: /seek/i })
+        slider.focus()
+        expect(slider).toHaveFocus()
+
+        simulateMediaError(audio, 4)
+
+        await waitFor(() =>
+          expect(
+            screen.getByRole("button", { name: /try again/i }),
+          ).toHaveFocus(),
+        )
+      })
+
+      test("returns focus to the play button after a successful retry", async () => {
+        const { audio, simulateCanPlay } = await renderPlayer()
+        simulateMediaError(audio, 2)
+
+        const retryButton = await screen.findByRole("button", {
+          name: /try again/i,
+        })
+        retryButton.focus()
+        fireEvent.click(retryButton)
+
+        // The reload leaves the play button disabled, so the handoff has to
+        // wait for it to become focusable again: first the buffering clears,
+        // then the play() promise settles.
+        simulateCanPlay()
+
+        await waitFor(() =>
+          expect(
+            screen.getByRole("button", { name: /^pause$/i }),
+          ).toHaveFocus(),
+        )
+      })
+
+      test("announces the retry while it is in flight", async () => {
+        const { audio, simulateCanPlay } = await renderPlayer()
+        simulateMediaError(audio, 2)
+
+        const retryButton = await screen.findByRole("button", {
+          name: /try again/i,
+        })
+        // The live region must already exist so the text change is announced.
+        const status = document.querySelector("[aria-live='polite']")
+        expect(status).toBeInTheDocument()
+        expect(status).toHaveTextContent("")
+
+        fireEvent.click(retryButton)
+
+        // The alert is gone and the button unmounted — this is the silent gap.
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+        expect(retryButton).not.toBeInTheDocument()
+        expect(status).toHaveTextContent(/retrying/i)
+        expect(document.querySelector("[aria-busy='true']")).toBeInTheDocument()
+
+        simulateCanPlay()
+
+        await waitFor(() => expect(status).toHaveTextContent(""))
+        expect(document.querySelector("[aria-busy='true']")).toBeNull()
+      })
+
+      test("stops announcing when the retry fails again", async () => {
+        const { audio } = await renderPlayer()
+        simulateMediaError(audio, 2)
+
+        fireEvent.click(
+          await screen.findByRole("button", { name: /try again/i }),
+        )
+        const status = document.querySelector("[aria-live='polite']")
+        expect(status).toHaveTextContent(/retrying/i)
+
+        // The reload fails too; the alert speaks for the outcome from here.
+        simulateMediaError(audio, 2)
+
+        await waitFor(() => expect(status).toHaveTextContent(""))
+        expect(await screen.findByRole("alert")).toBeInTheDocument()
+      })
+
+      test("says nothing when playback is healthy", async () => {
+        const { simulateCanPlay } = await renderPlayer()
+        await simulateCanPlay()
+
+        expect(
+          document.querySelector("[aria-live='polite']"),
+        ).toHaveTextContent("")
+        expect(document.querySelector("[aria-busy='true']")).toBeNull()
+      })
+
+      test("does not steal focus from elsewhere on the page", async () => {
+        const { audio, simulateCanPlay } = await renderPlayer()
+        await simulateCanPlay()
+
+        const closeButton = screen.getByRole("button", {
+          name: /close player/i,
+        })
+        closeButton.focus()
+
+        simulateMediaError(audio, 4)
+
+        await screen.findByRole("alert")
+        expect(closeButton).toHaveFocus()
+      })
+
+      test("leaves focus alone when the error arrives unattended", async () => {
+        const { audio } = await renderPlayer()
+        // Nothing in the player was focused — a mouse user scrolling the page.
+        expect(document.body).toHaveFocus()
+
+        simulateMediaError(audio, 4)
+
+        await screen.findByRole("alert")
+        expect(document.body).toHaveFocus()
+      })
+    })
+
+    test("clears the message when the track changes", async () => {
+      const { audio, rerender } = await renderPlayer()
+      simulateMediaError(audio, 4)
+      await screen.findByRole("alert")
+
+      rerender(
+        <ThemeProvider>
+          <PodcastPlayer
+            track={makeTrack({ audioUrl: "https://example.com/ep2.mp3" })}
+            onClose={jest.fn()}
+          />
+        </ThemeProvider>,
+      )
+
+      await waitFor(() =>
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument(),
+      )
+    })
+
+    test("stays silent when autoplay is blocked by browser policy", async () => {
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockRejectedValue(
+        Object.assign(new Error("blocked"), { name: "NotAllowedError" }),
+      )
+
+      await renderPlayer()
+
+      await waitFor(() =>
+        expect(window.HTMLMediaElement.prototype.play).toHaveBeenCalled(),
+      )
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockResolvedValue(
+        undefined,
+      )
+    })
+
+    test("reports a generic failure when play() rejects for another reason", async () => {
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockRejectedValue(
+        Object.assign(new Error("nope"), { name: "NotSupportedError" }),
+      )
+
+      await renderPlayer()
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(
+        /something went wrong playing this episode/i,
+      )
+      ;(window.HTMLMediaElement.prototype.play as jest.Mock).mockResolvedValue(
+        undefined,
+      )
+    })
+  })
+
   test("prevents duplicate play calls during rapid clicks while play is pending", async () => {
     const { simulateCanPlay } = await renderPlayer()
     await simulateCanPlay()
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
index 1758223d6d..edaf96be9b 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
@@ -2,14 +2,17 @@
 
 import React, { forwardRef, useImperativeHandle } from "react"
 import { styled } from "ol-components"
+import { VisuallyHidden } from "@mitodl/smoot-design"
 import {
   RiPlayCircleLine,
   RiPauseCircleLine,
   RiReplay10Line,
   RiForward30Line,
   RiCloseLine,
+  RiErrorWarningLine,
 } from "@remixicon/react"
 import { useAudioPlayer, formatClockTime } from "./useAudioPlayer"
+import { usePlaybackRecovery, RETRYING_STATUS } from "./usePlaybackRecovery"
 import {
   TrackInfo as TrackInfoBase,
   TrackTitle as TrackTitleBase,
@@ -22,6 +25,9 @@ import {
   ProgressRange,
   TimeLabel,
   SpeedButton as SpeedButtonBase,
+  PlaybackError,
+  PlaybackErrorText,
+  RetryButton,
 } from "./AudioPlayer.styled"
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -171,14 +177,25 @@ const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
       duration,
       percent,
       speed,
+      error,
       togglePlay,
       skip,
       cycleSpeed,
       seek,
       pause,
       resume,
+      retry,
     } = useAudioPlayer(track.audioUrl, { autoPlay: true, onPlayStateChange })
 
+    const isPlayDisabled = isBuffering || isPlayPending || !hasAudioSource
+    const {
+      playButtonRef,
+      retryButtonRef,
+      onProgressFocus,
+      requestRetry,
+      isRetrying,
+    } = usePlaybackRecovery(error, retry, isPlayDisabled)
+
     useImperativeHandle(ref, () => ({ pause, resume }), [pause, resume])
 
     const handleSeekKeyDown = (
@@ -195,7 +212,16 @@ const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
         <audio ref={audioRef} {...audioProps} />
 
-        <PlayerShell>
+        <PlayerShell aria-busy={isRetrying}>
+          {/*
+            Mounted unconditionally, with only its text changing: a live region
+            added to the DOM at the same moment as its content is unreliably
+            announced.
+          */}
+          <VisuallyHidden aria-live="polite" aria-atomic="true">
+            {isRetrying ? RETRYING_STATUS : ""}
+          </VisuallyHidden>
+
           <TrackInfo>
             <PodcastName variant="body1" sx={{ color: "text.secondary" }}>
               {track.podcastName}
@@ -215,6 +241,7 @@ const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
             </IconButton>
 
             <PlayPauseButton
+              ref={playButtonRef}
               buttonSize={64}
               mobileButtonSize={56}
               onClick={togglePlay}
@@ -227,7 +254,7 @@ const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
                       ? "Pause"
                       : "Play"
               }
-              disabled={isBuffering || isPlayPending || !hasAudioSource}
+              disabled={isPlayDisabled}
             >
               {isBuffering || isPlayPending ? (
                 <PlayerLoader loading size={40} color="inherit" />
@@ -247,27 +274,39 @@ const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
             </IconButton>
           </Controls>
 
-          <ProgressWrapper>
-            <TimeLabel variant="body3">
-              {formatClockTime(currentTime)}
-            </TimeLabel>
-            <ProgressRange
-              type="range"
-              min={0}
-              max={duration || 1}
-              value={currentTime}
-              step={1}
-              percent={percent}
-              aria-label="Seek"
-              onChange={(e) => seek(Number(e.target.value))}
-              onKeyDown={handleSeekKeyDown}
-            />
-            <TimeLabel variant="body3">{formatClockTime(duration)}</TimeLabel>
-
-            <SpeedButton onClick={cycleSpeed} aria-label="Playback speed">
-              {speed}x
-            </SpeedButton>
-          </ProgressWrapper>
+          {error ? (
+            <PlaybackError role="alert">
+              <RiErrorWarningLine aria-hidden />
+              <PlaybackErrorText variant="body3">{error}</PlaybackErrorText>
+              {hasAudioSource ? (
+                <RetryButton ref={retryButtonRef} onClick={requestRetry}>
+                  Try again
+                </RetryButton>
+              ) : null}
+            </PlaybackError>
+          ) : (
+            <ProgressWrapper onFocus={onProgressFocus}>
+              <TimeLabel variant="body3">
+                {formatClockTime(currentTime)}
+              </TimeLabel>
+              <ProgressRange
+                type="range"
+                min={0}
+                max={duration || 1}
+                value={currentTime}
+                step={1}
+                percent={percent}
+                aria-label="Seek"
+                onChange={(e) => seek(Number(e.target.value))}
+                onKeyDown={handleSeekKeyDown}
+              />
+              <TimeLabel variant="body3">{formatClockTime(duration)}</TimeLabel>
+
+              <SpeedButton onClick={cycleSpeed} aria-label="Playback speed">
+                {speed}x
+              </SpeedButton>
+            </ProgressWrapper>
+          )}
 
           {/* Close */}
           <CloseButton onClick={onClose} aria-label="Close player">
diff --git a/frontends/main/src/app-pages/PodcastPage/useAudioPlayer.ts b/frontends/main/src/app-pages/PodcastPage/useAudioPlayer.ts
index f25f554ab8..beedbeaec6 100644
--- a/frontends/main/src/app-pages/PodcastPage/useAudioPlayer.ts
+++ b/frontends/main/src/app-pages/PodcastPage/useAudioPlayer.ts
@@ -21,6 +21,76 @@ export const formatClockTime = (seconds: number): string => {
   return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`
 }
 
+/**
+ * User-facing messages for the ways playback can fail. Kept deliberately short:
+ * the fixed player bar renders them in place of the progress bar, where there
+ * is room for about two lines.
+ */
+export const PLAYBACK_ERROR_MESSAGES = {
+  /** The episode has no audio URL at all — nothing to fetch. */
+  noSource: "Audio isn't available for this episode.",
+  /** The device has no connection at all. */
+  offline: "You appear to be offline. Check your connection and try again.",
+  /** Transport failed part-way through (connection dropped, timeout). */
+  network:
+    "We couldn't load this episode. Check your connection and try again.",
+  /** The bytes arrived but aren't decodable audio. */
+  decode: "This episode's audio file is damaged and can't be played.",
+  /**
+   * The host refused or the response wasn't playable media. This is what a
+   * geo-block (HTTP 451), a 403/404, or a CORS rejection surfaces as, so the
+   * message names region restriction as the likely cause.
+   */
+  unavailable:
+    "This episode can't be played. It may be unavailable in your region.",
+  /** Playback failed for a reason the browser didn't classify. */
+  generic: "Something went wrong playing this episode.",
+} as const
+
+// MediaError codes. Spelled out as literals rather than read off the global
+// `MediaError` so this stays valid in environments that don't define it.
+const MEDIA_ERR_ABORTED = 1
+const MEDIA_ERR_NETWORK = 2
+const MEDIA_ERR_DECODE = 3
+const MEDIA_ERR_SRC_NOT_SUPPORTED = 4
+
+/**
+ * Whether the device has no connection. Only `false` from `navigator.onLine` is
+ * trustworthy — `true` means an interface is up, not that anything is
+ * reachable — which is exactly the direction we need.
+ */
+const isOffline = () =>
+  typeof navigator !== "undefined" && navigator.onLine === false
+
+/**
+ * Translate the `<audio>` element's error into a message, or `null` when the
+ * failure isn't worth surfacing. Aborts are ignored: they are what a track
+ * change or a fresh `load()` looks like, not a problem the user caused or can
+ * act on.
+ *
+ * Connectivity is checked before the error code. A request that never reaches
+ * the network is reported as `MEDIA_ERR_SRC_NOT_SUPPORTED` — the same code a
+ * geo-block produces — because the browser only knows it received nothing
+ * playable, not why. Blaming the provider when the device is plainly offline
+ * sends the user chasing the wrong problem.
+ */
+const messageForMediaError = (
+  mediaError: MediaError | null | undefined,
+): string | null => {
+  if (mediaError?.code === MEDIA_ERR_ABORTED) return null
+  if (isOffline()) return PLAYBACK_ERROR_MESSAGES.offline
+  switch (mediaError?.code) {
+    case MEDIA_ERR_NETWORK:
+      return PLAYBACK_ERROR_MESSAGES.network
+    case MEDIA_ERR_DECODE:
+      return PLAYBACK_ERROR_MESSAGES.decode
+    case MEDIA_ERR_SRC_NOT_SUPPORTED:
+      return PLAYBACK_ERROR_MESSAGES.unavailable
+    default:
+      return PLAYBACK_ERROR_MESSAGES.generic
+  }
+}
+
 type UseAudioPlayerOptions = {
   /** Start playing as soon as a track loads (the fixed player bar). */
   autoPlay?: boolean
@@ -49,6 +119,7 @@ export const useAudioPlayer = (
   const [duration, setDuration] = useState(0)
   const [speedIndex, setSpeedIndex] = useState(1) // default 1x
   const speedIndexRef = useRef(1)
+  const [loadError, setLoadError] = useState<string | null>(null)
 
   const startPlayback = useCallback(async () => {
     if (!hasAudioSource || isPlayPendingRef.current) return
@@ -66,9 +137,21 @@ export const useAudioPlayer = (
       if (playAttemptIdRef.current === attemptId) {
         setIsPlaying(true)
       }
-    } catch {
+    } catch (err) {
       if (playAttemptIdRef.current === attemptId) {
         setIsPlaying(false)
+        const name = (err as DOMException | undefined)?.name
+        // NotAllowedError is the browser's autoplay policy, not a fault: the
+        // user only needs to press play. AbortError means a newer load()
+        // superseded this attempt. Neither is worth a message.
+        if (name !== "NotAllowedError" && name !== "AbortError") {
+          // Keep any message the `error` event already produced — it names the
+          // specific cause, where this fallback can only guess.
+          const fallback = isOffline()
+            ? PLAYBACK_ERROR_MESSAGES.offline
+            : PLAYBACK_ERROR_MESSAGES.generic
+          setLoadError((current) => current ?? fallback)
+        }
       }
     } finally {
       if (playAttemptIdRef.current === attemptId) {
@@ -89,6 +172,9 @@ export const useAudioPlayer = (
     setDuration(0)
     setIsPlaying(false)
     setIsBuffering(autoPlay && hasAudioSource)
+    // A new track gets a clean slate: the previous track's failure says nothing
+    // about this one.
+    setLoadError(null)
 
     if (!hasAudioSource) return
 
@@ -115,17 +201,37 @@ export const useAudioPlayer = (
     void startPlayback()
   }, [startPlayback])
 
+  /**
+   * Re-fetch the current track and try again after a failure. A plain `play()`
+   * would not do: once the element has errored it stays in that state until the
+   * resource is reloaded.
+   */
+  const retry = useCallback(() => {
+    const audio = audioRef.current
+    if (!audio || !hasAudioSource) return
+    setLoadError(null)
+    setIsBuffering(true)
+    audio.load()
+    void startPlayback()
+  }, [hasAudioSource, startPlayback])
+
   const togglePlay = useCallback(() => {
     if (!hasAudioSource) return
     const audio = audioRef.current
     if (!audio) return
+    // After a failure the play button acts as a second retry affordance, so
+    // pressing it does the same reload the "Try again" button does.
+    if (loadError) {
+      retry()
+      return
+    }
     if (isPlaying) {
       audio.pause()
       setIsPlaying(false)
     } else {
       void startPlayback()
     }
-  }, [hasAudioSource, isPlaying, startPlayback])
+  }, [hasAudioSource, isPlaying, startPlayback, loadError, retry])
 
   const skip = useCallback(
     (seconds: number) => {
@@ -157,6 +263,11 @@ export const useAudioPlayer = (
 
   const percent = duration ? (currentTime / duration) * 100 : 0
 
+  // A missing URL is reported the same way a failed fetch is — from the
+  // listener's point of view the episode simply won't play — but it is derived
+  // rather than stored, since no load is ever attempted.
+  const error = hasAudioSource ? loadError : PLAYBACK_ERROR_MESSAGES.noSource
+
   /** Props to spread onto `<audio ref={audioRef} {...audioProps} />`. */
   const audioProps = {
     src: hasAudioSource ? audioUrl : undefined,
@@ -165,6 +276,8 @@ export const useAudioPlayer = (
     onError: () => {
       setIsBuffering(false)
       setIsPlaying(false)
+      const message = messageForMediaError(audioRef.current?.error)
+      if (message) setLoadError(message)
     },
     onTimeUpdate: () => setCurrentTime(audioRef.current?.currentTime ?? 0),
     onLoadedMetadata: () => setDuration(audioRef.current?.duration ?? 0),
@@ -182,11 +295,14 @@ export const useAudioPlayer = (
     duration,
     percent,
     speed: SPEED_OPTIONS[speedIndex],
+    /** A user-facing failure message, or `null` while playback is healthy. */
+    error,
     togglePlay,
     skip,
     cycleSpeed,
     seek,
     pause,
     resume,
+    retry,
   }
 }
diff --git a/frontends/main/src/app-pages/PodcastPage/usePlaybackRecovery.ts b/frontends/main/src/app-pages/PodcastPage/usePlaybackRecovery.ts
new file mode 100644
index 0000000000..87a9e96507
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/usePlaybackRecovery.ts
@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+/** Announced while a retry is in flight. */
+export const RETRYING_STATUS = "Retrying…"
+
+/** Focus has been dropped to nowhere, rather than moved somewhere deliberate. */
+const focusWasDropped = () => {
+  if (typeof document === "undefined") return false
+  const active = document.activeElement
+  return active === null || active === document.body
+}
+
+/**
+ * Owns what happens around a playback retry, which is otherwise imperceptible
+ * without sight.
+ *
+ * **Focus.** The players swap the progress row for the error message and back.
+ * Either direction unmounts the control the user was on, sending focus to
+ * `<body>` — from there a keyboard user has to tab in from the top of the page,
+ * and a screen reader loses its place. Both handoffs are conditional on focus
+ * having *actually* been lost: if the user has since moved elsewhere, pulling
+ * focus back would be more disruptive than the problem being fixed.
+ *
+ * **Announcement.** Pressing "Try again" clears the error, so the alert
+ * disappears and the button unmounts while the reload is still in flight. That
+ * leaves a silent gap, which `isRetrying` fills via a polite live region. Only
+ * this gap is announced — the outcome already is: success moves focus to the
+ * play button, and failure re-renders the alert.
+ *
+ * @param error the current playback error, or `null` while healthy
+ * @param retry the audio hook's retry action, wrapped as `requestRetry`
+ * @param isPlayDisabled whether the play/pause button currently rejects focus
+ */
+export const usePlaybackRecovery = (
+  error: string | null,
+  retry: () => void,
+  isPlayDisabled: boolean,
+) => {
+  const playButtonRef = useRef<HTMLButtonElement>(null)
+  const retryButtonRef = useRef<HTMLButtonElement>(null)
+  // Was the user on one of the controls the error message replaces?
+  const hadProgressFocusRef = useRef(false)
+  // Did the user ask for this recovery, rather than it arriving on its own?
+  const retryPendingRef = useRef(false)
+  const [isRetrying, setIsRetrying] = useState(false)
+
+  /** Spread onto the progress row so we know when focus is inside it. */
+  const onProgressFocus = useCallback(() => {
+    hadProgressFocusRef.current = true
+  }, [])
+
+  /** Use in place of `retry` so focus and announcements follow the recovery. */
+  const requestRetry = useCallback(() => {
+    retryPendingRef.current = true
+    setIsRetrying(true)
+    retry()
+  }, [retry])
+
+  useEffect(() => {
+    if (error) {
+      // The progress controls just unmounted, or a retry failed and put the
+      // message back. Either way, offer the retry button as the landing spot.
+      const shouldLand =
+        (hadProgressFocusRef.current || retryPendingRef.current) &&
+        focusWasDropped()
+      hadProgressFocusRef.current = false
+      retryPendingRef.current = false
+      setIsRetrying(false)
+      if (shouldLand) retryButtonRef.current?.focus()
+      return
+    }
+
+    if (!retryPendingRef.current) return
+    // Recovery reloads the source, so the play button is briefly disabled and
+    // cannot take focus. Hold the handoff — and the "retrying" status — until
+    // the player is actually ready again.
+    if (isPlayDisabled) return
+    retryPendingRef.current = false
+    setIsRetrying(false)
+    if (focusWasDropped()) playButtonRef.current?.focus()
+  }, [error, isPlayDisabled])
+
+  return {
+    playButtonRef,
+    retryButtonRef,
+    onProgressFocus,
+    requestRetry,
+    isRetrying,
+  }
+}

From 0b79698feb852009063395e63f45f918c3e14d30 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <daniellerichard1@gmail.com>
Date: Wed, 29 Jul 2026 09:31:38 -0400
Subject: [PATCH 03/12] fix garbled non-Latin characters in certificate PDFs
 (#3685)

---
 .../[certificateType]/[uuid]/pdf/route.tsx    | 83 ++++++++++++++++---
 1 file changed, 71 insertions(+), 12 deletions(-)

diff --git a/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx
index 4aa72718ad..4674d2f44d 100644
--- a/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx
+++ b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx
@@ -50,6 +50,65 @@ Font.register({
   src: "https://use.typekit.net/af/305037/00000000000000007735bb39/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3",
 })
 
+/* Fallback fonts for non-Latin characters (hq#12554, hq#12475).
+ * Neue Haas Grotesk is a Latin-only typeface, and @react-pdf/renderer performs
+ * no automatic system-font fallback the way a browser does. Without these,
+ * user-supplied text with glyphs outside Neue Haas Grotesk's set — CJK names
+ * (e.g. 志云 黄) and extended-Latin letters (e.g. Turkish Ğ) — renders garbled.
+ *
+ * Noto Sans (latin-ext) covers extended-Latin; Noto Sans SC / TC cover
+ * Simplified / Traditional Chinese. They are only ever *used* for characters
+ * the brand font can't render (react-pdf falls back per-character), so branded
+ * text stays in Neue Haas Grotesk. Served from a version-pinned CDN, matching
+ * the remote-font approach already used above for the brand font.
+ *
+ * Note: this only affects the PDF/print output — the live web page is unaffected
+ * (it uses its own font stack with the browser's built-in fallback).
+ */
+const FONTSOURCE_CDN = "https://cdn.jsdelivr.net/fontsource/fonts"
+Font.register({
+  family: "Noto Sans 400",
+  src: `${FONTSOURCE_CDN}/noto-sans@5.3.0/latin-ext-400-normal.ttf`,
+})
+Font.register({
+  family: "Noto Sans 700",
+  src: `${FONTSOURCE_CDN}/noto-sans@5.3.0/latin-ext-700-normal.ttf`,
+})
+Font.register({
+  family: "Noto Sans SC 400",
+  src: `${FONTSOURCE_CDN}/noto-sans-sc@5.3.0/chinese-simplified-400-normal.ttf`,
+})
+Font.register({
+  family: "Noto Sans SC 700",
+  src: `${FONTSOURCE_CDN}/noto-sans-sc@5.3.0/chinese-simplified-700-normal.ttf`,
+})
+Font.register({
+  family: "Noto Sans TC 400",
+  src: `${FONTSOURCE_CDN}/noto-sans-tc@5.3.0/chinese-traditional-400-normal.ttf`,
+})
+Font.register({
+  family: "Noto Sans TC 700",
+  src: `${FONTSOURCE_CDN}/noto-sans-tc@5.3.0/chinese-traditional-700-normal.ttf`,
+})
+
+/* Font-family stacks: brand font first, then fallbacks for glyphs it lacks.
+ * Use these instead of the bare "Neue Haas Grotesk Text NNN" strings so every
+ * text element gets per-character fallback. Only the 400 and 700 weights are
+ * used on the certificate.
+ */
+const FONT_STACK_400 = [
+  "Neue Haas Grotesk Text 400",
+  "Noto Sans 400",
+  "Noto Sans SC 400",
+  "Noto Sans TC 400",
+]
+const FONT_STACK_700 = [
+  "Neue Haas Grotesk Text 700",
+  "Noto Sans 700",
+  "Noto Sans SC 700",
+  "Noto Sans TC 700",
+]
+
 // Disables hyphenation on word wrap
 Font.registerHyphenationCallback((word) => [word])
 
@@ -68,27 +127,27 @@ const colors = {
  */
 const typography = {
   h1: {
-    fontFamily: "Neue Haas Grotesk Text 700",
+    fontFamily: FONT_STACK_700,
     fontSize: pxToPt(52),
     lineHeight: pxToPt(60),
   },
   h2: {
-    fontFamily: "Neue Haas Grotesk Text 700",
+    fontFamily: FONT_STACK_700,
     fontSize: pxToPt(34),
     lineHeight: pxToPt(40),
   },
   h3: {
-    fontFamily: "Neue Haas Grotesk Text 700",
+    fontFamily: FONT_STACK_700,
     fontSize: pxToPt(28),
     lineHeight: pxToPt(2.4),
   },
   h4: {
-    fontFamily: "Neue Haas Grotesk Text 700",
+    fontFamily: FONT_STACK_700,
     fontSize: pxToPt(24),
     lineHeight: pxToPt(2),
   },
   body1: {
-    fontFamily: "Neue Haas Grotesk Text 400",
+    fontFamily: FONT_STACK_400,
     fontSize: pxToPt(16),
     lineHeight: pxToPt(2),
   },
@@ -171,7 +230,7 @@ const Badge = ({ programType }: { programType?: string | null }) => {
   const { fontSizePx, lineHeightPx, registeredMarkScale } =
     getCertificateBadgeTypography(programType)
   const badgeStyle = {
-    fontFamily: "Neue Haas Grotesk Text 700",
+    fontFamily: FONT_STACK_700,
     fontSize: pxToPt(fontSizePx),
     lineHeight: pxToPt(lineHeightPx),
   }
@@ -302,7 +361,7 @@ const CertificateDoc = ({
             border: `${pxToPt(4)} solid ${colors.silverGray}`,
             padding: pxToPt(24),
             backgroundColor: colors.white,
-            fontFamily: "Neue Haas Grotesk Text 400",
+            fontFamily: FONT_STACK_400,
           }}
         >
           <View
@@ -326,7 +385,7 @@ const CertificateDoc = ({
                 top: pxToPt(164),
                 left: pxToPt(46),
                 ...typography.h4,
-                fontFamily: "Neue Haas Grotesk Text 400",
+                fontFamily: FONT_STACK_400,
               }}
             >
               This is to certify that
@@ -351,7 +410,7 @@ const CertificateDoc = ({
                 color: colors.silverGrayDark,
                 ...typography.h4,
                 fontSize: pxToPt(20),
-                fontFamily: "Neue Haas Grotesk Text 400",
+                fontFamily: FONT_STACK_400,
               }}
             >
               has successfully completed all requirements of{" "}
@@ -362,7 +421,7 @@ const CertificateDoc = ({
                 top: pxToPt(396),
                 left: pxToPt(46),
                 ...typography.h2,
-                fontFamily: "Neue Haas Grotesk Text 700",
+                fontFamily: FONT_STACK_700,
                 color: colors.black,
                 width: pxToPt(1150),
               }}
@@ -377,7 +436,7 @@ const CertificateDoc = ({
                   left: pxToPt(46),
                   color: colors.silverGrayDark,
                   ...typography.h4,
-                  fontFamily: "Neue Haas Grotesk Text 400",
+                  fontFamily: FONT_STACK_400,
                 }}
               >
                 {moment(issueDate).format("MMM D, YYYY")}
@@ -391,7 +450,7 @@ const CertificateDoc = ({
                   left: pxToPt(46),
                   ...typography.h4,
                   color: colors.silverGrayDark,
-                  fontFamily: "Neue Haas Grotesk Text 400",
+                  fontFamily: FONT_STACK_400,
                 }}
               >
                 Awarded {ceus} Continuing Education Units (CEUs)

From 6bc804040963e7f555686903c2d4cb2e3c6ce54c Mon Sep 17 00:00:00 2001
From: Nathan Levesque <rhysyngsun@users.noreply.github.com>
Date: Wed, 29 Jul 2026 09:52:29 -0400
Subject: [PATCH 04/12] Fix oasdiff comment for large diffs (#3694)

Write the comment body to a file and post via body-path instead of
inlining it into the body: field, mirroring mitodl/mitxonline#3796.
A large body inlined into the JS action's body: input becomes a huge
INPUT_BODY env var that can exceed the OS argv+envp size limit.

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
---
 .github/workflows/openapi-diff.yml | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/openapi-diff.yml b/.github/workflows/openapi-diff.yml
index 61e215269c..cbb7770a22 100644
--- a/.github/workflows/openapi-diff.yml
+++ b/.github/workflows/openapi-diff.yml
@@ -26,6 +26,15 @@ jobs:
             'head/openapi/specs/*.yaml' \
             | head -1)
           echo "summary=$SUMMARY" >> $GITHUB_OUTPUT
+          {
+            echo "## OpenAPI Changes"
+            echo ""
+            echo "${SUMMARY:-No detectable change.}"
+            echo ""
+            echo "[View full changelog](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})"
+            echo ""
+            echo "Unexpected changes? Ensure your branch is up-to-date with \`main\` (consider rebasing)."
+          } > comment_body.md
       - name: Find existing comment
         id: find_comment
         uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4
@@ -44,14 +53,7 @@ jobs:
           repository: ${{ github.repository }}
           issue-number: ${{ github.event.pull_request.number }}
           comment-id: ${{ steps.find_comment.outputs.comment-id }}
-          body: |
-            ## OpenAPI Changes
-
-            ${{ steps.oasdif_changelog.outputs.summary || 'No detectable change.' }}
-
-            [View full changelog](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})
-
-            Unexpected changes? Ensure your branch is up-to-date with `main` (consider rebasing).
+          body-path: comment_body.md
       - name: Check for breaking changes
         id: oasdif_breaking
         run: |

From 0f86aa816eb7f29ea4a830c665a89196a51ec8f2 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 29 Jul 2026 10:04:30 -0400
Subject: [PATCH 05/12] Identify posthog persons by keycloak global_id, not
 django pk (#3693)

* feat: identify posthog persons by keycloak global_id, not django pk

This posthog project is shared with other MIT applications, and mitxpro
identifies people by its own integer user ids, so Learn user N and xPro
user N are currently the same posthog person.

Switches both places this app names a person -- the frontend identify()
call and the server-side account_created event -- to the Keycloak
global_id. Users with no global_id are left unidentified rather than
falling back to the pk.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* test: use renderWithProviders in the posthog identifier test

Per review feedback. Omits the `user` option so the user still arrives via
the mocked request rather than a pre-seeded query cache, keeping the
pending-then-resolved sequence the app actually goes through.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../ConfiguredPostHogProvider.test.tsx        | 38 ++++++++++++-------
 .../ConfiguredPostHogProvider.tsx             | 13 ++++++-
 main/features.py                              |  9 +++--
 main/middleware/apisix_user.py                |  5 ++-
 main/middleware/apisix_user_test.py           |  7 +++-
 5 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.test.tsx b/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.test.tsx
index 84212c3290..ab3e603507 100644
--- a/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.test.tsx
+++ b/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.test.tsx
@@ -1,13 +1,12 @@
 import React from "react"
 
-import { render, waitFor } from "@testing-library/react"
+import { waitFor } from "@testing-library/react"
 import { PosthogIdentifier } from "./ConfiguredPostHogProvider"
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
+import { renderWithProviders } from "@/test-utils"
 
 // mock stuff
-import { setMockResponse, urls } from "api/test-utils"
+import { setMockResponse, urls, factories } from "api/test-utils"
 import type { User } from "api/hooks/user"
-import { makeUserSettings } from "@/test-utils/factories"
 import { usePostHog } from "posthog-js/react"
 import type { PostHog } from "posthog-js"
 
@@ -28,15 +27,15 @@ const mockPosthog = jest.mocked(posthog)
 
 describe("PosthogIdentifier", () => {
   const setup = (user: Partial<User>) => {
-    const queryClient = new QueryClient()
-    const userData = makeUserSettings(user)
+    const userData = factories.user.user(user)
 
     setMockResponse.get(urls.userMe.get(), userData)
-    render(
-      <QueryClientProvider client={queryClient}>
-        <PosthogIdentifier />
-      </QueryClientProvider>,
-    )
+    /**
+     * No `user` option: we want the user to arrive via the mocked request, so
+     * that the effect runs on a pending-then-resolved query as it does in the
+     * app, rather than on a pre-seeded cache.
+     */
+    renderWithProviders(<PosthogIdentifier />)
     return userData
   }
   test.each([
@@ -55,11 +54,24 @@ describe("PosthogIdentifier", () => {
     },
   )
 
-  test("If authenticated, calls `identify` with user id and username", async () => {
+  test("If authenticated, calls `identify` with the user's global id", async () => {
     const user = setup({ is_authenticated: true })
     await waitFor(() => {
-      expect(mockPosthog.identify).toHaveBeenCalledWith(String(user.id))
+      expect(mockPosthog.identify).toHaveBeenCalledExactlyOnceWith(
+        user.global_id,
+      )
     })
     expect(mockPosthog.reset).not.toHaveBeenCalled()
   })
+
+  test("If authenticated with no global id, neither identifies nor resets", async () => {
+    // Not "anonymous", so a fall-through to the reset branch would be visible.
+    mockPosthog.get_property.mockReturnValue("identified")
+    setup({ is_authenticated: true, global_id: null })
+    await waitFor(() => {
+      expect(mockPosthog.get_property).toHaveBeenCalledWith("$user_state")
+    })
+    expect(mockPosthog.identify).not.toHaveBeenCalled()
+    expect(mockPosthog.reset).not.toHaveBeenCalled()
+  })
 })
diff --git a/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.tsx b/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.tsx
index a866ce989c..3104f22b1d 100644
--- a/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.tsx
+++ b/frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.tsx
@@ -47,8 +47,17 @@ const PosthogIdentifier = () => {
   useEffect(() => {
     if (!user) return
     const anonymous = posthog.get_property("$user_state") === "anonymous"
-    if (user.is_authenticated && user.id) {
-      posthog.identify(String(user.id))
+    if (user.is_authenticated) {
+      /**
+       * Identify by the Keycloak global id rather than our Django user id.
+       * This posthog project is shared with other MIT applications, and
+       * mitxpro identifies people by its own integer user ids, so integer ids
+       * collide across applications. Users with no global id are left
+       * unidentified rather than identified by a colliding id.
+       */
+      if (user.global_id) {
+        posthog.identify(user.global_id)
+      }
     } else if (!anonymous) {
       posthog.reset()
     }
diff --git a/main/features.py b/main/features.py
index bc54456c72..e42a84d48f 100644
--- a/main/features.py
+++ b/main/features.py
@@ -109,10 +109,11 @@ def is_enabled(
         default (bool): default value if not set in settings
         unique_id (str):
             person identifier passed back to posthog which is the display value for
-            person. I recommend this be user.id for logged-in users to allow for
-            more readable user flags as well as more clear troubleshooting. For
-            anonymous users, a persistent ID will help with troubleshooting and tracking
-            efforts.
+            person. For logged-in users this should be the Keycloak global id
+            (user.global_id): this posthog project is shared with other MIT
+            applications that use their own integer user ids, so a Django pk
+            would collide across applications. For anonymous users, a persistent
+            ID will help with troubleshooting and tracking efforts.
 
     Returns:
         bool: True if the feature flag is enabled
diff --git a/main/middleware/apisix_user.py b/main/middleware/apisix_user.py
index 21bb41d70b..df8a42181b 100644
--- a/main/middleware/apisix_user.py
+++ b/main/middleware/apisix_user.py
@@ -173,8 +173,11 @@ def get_user_from_apisix_headers(  # noqa: C901
             posthog = Posthog(
                 settings.POSTHOG_PROJECT_API_KEY, host=settings.POSTHOG_API_HOST
             )
+            # Identify by global_id, not user.id: this posthog project is
+            # shared with other MIT applications that use their own integer
+            # user ids, so integer ids collide across applications.
             posthog.capture(
-                user.id,
+                global_id,
                 event=PostHogEvents.ACCOUNT_CREATED.value,
                 properties={
                     "$current_url": request.build_absolute_uri(),
diff --git a/main/middleware/apisix_user_test.py b/main/middleware/apisix_user_test.py
index 71d15ebeac..ac32fda7b9 100644
--- a/main/middleware/apisix_user_test.py
+++ b/main/middleware/apisix_user_test.py
@@ -10,6 +10,7 @@
 from django.contrib.auth.models import AnonymousUser
 from django.db import close_old_connections
 
+from main.constants import PostHogEvents
 from main.factories import UserFactory
 from main.middleware.apisix_user import ApisixUserMiddleware
 
@@ -74,7 +75,11 @@ def test_get_request(mocker, mock_login, settings):
     assert user.profile.email_optin == apisix_user_info["emailOptIn"]
     assert user.global_id == apisix_user_info["sub"]
     mock_posthog_cls.assert_called_once()
-    mock_posthog_cls.return_value.capture.assert_called_once()
+    mock_posthog_cls.return_value.capture.assert_called_once_with(
+        apisix_user_info["sub"],
+        event=PostHogEvents.ACCOUNT_CREATED.value,
+        properties=mocker.ANY,
+    )
 
 
 @pytest.mark.django_db(transaction=True)

From e08020fdd7e970928b706e0ff9cd8b3817a2290d Mon Sep 17 00:00:00 2001
From: Anastasia Beglova <abeglova@mit.edu>
Date: Wed, 29 Jul 2026 10:45:50 -0400
Subject: [PATCH 06/12] add ocw topic to search (#3692)

---
 learning_resources_search/api_test.py  | 16 ++++++++++++++++
 learning_resources_search/constants.py |  6 +++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/learning_resources_search/api_test.py b/learning_resources_search/api_test.py
index 85d977586d..4db0d93692 100644
--- a/learning_resources_search/api_test.py
+++ b/learning_resources_search/api_test.py
@@ -213,6 +213,7 @@ def test_generate_learning_resources_text_clause(
                                                 "readable_id",
                                                 "offered_by",
                                                 "course_feature",
+                                                "ocw_topics.english",
                                                 "video.transcript.english",
                                             ],
                                             **extra_params,
@@ -362,6 +363,7 @@ def test_generate_learning_resources_text_clause(
                             "readable_id",
                             "offered_by",
                             "course_feature",
+                            "ocw_topics.english",
                             "video.transcript.english",
                         ],
                         **extra_params,
@@ -532,6 +534,7 @@ def test_generate_learning_resources_text_clause(
                                                 "readable_id",
                                                 "offered_by",
                                                 "course_feature",
+                                                "ocw_topics.english",
                                                 "video.transcript.english",
                                             ],
                                         }
@@ -672,6 +675,7 @@ def test_generate_learning_resources_text_clause(
                             "readable_id",
                             "offered_by",
                             "course_feature",
+                            "ocw_topics.english",
                             "video.transcript.english",
                         ],
                     }
@@ -854,6 +858,7 @@ def test_generate_learning_resources_text_clause_with_min_score():
                                                         "readable_id",
                                                         "offered_by",
                                                         "course_feature",
+                                                        "ocw_topics.english",
                                                         "video.transcript.english",
                                                     ],
                                                     "type": "phrase",
@@ -1035,6 +1040,7 @@ def test_generate_learning_resources_text_clause_with_min_score():
                             "readable_id",
                             "offered_by",
                             "course_feature",
+                            "ocw_topics.english",
                             "video.transcript.english",
                         ],
                         "type": "phrase",
@@ -1210,6 +1216,7 @@ def test_generate_learning_resources_text_clause_with_min_score():
                                                         "readable_id",
                                                         "offered_by",
                                                         "course_feature",
+                                                        "ocw_topics.english",
                                                         "video.transcript.english",
                                                     ],
                                                 }
@@ -1371,6 +1378,7 @@ def test_generate_learning_resources_text_clause_with_min_score():
                             "readable_id",
                             "offered_by",
                             "course_feature",
+                            "ocw_topics.english",
                             "video.transcript.english",
                         ],
                     }
@@ -1995,6 +2003,7 @@ def test_execute_learn_search_for_learning_resource_query(settings, opensearch):
                                                                     "readable_id",
                                                                     "offered_by",
                                                                     "course_feature",
+                                                                    "ocw_topics.english",
                                                                     "video.transcript.english",
                                                                 ],
                                                                 "type": "best_fields",
@@ -2166,6 +2175,7 @@ def test_execute_learn_search_for_learning_resource_query(settings, opensearch):
                                             "readable_id",
                                             "offered_by",
                                             "course_feature",
+                                            "ocw_topics.english",
                                             "video.transcript.english",
                                         ],
                                         "type": "best_fields",
@@ -2633,6 +2643,7 @@ def test_execute_learn_search_with_script_score(
                                                                             "readable_id",
                                                                             "offered_by",
                                                                             "course_feature",
+                                                                            "ocw_topics.english",
                                                                             "video.transcript.english",
                                                                         ],
                                                                         "type": "phrase",
@@ -2804,6 +2815,7 @@ def test_execute_learn_search_with_script_score(
                                                     "readable_id",
                                                     "offered_by",
                                                     "course_feature",
+                                                    "ocw_topics.english",
                                                     "video.transcript.english",
                                                 ],
                                                 "type": "phrase",
@@ -3179,6 +3191,7 @@ def test_execute_learn_search_with_hybrid_search(mocker, settings, opensearch):
                                                                             "readable_id",
                                                                             "offered_by",
                                                                             "course_feature",
+                                                                            "ocw_topics.english",
                                                                             "video.transcript.english",
                                                                         ],
                                                                         "type": "best_fields",
@@ -3349,6 +3362,7 @@ def test_execute_learn_search_with_hybrid_search(mocker, settings, opensearch):
                                                         "readable_id",
                                                         "offered_by",
                                                         "course_feature",
+                                                        "ocw_topics.english",
                                                         "video.transcript.english",
                                                     ],
                                                     "type": "best_fields",
@@ -3647,6 +3661,7 @@ def test_execute_learn_search_with_min_score(mocker, settings, opensearch):
                                                                             "readable_id",
                                                                             "offered_by",
                                                                             "course_feature",
+                                                                            "ocw_topics.english",
                                                                             "video.transcript.english",
                                                                         ],
                                                                         "type": "best_fields",
@@ -3821,6 +3836,7 @@ def test_execute_learn_search_with_min_score(mocker, settings, opensearch):
                                             "readable_id",
                                             "offered_by",
                                             "course_feature",
+                                            "ocw_topics.english",
                                             "video.transcript.english",
                                         ],
                                         "type": "best_fields",
diff --git a/learning_resources_search/constants.py b/learning_resources_search/constants.py
index 23b27fe0b3..dd6a1a535e 100644
--- a/learning_resources_search/constants.py
+++ b/learning_resources_search/constants.py
@@ -211,7 +211,10 @@ class FilterConfig:
             "channel_url": {"type": "keyword"},
         },
     },
-    "ocw_topics": {"type": "keyword"},
+    "ocw_topics": {
+        "type": "keyword",
+        "fields": {"english": {"type": "text", "analyzer": "custom_english"}},
+    },
     "offered_by": {
         "type": "nested",
         "properties": {
@@ -420,6 +423,7 @@ class FilterConfig:
     "readable_id",
     "offered_by",
     "course_feature",
+    "ocw_topics.english",
     "video.transcript.english",
 ]
 

From 254f6c3b3bd99e89d2159a1196556c8b72e584dc Mon Sep 17 00:00:00 2001
From: Tobias Macey <tmacey@mit.edu>
Date: Wed, 29 Jul 2026 11:00:09 -0400
Subject: [PATCH 07/12] Defer AI library imports to reduce process startup cost
 (#3683)

* Defer AI library imports to avoid eager-loading on every process

litellm, langchain_litellm, tiktoken, opendataloader_pdf/cv2, and
langchain_text_splitters were imported at module scope in tasks.py,
etl/utils.py, and vector_search/utils.py. Those modules sit on the
import chain for ordinary web request handling (views.py,
learning_resources_search/api.py, vector_search/views.py), so every
Django process paid the import cost even though the majority of
code-paths never touch summarization, PDF-to-markdown conversion, or
embedding chunking.

Move each import to its single call site instead. Python's root
logger config still captures these libraries' logs once they're
actually used, since logger creation doesn't depend on import timing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Defer remaining eager AI-library imports, fix litellm.drop_params ordering

vector_search/encoders/utils.py imported tiktoken and litellm.get_model_info
at module scope, and vector_search/utils.py imports that module at the top,
so both packages still loaded at boot on every web/celery process despite
the rest of this PR's deferral work. learning_resources/serializers.py had
the same problem with langchain_text_splitters via RecursiveJsonSplitter,
loaded during django.setup() through the serializer import chain. Move all
three into the functions/methods that actually use them.

Also set litellm.drop_params = True in the other two modules that call
litellm with params that could need dropping (the OCR batch_completion call
and the embedding call), rather than relying on content_summarizer.py --
now itself lazily imported -- to have set it first. get_model_info call
sites don't send params, so they're unaffected either way.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Disable sentry_sdk auto-enabling integrations to stop langchain boot import

sentry_sdk.init() auto-detects installed packages and eagerly imports each
auto-enabling integration module to check applicability -- including
langchain, whose Sentry integration module unconditionally imports
langchain_core at module scope. langchain_core is a transitive dependency
of litellm/langchain-litellm, never used directly, but importing it (and
the tiktoken/langchain_text_splitters it pulls in) undid the startup-cost
work in the rest of this PR regardless of any of our own import sites.

sentry_sdk has no way to disable a single named auto-enabling integration
without importing it first (disabled_integrations requires an instance),
so auto_enabling_integrations=False is the only way to skip the import.
That drops all of sentry's auto-detected integrations, not just langchain;
of that list only Redis applies to this app, and redis is already loaded
at boot via Celery/the cache backend, so it's added back explicitly at no
additional import cost.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Fix encoders/utils_test.py patch targets for the deferred imports

CI caught what local runs missed: this test file patched
vector_search.encoders.utils.get_model_info/.tiktoken as module
attributes, which broke once those imports moved inside
truncate_to_model_limit in 674f78246. Patch the source modules
(litellm.get_model_info, tiktoken.get_encoding) instead, which the
function's local imports pick up correctly either way.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add Boto3/Httpx sentry integrations, regression-test boot imports

Both boto3 and httpx already load unconditionally at boot regardless of
Sentry (boto3 via learning_resources.urls, httpx via Django admin
autodiscover), confirmed with the same sys.modules probe used to find the
langchain issue -- so enabling their Sentry integrations explicitly adds
no import cost, per review feedback.

Also add a regression test per review request: boots Django and serves a
liveness request in a fresh subprocess (so nothing is already cached from
other tests), then asserts none of the packages this PR deferred (tiktoken,
litellm, langchain_core/classic/text_splitters, opendataloader_pdf, cv2,
pdf2image) show up in sys.modules. Verified it actually catches a
regression by reverting the sentry auto_enabling_integrations fix and the
serializers.py RecursiveJsonSplitter deferral in turn -- both make the test
fail as expected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../opendataloader_llm_converter.py           |  3 +
 learning_resources/etl/utils.py               |  7 +-
 learning_resources/serializers.py             |  3 +-
 learning_resources/tasks.py                   |  3 +-
 learning_resources/tasks_test.py              |  2 +-
 learning_resources/utils.py                   |  3 +-
 main/boot_imports_test.py                     | 77 +++++++++++++++++++
 main/sentry.py                                | 16 ++++
 vector_search/encoders/litellm.py             |  3 +
 vector_search/encoders/utils.py               |  6 +-
 vector_search/encoders/utils_test.py          | 30 ++++----
 vector_search/tasks.py                        |  3 +-
 vector_search/utils.py                        | 11 +--
 vector_search/utils_test.py                   | 10 ++-
 14 files changed, 143 insertions(+), 34 deletions(-)
 create mode 100644 main/boot_imports_test.py

diff --git a/learning_resources/converters/opendataloader_llm_converter.py b/learning_resources/converters/opendataloader_llm_converter.py
index a6df9f5060..3d16c167fa 100644
--- a/learning_resources/converters/opendataloader_llm_converter.py
+++ b/learning_resources/converters/opendataloader_llm_converter.py
@@ -33,6 +33,9 @@
 
 log = logging.getLogger(__name__)
 
+# drop unsupported model params
+litellm.drop_params = True
+
 # --- Configuration ---
 MIN_IMAGE_DIMENSION = 32
 MIN_IMAGE_RATIO = 12
diff --git a/learning_resources/etl/utils.py b/learning_resources/etl/utils.py
index 10e088fcc4..b32a8a4265 100644
--- a/learning_resources/etl/utils.py
+++ b/learning_resources/etl/utils.py
@@ -46,9 +46,6 @@
     OfferedBy,
     RunStatus,
 )
-from learning_resources.converters.opendataloader_llm_converter import (
-    OpenDataLoaderLLMConverter,
-)
 from learning_resources.etl.constants import (
     RESOURCE_DELIVERY_MAPPING,
     TIME_INTERVAL_MAPPING,
@@ -1294,6 +1291,10 @@ def _pdf_to_markdown(pdf_path):
     """
     Convert a PDF file to markdown using an llm
     """
+    from learning_resources.converters.opendataloader_llm_converter import (
+        OpenDataLoaderLLMConverter,
+    )
+
     converter = OpenDataLoaderLLMConverter(pdf_path)
     return converter.convert_to_markdown()
 
diff --git a/learning_resources/serializers.py b/learning_resources/serializers.py
index c2b40c7df6..bab49c0a08 100644
--- a/learning_resources/serializers.py
+++ b/learning_resources/serializers.py
@@ -13,7 +13,6 @@
 from django.db.models import F, Max, Prefetch, Q
 from drf_spectacular.utils import extend_schema_field, extend_schema_serializer
 from isodate import parse_duration
-from langchain_text_splitters import RecursiveJsonSplitter
 from rest_framework import serializers
 from rest_framework.exceptions import ValidationError
 
@@ -1128,6 +1127,8 @@ def render_document(self):
 
     def render_chunks(self):
         """Convert resource info to markdown chunks"""
+        from langchain_text_splitters import RecursiveJsonSplitter
+
         rendered_doc = self.render_document()
         resource_type = self.instance.get("resource_type", "course")
         """
diff --git a/learning_resources/tasks.py b/learning_resources/tasks.py
index 3aa9477fd6..6bd4b0a37e 100644
--- a/learning_resources/tasks.py
+++ b/learning_resources/tasks.py
@@ -15,7 +15,6 @@
 from django.utils import timezone
 
 from learning_resources.constants import LearningResourceType
-from learning_resources.content_summarizer import ContentSummarizer
 from learning_resources.etl import ovs, pipelines, youtube
 from learning_resources.etl.canvas import (
     sync_canvas_archive,
@@ -549,6 +548,8 @@ def summarize_content_files_task(
     Returns:
         - None
     """
+    from learning_resources.content_summarizer import ContentSummarizer
+
     summarizer = ContentSummarizer()
     return summarizer.summarize_content_files_by_ids(content_file_ids, overwrite)
 
diff --git a/learning_resources/tasks_test.py b/learning_resources/tasks_test.py
index bb490febdc..bfd9d591a0 100644
--- a/learning_resources/tasks_test.py
+++ b/learning_resources/tasks_test.py
@@ -546,7 +546,7 @@ def test_summarize_unprocessed_content(
         "learning_resources.tasks.summarize_content_files_task", autospec=True
     )
     get_unprocessed_content_file_ids_mock = mocker.patch(
-        "learning_resources.tasks.ContentSummarizer.get_unprocessed_content_file_ids",
+        "learning_resources.content_summarizer.ContentSummarizer.get_unprocessed_content_file_ids",
         autospec=True,
         return_value=ids,
     )
diff --git a/learning_resources/utils.py b/learning_resources/utils.py
index 3f0cd4752c..3823b3fd27 100644
--- a/learning_resources/utils.py
+++ b/learning_resources/utils.py
@@ -10,7 +10,6 @@
 import html2text
 import rapidjson
 import requests
-import tiktoken
 import yaml
 from botocore.exceptions import ClientError
 from django.conf import settings
@@ -800,6 +799,8 @@ def truncate_to_tokens(text: str, max_tokens: int, model: str = "gpt-4o") -> str
     """
     Truncate text to a maximum number of tokens for a given model.
     """
+    import tiktoken
+
     encoding = tiktoken.encoding_for_model(model)
     tokens = encoding.encode(text)
     if len(tokens) <= max_tokens:
diff --git a/main/boot_imports_test.py b/main/boot_imports_test.py
new file mode 100644
index 0000000000..3632ca27c8
--- /dev/null
+++ b/main/boot_imports_test.py
@@ -0,0 +1,77 @@
+"""
+Regression test for the AI-library import deferral work: boots Django and
+serves one request in a fresh subprocess (so nothing is already cached in
+sys.modules from other tests) and asserts that the packages this PR moved
+out of the boot path haven't crept back in as a module-scope import.
+"""
+
+import json
+import os
+import subprocess
+import sys
+import textwrap
+from pathlib import Path
+
+# Packages that should only ever load lazily, inside the function/task that
+# actually needs them -- never as a side effect of booting the app or
+# serving an unrelated request. See PR #3683 and its review discussion.
+OFFENDING_PACKAGES = [
+    "tiktoken",
+    "litellm",
+    "langchain_core",
+    "langchain_classic",
+    "langchain_text_splitters",
+    "opendataloader_pdf",
+    "cv2",
+    "pdf2image",
+]
+
+PROBE_SCRIPT = textwrap.dedent(
+    """
+    import json
+    import sys
+
+    import django
+
+    django.setup()
+
+    from django.test import Client
+
+    response = Client().get("/health/liveness/")
+    offenders = json.loads(__OFFENDERS_JSON__)
+
+    print(
+        json.dumps(
+            {
+                "status_code": response.status_code,
+                "loaded": sorted(m for m in offenders if m in sys.modules),
+            }
+        )
+    )
+    """
+).replace("__OFFENDERS_JSON__", repr(json.dumps(OFFENDING_PACKAGES)))
+
+
+def test_boot_and_liveness_request_do_not_import_ai_libraries(tmp_path):
+    """Booting Django and serving a request shouldn't import deferred AI libs"""
+    script_path = tmp_path / "boot_imports_probe.py"
+    script_path.write_text(PROBE_SCRIPT)
+
+    result = subprocess.run(  # noqa: S603
+        [sys.executable, str(script_path)],
+        capture_output=True,
+        text=True,
+        env={
+            **os.environ,
+            "DJANGO_SETTINGS_MODULE": "main.settings",
+            "PYTHONPATH": str(Path.cwd()),
+        },
+        timeout=60,
+        check=False,
+    )
+
+    assert result.returncode == 0, result.stderr
+    output = json.loads(result.stdout.strip().splitlines()[-1])
+
+    assert output["status_code"] == 200
+    assert output["loaded"] == []
diff --git a/main/sentry.py b/main/sentry.py
index f6ffe45ab6..9a2d5fd754 100644
--- a/main/sentry.py
+++ b/main/sentry.py
@@ -4,9 +4,12 @@
 
 import sentry_sdk
 from celery.exceptions import WorkerLostError
+from sentry_sdk.integrations.boto3 import Boto3Integration
 from sentry_sdk.integrations.celery import CeleryIntegration
 from sentry_sdk.integrations.django import DjangoIntegration
+from sentry_sdk.integrations.httpx import HttpxIntegration
 from sentry_sdk.integrations.logging import LoggingIntegration
+from sentry_sdk.integrations.redis import RedisIntegration
 
 # these errors occur when a shutdown is happening (usually caused by a SIGTERM)
 SHUTDOWN_ERRORS = (WorkerLostError, SystemExit)
@@ -73,9 +76,22 @@ def init_sentry(  # noqa: PLR0913
         before_send=before_send,
         traces_sample_rate=traces_sample_rate,
         profiles_sample_rate=profiles_sample_rate,
+        # Sentry's auto-enabling integrations (langchain, openai, etc.) import
+        # their target library at init time just to check whether it's
+        # installed, regardless of whether it's ever used -- e.g. langchain is
+        # installed as a litellm transitive dependency but never used directly,
+        # and importing its Sentry integration alone pulls in the whole
+        # langchain/tiktoken stack on every process. Opt in explicitly instead.
+        # Boto3/Redis/Httpx are included because boto3, redis, and httpx are
+        # already imported elsewhere at boot regardless of Sentry, so these
+        # add no import cost of their own.
+        auto_enabling_integrations=False,
         integrations=[
             DjangoIntegration(),
             CeleryIntegration(),
             LoggingIntegration(level=log_level),
+            RedisIntegration(),
+            Boto3Integration(),
+            HttpxIntegration(),
         ],
     )
diff --git a/vector_search/encoders/litellm.py b/vector_search/encoders/litellm.py
index f0d1d413a0..89b0e5f9e5 100644
--- a/vector_search/encoders/litellm.py
+++ b/vector_search/encoders/litellm.py
@@ -13,6 +13,9 @@
 log = logging.getLogger()
 redis_url = urlparse(settings.CELERY_BROKER_URL)
 
+# drop unsupported model params
+litellm.drop_params = True
+
 # these must be set directly via environ (litellm limitation)
 os.environ["REDIS_SSL"] = str(redis_url.scheme.endswith("ss"))
 litellm.cache = Cache(
diff --git a/vector_search/encoders/utils.py b/vector_search/encoders/utils.py
index f977ebe062..0f0e17ee7e 100644
--- a/vector_search/encoders/utils.py
+++ b/vector_search/encoders/utils.py
@@ -1,10 +1,8 @@
 import logging
 from functools import cache
 
-import tiktoken
 from django.conf import settings
 from django.utils.module_loading import import_string
-from litellm import get_model_info
 
 logger = logging.getLogger(__name__)
 
@@ -74,6 +72,8 @@ def truncate_to_model_limit(
     Returns:
         Truncated text.
     """
+    from litellm import get_model_info
+
     max_input_tokens = None
 
     try:
@@ -84,6 +84,8 @@ def truncate_to_model_limit(
 
     if max_input_tokens and token_encoding_name:
         try:
+            import tiktoken
+
             encoding = tiktoken.get_encoding(token_encoding_name)
             tokens = encoding.encode(text)
 
diff --git a/vector_search/encoders/utils_test.py b/vector_search/encoders/utils_test.py
index 3b8cd6373b..0e02e0f64f 100644
--- a/vector_search/encoders/utils_test.py
+++ b/vector_search/encoders/utils_test.py
@@ -34,11 +34,11 @@ def warning_mock(mocker):
 def test_truncate_to_model_limit_truncates_long_text(mocker, warning_mock):
     """Text over the model's max input tokens is cut to that token limit"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={"max_input_tokens": 5},
     )
     mocker.patch(
-        "vector_search.encoders.utils.tiktoken.get_encoding",
+        "tiktoken.get_encoding",
         return_value=FakeEncoding(),
     )
 
@@ -55,11 +55,11 @@ def test_truncate_to_model_limit_truncates_long_text(mocker, warning_mock):
 def test_truncate_to_model_limit_leaves_short_text_unchanged(mocker, warning_mock):
     """Text within the model's max input tokens is returned as-is"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={"max_input_tokens": 5},
     )
     mocker.patch(
-        "vector_search.encoders.utils.tiktoken.get_encoding",
+        "tiktoken.get_encoding",
         return_value=FakeEncoding(),
     )
 
@@ -78,12 +78,10 @@ def test_truncate_to_model_limit_unknown_model_falls_back_to_chars(
 ):
     """Fall back to the character limit when model info can't be determined"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         side_effect=ValueError("unknown model"),
     )
-    get_encoding_mock = mocker.patch(
-        "vector_search.encoders.utils.tiktoken.get_encoding"
-    )
+    get_encoding_mock = mocker.patch("tiktoken.get_encoding")
     text = "x" * (DEFAULT_TRUNCATE_CHARS + 100)
 
     result = truncate_to_model_limit(
@@ -102,7 +100,7 @@ def test_truncate_to_model_limit_missing_max_tokens_falls_back_to_chars(
 ):
     """Fall back to the character limit when the model has no max_input_tokens"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={},
     )
     text = "x" * (DEFAULT_TRUNCATE_CHARS + 100)
@@ -122,7 +120,7 @@ def test_truncate_to_model_limit_no_token_encoding_falls_back_to_chars(
 ):
     """Fall back to the character limit when no token encoding name is given"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={"max_input_tokens": 5},
     )
     text = "x" * (DEFAULT_TRUNCATE_CHARS + 100)
@@ -136,11 +134,11 @@ def test_truncate_to_model_limit_no_token_encoding_falls_back_to_chars(
 def test_truncate_to_model_limit_bad_encoding_falls_back_to_chars(mocker, warning_mock):
     """Fall back to the character limit when the tiktoken encoding fails"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={"max_input_tokens": 5},
     )
     mocker.patch(
-        "vector_search.encoders.utils.tiktoken.get_encoding",
+        "tiktoken.get_encoding",
         side_effect=ValueError("bad encoding"),
     )
     text = "x" * (DEFAULT_TRUNCATE_CHARS + 100)
@@ -158,7 +156,7 @@ def test_truncate_to_model_limit_bad_encoding_falls_back_to_chars(mocker, warnin
 def test_truncate_to_model_limit_fallback_warns_once_per_model(mocker, warning_mock):
     """The fallback warning is deduplicated per model/encoding combination"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         side_effect=ValueError("unknown model"),
     )
 
@@ -183,7 +181,7 @@ def test_truncate_to_model_limit_strict_raises_instead_of_falling_back(
 ):
     """In strict mode any fallback condition raises instead of truncating"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         **model_info_kwargs,
     )
     # no token_encoding_name, so even a known model can't use token truncation
@@ -195,11 +193,11 @@ def test_truncate_to_model_limit_strict_raises_instead_of_falling_back(
 def test_truncate_to_model_limit_strict_allows_token_truncation(mocker, warning_mock):
     """Strict mode doesn't interfere when token-based truncation works"""
     mocker.patch(
-        "vector_search.encoders.utils.get_model_info",
+        "litellm.get_model_info",
         return_value={"max_input_tokens": 5},
     )
     mocker.patch(
-        "vector_search.encoders.utils.tiktoken.get_encoding",
+        "tiktoken.get_encoding",
         return_value=FakeEncoding(),
     )
 
diff --git a/vector_search/tasks.py b/vector_search/tasks.py
index 30a03d1ab4..1d933c37c1 100644
--- a/vector_search/tasks.py
+++ b/vector_search/tasks.py
@@ -10,7 +10,6 @@
 from django.core.cache import caches
 from django.db.models import Q
 
-from learning_resources.content_summarizer import ContentSummarizer
 from learning_resources.models import (
     ContentFile,
     Course,
@@ -741,6 +740,8 @@ def _missing_summaries():
         # of letting it scan every learning resource.
         return []
 
+    from learning_resources.content_summarizer import ContentSummarizer
+
     summarizer = ContentSummarizer()
     return summarizer.get_unprocessed_content_file_ids(
         overwrite=False,
diff --git a/vector_search/utils.py b/vector_search/utils.py
index 0665a2dfc9..750aab6f27 100644
--- a/vector_search/utils.py
+++ b/vector_search/utils.py
@@ -8,16 +8,11 @@
 from django.conf import settings
 from django.db import close_old_connections
 from django.db.models import Prefetch, Q
-from langchain_text_splitters import (
-    MarkdownHeaderTextSplitter,
-    RecursiveCharacterTextSplitter,
-)
 from qdrant_client import AsyncQdrantClient, QdrantClient, models
 
 from learning_resources.constants import (
     PROGRAM_COURSE_CACHE_KEY_TEST_MODE,
 )
-from learning_resources.content_summarizer import ContentSummarizer
 from learning_resources.models import (
     ContentFile,
     LearningResource,
@@ -393,6 +388,8 @@ def embed_topics():
 
 @cache
 def _get_text_splitter(**kwargs):
+    from langchain_text_splitters import RecursiveCharacterTextSplitter
+
     if settings.LITELLM_TOKEN_ENCODING_NAME:
         kwargs["encoding_name"] = settings.LITELLM_TOKEN_ENCODING_NAME
         return RecursiveCharacterTextSplitter.from_tiktoken_encoder(**kwargs)
@@ -429,6 +426,8 @@ def _chunk_markdown_documents(text, metadata):
     metadata so every chunk's page_content is self-describing
     for embedding.
     """
+    from langchain_text_splitters import MarkdownHeaderTextSplitter
+
     header_splitter = MarkdownHeaderTextSplitter(
         headers_to_split_on=MARKDOWN_HEADERS_TO_SPLIT_ON,
         strip_headers=False,
@@ -893,6 +892,8 @@ def _summarize_content_files_for_embedding(
     if not fill_summary_content_ids and not changed_summary_content_ids:
         return docs_batch
 
+    from learning_resources.content_summarizer import ContentSummarizer
+
     summarizer = ContentSummarizer()
     if fill_summary_content_ids:
         summarizer.summarize_content_files_by_ids(
diff --git a/vector_search/utils_test.py b/vector_search/utils_test.py
index af5a9cb346..37ff207cc7 100644
--- a/vector_search/utils_test.py
+++ b/vector_search/utils_test.py
@@ -607,7 +607,7 @@ def test_document_chunker_tiktoken(mocker):
     encoder = dense_encoder()
     encoder.token_encoding_name = None
     mocked_splitter = mocker.patch(
-        "vector_search.utils.RecursiveCharacterTextSplitter.from_tiktoken_encoder"
+        "langchain_text_splitters.RecursiveCharacterTextSplitter.from_tiktoken_encoder"
     )
 
     _chunk_documents(["this is a test document"], [{}])
@@ -628,11 +628,15 @@ def test_text_splitter_chunk_size_override(mocker):
     settings.CONTENT_FILE_EMBEDDING_CHUNK_SIZE_OVERRIDE = chunk_size
     settings.CONTENT_FILE_EMBEDDING_CHUNK_OVERLAP = chunk_size / 10
     encoder = dense_encoder()
-    mocked_splitter = mocker.patch("vector_search.utils.RecursiveCharacterTextSplitter")
+    mocked_splitter = mocker.patch(
+        "langchain_text_splitters.RecursiveCharacterTextSplitter"
+    )
     encoder.token_encoding_name = "cl100k_base"  # noqa: S105
     _chunk_documents(["this is a test document"], [{}])
     assert mocked_splitter.mock_calls[0].kwargs["chunk_size"] == 100
-    mocked_splitter = mocker.patch("vector_search.utils.RecursiveCharacterTextSplitter")
+    mocked_splitter = mocker.patch(
+        "langchain_text_splitters.RecursiveCharacterTextSplitter"
+    )
     settings.CONTENT_FILE_EMBEDDING_CHUNK_SIZE_OVERRIDE = None
     _chunk_documents(["this is a test document"], [{}])
     assert "chunk_size" not in mocked_splitter.mock_calls[0].kwargs

From 2a66e8082144e3ec7b4319501f5dadb39c28d200 Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Wed, 29 Jul 2026 11:19:00 -0400
Subject: [PATCH 08/12] Fix flaky test:  deterministically sort  choices
 (#3689)

---
 ...update_hubspot_contact_property_choices.py |  4 ++-
 ...e_hubspot_contact_property_choices_test.py | 29 ++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)
 rename ol_hubspot/{management/commands => }/update_hubspot_contact_property_choices_test.py (94%)

diff --git a/ol_hubspot/management/commands/update_hubspot_contact_property_choices.py b/ol_hubspot/management/commands/update_hubspot_contact_property_choices.py
index 75bba694b2..3f2d022a18 100644
--- a/ol_hubspot/management/commands/update_hubspot_contact_property_choices.py
+++ b/ol_hubspot/management/commands/update_hubspot_contact_property_choices.py
@@ -257,8 +257,10 @@ def _resolve_choice_options(self, options: dict) -> list[ContactPropertyOption]:
 
         sorted_options = [
             {"label": label, "value": value}
+            # sort on value as well as label so options with duplicate labels are
+            # ordered deterministically rather than by arbitrary database row order
             for value, label in sorted(
-                deduped_options.items(), key=lambda item: item[1]
+                deduped_options.items(), key=lambda item: (item[1], item[0])
             )
         ]
 
diff --git a/ol_hubspot/management/commands/update_hubspot_contact_property_choices_test.py b/ol_hubspot/update_hubspot_contact_property_choices_test.py
similarity index 94%
rename from ol_hubspot/management/commands/update_hubspot_contact_property_choices_test.py
rename to ol_hubspot/update_hubspot_contact_property_choices_test.py
index 6b8c1716c0..97f2b5b146 100644
--- a/ol_hubspot/management/commands/update_hubspot_contact_property_choices_test.py
+++ b/ol_hubspot/update_hubspot_contact_property_choices_test.py
@@ -120,21 +120,24 @@ def test_command_updates_existing_contact_property(mocker, faker):
 
 
 @pytest.mark.django_db
-def test_command_disambiguates_duplicate_labels_with_value_suffix(mocker, faker):
+@pytest.mark.parametrize("reverse_creation_order", [False, True])
+def test_command_disambiguates_duplicate_labels_with_value_suffix(
+    mocker, faker, reverse_creation_order
+):
     """Command makes duplicate labels unique for HubSpot while preserving values."""
     property_name = faker.slug().replace("-", "_")
-    LearningResourceFactory(
-        is_course=True,
-        title="Generative AI Playbook",
-        readable_id="gai-playbook-a",
-        etl_source="mitxonline",
-    )
-    LearningResourceFactory(
-        is_program=True,
-        title="Generative AI Playbook",
-        readable_id="gai-playbook-b",
-        etl_source="mitxonline",
-    )
+    # creation order is varied because ordering by a duplicated label leaves the
+    # database free to return the tied rows in any order
+    readable_ids = ["gai-playbook-a", "gai-playbook-b"]
+    if reverse_creation_order:
+        readable_ids.reverse()
+    for readable_id in readable_ids:
+        LearningResourceFactory(
+            is_course=True,
+            title="Generative AI Playbook",
+            readable_id=readable_id,
+            etl_source="mitxonline",
+        )
 
     mocker.patch(
         "ol_hubspot.management.commands.update_hubspot_contact_property_choices.get_contact_property",

From 34451b82a459dff1c2e5a75d58bd4126a0e3d1e1 Mon Sep 17 00:00:00 2001
From: Tobias Macey <tmacey@mit.edu>
Date: Wed, 29 Jul 2026 12:51:45 -0400
Subject: [PATCH 09/12] feat(b2b): org analytics dashboard for the manager
 surface (#3679)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(b2b): org analytics dashboard for the manager surface

Adds the reporting half of the B2B org-manager dashboard, alongside the
existing seat-administration half (ContractAdminPage): contract KPI cards,
a monthly engagement trend, per-course-run performance, and a program funnel,
each backed by one of ol-analytics-api's org-scoped materialized views.

Keyed on the Keycloak org UUID (sso_organization_id), not the org slug or
MITx Online's numeric id — that is the only identifier stable across the JWT,
MITx Online and StarRocks, and the one the analytics API filters on (see
mitodl/ol-analytics-api#13, mitodl/mitxonline#3789). The published mitxonline
client does not declare the field yet, so it is read off the wire through a
shim that returns null when absent; the dashboard reports itself unavailable
rather than issuing a request with `undefined` in the path.

Charts use @mui/x-charts rather than recharts. x-charts reads the existing MUI
v6 theme directly, so axis, tooltip and legend styling comes from the same
tokens as the rest of the app instead of being threaded through props by hand;
it also avoids pulling Redux, immer and a second lodash-alike into the bundle,
which recharts 3 ships as runtime dependencies. Chart colors are MIT Learn
tokens checked against the data-viz palette rules (lightness band, chroma
floor, CVD separation, contrast) rather than picked by eye — two slots are
stepped versions of brand hues that fall outside the readable band.

Numbers the API withholds under its k-anonymity floor arrive as null. They are
rendered as an explained placeholder, never coerced to zero: a suppressed month
is a gap in the trend line, and the program funnel is paired with a table so a
withheld stage can say so instead of just missing a bar.

Auth stays cookie-based; the analytics API sits behind APISIX, which mints the
JWT from the session. NEXT_PUBLIC_ANALYTICS_API_BASE_URL is optional so
environments without the service still boot.

Also extracts the contract admin page's table primitives into
components/B2BTable so both surfaces share them, and polyfills structuredClone
in the jest setup — jsdom lacks it and x-charts requires it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SjK3vzqB6nvLHKUF7686Pj

* docs(env): correct what NEXT_PUBLIC_ANALYTICS_API_BASE_URL actually gates

Both env comments implied the variable controls whether the analytics
dashboard is visible. It does not: reachability is gated by the
b2b-analytics-dashboard PostHog flag, and with the flag on and this unset
the route still renders, reporting itself unavailable. The variable only
decides whether there is an API to load data from.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SjK3vzqB6nvLHKUF7686Pj

* fix(b2b): tell a failed analytics section apart from an empty one

Each section only received rows/asOf/isLoading, all falsy on a failed
query, so a section whose request 500'd rendered the empty state: "No
course enrollments recorded yet" plus "Data not yet refreshed". Both are
claims — one about the org, one about the materialized view — that a
failed request gives no grounds for. Threading isError through lets each
section say what is actually known: nothing.

Pairs the engagement line chart with a table of the same monthly numbers,
mirroring ProgramFunnelChart. An SVG of plotted geometry is unreadable to
a screen reader, and a suppressed month is drawn as a gap that reads
identically to "no data" — only the table can say it was withheld.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* feat(b2b): say when an analytics section is showing a subset

Every endpoint is paged, and a truncated page is invisible in the rows
themselves: 2 rows of 340 look exactly like 2 of 2. An org past the cap
got a dashboard that read as complete while quietly dropping the rest.

Consumes the envelope's new `total_count` (mitodl/ol-analytics-api#15) to
compare what each section rendered against what the org actually has, and
offers the remainder in one page. The ask is capped at the API's own
max_page_size, since it answers 422 above that — past the cap the message
stands alone rather than offering a button that cannot deliver.

Per-section limits, so expanding a long course table doesn't refetch the
other three, and keepPreviousData so the section a manager just expanded
doesn't blank back to its skeleton on the way.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(b2b): don't offer "Show all" when it would change nothing

The API applies its LIMIT in SQL and drops sub-floor rows in Python
afterwards, so a page of `total_count` rows can still come back short —
ask for 340 and get 328, permanently. `canShowAll` was gated only on the
API's page cap, so in that case the button stayed, and clicking it resent
the identical limit: same query key, no refetch, nothing happened.

Gate on whether the click would actually raise the limit instead. Covers
both dead-end cases (already at the cap, already asked for the total) and
leaves the count standing on its own, which is the honest reading — the
remainder is not reachable through this endpoint at that grain.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* refactor(b2b): read chart chrome from the theme instead of copied hexes

CHART_INK pinned four hexes whose own trailing comments named the tokens
they were copied from. Retuning any of those tokens in smoot-design would
have left the chart grid, axes and labels behind while the tables beside
them moved — a silent divergence with nothing to catch it.

Now a chartInk(theme) lookup. The values are identical today (verified
against the token set), so this is a pure refactor.

The two data palettes stay pinned deliberately, and the module says why:
they are validated for contrast and CVD separation, so they must not move
without re-running that check. Non-data ink is the opposite case — it
should track the design system, not resist it.

Adds useTheme to ol-components' MUI re-exports, alongside styled and alpha.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(b2b): make expanding a section perceivable, and actually keep the rows

Two problems behind one review comment about "Show all" giving no feedback.

The first is that `placeholderData: keepPreviousData` was silently inert
under `useQueries`: on a limit change the result went straight to
`data: undefined`, so the section blanked back to its skeleton — the exact
thing the option was there to prevent, and the opposite of what the code
claimed. It behaves as documented on `useQuery`, so the four queries are
now four `useQuery` calls (fixed count, fixed order, so hook-safe).

The second is the reported one. With the rows correctly retained, nothing
observable changes on click, so the control now reports its own state:
aria-busy and aria-disabled while the expanded page is in flight, label
"Loading…", and the result announced through a polite live region. Follows
the CSV export button on ContractAdminPage. aria-disabled rather than
disabled so a keyboard user does not lose focus mid-action.

The live region sits outside the truncation message rather than inside it:
when expanding completes the section, both message and button unmount, and
a region that unmounts in the same commit as the change it describes
announces nothing.

The announcement is derived from render state, not detected as an edge in
an effect. An edge detector has to observe the in-flight render to arm
itself, and React can batch a fast resolution into one commit — on a warm
cache it would simply never fire.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(b2b): hide the analytics charts from assistive tech

Both charts are paired with a table carrying the same numbers, so the SVG
is redundant to a screen reader — and worse than redundant: reaching the
data means walking hundreds of series, axis and label nodes first, to be
handed it properly a moment later. The table is the accessible copy, so
the chart is now aria-hidden and the table stays exposed.

Checked before hiding that neither chart renders anything focusable, since
aria-hidden over focusable content is its own violation — keyboard focus
can land on a node screen readers were told does not exist. A test asserts
both halves, so this fails if a future @mui/x-charts starts emitting
focusable nodes rather than silently becoming a keyboard trap.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 env/frontend.env                              |   7 +
 env/frontend.local.example.env                |   9 +
 frontends/api/package.json                    |   5 +-
 frontends/api/src/analytics/axios.ts          |  14 +
 frontends/api/src/analytics/clients.ts        | 107 +++
 .../analytics/hooks/organizations/index.ts    |  14 +
 .../hooks/organizations/queries.test.ts       | 117 ++++
 .../analytics/hooks/organizations/queries.ts  |  99 +++
 .../api/src/analytics/test-utils/factories.ts | 133 ++++
 .../api/src/analytics/test-utils/index.ts     |   2 +
 .../api/src/analytics/test-utils/urls.ts      |  34 +
 frontends/api/src/analytics/types.ts          | 131 ++++
 frontends/api/src/runtime/index.ts            |  28 +
 frontends/api/src/test-utils/setupJest.ts     |   5 +
 frontends/jest-shared-setup.ts                |  15 +
 frontends/main/package.json                   |   1 +
 .../ContractAdminPage/ContractAdminPage.tsx   | 140 +---
 .../Analytics/ContractKpiCards.tsx            | 203 ++++++
 .../Analytics/CoursePerformanceTable.tsx      | 232 +++++++
 .../Analytics/EngagementTrendChart.tsx        | 259 ++++++++
 .../Analytics/ProgramFunnelChart.tsx          | 279 ++++++++
 .../DashboardPage/Analytics/SectionError.tsx  |  25 +
 .../DashboardPage/Analytics/SectionHeader.tsx | 112 ++++
 .../Analytics/SectionTruncation.test.tsx      | 118 ++++
 .../Analytics/SectionTruncation.tsx           | 123 ++++
 .../DashboardPage/Analytics/chartPalette.ts   |  71 ++
 .../DashboardPage/Analytics/charts.test.tsx   | 326 +++++++++
 .../DashboardPage/Analytics/format.test.tsx   |  86 +++
 .../DashboardPage/Analytics/format.tsx        | 128 ++++
 .../DashboardPage/Analytics/orgUuid.ts        |  28 +
 .../DashboardPage/AnalyticsContent.test.tsx   | 619 ++++++++++++++++++
 .../DashboardPage/AnalyticsContent.tsx        | 409 ++++++++++++
 .../organization/[orgSlug]/analytics/page.tsx |  11 +
 frontends/main/src/bootstrap/api.ts           |  16 +
 frontends/main/src/common/feature_flags.ts    |   1 +
 frontends/main/src/common/urls.ts             |   8 +
 .../main/src/components/B2BTable/B2BTable.tsx | 150 +++++
 frontends/main/src/test-utils/setupJest.tsx   |   7 +
 frontends/main/validateEnv.js                 |   4 +
 frontends/ol-components/src/index.ts          |   2 +-
 yarn.lock                                     | 318 ++++++++-
 41 files changed, 4289 insertions(+), 107 deletions(-)
 create mode 100644 frontends/api/src/analytics/axios.ts
 create mode 100644 frontends/api/src/analytics/clients.ts
 create mode 100644 frontends/api/src/analytics/hooks/organizations/index.ts
 create mode 100644 frontends/api/src/analytics/hooks/organizations/queries.test.ts
 create mode 100644 frontends/api/src/analytics/hooks/organizations/queries.ts
 create mode 100644 frontends/api/src/analytics/test-utils/factories.ts
 create mode 100644 frontends/api/src/analytics/test-utils/index.ts
 create mode 100644 frontends/api/src/analytics/test-utils/urls.ts
 create mode 100644 frontends/api/src/analytics/types.ts
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/ContractKpiCards.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/CoursePerformanceTable.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/EngagementTrendChart.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/ProgramFunnelChart.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/SectionError.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/SectionHeader.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.test.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/chartPalette.ts
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/charts.test.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/format.test.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/format.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/Analytics/orgUuid.ts
 create mode 100644 frontends/main/src/app-pages/DashboardPage/AnalyticsContent.test.tsx
 create mode 100644 frontends/main/src/app-pages/DashboardPage/AnalyticsContent.tsx
 create mode 100644 frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/analytics/page.tsx
 create mode 100644 frontends/main/src/components/B2BTable/B2BTable.tsx

diff --git a/env/frontend.env b/env/frontend.env
index aabffb43ff..db8b5f5e30 100644
--- a/env/frontend.env
+++ b/env/frontend.env
@@ -29,6 +29,13 @@ NEXT_PUBLIC_LEARN_AI_CSRF_COOKIE_NAME=csrftoken
 NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT=https://api.rc.learn.mit.edu/ai/http/recommendation_agent/
 NEXT_PUBLIC_LEARN_AI_SYLLABUS_ENDPOINT=https://api.rc.learn.mit.edu/ai/http/syllabus_agent/
 
+# OL Analytics API (ol-analytics-api). Auth is cookie-based via APISIX — the
+# frontend attaches no token. Leave unset when there is no analytics API to talk
+# to: the org analytics dashboard then reports itself unavailable rather than
+# loading data. Access to the route itself is gated by the
+# b2b-analytics-dashboard PostHog flag, not by this variable.
+NEXT_PUBLIC_ANALYTICS_API_BASE_URL=${ANALYTICS_API_BASE_URL}
+
 NEXT_PUBLIC_MITX_ONLINE_BASE_URL=${MITX_ONLINE_BASE_URL}
 NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL=http://mitxonline.odl.local:8065/
 NEXT_PUBLIC_VERSION="local-dev"
diff --git a/env/frontend.local.example.env b/env/frontend.local.example.env
index 7c802900be..763bdbaf3e 100644
--- a/env/frontend.local.example.env
+++ b/env/frontend.local.example.env
@@ -11,3 +11,12 @@ NEXT_PUBLIC_STAY_UPDATED_HUBSPOT_FORM_ID=""
 # in the README. Requires learn-ai running locally.
 # NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT=http://open.odl.local:8065/ai/http/recommendation_agent/
 # NEXT_PUBLIC_LEARN_AI_SYLLABUS_ENDPOINT=http://open.odl.local:8065/ai/http/syllabus_agent/
+
+# ol-analytics-api integration: supplies the data for the B2B org analytics
+# dashboard at /dashboard/organization/<org>/analytics. Whether that route is
+# reachable at all is controlled by the b2b-analytics-dashboard PostHog flag,
+# not by this variable: with the flag on and this unset the page still renders,
+# reporting "Analytics is not available in this environment".
+# Point at the APISIX route rather than the API directly — the API expects the
+# JWT that APISIX mints from the session cookie.
+# NEXT_PUBLIC_ANALYTICS_API_BASE_URL=http://open.odl.local:8065/analytics/
diff --git a/frontends/api/package.json b/frontends/api/package.json
index 27ff2b75ad..7598ba0093 100644
--- a/frontends/api/package.json
+++ b/frontends/api/package.json
@@ -16,7 +16,10 @@
     "./test-utils/mockAxios": "./src/test-utils/mockAxios.ts",
     "./test-utils": "./src/test-utils/index.ts",
     "./mitxonline-hooks/*": "./src/mitxonline/hooks/*/index.ts",
-    "./mitxonline-test-utils": "./src/mitxonline/test-utils/index.ts"
+    "./mitxonline-test-utils": "./src/mitxonline/test-utils/index.ts",
+    "./analytics-hooks/*": "./src/analytics/hooks/*/index.ts",
+    "./analytics-types": "./src/analytics/types.ts",
+    "./analytics-test-utils": "./src/analytics/test-utils/index.ts"
   },
   "peerDependencies": {
     "react": "^19.2.1"
diff --git a/frontends/api/src/analytics/axios.ts b/frontends/api/src/analytics/axios.ts
new file mode 100644
index 0000000000..a44d1d4972
--- /dev/null
+++ b/frontends/api/src/analytics/axios.ts
@@ -0,0 +1,14 @@
+import { createConfigurableAxios } from "../configurableAxios"
+
+/**
+ * Axios instance for the OL Analytics API (`ol-analytics-api`).
+ *
+ * Auth is entirely cookie-based: the analytics API sits behind APISIX, which
+ * resolves the session cookie into the JWT the API expects. The browser sends
+ * the cookie because of `withCredentials`, so nothing here attaches a token.
+ */
+export const analyticsAxiosClient = createConfigurableAxios(
+  "mit-learn.api.axios.analytics",
+)
+
+export default analyticsAxiosClient.instance
diff --git a/frontends/api/src/analytics/clients.ts b/frontends/api/src/analytics/clients.ts
new file mode 100644
index 0000000000..2d67bc87fe
--- /dev/null
+++ b/frontends/api/src/analytics/clients.ts
@@ -0,0 +1,107 @@
+import type { AxiosResponse } from "axios"
+import axiosInstance from "./axios"
+import type {
+  AnalyticsPageParams,
+  ContentEngagementDepth,
+  ContractUtilization,
+  EnrollmentCompletionFunnel,
+  MonthlyEngagementTrend,
+  OrgAnalyticsResponse,
+  ProgramFunnel,
+} from "./types"
+
+/**
+ * The b2b_dashboard tenant is mounted at this path by `ol-analytics-api`'s
+ * root ASGI app (`main.py`'s tenant registry). The configured axios `baseURL`
+ * is the API host, so every path here is relative to it.
+ */
+const B2B_DASHBOARD_ROOT = "/api/v1/analytics"
+
+/**
+ * `organizationId` is the **Keycloak organization UUID** (`sso_organization_id`),
+ * not the org slug and not MITx Online's numeric org id. It is the only
+ * identifier that is stable across the JWT, MITx Online and StarRocks, so the
+ * analytics API keys every org endpoint on it — see mitodl/ol-analytics-api#13.
+ */
+const orgRoot = (organizationId: string) =>
+  `${B2B_DASHBOARD_ROOT}/organizations/${encodeURIComponent(organizationId)}`
+
+const getOrgResource = <RowT>(
+  organizationId: string,
+  resource: string,
+  page: AnalyticsPageParams | undefined,
+  signal: AbortSignal | undefined,
+): Promise<AxiosResponse<OrgAnalyticsResponse<RowT>>> =>
+  axiosInstance.get<OrgAnalyticsResponse<RowT>>(
+    `${orgRoot(organizationId)}/${resource}`,
+    { params: page, signal },
+  )
+
+/**
+ * One method per org-scoped endpoint of the analytics API's b2b_dashboard
+ * tenant. Thin by design — paging and the response envelope are the only
+ * shared concerns, and both live in `getOrgResource`.
+ */
+const analyticsOrganizationsApi = {
+  contractUtilization: (
+    organizationId: string,
+    page?: AnalyticsPageParams,
+    signal?: AbortSignal,
+  ) =>
+    getOrgResource<ContractUtilization>(
+      organizationId,
+      "contract-utilization",
+      page,
+      signal,
+    ),
+
+  enrollmentFunnel: (
+    organizationId: string,
+    page?: AnalyticsPageParams,
+    signal?: AbortSignal,
+  ) =>
+    getOrgResource<EnrollmentCompletionFunnel>(
+      organizationId,
+      "enrollment-funnel",
+      page,
+      signal,
+    ),
+
+  engagementTrend: (
+    organizationId: string,
+    page?: AnalyticsPageParams,
+    signal?: AbortSignal,
+  ) =>
+    getOrgResource<MonthlyEngagementTrend>(
+      organizationId,
+      "engagement-trend",
+      page,
+      signal,
+    ),
+
+  programFunnel: (
+    organizationId: string,
+    page?: AnalyticsPageParams,
+    signal?: AbortSignal,
+  ) =>
+    getOrgResource<ProgramFunnel>(
+      organizationId,
+      "program-funnel",
+      page,
+      signal,
+    ),
+
+  contentEngagement: (
+    organizationId: string,
+    page?: AnalyticsPageParams,
+    signal?: AbortSignal,
+  ) =>
+    getOrgResource<ContentEngagementDepth>(
+      organizationId,
+      "content-engagement",
+      page,
+      signal,
+    ),
+}
+
+export { analyticsOrganizationsApi, B2B_DASHBOARD_ROOT }
diff --git a/frontends/api/src/analytics/hooks/organizations/index.ts b/frontends/api/src/analytics/hooks/organizations/index.ts
new file mode 100644
index 0000000000..5c172ba9a8
--- /dev/null
+++ b/frontends/api/src/analytics/hooks/organizations/index.ts
@@ -0,0 +1,14 @@
+export {
+  analyticsOrganizationQueries,
+  analyticsOrganizationKeys,
+} from "./queries"
+
+export type {
+  AnalyticsPageParams,
+  ContentEngagementDepth,
+  ContractUtilization,
+  EnrollmentCompletionFunnel,
+  MonthlyEngagementTrend,
+  OrgAnalyticsResponse,
+  ProgramFunnel,
+} from "../../types"
diff --git a/frontends/api/src/analytics/hooks/organizations/queries.test.ts b/frontends/api/src/analytics/hooks/organizations/queries.test.ts
new file mode 100644
index 0000000000..46839f969a
--- /dev/null
+++ b/frontends/api/src/analytics/hooks/organizations/queries.test.ts
@@ -0,0 +1,117 @@
+import { renderHook, waitFor } from "@testing-library/react"
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query"
+import { setupReactQueryTest } from "../../../hooks/test-utils"
+import { setMockResponse, makeRequest } from "../../../test-utils"
+import { factories, urls } from "../../test-utils"
+import { analyticsOrganizationQueries } from "./queries"
+
+const ORG_UUID = "3fa85f64-5717-4562-b3fc-2c963f66afa6"
+
+/**
+ * Each factory returns options for its own row type, so a `test.each` table of
+ * them is a union that `useQuery` cannot resolve to a single overload. The
+ * table only needs "does this options object request that URL", so erase the
+ * row type here rather than splitting the table into five near-identical tests.
+ */
+type AnyQueryOptions = UseQueryOptions<
+  unknown,
+  Error,
+  unknown,
+  readonly unknown[]
+>
+const erase = (options: unknown) => options as AnyQueryOptions
+
+describe("analyticsOrganizationQueries", () => {
+  test.each([
+    {
+      name: "contractUtilization",
+      query: () =>
+        erase(analyticsOrganizationQueries.contractUtilization(ORG_UUID)),
+      url: urls.organizations.contractUtilization(ORG_UUID),
+      response: factories.envelope([factories.contractUtilization()]),
+    },
+    {
+      name: "enrollmentFunnel",
+      query: () =>
+        erase(analyticsOrganizationQueries.enrollmentFunnel(ORG_UUID)),
+      url: urls.organizations.enrollmentFunnel(ORG_UUID),
+      response: factories.envelope([factories.enrollmentCompletionFunnel()]),
+    },
+    {
+      name: "engagementTrend",
+      query: () =>
+        erase(analyticsOrganizationQueries.engagementTrend(ORG_UUID)),
+      url: urls.organizations.engagementTrend(ORG_UUID),
+      response: factories.envelope([factories.monthlyEngagementTrend()]),
+    },
+    {
+      name: "programFunnel",
+      query: () => erase(analyticsOrganizationQueries.programFunnel(ORG_UUID)),
+      url: urls.organizations.programFunnel(ORG_UUID),
+      response: factories.envelope([factories.programFunnel()]),
+    },
+    {
+      name: "contentEngagement",
+      query: () =>
+        erase(analyticsOrganizationQueries.contentEngagement(ORG_UUID)),
+      url: urls.organizations.contentEngagement(ORG_UUID),
+      response: factories.envelope([factories.contentEngagementDepth()]),
+    },
+  ])("$name requests its endpoint and returns the envelope", async (spec) => {
+    setMockResponse.get(spec.url, spec.response)
+    const { wrapper } = setupReactQueryTest()
+
+    const { result } = renderHook(() => useQuery(spec.query()), { wrapper })
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(result.current.data).toEqual(spec.response)
+    expect(makeRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ method: "get", url: spec.url }),
+    )
+  })
+
+  test("paging params reach the request and change the query key", async () => {
+    const page = { limit: 200, offset: 0 }
+    const url = urls.organizations.contractUtilization(ORG_UUID, page)
+    const response = factories.envelope([factories.contractUtilization()])
+    setMockResponse.get(url, response)
+    const { wrapper } = setupReactQueryTest()
+
+    const { result } = renderHook(
+      () =>
+        useQuery(
+          analyticsOrganizationQueries.contractUtilization(ORG_UUID, page),
+        ),
+      { wrapper },
+    )
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(makeRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ method: "get", url }),
+    )
+    expect(
+      analyticsOrganizationQueries.contractUtilization(ORG_UUID, page).queryKey,
+    ).not.toEqual(
+      analyticsOrganizationQueries.contractUtilization(ORG_UUID).queryKey,
+    )
+  })
+
+  test("query keys are namespaced per org so one org cannot read another's cache", () => {
+    const [namespace, resource, orgId] =
+      analyticsOrganizationQueries.contractUtilization(ORG_UUID).queryKey
+    expect([namespace, resource, orgId]).toEqual([
+      "analytics",
+      "organizations",
+      ORG_UUID,
+    ])
+    expect(
+      analyticsOrganizationQueries.contractUtilization("other").queryKey,
+    ).not.toEqual(
+      analyticsOrganizationQueries.contractUtilization(ORG_UUID).queryKey,
+    )
+  })
+
+  test("the org id is url-encoded rather than spliced into the path raw", () => {
+    expect(urls.organizations.contractUtilization("a/b")).toContain("a%2Fb")
+  })
+})
diff --git a/frontends/api/src/analytics/hooks/organizations/queries.ts b/frontends/api/src/analytics/hooks/organizations/queries.ts
new file mode 100644
index 0000000000..0679c78880
--- /dev/null
+++ b/frontends/api/src/analytics/hooks/organizations/queries.ts
@@ -0,0 +1,99 @@
+import { queryOptions } from "@tanstack/react-query"
+import { analyticsOrganizationsApi } from "../../clients"
+import type { AnalyticsPageParams } from "../../types"
+
+/**
+ * `orgId` in every key is the Keycloak organization UUID — see
+ * `analyticsOrganizationsApi`. Keys are namespaced under "analytics" so the
+ * whole dashboard can be invalidated without touching mitxonline or learn
+ * queries.
+ */
+const analyticsOrganizationKeys = {
+  root: ["analytics", "organizations"] as const,
+  organization: (orgId: string) =>
+    [...analyticsOrganizationKeys.root, orgId] as const,
+  resource: (orgId: string, resource: string, page?: AnalyticsPageParams) =>
+    [...analyticsOrganizationKeys.organization(orgId), resource, page] as const,
+}
+
+/**
+ * The materialized views behind these endpoints refresh on a schedule measured
+ * in hours, so refetching on every window focus only costs StarRocks queries
+ * without ever changing what the manager sees. Freshness is communicated by the
+ * `as_of` in each response instead.
+ */
+const ANALYTICS_STALE_TIME = 5 * 60 * 1000
+
+const analyticsOrganizationQueries = {
+  contractUtilization: (orgId: string, page?: AnalyticsPageParams) =>
+    queryOptions({
+      queryKey: analyticsOrganizationKeys.resource(
+        orgId,
+        "contract-utilization",
+        page,
+      ),
+      staleTime: ANALYTICS_STALE_TIME,
+      queryFn: async ({ signal }) =>
+        analyticsOrganizationsApi
+          .contractUtilization(orgId, page, signal)
+          .then((res) => res.data),
+    }),
+
+  enrollmentFunnel: (orgId: string, page?: AnalyticsPageParams) =>
+    queryOptions({
+      queryKey: analyticsOrganizationKeys.resource(
+        orgId,
+        "enrollment-funnel",
+        page,
+      ),
+      staleTime: ANALYTICS_STALE_TIME,
+      queryFn: async ({ signal }) =>
+        analyticsOrganizationsApi
+          .enrollmentFunnel(orgId, page, signal)
+          .then((res) => res.data),
+    }),
+
+  engagementTrend: (orgId: string, page?: AnalyticsPageParams) =>
+    queryOptions({
+      queryKey: analyticsOrganizationKeys.resource(
+        orgId,
+        "engagement-trend",
+        page,
+      ),
+      staleTime: ANALYTICS_STALE_TIME,
+      queryFn: async ({ signal }) =>
+        analyticsOrganizationsApi
+          .engagementTrend(orgId, page, signal)
+          .then((res) => res.data),
+    }),
+
+  programFunnel: (orgId: string, page?: AnalyticsPageParams) =>
+    queryOptions({
+      queryKey: analyticsOrganizationKeys.resource(
+        orgId,
+        "program-funnel",
+        page,
+      ),
+      staleTime: ANALYTICS_STALE_TIME,
+      queryFn: async ({ signal }) =>
+        analyticsOrganizationsApi
+          .programFunnel(orgId, page, signal)
+          .then((res) => res.data),
+    }),
+
+  contentEngagement: (orgId: string, page?: AnalyticsPageParams) =>
+    queryOptions({
+      queryKey: analyticsOrganizationKeys.resource(
+        orgId,
+        "content-engagement",
+        page,
+      ),
+      staleTime: ANALYTICS_STALE_TIME,
+      queryFn: async ({ signal }) =>
+        analyticsOrganizationsApi
+          .contentEngagement(orgId, page, signal)
+          .then((res) => res.data),
+    }),
+}
+
+export { analyticsOrganizationQueries, analyticsOrganizationKeys }
diff --git a/frontends/api/src/analytics/test-utils/factories.ts b/frontends/api/src/analytics/test-utils/factories.ts
new file mode 100644
index 0000000000..fa05457199
--- /dev/null
+++ b/frontends/api/src/analytics/test-utils/factories.ts
@@ -0,0 +1,133 @@
+import { faker } from "@faker-js/faker/locale/en"
+import type {
+  ContentEngagementDepth,
+  ContractUtilization,
+  EnrollmentCompletionFunnel,
+  MonthlyEngagementTrend,
+  OrgAnalyticsResponse,
+  ProgramFunnel,
+} from "../types"
+
+/**
+ * Factories for the analytics API's org-scoped responses.
+ *
+ * Every nullable count here defaults to a real number: suppression is the
+ * exception, so a test that cares about it opts in by passing `null` rather
+ * than every other test having to opt out.
+ */
+
+const organizationId = () => faker.string.uuid()
+
+const envelope = <RowT>(
+  data: RowT[],
+  overrides: Partial<OrgAnalyticsResponse<RowT>> = {},
+): OrgAnalyticsResponse<RowT> => ({
+  organization_id: organizationId(),
+  as_of: "2026-07-01T04:00:00Z",
+  // Defaults to a complete result set; a test exercising truncation passes a
+  // larger total explicitly.
+  total_count: data.length,
+  data,
+  ...overrides,
+})
+
+const contractUtilization = (
+  overrides: Partial<ContractUtilization> = {},
+): ContractUtilization => ({
+  organization_key: faker.string.alphanumeric(6).toUpperCase(),
+  organization_name: faker.company.name(),
+  contract_pk: faker.number.int({ min: 1, max: 10000 }),
+  b2b_contract_name: `${faker.company.name()} Contract`,
+  b2b_contract_is_active: true,
+  b2b_contract_start_date: "2026-01-01",
+  b2b_contract_end_date: "2026-12-31",
+  seat_limit: 100,
+  b2b_contract_membership_type: "fixed",
+  seats_consumed: 62,
+  active_learners: 48,
+  learners_certified: 20,
+  seat_utilization_pct: 62,
+  completion_rate_pct: 32.3,
+  ...overrides,
+})
+
+const enrollmentCompletionFunnel = (
+  overrides: Partial<EnrollmentCompletionFunnel> = {},
+): EnrollmentCompletionFunnel => ({
+  organization_key: faker.string.alphanumeric(6).toUpperCase(),
+  organization_name: faker.company.name(),
+  contract_pk: faker.number.int({ min: 1, max: 10000 }),
+  b2b_contract_name: `${faker.company.name()} Contract`,
+  courserun_pk: faker.number.int({ min: 1, max: 10000 }),
+  courserun_readable_id: `course-v1:MITx+${faker.string.alphanumeric(5)}+2026`,
+  courserun_title: faker.commerce.productName(),
+  enrolled_learners: 40,
+  active_learners: 31,
+  passing_learners: 18,
+  certified_learners: 16,
+  active_rate_pct: 77.5,
+  completion_rate_pct: 40,
+  ...overrides,
+})
+
+const monthlyEngagementTrend = (
+  overrides: Partial<MonthlyEngagementTrend> = {},
+): MonthlyEngagementTrend => ({
+  organization_key: faker.string.alphanumeric(6).toUpperCase(),
+  organization_name: faker.company.name(),
+  activity_year_and_month: "2026-01",
+  monthly_active_learners: 30,
+  new_enrollments: 12,
+  certificates_earned: 5,
+  total_videos_watched: 900,
+  total_problems_attempted: 1200,
+  total_chatbot_interactions: 80,
+  ...overrides,
+})
+
+const programFunnel = (
+  overrides: Partial<ProgramFunnel> = {},
+): ProgramFunnel => ({
+  organization_key: faker.string.alphanumeric(6).toUpperCase(),
+  organization_name: faker.company.name(),
+  contract_pk: faker.number.int({ min: 1, max: 10000 }),
+  b2b_contract_name: `${faker.company.name()} Contract`,
+  program_pk: faker.number.int({ min: 1, max: 10000 }),
+  program_title: `${faker.commerce.department()} Program`,
+  total_courses: 6,
+  enrolled_in_contract_courses: 50,
+  enrolled_via_program: 30,
+  program_course_completers: 12,
+  ...overrides,
+})
+
+const contentEngagementDepth = (
+  overrides: Partial<ContentEngagementDepth> = {},
+): ContentEngagementDepth => ({
+  organization_key: faker.string.alphanumeric(6).toUpperCase(),
+  organization_name: faker.company.name(),
+  courserun_readable_id: `course-v1:MITx+${faker.string.alphanumeric(5)}+2026`,
+  courserun_title: faker.commerce.productName(),
+  total_enrolled_learners: 40,
+  engaged_learners: 28,
+  engagement_rate_pct: 70,
+  total_videos_watched: 800,
+  avg_videos_per_engaged_learner: 28.6,
+  total_problems_attempted: 1000,
+  avg_problems_per_engaged_learner: 35.7,
+  total_chatbot_interactions: 60,
+  chatbot_users: 14,
+  chatbot_adoption_pct: 35,
+  certificates_earned: 16,
+  ...overrides,
+})
+
+export {
+  contentEngagementDepth,
+  contractUtilization,
+  enrollmentCompletionFunnel,
+  envelope,
+  monthlyEngagementTrend,
+  organizationId,
+  programFunnel,
+}
diff --git a/frontends/api/src/analytics/test-utils/index.ts b/frontends/api/src/analytics/test-utils/index.ts
new file mode 100644
index 0000000000..5edf680a68
--- /dev/null
+++ b/frontends/api/src/analytics/test-utils/index.ts
@@ -0,0 +1,2 @@
+export * as factories from "./factories"
+export * as urls from "./urls"
diff --git a/frontends/api/src/analytics/test-utils/urls.ts b/frontends/api/src/analytics/test-utils/urls.ts
new file mode 100644
index 0000000000..f87534403e
--- /dev/null
+++ b/frontends/api/src/analytics/test-utils/urls.ts
@@ -0,0 +1,34 @@
+import { queryify } from "ol-test-utilities"
+import analyticsAxios from "../axios"
+import { B2B_DASHBOARD_ROOT } from "../clients"
+import type { AnalyticsPageParams } from "../types"
+
+// Absolute, and read back from the configured axios instance, so the shared
+// request mock can tell analytics requests apart from Learn and MITx ones by
+// origin — same reasoning as the mitxonline URL builders.
+const getApiBaseUrl = () => analyticsAxios.defaults.baseURL
+
+const orgResource = (
+  organizationId: string,
+  resource: string,
+  params?: AnalyticsPageParams,
+) =>
+  // queryify supplies its own leading "?" (and "" when there are no params).
+  `${getApiBaseUrl()}${B2B_DASHBOARD_ROOT}/organizations/${encodeURIComponent(
+    organizationId,
+  )}/${resource}${queryify(params)}`
+
+const organizations = {
+  contractUtilization: (organizationId: string, params?: AnalyticsPageParams) =>
+    orgResource(organizationId, "contract-utilization", params),
+  enrollmentFunnel: (organizationId: string, params?: AnalyticsPageParams) =>
+    orgResource(organizationId, "enrollment-funnel", params),
+  engagementTrend: (organizationId: string, params?: AnalyticsPageParams) =>
+    orgResource(organizationId, "engagement-trend", params),
+  programFunnel: (organizationId: string, params?: AnalyticsPageParams) =>
+    orgResource(organizationId, "program-funnel", params),
+  contentEngagement: (organizationId: string, params?: AnalyticsPageParams) =>
+    orgResource(organizationId, "content-engagement", params),
+}
+
+export { organizations }
diff --git a/frontends/api/src/analytics/types.ts b/frontends/api/src/analytics/types.ts
new file mode 100644
index 0000000000..dcb8d2e99d
--- /dev/null
+++ b/frontends/api/src/analytics/types.ts
@@ -0,0 +1,131 @@
+/**
+ * Response types for the B2B dashboard tenant of the OL Analytics API.
+ *
+ * These are hand-written rather than generated: `ol-analytics-api` does not
+ * publish a TypeScript client the way MITx Online does (`@mitodl/mitxonline-api-axios`).
+ * They mirror `tenants/b2b_dashboard/models.py` — which in turn mirrors the
+ * StarRocks materialized views owned by dbt in `ol-data-platform` — column for
+ * column. When a view gains a column, update the matching type here.
+ *
+ * # Why so many nullable numbers
+ *
+ * The API applies a k-anonymity floor: any distinct-learner count below the
+ * floor, and every rate/average derived from it, comes back `null`. A `null`
+ * therefore means "suppressed to protect learner privacy", NOT zero and NOT
+ * missing — render it as such (see `SuppressibleValue` in the dashboard) and
+ * never coerce it to 0 in a chart or an average.
+ */
+
+/**
+ * Envelope shared by every org-scoped endpoint.
+ *
+ * `as_of` is the last refresh time of the single materialized view backing this
+ * endpoint, so it is per-section rather than per-page: one lagging view cannot
+ * make another section look fresher than it is. It is `null` until that view
+ * has refreshed for the first time.
+ *
+ * `total_count` is how many rows the org has in that view across every page,
+ * already net of the anonymity floor. `data.length` alone cannot distinguish a
+ * complete result from one truncated at the page cap, so this is what lets the
+ * dashboard admit to showing a subset instead of quietly dropping the rest.
+ */
+export type OrgAnalyticsResponse<RowT> = {
+  organization_id: string
+  as_of: string | null
+  total_count: number
+  data: RowT[]
+}
+
+/** `mv_b2b_contract_utilization` — grain: org x contract. */
+export type ContractUtilization = {
+  organization_key: string
+  organization_name: string
+  contract_pk: number
+  b2b_contract_name: string
+  b2b_contract_is_active: boolean
+  b2b_contract_start_date: string | null
+  b2b_contract_end_date: string | null
+  seat_limit: number | null
+  b2b_contract_membership_type: string | null
+  seats_consumed: number
+  active_learners: number | null
+  learners_certified: number | null
+  seat_utilization_pct: number | null
+  completion_rate_pct: number | null
+}
+
+/** `mv_b2b_enrollment_completion_funnel` — grain: org x contract x course run. */
+export type EnrollmentCompletionFunnel = {
+  organization_key: string
+  organization_name: string
+  contract_pk: number
+  b2b_contract_name: string
+  courserun_pk: number
+  courserun_readable_id: string
+  courserun_title: string
+  enrolled_learners: number
+  active_learners: number | null
+  passing_learners: number | null
+  certified_learners: number | null
+  active_rate_pct: number | null
+  completion_rate_pct: number | null
+}
+
+/**
+ * `mv_b2b_monthly_engagement_trend` — grain: org x year_month.
+ *
+ * `activity_year_and_month` is a `YYYY-MM` string, not a date.
+ */
+export type MonthlyEngagementTrend = {
+  organization_key: string
+  organization_name: string
+  activity_year_and_month: string
+  monthly_active_learners: number
+  new_enrollments: number | null
+  certificates_earned: number | null
+  total_videos_watched: number
+  total_problems_attempted: number
+  total_chatbot_interactions: number
+}
+
+/** `mv_b2b_program_funnel` — grain: org x contract x program. */
+export type ProgramFunnel = {
+  organization_key: string
+  organization_name: string
+  contract_pk: number
+  b2b_contract_name: string
+  program_pk: number
+  program_title: string
+  total_courses: number
+  enrolled_in_contract_courses: number
+  enrolled_via_program: number | null
+  program_course_completers: number | null
+}
+
+/** `mv_b2b_content_engagement_depth` — grain: org x course run, all-time. */
+export type ContentEngagementDepth = {
+  organization_key: string
+  organization_name: string
+  courserun_readable_id: string
+  courserun_title: string
+  total_enrolled_learners: number
+  engaged_learners: number | null
+  engagement_rate_pct: number | null
+  total_videos_watched: number | null
+  avg_videos_per_engaged_learner: number | null
+  total_problems_attempted: number | null
+  avg_problems_per_engaged_learner: number | null
+  total_chatbot_interactions: number | null
+  chatbot_users: number | null
+  chatbot_adoption_pct: number | null
+  certificates_earned: number | null
+}
+
+/**
+ * LIMIT/OFFSET paging, shared by every multi-row endpoint. The API caps `limit`
+ * at its own `max_page_size` and rejects anything larger with a 422.
+ */
+export type AnalyticsPageParams = {
+  limit?: number
+  offset?: number
+}
diff --git a/frontends/api/src/runtime/index.ts b/frontends/api/src/runtime/index.ts
index 5de93d861c..5c61f0217d 100644
--- a/frontends/api/src/runtime/index.ts
+++ b/frontends/api/src/runtime/index.ts
@@ -1,10 +1,19 @@
 import { learnAxiosClient } from "../axios"
 import { mitxAxiosClient } from "../mitxonline/axios"
+import { analyticsAxiosClient } from "../analytics/axios"
 import type { ConfigurableAxiosConfig } from "../configurableAxios"
 
 export type ApiClientsConfig = {
   learn: ConfigurableAxiosConfig
   mitxonline: ConfigurableAxiosConfig
+  /**
+   * The OL Analytics API. Optional: it is a newer service that is not deployed
+   * to every environment yet, so an environment that does not set
+   * `NEXT_PUBLIC_ANALYTICS_API_BASE_URL` still boots — only the analytics
+   * dashboard is unavailable there. Callers gate on `isAnalyticsConfigured()`
+   * rather than letting the unconfigured instance throw from its interceptor.
+   */
+  analytics?: ConfigurableAxiosConfig
 }
 
 const normalizeBaseUrl = (label: string, value: string) => {
@@ -33,6 +42,12 @@ const normalizeConfig = (config: ApiClientsConfig): ApiClientsConfig => ({
     ...config.mitxonline,
     baseUrl: normalizeBaseUrl("mitxonline", config.mitxonline.baseUrl),
   },
+  ...(config.analytics && {
+    analytics: {
+      ...config.analytics,
+      baseUrl: normalizeBaseUrl("analytics", config.analytics.baseUrl),
+    },
+  }),
 })
 
 export const configureApiClients = (config: ApiClientsConfig): void => {
@@ -48,12 +63,25 @@ export const configureApiClients = (config: ApiClientsConfig): void => {
 
   learnAxiosClient.applyConfig(normalized.learn)
   mitxAxiosClient.applyConfig(normalized.mitxonline)
+  if (normalized.analytics) {
+    analyticsAxiosClient.applyConfig(normalized.analytics)
+  }
 }
 
+/**
+ * Whether the always-required clients are configured. Deliberately excludes the
+ * analytics client so that an environment without an analytics API still
+ * reports "configured" and `bootstrapApiClients()` stays first-wins.
+ */
 export const isApiClientsConfigured = (): boolean =>
   learnAxiosClient.isConfigured() && mitxAxiosClient.isConfigured()
 
+/** Whether this environment has an analytics API to talk to. */
+export const isAnalyticsConfigured = (): boolean =>
+  analyticsAxiosClient.isConfigured()
+
 export const resetApiClientsForTests = () => {
   learnAxiosClient.resetForTests()
   mitxAxiosClient.resetForTests()
+  analyticsAxiosClient.resetForTests()
 }
diff --git a/frontends/api/src/test-utils/setupJest.ts b/frontends/api/src/test-utils/setupJest.ts
index 26b0d1536d..20ca372905 100644
--- a/frontends/api/src/test-utils/setupJest.ts
+++ b/frontends/api/src/test-utils/setupJest.ts
@@ -26,4 +26,9 @@ configureApiClients({
     csrfCookieName: "mitxcsrftoken",
     withCredentials: false,
   },
+  analytics: {
+    baseUrl: "http://api.test.learn.odl.local:8065/analytics",
+    csrfCookieName: "csrftoken",
+    withCredentials: false,
+  },
 })
diff --git a/frontends/jest-shared-setup.ts b/frontends/jest-shared-setup.ts
index ba3d96a412..f13619adf2 100644
--- a/frontends/jest-shared-setup.ts
+++ b/frontends/jest-shared-setup.ts
@@ -1,3 +1,4 @@
+import v8 from "node:v8"
 import { faker } from "@faker-js/faker/locale/en"
 import failOnConsole from "jest-fail-on-console"
 
@@ -24,6 +25,20 @@ setDefaultTimezone("UTC")
 // configures its clients with hardcoded test URLs in its own setup, and leaf
 // packages (ol-*) don't read NEXT_PUBLIC_* at all.
 
+/**
+ * jsdom does not expose `structuredClone`, which real browsers and Node both
+ * have. `@mui/x-charts` calls it while building series state, so any test that
+ * renders a chart dies with a ReferenceError without this.
+ *
+ * Implemented with v8's serializer rather than a JSON round-trip so it behaves
+ * like the real thing for Dates, Maps and Sets instead of flattening them to
+ * strings and plain objects.
+ */
+if (typeof globalThis.structuredClone === "undefined") {
+  globalThis.structuredClone = <T>(value: T): T =>
+    v8.deserialize(v8.serialize(value as never)) as T
+}
+
 // Pulled from the docs - see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 
 Object.defineProperty(window, "matchMedia", {
diff --git a/frontends/main/package.json b/frontends/main/package.json
index 066801811b..25042ae7c4 100644
--- a/frontends/main/package.json
+++ b/frontends/main/package.json
@@ -23,6 +23,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",
+    "@mui/x-charts": "^8.29.2",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
     "@opentelemetry/resources": "^2.6.1",
diff --git a/frontends/main/src/app-pages/ContractAdminPage/ContractAdminPage.tsx b/frontends/main/src/app-pages/ContractAdminPage/ContractAdminPage.tsx
index 2548013f2f..46d3ebb98e 100644
--- a/frontends/main/src/app-pages/ContractAdminPage/ContractAdminPage.tsx
+++ b/frontends/main/src/app-pages/ContractAdminPage/ContractAdminPage.tsx
@@ -12,6 +12,7 @@ import {
   alpha,
   Chip,
   Container,
+  Link,
   Pagination,
   SearchInput,
   Skeleton,
@@ -29,6 +30,18 @@ import {
 } from "@mitodl/smoot-design"
 import { AssignSeatsSection } from "./AssignSeatsSection"
 import { RowActionMenu } from "./RowActionMenu"
+import {
+  EmptyTableMessage,
+  MobileLabel,
+  STUB,
+  TableCard,
+  TableCell,
+  TableFooter,
+  TableFootnote,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from "@/components/B2BTable/B2BTable"
 import {
   managerOrganizationQueries,
   type ManagerEnrollmentCode,
@@ -38,6 +51,7 @@ import { matchOrganizationBySlug } from "@/common/utils"
 import { ForbiddenError } from "@/common/errors"
 import { FeatureFlags } from "@/common/feature_flags"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import { organizationAnalyticsView } from "@/common/urls"
 import { ErrorContent } from "../ErrorPage/ErrorPageTemplate"
 import graduateLogo from "@/public/images/dashboard/graduate.png"
 
@@ -94,6 +108,12 @@ const ContractSubtitle = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.silverGrayDark,
 })) as typeof Typography
 
+const AnalyticsLink = styled(Link)(({ theme }) => ({
+  ...theme.typography.body2,
+  display: "inline-block",
+  paddingTop: "4px",
+}))
+
 const StatsSide = styled.div(({ theme }) => ({
   display: "flex",
   gap: "64px",
@@ -185,89 +205,6 @@ const ControlsLeft = styled.div(({ theme }) => ({
   },
 }))
 
-const TableCard = styled.div(({ theme }) => ({
-  backgroundColor: theme.custom.colors.white,
-  border: `1px solid ${theme.custom.colors.lightGray2}`,
-  borderRadius: "8px",
-  padding: "24px",
-  [theme.breakpoints.down("md")]: {
-    padding: "16px",
-  },
-}))
-
-const TableHeaderRow = styled.div(({ theme }) => ({
-  display: "flex",
-  gap: "16px",
-  alignItems: "center",
-  paddingBottom: "16px",
-  borderBottom: `1px solid ${theme.custom.colors.silverGrayDark}`,
-  [theme.breakpoints.down("md")]: {
-    display: "none",
-  },
-}))
-
-const TableHeaderCell = styled("div", {
-  shouldForwardProp: (prop) => prop !== "$flex",
-})<{ $flex: number }>(({ $flex, theme }) => ({
-  flex: $flex,
-  minWidth: 0,
-  ...theme.typography.subtitle2,
-  color: theme.custom.colors.black,
-}))
-
-const TableRow = styled.div(({ theme }) => ({
-  display: "flex",
-  gap: "16px",
-  alignItems: "center",
-  padding: "14px 0",
-  borderBottom: `1px solid ${theme.custom.colors.silverGrayLight}`,
-  "&:last-child": {
-    borderBottom: "none",
-  },
-  [theme.breakpoints.down("md")]: {
-    position: "relative",
-    flexWrap: "wrap",
-    gap: "6px 0",
-    padding: "16px 40px 16px 0",
-  },
-}))
-
-const MobileLabel = styled.span(({ theme }) => ({
-  display: "none",
-  [theme.breakpoints.down("md")]: {
-    display: "inline",
-    ...theme.typography.subtitle2,
-    color: theme.custom.colors.darkGray2,
-    minWidth: "120px",
-    flexShrink: 0,
-  },
-}))
-
-const TableCell = styled("div", {
-  shouldForwardProp: (prop) => prop !== "$flex" && prop !== "$primary",
-})<{ $flex: number; $primary?: boolean }>(({ $flex, $primary, theme }) => ({
-  flex: $flex,
-  minWidth: 0,
-  ...theme.typography.body2,
-  color: theme.custom.colors.black,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  [theme.breakpoints.down("md")]: {
-    flex: "none",
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    overflow: "visible",
-    whiteSpace: "normal",
-    ...($primary && {
-      ...theme.typography.subtitle2,
-      marginBottom: "4px",
-    }),
-  },
-}))
-
 const StatusBadge = styled(Chip, {
   shouldForwardProp: (prop) => prop !== "$status",
 })<{ $status: "assigned" | "redeemed" }>(({ $status, theme }) => ({
@@ -300,27 +237,6 @@ const ActionCell = styled.div(({ theme }) => ({
   },
 }))
 
-const TableFooter = styled.div({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  paddingTop: "16px",
-})
-
-const TableFootnote = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body2,
-  color: theme.custom.colors.silverGrayDark,
-})) as typeof Typography
-
-const EmptyTableMessage = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body2,
-  color: theme.custom.colors.silverGrayDark,
-  padding: "32px 0",
-  textAlign: "center",
-})) as typeof Typography
-
-const STUB = "—"
-
 type StatusFilter = "all" | "pending" | "redeemed"
 
 const COLUMN_FLEX = {
@@ -365,6 +281,9 @@ const ContractAdminPageInternal: React.FC<ContractAdminPageInternalProps> = ({
   contractSlug,
 }) => {
   const queryClient = useQueryClient()
+  const analyticsEnabled = useFeatureFlagEnabled(
+    FeatureFlags.B2BAnalyticsDashboard,
+  )
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
   const [searchQuery, setSearchQuery] = useState("")
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("")
@@ -633,6 +552,19 @@ const ContractAdminPageInternal: React.FC<ContractAdminPageInternalProps> = ({
                   </>
                 ) : null}
               </ContractSubtitle>
+              {/* Analytics is the reporting half of this dashboard and is
+                  org-scoped, so it lives at its own URL rather than under this
+                  contract. Behind its own flag: the analytics API is not
+                  deployed everywhere this page is. */}
+              {analyticsEnabled ? (
+                <AnalyticsLink
+                  color="red"
+                  size="small"
+                  href={organizationAnalyticsView(orgSlug)}
+                >
+                  View analytics
+                </AnalyticsLink>
+              ) : null}
             </div>
           </OrgDetailsContainer>
           <StatsSide>
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/ContractKpiCards.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/ContractKpiCards.tsx
new file mode 100644
index 0000000000..f51a626eed
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/ContractKpiCards.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import React from "react"
+import { Skeleton, styled, Typography } from "ol-components"
+import type { ContractUtilization } from "api/analytics-hooks/organizations"
+import {
+  formatCount,
+  formatDate,
+  formatPercent,
+  SuppressibleValue,
+} from "./format"
+import SectionError from "./SectionError"
+
+/**
+ * Headline numbers from `mv_b2b_contract_utilization`.
+ *
+ * # Why one card group per contract rather than one org-wide row
+ *
+ * The view's grain is org x contract, and the three headline figures cannot be
+ * honestly rolled up across contracts here:
+ *
+ *  - `active_learners` counts *distinct* learners per contract, so summing it
+ *    double-counts anyone on two contracts.
+ *  - `seat_utilization_pct` and `completion_rate_pct` are rates; averaging
+ *    rates across contracts of different sizes is simply the wrong number, and
+ *    recomputing them from the raw counts is impossible whenever a count has
+ *    been suppressed.
+ *
+ * So each contract gets its own group. Most orgs have exactly one, in which
+ * case this reads as a single KPI row.
+ */
+
+const Root = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+})
+
+const ContractCard = styled.div(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  padding: "24px",
+  [theme.breakpoints.down("md")]: {
+    padding: "16px",
+  },
+}))
+
+const ContractName = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  color: theme.custom.colors.darkGray2,
+})) as typeof Typography
+
+const ContractMeta = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const StatRow = styled.div(({ theme }) => ({
+  display: "flex",
+  gap: "64px",
+  flexWrap: "wrap",
+  paddingTop: "20px",
+  [theme.breakpoints.down("md")]: {
+    gap: "24px",
+  },
+}))
+
+const StatBlock = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+})
+
+const StatValue = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h3,
+  color: theme.custom.colors.darkGray2,
+  fontVariantNumeric: "tabular-nums",
+})) as typeof Typography
+
+const StatLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const StatSubLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const Stat: React.FC<{
+  label: string
+  subLabel?: string | null
+  value: number | null
+  format?: (value: number) => string
+}> = ({ label, subLabel, value, format }) => (
+  <StatBlock role="group" aria-label={label}>
+    <StatValue>
+      <SuppressibleValue value={value} format={format} />
+    </StatValue>
+    <StatLabel>{label}</StatLabel>
+    {subLabel ? <StatSubLabel>{subLabel}</StatSubLabel> : null}
+  </StatBlock>
+)
+
+const contractDates = (row: ContractUtilization): string | null => {
+  const start = formatDate(row.b2b_contract_start_date)
+  const end = formatDate(row.b2b_contract_end_date)
+  if (start && end) return `${start} – ${end}`
+  return start ?? end
+}
+
+const ContractKpiCards: React.FC<{
+  rows: ContractUtilization[] | undefined
+  isLoading: boolean
+  isError?: boolean
+}> = ({ rows, isLoading, isError }) => {
+  if (isError) {
+    return (
+      <Root>
+        <ContractCard>
+          <SectionError />
+        </ContractCard>
+      </Root>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <Root>
+        <ContractCard>
+          <Skeleton width="260px" height="24px" />
+          <StatRow>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <StatBlock key={index}>
+                <Skeleton width="96px" height="40px" />
+                <Skeleton width="140px" height="20px" />
+              </StatBlock>
+            ))}
+          </StatRow>
+        </ContractCard>
+      </Root>
+    )
+  }
+
+  if (!rows?.length) {
+    return null
+  }
+
+  return (
+    <Root>
+      {rows.map((row) => {
+        const dates = contractDates(row)
+        const seatLimit = row.seat_limit
+        return (
+          <ContractCard key={row.contract_pk}>
+            <ContractName component="h3">{row.b2b_contract_name}</ContractName>
+            <ContractMeta>
+              {[
+                row.b2b_contract_is_active ? "Active" : "Inactive",
+                row.b2b_contract_membership_type,
+                dates,
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </ContractMeta>
+            <StatRow>
+              <Stat
+                label="Seat utilization"
+                // seat_limit is null on uncapped contracts, where a utilization
+                // percentage has no denominator and the API returns null too.
+                subLabel={
+                  seatLimit
+                    ? `${formatCount(row.seats_consumed)} of ${formatCount(seatLimit)} seats`
+                    : `${formatCount(row.seats_consumed)} seats used · no cap`
+                }
+                value={row.seat_utilization_pct}
+                format={formatPercent}
+              />
+              <Stat
+                label="Active learners"
+                value={row.active_learners}
+                format={formatCount}
+              />
+              <Stat
+                label="Completion rate"
+                subLabel={
+                  row.learners_certified === null
+                    ? undefined
+                    : `${formatCount(row.learners_certified)} certified`
+                }
+                value={row.completion_rate_pct}
+                format={formatPercent}
+              />
+            </StatRow>
+          </ContractCard>
+        )
+      })}
+    </Root>
+  )
+}
+
+export default ContractKpiCards
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/CoursePerformanceTable.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/CoursePerformanceTable.tsx
new file mode 100644
index 0000000000..e284a13fdd
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/CoursePerformanceTable.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import React from "react"
+import { Skeleton, styled, Typography } from "ol-components"
+import type { EnrollmentCompletionFunnel } from "api/analytics-hooks/organizations"
+import {
+  EmptyTableMessage,
+  MobileLabel,
+  TableCard,
+  TableCell,
+  TableFooter,
+  TableFootnote,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from "@/components/B2BTable/B2BTable"
+import {
+  formatCount,
+  formatPercent,
+  SUPPRESSED_EXPLANATION,
+  SuppressibleValue,
+} from "./format"
+import SectionError from "./SectionError"
+
+/**
+ * Per-course-run performance from `mv_b2b_enrollment_completion_funnel`.
+ *
+ * Uses the same table primitives as the contract admin page so the two B2B
+ * manager surfaces read as one product, including the below-`md` reflow where
+ * each row becomes a stack of label/value pairs.
+ */
+
+const CourseTitle = styled.span(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.custom.colors.darkGray2,
+  display: "block",
+}))
+
+const CourseId = styled.span(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.silverGrayDark,
+  display: "block",
+}))
+
+const ContractLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.custom.colors.darkGray2,
+  paddingTop: "8px",
+})) as typeof Typography
+
+const COLUMN_FLEX = {
+  course: 3,
+  enrolled: 1,
+  active: 1,
+  certified: 1,
+  activeRate: 1.2,
+  completionRate: 1.4,
+}
+
+const CoursePerformanceTable: React.FC<{
+  rows: EnrollmentCompletionFunnel[] | undefined
+  isLoading: boolean
+  isError?: boolean
+}> = ({ rows, isLoading, isError }) => {
+  if (isError) {
+    return (
+      <TableCard>
+        <SectionError />
+      </TableCard>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <TableCard>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton
+            key={index}
+            width="100%"
+            height="44px"
+            style={{ marginBottom: "8px" }}
+          />
+        ))}
+      </TableCard>
+    )
+  }
+
+  if (!rows?.length) {
+    return (
+      <TableCard>
+        <EmptyTableMessage>
+          No course enrollments recorded yet.
+        </EmptyTableMessage>
+      </TableCard>
+    )
+  }
+
+  // The view's grain includes the contract, so a course run appears once per
+  // contract it is offered under. Grouping by contract keeps those rows from
+  // reading as duplicates; the label is dropped when there is only one.
+  const contracts = new Map<number, EnrollmentCompletionFunnel[]>()
+  rows.forEach((row) => {
+    const existing = contracts.get(row.contract_pk)
+    if (existing) {
+      existing.push(row)
+    } else {
+      contracts.set(row.contract_pk, [row])
+    }
+  })
+  const showContractLabels = contracts.size > 1
+  const hasSuppressed = rows.some(
+    (row) =>
+      row.active_learners === null ||
+      row.certified_learners === null ||
+      row.passing_learners === null,
+  )
+
+  return (
+    <TableCard>
+      <div role="table" aria-label="Course performance">
+        <div role="rowgroup">
+          <TableHeaderRow role="row">
+            <TableHeaderCell role="columnheader" $flex={COLUMN_FLEX.course}>
+              Course
+            </TableHeaderCell>
+            <TableHeaderCell
+              role="columnheader"
+              $flex={COLUMN_FLEX.enrolled}
+              $numeric
+            >
+              Enrolled
+            </TableHeaderCell>
+            <TableHeaderCell
+              role="columnheader"
+              $flex={COLUMN_FLEX.active}
+              $numeric
+            >
+              Active
+            </TableHeaderCell>
+            <TableHeaderCell
+              role="columnheader"
+              $flex={COLUMN_FLEX.certified}
+              $numeric
+            >
+              Certified
+            </TableHeaderCell>
+            <TableHeaderCell
+              role="columnheader"
+              $flex={COLUMN_FLEX.activeRate}
+              $numeric
+            >
+              Active rate
+            </TableHeaderCell>
+            <TableHeaderCell
+              role="columnheader"
+              $flex={COLUMN_FLEX.completionRate}
+              $numeric
+            >
+              Completion rate
+            </TableHeaderCell>
+          </TableHeaderRow>
+        </div>
+        <div role="rowgroup">
+          {Array.from(contracts.values()).map((contractRows) => (
+            <React.Fragment key={contractRows[0].contract_pk}>
+              {showContractLabels ? (
+                <ContractLabel>
+                  {contractRows[0].b2b_contract_name}
+                </ContractLabel>
+              ) : null}
+              {contractRows.map((row) => (
+                <TableRow
+                  role="row"
+                  key={`${row.contract_pk}-${row.courserun_pk}`}
+                >
+                  <TableCell role="cell" $flex={COLUMN_FLEX.course} $primary>
+                    <span>
+                      <CourseTitle>{row.courserun_title}</CourseTitle>
+                      <CourseId>{row.courserun_readable_id}</CourseId>
+                    </span>
+                  </TableCell>
+                  <TableCell role="cell" $flex={COLUMN_FLEX.enrolled} $numeric>
+                    <MobileLabel>Enrolled</MobileLabel>
+                    {formatCount(row.enrolled_learners)}
+                  </TableCell>
+                  <TableCell role="cell" $flex={COLUMN_FLEX.active} $numeric>
+                    <MobileLabel>Active</MobileLabel>
+                    <SuppressibleValue value={row.active_learners} />
+                  </TableCell>
+                  <TableCell role="cell" $flex={COLUMN_FLEX.certified} $numeric>
+                    <MobileLabel>Certified</MobileLabel>
+                    <SuppressibleValue value={row.certified_learners} />
+                  </TableCell>
+                  <TableCell
+                    role="cell"
+                    $flex={COLUMN_FLEX.activeRate}
+                    $numeric
+                  >
+                    <MobileLabel>Active rate</MobileLabel>
+                    <SuppressibleValue
+                      value={row.active_rate_pct}
+                      format={formatPercent}
+                    />
+                  </TableCell>
+                  <TableCell
+                    role="cell"
+                    $flex={COLUMN_FLEX.completionRate}
+                    $numeric
+                  >
+                    <MobileLabel>Completion rate</MobileLabel>
+                    <SuppressibleValue
+                      value={row.completion_rate_pct}
+                      format={formatPercent}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+      {hasSuppressed ? (
+        <TableFooter>
+          <TableFootnote>{SUPPRESSED_EXPLANATION}</TableFootnote>
+        </TableFooter>
+      ) : null}
+    </TableCard>
+  )
+}
+
+export default CoursePerformanceTable
+export { COLUMN_FLEX }
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/EngagementTrendChart.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/EngagementTrendChart.tsx
new file mode 100644
index 0000000000..432c3e49be
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/EngagementTrendChart.tsx
@@ -0,0 +1,259 @@
+"use client"
+
+import React from "react"
+import { LineChart } from "@mui/x-charts/LineChart"
+import { Skeleton, styled, useTheme } from "ol-components"
+import type { MonthlyEngagementTrend } from "api/analytics-hooks/organizations"
+import {
+  EmptyTableMessage,
+  MobileLabel,
+  TableCell,
+  TableFooter,
+  TableFootnote,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from "@/components/B2BTable/B2BTable"
+import { CATEGORICAL, chartInk } from "./chartPalette"
+import {
+  formatCount,
+  formatYearMonth,
+  formatYearMonthShort,
+  SUPPRESSED_EXPLANATION,
+  SuppressibleValue,
+} from "./format"
+import SectionError from "./SectionError"
+
+/**
+ * Monthly enrollment/engagement trend from `mv_b2b_monthly_engagement_trend`.
+ *
+ * # What is and isn't on this axis
+ *
+ * All three series are counts of *people*, so they share one linear axis. The
+ * view also carries `total_videos_watched`, `total_problems_attempted` and
+ * `total_chatbot_interactions` — those are counts of *events*, run three or
+ * four orders of magnitude larger, and putting them here would need a second
+ * y-scale. A dual-axis chart invites the reader to compare two things that were
+ * never on the same scale, so they are deliberately left out; they belong in a
+ * separate content-engagement panel.
+ *
+ * # Suppressed months
+ *
+ * `new_enrollments` and `certificates_earned` are nullable under the
+ * k-anonymity floor. They are passed through to the chart as `null`, which the
+ * line series renders as a genuine gap. Coercing them to 0 would draw a dip
+ * that did not happen.
+ *
+ * # Why the chart is paired with a table
+ *
+ * The `<LineChart>` is an SVG of plotted geometry: a screen reader gets nothing
+ * readable out of it, and a suppressed month is drawn as a gap that reads
+ * identically to "no data". The table below carries the same monthly numbers as
+ * text, where a suppressed value can say so in words. Same pairing, and same
+ * reasoning, as `ProgramFunnelChart`.
+ */
+
+const ChartCard = styled.div(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  padding: "24px",
+  [theme.breakpoints.down("md")]: {
+    padding: "16px",
+  },
+}))
+
+const TableWrapper = styled.div(({ theme }) => ({
+  paddingTop: "24px",
+  marginTop: "8px",
+  borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+}))
+
+const CHART_HEIGHT = 320
+
+const COLUMN_FLEX = {
+  month: 1.4,
+  active: 1.4,
+  enrollments: 1.4,
+  certificates: 1.6,
+}
+
+/** Drives both the chart series and the columns of the table beside it. */
+const SERIES = [
+  {
+    key: "monthly_active_learners",
+    column: "active",
+    label: "Active learners",
+    color: CATEGORICAL[0],
+  },
+  {
+    key: "new_enrollments",
+    column: "enrollments",
+    label: "New enrollments",
+    color: CATEGORICAL[1],
+  },
+  {
+    key: "certificates_earned",
+    column: "certificates",
+    label: "Certificates earned",
+    color: CATEGORICAL[2],
+  },
+] as const satisfies ReadonlyArray<{
+  key: keyof MonthlyEngagementTrend
+  column: keyof typeof COLUMN_FLEX
+  label: string
+  color: string
+}>
+
+const EngagementTrendChart: React.FC<{
+  rows: MonthlyEngagementTrend[] | undefined
+  isLoading: boolean
+  isError?: boolean
+}> = ({ rows, isLoading, isError }) => {
+  // Above the early returns: hooks cannot be called conditionally.
+  const ink = chartInk(useTheme())
+
+  if (isError) {
+    return (
+      <ChartCard>
+        <SectionError />
+      </ChartCard>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <ChartCard>
+        <Skeleton variant="rectangular" width="100%" height={CHART_HEIGHT} />
+      </ChartCard>
+    )
+  }
+
+  if (!rows?.length) {
+    return (
+      <ChartCard>
+        <EmptyTableMessage>No monthly activity recorded yet.</EmptyTableMessage>
+      </ChartCard>
+    )
+  }
+
+  // The API orders by activity_year_and_month, but sorting here keeps the chart
+  // correct even if paging ever returns rows out of order.
+  const months = [...rows].sort((a, b) =>
+    a.activity_year_and_month.localeCompare(b.activity_year_and_month),
+  )
+  const labels = months.map((row) => row.activity_year_and_month)
+  const hasSuppressed = months.some(
+    (row) => row.new_enrollments === null || row.certificates_earned === null,
+  )
+
+  return (
+    <ChartCard>
+      {/* Hidden from assistive tech: the table below carries the same numbers
+          as text, so leaving the SVG exposed only makes a screen reader walk
+          hundreds of series and axis nodes to reach data it is about to be
+          given properly. Safe to hide because the chart renders nothing
+          focusable — asserted in the test, since burying a focusable node
+          inside aria-hidden would be its own violation. */}
+      <div aria-hidden>
+        <LineChart
+          height={CHART_HEIGHT}
+          margin={{ left: 8, right: 8, top: 8, bottom: 0 }}
+          // Horizontal rules only: vertical ones would fight the marks for
+          // attention without helping anyone read a monthly value.
+          grid={{ horizontal: true }}
+          xAxis={[
+            {
+              scaleType: "point",
+              data: labels,
+              valueFormatter: (value: string, context) =>
+                // The tooltip has room for the year; a dense monthly axis does not.
+                context.location === "tick"
+                  ? formatYearMonthShort(value)
+                  : formatYearMonth(value),
+              tickLabelStyle: { fill: ink.label, fontSize: 12 },
+            },
+          ]}
+          yAxis={[
+            {
+              min: 0,
+              valueFormatter: (value: number) => formatCount(value),
+              tickLabelStyle: { fill: ink.label, fontSize: 12 },
+              width: 56,
+            },
+          ]}
+          series={SERIES.map((series) => ({
+            // `null` is meaningful here: a month suppressed by the anonymity
+            // floor, drawn as a gap rather than a zero.
+            data: months.map((row) => row[series.key] ?? null),
+            label: series.label,
+            color: series.color,
+            curve: "linear",
+            // A mark per month keeps single-point series visible and gives the
+            // hover layer something bigger than a 2px line to aim at.
+            showMark: true,
+            valueFormatter: (value: number | null) =>
+              value === null
+                ? "Withheld (too few learners)"
+                : formatCount(value),
+          }))}
+          sx={{
+            "& .MuiChartsAxis-line, & .MuiChartsAxis-tick": {
+              stroke: ink.axis,
+            },
+            "& .MuiChartsGrid-line": { stroke: ink.grid },
+            "& .MuiLineElement-root": { strokeWidth: 2 },
+          }}
+        />
+      </div>
+      <TableWrapper>
+        <div role="table" aria-label="Monthly engagement">
+          <div role="rowgroup">
+            <TableHeaderRow role="row">
+              <TableHeaderCell role="columnheader" $flex={COLUMN_FLEX.month}>
+                Month
+              </TableHeaderCell>
+              {SERIES.map((series) => (
+                <TableHeaderCell
+                  key={series.key}
+                  role="columnheader"
+                  $flex={COLUMN_FLEX[series.column]}
+                  $numeric
+                >
+                  {series.label}
+                </TableHeaderCell>
+              ))}
+            </TableHeaderRow>
+          </div>
+          <div role="rowgroup">
+            {months.map((row) => (
+              <TableRow role="row" key={row.activity_year_and_month}>
+                <TableCell role="cell" $flex={COLUMN_FLEX.month} $primary>
+                  {formatYearMonth(row.activity_year_and_month)}
+                </TableCell>
+                {SERIES.map((series) => (
+                  <TableCell
+                    key={series.key}
+                    role="cell"
+                    $flex={COLUMN_FLEX[series.column]}
+                    $numeric
+                  >
+                    <MobileLabel>{series.label}</MobileLabel>
+                    <SuppressibleValue value={row[series.key]} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </div>
+        </div>
+        {hasSuppressed ? (
+          <TableFooter>
+            <TableFootnote>{SUPPRESSED_EXPLANATION}</TableFootnote>
+          </TableFooter>
+        ) : null}
+      </TableWrapper>
+    </ChartCard>
+  )
+}
+
+export default EngagementTrendChart
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/ProgramFunnelChart.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/ProgramFunnelChart.tsx
new file mode 100644
index 0000000000..20c3e754d0
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/ProgramFunnelChart.tsx
@@ -0,0 +1,279 @@
+"use client"
+
+import React from "react"
+import { BarChart } from "@mui/x-charts/BarChart"
+import { Skeleton, styled, Typography, useTheme } from "ol-components"
+import type { ProgramFunnel } from "api/analytics-hooks/organizations"
+import {
+  EmptyTableMessage,
+  MobileLabel,
+  TableCell,
+  TableFooter,
+  TableFootnote,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from "@/components/B2BTable/B2BTable"
+import { chartInk, FUNNEL_STAGES } from "./chartPalette"
+import {
+  formatCount,
+  SUPPRESSED_EXPLANATION,
+  SuppressibleValue,
+} from "./format"
+import SectionError from "./SectionError"
+
+/**
+ * Program funnel from `mv_b2b_program_funnel`.
+ *
+ * Stage order carries the meaning here — each stage is a subset of the one
+ * before it — so the bars take a single-hue light-to-dark ramp rather than
+ * three unrelated hues: the reader sees the progression in the color itself.
+ *
+ * The chart is paired with a table of the same numbers rather than treated as
+ * the whole story. That table is what makes the exact values available to
+ * screen readers, and it is where a value suppressed by the anonymity floor can
+ * say so — a bar chart can only omit the bar, which reads as zero.
+ */
+
+const Card = styled.div(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  padding: "24px",
+  [theme.breakpoints.down("md")]: {
+    padding: "16px",
+  },
+}))
+
+const ChartWrapper = styled.div(({ theme }) => ({
+  // A long program title needs room; below md the chart scrolls sideways rather
+  // than squeezing the labels into unreadable truncation.
+  overflowX: "auto",
+  [theme.breakpoints.down("md")]: {
+    "> *": { minWidth: "560px" },
+  },
+}))
+
+const TableWrapper = styled.div(({ theme }) => ({
+  paddingTop: "24px",
+  marginTop: "8px",
+  borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+}))
+
+const ContractLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.custom.colors.darkGray2,
+  paddingTop: "8px",
+})) as typeof Typography
+
+const STAGES = [
+  {
+    key: "enrolled_in_contract_courses",
+    label: "Enrolled in contract courses",
+    color: FUNNEL_STAGES[0],
+  },
+  {
+    key: "enrolled_via_program",
+    label: "Enrolled via program",
+    color: FUNNEL_STAGES[1],
+  },
+  {
+    key: "program_course_completers",
+    label: "Completed program courses",
+    color: FUNNEL_STAGES[2],
+  },
+] as const
+
+const COLUMN_FLEX = {
+  program: 3,
+  courses: 1,
+  enrolled: 1.4,
+  viaProgram: 1.4,
+  completers: 1.6,
+}
+
+/** Bar thickness plus its gap, times three stages, plus room for the legend. */
+const rowHeight = (programCount: number) =>
+  Math.max(220, programCount * 104 + 72)
+
+const ProgramFunnelChart: React.FC<{
+  rows: ProgramFunnel[] | undefined
+  isLoading: boolean
+  isError?: boolean
+}> = ({ rows, isLoading, isError }) => {
+  // Above the early returns: hooks cannot be called conditionally.
+  const ink = chartInk(useTheme())
+
+  if (isError) {
+    return (
+      <Card>
+        <SectionError />
+      </Card>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <Skeleton variant="rectangular" width="100%" height={260} />
+      </Card>
+    )
+  }
+
+  if (!rows?.length) {
+    return (
+      <Card>
+        <EmptyTableMessage>
+          No program enrollments recorded yet.
+        </EmptyTableMessage>
+      </Card>
+    )
+  }
+
+  const showContract = new Set(rows.map((row) => row.contract_pk)).size > 1
+  // A program can appear under more than one contract, so the axis label has to
+  // disambiguate or two distinct rows collapse into one visual band.
+  const labels = rows.map((row) =>
+    showContract
+      ? `${row.program_title} (${row.b2b_contract_name})`
+      : row.program_title,
+  )
+  const hasSuppressed = rows.some(
+    (row) =>
+      row.enrolled_via_program === null ||
+      row.program_course_completers === null,
+  )
+
+  return (
+    <Card>
+      {/* Hidden from assistive tech for the same reason as the trend chart:
+          the table below is the accessible copy of these numbers, so exposing
+          the SVG only adds a long walk through series and axis nodes. Nothing
+          inside is focusable, which the test asserts. */}
+      <ChartWrapper aria-hidden>
+        <BarChart
+          layout="horizontal"
+          height={rowHeight(rows.length)}
+          margin={{ left: 8, right: 16, top: 8, bottom: 8 }}
+          // Vertical rules only: on a horizontal bar chart they are the ones
+          // that let a reader compare bar lengths.
+          grid={{ vertical: true }}
+          // Rounds the data end of each bar while it stays anchored to the
+          // baseline.
+          borderRadius={4}
+          yAxis={[
+            {
+              scaleType: "band",
+              data: labels,
+              width: 220,
+              tickLabelStyle: { fill: ink.label, fontSize: 12 },
+              // A gap between category groups keeps adjacent programs from
+              // reading as one block of bars.
+              categoryGapRatio: 0.4,
+              barGapRatio: 0.1,
+            },
+          ]}
+          xAxis={[
+            {
+              min: 0,
+              valueFormatter: (value: number) => formatCount(value),
+              tickLabelStyle: { fill: ink.label, fontSize: 12 },
+            },
+          ]}
+          series={STAGES.map((stage) => ({
+            data: rows.map((row) => row[stage.key] ?? null),
+            label: stage.label,
+            color: stage.color,
+            valueFormatter: (value: number | null) =>
+              value === null
+                ? "Withheld (too few learners)"
+                : formatCount(value),
+          }))}
+          sx={{
+            "& .MuiChartsAxis-line, & .MuiChartsAxis-tick": {
+              stroke: ink.axis,
+            },
+            "& .MuiChartsGrid-line": { stroke: ink.grid },
+          }}
+        />
+      </ChartWrapper>
+      <TableWrapper>
+        <div role="table" aria-label="Program funnel">
+          <div role="rowgroup">
+            <TableHeaderRow role="row">
+              <TableHeaderCell role="columnheader" $flex={COLUMN_FLEX.program}>
+                Program
+              </TableHeaderCell>
+              <TableHeaderCell
+                role="columnheader"
+                $flex={COLUMN_FLEX.courses}
+                $numeric
+              >
+                Courses
+              </TableHeaderCell>
+              <TableHeaderCell
+                role="columnheader"
+                $flex={COLUMN_FLEX.enrolled}
+                $numeric
+              >
+                Enrolled in contract courses
+              </TableHeaderCell>
+              <TableHeaderCell
+                role="columnheader"
+                $flex={COLUMN_FLEX.viaProgram}
+                $numeric
+              >
+                Enrolled via program
+              </TableHeaderCell>
+              <TableHeaderCell
+                role="columnheader"
+                $flex={COLUMN_FLEX.completers}
+                $numeric
+              >
+                Completed program courses
+              </TableHeaderCell>
+            </TableHeaderRow>
+          </div>
+          <div role="rowgroup">
+            {rows.map((row) => (
+              <TableRow role="row" key={`${row.contract_pk}-${row.program_pk}`}>
+                <TableCell role="cell" $flex={COLUMN_FLEX.program} $primary>
+                  {row.program_title}
+                  {showContract ? (
+                    <ContractLabel component="span">
+                      {" "}
+                      · {row.b2b_contract_name}
+                    </ContractLabel>
+                  ) : null}
+                </TableCell>
+                <TableCell role="cell" $flex={COLUMN_FLEX.courses} $numeric>
+                  <MobileLabel>Courses</MobileLabel>
+                  {formatCount(row.total_courses)}
+                </TableCell>
+                <TableCell role="cell" $flex={COLUMN_FLEX.enrolled} $numeric>
+                  <MobileLabel>Enrolled in contract courses</MobileLabel>
+                  {formatCount(row.enrolled_in_contract_courses)}
+                </TableCell>
+                <TableCell role="cell" $flex={COLUMN_FLEX.viaProgram} $numeric>
+                  <MobileLabel>Enrolled via program</MobileLabel>
+                  <SuppressibleValue value={row.enrolled_via_program} />
+                </TableCell>
+                <TableCell role="cell" $flex={COLUMN_FLEX.completers} $numeric>
+                  <MobileLabel>Completed program courses</MobileLabel>
+                  <SuppressibleValue value={row.program_course_completers} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </div>
+        </div>
+        {hasSuppressed ? (
+          <TableFooter>
+            <TableFootnote>{SUPPRESSED_EXPLANATION}</TableFootnote>
+          </TableFooter>
+        ) : null}
+      </TableWrapper>
+    </Card>
+  )
+}
+
+export default ProgramFunnelChart
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/SectionError.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionError.tsx
new file mode 100644
index 0000000000..61174b2a37
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionError.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import React from "react"
+import { EmptyTableMessage } from "@/components/B2BTable/B2BTable"
+
+/**
+ * What a section renders in place of its content when its own query failed.
+ *
+ * Kept distinct from the empty state on purpose. Each section receives only
+ * `rows`, which is `undefined` on both a successful empty response and a failed
+ * one, so without this a failed section would say "No … recorded yet" — a
+ * manager would read that as "my org has no activity" rather than "we could not
+ * reach the analytics API". Same reasoning as the suppression marker: never let
+ * an absence of data render as a factual zero.
+ */
+
+const SECTION_ERROR_MESSAGE =
+  "This data could not be loaded. Please try again later."
+
+const SectionError: React.FC = () => (
+  <EmptyTableMessage role="status">{SECTION_ERROR_MESSAGE}</EmptyTableMessage>
+)
+
+export default SectionError
+export { SECTION_ERROR_MESSAGE }
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/SectionHeader.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionHeader.tsx
new file mode 100644
index 0000000000..52916974c2
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionHeader.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import React from "react"
+import { Skeleton, styled, Typography } from "ol-components"
+
+/**
+ * Each analytics section is backed by its own materialized view with its own
+ * refresh cycle, so freshness is a per-section fact, not a per-page one. The
+ * `as_of` therefore lives in the section header rather than once at the top —
+ * one lagging view must never be able to make another section look fresher
+ * than it is.
+ */
+
+const Root = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "baseline",
+  justifyContent: "space-between",
+  gap: "16px",
+  flexWrap: "wrap",
+  [theme.breakpoints.down("md")]: {
+    gap: "4px",
+  },
+}))
+
+const TitleGroup = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+})
+
+const Title = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h5,
+  color: theme.custom.colors.black,
+})) as typeof Typography
+
+const Description = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const AsOf = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.silverGrayDark,
+  whiteSpace: "nowrap",
+})) as typeof Typography
+
+const formatAsOf = (iso: string): string | null => {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  })
+}
+
+type SectionHeaderProps = {
+  title: string
+  description?: string
+  /** ISO timestamp of the backing view's last refresh; `null` before its first. */
+  asOf?: string | null
+  isLoading?: boolean
+  /** The section's query failed, so nothing is known about its freshness. */
+  isError?: boolean
+  /** Heading level, so section headings nest correctly under the page `h1`. */
+  component?: React.ElementType
+}
+
+const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  description,
+  asOf,
+  isLoading,
+  isError,
+  component = "h2",
+}) => {
+  const formatted = asOf ? formatAsOf(asOf) : null
+
+  /**
+   * A failed request tells us nothing about when the view last refreshed, so
+   * this slot claims nothing at all — "Data not yet refreshed" would be a
+   * statement about the view that we are in no position to make. The section
+   * body says it could not load.
+   */
+  const freshness = isError ? null : isLoading ? (
+    <Skeleton width="180px" height="18px" />
+  ) : formatted && asOf ? (
+    <AsOf>
+      Data as of <time dateTime={asOf}>{formatted}</time>
+    </AsOf>
+  ) : (
+    // Distinguish "the view has never refreshed" from "we are still
+    // loading" — a manager reading a zero needs to know which.
+    <AsOf>Data not yet refreshed</AsOf>
+  )
+
+  return (
+    <Root>
+      <TitleGroup>
+        <Title component={component}>{title}</Title>
+        {description ? <Description>{description}</Description> : null}
+      </TitleGroup>
+      {freshness}
+    </Root>
+  )
+}
+
+export default SectionHeader
+export { formatAsOf }
+export type { SectionHeaderProps }
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.test.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.test.tsx
new file mode 100644
index 0000000000..6451f5ed6f
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.test.tsx
@@ -0,0 +1,118 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { ThemeProvider } from "ol-components"
+import SectionTruncation from "./SectionTruncation"
+
+/**
+ * Branch-level cover for the truncation footer. The page test covers the wiring
+ * (that the real query's placeholder state reaches this component); driving the
+ * props directly here is what makes the completion branch cheap to test — via
+ * the page it would mean rendering a full result set into jsdom.
+ */
+
+const renderTruncation = (
+  props: Partial<React.ComponentProps<typeof SectionTruncation>> = {},
+) =>
+  render(
+    <ThemeProvider>
+      <SectionTruncation
+        shown={2}
+        total={340}
+        canShowAll
+        isExpanding={false}
+        onShowAll={jest.fn()}
+        {...props}
+      />
+    </ThemeProvider>,
+  )
+
+test("says nothing at all when the section holds every row", () => {
+  renderTruncation({ shown: 340, total: 340 })
+
+  expect(screen.queryByText(/Showing/)).not.toBeInTheDocument()
+  expect(screen.queryByRole("button")).not.toBeInTheDocument()
+})
+
+test("marks the control busy while the expanded page is in flight", () => {
+  renderTruncation({ isExpanding: true })
+
+  const button = screen.getByRole("button", { name: "Loading…" })
+  expect(button).toHaveAttribute("aria-busy", "true")
+  // aria-disabled rather than disabled, so a keyboard user keeps focus.
+  expect(button).toHaveAttribute("aria-disabled", "true")
+  expect(button).not.toBeDisabled()
+})
+
+test("ignores a second click while already expanding", async () => {
+  const onShowAll = jest.fn()
+  renderTruncation({ isExpanding: true, onShowAll })
+
+  await userEvent
+    .setup()
+    .click(screen.getByRole("button", { name: "Loading…" }))
+
+  expect(onShowAll).not.toHaveBeenCalled()
+})
+
+test("announces nothing before the reader has asked for anything", () => {
+  renderTruncation()
+
+  expect(screen.getByRole("status")).toHaveTextContent("")
+})
+
+/**
+ * The completion case is the one that needs the live region to outlive the
+ * control: once every row is shown, the message and button both unmount, so a
+ * region rendered inside that branch would announce into a node that no longer
+ * exists.
+ */
+test("announces completion even though the control has gone", async () => {
+  const onShowAll = jest.fn()
+  const { rerender } = renderTruncation({ onShowAll })
+
+  await userEvent
+    .setup()
+    .click(screen.getByRole("button", { name: "Show all 340" }))
+  expect(onShowAll).toHaveBeenCalled()
+
+  rerender(
+    <ThemeProvider>
+      <SectionTruncation
+        shown={340}
+        total={340}
+        canShowAll={false}
+        isExpanding={false}
+        onShowAll={onShowAll}
+      />
+    </ThemeProvider>,
+  )
+
+  expect(screen.getByRole("status")).toHaveTextContent(
+    "Now showing all 340 rows.",
+  )
+  expect(screen.queryByRole("button")).not.toBeInTheDocument()
+})
+
+test("announces the new count when the section is still partial", async () => {
+  const onShowAll = jest.fn()
+  const { rerender } = renderTruncation({ onShowAll })
+
+  await userEvent
+    .setup()
+    .click(screen.getByRole("button", { name: "Show all 340" }))
+
+  rerender(
+    <ThemeProvider>
+      <SectionTruncation
+        shown={3}
+        total={340}
+        canShowAll={false}
+        isExpanding={false}
+        onShowAll={onShowAll}
+      />
+    </ThemeProvider>,
+  )
+
+  expect(screen.getByRole("status")).toHaveTextContent("Showing 3 of 340 rows.")
+})
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.tsx
new file mode 100644
index 0000000000..a0f55fecf7
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/SectionTruncation.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import React from "react"
+import { styled, Typography } from "ol-components"
+import { Button, VisuallyHidden } from "@mitodl/smoot-design"
+import { formatCount } from "./format"
+
+/**
+ * Every analytics endpoint is paged, and a page cap is invisible in the rows
+ * themselves: 200 rows out of 340 look exactly like 340 out of 340. A manager
+ * reading a truncated table has no way to know they are missing courses unless
+ * the page says so — so it says so, and offers the rest.
+ *
+ * `total_count` is net of the anonymity floor (the API applies the same
+ * primary-cohort gate to the count as to the rows), so it can be compared
+ * against the rows on screen without ever implying there are hidden rows the
+ * caller could reach by paging.
+ *
+ * # Why this owns an announcement
+ *
+ * Expanding a section keeps the old rows on screen while the larger page loads
+ * (`keepPreviousData`), which is deliberate — blanking a table back to a
+ * skeleton on an explicit user action is worse. But it means a click otherwise
+ * produces no perceivable change at all until the rows quietly grow. The button
+ * therefore reports its own in-flight state, and the result is announced once
+ * it lands, so the click is observable without watching row counts.
+ */
+
+const Root = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  gap: "8px",
+  [theme.breakpoints.down("md")]: {
+    alignItems: "flex-start",
+    flexDirection: "column",
+  },
+}))
+
+const Message = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+type SectionTruncationProps = {
+  /** Rows currently rendered. */
+  shown: number
+  /** Rows this org has in the backing view, across every page. */
+  total: number
+  onShowAll: () => void
+  /**
+   * False once the section already holds as many rows as the API will return
+   * in one response — there is nothing further to ask for, so offering a button
+   * that cannot deliver the rest would be a lie.
+   */
+  canShowAll: boolean
+  /** The expanded page is in flight; the rows on screen are the previous ones. */
+  isExpanding: boolean
+}
+
+const SectionTruncation: React.FC<SectionTruncationProps> = ({
+  shown,
+  total,
+  onShowAll,
+  canShowAll,
+  isExpanding,
+}) => {
+  const [hasExpanded, setHasExpanded] = React.useState(false)
+
+  /**
+   * Derived from render state rather than detected as a rising/falling edge in
+   * an effect. An edge detector has to observe the in-flight render to arm
+   * itself, and React is free to batch a fast resolution into a single commit —
+   * so on a warm cache the announcement would silently never fire. This says
+   * "the user asked to expand, and we are no longer loading", which is true in
+   * either case.
+   */
+  const announcement =
+    !hasExpanded || isExpanding
+      ? ""
+      : shown >= total
+        ? `Now showing all ${formatCount(total)} rows.`
+        : `Showing ${formatCount(shown)} of ${formatCount(total)} rows.`
+
+  return (
+    <>
+      {/* Rendered even once the section is complete, so the announcement of
+          that completion has somewhere to land — a live region that unmounts
+          in the same commit as the change it describes announces nothing. */}
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </VisuallyHidden>
+      {shown < total ? (
+        <Root>
+          <Message>
+            Showing {formatCount(shown)} of {formatCount(total)}.
+          </Message>
+          {canShowAll ? (
+            <Button
+              variant="tertiary"
+              size="small"
+              // aria-disabled rather than disabled: a disabled button drops
+              // focus, which strands a keyboard user mid-action.
+              aria-disabled={isExpanding}
+              aria-busy={isExpanding}
+              onClick={() => {
+                if (isExpanding) return
+                setHasExpanded(true)
+                onShowAll()
+              }}
+            >
+              {isExpanding ? "Loading…" : `Show all ${formatCount(total)}`}
+            </Button>
+          ) : null}
+        </Root>
+      ) : null}
+    </>
+  )
+}
+
+export default SectionTruncation
+export type { SectionTruncationProps }
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/chartPalette.ts b/frontends/main/src/app-pages/DashboardPage/Analytics/chartPalette.ts
new file mode 100644
index 0000000000..b120ae3b03
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/chartPalette.ts
@@ -0,0 +1,71 @@
+import type { Theme } from "ol-components"
+
+/**
+ * Chart colors for the B2B analytics dashboard.
+ *
+ * These are not eyeballed. Every value below was checked with the data-viz
+ * validator against the *light* surface the dashboard renders on (the app has
+ * no dark theme), on the adjacent pairlist that applies to lines and bars:
+ * lightness band, chroma floor, CVD separation under simulated protanopia and
+ * deuteranopia, a normal-vision separation floor, and >= 3:1 contrast vs the
+ * surface. Changing a value means re-running that check, not swapping a hex.
+ *
+ * Hues come from the smoot-design token set (`theme.custom.colors`), so the
+ * charts stay recognisably MIT Learn. Two of them are stepped:
+ *
+ *  - AMBER is the `orange` token's hue (#FAB005), darkened to enter the
+ *    lightness band and clear 3:1 on white. The token itself is far too light
+ *    to carry a 2px line.
+ *  - The lightest funnel step is the `blue` token's hue lightened; the
+ *    `lightBlue` token is too pale to be distinguishable from the card.
+ *
+ * Green and red are deliberately absent: they are reserved for status, so that
+ * a red mark on this page always means "bad" and never "series 3".
+ */
+
+/**
+ * Categorical hues — series *identity*. Assigned in this fixed order and never
+ * cycled; the order is what makes the palette colorblind-safe, so a chart with
+ * three series takes slots 1-3 in sequence rather than picking favourites.
+ *
+ * The list stops at three because these are the three MIT Learn hues that clear
+ * the separation floor together. A fourth series is not a fourth color: fold it
+ * into "Other" or split the chart.
+ */
+const CATEGORICAL = [
+  "#1966FF", // blue token
+  "#B17F21", // orange token hue, stepped into the lightness band
+  "#FF14F0", // pink token
+] as const
+
+/**
+ * Ordinal ramp for funnel stages — one hue, light to dark, so the reader sees
+ * the progression in the color itself. Stage order is the meaning here, which
+ * is why this is a ramp and not three categorical hues.
+ */
+const FUNNEL_STAGES = [
+  "#7FA4EA", // lightest — widest stage
+  "#1966FF",
+  "#002896", // darkest — narrowest stage
+] as const
+
+/**
+ * Non-data ink. Grid and axis lines stay recessive so the marks carry the
+ * chart; labels wear text tokens rather than the series color.
+ *
+ * Read from the theme rather than pinned as hexes, unlike the two palettes
+ * above. Nothing here is a validated data color — these are the same greys the
+ * rest of the dashboard's chrome already uses, so if smoot-design retunes a
+ * token the chart chrome has to move with it or the charts drift out of step
+ * with the tables beside them. The series colors are the opposite case: they
+ * are pinned precisely *because* they must not move without re-running the
+ * contrast and CVD checks.
+ */
+const chartInk = (theme: Theme) => ({
+  grid: theme.custom.colors.lightGray2,
+  axis: theme.custom.colors.silverGrayLight,
+  label: theme.custom.colors.silverGrayDark,
+  surface: theme.custom.colors.white,
+})
+
+export { CATEGORICAL, chartInk, FUNNEL_STAGES }
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/charts.test.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/charts.test.tsx
new file mode 100644
index 0000000000..bf495aea62
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/charts.test.tsx
@@ -0,0 +1,326 @@
+import React from "react"
+import { render, screen, within } from "@testing-library/react"
+import { ThemeProvider, useTheme } from "ol-components"
+import type { Theme } from "ol-components"
+import { factories } from "api/analytics-test-utils"
+import EngagementTrendChart from "./EngagementTrendChart"
+import ProgramFunnelChart from "./ProgramFunnelChart"
+import { CATEGORICAL, chartInk, FUNNEL_STAGES } from "./chartPalette"
+
+/**
+ * Captures the live theme so the ink assertions below compare against the
+ * token, not a hex copied into this file — copying one here would reintroduce
+ * exactly the drift the theme lookup exists to prevent.
+ */
+let capturedTheme: Theme
+const ThemeProbe = () => {
+  capturedTheme = useTheme() as Theme
+  return null
+}
+
+/**
+ * Smoke coverage for the real charts (they are stubbed out in the page test).
+ * jsdom does no layout, so there is no point asserting on geometry; what these
+ * check is that the chart code runs, draws one mark per series, and paints
+ * those marks with the validated palette rather than the library's defaults.
+ */
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(
+    <ThemeProvider>
+      <ThemeProbe />
+      {ui}
+    </ThemeProvider>,
+  )
+
+/**
+ * The two palettes above stay pinned as hexes on purpose — they are validated
+ * data colors and must not move without re-running the contrast/CVD checks.
+ * The non-data ink is the opposite case: it is the same grey chrome the tables
+ * beside these charts use, so it reads from the theme and moves when a
+ * smoot-design token is retuned. Asserted against the live token rather than a
+ * literal, since a literal here would just relocate the duplication and would
+ * still pass if the module went back to hardcoding.
+ */
+describe("chartInk", () => {
+  test("resolves non-data ink from theme tokens, not pinned hexes", () => {
+    renderWithTheme(<div />)
+    const colors = capturedTheme.custom.colors
+
+    expect(chartInk(capturedTheme)).toEqual({
+      grid: colors.lightGray2,
+      axis: colors.silverGrayLight,
+      label: colors.silverGrayDark,
+      surface: colors.white,
+    })
+  })
+})
+
+/**
+ * Both charts are paired with a table carrying the same numbers, which makes
+ * the SVG redundant for a screen reader — and worse than redundant, since
+ * traversing hundreds of series and axis nodes to reach data that is about to
+ * be presented properly is pure noise. So the chart is hidden and the table is
+ * the accessible copy.
+ *
+ * The second assertion in each case is the one that keeps this honest:
+ * `aria-hidden` on a subtree containing focusable content is itself a
+ * violation, because keyboard focus can land somewhere screen readers have been
+ * told does not exist. Neither chart renders anything focusable today; this
+ * fails if a future library version starts to.
+ */
+describe.each([
+  [
+    "EngagementTrendChart",
+    () => (
+      <EngagementTrendChart
+        rows={[factories.monthlyEngagementTrend()]}
+        isLoading={false}
+      />
+    ),
+    "Monthly engagement",
+  ],
+  [
+    "ProgramFunnelChart",
+    () => (
+      <ProgramFunnelChart
+        rows={[factories.programFunnel()]}
+        isLoading={false}
+      />
+    ),
+    "Program funnel",
+  ],
+])("%s accessibility", (_name, renderChart, tableLabel) => {
+  test("hides the chart from assistive tech but keeps its table", () => {
+    const { container } = renderWithTheme(renderChart())
+
+    // eslint-disable-next-line testing-library/no-container
+    const svg = container.querySelector("svg")
+    expect(svg).toBeInTheDocument()
+    expect(svg?.closest("[aria-hidden='true']")).not.toBeNull()
+
+    // The table is the accessible equivalent, so it must stay exposed.
+    const table = screen.getByRole("table", { name: tableLabel })
+    expect(table.closest("[aria-hidden='true']")).toBeNull()
+  })
+
+  test("puts nothing focusable inside the hidden subtree", () => {
+    const { container } = renderWithTheme(renderChart())
+
+    // eslint-disable-next-line testing-library/no-container
+    const hidden = container.querySelector("[aria-hidden='true']")
+    const focusable = hidden?.querySelectorAll(
+      "a[href], button, input, select, textarea, [tabindex]",
+    )
+    expect(focusable).toHaveLength(0)
+  })
+})
+
+describe("EngagementTrendChart", () => {
+  const months = [
+    factories.monthlyEngagementTrend({ activity_year_and_month: "2026-01" }),
+    factories.monthlyEngagementTrend({ activity_year_and_month: "2026-02" }),
+  ]
+
+  test("renders a line per series in the categorical palette", () => {
+    const { container } = renderWithTheme(
+      <EngagementTrendChart rows={months} isLoading={false} />,
+    )
+
+    // Testing Library has no query for "which paint attribute did this SVG
+    // element get", which is exactly what this asserts, so the container query
+    // is the only way to check the palette actually reached the marks.
+    // eslint-disable-next-line testing-library/no-container
+    const lines = container.querySelectorAll(".MuiLineElement-root")
+    expect(lines).toHaveLength(CATEGORICAL.length)
+    const strokes = Array.from(lines).map((line) => line.getAttribute("stroke"))
+    expect(strokes).toEqual([...CATEGORICAL])
+  })
+
+  // Scoped to the legend: the paired table repeats every series name as a
+  // column header, which is the point of it, so an unscoped query matches twice.
+  test("labels every series so identity is never carried by color alone", () => {
+    renderWithTheme(<EngagementTrendChart rows={months} isLoading={false} />)
+
+    expect(
+      screen.getByText("Active learners", { selector: ".MuiChartsLabel-root" }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText("New enrollments", { selector: ".MuiChartsLabel-root" }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText("Certificates earned", {
+        selector: ".MuiChartsLabel-root",
+      }),
+    ).toBeInTheDocument()
+  })
+
+  test("shows an empty state rather than an empty chart", () => {
+    renderWithTheme(<EngagementTrendChart rows={[]} isLoading={false} />)
+    expect(
+      screen.getByText("No monthly activity recorded yet."),
+    ).toBeInTheDocument()
+  })
+
+  /**
+   * A month suppressed by the anonymity floor must be a gap in the line, not a
+   * dip to zero — so the null has to survive all the way into the series data.
+   */
+  test("renders a suppressed month without inventing a zero", () => {
+    const rows = [
+      factories.monthlyEngagementTrend({
+        activity_year_and_month: "2026-01",
+        new_enrollments: null,
+        certificates_earned: null,
+      }),
+      factories.monthlyEngagementTrend({ activity_year_and_month: "2026-02" }),
+    ]
+
+    expect(() =>
+      renderWithTheme(<EngagementTrendChart rows={rows} isLoading={false} />),
+    ).not.toThrow()
+  })
+
+  /**
+   * The SVG is unreadable to a screen reader, so the monthly numbers have to
+   * exist as text too — the same pairing `ProgramFunnelChart` uses.
+   */
+  test("pairs the chart with a table of the same numbers", () => {
+    renderWithTheme(
+      <EngagementTrendChart
+        rows={[
+          factories.monthlyEngagementTrend({
+            activity_year_and_month: "2026-01",
+            monthly_active_learners: 84,
+            new_enrollments: 21,
+            certificates_earned: 7,
+          }),
+        ]}
+        isLoading={false}
+      />,
+    )
+
+    const table = screen.getByRole("table", { name: "Monthly engagement" })
+    expect(within(table).getByText("Jan 2026")).toBeInTheDocument()
+    expect(within(table).getByText("84")).toBeInTheDocument()
+    expect(within(table).getByText("21")).toBeInTheDocument()
+    expect(within(table).getByText("7")).toBeInTheDocument()
+  })
+
+  /**
+   * A gap in a line reads as "no data" — only the table can say a month was
+   * withheld and why.
+   */
+  test("explains suppressed months in the table instead of leaving a bare gap", () => {
+    renderWithTheme(
+      <EngagementTrendChart
+        rows={[
+          factories.monthlyEngagementTrend({
+            activity_year_and_month: "2026-01",
+            certificates_earned: null,
+          }),
+        ]}
+        isLoading={false}
+      />,
+    )
+
+    expect(
+      screen.getAllByLabelText(/Withheld: too few learners/).length,
+    ).toBeGreaterThan(0)
+    expect(screen.getByText(/Withheld: too few learners/)).toBeInTheDocument()
+  })
+
+  test("says the data could not be loaded rather than showing an empty state", () => {
+    renderWithTheme(
+      <EngagementTrendChart rows={undefined} isLoading={false} isError />,
+    )
+
+    expect(
+      screen.getByText(
+        "This data could not be loaded. Please try again later.",
+      ),
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByText("No monthly activity recorded yet."),
+    ).not.toBeInTheDocument()
+  })
+})
+
+describe("ProgramFunnelChart", () => {
+  const programs = [
+    factories.programFunnel({
+      program_title: "Widget Engineering",
+      enrolled_in_contract_courses: 50,
+      enrolled_via_program: 30,
+      program_course_completers: 12,
+    }),
+  ]
+
+  /**
+   * Asserted via the legend swatches rather than the bars themselves: bar
+   * geometry is derived from measured width, and jsdom reports zero, so no
+   * `.MuiBarElement-root` is ever emitted here. The legend marks carry the same
+   * per-series color, which is what this is actually checking.
+   */
+  test("assigns the ordinal ramp to the funnel stages in order", () => {
+    const { container } = renderWithTheme(
+      <ProgramFunnelChart rows={programs} isLoading={false} />,
+    )
+
+    // See the note on the line-chart palette test: paint attributes are not
+    // reachable through a Testing Library query.
+    // eslint-disable-next-line testing-library/no-container
+    const swatches = container.querySelectorAll(".MuiChartsLabelMark-fill")
+    expect(swatches).toHaveLength(FUNNEL_STAGES.length)
+    expect(
+      Array.from(swatches).map((swatch) => swatch.getAttribute("fill")),
+    ).toEqual([...FUNNEL_STAGES])
+  })
+
+  test("labels every funnel stage so identity is never carried by color alone", () => {
+    renderWithTheme(<ProgramFunnelChart rows={programs} isLoading={false} />)
+
+    expect(
+      screen.getByText("Enrolled in contract courses", {
+        selector: ".MuiChartsLabel-root",
+      }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText("Enrolled via program", {
+        selector: ".MuiChartsLabel-root",
+      }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText("Completed program courses", {
+        selector: ".MuiChartsLabel-root",
+      }),
+    ).toBeInTheDocument()
+  })
+
+  test("pairs the chart with a table of the same numbers", () => {
+    renderWithTheme(<ProgramFunnelChart rows={programs} isLoading={false} />)
+
+    const table = screen.getByRole("table", { name: "Program funnel" })
+    expect(table).toBeInTheDocument()
+    expect(screen.getByText("50")).toBeInTheDocument()
+    expect(screen.getByText("30")).toBeInTheDocument()
+    expect(screen.getByText("12")).toBeInTheDocument()
+  })
+
+  test("explains suppressed stages in the table instead of omitting them silently", () => {
+    renderWithTheme(
+      <ProgramFunnelChart
+        rows={[
+          factories.programFunnel({
+            program_course_completers: null,
+          }),
+        ]}
+        isLoading={false}
+      />,
+    )
+
+    expect(
+      screen.getAllByLabelText(/Withheld: too few learners/).length,
+    ).toBeGreaterThan(0)
+  })
+})
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/format.test.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/format.test.tsx
new file mode 100644
index 0000000000..aefb4a1bb9
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/format.test.tsx
@@ -0,0 +1,86 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ThemeProvider } from "ol-components"
+import {
+  formatCount,
+  formatDate,
+  formatPercent,
+  formatYearMonth,
+  formatYearMonthShort,
+  SUPPRESSED_EXPLANATION,
+  SuppressibleValue,
+} from "./format"
+
+describe("formatYearMonth", () => {
+  test.each([
+    { input: "2026-01", long: "Jan 2026", short: "Jan" },
+    { input: "2026-12", long: "Dec 2026", short: "Dec" },
+  ])("formats $input as $long", ({ input, long, short }) => {
+    expect(formatYearMonth(input)).toBe(long)
+    expect(formatYearMonthShort(input)).toBe(short)
+  })
+
+  /**
+   * `new Date("2026-03")` is parsed as UTC midnight, which renders as February
+   * for anyone west of Greenwich. The formatter builds a local date instead;
+   * this is the regression guard for that.
+   */
+  test("does not shift the month across timezones", () => {
+    expect(formatYearMonth("2026-03")).toBe("Mar 2026")
+  })
+
+  test("passes an unparseable value through rather than rendering garbage", () => {
+    expect(formatYearMonth("not-a-month")).toBe("not-a-month")
+    expect(formatYearMonthShort("")).toBe("")
+  })
+})
+
+describe("number formatting", () => {
+  test("counts are thousands-separated", () => {
+    expect(formatCount(1234567)).toBe("1,234,567")
+  })
+
+  test("percentages keep at most one decimal", () => {
+    expect(formatPercent(62)).toBe("62%")
+    expect(formatPercent(32.35)).toBe("32.4%")
+  })
+
+  test("formatDate returns null for missing or invalid dates", () => {
+    expect(formatDate(null)).toBeNull()
+    expect(formatDate(undefined)).toBeNull()
+    expect(formatDate("nope")).toBeNull()
+    expect(formatDate("2026-01-15")).toBe("Jan 15, 2026")
+  })
+})
+
+describe("SuppressibleValue", () => {
+  const renderValue = (value: number | null) =>
+    render(
+      <ThemeProvider>
+        <SuppressibleValue value={value} />
+      </ThemeProvider>,
+    )
+
+  test("renders the formatted number when the API returned one", () => {
+    renderValue(42)
+    expect(screen.getByText("42")).toBeInTheDocument()
+  })
+
+  /**
+   * The whole point of the component: a suppressed value must never read as
+   * zero, and its reason must be available without hovering.
+   */
+  test("explains a suppressed value instead of showing zero", () => {
+    renderValue(null)
+    expect(screen.queryByText("0")).not.toBeInTheDocument()
+    expect(screen.getByLabelText(SUPPRESSED_EXPLANATION)).toBeInTheDocument()
+  })
+
+  test("zero is a real value and is rendered as such", () => {
+    renderValue(0)
+    expect(screen.getByText("0")).toBeInTheDocument()
+    expect(
+      screen.queryByLabelText(SUPPRESSED_EXPLANATION),
+    ).not.toBeInTheDocument()
+  })
+})
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/format.tsx b/frontends/main/src/app-pages/DashboardPage/Analytics/format.tsx
new file mode 100644
index 0000000000..741ab281cf
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/format.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import React from "react"
+import { styled, Tooltip } from "ol-components"
+
+/**
+ * The analytics API nulls out any learner count below its k-anonymity floor,
+ * along with every rate and average derived from it. A `null` from these
+ * endpoints therefore means "withheld to protect learner privacy" — it is not
+ * zero, and it is not missing data.
+ *
+ * Everything in this module exists to keep that distinction visible: a
+ * suppressed value renders as a marked placeholder that says why, and no
+ * formatter silently turns `null` into `0`.
+ */
+
+/** Copy used by both the tooltip and the per-section footnote, so they agree. */
+const SUPPRESSED_EXPLANATION =
+  "Withheld: too few learners in this group to report without identifying them."
+
+/** Thousands-separated integer. */
+const formatCount = (value: number): string => value.toLocaleString("en-US")
+
+/** One decimal place, because the API's rates are already rounded percentages. */
+const formatPercent = (value: number): string =>
+  `${value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  })}%`
+
+/** One decimal place, for per-learner averages. */
+const formatAverage = (value: number): string =>
+  value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  })
+
+/**
+ * `activity_year_and_month` arrives as a `YYYY-MM` string. Parsed by hand
+ * rather than with `new Date("2026-03")` — that parses as UTC midnight and then
+ * renders as the *previous* month for anyone west of Greenwich.
+ */
+const parseYearMonth = (yearMonth: string): Date | null => {
+  const match = /^(\d{4})-(\d{2})$/.exec(yearMonth)
+  if (!match) return null
+  return new Date(Number(match[1]), Number(match[2]) - 1, 1)
+}
+
+/** Month and year, e.g. "Mar 2026". */
+const formatYearMonth = (yearMonth: string): string =>
+  parseYearMonth(yearMonth)?.toLocaleDateString("en-US", {
+    month: "short",
+    year: "numeric",
+  }) ?? yearMonth
+
+/** Short month for a dense axis, e.g. "Mar". */
+const formatYearMonthShort = (yearMonth: string): string =>
+  parseYearMonth(yearMonth)?.toLocaleDateString("en-US", { month: "short" }) ??
+  yearMonth
+
+/**
+ * Contract start/end dates, which arrive as date-only `YYYY-MM-DD` strings.
+ *
+ * Built as a local date for the same reason as `parseYearMonth`: `new
+ * Date("2026-01-15")` is parsed as UTC midnight, so `toLocaleDateString`
+ * renders it as the 14th for any reader west of Greenwich. A contract that
+ * starts on the 15th must not display as starting on the 14th.
+ */
+const formatDate = (iso: string | null | undefined): string | null => {
+  if (!iso) return null
+  const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso)
+  const date = dateOnly
+    ? new Date(
+        Number(dateOnly[1]),
+        Number(dateOnly[2]) - 1,
+        Number(dateOnly[3]),
+      )
+    : new Date(iso)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+const SuppressedMark = styled.span(({ theme }) => ({
+  color: theme.custom.colors.silverGrayDark,
+  // Dotted underline marks it as explained-on-hover rather than an em dash the
+  // reader is meant to interpret as "zero".
+  borderBottom: `1px dotted ${theme.custom.colors.silverGray}`,
+  cursor: "help",
+}))
+
+/**
+ * Placeholder for a value the API suppressed. Carries its explanation to
+ * pointer users via the tooltip and to assistive tech via the accessible label,
+ * so the meaning never depends on hover alone.
+ */
+const Suppressed: React.FC = () => (
+  <Tooltip title={SUPPRESSED_EXPLANATION}>
+    <SuppressedMark aria-label={SUPPRESSED_EXPLANATION} tabIndex={0}>
+      —
+    </SuppressedMark>
+  </Tooltip>
+)
+
+/**
+ * Render a possibly-suppressed value: the formatted number when present, the
+ * suppression marker when not.
+ */
+const SuppressibleValue: React.FC<{
+  value: number | null | undefined
+  format?: (value: number) => string
+}> = ({ value, format = formatCount }) =>
+  value === null || value === undefined ? <Suppressed /> : <>{format(value)}</>
+
+export {
+  formatAverage,
+  formatCount,
+  formatDate,
+  formatPercent,
+  formatYearMonth,
+  formatYearMonthShort,
+  Suppressed,
+  SUPPRESSED_EXPLANATION,
+  SuppressibleValue,
+}
diff --git a/frontends/main/src/app-pages/DashboardPage/Analytics/orgUuid.ts b/frontends/main/src/app-pages/DashboardPage/Analytics/orgUuid.ts
new file mode 100644
index 0000000000..5c90cf37ef
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/Analytics/orgUuid.ts
@@ -0,0 +1,28 @@
+import type { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2"
+
+/**
+ * The Keycloak organization UUID, which is what the analytics API keys every
+ * org endpoint on — it is the only identifier stable across the JWT, MITx
+ * Online and StarRocks (see mitodl/ol-analytics-api#13).
+ *
+ * MITx Online exposes it on `OrganizationPageSerializer` as
+ * `sso_organization_id` (mitodl/mitxonline#3789). That change has not been cut
+ * into a release of `@mitodl/mitxonline-api-axios` yet, so the generated
+ * `OrganizationPage` type does not declare the field and we have to read it
+ * off the wire ourselves.
+ *
+ * Returning `null` when it is absent is the load-bearing part: it is exactly
+ * what happens when mit-learn is pointed at a MITx Online deploy that predates
+ * that PR, and it must surface as "analytics unavailable for this org" rather
+ * than as a request to the analytics API with `undefined` in the path.
+ *
+ * TODO: delete this and read `org.sso_organization_id` directly once the
+ * regenerated client is picked up in `frontends/api/package.json`.
+ */
+const getOrgUuid = (org: OrganizationPage | undefined): string | null => {
+  const value = (org as { sso_organization_id?: unknown } | undefined)
+    ?.sso_organization_id
+  return typeof value === "string" && value.length > 0 ? value : null
+}
+
+export { getOrgUuid }
diff --git a/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.test.tsx
new file mode 100644
index 0000000000..9a7566a523
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.test.tsx
@@ -0,0 +1,619 @@
+import React from "react"
+import { renderWithProviders, screen, TestingErrorBoundary } from "@/test-utils"
+import { setMockResponse } from "api/test-utils"
+import { factories, urls } from "api/mitxonline-test-utils"
+import {
+  factories as analyticsFactories,
+  urls as analyticsUrls,
+} from "api/analytics-test-utils"
+import { waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { AxiosError } from "axios"
+import type { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { allowConsoleErrors } from "ol-test-utilities"
+import { ForbiddenError } from "@/common/errors"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import AnalyticsContent from "./AnalyticsContent"
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    return <img {...props} />
+  },
+}))
+
+/**
+ * The charts are stubbed out. They render SVG whose geometry depends on
+ * measured layout, which jsdom does not do — exercising them here would assert
+ * on nothing useful. What this file covers is the page's own behaviour: access,
+ * availability, freshness and suppression. The numbers those charts draw are
+ * also rendered as text (KPI cards, the course table, the funnel's table view),
+ * so they are still asserted on below.
+ */
+jest.mock("@mui/x-charts/LineChart", () => ({
+  __esModule: true,
+  LineChart: () => <div data-testid="line-chart" />,
+}))
+jest.mock("@mui/x-charts/BarChart", () => ({
+  __esModule: true,
+  BarChart: () => <div data-testid="bar-chart" />,
+}))
+
+jest.mock("posthog-js/react", () => ({
+  ...jest.requireActual("posthog-js/react"),
+  useFeatureFlagEnabled: jest.fn(),
+}))
+jest.mock("@/common/useFeatureFlagsLoaded")
+const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
+const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+
+const managerOrgsUrl = urls.organization.managerOrganizationsList()
+
+const ORG_UUID = "3fa85f64-5717-4562-b3fc-2c963f66afa6"
+
+/**
+ * `sso_organization_id` is not on the generated `OrganizationPage` type yet
+ * (mitodl/mitxonline#3789 has not been released into the client), so it is
+ * spliced on here the same way it arrives on the wire.
+ */
+const orgWithUuid = (
+  overrides: Partial<OrganizationPage> = {},
+  ssoOrganizationId: string | null = ORG_UUID,
+) => {
+  const org = factories.organizations.organization({
+    contracts: [factories.contracts.contract()],
+    ...overrides,
+  })
+  return ssoOrganizationId
+    ? { ...org, sso_organization_id: ssoOrganizationId }
+    : org
+}
+
+const setManagerOrgs = (orgs: unknown[]) => {
+  setMockResponse.get(managerOrgsUrl, {
+    count: orgs.length,
+    next: null,
+    previous: null,
+    results: orgs,
+  })
+}
+
+const AS_OF = "2026-07-01T04:00:00Z"
+
+const setAnalyticsResponses = ({
+  utilization = [analyticsFactories.contractUtilization()],
+  trend = [analyticsFactories.monthlyEngagementTrend()],
+  courses = [analyticsFactories.enrollmentCompletionFunnel()],
+  programs = [analyticsFactories.programFunnel()],
+  page = { limit: 200 },
+}: {
+  utilization?: ReturnType<typeof analyticsFactories.contractUtilization>[]
+  trend?: ReturnType<typeof analyticsFactories.monthlyEngagementTrend>[]
+  courses?: ReturnType<typeof analyticsFactories.enrollmentCompletionFunnel>[]
+  programs?: ReturnType<typeof analyticsFactories.programFunnel>[]
+  page?: { limit: number }
+} = {}) => {
+  setMockResponse.get(
+    analyticsUrls.organizations.contractUtilization(ORG_UUID, page),
+    analyticsFactories.envelope(utilization, { as_of: AS_OF }),
+  )
+  setMockResponse.get(
+    analyticsUrls.organizations.engagementTrend(ORG_UUID, page),
+    analyticsFactories.envelope(trend, { as_of: AS_OF }),
+  )
+  setMockResponse.get(
+    analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, page),
+    analyticsFactories.envelope(courses, { as_of: AS_OF }),
+  )
+  setMockResponse.get(
+    analyticsUrls.organizations.programFunnel(ORG_UUID, page),
+    analyticsFactories.envelope(programs, { as_of: AS_OF }),
+  )
+}
+
+describe("AnalyticsContent", () => {
+  beforeEach(() => {
+    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    setMockResponse.get(
+      urls.userMe.get(),
+      factories.user.user({ email: "manager@test.com" }),
+    )
+  })
+
+  describe("access", () => {
+    test("throws ForbiddenError when the feature flag is off", () => {
+      mockedUseFeatureFlagEnabled.mockReturnValue(false)
+      allowConsoleErrors()
+
+      expect(() =>
+        renderWithProviders(<AnalyticsContent orgSlug="any-org" />),
+      ).toThrow(ForbiddenError)
+    })
+
+    test("waits for PostHog rather than 403-ing on a bootstrapped false", () => {
+      mockedUseFeatureFlagsLoaded.mockReturnValue(false)
+      mockedUseFeatureFlagEnabled.mockReturnValue(undefined)
+
+      expect(() =>
+        renderWithProviders(<AnalyticsContent orgSlug="any-org" />),
+      ).not.toThrow()
+    })
+
+    test("denies access when the caller does not manage the requested org", async () => {
+      setManagerOrgs([orgWithUuid()])
+
+      renderWithProviders(<AnalyticsContent orgSlug="not-my-org" />)
+
+      await screen.findByRole("heading", { name: "Access denied" })
+    })
+
+    /**
+     * A 403 from the analytics API is not handled inside the page: the browser
+     * query client throws on 401/403 so the route's error boundary handles it,
+     * the same as every other page. This asserts the error actually escapes
+     * rather than being swallowed into a half-rendered dashboard.
+     */
+    test("lets an analytics 403 reach the error boundary", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      allowConsoleErrors()
+      const page = { limit: 200 }
+      const forbidden = ["Forbidden", { code: 403 }] as const
+      setMockResponse.get(
+        analyticsUrls.organizations.contractUtilization(ORG_UUID, page),
+        ...forbidden,
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.engagementTrend(ORG_UUID, page),
+        ...forbidden,
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, page),
+        ...forbidden,
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.programFunnel(ORG_UUID, page),
+        ...forbidden,
+      )
+
+      const onError = jest.fn()
+      renderWithProviders(
+        <TestingErrorBoundary onError={onError}>
+          <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />
+        </TestingErrorBoundary>,
+      )
+
+      await waitFor(() => expect(onError).toHaveBeenCalled())
+      expect((onError.mock.calls[0][0] as AxiosError).response?.status).toBe(
+        403,
+      )
+    })
+
+    test("shows an error page when the manager org lookup fails", async () => {
+      allowConsoleErrors()
+      setMockResponse.get(managerOrgsUrl, "Internal Server Error", {
+        code: 500,
+      })
+
+      renderWithProviders(<AnalyticsContent orgSlug="any-org" />)
+
+      await screen.findByRole("heading", { name: "Something went wrong" })
+    })
+  })
+
+  describe("availability", () => {
+    /**
+     * An org whose MITx Online record predates the `sso_organization_id`
+     * field has no key the analytics API can be called with. That must read as
+     * "unavailable", never as a request with `undefined` in the path.
+     */
+    test("reports unavailable, and issues no request, when the org has no UUID", async () => {
+      const org = orgWithUuid({}, null)
+      setManagerOrgs([org])
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText(
+        /Analytics is not available for this organization/,
+      )
+      // No analytics response was ever registered; reaching the API would have
+      // failed the test via the mock adapter's console.error.
+      expect(
+        screen.queryByRole("heading", { name: "Contract utilization" }),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("content", () => {
+    test("renders every section with its own as-of date", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByRole("heading", { name: "Contract utilization" })
+      expect(
+        screen.getByRole("heading", { name: "Monthly engagement" }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole("heading", { name: "Course performance" }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole("heading", { name: "Program funnel" }),
+      ).toBeInTheDocument()
+
+      // One "Data as of" per section — freshness is per materialized view.
+      const asOfLabels = await screen.findAllByText(/Data as of/)
+      expect(asOfLabels).toHaveLength(4)
+    })
+
+    test("renders the KPI figures from contract utilization", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses({
+        utilization: [
+          analyticsFactories.contractUtilization({
+            b2b_contract_name: "Acme Site License",
+            seats_consumed: 62,
+            seat_limit: 100,
+            active_learners: 48,
+            seat_utilization_pct: 62,
+            completion_rate_pct: 32.3,
+          }),
+        ],
+      })
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByRole("heading", { name: "Acme Site License" })
+      expect(screen.getByText("62%")).toBeInTheDocument()
+      expect(screen.getByText("48")).toBeInTheDocument()
+      expect(screen.getByText("32.3%")).toBeInTheDocument()
+      expect(screen.getByText("62 of 100 seats")).toBeInTheDocument()
+    })
+
+    test("renders course rows and marks suppressed values as withheld", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses({
+        courses: [
+          analyticsFactories.enrollmentCompletionFunnel({
+            courserun_title: "Intro to Widgets",
+            enrolled_learners: 40,
+            // Below the anonymity floor: must not render as 0.
+            certified_learners: null,
+            completion_rate_pct: null,
+          }),
+        ],
+      })
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText("Intro to Widgets")
+      expect(screen.getByText("40")).toBeInTheDocument()
+      expect(
+        screen.getAllByLabelText(/Withheld: too few learners/).length,
+      ).toBeGreaterThan(0)
+      expect(
+        screen.getAllByText(/Withheld: too few learners/).length,
+      ).toBeGreaterThan(0)
+    })
+
+    test("renders the program funnel's table view alongside the chart", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses({
+        programs: [
+          analyticsFactories.programFunnel({
+            program_title: "Widget Engineering",
+            total_courses: 6,
+            enrolled_in_contract_courses: 50,
+            enrolled_via_program: 30,
+            program_course_completers: 12,
+          }),
+        ],
+      })
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText("Widget Engineering")
+      // Scoped to this table: the monthly engagement section renders its own
+      // table of counts, which can legitimately carry the same numbers.
+      const table = screen.getByRole("table", { name: "Program funnel" })
+      expect(within(table).getByText("50")).toBeInTheDocument()
+      expect(within(table).getByText("30")).toBeInTheDocument()
+      expect(within(table).getByText("12")).toBeInTheDocument()
+    })
+
+    test("says so when a view has never refreshed rather than implying freshness", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      const page = { limit: 200 }
+      setMockResponse.get(
+        analyticsUrls.organizations.contractUtilization(ORG_UUID, page),
+        analyticsFactories.envelope(
+          [analyticsFactories.contractUtilization()],
+          {
+            as_of: null,
+          },
+        ),
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.engagementTrend(ORG_UUID, page),
+        analyticsFactories.envelope([], { as_of: null }),
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, page),
+        analyticsFactories.envelope([], { as_of: null }),
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.programFunnel(ORG_UUID, page),
+        analyticsFactories.envelope([], { as_of: null }),
+      )
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      expect(
+        (await screen.findAllByText("Data not yet refreshed")).length,
+      ).toBe(4)
+      expect(screen.queryByText(/Data as of/)).not.toBeInTheDocument()
+    })
+
+    test("renders empty states rather than blank sections", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses({ courses: [], programs: [], trend: [] })
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText("No course enrollments recorded yet.")
+      expect(
+        screen.getByText("No program enrollments recorded yet."),
+      ).toBeInTheDocument()
+    })
+
+    /**
+     * A section whose query failed has no rows and no `as_of`, which is exactly
+     * what a successful-but-empty section looks like. It must not borrow that
+     * section's copy: "No course enrollments recorded yet" is a claim about the
+     * org, and "Data not yet refreshed" is a claim about the view, and neither
+     * is known to be true when the request never came back.
+     */
+    test("distinguishes a failed section from an empty one", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      allowConsoleErrors()
+      setAnalyticsResponses()
+      // Overrides the successful response registered just above.
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 200 }),
+        "Internal Server Error",
+        { code: 500 },
+      )
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText(
+        "This data could not be loaded. Please try again later.",
+      )
+      expect(
+        screen.queryByText("No course enrollments recorded yet."),
+      ).not.toBeInTheDocument()
+      expect(
+        screen.queryByText("Data not yet refreshed"),
+      ).not.toBeInTheDocument()
+      // The three sections that did load keep their own freshness stamp.
+      expect(screen.getAllByText(/Data as of/)).toHaveLength(3)
+      expect(
+        screen.getByText(/Some analytics could not be loaded/),
+      ).toBeInTheDocument()
+    })
+  })
+
+  /**
+   * Every endpoint is paged, and a truncated page is invisible in the rows: 2
+   * of 340 looks exactly like 2 of 2. The envelope's `total_count` is the only
+   * thing that distinguishes them.
+   */
+  describe("truncation", () => {
+    const courseRows = (count: number) =>
+      Array.from({ length: count }, (_, index) =>
+        analyticsFactories.enrollmentCompletionFunnel({
+          courserun_pk: index + 1,
+          courserun_title: `Course ${index + 1}`,
+        }),
+      )
+
+    test("says nothing when a section holds every row", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByRole("heading", { name: "Course performance" })
+      expect(screen.queryByText(/Showing \d+ of/)).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole("button", { name: /Show all/ }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("admits to showing a subset, and loads the rest on request", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 200 }),
+        analyticsFactories.envelope(courseRows(2), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+      // "Show all" asks for the whole result set in one page.
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 340 }),
+        analyticsFactories.envelope(courseRows(3), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+
+      const user = userEvent.setup()
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await screen.findByText("Showing 2 of 340.")
+      await user.click(screen.getByRole("button", { name: "Show all 340" }))
+
+      await screen.findByText("Course 3")
+      // Still short of the total, so the count updates rather than disappearing.
+      expect(screen.getByText("Showing 3 of 340.")).toBeInTheDocument()
+    })
+
+    /**
+     * The expanded page keeps the old rows on screen while it loads, so nothing
+     * visibly changes on click. Without the busy state and the live region a
+     * screen reader gets no feedback at all that the button did anything.
+     */
+    test("marks the button busy while expanding and announces the result", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+      // Row counts stay tiny deliberately: rendering hundreds of rows in jsdom
+      // is slow enough to make this flaky under parallel load, and the wiring
+      // under test doesn't depend on the magnitudes. `total_count` still has to
+      // exceed the page size, or there would be nothing to expand.
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 200 }),
+        analyticsFactories.envelope(courseRows(2), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 340 }),
+        analyticsFactories.envelope(courseRows(3), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+
+      const user = userEvent.setup()
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      const button = await screen.findByRole("button", { name: "Show all 340" })
+      expect(button).toHaveAttribute("aria-busy", "false")
+
+      await user.click(button)
+
+      await screen.findByText("Showing 3 of 340 rows.")
+    })
+
+    /**
+     * The API applies its LIMIT in SQL and drops sub-floor rows afterwards, so
+     * a page of `total_count` rows can still come back short — permanently.
+     * Asking again would resend the same limit and change nothing, so the
+     * button has to go rather than sit there doing nothing.
+     */
+    test("stops offering more once a section has already asked for the total", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 200 }),
+        analyticsFactories.envelope(courseRows(2), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+      // Asked for all 340 and got 3 back: the rest were dropped by the floor
+      // after the LIMIT had already been applied. (Tiny counts on purpose — see
+      // the note in the busy/announce test.)
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 340 }),
+        analyticsFactories.envelope(courseRows(3), {
+          as_of: AS_OF,
+          total_count: 340,
+        }),
+      )
+
+      const user = userEvent.setup()
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      await user.click(
+        await screen.findByRole("button", { name: "Show all 340" }),
+      )
+
+      await screen.findByText("Showing 3 of 340.")
+      expect(
+        screen.queryByRole("button", { name: /Show all/ }),
+      ).not.toBeInTheDocument()
+    })
+
+    /**
+     * The API answers 422 above its max_page_size, so past that point there is
+     * no request left to make — the message has to stand on its own rather than
+     * offering a button that cannot deliver.
+     */
+    test("drops the button once a section is already at the API's page cap", async () => {
+      const org = orgWithUuid()
+      setManagerOrgs([org])
+      setAnalyticsResponses()
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 200 }),
+        analyticsFactories.envelope(courseRows(2), {
+          as_of: AS_OF,
+          total_count: 5000,
+        }),
+      )
+      setMockResponse.get(
+        analyticsUrls.organizations.enrollmentFunnel(ORG_UUID, { limit: 1000 }),
+        analyticsFactories.envelope(courseRows(4), {
+          as_of: AS_OF,
+          total_count: 5000,
+        }),
+      )
+
+      const user = userEvent.setup()
+      renderWithProviders(
+        <AnalyticsContent orgSlug={org.slug.replace(/^org-/, "")} />,
+      )
+
+      // Capped at max_page_size rather than asking for all 5000.
+      await screen.findByRole("button", { name: "Show all 5,000" })
+      await user.click(screen.getByRole("button", { name: "Show all 5,000" }))
+
+      await screen.findByText("Showing 4 of 5,000.")
+      expect(
+        screen.queryByRole("button", { name: /Show all/ }),
+      ).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.tsx b/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.tsx
new file mode 100644
index 0000000000..62caacb278
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/AnalyticsContent.tsx
@@ -0,0 +1,409 @@
+"use client"
+
+import React from "react"
+import Image from "next/image"
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
+import type { AxiosError } from "axios"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { Skeleton, Stack, styled, Typography } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
+import { managerOrganizationQueries } from "api/mitxonline-hooks/organizations"
+import { analyticsOrganizationQueries } from "api/analytics-hooks/organizations"
+import { isAnalyticsConfigured } from "api/runtime"
+import { matchOrganizationBySlug } from "@/common/utils"
+import { ForbiddenError } from "@/common/errors"
+import { FeatureFlags } from "@/common/feature_flags"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import { contractAdminView } from "@/common/urls"
+import { ErrorContent } from "../ErrorPage/ErrorPageTemplate"
+import graduateLogo from "@/public/images/dashboard/graduate.png"
+import ContractKpiCards from "./Analytics/ContractKpiCards"
+import CoursePerformanceTable from "./Analytics/CoursePerformanceTable"
+import EngagementTrendChart from "./Analytics/EngagementTrendChart"
+import ProgramFunnelChart from "./Analytics/ProgramFunnelChart"
+import SectionHeader from "./Analytics/SectionHeader"
+import SectionTruncation from "./Analytics/SectionTruncation"
+import { getOrgUuid } from "./Analytics/orgUuid"
+
+/**
+ * Org-scoped B2B analytics, the reporting half of the org-manager dashboard
+ * whose other half is `ContractAdminPage` (seat administration). It reuses that
+ * page's layout, header and table primitives so the two read as one product.
+ *
+ * # Access
+ *
+ * Authorization is the analytics API's job, not this component's: it checks
+ * membership and org-manager status from the JWT that APISIX mints from the
+ * session cookie, and answers 403 otherwise. What this component does is
+ * resolve which org the caller means. It does so through MITx Online's
+ * *manager* org list — the same source `ContractAdminPage` uses — so a learner
+ * who is not a manager never gets as far as issuing an analytics request.
+ */
+
+/**
+ * No page container here: the `/dashboard` layout already renders children
+ * inside its own `Container` and sidebar grid column, so adding another would
+ * double the padding and fight the grid. `ContractContent` does the same.
+ */
+const HeaderSection = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "24px",
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+  },
+}))
+
+const OrgDetailsContainer = styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: "24px",
+})
+
+const ImageContainer = styled.div(({ theme }) => ({
+  display: "flex",
+  width: "60px",
+  height: "60px",
+  padding: "8px",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  borderRadius: "8px",
+  backgroundColor: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  overflow: "hidden",
+  "> img": {
+    width: "100%",
+    height: "auto",
+  },
+}))
+
+const OrgName = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h3,
+  color: theme.custom.colors.darkGray2,
+})) as typeof Typography
+
+const PageSubtitle = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const Section = styled.section({
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+})
+
+const Notice = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+  backgroundColor: theme.custom.colors.lightGray1,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  padding: "24px",
+})) as typeof Typography
+
+/**
+ * These views are small per org (contracts, programs, a couple of years of
+ * months), but the API caps every list endpoint, so ask for a page big enough
+ * that no org is truncated at the default.
+ *
+ * "Big enough" is not "always enough", though, which is why every section
+ * compares what it rendered against the envelope's `total_count` and says so
+ * when it is showing a subset — see `SectionTruncation`.
+ */
+const PAGE_SIZE = 200
+
+/**
+ * The analytics API's own `max_page_size`; it answers 422 above this. Caps what
+ * "Show all" is allowed to ask for, so the button never issues a request the
+ * API will reject.
+ */
+const MAX_PAGE_SIZE = 1000
+
+type SectionKey = "utilization" | "trend" | "courses" | "programs"
+
+/**
+ * Note there is no 401/403 branch for the analytics queries themselves. The
+ * browser query client (`makeBrowserQueryClient`) sets `throwOnError` for 400,
+ * 401 and 403, so a caller the analytics API rejects never reaches an
+ * `isError` branch here at all — the error is thrown to the route's error
+ * boundary, which is where every other page's access denial is handled too.
+ * Only the remaining statuses (5xx, network) surface as `isError` below, and
+ * those mean "could not load", not "not allowed".
+ */
+const isForbidden = (error: unknown) => {
+  const status = (error as AxiosError | null)?.response?.status
+  return status === 401 || status === 403
+}
+
+type AnalyticsContentInternalProps = {
+  orgSlug: string
+}
+
+const AnalyticsContentInternal: React.FC<AnalyticsContentInternalProps> = ({
+  orgSlug,
+}) => {
+  const {
+    data: managerOrgs,
+    isLoading: isLoadingOrgs,
+    isError: isOrgsError,
+    error: orgsError,
+  } = useQuery(managerOrganizationQueries.managerOrganizationsList())
+
+  const org = managerOrgs?.find(matchOrganizationBySlug(orgSlug))
+  const orgUuid = getOrgUuid(org)
+  const analyticsAvailable = isAnalyticsConfigured() && !!orgUuid
+
+  // Per-section page size. Raised only by that section's "Show all", so
+  // expanding a truncated course table never refetches the other three.
+  const [limits, setLimits] = React.useState<Record<SectionKey, number>>({
+    utilization: PAGE_SIZE,
+    trend: PAGE_SIZE,
+    courses: PAGE_SIZE,
+    programs: PAGE_SIZE,
+  })
+
+  // One query per endpoint, each backed by its own materialized view with its
+  // own refresh time, so sections load and report freshness independently.
+  //
+  // Four `useQuery` calls rather than one `useQueries`, which is what this was
+  // originally. `placeholderData: keepPreviousData` is silently inert under
+  // `useQueries` here — on a limit change the result went straight to
+  // `data: undefined`, so the section a manager had just asked to expand blanked
+  // back to its skeleton, which is exactly what the option was there to prevent.
+  // It behaves as documented on `useQuery` (as it does on ContractAdminPage).
+  // The count is fixed and the order never changes, so this is hook-safe.
+  const utilization = useQuery({
+    ...analyticsOrganizationQueries.contractUtilization(orgUuid ?? "", {
+      limit: limits.utilization,
+    }),
+    enabled: analyticsAvailable,
+    placeholderData: keepPreviousData,
+  })
+  const trend = useQuery({
+    ...analyticsOrganizationQueries.engagementTrend(orgUuid ?? "", {
+      limit: limits.trend,
+    }),
+    enabled: analyticsAvailable,
+    placeholderData: keepPreviousData,
+  })
+  const courses = useQuery({
+    ...analyticsOrganizationQueries.enrollmentFunnel(orgUuid ?? "", {
+      limit: limits.courses,
+    }),
+    enabled: analyticsAvailable,
+    placeholderData: keepPreviousData,
+  })
+  const programs = useQuery({
+    ...analyticsOrganizationQueries.programFunnel(orgUuid ?? "", {
+      limit: limits.programs,
+    }),
+    enabled: analyticsAvailable,
+    placeholderData: keepPreviousData,
+  })
+
+  /**
+   * The truncation footer for one section, or null when it is showing
+   * everything. "Show all" asks for the whole result set in a single page,
+   * bounded by what the API will serve — beyond that the message stands alone,
+   * since a button that cannot deliver the rest would be worse than none.
+   */
+  const truncation = (
+    query: {
+      data?: { total_count: number; data: unknown[] }
+      isPlaceholderData: boolean
+    },
+    key: SectionKey,
+  ) => {
+    if (!query.data) return null
+    const { total_count: total } = query.data
+    const shown = query.data.data.length
+    const nextLimit = Math.min(total, MAX_PAGE_SIZE)
+    return (
+      <SectionTruncation
+        shown={shown}
+        total={total}
+        // `isPlaceholderData` is precisely "a differently-keyed query is in
+        // flight and these rows are the previous ones" — which is the state a
+        // manager cannot otherwise perceive, since the table does not blank.
+        isExpanding={query.isPlaceholderData}
+        // Offer the button only when it would actually ask for more than we
+        // already did. Two ways it would not: the section is at the API's cap,
+        // or it already requested `total` rows and got back fewer because the
+        // API applies its LIMIT before the anonymity floor drops sub-floor rows
+        // — so a page of `total` can still come back short, permanently. Either
+        // way the message stands alone rather than offering a no-op click.
+        canShowAll={nextLimit > limits[key]}
+        onShowAll={() =>
+          setLimits((current) => ({ ...current, [key]: nextLimit }))
+        }
+      />
+    )
+  }
+
+  if (isLoadingOrgs) {
+    return <Skeleton width="100%" height="128px" />
+  }
+
+  if (isOrgsError) {
+    return isForbidden(orgsError) ? (
+      <ErrorContent title="Access denied" timSays="403" />
+    ) : (
+      <ErrorContent title="Something went wrong" timSays="Oops!" />
+    )
+  }
+
+  // Not in the manager org list means not an org manager for this org — the
+  // same 403 the contract admin page gives, decided before any analytics call.
+  if (!org) {
+    return <ErrorContent title="Access denied" timSays="403" />
+  }
+
+  const firstContractSlug = org.contracts[0]?.slug
+
+  const header = (
+    <HeaderSection>
+      <OrgDetailsContainer>
+        <ImageContainer>
+          <Image width={60} height={60} src={org.logo ?? graduateLogo} alt="" />
+        </ImageContainer>
+        <div>
+          <OrgName component="h1">{org.name}</OrgName>
+          <PageSubtitle>Analytics</PageSubtitle>
+        </div>
+      </OrgDetailsContainer>
+      {firstContractSlug ? (
+        <ButtonLink
+          size="small"
+          variant="bordered"
+          href={contractAdminView(orgSlug, firstContractSlug)}
+        >
+          Manage seats
+        </ButtonLink>
+      ) : null}
+    </HeaderSection>
+  )
+
+  if (!analyticsAvailable) {
+    return (
+      <Stack gap="24px">
+        {header}
+        <Notice>
+          {isAnalyticsConfigured()
+            ? // The org record has no Keycloak organization UUID, which is
+              // what the analytics API keys on. Nothing the manager can fix.
+              "Analytics is not available for this organization yet. Please contact support if you expect to see data here."
+            : "Analytics is not available in this environment."}
+        </Notice>
+      </Stack>
+    )
+  }
+
+  const failed = [utilization, trend, courses, programs].some(
+    (query) => query.isError,
+  )
+
+  return (
+    <Stack gap="40px" width="100%">
+      {header}
+
+      {failed ? (
+        <Notice>
+          Some analytics could not be loaded. The figures below may be
+          incomplete.
+        </Notice>
+      ) : null}
+
+      <Section>
+        <SectionHeader
+          title="Contract utilization"
+          description="Seats consumed and learner outcomes for each contract."
+          asOf={utilization.data?.as_of}
+          isLoading={utilization.isPending}
+          isError={utilization.isError}
+        />
+        <ContractKpiCards
+          rows={utilization.data?.data}
+          isLoading={utilization.isPending}
+          isError={utilization.isError}
+        />
+        {truncation(utilization, "utilization")}
+      </Section>
+
+      <Section>
+        <SectionHeader
+          title="Monthly engagement"
+          description="Distinct learners active, newly enrolled, and certified each month."
+          asOf={trend.data?.as_of}
+          isLoading={trend.isPending}
+          isError={trend.isError}
+        />
+        <EngagementTrendChart
+          rows={trend.data?.data}
+          isLoading={trend.isPending}
+          isError={trend.isError}
+        />
+        {truncation(trend, "trend")}
+      </Section>
+
+      <Section>
+        <SectionHeader
+          title="Course performance"
+          description="Enrollment, activity and completion for each course run."
+          asOf={courses.data?.as_of}
+          isLoading={courses.isPending}
+          isError={courses.isError}
+        />
+        <CoursePerformanceTable
+          rows={courses.data?.data}
+          isLoading={courses.isPending}
+          isError={courses.isError}
+        />
+        {truncation(courses, "courses")}
+      </Section>
+
+      <Section>
+        <SectionHeader
+          title="Program funnel"
+          description="How far learners progress through each program."
+          asOf={programs.data?.as_of}
+          isLoading={programs.isPending}
+          isError={programs.isError}
+        />
+        <ProgramFunnelChart
+          rows={programs.data?.data}
+          isLoading={programs.isPending}
+          isError={programs.isError}
+        />
+        {truncation(programs, "programs")}
+      </Section>
+    </Stack>
+  )
+}
+
+type AnalyticsContentProps = {
+  orgSlug: string
+}
+
+const AnalyticsContent: React.FC<AnalyticsContentProps> = ({ orgSlug }) => {
+  const flagEnabled = useFeatureFlagEnabled(FeatureFlags.B2BAnalyticsDashboard)
+  const flagsLoaded = useFeatureFlagsLoaded()
+
+  // The whole page is behind the flag, so wait for the real value rather than
+  // 403-ing on a bootstrapped `false` — same reasoning as ContractAdminPage.
+  if (!flagsLoaded) {
+    return <Skeleton width="100%" height="128px" />
+  }
+
+  if (!flagEnabled) {
+    throw new ForbiddenError("Not enabled.")
+  }
+
+  return <AnalyticsContentInternal orgSlug={orgSlug} />
+}
+
+export default AnalyticsContent
+export type { AnalyticsContentProps }
diff --git a/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/analytics/page.tsx b/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/analytics/page.tsx
new file mode 100644
index 0000000000..aaea148186
--- /dev/null
+++ b/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/analytics/page.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import AnalyticsContent from "@/app-pages/DashboardPage/AnalyticsContent"
+
+const Page: React.FC<
+  PageProps<"/dashboard/organization/[orgSlug]/analytics">
+> = async ({ params }) => {
+  const resolved = await params
+  return <AnalyticsContent orgSlug={resolved.orgSlug} />
+}
+
+export default Page
diff --git a/frontends/main/src/bootstrap/api.ts b/frontends/main/src/bootstrap/api.ts
index bddf5ed578..e1b6c019a4 100644
--- a/frontends/main/src/bootstrap/api.ts
+++ b/frontends/main/src/bootstrap/api.ts
@@ -20,6 +20,12 @@ export const bootstrapApiClients = () => {
   const withCredentials =
     env("NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS") === "true"
 
+  // The analytics API is not deployed to every environment yet, so its base URL
+  // is optional: when it is absent we leave that client unconfigured and the
+  // org analytics dashboard reports itself unavailable, rather than failing
+  // startup for every environment that does not have the service.
+  const analyticsBaseUrl = env("NEXT_PUBLIC_ANALYTICS_API_BASE_URL")
+
   configureApiClients({
     learn: {
       baseUrl: learnBaseUrl,
@@ -31,5 +37,15 @@ export const bootstrapApiClients = () => {
       csrfCookieName: requiredEnv("NEXT_PUBLIC_MITX_ONLINE_CSRF_COOKIE_NAME"),
       withCredentials,
     },
+    ...(analyticsBaseUrl && {
+      analytics: {
+        baseUrl: analyticsBaseUrl,
+        // The analytics API is read-only (GET only), so there is no CSRF
+        // exchange to take part in; it shares learn's cookie name so axios
+        // still sends the header if a mutating endpoint is ever added.
+        csrfCookieName: requiredEnv("NEXT_PUBLIC_CSRF_COOKIE_NAME"),
+        withCredentials,
+      },
+    }),
   })
 }
diff --git a/frontends/main/src/common/feature_flags.ts b/frontends/main/src/common/feature_flags.ts
index 8cefa11a81..dc8169ab15 100644
--- a/frontends/main/src/common/feature_flags.ts
+++ b/frontends/main/src/common/feature_flags.ts
@@ -13,6 +13,7 @@ export enum FeatureFlags {
   OcwProductPages = "ocw-product-pages",
   VideoPlaylistPage = "video-playlist-page",
   B2BContractManagerDashboard = "b2b-contract-manager-dashboard",
+  B2BAnalyticsDashboard = "b2b-analytics-dashboard",
   Arithmix = "arithmix",
   Hacksnack = "hacksnack",
 }
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
index d7f83d9a8d..648668726a 100644
--- a/frontends/main/src/common/urls.ts
+++ b/frontends/main/src/common/urls.ts
@@ -103,6 +103,14 @@ export const CONTRACT_ADMIN_VIEW =
   "/organization/[orgSlug]/contract/[contractSlug]/admin"
 export const contractAdminView = (orgSlug: string, contractSlug: string) =>
   generatePath(CONTRACT_ADMIN_VIEW, { orgSlug, contractSlug })
+/**
+ * B2B analytics is org-scoped, not contract-scoped: the underlying materialized
+ * views are keyed on the organization and break out contracts as rows.
+ */
+export const ORGANIZATION_ANALYTICS_VIEW =
+  "/dashboard/organization/[orgSlug]/analytics"
+export const organizationAnalyticsView = (orgSlug: string) =>
+  generatePath(ORGANIZATION_ANALYTICS_VIEW, { orgSlug })
 export const PROGRAM_VIEW = "/dashboard/program/[id]"
 export const programView = (id: number) =>
   generatePath(PROGRAM_VIEW, { id: String(id) })
diff --git a/frontends/main/src/components/B2BTable/B2BTable.tsx b/frontends/main/src/components/B2BTable/B2BTable.tsx
new file mode 100644
index 0000000000..43f79ee6f0
--- /dev/null
+++ b/frontends/main/src/components/B2BTable/B2BTable.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import { styled, Typography } from "ol-components"
+
+/**
+ * The table primitives of the B2B org-manager dashboard, shared by the contract
+ * admin page and the org analytics dashboard so the two read as one product.
+ *
+ * These are ARIA-role tables built from `div`s rather than `<table>`: below the
+ * `md` breakpoint the header row is hidden and each row reflows into a stack of
+ * label/value pairs (see `MobileLabel`), which a real `<table>` cannot do
+ * without losing its own semantics. Callers supply `role="table"`,
+ * `role="row"`, `role="columnheader"` and `role="cell"` — the roles are not
+ * baked in here because the same visual row is sometimes a header and
+ * sometimes not.
+ *
+ * `$flex` sets each column's share of the row on desktop; every cell in a
+ * column must be given the same value, so callers keep a `COLUMN_FLEX` map
+ * rather than repeating numbers.
+ */
+
+const TableCard = styled.div(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  padding: "24px",
+  [theme.breakpoints.down("md")]: {
+    padding: "16px",
+  },
+}))
+
+const TableHeaderRow = styled.div(({ theme }) => ({
+  display: "flex",
+  gap: "16px",
+  alignItems: "center",
+  paddingBottom: "16px",
+  borderBottom: `1px solid ${theme.custom.colors.silverGrayDark}`,
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}))
+
+const TableHeaderCell = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$flex" && prop !== "$numeric",
+})<{ $flex: number; $numeric?: boolean }>(({ $flex, $numeric, theme }) => ({
+  flex: $flex,
+  minWidth: 0,
+  ...theme.typography.subtitle2,
+  color: theme.custom.colors.black,
+  ...($numeric && { textAlign: "right" }),
+}))
+
+const TableRow = styled.div(({ theme }) => ({
+  display: "flex",
+  gap: "16px",
+  alignItems: "center",
+  padding: "14px 0",
+  borderBottom: `1px solid ${theme.custom.colors.silverGrayLight}`,
+  "&:last-child": {
+    borderBottom: "none",
+  },
+  [theme.breakpoints.down("md")]: {
+    position: "relative",
+    flexWrap: "wrap",
+    gap: "6px 0",
+    padding: "16px 40px 16px 0",
+  },
+}))
+
+const MobileLabel = styled.span(({ theme }) => ({
+  display: "none",
+  [theme.breakpoints.down("md")]: {
+    display: "inline",
+    ...theme.typography.subtitle2,
+    color: theme.custom.colors.darkGray2,
+    minWidth: "120px",
+    flexShrink: 0,
+  },
+}))
+
+const TableCell = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "$flex" && prop !== "$primary" && prop !== "$numeric",
+})<{ $flex: number; $primary?: boolean; $numeric?: boolean }>(
+  ({ $flex, $primary, $numeric, theme }) => ({
+    flex: $flex,
+    minWidth: 0,
+    ...theme.typography.body2,
+    color: theme.custom.colors.black,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    ...($numeric && {
+      textAlign: "right",
+      // Digits line up column-wise only if they share an advance width.
+      fontVariantNumeric: "tabular-nums",
+    }),
+    [theme.breakpoints.down("md")]: {
+      flex: "none",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      overflow: "visible",
+      whiteSpace: "normal",
+      // Stacked rows read as "label: value" pairs, so the desktop right-align
+      // would strand the value away from its label.
+      textAlign: "left",
+      ...($primary && {
+        ...theme.typography.subtitle2,
+        marginBottom: "4px",
+      }),
+    },
+  }),
+)
+
+const TableFooter = styled.div({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingTop: "16px",
+})
+
+const TableFootnote = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+})) as typeof Typography
+
+const EmptyTableMessage = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+  padding: "32px 0",
+  textAlign: "center",
+})) as typeof Typography
+
+/** Placeholder for a value the API did not return. */
+const STUB = "—"
+
+export {
+  EmptyTableMessage,
+  MobileLabel,
+  STUB,
+  TableCard,
+  TableCell,
+  TableFooter,
+  TableFootnote,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+}
diff --git a/frontends/main/src/test-utils/setupJest.tsx b/frontends/main/src/test-utils/setupJest.tsx
index 01ab05491e..d96b2dd3ad 100644
--- a/frontends/main/src/test-utils/setupJest.tsx
+++ b/frontends/main/src/test-utils/setupJest.tsx
@@ -23,6 +23,7 @@ const { configureApiClients } = jest.requireActual("api/runtime")
 // don't need them.
 const LEARN_BASE_URL = "http://api.test.learn.odl.local:8065"
 const MITX_ONLINE_BASE_URL = "http://api.test.learn.odl.local:8065/mitxonline"
+const ANALYTICS_BASE_URL = "http://api.test.learn.odl.local:8065/analytics"
 
 process.env.NEXT_PUBLIC_ORIGIN = "http://test.learn.odl.local:8062"
 process.env.NEXT_PUBLIC_VERSION = "test-version"
@@ -30,6 +31,7 @@ process.env.NEXT_PUBLIC_MITOL_API_BASE_URL = LEARN_BASE_URL
 process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL = MITX_ONLINE_BASE_URL
 process.env.NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL =
   "http://mitxonline.odl.local:8065"
+process.env.NEXT_PUBLIC_ANALYTICS_API_BASE_URL = ANALYTICS_BASE_URL
 
 configureApiClients({
   learn: {
@@ -42,6 +44,11 @@ configureApiClients({
     csrfCookieName: "mitxcsrftoken",
     withCredentials: false,
   },
+  analytics: {
+    baseUrl: ANALYTICS_BASE_URL,
+    csrfCookieName: "csrftoken",
+    withCredentials: false,
+  },
 })
 
 jest.mock("react-markdown", () => {
diff --git a/frontends/main/validateEnv.js b/frontends/main/validateEnv.js
index d34ec3dd3c..75d8d0d710 100644
--- a/frontends/main/validateEnv.js
+++ b/frontends/main/validateEnv.js
@@ -60,6 +60,10 @@ const schema = yup.object().shape({
   NEXT_PUBLIC_SENTRY_ENV: yup.string(),
   NEXT_PUBLIC_SENTRY_PROFILES_SAMPLE_RATE: yup.string(),
   NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE: yup.string(),
+  // Base URL of the OL Analytics API (ol-analytics-api). Optional: environments
+  // without an analytics deployment simply do not surface the org analytics
+  // dashboard — see isAnalyticsConfigured() in api/runtime.
+  NEXT_PUBLIC_ANALYTICS_API_BASE_URL: yup.string(),
   NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT: yup.string(),
   NEXT_PUBLIC_LEARN_AI_SYLLABUS_ENDPOINT: yup.string(),
   NEXT_PUBLIC_LEARN_AI_CSRF_COOKIE_NAME: yup.string(),
diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts
index e9640dedbf..45c4e17b9f 100644
--- a/frontends/ol-components/src/index.ts
+++ b/frontends/ol-components/src/index.ts
@@ -4,7 +4,7 @@
 
 export { default as styled } from "@emotion/styled"
 export { css, Global } from "@emotion/react"
-export { alpha } from "@mui/material/styles"
+export { alpha, useTheme } from "@mui/material/styles"
 
 /**
  * Re-exports from MUI.
diff --git a/yarn.lock b/yarn.lock
index c4ae0dd72a..dc85f1a362 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1739,6 +1739,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.28.6":
+  version: 7.29.7
+  resolution: "@babel/runtime@npm:7.29.7"
+  checksum: 10/9883b4951787779fd382b121f22f92966d85f19434841f65fb00b2dfec232107e139683f47c6f252891826ad8ee18317b46c3a0e4819116a9885f47b46d7126a
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.25.7, @babel/template@npm:^7.3.3":
   version: 7.25.7
   resolution: "@babel/template@npm:7.25.7"
@@ -3646,6 +3653,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/types@npm:^7.4.12":
+  version: 7.4.12
+  resolution: "@mui/types@npm:7.4.12"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.6"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/343de29414643f8cda26c473d2f1a2a8ca702bd41edbfc5db0cc31aed73ccbb74c5c1ab729c4cd1dac2c1ea481300b547ba37dabb86891d96fc5254bc9993a30
+  languageName: node
+  linkType: hard
+
 "@mui/types@npm:~7.2.24":
   version: 7.2.24
   resolution: "@mui/types@npm:7.2.24"
@@ -3698,6 +3719,110 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^7.3.5":
+  version: 7.3.11
+  resolution: "@mui/utils@npm:7.3.11"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.6"
+    "@mui/types": "npm:^7.4.12"
+    "@types/prop-types": "npm:^15.7.15"
+    clsx: "npm:^2.1.1"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.2.3"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/d2a595f1767483434345b3f9f5ded22cf260b3ff9f32762c560d559b203218bf003b32065d5727dcc16c25b5dba171eac869b3d738e222dcd4979aa85e22b84b
+  languageName: node
+  linkType: hard
+
+"@mui/x-charts-vendor@npm:8.29.0":
+  version: 8.29.0
+  resolution: "@mui/x-charts-vendor@npm:8.29.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+    "@types/d3-array": "npm:^3.2.2"
+    "@types/d3-color": "npm:^3.1.3"
+    "@types/d3-format": "npm:^3.0.4"
+    "@types/d3-interpolate": "npm:^3.0.4"
+    "@types/d3-path": "npm:^3.1.1"
+    "@types/d3-scale": "npm:^4.0.9"
+    "@types/d3-shape": "npm:^3.1.8"
+    "@types/d3-time": "npm:^3.0.4"
+    "@types/d3-time-format": "npm:^4.0.3"
+    "@types/d3-timer": "npm:^3.0.2"
+    d3-array: "npm:^3.2.4"
+    d3-color: "npm:^3.1.0"
+    d3-format: "npm:^3.1.2"
+    d3-interpolate: "npm:^3.0.1"
+    d3-path: "npm:^3.1.0"
+    d3-scale: "npm:^4.0.2"
+    d3-shape: "npm:^3.2.0"
+    d3-time: "npm:^3.1.0"
+    d3-time-format: "npm:^4.1.0"
+    d3-timer: "npm:^3.0.1"
+    flatqueue: "npm:^3.0.0"
+    internmap: "npm:^2.0.3"
+  checksum: 10/6ae80d66895f24f8c175a582f035bbe593fe665b8734581e7e419c3dd8ad409ab680f4b3f71fc3531c6f83ae948afb678c5ff6de45c73497411f7db122e07589
+  languageName: node
+  linkType: hard
+
+"@mui/x-charts@npm:^8.29.2":
+  version: 8.29.2
+  resolution: "@mui/x-charts@npm:8.29.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+    "@mui/utils": "npm:^7.3.5"
+    "@mui/x-charts-vendor": "npm:8.29.0"
+    "@mui/x-internal-gestures": "npm:0.5.0"
+    "@mui/x-internals": "npm:8.29.2"
+    bezier-easing: "npm:^2.1.0"
+    clsx: "npm:^2.1.1"
+    prop-types: "npm:^15.8.1"
+    reselect: "npm:^5.1.1"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    "@emotion/react": ^11.9.0
+    "@emotion/styled": ^11.8.1
+    "@mui/material": ^5.15.14 || ^6.0.0 || ^7.0.0
+    "@mui/system": ^5.15.14 || ^6.0.0 || ^7.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+  checksum: 10/5258801191e8fe4c4963d59983662b21866e9945b049d9c9edede8c9b2906e685c2a92b915c623152d3dab9a7459d004cbc09be23d5fb5e29fc9b5b7475dbba0
+  languageName: node
+  linkType: hard
+
+"@mui/x-internal-gestures@npm:0.5.0":
+  version: 0.5.0
+  resolution: "@mui/x-internal-gestures@npm:0.5.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+  checksum: 10/f7b277a8058e7548eba14d97475f9e63a4d5eb08262f02db230062d1bdfc11a18b025385916adf7175d75f07c2f38ebb886795d69ab7279c55c3b84eaf8c2d93
+  languageName: node
+  linkType: hard
+
+"@mui/x-internals@npm:8.29.2":
+  version: 8.29.2
+  resolution: "@mui/x-internals@npm:8.29.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+    "@mui/utils": "npm:^7.3.5"
+    reselect: "npm:^5.1.1"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/6d09aca1e8788bb159277cef67ef999ad8641e8f464daad62f83c6eabe97378c3429d43a025b9e631fb5b0026e584f5c50ea05012256f16246b83e2d2ca0adad
+  languageName: node
+  linkType: hard
+
 "@napi-rs/canvas-android-arm64@npm:0.1.100":
   version: 0.1.100
   resolution: "@napi-rs/canvas-android-arm64@npm:0.1.100"
@@ -7300,6 +7425,82 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-array@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@types/d3-array@npm:3.2.2"
+  checksum: 10/1afebd05b688cafaaea295f765b409789f088b274b8a7ca40a4bc2b79760044a898e06a915f40bbc59cf39eabdd2b5d32e960b136fc025fd05c9a9d4435614c6
+  languageName: node
+  linkType: hard
+
+"@types/d3-color@npm:*, @types/d3-color@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "@types/d3-color@npm:3.1.3"
+  checksum: 10/1cf0f512c09357b25d644ab01b54200be7c9b15c808333b0ccacf767fff36f17520b2fcde9dad45e1bd7ce84befad39b43da42b4fded57680fa2127006ca3ece
+  languageName: node
+  linkType: hard
+
+"@types/d3-format@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/d3-format@npm:3.0.4"
+  checksum: 10/b937ecd2712d4aa38d5b4f5daab9cc8a576383868be1809e046aec99eeb1f1798c139f2e862dc400a82494c763be46087d154891773417f8eb53c73762ba3eb8
+  languageName: node
+  linkType: hard
+
+"@types/d3-interpolate@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/d3-interpolate@npm:3.0.4"
+  dependencies:
+    "@types/d3-color": "npm:*"
+  checksum: 10/72a883afd52c91132598b02a8cdfced9e783c54ca7e4459f9e29d5f45d11fb33f2cabc844e42fd65ba6e28f2a931dcce1add8607d2f02ef6fb8ea5b83ae84127
+  languageName: node
+  linkType: hard
+
+"@types/d3-path@npm:*, @types/d3-path@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@types/d3-path@npm:3.1.1"
+  checksum: 10/0437994d45d852ecbe9c4484e5abe504cd48751796d23798b6d829503a15563fdd348d93ac44489ba9c656992d16157f695eb889d9ce1198963f8e1dbabb1266
+  languageName: node
+  linkType: hard
+
+"@types/d3-scale@npm:^4.0.9":
+  version: 4.0.9
+  resolution: "@types/d3-scale@npm:4.0.9"
+  dependencies:
+    "@types/d3-time": "npm:*"
+  checksum: 10/2cae90a5e39252ae51388f3909ffb7009178582990462838a4edd53dd7e2e08121b38f0d2e1ac0e28e41167e88dea5b99e064ca139ba917b900a8020cf85362f
+  languageName: node
+  linkType: hard
+
+"@types/d3-shape@npm:^3.1.8":
+  version: 3.1.8
+  resolution: "@types/d3-shape@npm:3.1.8"
+  dependencies:
+    "@types/d3-path": "npm:*"
+  checksum: 10/ebc161d49101d84409829fea516ba7ec71ad51a1e97438ca0fafc1c30b56b3feae802d220375323632723a338dda7237c652e831e0b53527a6222ab0d1bb7809
+  languageName: node
+  linkType: hard
+
+"@types/d3-time-format@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "@types/d3-time-format@npm:4.0.3"
+  checksum: 10/9dfc1516502ac1c657d6024bdb88b6dc7e21dd7bff88f6187616cf9a0108250f63507a2004901ece4f97cc46602005a2ca2d05c6dbe53e8a0f6899bd60d4ff7a
+  languageName: node
+  linkType: hard
+
+"@types/d3-time@npm:*, @types/d3-time@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/d3-time@npm:3.0.4"
+  checksum: 10/b1eb4255066da56023ad243fd4ae5a20462d73bd087a0297c7d49ece42b2304a4a04297568c604a38541019885b2bc35a9e0fd704fad218e9bc9c5f07dc685ce
+  languageName: node
+  linkType: hard
+
+"@types/d3-timer@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@types/d3-timer@npm:3.0.2"
+  checksum: 10/1643eebfa5f4ae3eb00b556bbc509444d88078208ec2589ddd8e4a24f230dd4cf2301e9365947e70b1bee33f63aaefab84cd907822aae812b9bc4871b98ab0e1
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.0.0":
   version: 4.1.12
   resolution: "@types/debug@npm:4.1.12"
@@ -9723,6 +9924,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bezier-easing@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "bezier-easing@npm:2.1.0"
+  checksum: 10/086dfd042ccf91c3a9de811b635381aa6580e9f83d1951ed4ce4d4007645d8f3cebd491cb6259719ce9320df213316b99dd8e39e78997944b1c252a1d4b424b5
+  languageName: node
+  linkType: hard
+
 "bidi-js@npm:^1.0.2, bidi-js@npm:^1.0.3":
   version: 1.0.3
   resolution: "bidi-js@npm:1.0.3"
@@ -10884,6 +11092,92 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "d3-array@npm:3.2.4"
+  dependencies:
+    internmap: "npm:1 - 2"
+  checksum: 10/5800c467f89634776a5977f6dae3f4e127d91be80f1d07e3e6e35303f9de93e6636d014b234838eea620f7469688d191b3f41207a30040aab750a63c97ec1d7c
+  languageName: node
+  linkType: hard
+
+"d3-color@npm:1 - 3, d3-color@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "d3-color@npm:3.1.0"
+  checksum: 10/536ba05bfd9f4fcd6fa289b5974f5c846b21d186875684637e22bf6855e6aba93e24a2eb3712985c6af3f502fbbfa03708edb72f58142f626241a8a17258e545
+  languageName: node
+  linkType: hard
+
+"d3-format@npm:1 - 3, d3-format@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "d3-format@npm:3.1.2"
+  checksum: 10/811d913c2c7624cb0d2a8f0ccd7964c50945b3de3c7f7aa14c309fba7266a3ec53cbee8c05f6ad61b2b65b93e157c55a0e07db59bc3180c39dac52be8e841ab1
+  languageName: node
+  linkType: hard
+
+"d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "d3-interpolate@npm:3.0.1"
+  dependencies:
+    d3-color: "npm:1 - 3"
+  checksum: 10/988d66497ef5c190cf64f8c80cd66e1e9a58c4d1f8932d776a8e3ae59330291795d5a342f5a97602782ccbef21a5df73bc7faf1f0dc46a5145ba6243a82a0f0e
+  languageName: node
+  linkType: hard
+
+"d3-path@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "d3-path@npm:3.1.0"
+  checksum: 10/8e97a9ab4930a05b18adda64cf4929219bac913a5506cf8585631020253b39309549632a5cbeac778c0077994442ddaaee8316ee3f380e7baf7566321b84e76a
+  languageName: node
+  linkType: hard
+
+"d3-scale@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "d3-scale@npm:4.0.2"
+  dependencies:
+    d3-array: "npm:2.10.0 - 3"
+    d3-format: "npm:1 - 3"
+    d3-interpolate: "npm:1.2.0 - 3"
+    d3-time: "npm:2.1.1 - 3"
+    d3-time-format: "npm:2 - 4"
+  checksum: 10/e2dc4243586eae2a0fdf91de1df1a90d51dfacb295933f0ca7e9184c31203b01436bef69906ad40f1100173a5e6197ae753cb7b8a1a8fcfda43194ea9cad6493
+  languageName: node
+  linkType: hard
+
+"d3-shape@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "d3-shape@npm:3.2.0"
+  dependencies:
+    d3-path: "npm:^3.1.0"
+  checksum: 10/2e861f4d4781ee8abd85d2b435f848d667479dcf01a4e0db3a06600a5bdeddedb240f88229ec7b3bf7fa300c2b3526faeaf7e75f9a24dbf4396d3cc5358ff39d
+  languageName: node
+  linkType: hard
+
+"d3-time-format@npm:2 - 4, d3-time-format@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "d3-time-format@npm:4.1.0"
+  dependencies:
+    d3-time: "npm:1 - 3"
+  checksum: 10/ffc0959258fbb90e3890bfb31b43b764f51502b575e87d0af2c85b85ac379120d246914d07fca9f533d1bcedc27b2841d308a00fd64848c3e2cad9eff5c9a0aa
+  languageName: node
+  linkType: hard
+
+"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3, d3-time@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "d3-time@npm:3.1.0"
+  dependencies:
+    d3-array: "npm:2 - 3"
+  checksum: 10/c110bed295ce63e8180e45b82a9b0ba114d5f33ff315871878f209c1a6d821caa505739a2b07f38d1396637155b8e7372632dacc018e11fbe8ceef58f6af806d
+  languageName: node
+  linkType: hard
+
+"d3-timer@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "d3-timer@npm:3.0.1"
+  checksum: 10/004128602bb187948d72c7dc153f0f063f38ac7a584171de0b45e3a841ad2e17f1e40ad396a4af9cce5551b6ab4a838d5246d23492553843d9da4a4050a911e2
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -13004,6 +13298,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flatqueue@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "flatqueue@npm:3.1.0"
+  checksum: 10/81604306afd52d35f34b89f50c84f3c6c44d1c4134007a83d665bb20b7a0c69e0fd0777f010b6fae8c87ba3bc394b9414980c25db6c497e5a8a3acae4b886b8d
+  languageName: node
+  linkType: hard
+
 "flatted@npm:^3.2.9, flatted@npm:^3.3.3":
   version: 3.3.3
   resolution: "flatted@npm:3.3.3"
@@ -14310,6 +14611,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internmap@npm:1 - 2, internmap@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "internmap@npm:2.0.3"
+  checksum: 10/873e0e7fcfe32f999aa0997a0b648b1244508e56e3ea6b8259b5245b50b5eeb3853fba221f96692bd6d1def501da76c32d64a5cb22a0b26cdd9b445664f805e0
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -16336,6 +16644,7 @@ __metadata:
     "@mui/base": "npm:5.0.0-beta.70"
     "@mui/material": "npm:^6.4.5"
     "@mui/material-nextjs": "npm:^6.4.3"
+    "@mui/x-charts": "npm:^8.29.2"
     "@opentelemetry/api": "npm:^1.9.1"
     "@opentelemetry/exporter-trace-otlp-http": "npm:^0.214.0"
     "@opentelemetry/resources": "npm:^2.6.1"
@@ -19892,6 +20201,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reselect@npm:^5.1.1":
+  version: 5.2.0
+  resolution: "reselect@npm:5.2.0"
+  checksum: 10/e53d37a35f84132682b0a819d942ff7debea90fe126f4bb5eef0f21b1f48f45dec89d27990f2ef5865f5e05d64bb88fb41e4341eb276674aee6f1f7f7362c3e8
+  languageName: node
+  linkType: hard
+
 "resize-observer-polyfill@npm:^1.5.0":
   version: 1.5.1
   resolution: "resize-observer-polyfill@npm:1.5.1"
@@ -23065,7 +23381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.5.0":
+"use-sync-external-store@npm:^1.5.0, use-sync-external-store@npm:^1.6.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
   peerDependencies:

From 5d2b79a022488674830a06066dabb1cd3cd5c028 Mon Sep 17 00:00:00 2001
From: Dan Subak <dsubak@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:43:49 -0400
Subject: [PATCH 10/12] Readd dropped GTM calls (#3696)

* Readd dropped GTM calls

* Fix tests
---
 .../ProductPages/CourseEnrollArea.test.tsx          |  2 ++
 .../src/app-pages/ProductPages/CoursePage.test.tsx  |  2 ++
 .../app-pages/ProductPages/InfoBoxCourse.test.tsx   |  2 ++
 .../ProductPages/useCourseEnrollment.test.tsx       | 13 ++++++++++++-
 .../app-pages/ProductPages/useCourseEnrollment.ts   |  8 +++++++-
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontends/main/src/app-pages/ProductPages/CourseEnrollArea.test.tsx b/frontends/main/src/app-pages/ProductPages/CourseEnrollArea.test.tsx
index 34665334fd..29b610389a 100644
--- a/frontends/main/src/app-pages/ProductPages/CourseEnrollArea.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CourseEnrollArea.test.tsx
@@ -28,6 +28,8 @@ jest.mock("posthog-js/react", () => ({
 
 jest.mock("@/common/analytics/gtm", () => ({
   trackCourseEnrolled: jest.fn(),
+  trackStartEnrollment: jest.fn(),
+  trackBeginCheckout: jest.fn(),
 }))
 
 const makeCourse = mitxFactories.courses.course
diff --git a/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx b/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
index cca1e80a3f..02f591abc2 100644
--- a/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
@@ -45,6 +45,8 @@ jest.mock("next-nprogress-bar", () => ({
 
 jest.mock("@/common/analytics/gtm", () => ({
   trackCourseEnrolled: jest.fn(),
+  trackStartEnrollment: jest.fn(),
+  trackBeginCheckout: jest.fn(),
   trackViewCoursePage: jest.fn(),
   trackCourseProgramView: jest.fn(),
 }))
diff --git a/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
index b8526946f5..59a7c2c112 100644
--- a/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
@@ -26,6 +26,8 @@ jest.mock("posthog-js/react", () => ({
 
 jest.mock("@/common/analytics/gtm", () => ({
   trackCourseEnrolled: jest.fn(),
+  trackStartEnrollment: jest.fn(),
+  trackBeginCheckout: jest.fn(),
 }))
 
 const makeCourse = mitxFactories.courses.course
diff --git a/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.test.tsx b/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.test.tsx
index 70641bc629..44061a9c97 100644
--- a/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.test.tsx
@@ -22,10 +22,16 @@ import type {
 } from "@mitodl/mitxonline-api-axios/v2"
 import { usePostHog } from "posthog-js/react"
 import { PostHogEvents } from "@/common/constants"
-import { trackCourseEnrolled } from "@/common/analytics/gtm"
+import {
+  trackCourseEnrolled,
+  trackStartEnrollment,
+  trackBeginCheckout,
+} from "@/common/analytics/gtm"
 
 jest.mock("@/common/analytics/gtm", () => ({
   trackCourseEnrolled: jest.fn(),
+  trackStartEnrollment: jest.fn(),
+  trackBeginCheckout: jest.fn(),
 }))
 
 jest.mock("posthog-js/react", () => ({
@@ -380,6 +386,9 @@ describe("useCourseEnrollment — actions", () => {
 
     paidOption!.onClick!(fakeEvent)
 
+    expect(trackStartEnrollment).toHaveBeenCalledWith(course.title)
+    expect(trackBeginCheckout).toHaveBeenCalledWith(course.title)
+
     await waitFor(() =>
       expect(makeRequest).toHaveBeenCalledWith(
         expect.objectContaining({ method: "delete", url: clearUrl }),
@@ -422,6 +431,8 @@ describe("useCourseEnrollment — actions", () => {
 
     freeOption!.onClick!(fakeEvent)
 
+    expect(trackStartEnrollment).toHaveBeenCalledWith(course.title)
+
     await waitFor(() =>
       expect(makeRequest).toHaveBeenCalledWith(
         expect.objectContaining({
diff --git a/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.ts b/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.ts
index 4f9db14cd8..196244e8c7 100644
--- a/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.ts
+++ b/frontends/main/src/app-pages/ProductPages/useCourseEnrollment.ts
@@ -9,7 +9,11 @@ import { useReplaceBasketItem } from "@/common/mitxonline/useReplaceBasketItem"
 import { enrollmentAlertSuccessUrl } from "@/common/mitxonline"
 import { useRouter } from "next-nprogress-bar"
 import { usePostHog } from "posthog-js/react"
-import { trackCourseEnrolled } from "@/common/analytics/gtm"
+import {
+  trackCourseEnrolled,
+  trackStartEnrollment,
+  trackBeginCheckout,
+} from "@/common/analytics/gtm"
 import { DASHBOARD_HOME } from "@/common/urls"
 import { getCourseScenario, type CourseScenario } from "./courseRun"
 import { useCourseEnrolledRunIds } from "./useCourseEnrolledRunIds"
@@ -90,9 +94,11 @@ export const useCourseEnrollment = (
         opts?.onRequireSignup?.(e.currentTarget)
         return
       }
+      trackStartEnrollment(course.title)
       if (kind === "paid") {
         const product = selectedRun?.products?.[0]
         if (product) {
+          trackBeginCheckout(course.title)
           replaceBasketItem.mutate(product.id)
         }
       } else if (kind === "free") {

From 4652ac40d4ce174e13c72d2b53163ea6119b3041 Mon Sep 17 00:00:00 2001
From: Tobias Macey <tmacey@mit.edu>
Date: Wed, 29 Jul 2026 16:11:09 -0400
Subject: [PATCH 11/12] test: pin course-run end dates so session options stay
 unambiguous (#3697)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InfoBoxCourse's session-switch tests pick an option with a regex built
from one run's start date, but only pinned `start_date` — the factory
filled `end_date` with `faker.date.future()`. Options are labelled with
the whole range ("Aug 28 - Sep 27, 2026"), so whenever a run's random end
date landed on another run's start date, the regex matched two options and
the suite failed with "Found multiple elements".

That is what took down javascript-tests on an unrelated PR: a run starting
Aug 28 drew the end date Sep 27, colliding with the Sep 27 start of the run
the test was clicking. Roughly a 1-in-365 draw, so it surfaces at random on
whichever PR happens to be unlucky.

Pins both ends of both runs, spaced so no two labelled dates can share a
calendar day. Confirmed the mechanism first by reproducing it deliberately
(end date set equal to the next run's start reproduces the exact error) and
then confirming the chosen spacing keeps the query unique.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../ProductPages/InfoBoxCourse.test.tsx       | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
index 59a7c2c112..fe6962e0cf 100644
--- a/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.test.tsx
@@ -35,6 +35,37 @@ const makeRun = mitxFactories.courses.courseRun
 const makeMode = mitxFactories.courses.enrollmentMode
 const makeProduct = mitxFactories.courses.product
 
+const daysFromNow = (days: number) =>
+  new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString()
+
+/**
+ * A run with both ends of its date range pinned.
+ *
+ * Pinning `end_date` is not decoration. The session options are labelled with
+ * the *whole* range ("Aug 28 - Sep 27, 2026"), and the tests below select an
+ * option by a regex built from one run's start date — so an unpinned
+ * `end_date`, which the factory fills with `faker.date.future()`, can land on
+ * the same calendar day as another run's start and make that regex match two
+ * options. That is exactly what happened in
+ * https://github.com/mitodl/mit-learn/actions/runs/30469814580: a run starting
+ * "Aug 28" drew the random end date "Sep 27", which collided with the "Sep 27"
+ * start of the run the test was trying to click.
+ *
+ * The offsets below are spaced so no two labelled dates can share a calendar
+ * day, which makes every option's accessible name unambiguous by construction
+ * rather than by luck.
+ */
+const makeDatedRun = (
+  startInDays: number,
+  endInDays: number,
+  overrides: Parameters<typeof makeRun>[0] = {},
+) =>
+  makeRun({
+    ...overrides,
+    start_date: daysFromNow(startInDays),
+    end_date: daysFromNow(endInDays),
+  })
+
 function setupAuth(enrollments: unknown[] = []) {
   setMockResponse.get(
     apiUrls.userMe.get(),
@@ -115,7 +146,7 @@ describe("InfoBoxCourse — session selector", () => {
 describe("InfoBoxCourse — run selection changes enroll area", () => {
   test("switching from a both run to a free-only run changes the cards", async () => {
     setupAuth()
-    const bothRun = makeRun({
+    const bothRun = makeDatedRun(30, 45, {
       is_enrollable: true,
       is_archived: false,
       is_upgradable: true,
@@ -124,15 +155,13 @@ describe("InfoBoxCourse — run selection changes enroll area", () => {
         makeMode({ requires_payment: true }),
       ],
       products: [makeProduct()],
-      start_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
     })
-    const freeOnlyRun = makeRun({
+    const freeOnlyRun = makeDatedRun(60, 75, {
       is_enrollable: true,
       is_archived: false,
       is_upgradable: false,
       enrollment_modes: [makeMode({ requires_payment: false })],
       products: [],
-      start_date: new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString(),
     })
     const course = makeCourse({
       next_run_id: bothRun.id,
@@ -172,21 +201,19 @@ describe("InfoBoxCourse — run selection changes enroll area", () => {
 
 describe("InfoBoxCourse — session-switch round-trip (enrolled run)", () => {
   test("selecting an enrolled run collapses to Enrolled; switching back restores cards", async () => {
-    const runA = makeRun({
+    const runA = makeDatedRun(30, 45, {
       is_enrollable: true,
       is_archived: false,
       is_upgradable: false,
       enrollment_modes: [makeMode({ requires_payment: false })],
       products: [],
-      start_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
     })
-    const runB = makeRun({
+    const runB = makeDatedRun(60, 75, {
       is_enrollable: true,
       is_archived: false,
       is_upgradable: false,
       enrollment_modes: [makeMode({ requires_payment: false })],
       products: [],
-      start_date: new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString(),
     })
     const course = makeCourse({
       next_run_id: runA.id,

From 715322e4f5f1643cba4800e60daf1786a8b5af99 Mon Sep 17 00:00:00 2001
From: Doof <mitx-devops@mit.edu>
Date: Wed, 29 Jul 2026 20:12:57 +0000
Subject: [PATCH 12/12] Release 0.76.1

---
 RELEASE.rst      | 15 +++++++++++++++
 main/settings.py |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/RELEASE.rst b/RELEASE.rst
index de60aa92e5..807a934aa6 100644
--- a/RELEASE.rst
+++ b/RELEASE.rst
@@ -1,6 +1,21 @@
 Release Notes
 =============
 
+Version 0.76.1
+--------------
+
+- test: pin course-run end dates so session options stay unambiguous (#3697)
+- Readd dropped GTM calls (#3696)
+- feat(b2b): org analytics dashboard for the manager surface (#3679)
+- Fix flaky test:  deterministically sort  choices (#3689)
+- Defer AI library imports to reduce process startup cost (#3683)
+- add ocw topic to search (#3692)
+- Identify posthog persons by keycloak global_id, not django pk (#3693)
+- Fix oasdiff comment for large diffs (#3694)
+- fix garbled non-Latin characters in certificate PDFs (#3685)
+- fix: Show error message when a podcast episode fails to play (#3687)
+- Strip trailing slash from channel_url (#3691)
+
 Version 0.76.0 (Released July 29, 2026)
 --------------
 
diff --git a/main/settings.py b/main/settings.py
index 3967afbd1f..b745d46c23 100644
--- a/main/settings.py
+++ b/main/settings.py
@@ -36,7 +36,7 @@
 from main.settings_pluggy import *  # noqa: F403
 from openapi.settings_spectacular import open_spectacular_settings
 
-VERSION = "0.76.0"
+VERSION = "0.76.1"
 
 log = logging.getLogger()