chore: update changelog

Sync PFP on change

docs/CLOUD_SETTINGS_SYNC_SERVER.md

@@ -120,6 +120,7 @@ The backup is a flat JSON map of **`chrome.storage.local`** keys. It does **not*
 - **OAuth / session keys** — `bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`, plus legacy `cloudAccessToken` / `cloudUsername`.
 - **Assessment Averages caches** — `plugin.assessments-average.storage.assessments`, `plugin.assessments-average.storage.weightings` (school assessment data).
 - **Keys under** `plugin.global-search.storage.*` — reserved so any future plugin storage cache there is not synced.
+- **Grade Analytics** — keys under `bsplus.analytics.*` (synced assessment cache and per-school chart preferences).
 - **`bsplus_cloud_settings_known_remote_updated_at`** — client-only watermark for auto-sync (not part of the cloud backup blob).
 
 On restore, those keys are **not** taken from the server; the device keeps its current local values.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.6.5",
+  "version": "3.7.0",
   "type": "module",
   "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development and add heaps more features!",
   "browserslist": "> 0.5%, last 2 versions, not dead",
@@ -40,6 +40,8 @@
     "@babel/runtime": "^7.26.9",
     "@bedframe/cli": "^0.1.2",
     "@crxjs/vite-plugin": "^2.4.0",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@types/mime-types": "^3.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -83,8 +85,10 @@
     "canvas-confetti": "^1.9.3",
     "codemirror": "^6.0.1",
     "color": "^5.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "dompurify": "^3.2.4",
-    "embeddia": "^1.2.1",
+    "embeddia": "^1.3.0",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-svelte": "^8.5.2",
     "esbuild": "^0.25.3",
@@ -92,6 +96,7 @@
     "flexsearch": "^0.8.147",
     "fuse.js": "^7.1.0",
     "idb": "^8.0.2",
+    "layerchart": "2.0.0-next.27",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mathjs": "^14.4.0",

src/background.ts

@@ -1,4 +1,5 @@
 import browser from "webextension-polyfill";
+import semver from "semver";
 import type { SettingsState } from "@/types/storage";
 import { fetchNews } from "./background/news";
 import {
@@ -42,6 +43,39 @@ function reloadSeqtaPages() {
 /** Callback for sending a response back to the message sender */
 type MessageSender = { (response?: unknown): void };
 
+/** Accept API + GitHub fallback shapes; always return `{ success, data?: { themes } }`. */
+function normalizeFetchThemesResponse(json: unknown): {
+  success: boolean;
+  data?: { themes: unknown[] };
+  error?: string;
+} {
+  if (!json || typeof json !== "object") {
+    return { success: false, error: "Invalid themes response" };
+  }
+  const body = json as Record<string, unknown>;
+  if (body.success === false) {
+    return {
+      success: false,
+      error: typeof body.error === "string" ? body.error : "Failed to fetch themes",
+    };
+  }
+  const data = body.data;
+  let themes: unknown[] | null = null;
+  if (data && typeof data === "object" && !Array.isArray(data)) {
+    const nested = (data as Record<string, unknown>).themes;
+    if (Array.isArray(nested)) themes = nested;
+  } else if (Array.isArray(data)) {
+    themes = data;
+  }
+  if (!themes && Array.isArray(body.themes)) {
+    themes = body.themes;
+  }
+  if (!themes) {
+    return { success: false, error: "Themes list missing from response" };
+  }
+  return { success: true, data: { themes } };
+}
+
 function handleFetchThemes(request: any, sendResponse: MessageSender): boolean {
   const { token } = request;
   const apiUrl = `${apiBase()}/api/themes?type=betterseqta&limit=100&nocache=${Date.now()}`;
@@ -49,13 +83,28 @@ function handleFetchThemes(request: any, sendResponse: MessageSender): boolean {
   const headers: Record<string, string> = {};
   if (token) headers["Authorization"] = `Bearer ${token}`;
   fetch(apiUrl, { cache: "no-store", headers })
-    .then((r) => r.json())
+    .then(async (r) => {
+      const json = await r.json();
+      if (!r.ok) {
+        throw new Error(
+          (json && typeof json === "object" && "error" in json && typeof (json as { error?: string }).error === "string"
+            ? (json as { error: string }).error
+            : null) ?? `Themes API HTTP ${r.status}`,
+        );
+      }
+      return normalizeFetchThemesResponse(json);
+    })
     .then(sendResponse)
     .catch((err) => {
       console.warn("[Background] fetchThemes API failed, trying GitHub fallback:", err?.message);
       fetch(githubUrl, { cache: "no-store" })
-        .then((r) => r.json())
+        .then(async (r) => {
-        .then((data) => sendResponse({ success: true, data: { themes: data.themes ?? [] } }))
+          if (!r.ok) throw new Error(`GitHub fallback HTTP ${r.status}`);
+          const data = await r.json();
+          const themes = Array.isArray(data) ? data : (data?.themes ?? []);
+          return normalizeFetchThemesResponse({ success: true, data: { themes } });
+        })
+        .then(sendResponse)
         .catch((fallbackErr) => {
           console.error("[Background] fetchThemes GitHub fallback error:", fallbackErr);
           sendResponse({ success: false, error: fallbackErr?.message });
@@ -506,6 +555,120 @@ function SetStorageValue(object: any) {
   }
 }
 
+/** One-time migration for 3.6.5: opt upgraders into Global Search + indexing + transparency defaults. */
+const GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY = "plugin.global-search.settings";
+const GLOBAL_SEARCH_MIGRATION_VERSION = "3.6.5";
+
+async function migrateGlobalSearchDefaultsFor365Upgrade(
+  previousVersion: string,
+): Promise<void> {
+  try {
+    const currRaw = browser.runtime.getManifest().version;
+    const prev = semver.coerce(previousVersion);
+    const curr = semver.coerce(currRaw);
+    if (
+      prev == null ||
+      curr == null ||
+      semver.lt(curr, GLOBAL_SEARCH_MIGRATION_VERSION) ||
+      !semver.lt(prev, GLOBAL_SEARCH_MIGRATION_VERSION)
+    ) {
+      return;
+    }
+
+    const got = await browser.storage.local.get(GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY);
+    const existing = (got[GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY] ?? {}) as Record<
+      string,
+      unknown
+    >;
+
+    await browser.storage.local.set({
+      [GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY]: {
+        ...existing,
+        enabled: true,
+        transparencyEffects: true,
+        runIndexingOnLoad: true,
+        passiveIndexing: true,
+      },
+    });
+
+    console.info(
+      `[BetterSEQTA+] Migration ${GLOBAL_SEARCH_MIGRATION_VERSION}: Global Search and related settings enabled (from ${previousVersion}).`,
+    );
+  } catch (e) {
+    console.warn("[BetterSEQTA+] Global Search 3.6.5 settings migration failed:", e);
+  }
+}
+
+/** One-time reset for 3.6.6: re-enable Theme of the Month for existing users. */
+const THEME_OF_THE_MONTH_RESET_VERSION = "3.6.6";
+
+async function resetThemeOfTheMonthDisabledFor366Upgrade(
+  previousVersion: string,
+): Promise<void> {
+  try {
+    const currRaw = browser.runtime.getManifest().version;
+    const prev = semver.coerce(previousVersion);
+    const curr = semver.coerce(currRaw);
+    if (
+      prev == null ||
+      curr == null ||
+      semver.lt(curr, THEME_OF_THE_MONTH_RESET_VERSION) ||
+      !semver.lt(prev, THEME_OF_THE_MONTH_RESET_VERSION)
+    ) {
+      return;
+    }
+
+    await browser.storage.local.set({
+      themeOfTheMonthDisabled: false,
+      themeOfTheMonthLastSeenId: undefined,
+    });
+
+    console.info(
+      `[BetterSEQTA+] Migration ${THEME_OF_THE_MONTH_RESET_VERSION}: Theme of the Month re-enabled (from ${previousVersion}).`,
+    );
+  } catch (e) {
+    console.warn(
+      "[BetterSEQTA+] Theme of the Month 3.6.6 reset migration failed:",
+      e,
+    );
+  }
+}
+
+/** 3.7.0: Close no longer marks entries seen — clear legacy dismissal keys. */
+const THEME_OF_THE_MONTH_RELOAD_VERSION = "3.7.0";
+
+async function resetThemeOfTheMonthDismissalFor370Upgrade(
+  previousVersion: string,
+): Promise<void> {
+  try {
+    const currRaw = browser.runtime.getManifest().version;
+    const prev = semver.coerce(previousVersion);
+    const curr = semver.coerce(currRaw);
+    if (
+      prev == null ||
+      curr == null ||
+      semver.lt(curr, THEME_OF_THE_MONTH_RELOAD_VERSION) ||
+      !semver.lt(prev, THEME_OF_THE_MONTH_RELOAD_VERSION)
+    ) {
+      return;
+    }
+
+    await browser.storage.local.set({
+      themeOfTheMonthLastSeenId: undefined,
+      themeOfTheMonthDismissedMonth: undefined,
+    });
+
+    console.info(
+      `[BetterSEQTA+] Migration ${THEME_OF_THE_MONTH_RELOAD_VERSION}: Theme of the Month shows again until dismissed for the month (from ${previousVersion}).`,
+    );
+  } catch (e) {
+    console.warn(
+      "[BetterSEQTA+] Theme of the Month 3.7.0 dismissal migration failed:",
+      e,
+    );
+  }
+}
+
 browser.runtime.onInstalled.addListener(function (event) {
   browser.storage.local.remove(["justupdated"]);
   browser.storage.local.remove(["data"]);
@@ -513,6 +676,12 @@ browser.runtime.onInstalled.addListener(function (event) {
   if (event.reason == "install" || event.reason == "update") {
     browser.storage.local.set({ justupdated: true });
   }
+
+  if (event.reason === "update" && event.previousVersion) {
+    void migrateGlobalSearchDefaultsFor365Upgrade(event.previousVersion);
+    void resetThemeOfTheMonthDisabledFor366Upgrade(event.previousVersion);
+    void resetThemeOfTheMonthDismissalFor370Upgrade(event.previousVersion);
+  }
 });
 
 initCloudSettingsAutoSync({ reloadSeqtaPages });

src/css/documentload.scss

@@ -37,8 +37,9 @@
 @layer base, override;
 
 @layer override {
-  * {
+  .legacy-root,
-    font-family: Rubik, sans-serif !important;
+  .legacy-root * {
+    font-family: var(--betterseqta-font-family, Rubik), sans-serif !important;
   }
 
   .iconFamily,

src/css/injected.scss

@@ -119,7 +119,8 @@ select option {
 #container {
   background: var(--auto-background) !important;
 }
-:root * {
+.legacy-root,
+.legacy-root * {
   font-family: Rubik, sans-serif !important;
   --theme-fg-parts: white;
 }
@@ -455,6 +456,58 @@ ul.magicDelete > li.deleting {
   top: 71.5px;
   margin-top: -2px;
 }
+
+/* Drill-in stack: only the current list + folder header stay clickable.
+   Class is toggled by updateSidebarAccessibility (never touches aria-hidden). */
+#menu .bsplus-sidebar-offscreen,
+#menu .bsplus-sidebar-offscreen * {
+  pointer-events: none !important;
+  user-select: none !important;
+}
+
+#menu > ul > .bsplus-sidebar-offscreen:not(.hasChildren.active) {
+  position: absolute !important;
+  left: -10000px !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  opacity: 0 !important;
+}
+
+#menu .sub .bsplus-sidebar-offscreen:not(.hasChildren.active) {
+  visibility: hidden !important;
+  position: absolute !important;
+  left: -10000px !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+}
+
+/* Only the frontmost open .sub panel receives pointer events */
+#menu .sub {
+  pointer-events: none;
+}
+
+#menu li.hasChildren.active > .sub {
+  pointer-events: auto;
+}
+
+#menu li.hasChildren.active > .sub:has(.hasChildren.active) {
+  pointer-events: none !important;
+}
+
+#menu li.hasChildren.active .hasChildren.active > .sub {
+  pointer-events: auto !important;
+}
+
+#menu:has(> ul > li.hasChildren.active) > ul > li:not(.hasChildren.active) {
+  pointer-events: none !important;
+}
 #menu section > label {
   align-items: center;
   box-sizing: border-box;
@@ -2326,6 +2379,10 @@ blurred {
   height: 64px;
   cursor: pointer;
 }
+/* While a drill-in submenu is open, don't steal clicks meant for folder rows. */
+#menu:has(li.hasChildren.active) > .icon-cover {
+  pointer-events: none;
+}
 .uiSlidePane > .pane > .header button {
   color: var(--text-color) !important;
 }
@@ -3502,6 +3559,32 @@ div.day-empty {
   color: var(--text-primary);
   transform-origin: center center;
 }
+
+/* Text-only popups (privacy notices): body fills remaining height, scrolls inside */
+.whatsnewContainer.whatsnewContainer--scrollBody {
+  .whatsnewHeader {
+    flex-shrink: 0;
+    height: auto;
+    min-height: 3em;
+  }
+
+  > .whatsnewTextContainer {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: none;
+    width: 90%;
+    margin: 0 auto 0.75rem;
+    padding-bottom: 0.5rem;
+    box-sizing: border-box;
+  }
+
+  > .whatsnewTextContainer.privacyStatement {
+    font-size: 1.1rem;
+    line-height: 1.6;
+  }
+}
 .whatsnewTextContainer.privacyStatement p {
   margin-bottom: 1.5ex;
 
@@ -3753,20 +3836,77 @@ div.day-empty {
   pointer-events: none;
   animation: themeOfTheMonthCardOut 0.18s ease-in forwards;
 }
-.themeOfTheMonthCardClose {
+.themeOfTheMonthCardConfirm {
-  position: absolute !important;
+  position: absolute;
-  top: 4px !important;
+  inset: 0;
-  right: 4px !important;
+  z-index: 4;
-  z-index: 2;
+  display: flex;
-  width: 32px;
+  align-items: center;
-  height: 32px;
+  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.22);
+  padding: 16px;
-  border-radius: 16px !important;
+  border-radius: inherit;
-  background: rgba(0, 0, 0, 0.42);
+  background: color-mix(in srgb, var(--background-primary) 88%, transparent);
-  color: white;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease;
+}
+.themeOfTheMonthCardConfirm[hidden] {
+  display: none;
+}
+.themeOfTheMonthCardConfirmVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.themeOfTheMonthCardConfirmInner {
+  width: 100%;
+  text-align: center;
+}
+.themeOfTheMonthCardConfirmInner h3 {
+  margin: 0 0 6px;
+  font-size: 1rem;
+  line-height: 1.2;
+}
+.themeOfTheMonthCardConfirmInner p {
+  margin: 0 0 14px;
+  font-size: 0.86rem;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
+}
+.themeOfTheMonthCardConfirmActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+.themeOfTheMonthCardConfirmCancel,
+.themeOfTheMonthCardConfirmAccept {
+  appearance: none;
+  border: none;
   cursor: pointer;
-  font-size: 1.35rem;
+  border-radius: 9999px;
-  line-height: 1;
+  padding: 0.5rem 0.85rem;
+  font-size: 0.84rem;
+  font-weight: 700;
+  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
+}
+.themeOfTheMonthCardConfirmCancel {
+  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
+  color: var(--text-primary);
+}
+.themeOfTheMonthCardConfirmAccept {
+  background: var(--better-pri, #6366f1);
+  color: white;
+}
+.themeOfTheMonthCardConfirmCancel:hover,
+.themeOfTheMonthCardConfirmAccept:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+.themeOfTheMonthCardConfirmCancel:active,
+.themeOfTheMonthCardConfirmAccept:active {
+  transform: translateY(0);
 }
 .themeOfTheMonthCardImage {
   display: block;
@@ -3805,11 +3945,34 @@ div.day-empty {
 .themeOfTheMonthCardActions {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-end;
+  align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 10px;
+}
+.themeOfTheMonthCardActionsStart {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.themeOfTheMonthCardActionsEnd {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  margin-left: auto;
+  padding: 3px;
+  gap: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: color-mix(
+    in srgb,
+    var(--background-secondary, var(--text-primary)) 28%,
+    var(--background-primary)
+  );
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
 }
 .themeOfTheMonthCardPrimary,
-.themeOfTheMonthCardSecondary {
+.themeOfTheMonthCardSecondary,
+.themeOfTheMonthCardDontShow {
   appearance: none;
   border: none;
   cursor: pointer;
@@ -3817,23 +3980,49 @@ div.day-empty {
   padding: 0.58rem 0.9rem;
   font-size: 0.86rem;
   font-weight: 700;
-  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 .themeOfTheMonthCardPrimary {
   background: var(--better-pri, #6366f1);
   color: white;
 }
-.themeOfTheMonthCardSecondary {
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardSecondary,
-  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardDontShow {
+  padding: 0.5rem 0.8rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: none !important;
+  border-radius: 9999px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  filter: none !important;
+  transform: none !important;
+}
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardSecondary {
   color: var(--text-primary);
 }
-.themeOfTheMonthCardPrimary:hover,
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardDontShow {
-.themeOfTheMonthCardSecondary:hover {
+  color: color-mix(in srgb, var(--text-primary) 58%, transparent);
+}
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardSecondary:hover,
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardSecondary:focus-visible,
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardDontShow:hover,
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardDontShow:focus-visible {
+  background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
+  border-radius: 9999px !important;
+  filter: none !important;
+  transform: none !important;
+}
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardSecondary:active,
+#theme-of-the-month-card .themeOfTheMonthCardActionsEnd .themeOfTheMonthCardDontShow:active {
+  background: color-mix(in srgb, var(--text-primary) 14%, transparent) !important;
+  border-radius: 9999px !important;
+}
+.themeOfTheMonthCardPrimary:hover {
   filter: brightness(1.08);
   transform: translateY(-1px);
 }
-.themeOfTheMonthCardPrimary:active,
+.themeOfTheMonthCardPrimary:active {
-.themeOfTheMonthCardSecondary:active {
   transform: translateY(0);
 }
 @keyframes themeOfTheMonthCardIn {

src/interface/components/FontPickerModal.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { onMount } from "svelte";
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import { FONT_PRESETS, DEFAULT_FONT_ID, getFontPreset } from "@/seqta/ui/fonts/presets";
+  import {
+    applySelectedFont,
+    buildFontPreviewCss,
+    ensureFontPickerFontsLoaded,
+  } from "@/seqta/ui/fonts/Manager";
+  import { portal } from "@/interface/utils/portal";
+  import { syncPageThemeToElement } from "@/interface/utils/syncPageTheme";
+  import fontPickerStyles from "./fontPickerModal.css?inline";
+
+  let { hidePicker } = $props<{ hidePicker: () => void }>();
+
+  let rootEl = $state<HTMLElement | null>(null);
+  let selectedId = $state(getFontPreset($settingsState.selectedFont).id);
+  let styleEl: HTMLStyleElement | null = null;
+
+  function selectFont(id: string) {
+    selectedId = id;
+    settingsState.selectedFont = id;
+    applySelectedFont(id);
+  }
+
+  function resetToDefault() {
+    selectFont(DEFAULT_FONT_ID);
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) hidePicker();
+  }
+
+  function syncTheme() {
+    if (rootEl) syncPageThemeToElement(rootEl);
+  }
+
+  onMount(() => {
+    void ensureFontPickerFontsLoaded();
+
+    styleEl = document.getElementById(
+      "betterseqta-font-picker-styles",
+    ) as HTMLStyleElement | null;
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = "betterseqta-font-picker-styles";
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = `${fontPickerStyles}\n${buildFontPreviewCss()}`;
+
+    syncTheme();
+
+    const themeObserver = new MutationObserver(() => syncTheme());
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    });
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") hidePicker();
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+
+    return () => {
+      themeObserver.disconnect();
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={rootEl}
+  use:portal={document.body}
+  class="bsplus-font-picker-overlay bsplus-font-picker-root"
+  onclick={handleBackdropClick}
+  onkeydown={(event) => {
+    if (event.key === "Enter" || event.key === " ") handleBackdropClick(event as unknown as MouseEvent);
+  }}
+  role="presentation"
+  transition:fade={{ duration: 200 }}
+>
+  <div
+    class="bsplus-font-picker-dialog"
+    onclick={(event) => event.stopPropagation()}
+    onkeydown={(event) => event.stopPropagation()}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="font-picker-title"
+  >
+    <header class="bsplus-font-picker-header">
+      <div class="bsplus-font-picker-header-actions">
+        <button
+          type="button"
+          onclick={resetToDefault}
+          disabled={selectedId === DEFAULT_FONT_ID}
+          class="bsplus-font-picker-reset"
+          aria-label="Reset font to default"
+        >
+          Reset to default
+        </button>
+        <button
+          type="button"
+          onclick={hidePicker}
+          class="bsplus-font-picker-done"
+          aria-label="Close font picker"
+        >
+          Done
+        </button>
+      </div>
+      <div class="bsplus-font-picker-header-text">
+        <h2 id="font-picker-title" class="bsplus-font-picker-title">
+          Choose a font
+        </h2>
+        <p class="bsplus-font-picker-desc">
+          Choose a typeface for SEQTA Learn.
+        </p>
+      </div>
+    </header>
+
+    <div class="bsplus-font-picker-list">
+      {#each FONT_PRESETS as preset (preset.id)}
+        <button
+          type="button"
+          onclick={() => selectFont(preset.id)}
+          class="bsplus-font-picker-option {selectedId === preset.id ? 'is-selected' : ''}"
+          data-font-id={preset.id}
+        >
+          <div class="bsplus-font-picker-option-head">
+            <span class="bsplus-font-picker-option-name">{preset.name}</span>
+            {#if selectedId === preset.id}
+              <span class="bsplus-font-picker-badge">Selected</span>
+            {/if}
+          </div>
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>

src/interface/components/fontPickerModal.css

@@ -0,0 +1,311 @@
+/* Font picker — analytics design tokens & components */
+
+.bsplus-font-picker-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  cursor: pointer;
+  background: color-mix(in srgb, #000 52%, transparent);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.bsplus-font-picker-root {
+  --bsplus-analytics-radius: 16px;
+  --bsplus-analytics-radius-sm: 12px;
+  --bsplus-analytics-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --bsplus-analytics-surface: var(--background-primary, #ffffff);
+  --bsplus-analytics-surface-2: var(--background-secondary, #f8fafc);
+  --bsplus-analytics-text: var(--text-primary, #1a1a1a);
+  --bsplus-analytics-muted: color-mix(
+    in srgb,
+    var(--bsplus-analytics-text) 55%,
+    transparent
+  );
+  --bsplus-analytics-border: color-mix(
+    in srgb,
+    var(--theme-offset-bg, var(--background-secondary, #e2e8f0)) 78%,
+    transparent
+  );
+  --bsplus-analytics-shadow: 0 5px 16px 6px rgba(0, 0, 0, 0.12);
+  --bsplus-analytics-shadow-hover: 0 8px 24px 8px rgba(0, 0, 0, 0.16);
+  --bsplus-analytics-accent: var(--better-main, #007bff);
+
+  font-family: Rubik, system-ui, sans-serif;
+  font-size: 0.875rem;
+  color: var(--bsplus-analytics-text);
+}
+
+.bsplus-font-picker-root.dark {
+  --bsplus-analytics-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.45);
+  --bsplus-analytics-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.55);
+}
+
+@keyframes bsplus-font-picker-in {
+  from {
+    opacity: 0;
+    transform: translateY(18px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.bsplus-font-picker-dialog {
+  width: min(100%, 22rem);
+  max-height: min(88vh, 820px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  cursor: auto;
+  border-radius: var(--bsplus-analytics-radius);
+  background: var(--bsplus-analytics-surface);
+  border: 1px solid var(--bsplus-analytics-border);
+  box-shadow: var(--bsplus-analytics-shadow-hover);
+  animation: bsplus-font-picker-in 0.45s var(--bsplus-analytics-ease) forwards;
+}
+
+@media (min-width: 640px) {
+  .bsplus-font-picker-dialog {
+    width: min(92vw, 22rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bsplus-font-picker-dialog {
+    animation: none;
+  }
+}
+
+.bsplus-font-picker-header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.85rem;
+  flex-shrink: 0;
+  padding: 1.15rem 1.25rem;
+  border-bottom: 1px solid var(--bsplus-analytics-border);
+}
+
+.bsplus-font-picker-header-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.bsplus-font-picker-header-text {
+  min-width: 0;
+}
+
+.bsplus-font-picker-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--bsplus-analytics-text);
+}
+
+.bsplus-font-picker-desc {
+  margin: 0.35rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--bsplus-analytics-muted);
+  line-height: 1.5;
+}
+
+.bsplus-font-picker-reset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.65rem 1rem;
+  border-radius: var(--bsplus-analytics-radius-sm);
+  border: 2px solid var(--bsplus-analytics-border);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  color: var(--bsplus-analytics-text);
+  transition:
+    transform 0.2s var(--bsplus-analytics-ease),
+    background 0.2s var(--bsplus-analytics-ease),
+    border-color 0.2s var(--bsplus-analytics-ease),
+    opacity 0.2s ease;
+}
+
+.bsplus-font-picker-reset:hover:not(:disabled) {
+  transform: scale(1.02);
+  background: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface-2) 80%,
+    transparent
+  );
+}
+
+.bsplus-font-picker-reset:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.bsplus-font-picker-reset:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
+}
+
+.bsplus-font-picker-reset:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.bsplus-font-picker-done {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0.65rem 1.25rem;
+  border-radius: var(--bsplus-analytics-radius-sm);
+  border: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  background: var(--bsplus-analytics-accent);
+  color: var(--text-color, #ffffff);
+  box-shadow: 0 2px 8px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 40%, transparent);
+  transition:
+    transform 0.2s var(--bsplus-analytics-ease),
+    box-shadow 0.2s var(--bsplus-analytics-ease);
+}
+
+.bsplus-font-picker-done:hover {
+  transform: scale(1.03);
+  box-shadow: 0 4px 14px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 45%, transparent);
+}
+
+.bsplus-font-picker-done:active {
+  transform: scale(0.97);
+}
+
+.bsplus-font-picker-done:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
+}
+
+.bsplus-font-picker-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1rem 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent)
+    transparent;
+}
+
+.bsplus-font-picker-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.bsplus-font-picker-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
+}
+
+.bsplus-font-picker-option {
+  width: 100%;
+  padding: 0.9rem 1rem;
+  text-align: left;
+  border-radius: var(--bsplus-analytics-radius-sm);
+  border: 1px solid var(--bsplus-analytics-border);
+  background: var(--bsplus-analytics-surface);
+  box-shadow: var(--bsplus-analytics-shadow);
+  cursor: pointer;
+  font-family: Rubik, system-ui, sans-serif;
+  flex-shrink: 0;
+  transition:
+    transform 0.25s var(--bsplus-analytics-ease),
+    box-shadow 0.25s var(--bsplus-analytics-ease),
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.bsplus-font-picker-option:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--bsplus-analytics-shadow-hover);
+  background: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface-2) 55%,
+    var(--bsplus-analytics-surface)
+  );
+}
+
+.bsplus-font-picker-option:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--bsplus-analytics-shadow-hover),
+    0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 30%, transparent);
+}
+
+.bsplus-font-picker-option.is-selected {
+  border-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 45%,
+    var(--bsplus-analytics-border)
+  );
+  background: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 10%,
+    var(--bsplus-analytics-surface)
+  );
+  box-shadow: 0 4px 16px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
+}
+
+.bsplus-font-picker-option-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0;
+}
+
+.bsplus-font-picker-root .bsplus-font-picker-option-name {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--bsplus-analytics-text);
+  text-align: left;
+  min-width: 0;
+}
+
+.bsplus-font-picker-badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 18%,
+    transparent
+  );
+  color: var(--bsplus-analytics-accent);
+}

src/interface/components/store/CoverSwiper.svelte

@@ -10,14 +10,18 @@
   }>();
   let emblaApi = $state();
 
-  const options = { loop: true };
+  const options = $derived({ loop: slides.length > 1 });
-  const plugins = [
+  const plugins = $derived(
-    Autoplay({
+    slides.length > 1
-      delay: 5000,
+      ? [
-      stopOnInteraction: false,
+          Autoplay({
-      stopOnMouseEnter: true,
+            delay: 5000,
-    }),
+            stopOnInteraction: false,
-  ];
+            stopOnMouseEnter: true,
+          }),
+        ]
+      : [],
+  );
 
   function onInit(event: CustomEvent) {
     emblaApi = event.detail;

src/interface/components/store/ThemeGrid.svelte

@@ -21,9 +21,12 @@
     allStoreThemeRows?: Theme[];
   }>();
   
-  let filteredThemes = $derived(themes.filter((theme: Theme) =>
+  let filteredThemes = $derived(themes.filter((theme: Theme) => {
-    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
+    const q = searchTerm.toLowerCase();
-  ));
+    const name = (theme.name ?? '').toLowerCase();
+    const description = (theme.description ?? '').toLowerCase();
+    return name.includes(q) || description.includes(q);
+  }));
 </script>
 
 <div class="relative" >

src/interface/components/store/ThemeModal.svelte

@@ -234,7 +234,7 @@
 
   $effect(() => {
 
-    if (displayTheme) {
+    if (displayTheme && modalElement) {
 
       animate(
 

src/interface/pages/settings.svelte

@@ -15,6 +15,7 @@
   //import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
 
   import ColourPicker from "../components/ColourPicker.svelte";
+  import FontPickerModal from "../components/FontPickerModal.svelte";
   import CloudPanel from "../components/CloudPanel.svelte";
   import DisclaimerModal from "../components/DisclaimerModal.svelte";
   import { settingsPopup } from "../hooks/SettingsPopup";
@@ -47,6 +48,10 @@
     showColourPicker = true;
   };
 
+  const openFontPicker = () => {
+    showFontPicker = true;
+  };
+
   const openChangelog = () => {
     OpenWhatsNewPopup();
     closeExtensionPopup();
@@ -69,6 +74,7 @@
 
   let { standalone } = $props<{ standalone?: boolean }>();
   let showColourPicker = $state<boolean>(false);
+  let showFontPicker = $state<boolean>(false);
   let showCloudPanel = $state<boolean>(false);
 
   const openCloudPanel = () => {
@@ -85,6 +91,7 @@
   onMount(() => {
     settingsPopup.addListener(() => {
       showColourPicker = false;
+      showFontPicker = false;
       showCloudPanel = false;
     });
 
@@ -95,7 +102,7 @@
 </script>
 
 <div
-  class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
+  class="relative w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
     ? 'dark'
     : ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
 >
@@ -293,7 +300,7 @@
         {
           title: "Settings",
           Content: Settings,
-          props: { showColourPicker: openColourPicker, showDisclaimer, showCloudPanel: openCloudPanel },
+          props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
         },
         { title: "Shortcuts", Content: Shortcuts },
         { title: "Themes", Content: Theme },
@@ -318,6 +325,14 @@
   {/if}
 </div>
 
+{#if showFontPicker}
+  <FontPickerModal
+    hidePicker={() => {
+      showFontPicker = false;
+    }}
+  />
+{/if}
+
 {#if showDisclaimerModal && disclaimerCallbacks}
   <DisclaimerModal
     title={disclaimerTitle}

src/interface/pages/settings/general.svelte

@@ -45,6 +45,7 @@
   }
 
   import { getAllPluginSettings } from "@/plugins"
+  import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage"
   import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
 
   // Union type representing all possible settings
@@ -79,7 +80,9 @@
     settings: Record<string, SettingType>;
   }
 
-  const pluginSettings = getAllPluginSettings() as Plugin[];
+  const pluginSettings = getAllPluginSettings().filter(
+    (plugin) => !(isSeqtaEngageExperience() && plugin.pluginId === "global-search"),
+  ) as Plugin[];
   const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
 
   let cloudState = $state(cloudAuth.state);
@@ -129,8 +132,9 @@
     loadPluginSettings();
   })
 
-  const { showColourPicker, showDisclaimer, showCloudPanel } = $props<{ 
+  const { showColourPicker, showFontPicker, showDisclaimer, showCloudPanel } = $props<{ 
     showColourPicker: () => void;
+    showFontPicker: () => void;
     showDisclaimer: (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => void;
     showCloudPanel: () => void;
   }>();
@@ -189,6 +193,16 @@
         onClick: showColourPicker
       }
     },
+    {
+      title: "Interface Font",
+      description: "Choose the typeface used across SEQTA Learn",
+      id: 16,
+      Component: Button,
+      props: {
+        onClick: showFontPicker,
+        text: "Change"
+      }
+    },
     {
       title: "Icon Only Sidebar",
       description: "Show only icons in the sidebar for a compact layout",
@@ -420,6 +434,18 @@
           {/each}
         {/if}
       </div>
+      {#if plugin.pluginId === 'global-search'}
+        {@render Setting({
+          title: "Theme of the Month",
+          description: "Show the monthly featured theme popup when a new entry is available",
+          id: 15,
+          Component: Switch,
+          props: {
+            state: !($settingsState.themeOfTheMonthDisabled ?? false),
+            onChange: (isOn: boolean) => settingsState.themeOfTheMonthDisabled = !isOn
+          }
+        })}
+      {/if}
   </div>
   {/each}
 

src/interface/pages/settings/theme.svelte

@@ -36,4 +36,4 @@
       </div>
     </div>
   {/if}
-</div>
+</div>

src/interface/pages/store.svelte

@@ -7,7 +7,7 @@
   import SkeletonLoader from '../components/SkeletonLoader.svelte';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import type { Theme } from '../types/Theme'
-  import { visibleStoreThemes, buildCoverSlidesForThemes } from '@/interface/utils/themeStoreFlavours'
+  import { visibleStoreThemes, buildCoverSlidesForThemes, normalizeStoreTheme } from '@/interface/utils/themeStoreFlavours'
   import browser from 'webextension-polyfill'
   import ThemeModal from '../components/store/ThemeModal.svelte'
   import Header from '../components/store/Header.svelte'
@@ -41,9 +41,22 @@
   let activeTab = $state('themes');
   
   let error = $state<string | null>(null);
+  let fetchAttempt = $state(0);
   let selectedBackground = $state<string | null>(null);
   let showSignInOverlay = $state(false);
 
+  const MAX_FETCH_ATTEMPTS = 3;
+  const FETCH_MESSAGE_TIMEOUT_MS = 25_000;
+
+  function sendMessageWithTimeout<T>(message: object): Promise<T> {
+    return Promise.race([
+      browser.runtime.sendMessage(message) as Promise<T>,
+      new Promise<T>((_, reject) => {
+        setTimeout(() => reject(new Error('Theme store request timed out — reload the SEQTA page after updating the extension.')), FETCH_MESSAGE_TIMEOUT_MS);
+      }),
+    ]);
+  }
+
   const fetchCurrentThemes = async () => {
     const themes = await themeManager.getAvailableThemes();
     currentThemes = themes.filter(theme => theme !== null).map(theme => theme.id);
@@ -100,26 +113,42 @@
   };
 
   // Fetch themes via background script (avoids CORS when store runs inside SEQTA page)
-  const fetchThemes = async () => {
+  const fetchThemes = async (isRetry = false) => {
+    if (!isRetry) {
+      fetchAttempt = 0;
+      error = null;
+    }
     try {
       const token = await cloudAuth.getStoredToken();
-      const data = (await browser.runtime.sendMessage({
+      const data = await sendMessageWithTimeout<{
+        success?: boolean;
+        data?: { themes: unknown[] };
+        error?: string;
+      }>({
         type: 'fetchThemes',
         token: token ?? undefined,
-      })) as {
+      });
-        success?: boolean;
+      if (!data?.success || !Array.isArray(data?.data?.themes)) {
-        data?: { themes: Theme[] };
-        error?: string;
-      };
-      if (!data?.success || !data?.data?.themes) {
         throw new Error(data?.error || 'Failed to fetch themes');
       }
-      themes = [...data.data.themes].sort(compareStoreThemes);
+      themes = data.data.themes
-
+        .map((row) => normalizeStoreTheme(row as Record<string, unknown>))
+        .filter((t) => t.id.length > 0)
+        .sort(compareStoreThemes);
+      error = null;
       loading = false;
     } catch (err) {
       console.error('Failed to fetch themes', err);
-      setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
+      fetchAttempt += 1;
+      if (fetchAttempt >= MAX_FETCH_ATTEMPTS) {
+        error =
+          err instanceof Error
+            ? err.message
+            : 'Could not load themes. Reload the SEQTA page, then open the store again.';
+        loading = false;
+        return;
+      }
+      setTimeout(() => fetchThemes(true), 5000);
     }
   };
 
@@ -160,11 +189,12 @@
 
   // Filter themes (list is already featured-first, then newest; filter preserves order)
   let filteredThemes = $derived(
-    listThemes.filter(
+    listThemes.filter((theme) => {
-      (theme) =>
+      const q = searchTerm.toLowerCase();
-        theme.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      const name = (theme.name ?? '').toLowerCase();
-        theme.description.toLowerCase().includes(searchTerm.toLowerCase()),
+      const description = (theme.description ?? '').toLowerCase();
-    ),
+      return name.includes(q) || description.includes(q);
+    }),
   );
 
   async function installThemeFromStore(themeId: string, meta: Theme) {
@@ -221,7 +251,28 @@
       <!-- Loading State -->
       {#if loading}
         <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-          <SkeletonLoader width="100%" height="200px" />
+          {#each Array(6) as _, i (i)}
+            <SkeletonLoader width="100%" height="200px" />
+          {/each}
+        </div>
+      {:else if error}
+        <div class="flex flex-col items-center justify-center py-24 text-center max-w-lg mx-auto">
+          <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Couldn&apos;t load themes</h2>
+          <p class="mt-3 text-zinc-600 dark:text-zinc-300">{error}</p>
+          <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+            After an extension update, reload your SEQTA tab so the new version can talk to the browser.
+          </p>
+          <button
+            type="button"
+            class="mt-6 px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700"
+            onclick={() => {
+              loading = true;
+              error = null;
+              void fetchThemes();
+            }}
+          >
+            Try again
+          </button>
         </div>
       {:else}
         <!-- Themes Tab Content -->

src/interface/utils/portal.ts

@@ -4,16 +4,21 @@ import type { Action } from "svelte/action";
  * Svelte action that moves the element to a different DOM target.
  * Defaults to the nearest ShadowRoot so styles remain intact when the app
  * is rendered inside a shadow DOM. Falls back to document.body otherwise.
- * Keeps all Svelte reactivity/events intact while escaping ancestor stacking contexts.
+ * Pass `document.body` to escape transformed/contained settings popups entirely.
  */
-export const portal: Action<HTMLElement, HTMLElement | ShadowRoot | undefined> = (node, target) => {
+export const portal: Action<HTMLElement, HTMLElement | ShadowRoot | undefined> = (
+  node,
+  target,
+) => {
   const root = node.getRootNode();
   const dest = target ?? (root instanceof ShadowRoot ? root : document.body);
   dest.appendChild(node);
 
   return {
     update(newTarget) {
-      (newTarget ?? dest).appendChild(node);
+      const nextDest =
+        newTarget ?? (root instanceof ShadowRoot ? root : document.body);
+      nextDest.appendChild(node);
     },
     destroy() {
       node.remove();

src/interface/utils/syncPageTheme.ts

@@ -0,0 +1,74 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+
+const THEME_CSS_VARS = [
+  "--better-main",
+  "--better-pale",
+  "--better-light",
+  "--text-color",
+  "--background-primary",
+  "--background-secondary",
+  "--text-primary",
+  "--theme-offset-bg",
+  "--better-sub",
+] as const;
+
+const ACCENT_CSS_VARS = [
+  "--better-main",
+  "--accent-color-value",
+  "--accentColor",
+  "--colour-betterseqta-blue",
+] as const;
+
+function extractSolidColor(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "initial") return null;
+  if (
+    trimmed.startsWith("#") ||
+    trimmed.startsWith("rgb") ||
+    trimmed.startsWith("hsl")
+  ) {
+    return trimmed;
+  }
+  if (trimmed.includes("gradient")) {
+    const match = trimmed.match(
+      /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
+    );
+    return match?.[0] ?? null;
+  }
+  return null;
+}
+
+function resolvePageAccentColor(): string {
+  const computed = getComputedStyle(document.documentElement);
+  for (const name of ACCENT_CSS_VARS) {
+    const solid = extractSolidColor(computed.getPropertyValue(name));
+    if (solid) return solid;
+  }
+  const fromSettings = settingsState.selectedColor?.trim();
+  if (fromSettings) {
+    const solid = extractSolidColor(fromSettings);
+    if (solid) return solid;
+  }
+  return "#007bff";
+}
+
+/** Copy SEQTA page theme tokens onto a portaled UI root (matches analytics sync). */
+export function syncPageThemeToElement(target: HTMLElement): void {
+  const computed = getComputedStyle(document.documentElement);
+
+  for (const name of THEME_CSS_VARS) {
+    const value = computed.getPropertyValue(name).trim();
+    if (value) {
+      target.style.setProperty(name, value);
+    }
+  }
+
+  const accent = resolvePageAccentColor();
+  target.style.setProperty("--bsplus-analytics-accent", accent);
+  target.style.setProperty("--better-main", accent);
+
+  target.classList.toggle(
+    "dark",
+    document.documentElement.classList.contains("dark"),
+  );
+}

src/interface/utils/themeStoreFlavours.ts

@@ -4,9 +4,90 @@ export function isHiddenStoreTheme(theme: Theme): boolean {
   return theme.theme_role === "slave";
 }
 
+/** Coerce API / fallback rows into the store `Theme` shape (camelCase images, safe strings). */
+export function normalizeStoreTheme(raw: Record<string, unknown>): Theme {
+  const flavours = Array.isArray(raw.flavours)
+    ? (raw.flavours as Record<string, unknown>[]).map(
+        (f): ThemeFlavour => ({
+          id: String(f.id ?? ""),
+          name: String(f.name ?? ""),
+          accent_color: String(f.accent_color ?? f.accentColor ?? ""),
+          cover_image: String(f.cover_image ?? f.coverImage ?? ""),
+          marquee_image:
+            typeof (f.marquee_image ?? f.marqueeImage) === "string"
+              ? String(f.marquee_image ?? f.marqueeImage)
+              : undefined,
+          download_count:
+            typeof f.download_count === "number"
+              ? f.download_count
+              : typeof f.downloadCount === "number"
+                ? f.downloadCount
+                : undefined,
+        }),
+      )
+    : undefined;
+
+  return {
+    id: String(raw.id ?? ""),
+    name: String(raw.name ?? "Untitled"),
+    description: String(raw.description ?? ""),
+    coverImage: String(raw.coverImage ?? raw.cover_image ?? ""),
+    marqueeImage:
+      typeof (raw.marqueeImage ?? raw.marquee_image) === "string"
+        ? String(raw.marqueeImage ?? raw.marquee_image)
+        : undefined,
+    theme_json_url:
+      typeof (raw.theme_json_url ?? raw.themeJsonUrl) === "string"
+        ? String(raw.theme_json_url ?? raw.themeJsonUrl)
+        : undefined,
+    is_favorited: raw.is_favorited === true || raw.isFavorited === true,
+    favorite_count:
+      typeof raw.favorite_count === "number"
+        ? raw.favorite_count
+        : typeof raw.favoriteCount === "number"
+          ? raw.favoriteCount
+          : undefined,
+    download_count:
+      typeof raw.download_count === "number"
+        ? raw.download_count
+        : typeof raw.downloadCount === "number"
+          ? raw.downloadCount
+          : undefined,
+    author: typeof raw.author === "string" ? raw.author : undefined,
+    featured: raw.featured === true,
+    tags: Array.isArray(raw.tags) ? (raw.tags as string[]) : undefined,
+    created_at:
+      typeof raw.created_at === "number"
+        ? raw.created_at
+        : typeof raw.createdAt === "number"
+          ? raw.createdAt
+          : undefined,
+    updated_at:
+      typeof raw.updated_at === "number"
+        ? raw.updated_at
+        : typeof raw.updatedAt === "number"
+          ? raw.updatedAt
+          : undefined,
+    theme_role:
+      raw.theme_role === "master" || raw.theme_role === "slave" || raw.theme_role === "standard"
+        ? raw.theme_role
+        : undefined,
+    master_id:
+      typeof (raw.master_id ?? raw.masterId) === "string"
+        ? String(raw.master_id ?? raw.masterId)
+        : undefined,
+    flavours,
+  };
+}
+
 /** Grid and search: omit slave rows (when API sends a flattened list). */
 export function visibleStoreThemes(themes: Theme[]): Theme[] {
-  return themes.filter((t) => !isHiddenStoreTheme(t));
+  const visible = themes.filter((t) => !isHiddenStoreTheme(t));
+  // If every row is a slave (bad/migration payload), avoid an empty grid.
+  if (visible.length === 0 && themes.length > 0) {
+    return themes;
+  }
+  return visible;
 }
 
 function marqueeOrCoverUrl(t: { marqueeImage?: string; coverImage: string }): string {

src/plugins/built-in/assessmentsAverage/engage.ts

@@ -0,0 +1,46 @@
+import { getEngageAssessmentStudentId } from "@/seqta/utils/engageAssessmentStudent";
+
+function randomEngagePdfFileName(): string {
+  const token = Math.random().toString(36).slice(2, 10);
+  return `${token}.pdf`;
+}
+
+export async function requestEngageAssessmentPdf(params: {
+  assessmentID: string | number;
+  metaclassID: string | number;
+  studentID: string | number;
+}): Promise<string> {
+  const fileName = randomEngagePdfFileName();
+  const cacheBuster = Math.random().toString(36).slice(2, 10);
+
+  const response = await fetch(
+    `${location.origin}/seqta/parent/print/assessment?${cacheBuster}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json; charset=utf-8" },
+      credentials: "include",
+      body: JSON.stringify({
+        id: params.assessmentID,
+        metaclass: params.metaclassID,
+        student: Number(params.studentID),
+        fileName,
+      }),
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to generate PDF: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  const data = (await response.json()) as {
+    payload?: { file?: string };
+  };
+
+  return data.payload?.file ?? fileName;
+}
+
+export function getEngageAssessmentReportUrl(fileName: string): string {
+  return `${location.origin}/seqta/parent/report/get?file=${encodeURIComponent(fileName)}`;
+}

src/plugins/built-in/assessmentsAverage/index.ts

@@ -16,6 +16,7 @@ import {
   parseAssessments,
   processAssessments,
 } from "./utils.ts";
+import { injectRubricCopyButtons } from "./rubricCopy.ts";
 
 interface weightingsStorage {
   weightings: Record<string, string>;
@@ -80,6 +81,7 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
     });
     api.seqta.onMount("[class*='SelectedAssessment__']", () => {
       injectWeightingsTab(api);
+      injectRubricCopyButtons();
     });
   },
 };

src/plugins/built-in/assessmentsAverage/rubricCopy.ts

@@ -0,0 +1,388 @@
+const RUBRIC_SELECTOR =
+  "[class*='AssessableCriterion__rubric___'][class*='Rubric__Rubric___'], [class*='Rubric__Rubric___'][class*='AssessableCriterion__rubric___']";
+const ENHANCED_ATTR = "data-betterseqta-rubric-copy";
+const STYLE_ID = "betterseqta-rubric-copy-styles-v2";
+
+let observer: MutationObserver | null = null;
+
+function ensureStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    .betterseqta-rubric-copy-host {
+      position: relative;
+    }
+
+    .betterseqta-rubric-copy-overlay {
+      position: absolute;
+      inset: auto 0 0 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding: 0.75rem 0.85rem;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(10px);
+      transition:
+        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.72) 0%,
+        rgba(0, 0, 0, 0.42) 42%,
+        rgba(0, 0, 0, 0.08) 72%,
+        transparent 100%
+      );
+      border-radius: 0 0 8px 8px;
+      z-index: 5;
+    }
+
+    .betterseqta-rubric-copy-host:hover .betterseqta-rubric-copy-overlay,
+    .betterseqta-rubric-copy-host:focus-within .betterseqta-rubric-copy-overlay {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .betterseqta-rubric-copy-btn {
+      pointer-events: auto;
+      display: inline-flex !important;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.45rem 0.75rem !important;
+      margin: 0 !important;
+      border: 1px solid rgba(15, 23, 42, 0.12) !important;
+      border-radius: 8px !important;
+      background: rgba(255, 255, 255, 0.96) !important;
+      color: #0f172a !important;
+      font-family: Rubik, system-ui, sans-serif !important;
+      font-size: 0.8125rem !important;
+      font-weight: 600 !important;
+      line-height: 1 !important;
+      cursor: pointer;
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
+      transform: translateY(0) scale(1);
+      transition:
+        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+        background 0.28s ease,
+        color 0.28s ease,
+        box-shadow 0.28s ease,
+        border-color 0.28s ease;
+    }
+
+    .betterseqta-rubric-copy-btn:hover {
+      transform: translateY(-1px) scale(1.04) !important;
+      background: #f1f5f9 !important;
+      color: #0f172a !important;
+      border-color: rgba(15, 23, 42, 0.18) !important;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
+    }
+
+    .betterseqta-rubric-copy-btn:active {
+      transform: translateY(0) scale(0.98) !important;
+      background: #e2e8f0 !important;
+      color: #0f172a !important;
+    }
+
+    .betterseqta-rubric-copy-btn:focus-visible {
+      outline: none !important;
+      box-shadow:
+        0 0 0 2px rgba(255, 255, 255, 0.95),
+        0 0 0 4px rgba(59, 130, 246, 0.85) !important;
+    }
+
+    .betterseqta-rubric-copy-btn svg {
+      width: 1rem !important;
+      height: 1rem !important;
+      flex-shrink: 0;
+      stroke: currentColor !important;
+      fill: none !important;
+    }
+
+    .betterseqta-rubric-copy-btn.is-copied {
+      background: #ecfdf5 !important;
+      color: #047857 !important;
+      border-color: rgba(4, 120, 87, 0.25) !important;
+    }
+
+    .betterseqta-rubric-copy-btn.is-copied:hover {
+      background: #d1fae5 !important;
+      color: #065f46 !important;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .betterseqta-rubric-copy-overlay,
+      .betterseqta-rubric-copy-btn {
+        transition: none;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function cellText(element: Element | null | undefined): string {
+  return element?.textContent?.replace(/\s+/g, " ").trim() ?? "";
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+interface RubricCell {
+  text: string;
+  selected: boolean;
+}
+
+interface RubricTableData {
+  header: string[];
+  rows: RubricCell[][];
+}
+
+function parseRubricTable(rubric: Element): RubricTableData | null {
+  const lines = rubric.querySelectorAll("[class*='Rubric__line___']");
+  const rows: RubricCell[][] = [];
+
+  lines.forEach((line) => {
+    const meta = line.querySelector("[class*='Rubric__meta___']");
+    const label = cellText(meta?.querySelector("[class*='Rubric__label___']"));
+    const criterion = cellText(
+      meta?.querySelector("[class*='Rubric__description___']"),
+    );
+
+    const row: RubricCell[] = [
+      { text: label, selected: false },
+      { text: criterion, selected: false },
+    ];
+
+    line.querySelectorAll("[class*='Rubric__descriptor___']").forEach((descriptor) => {
+      const text = cellText(
+        descriptor.querySelector("[class*='Rubric__description___']"),
+      );
+      const selected = Array.from(descriptor.classList).some((cls) =>
+        cls.startsWith("Rubric__selected___"),
+      );
+      row.push({ text, selected });
+    });
+
+    if (row.some((cell) => cell.text)) rows.push(row);
+  });
+
+  if (!rows.length) return null;
+
+  const maxCols = Math.max(...rows.map((row) => row.length));
+  const normalized = rows.map((row) => {
+    const copy = [...row];
+    while (copy.length < maxCols) {
+      copy.push({ text: "", selected: false });
+    }
+    return copy;
+  });
+
+  const header = [
+    "Category",
+    "Criterion",
+    ...Array.from({ length: maxCols - 2 }, (_, i) => `Band ${i + 1}`),
+  ].slice(0, maxCols);
+
+  return { header, rows: normalized };
+}
+
+function rubricToPlainText(table: RubricTableData): string {
+  const formatCell = (cell: RubricCell) =>
+    cell.selected && cell.text ? `${cell.text} (selected)` : cell.text;
+
+  return [
+    table.header.join("\t"),
+    ...table.rows.map((row) => row.map(formatCell).join("\t")),
+  ].join("\n");
+}
+
+const RUBRIC_PASTE_FONT_PT = 7;
+
+function rubricPasteFontStyle(): string {
+  return [
+    `font-size:${RUBRIC_PASTE_FONT_PT}pt`,
+    "mso-ansi-font-size:8.0pt",
+    "mso-bidi-font-size:8.0pt",
+    "font-family:Calibri,Arial,sans-serif",
+    "line-height:1.2",
+  ].join(";");
+}
+
+function rubricPasteCellContent(text: string): string {
+  return `<span style="${rubricPasteFontStyle()}">${escapeHtml(text)}</span>`;
+}
+
+function rubricToHtmlTable(table: RubricTableData): string {
+  const baseFont = rubricPasteFontStyle();
+  const cellStyle =
+    `border:1px solid #000000;border-collapse:collapse;padding:4px;vertical-align:top;${baseFont}`;
+  const headerStyle = `${cellStyle}background:#f3f4f6;font-weight:700;`;
+  const selectedStyle = `${cellStyle}background:#dbeafe;font-weight:600;`;
+
+  const headerRow = table.header
+    .map(
+      (heading) =>
+        `<th style="${headerStyle}">${rubricPasteCellContent(heading)}</th>`,
+    )
+    .join("");
+
+  const bodyRows = table.rows
+    .map((row) => {
+      const cells = row
+        .map((cell) => {
+          const style = cell.selected ? selectedStyle : cellStyle;
+          return `<td style="${style}">${rubricPasteCellContent(cell.text)}</td>`;
+        })
+        .join("");
+      return `<tr>${cells}</tr>`;
+    })
+    .join("");
+
+  return [
+    `<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;${baseFont}">`,
+    `<thead><tr>${headerRow}</tr></thead>`,
+    `<tbody>${bodyRows}</tbody>`,
+    "</table>",
+  ].join("");
+}
+
+function rubricToHtmlDocument(table: RubricTableData): string {
+  return [
+    "<!DOCTYPE html>",
+    "<html>",
+    "<head><meta charset=\"utf-8\"></head>",
+    `<body style="${rubricPasteFontStyle()}">`,
+    rubricToHtmlTable(table),
+    "</body>",
+    "</html>",
+  ].join("");
+}
+
+async function copyRubricTable(rubric: Element, button: HTMLButtonElement) {
+  const table = parseRubricTable(rubric);
+  if (!table) return;
+
+  const plain = rubricToPlainText(table);
+  const htmlTable = rubricToHtmlTable(table);
+  const htmlDocument = rubricToHtmlDocument(table);
+
+  let copied = false;
+
+  if (navigator.clipboard?.write && typeof ClipboardItem !== "undefined") {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/plain": new Blob([plain], { type: "text/plain" }),
+          "text/html": new Blob([htmlDocument], { type: "text/html" }),
+        }),
+      ]);
+      copied = true;
+    } catch {
+      // Fall through to legacy rich-text copy.
+    }
+  }
+
+  if (!copied) {
+    const host = document.createElement("div");
+    host.contentEditable = "true";
+    host.innerHTML = htmlTable;
+    host.style.position = "fixed";
+    host.style.left = "-9999px";
+    host.style.top = "0";
+    document.body.appendChild(host);
+
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(host);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    copied = document.execCommand("copy");
+
+    selection?.removeAllRanges();
+    host.remove();
+
+    if (!copied) {
+      await navigator.clipboard.writeText(plain);
+    }
+  }
+
+  const label = button.querySelector(".betterseqta-rubric-copy-label");
+  const original = label?.textContent ?? "Copy rubric";
+  button.classList.add("is-copied");
+  if (label) label.textContent = "Copied!";
+  window.setTimeout(() => {
+    button.classList.remove("is-copied");
+    if (label) label.textContent = original;
+  }, 1800);
+}
+
+function createCopyButton(rubric: Element): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "betterseqta-rubric-copy-btn";
+  button.setAttribute("aria-label", "Copy rubric");
+  button.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+    </svg>
+    <span class="betterseqta-rubric-copy-label">Copy rubric</span>
+  `;
+
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void copyRubricTable(rubric, button);
+  });
+
+  return button;
+}
+
+function enhanceRubric(rubric: HTMLElement) {
+  if (rubric.hasAttribute(ENHANCED_ATTR)) return;
+
+  const host = document.createElement("div");
+  host.className = "betterseqta-rubric-copy-host";
+  rubric.parentElement?.insertBefore(host, rubric);
+  host.appendChild(rubric);
+
+  const overlay = document.createElement("div");
+  overlay.className = "betterseqta-rubric-copy-overlay";
+  overlay.appendChild(createCopyButton(rubric));
+  host.appendChild(overlay);
+
+  rubric.setAttribute(ENHANCED_ATTR, "true");
+}
+
+function enhanceRubrics(root: ParentNode = document) {
+  ensureStyles();
+  root.querySelectorAll<HTMLElement>(RUBRIC_SELECTOR).forEach(enhanceRubric);
+}
+
+function watchRubrics(root: ParentNode) {
+  observer?.disconnect();
+  enhanceRubrics(root);
+
+  observer = new MutationObserver(() => {
+    enhanceRubrics(root);
+  });
+
+  observer.observe(root, { childList: true, subtree: true });
+}
+
+export function injectRubricCopyButtons() {
+  const root =
+    document.querySelector("[class*='SelectedAssessment__']") ?? document;
+  watchRubrics(root);
+}
+
+export function teardownRubricCopyButtons() {
+  observer?.disconnect();
+  observer = null;
+}

src/plugins/built-in/assessmentsAverage/utils.ts

@@ -1,5 +1,11 @@
 import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements.ts";
 import ReactFiber from "@/seqta/utils/ReactFiber.ts";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import { getEngageAssessmentStudentId } from "@/seqta/utils/engageAssessmentStudent";
+import {
+  getEngageAssessmentReportUrl,
+  requestEngageAssessmentPdf,
+} from "./engage.ts";
 import {
   ensurePdfjsWorker,
   getPdfjsPageContextUrls,
@@ -78,9 +84,111 @@ function parseGrade(text: string): number {
   return letterToNumber[str] ?? 0;
 }
 
+function formatWeightDisplay(weighting: string): string {
+  return `${Number(weighting) % 1 === 0 ? Number(weighting) : weighting}%`;
+}
+
+function saveWeightingOverride(
+  api: any,
+  assessmentID: string,
+  raw: string,
+): { ok: boolean; error?: string } {
+  const trimmed = raw.trim();
+  if (trimmed === "") {
+    const { [assessmentID]: _, ...rest } = api.storage.weightingOverrides;
+    api.storage.weightingOverrides = rest;
+    document.dispatchEvent(new CustomEvent("betterseqta:overrideChanged"));
+    return { ok: true };
+  }
+
+  const val = parseFloat(trimmed);
+  if (isNaN(val) || val < 0) {
+    return { ok: false, error: "Invalid. Must be 0 or greater" };
+  }
+
+  api.storage.weightingOverrides = {
+    ...api.storage.weightingOverrides,
+    [assessmentID]: String(val),
+  };
+  document.dispatchEvent(new CustomEvent("betterseqta:overrideChanged"));
+  return { ok: true };
+}
+
+function attachWeightInputListeners(
+  input: HTMLInputElement,
+  api: any,
+  assessmentID: string,
+) {
+  const save = () => {
+    const result = saveWeightingOverride(api, assessmentID, input.value);
+    input.style.borderColor = result.ok
+      ? "rgba(128,128,128,0.35)"
+      : "rgba(255,80,80,0.6)";
+  };
+
+  input.addEventListener("blur", save);
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") input.blur();
+  });
+}
+
+function updateWeightLabelContent(
+  weightLabel: HTMLElement,
+  weighting: string | undefined,
+  assessmentID: string | undefined,
+  api: any,
+) {
+  const existingInput = weightLabel.querySelector(
+    ".betterseqta-weight-input",
+  ) as HTMLInputElement | null;
+  if (existingInput && document.activeElement === existingInput) return;
+
+  weightLabel.querySelector(".betterseqta-weight-value")?.remove();
+  weightLabel.querySelector(".betterseqta-weight-input")?.remove();
+  Array.from(weightLabel.childNodes)
+    .filter((node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+    .forEach((node) => node.remove());
+
+  weightLabel.title = "";
+
+  if (weighting === "processing") {
+    const span = document.createElement("span");
+    span.className = "betterseqta-weight-value";
+    span.textContent = "...";
+    span.style.opacity = "0.5";
+    weightLabel.appendChild(span);
+    return;
+  }
+
+  if (weighting === "N/A" && assessmentID) {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "0";
+    input.step = "5";
+    input.className = "betterseqta-weight-input";
+    input.placeholder = "Set %";
+    input.setAttribute("aria-label", "Assessment weighting percentage");
+    input.style.cssText =
+      "width:52px;padding:1px 4px;border-radius:4px;border:1px solid rgba(128,128,128,0.35);background:rgba(128,128,128,0.08);color:inherit;font-size:inherit;outline:none;";
+    attachWeightInputListeners(input, api, assessmentID);
+    weightLabel.appendChild(input);
+    weightLabel.title = "Enter assessment weighting %";
+    return;
+  }
+
+  const span = document.createElement("span");
+  span.className = "betterseqta-weight-value";
+  span.textContent =
+    weighting && weighting !== "N/A"
+      ? formatWeightDisplay(weighting)
+      : "N/A";
+  weightLabel.appendChild(span);
+}
+
 function createWeightLabel(
   assessmentItem: Element,
   weighting: string | undefined,
+  api: any,
 ) {
   let statsContainer = assessmentItem.querySelector(
     `[class*='AssessmentItem__stats___'],  .betterseqta-stats-container`,
@@ -106,20 +214,17 @@ function createWeightLabel(
     ? "space-between"
     : "flex-end";
 
-  const displayText =
+  const title = assessmentItem
-    weighting && weighting !== "processing" && weighting !== "N/A"
+    .querySelector(`[class*='AssessmentItem__title___']`)
-      ? `${Number(weighting) % 1 === 0 ? Number(weighting) : weighting}%`
+    ?.textContent?.trim();
-      : "N/A";
+  const assessmentID = title ? api.storage.assessments?.[title] : undefined;
 
   const existingLabel = statsContainer.querySelector(
     ".betterseqta-weight-label",
   ) as HTMLElement | null;
 
   if (existingLabel) {
-    const textNodes = Array.from(existingLabel.childNodes).filter(
+    updateWeightLabelContent(existingLabel, weighting, assessmentID, api);
-      (node) => node.nodeType === Node.TEXT_NODE,
-    );
-    if (textNodes.length) textNodes[0].textContent = displayText;
     return;
   }
 
@@ -151,15 +256,7 @@ function createWeightLabel(
   const innerTextDiv = weightLabel.querySelector(`[class*='Label__innerText___']`);
   if (innerTextDiv) innerTextDiv.textContent = "Weight";
 
-  const textNodes = Array.from(weightLabel.childNodes).filter(
+  updateWeightLabelContent(weightLabel, weighting, assessmentID, api);
-    (node) => node.nodeType === Node.TEXT_NODE,
-  );
-  if (textNodes.length) {
-    textNodes[0].textContent = displayText;
-  } else {
-    weightLabel.appendChild(document.createTextNode(displayText));
-  }
-
   statsContainer.appendChild(weightLabel);
 }
 
@@ -464,8 +561,6 @@ export async function extractPDFText(url: string): Promise<string> {
 async function handleWeightings(mark: any, api: any) {
   const assessmentID = mark.id;
   const metaclassID = mark.metaclassID;
-  const userInfo = await getUserInfo();
-  const userID = userInfo.id;
   const title = mark.title;
 
   if (
@@ -486,35 +581,55 @@ async function handleWeightings(mark: any, api: any) {
   };
 
   try {
-    const filename =
+    let pdfUrl: string;
-      "BetterSEQTA-" +
-      String(Math.floor(Math.random() * 1e15)).padStart(15, "0");
 
-    const printResponse = await fetch(
+    if (isSeqtaEngageExperience()) {
-      `${location.origin}/seqta/student/print/assessment`,
+      const studentID = getEngageAssessmentStudentId();
-      {
+      if (!studentID) {
-        method: "POST",
+        throw new Error("Could not resolve Engage student ID from URL or storage");
-        headers: { "Content-Type": "application/json; charset=utf-8" },
+      }
-        credentials: "include",
-        body: JSON.stringify({
-          fileName: filename,
-          id: assessmentID,
-          metaclass: metaclassID,
-          student: userID,
-        }),
-      },
-    );
 
-    if (!printResponse.ok) {
+      const reportFile = await requestEngageAssessmentPdf({
-      throw new Error(
+        assessmentID,
-        `Failed to generate PDF: ${printResponse.status} ${printResponse.statusText}`,
+        metaclassID,
+        studentID,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      pdfUrl = getEngageAssessmentReportUrl(reportFile);
+    } else {
+      const userInfo = await getUserInfo();
+      const userID = userInfo.id;
+
+      const filename =
+        "BetterSEQTA-" +
+        String(Math.floor(Math.random() * 1e15)).padStart(15, "0");
+
+      const printResponse = await fetch(
+        `${location.origin}/seqta/student/print/assessment`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json; charset=utf-8" },
+          credentials: "include",
+          body: JSON.stringify({
+            fileName: filename,
+            id: assessmentID,
+            metaclass: metaclassID,
+            student: userID,
+          }),
+        },
       );
+
+      if (!printResponse.ok) {
+        throw new Error(
+          `Failed to generate PDF: ${printResponse.status} ${printResponse.statusText}`,
+        );
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      pdfUrl = `${location.origin}/seqta/student/report/get?file=${filename}`;
     }
 
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    const pdfUrl = `${location.origin}/seqta/student/report/get?file=${filename}`;
-
     if (pdfUrl.startsWith("blob:")) {
       throw new Error(`Cannot fetch blob URL from extension: ${pdfUrl}`);
     }
@@ -589,7 +704,7 @@ export async function processAssessments(api: any, assessmentItems: Element[]) {
       : undefined;
     const weighting = override ?? autoWeighting;
 
-    createWeightLabel(assessmentItem, weighting);
+    createWeightLabel(assessmentItem, weighting, api);
 
     const gradeElement = assessmentItem.querySelector(
       `[class*='Thermoscore__text___']`,
@@ -736,13 +851,13 @@ function buildWeightingsTabContent(api: any, sheet: HTMLElement) {
         <span style="font-size:13px;opacity:${autoWeight != null ? "1" : "0.4"}">${autoWeight != null ? `${autoWeight}%` : "none"}</span>
       </div>
       <div style="display:flex;align-items:center;gap:12px">
-        <label for="betterseqta-weight-override" style="font-size:13px;opacity:0.7;flex-shrink:0">Override %</label>
+        <label for="betterseqta-weight-override" style="font-size:13px;opacity:0.7;flex-shrink:0">${weightingUnavailable ? "Weight %" : "Override %"}</label>
         <input
           id="betterseqta-weight-override"
           type="number"
           min="0"
           step="5"
-          placeholder="${autoWeight ?? ""}"
+          placeholder="${weightingUnavailable ? "Enter weight" : autoWeight ?? ""}"
           value="${override ?? ""}"
           ${!assessmentID ? "disabled" : ""}
           style="
@@ -776,26 +891,22 @@ function buildWeightingsTabContent(api: any, sheet: HTMLElement) {
   const save = () => {
     const raw = input.value.trim();
     if (raw === "") {
-      const { [assessmentID]: _, ...rest } = api.storage.weightingOverrides;
+      const result = saveWeightingOverride(api, assessmentID, "");
-      api.storage.weightingOverrides = rest;
+      if (!result.ok) return;
+      input.style.borderColor = "rgba(128,128,128,0.3)";
     } else {
-      const val = parseFloat(raw);
+      const result = saveWeightingOverride(api, assessmentID, raw);
-      if (isNaN(val) || val < 0) {
+      if (!result.ok) {
         input.style.borderColor = "rgba(255,80,80,0.6)";
-        statusEl.textContent = "Invalid. Must be 0 or greater";
+        statusEl.textContent = result.error ?? "Invalid. Must be 0 or greater";
         statusEl.style.color = "rgba(255,80,80,0.8)";
         return;
       }
       input.style.borderColor = "rgba(128,128,128,0.3)";
-      api.storage.weightingOverrides = {
-        ...api.storage.weightingOverrides,
-        [assessmentID]: String(val),
-      };
     }
     statusEl.textContent = "Saved";
     statusEl.style.color = "";
     setTimeout(() => (statusEl.textContent = ""), 2000);
-    document.dispatchEvent(new CustomEvent("betterseqta:overrideChanged"));
   };
 
   input.addEventListener("blur", save);
@@ -849,12 +960,8 @@ export function injectWeightingsTab(api: any) {
   ].join(" ");
   container.appendChild(newSheet);
 
-  let populated = false;
   newTab.addEventListener("click", () => {
-    if (!populated) {
+    buildWeightingsTabContent(api, newSheet);
-      buildWeightingsTabContent(api, newSheet);
-      populated = true;
-    }
   });
 
   const allTabs = Array.from(tabList.querySelectorAll("li"));

src/plugins/built-in/assessmentsOverview/AssessmentsOverview.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import { determineStatus, formatDate, getGradeValue } from "./utils";
   import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+  import { buildEngageAssessmentPagePath } from "@/seqta/utils/engageAssessmentStudent";
+  import OverviewIcon from "./OverviewIcon.svelte";
+  import {
+    GROUP_SORT_ICONS,
+    STATUS_COLUMN_ICONS,
+    type OverviewIconName,
+  } from "./icons";
   import confetti from "canvas-confetti";
 
   export let data: any;
 
   interface FilterOptions {
     subject: string;
+    student: string;
     sortBy: "due" | "grade" | "subject" | "title" | "year";
   }
 
@@ -38,12 +47,21 @@
 
   let currentFilters: FilterOptions = {
     subject: "all",
+    student: "all",
     sortBy: "due",
   };
 
+  const isEngage = isSeqtaEngageExperience();
+  $: showStudentFilter = isEngage && (data?.students?.length ?? 0) > 1;
+
   let filteredAssessments: any[] = [];
   let statusGroups: Record<string, any[]> = {};
-  let columns: { key: string; title: string; className: string; icon: string }[] = [];
+  let columns: {
+    key: string;
+    title: string;
+    className: string;
+    icon: OverviewIconName;
+  }[] = [];
 
   function getAssessmentYear(a: any): number {
     const dateStr = a.due || a.date || a.dueDate || a.created;
@@ -82,14 +100,23 @@
     return new Date(a.due || a.date || 0).getTime() - new Date(b.due || b.date || 0).getTime();
   }
 
-  const STATUS_COLUMNS = [
+  const STATUS_COLUMNS: {
-    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "📅" },
+    key: string;
-    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "⏰" },
+    title: string;
-    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "🚨" },
+    className: string;
-    { key: "SUBMITTED", title: "Submitted", className: "column-submitted", icon: "📝" },
+    icon: OverviewIconName;
-    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "✅" },
+  }[] = [
+    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "calendar-days" },
+    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "clock" },
+    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "exclamation-triangle" },
+    { key: "SUBMITTED", title: "Submitted", className: "column-submitted", icon: "document-check" },
+    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "check-circle" },
   ];
 
+  function groupSortIcon(): OverviewIconName {
+    return GROUP_SORT_ICONS[currentFilters.sortBy] ?? "queue-list";
+  }
+
   function buildGroupsAndColumns() {
     if (!data?.assessments) return { filteredAssessments: [], statusGroups: {}, columns: [] };
     const subjectFilters = settingsState.subjectfilters || {};
@@ -100,7 +127,17 @@
     const filtered = data.assessments.filter((a: any) => {
       if (hiddenAssessmentIds.has(String(a.id))) return false;
       if (subjectFilters[a.code] === false) return false;
-      return currentFilters.subject === "all" || a.code === currentFilters.subject;
+      if (currentFilters.subject !== "all" && a.code !== currentFilters.subject) {
+        return false;
+      }
+      if (
+        isEngage &&
+        currentFilters.student !== "all" &&
+        String(a.studentId) !== currentFilters.student
+      ) {
+        return false;
+      }
+      return true;
     });
 
     const groups: Record<string, any[]> = {};
@@ -114,18 +151,19 @@
       groups[key].sort(sortCompare);
     });
 
-    let cols: { key: string; title: string; className: string; icon: string }[];
+    let cols: { key: string; title: string; className: string; icon: OverviewIconName }[];
     if (currentFilters.sortBy === "due") {
       cols = STATUS_COLUMNS;
     } else {
       const keys = Object.keys(groups).filter((k) => groups[k]?.length > 0);
+      const sortIcon = groupSortIcon();
       if (currentFilters.sortBy === "year") {
-        cols = keys.sort((a, b) => Number(b) - Number(a)).map((k) => ({ key: k, title: k, className: "column-custom", icon: "📆" }));
+        cols = keys.sort((a, b) => Number(b) - Number(a)).map((k) => ({ key: k, title: k, className: "column-custom", icon: sortIcon }));
       } else if (currentFilters.sortBy === "subject") {
         const subjectTitles = new Map(data?.subjects?.map((s: any) => [s.code, `${s.code} - ${s.title}`]) || []);
-        cols = keys.sort().map((k) => ({ key: k, title: subjectTitles.get(k) || k, className: "column-custom", icon: "📚" }));
+        cols = keys.sort().map((k) => ({ key: k, title: subjectTitles.get(k) || k, className: "column-custom", icon: sortIcon }));
       } else {
-        cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: "📋" }));
+        cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: sortIcon }));
       }
     }
 
@@ -309,6 +347,19 @@
     if ((event.target as HTMLElement).closest(".card-menu")) {
       return;
     }
+
+    if (isSeqtaEngageExperience()) {
+      const studentId = assessment.studentId ?? data?.studentId;
+      if (!studentId) return;
+      window.location.hash = buildEngageAssessmentPagePath(
+        studentId,
+        assessment.programmeID,
+        assessment.metaclassID,
+        assessment.id,
+      );
+      return;
+    }
+
     window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
   }
 
@@ -342,16 +393,28 @@
     updateAssessments();
     void currentFilters.sortBy;
     void currentFilters.subject;
+    void currentFilters.student;
   }
 
 </script>
 
 <svelte:window on:click={closeAllMenus} />
 
-<div id="grid-view-container">
+<div class="bsplus-overview-page">
-  <div class="grid-view-header">
+  <header class="grid-view-header bsplus-overview-animate">
-    <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-header-text">
-    <div class="grid-view-filters">
+      <h1 class="grid-view-title">Assessments</h1>
+      <p class="grid-view-subtitle">Track upcoming tasks, submissions, and released marks</p>
+    </div>
+    <div class="grid-view-filters bsplus-overview-toolbar">
+      {#if showStudentFilter}
+        <select class="filter-select" bind:value={currentFilters.student}>
+          <option value="all">All Students</option>
+          {#each data.students as student}
+            <option value={String(student.id)}>{student.name}</option>
+          {/each}
+        </select>
+      {/if}
       <select class="filter-select" bind:value={currentFilters.subject}>
         <option value="all">All Subjects</option>
         {#each data.subjects as subject}
@@ -372,14 +435,15 @@
           on:click={() => (showVisibilityPanel = !showVisibilityPanel)}
           title="Manage hidden subjects and assessments"
         >
-          👁 Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})
+          <OverviewIcon name="eye" size={18} />
+          <span>Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})</span>
         </button>
       {/if}
     </div>
-  </div>
+  </header>
 
   {#if showVisibilityPanel && hasHiddenItems}
-    <div class="visibility-panel">
+    <div class="visibility-panel bsplus-overview-animate">
       <h4 class="visibility-panel-title">Hidden items</h4>
       {#if hiddenSubjects.length > 0}
         <div class="visibility-section">
@@ -410,10 +474,10 @@
     </div>
   {/if}
 
-  <div id="main-grid-content">
+  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
     {#if filteredAssessments.length === 0}
       <div class="empty-state">
-        <div class="empty-icon">📋</div>
+        <OverviewIcon name="clipboard-document-list" size={40} class="empty-icon" />
         <p>No assessments found matching your filters</p>
       </div>
     {:else}
@@ -424,9 +488,15 @@
               <div class="kanban-column {column.className}">
                 <div class="column-header">
                   <div class="column-title">
-                    {column.icon} {column.title}
+                  <span class="column-title-main">
-                    <span class="column-count">{statusGroups[column.key].length}</span>
+                    <OverviewIcon
-                  </div>
+                      name={column.icon ?? STATUS_COLUMN_ICONS[column.key] ?? "queue-list"}
+                      size={18}
+                    />
+                    {column.title}
+                  </span>
+                  <span class="column-count">{statusGroups[column.key].length}</span>
+                </div>
                 </div>
                 <div class="column-cards" id="{column.key.toLowerCase()}-cards">
                   {#each statusGroups[column.key] as assessment}
@@ -445,6 +515,9 @@
                       on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
                     >
                       <div class="card-labels">
+                        {#if isEngage && assessment.studentName}
+                          <span class="card-label label-student">{assessment.studentName}</span>
+                        {/if}
                         <span class="card-label label-subject">{assessment.code}</span>
                         {#if assessment.submitted}
                           <span class="card-label label-submitted" style="background: #10b981; color: white;">Submitted</span>
@@ -462,11 +535,7 @@
                             on:click={(e) => toggleMenu(assessment.id, e)}
                             aria-label="Open menu"
                           >
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <OverviewIcon name="ellipsis-vertical" size={16} />
-                              <circle cx="12" cy="5" r="2"/>
-                              <circle cx="12" cy="12" r="2"/>
-                              <circle cx="12" cy="19" r="2"/>
-                            </svg>
                           </button>
                           <div class="menu-dropdown" style="display: {openMenuId === assessment.id ? 'block' : 'none'};">
                             {#if status !== "MARKS_RELEASED"}
@@ -493,7 +562,8 @@
                       {#if !assessment.results && !isCompleted}
                         <div class="assessment-meta">
                           <div class="due-date {dueDateClass}">
-                            📅 {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
+                            <OverviewIcon name="calendar-days" size={14} />
+                            {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
                           </div>
                         </div>
                       {/if}

src/plugins/built-in/assessmentsOverview/ErrorState.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+  import OverviewIcon from "./OverviewIcon.svelte";
+
   export let error: string;
 </script>
 
-<div class="error-container">
+<div class="error-container bsplus-overview-animate">
+  <OverviewIcon name="exclamation-circle" size={40} class="error-icon" />
   <p class="error-text">Failed to load assessments</p>
-  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
+  <p class="error-detail">{error}</p>
-</div>
+</div>

src/plugins/built-in/assessmentsOverview/OverviewIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { OVERVIEW_ICON_PATHS, type OverviewIconName } from "./icons";
+
+  interface Props {
+    name: OverviewIconName;
+    class?: string;
+    size?: number;
+  }
+
+  let { name, class: className = "", size = 20 }: Props = $props();
+
+  const paths = $derived.by(() => {
+    const raw = OVERVIEW_ICON_PATHS[name];
+    return Array.isArray(raw) ? raw : [raw];
+  });
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  width={size}
+  height={size}
+  class="bsplus-overview-icon {className}"
+  aria-hidden="true"
+>
+  {#each paths as path, index (index)}
+    <path stroke-linecap="round" stroke-linejoin="round" d={path} />
+  {/each}
+</svg>

src/plugins/built-in/assessmentsOverview/SkeletonLoader.svelte

@@ -1,7 +1,28 @@
-<div id="grid-view-container">
+<script lang="ts">
-  <div class="grid-view-header">
+  import OverviewIcon from "./OverviewIcon.svelte";
-    <h1 class="grid-view-title">Assessments</h1>
+  import type { OverviewIconName } from "./icons";
-    <div class="grid-view-filters">
+
+  const columns: {
+    key: string;
+    title: string;
+    className: string;
+    icon: OverviewIconName;
+    skeletonCount: number;
+  }[] = [
+    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "calendar-days", skeletonCount: 3 },
+    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "clock", skeletonCount: 2 },
+    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "exclamation-triangle", skeletonCount: 1 },
+    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "check-circle", skeletonCount: 4 },
+  ];
+</script>
+
+<div class="bsplus-overview-page">
+  <header class="grid-view-header bsplus-overview-animate">
+    <div class="grid-view-header-text">
+      <h1 class="grid-view-title">Assessments</h1>
+      <p class="grid-view-subtitle">Loading your assessment overview…</p>
+    </div>
+    <div class="grid-view-filters bsplus-overview-toolbar">
       <select class="filter-select" disabled>
         <option value="all">Loading subjects...</option>
       </select>
@@ -9,17 +30,20 @@
         <option value="due">Sort by Due Date</option>
       </select>
     </div>
-  </div>
+  </header>
 
-  <div id="main-grid-content">
+  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
     <div class="kanban-board">
       {#each columns as column}
         <div class="kanban-column-parent">
           <div class="kanban-column {column.className}">
             <div class="column-header">
               <div class="column-title">
-                {column.icon} {column.title}
+                <span class="column-title-main">
-                <span class="column-count">...</span>
+                  <OverviewIcon name={column.icon} size={18} />
+                  {column.title}
+                </span>
+                <span class="column-count">…</span>
               </div>
             </div>
             <div class="column-cards" id="{column.key.toLowerCase()}-cards">
@@ -43,36 +67,3 @@
     </div>
   </div>
 </div>
-
-<script lang="ts">
-  const columns = [
-    {
-      key: "UPCOMING",
-      title: "Upcoming",
-      className: "column-upcoming",
-      icon: "📅",
-      skeletonCount: 3,
-    },
-    {
-      key: "DUE_SOON",
-      title: "Due Soon",
-      className: "column-due-soon",
-      icon: "⏰",
-      skeletonCount: 2,
-    },
-    {
-      key: "OVERDUE",
-      title: "Overdue",
-      className: "column-overdue",
-      icon: "🚨",
-      skeletonCount: 1,
-    },
-    {
-      key: "MARKS_RELEASED",
-      title: "Marked",
-      className: "column-marked",
-      icon: "✅",
-      skeletonCount: 4,
-    },
-  ];
-</script>

src/plugins/built-in/assessmentsOverview/api.ts

@@ -1,20 +1,26 @@
-interface Subject {
+import {
-  code: string;
+  activeSubjectsFromLearnPayload,
-  programme: number;
+  assessmentBelongsToActiveSubjects,
-  metaclass: number;
+  filterAssessmentsForActiveSubjects,
-  title: string;
+  type OverviewSubject,
-}
+} from "./utils";
+
 interface PrefItem {
   name: string;
   value: string;
 }
 
+import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { getMockAssessmentsData } from "@/seqta/ui/dev/hideSensitiveContent";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import {
+  getEngageAssessmentsData,
+} from "./engageApi";
 
-let cache: { time: number; data: any } | null = null;
+let cache: { time: number; engageAll?: boolean; studentId: number; data: any } | null =
+  null;
 const CACHE_MS = 10 * 60 * 1000;
-const student = 69;
 
 async function fetchJSON(url: string, body: any) {
   const res = await fetch(`${location.origin}${url}`, {
@@ -26,11 +32,9 @@ async function fetchJSON(url: string, body: any) {
   return res.json();
 }
 
-async function loadSubjects() {
+async function loadSubjects(): Promise<OverviewSubject[]> {
   const res = await fetchJSON("/seqta/student/load/subjects?", {});
-  return res.payload
+  return activeSubjectsFromLearnPayload(res.payload);
-    .filter((s: any) => s.active === 1)
-    .flatMap((s: any) => s.subjects);
 }
 
 async function loadPrefs(student: number) {
@@ -56,9 +60,8 @@ async function loadUpcoming(student: number) {
   return res.payload;
 }
 
-function normalizeAssessmentDates(t: any, subject: Subject): any {
+function normalizeAssessmentDates(t: any, subject: OverviewSubject): any {
   const normalized = { ...t };
-  // Past API may use different date fields - ensure we have 'due' for year filter & display
   if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
     normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
   }
@@ -68,7 +71,7 @@ function normalizeAssessmentDates(t: any, subject: Subject): any {
   return normalized;
 }
 
-async function loadPast(student: number, subjects: Subject[]) {
+async function loadPast(student: number, subjects: OverviewSubject[]) {
   const map: Record<number, any> = {};
   await Promise.all(
     subjects.map(async (s) => {
@@ -128,35 +131,65 @@ async function loadSubmissions(student: number, assessments: any[]) {
   return submissionMap;
 }
 
-export async function getAssessmentsData() {
+async function getLearnAssessmentsData(studentId: number) {
-  if (settingsState.mockNotices) {
-    return getMockAssessmentsData();
-  }
-
-  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
   const [subjects, colors, upcoming] = await Promise.all([
     loadSubjects(),
-    loadPrefs(student),
+    loadPrefs(studentId),
-    loadUpcoming(student),
+    loadUpcoming(studentId),
   ]);
-  const pastMap = await loadPast(student, subjects);
+  const pastMap = await loadPast(studentId, subjects);
   const map: Record<number, any> = {};
   upcoming.forEach((a: any) => {
-    map[a.id] = { ...a };
+    if (assessmentBelongsToActiveSubjects(a, subjects)) {
+      map[a.id] = { ...a };
+    }
   });
   Object.values(pastMap).forEach((t: any) => {
+    if (!assessmentBelongsToActiveSubjects(t, subjects)) return;
     if (map[t.id]) Object.assign(map[t.id], t);
     else map[t.id] = t;
   });
 
-  const allAssessments = Object.values(map);
+  const allAssessments = filterAssessmentsForActiveSubjects(
-  const submissions = await loadSubmissions(student, allAssessments);
+    Object.values(map),
+    subjects,
+  );
+  const submissions = await loadSubmissions(studentId, allAssessments);
 
   allAssessments.forEach((assessment: any) => {
     assessment.submitted = submissions[assessment.id] || false;
   });
 
-  const data = { assessments: allAssessments, subjects, colors };
+  return { assessments: allAssessments, subjects, colors, studentId };
-  cache = { time: Date.now(), data };
+}
+
+export async function getAssessmentsData() {
+  if (settingsState.mockNotices) {
+    return getMockAssessmentsData();
+  }
+
+  if (isSeqtaEngageExperience()) {
+    if (cache && Date.now() - cache.time < CACHE_MS && cache.engageAll) {
+      return cache.data;
+    }
+
+    const data = await getEngageAssessmentsData();
+    cache = { time: Date.now(), studentId: 0, engageAll: true, data };
+    return data;
+  }
+
+  const studentId = (await getUserInfo()).id;
+
+  if (
+    cache &&
+    Date.now() - cache.time < CACHE_MS &&
+    cache.studentId === studentId
+  ) {
+    return cache.data;
+  }
+
+  const data = await getLearnAssessmentsData(studentId);
+
+  cache = { time: Date.now(), studentId, data };
   return data;
 }

src/plugins/built-in/assessmentsOverview/engageApi.ts

@@ -0,0 +1,235 @@
+import { getEngageAssessmentStudentId } from "@/seqta/utils/engageAssessmentStudent";
+import {
+  activeSubjectsFromEngageChild,
+  assessmentBelongsToActiveSubjects,
+  filterAssessmentsForActiveSubjects,
+  type OverviewSubject,
+} from "./utils";
+
+interface PrefItem {
+  name: string;
+  value: string;
+}
+
+export interface EngageStudent {
+  id: number;
+  name: string;
+}
+
+interface EngageChildPayload {
+  id?: number;
+  name?: string;
+  terms?: {
+    active?: number;
+    subjects?: {
+      code?: string;
+      programme?: number;
+      metaclass?: number;
+      title?: string;
+      description?: string;
+    }[];
+  }[];
+}
+
+async function fetchJSON(url: string, body: unknown) {
+  const res = await fetch(`${location.origin}${url}`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+async function loadEngageChildrenPayload(): Promise<EngageChildPayload[]> {
+  const res = await fetchJSON("/seqta/parent/load/subjects", {});
+  return Array.isArray(res.payload) ? res.payload : [];
+}
+
+export async function resolveEngageStudentId(): Promise<number> {
+  const fromUrlOrStorage = getEngageAssessmentStudentId();
+  if (fromUrlOrStorage) return Number(fromUrlOrStorage);
+
+  const children = await loadEngageChildrenPayload();
+  const firstChild = children[0];
+  if (firstChild?.id != null) return Number(firstChild.id);
+
+  throw new Error("Could not resolve Engage student ID");
+}
+
+function subjectsFromChild(child: EngageChildPayload): OverviewSubject[] {
+  return activeSubjectsFromEngageChild(child);
+}
+
+async function loadEngagePrefs(): Promise<Record<string, string>> {
+  const res = await fetchJSON("/seqta/parent/load/prefs?", {
+    request: "userPrefs",
+    asArray: true,
+  });
+
+  const colors: Record<string, string> = {};
+  (res.payload ?? []).forEach((pref: PrefItem) => {
+    if (pref.name.startsWith("timetable.subject.colour.")) {
+      const code = pref.name.replace("timetable.subject.colour.", "");
+      colors[code] = pref.value;
+    }
+  });
+  return colors;
+}
+
+async function loadEngageUpcoming(studentId: number) {
+  const res = await fetchJSON("/seqta/parent/assessment/list/upcoming?", {
+    student: studentId,
+  });
+  return res.payload ?? [];
+}
+
+function normalizeAssessmentDates(t: any, subject: OverviewSubject): any {
+  const normalized = { ...t };
+  if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
+    normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
+  }
+  if (!normalized.programmeID) normalized.programmeID = subject.programme;
+  if (!normalized.metaclassID) normalized.metaclassID = subject.metaclass;
+  if (!normalized.code && t.subject) normalized.code = t.subject;
+  return normalized;
+}
+
+async function loadEngagePast(studentId: number, subjects: OverviewSubject[]) {
+  const map: Record<number, any> = {};
+
+  await Promise.all(
+    subjects.map(async (subject) => {
+      const res = await fetchJSON("/seqta/parent/assessment/list/past?", {
+        programme: subject.programme,
+        metaclass: subject.metaclass,
+        student: studentId,
+      });
+
+      const processAssessment = (task: any) => {
+        if (task?.id) {
+          const merged = {
+            ...task,
+            programmeID: task.programmeID || task.programme || subject.programme,
+            metaclassID: task.metaclassID || task.metaclass || subject.metaclass,
+            code: task.code || task.subject || subject.code,
+          };
+          map[task.id] = normalizeAssessmentDates(merged, subject);
+        }
+      };
+
+      if (Array.isArray(res.payload?.pending)) {
+        res.payload.pending.forEach(processAssessment);
+      }
+      if (Array.isArray(res.payload?.tasks)) {
+        res.payload.tasks.forEach(processAssessment);
+      }
+    }),
+  );
+
+  return map;
+}
+
+async function loadEngageSubmissions(studentId: number, assessments: any[]) {
+  const submissionMap: Record<number, boolean> = {};
+
+  await Promise.all(
+    assessments.map(async (assessment) => {
+      try {
+        const res = await fetchJSON("/seqta/parent/assessment/submissions/get", {
+          assessment: assessment.id,
+          metaclass: assessment.metaclassID,
+          student: studentId,
+        });
+        submissionMap[assessment.id] =
+          Array.isArray(res.payload) && res.payload.length > 0;
+      } catch (error) {
+        console.warn(
+          `[BetterSEQTA+] Failed to fetch Engage submission for assessment ${assessment.id}:`,
+          error,
+        );
+        submissionMap[assessment.id] = false;
+      }
+    }),
+  );
+
+  return submissionMap;
+}
+
+async function loadEngageAssessmentsForStudent(
+  child: EngageChildPayload,
+): Promise<any[]> {
+  const studentId = Number(child.id);
+  const studentName = child.name ?? "Student";
+  const subjects = subjectsFromChild(child);
+  const [upcoming, pastMap] = await Promise.all([
+    loadEngageUpcoming(studentId),
+    loadEngagePast(studentId, subjects),
+  ]);
+
+  const map: Record<number, any> = {};
+  upcoming.forEach((assessment: any) => {
+    if (assessmentBelongsToActiveSubjects(assessment, subjects)) {
+      map[assessment.id] = { ...assessment };
+    }
+  });
+  Object.values(pastMap).forEach((task: any) => {
+    if (!assessmentBelongsToActiveSubjects(task, subjects)) return;
+    if (map[task.id]) Object.assign(map[task.id], task);
+    else map[task.id] = task;
+  });
+
+  const assessments = filterAssessmentsForActiveSubjects(
+    Object.values(map),
+    subjects,
+  ).map((assessment) => ({
+    ...assessment,
+    studentId,
+    studentName,
+  }));
+
+  const submissions = await loadEngageSubmissions(studentId, assessments);
+  assessments.forEach((assessment) => {
+    assessment.submitted = submissions[assessment.id] || false;
+  });
+
+  return assessments;
+}
+
+export async function getEngageAssessmentsData() {
+  const childrenPayload = await loadEngageChildrenPayload();
+  const students: EngageStudent[] = childrenPayload
+    .filter((child) => child.id != null)
+    .map((child) => ({
+      id: Number(child.id),
+      name: child.name ?? "Student",
+    }));
+
+  if (!students.length) {
+    throw new Error("No Engage students found");
+  }
+
+  const [colors, assessmentsByChild] = await Promise.all([
+    loadEngagePrefs(),
+    Promise.all(childrenPayload.map((child) => loadEngageAssessmentsForStudent(child))),
+  ]);
+
+  const subjectsMap = new Map<string, OverviewSubject>();
+  childrenPayload.forEach((child) => {
+    subjectsFromChild(child).forEach((subject) => {
+      if (!subjectsMap.has(subject.code)) {
+        subjectsMap.set(subject.code, subject);
+      }
+    });
+  });
+
+  const defaultStudentId = await resolveEngageStudentId();
+
+  return {
+    assessments: assessmentsByChild.flat(),
+    subjects: Array.from(subjectsMap.values()),
+    colors,
+    students,
+    studentId: defaultStudentId,
+  };
+}

src/plugins/built-in/assessmentsOverview/icons.ts

@@ -0,0 +1,65 @@
+/** Heroicons v2 outline paths (https://heroicons.com) */
+export type OverviewIconName =
+  | "calendar-days"
+  | "clock"
+  | "exclamation-triangle"
+  | "document-check"
+  | "check-circle"
+  | "book-open"
+  | "calendar"
+  | "chart-bar"
+  | "queue-list"
+  | "eye"
+  | "clipboard-document-list"
+  | "ellipsis-vertical"
+  | "exclamation-circle";
+
+export const OVERVIEW_ICON_PATHS: Record<
+  OverviewIconName,
+  string | string[]
+> = {
+  "calendar-days":
+    "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5",
+  clock: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z",
+  "exclamation-triangle":
+    "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z",
+  "document-check":
+    "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 8.625a2.625 2.625 0 100-5.25 2.625 2.625 0 000 5.25zm0 0l-3 3m3-3l3 3",
+  "check-circle":
+    "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+  "book-open":
+    "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25",
+  calendar:
+    "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5",
+  "chart-bar":
+    "M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z",
+  "queue-list":
+    "M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z",
+  eye: [
+    "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z",
+    "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+  ],
+  "clipboard-document-list": [
+    "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 17.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z",
+    "M8.25 6.75V4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V6.75H8.25z",
+  ],
+  "ellipsis-vertical":
+    "M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z",
+  "exclamation-circle":
+    "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z",
+};
+
+export const STATUS_COLUMN_ICONS: Record<string, OverviewIconName> = {
+  UPCOMING: "calendar-days",
+  DUE_SOON: "clock",
+  OVERDUE: "exclamation-triangle",
+  SUBMITTED: "document-check",
+  MARKS_RELEASED: "check-circle",
+};
+
+export const GROUP_SORT_ICONS: Record<string, OverviewIconName> = {
+  year: "calendar",
+  subject: "book-open",
+  grade: "chart-bar",
+  title: "queue-list",
+};

src/plugins/built-in/assessmentsOverview/index.ts

@@ -5,6 +5,46 @@ import { renderErrorState, renderGrid, renderSkeletonLoader } from "./ui";
 import styles from "./styles.css?inline";
 import { delay } from "@/seqta/utils/delay";
 import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import {
+  isEngageAssessmentOverviewRoute,
+} from "@/seqta/utils/engageAssessmentStudent";
+import { resolveEngageStudentId } from "./engageApi";
+
+const OVERVIEW_MENU_CLASS = "betterseqta-assessments-overview-item";
+
+function ensureOverviewMenuPosition(
+  menu: HTMLElement,
+  gridItem: HTMLElement,
+) {
+  if (menu.firstElementChild !== gridItem) {
+    menu.insertBefore(gridItem, menu.firstChild);
+  }
+}
+
+function isOverviewRoute() {
+  if (isSeqtaEngageExperience()) {
+    return isEngageAssessmentOverviewRoute();
+  }
+  return window.location.hash.includes("/assessments/overview");
+}
+
+async function waitForAssessmentsSubmenu(): Promise<HTMLElement> {
+  if (!isSeqtaEngageExperience()) {
+    return (await waitForElm(
+      '[data-key="assessments"] > .sub > ul',
+      true,
+      100,
+      60,
+    )) as HTMLElement;
+  }
+
+  return (await waitForElm(
+    '[data-key="assessments"] .sub ul, [data-key="assessments"] ul',
+    true,
+    100,
+    350,
+  )) as HTMLElement;
+}
 
 const assessmentsOverviewPlugin: Plugin<{}> = {
   id: "assessments-overview",
@@ -17,35 +57,46 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
   styles,
 
   run: async () => {
-    if (isSeqtaEngageExperience()) return;
+    const menu = await waitForAssessmentsSubmenu();
-
-    const menu = (await waitForElm(
-      '[data-key="assessments"] > .sub > ul',
-      true,
-      100,
-      60,
-    )) as HTMLElement;
     const gridItem = document.createElement("li");
     gridItem.className = "item";
+    gridItem.classList.add(OVERVIEW_MENU_CLASS);
     const label = document.createElement("label");
     label.textContent = "Overview";
     gridItem.appendChild(label);
-    menu.insertBefore(gridItem, menu.children[1] || null);
+    menu.insertBefore(gridItem, menu.firstChild);
 
-    if (window.location.hash.includes("/assessments/overview")) {
+    const menuObserver = new MutationObserver(() => {
-      loadGridView();
+      ensureOverviewMenuPosition(menu, gridItem);
+    });
+    menuObserver.observe(menu, { childList: true });
+
+    if (isOverviewRoute()) {
+      void loadGridView();
     }
 
     const clickHandler = (e: Event) => {
       e.preventDefault();
-      loadGridView();
+      void loadGridView();
     };
     gridItem.addEventListener("click", clickHandler);
 
     async function loadGridView() {
       await delay(1);
-      window.history.pushState({}, "", "/#?page=/assessments/overview");
+
-      document.title = "Overview ― SEQTA Learn";
+      if (isSeqtaEngageExperience()) {
+        const studentId = await resolveEngageStudentId();
+        window.history.pushState(
+          {},
+          "",
+          `/#?page=/assessments/${studentId}/overview`,
+        );
+        document.title = "Overview ― SEQTA Engage";
+      } else {
+        window.history.pushState({}, "", "/#?page=/assessments/overview");
+        document.title = "Overview ― SEQTA Learn";
+      }
+
       const main = document.getElementById("main");
       if (!main) return;
 
@@ -59,7 +110,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
         .querySelector('[data-key="assessments"]')
         ?.classList.add("active");
 
-      main.innerHTML = '<div id="grid-view-container"></div>';
+  main.innerHTML = '<div id="grid-view-container" class="bsplus-overview-host"></div>';
       const container = document.getElementById(
         "grid-view-container",
       ) as HTMLElement;
@@ -79,6 +130,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
     }
 
     return () => {
+      menuObserver.disconnect();
       gridItem.removeEventListener("click", clickHandler);
       gridItem.remove();
     };

src/plugins/built-in/assessmentsOverview/ui.ts

@@ -1,45 +1,155 @@
 import renderSvelte from "@/interface/main";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import AssessmentsOverview from "./AssessmentsOverview.svelte";
 import SkeletonLoader from "./SkeletonLoader.svelte";
 import ErrorState from "./ErrorState.svelte";
 import { unmount } from "svelte";
 
 let currentApp: any = null;
+let themeObserver: MutationObserver | null = null;
+type ThemeSettingKey =
+  | "selectedColor"
+  | "DarkMode"
+  | "adaptiveThemeColour"
+  | "adaptiveThemeGradient"
+  | "selectedTheme";
+
+let themeListeners: Array<{ key: ThemeSettingKey; listener: () => void }> = [];
+
+const THEME_CSS_VARS = [
+  "--better-main",
+  "--better-pale",
+  "--better-light",
+  "--text-color",
+  "--background-primary",
+  "--background-secondary",
+  "--text-primary",
+  "--theme-offset-bg",
+  "--better-sub",
+] as const;
+
+const ACCENT_CSS_VARS = [
+  "--better-main",
+  "--accent-color-value",
+  "--accentColor",
+  "--colour-betterseqta-blue",
+] as const;
+
+function extractSolidColor(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "initial") return null;
+  if (
+    trimmed.startsWith("#") ||
+    trimmed.startsWith("rgb") ||
+    trimmed.startsWith("hsl")
+  ) {
+    return trimmed;
+  }
+  if (trimmed.includes("gradient")) {
+    const match = trimmed.match(
+      /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
+    );
+    return match?.[0] ?? null;
+  }
+  return null;
+}
+
+function resolvePageAccentColor(): string {
+  const computed = getComputedStyle(document.documentElement);
+  for (const name of ACCENT_CSS_VARS) {
+    const solid = extractSolidColor(computed.getPropertyValue(name));
+    if (solid) return solid;
+  }
+  const fromSettings = settingsState.selectedColor?.trim();
+  if (fromSettings) {
+    const solid = extractSolidColor(fromSettings);
+    if (solid) return solid;
+  }
+  return "#007bff";
+}
+
+function syncOverviewTheme(target: HTMLElement) {
+  const computed = getComputedStyle(document.documentElement);
+  for (const name of THEME_CSS_VARS) {
+    const value = document.documentElement.style.getPropertyValue(name).trim()
+      || computed.getPropertyValue(name).trim();
+    if (value) target.style.setProperty(name, value);
+  }
+
+  const accent = resolvePageAccentColor();
+  target.style.setProperty("--bsplus-overview-accent", accent);
+  target.style.setProperty("--better-main", accent);
+  target.classList.toggle(
+    "dark",
+    document.documentElement.classList.contains("dark"),
+  );
+}
+
+function watchOverviewTheme(root: HTMLElement) {
+  for (const { key, listener } of themeListeners) {
+    settingsState.unregister(key, listener);
+  }
+  themeListeners = [];
+
+  const listener = () => syncOverviewTheme(root);
+  for (const key of [
+    "selectedColor",
+    "DarkMode",
+    "adaptiveThemeColour",
+    "adaptiveThemeGradient",
+    "selectedTheme",
+  ] satisfies ThemeSettingKey[]) {
+    settingsState.register(key, listener);
+    themeListeners.push({ key, listener });
+  }
+
+  themeObserver?.disconnect();
+  themeObserver = new MutationObserver(() => syncOverviewTheme(root));
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["style", "class"],
+  });
+}
+
+function prepareContainer(container: HTMLElement) {
+  container.innerHTML = "";
+  container.className = "bsplus-overview-host";
+  container.classList.add("bsplus-overview-root");
+  syncOverviewTheme(container);
+  watchOverviewTheme(container);
+}
 
 export function renderGrid(container: HTMLElement, data: any) {
-  if (currentApp) {
+  if (currentApp) unmount(currentApp);
-    unmount(currentApp);
+  prepareContainer(container);
-  }
-  
-  container.innerHTML = "";
-  container.className = "";
-  
   currentApp = renderSvelte(AssessmentsOverview, container, { data });
 }
 
 export function renderSkeletonLoader(container: HTMLElement) {
-  if (currentApp) {
+  if (currentApp) unmount(currentApp);
-    unmount(currentApp);
+  prepareContainer(container);
-  }
-  
-  container.innerHTML = "";
-  container.className = "";
-  
   currentApp = renderSvelte(SkeletonLoader, container);
 }
 
-
 export function renderLoadingState(container: HTMLElement) {
   renderSkeletonLoader(container);
 }
 
 export function renderErrorState(container: HTMLElement, error: string) {
+  if (currentApp) unmount(currentApp);
+  prepareContainer(container);
+  currentApp = renderSvelte(ErrorState, container, { error });
+}
+
+export function teardownOverviewUi() {
+  for (const { key, listener } of themeListeners) {
+    settingsState.unregister(key, listener);
+  }
+  themeListeners = [];
+  themeObserver?.disconnect();
+  themeObserver = null;
   if (currentApp) {
     unmount(currentApp);
+    currentApp = null;
   }
-  
+}
-  container.innerHTML = "";
-  container.className = "";
-  
-  currentApp = renderSvelte(ErrorState, container, { error });
-}

src/plugins/built-in/assessmentsOverview/utils.ts

@@ -1,3 +1,115 @@
+export interface OverviewSubject {
+  code: string;
+  programme: number;
+  metaclass: number;
+  title: string;
+}
+
+function isActiveTermFlag(active: unknown): boolean {
+  return active === 1 || active === true;
+}
+
+export function normalizeOverviewSubject(raw: unknown): OverviewSubject | null {
+  if (!raw || typeof raw !== "object") return null;
+
+  const subject = raw as Record<string, unknown>;
+  const programme = Number(subject.programme ?? subject.programmeID);
+  const metaclass = Number(subject.metaclass ?? subject.metaclassID);
+  if (!programme || !metaclass || Number.isNaN(programme) || Number.isNaN(metaclass)) {
+    return null;
+  }
+
+  const code = String(subject.code ?? subject.subject ?? "").trim();
+  if (!code) return null;
+
+  return {
+    code,
+    programme,
+    metaclass,
+    title: String(subject.title ?? subject.description ?? code),
+  };
+}
+
+/** Subjects from the active programme-year folder(s) in `/seqta/student/load/subjects`. */
+export function activeSubjectsFromLearnPayload(payload: unknown): OverviewSubject[] {
+  if (!Array.isArray(payload)) return [];
+
+  const subjects: OverviewSubject[] = [];
+  const seen = new Set<string>();
+
+  for (const folder of payload) {
+    if (!folder || typeof folder !== "object") continue;
+    const term = folder as { active?: unknown; subjects?: unknown[] };
+    if (!isActiveTermFlag(term.active) || !Array.isArray(term.subjects)) continue;
+
+    for (const raw of term.subjects) {
+      const subject = normalizeOverviewSubject(raw);
+      if (!subject) continue;
+      const key = `${subject.programme}-${subject.metaclass}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      subjects.push(subject);
+    }
+  }
+
+  return subjects;
+}
+
+export function activeSubjectsFromEngageChild(child: {
+  terms?: { active?: number; subjects?: unknown[] }[];
+}): OverviewSubject[] {
+  const subjects: OverviewSubject[] = [];
+  const seen = new Set<string>();
+
+  for (const term of child.terms ?? []) {
+    if (term.active !== 1) continue;
+    for (const raw of term.subjects ?? []) {
+      const subject = normalizeOverviewSubject(raw);
+      if (!subject) continue;
+      const key = `${subject.programme}-${subject.metaclass}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      subjects.push(subject);
+    }
+  }
+
+  return subjects;
+}
+
+export function assessmentBelongsToActiveSubjects(
+  assessment: Record<string, unknown>,
+  activeSubjects: OverviewSubject[],
+): boolean {
+  if (!activeSubjects.length) return false;
+
+  const programme = Number(
+    assessment.programmeID ?? assessment.programme,
+  );
+  const metaclass = Number(
+    assessment.metaclassID ?? assessment.metaclass,
+  );
+
+  if (programme && metaclass && !Number.isNaN(programme) && !Number.isNaN(metaclass)) {
+    return activeSubjects.some(
+      (subject) =>
+        subject.programme === programme && subject.metaclass === metaclass,
+    );
+  }
+
+  const code = String(assessment.code ?? assessment.subject ?? "").trim();
+  if (!code) return false;
+  return activeSubjects.some((subject) => subject.code === code);
+}
+
+export function filterAssessmentsForActiveSubjects<T extends Record<string, unknown>>(
+  assessments: T[],
+  activeSubjects: OverviewSubject[],
+): T[] {
+  return assessments.filter((assessment) =>
+    assessmentBelongsToActiveSubjects(assessment, activeSubjects),
+  );
+}
+
 export function formatDate(dateStr: string, submitted?: boolean): string {
   const d = new Date(dateStr);
   const now = new Date();

src/plugins/built-in/globalSearch/lazy.ts

@@ -5,7 +5,9 @@ import {
   defineSettings,
   hotkeySetting,
 } from "../../core/settingsHelpers";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import styles from "./src/core/styles.css?inline";
+import { resetSearchIndexes } from "./src/indexing/resetIndexes";
 
 // Platform-aware default hotkey
 const getDefaultHotkey = () => {
@@ -34,85 +36,42 @@ const settings = defineSettings({
     title: "Index on Page Load",
     description: "Run content indexing when SEQTA loads",
   }),
+  passiveIndexing: booleanSetting({
+    default: true,
+    title: "Index Browsed Content",
+    description:
+      "Capture safe text from SEQTA pages you visit so they're searchable. Sensitive routes (settings, files, login) are always excluded.",
+  }),
   resetIndex: buttonSetting({
     title: "Reset Index",
     description: "Reset the search index and storage",
     trigger: async () => {
-      const confirmed = confirm("Are you sure you want to reset the search index and storage?");
+      const confirmed = confirm(
+        "Reset the search index and all stored Global Search data?\n\nAfter this, reload this SEQTA tab so indexing can run again and rebuild the index.",
+      );
+      if (!confirmed) return;
 
-      if (confirmed) {
+      try {
-        try {
+        // `resetSearchIndexes` is a tiny statically-imported helper: no
-          // Dynamically import modules to avoid loading heavy dependencies
+        // dynamic chunks to chase, so the button keeps working even when
-          const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
+        // the settings page has been open across an extension update.
-          const { resetDatabase } = await import("./src/indexing/db");
+        await resetSearchIndexes();
-          
+        alert(
-          // Reset vector worker first
+          "Search index and storage were reset.\n\nReload this tab to regenerate the index.",
-          try {
+        );
-            const workerManager = VectorWorkerManager.getInstance();
+      } catch (e) {
-            await workerManager.resetWorker();
+        alert(
-            console.log("Vector worker reset successfully");
+          "Failed to reset index: " +
-          } catch (e) {
+            String(e) +
-            console.warn("Failed to reset vector worker:", e);
+            "\n\nTry closing other browser tabs and try again.",
-          }
+        );
-
-          // Close all database connections properly before deletion
-          try {
-            await resetDatabase();
-            console.log("betterseqta-index database closed and reset");
-          } catch (e) {
-            console.warn("Failed to reset betterseqta-index database:", e);
-          }
-
-          // Wait a bit for connections to fully close
-          await new Promise(resolve => setTimeout(resolve, 100));
-
-          // Delete embeddiaDB (vector search database)
-          const deleteDb = (dbName: string) => {
-            return new Promise<void>((resolve, reject) => {
-              const req = indexedDB.deleteDatabase(dbName);
-              req.onsuccess = () => {
-                console.log(`Successfully deleted database: ${dbName}`);
-                resolve();
-              };
-              req.onerror = () => {
-                console.error(`Error deleting database ${dbName}:`, req.error);
-                reject(req.error);
-              };
-              req.onblocked = () => {
-                console.warn(`Database ${dbName} deletion blocked - connections still open`);
-                // Wait and retry once
-                setTimeout(() => {
-                  const retryReq = indexedDB.deleteDatabase(dbName);
-                  retryReq.onsuccess = () => {
-                    console.log(`Successfully deleted database on retry: ${dbName}`);
-                    resolve();
-                  };
-                  retryReq.onerror = () => reject(retryReq.error);
-                  retryReq.onblocked = () => {
-                    reject(new Error(`One database is open, failed to remove: ${dbName}. Please close other tabs and try again.`));
-                  };
-                }, 500);
-              };
-            });
-          };
-          
-          try {
-            await deleteDb("embeddiaDB");
-            await deleteDb("betterseqta-index");
-            alert("Search index and storage have been reset successfully.");
-          } catch (e) {
-            alert("Failed to reset one or more databases: " + String(e) + "\n\nTry closing other browser tabs and try again.");
-          }
-        } catch (e) {
-          alert("Failed to reset index: " + String(e));
-        }
       }
     },
   }),
 });
 
 // Create the lazy plugin definition - this loads immediately but doesn't import heavy dependencies
-export default defineLazyPlugin({
+const globalSearchPlugin = defineLazyPlugin({
   id: "global-search",
   name: "Global Search",
   description: "Quick search for everything in SEQTA",
@@ -125,3 +84,15 @@ export default defineLazyPlugin({
   // Lazy loader - only imports the heavy plugin when actually needed
   loader: () => import("./src/core/index")
 });
+
+const runGlobalSearch = globalSearchPlugin.run!;
+
+globalSearchPlugin.run = async (api) => {
+  if (isSeqtaEngageExperience()) {
+    return () => {};
+  }
+
+  return runGlobalSearch(api);
+};
+
+export default globalSearchPlugin;

src/plugins/built-in/globalSearch/src/components/SearchBar.svelte

@@ -48,6 +48,13 @@
   let calculatorResult = $state<string | null>(null);
   let resultsList = $state<HTMLUListElement>();
 
+  // Monotonic counter so a slow async search (vector reranking) cannot
+  // overwrite results from a newer keystroke. Without this guard, the user
+  // observes results "flickering" — e.g. typing `world w` finds the assessment
+  // but `world wa` triggers a new search whose vector pass returns later than
+  // the `world w` pass and clobbers the more relevant matches.
+  let searchRequestId = 0;
+
   const updateCalculatorState = (hasResult: string | null) => {
     calculatorResult = hasResult;
   };
@@ -166,20 +173,30 @@
     });
 
     const term = searchTerm.trim().toLowerCase();
-    
+    const requestId = ++searchRequestId;
+
     if (commandsFuse && dynamicContentFuse) {
-      combinedResults = await doSearch(
+      const results = await doSearch(
-        term, 
+        term,
-        commandsFuse, 
+        commandsFuse,
         commandIdToItemMap,
         dynamicContentFuse,
         dynamicIdToItemMap,
         true, // sortByRecent
       );
+
+      // Drop the result if the user has typed since this search started, or
+      // if the current term no longer matches what we searched for. This
+      // keeps the visible list anchored to the latest query.
+      if (requestId !== searchRequestId) return;
+      if (searchTerm.trim().toLowerCase() !== term) return;
+
+      combinedResults = results;
     } else {
+      if (requestId !== searchRequestId) return;
       combinedResults = [];
     }
-    
+
     isLoading = false;
   };
 

src/plugins/built-in/globalSearch/src/components/items/GenericItem.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import HighlightedText from '../../utils/HighlightedText.svelte';
+  import type { DynamicContentItem } from '../../utils/dynamicItems';
+  import type { FuseResultMatch } from '../../core/types';
+
+  const { item, isSelected, searchTerm, matches, onclick } = $props<{
+    item: DynamicContentItem;
+    isSelected: boolean;
+    searchTerm: string;
+    matches?: readonly FuseResultMatch[];
+    onclick: () => void;
+  }>();
+
+  const categoryLabel = (category: string): string => {
+    if (!category) return '';
+    return category.charAt(0).toUpperCase() + category.slice(1);
+  };
+
+  const gradientForCategory = (category: string): string => {
+    switch (category) {
+      case 'courses':
+        return 'from-[#7c5fe0] to-[#4d2bb8]';
+      case 'notices':
+        return 'from-[#f6c453] to-[#d39007]';
+      case 'documents':
+        return 'from-[#4FBBFE] to-[#2090F3]';
+      case 'folio':
+        return 'from-[#22c55e] to-[#0f9b3a]';
+      case 'portals':
+        return 'from-[#22d3ee] to-[#0e7490]';
+      case 'reports':
+        return 'from-[#f97316] to-[#c2410c]';
+      case 'goals':
+        return 'from-[#10b981] to-[#047857]';
+      case 'passive':
+        return 'from-[#6b7280] to-[#374151]';
+      default:
+        return 'from-[#4FBBFE] to-[#2090F3]';
+    }
+  };
+
+  const fallbackIcon = (category: string): string => {
+    switch (category) {
+      case 'courses':
+        return '\ueb4d';
+      case 'notices':
+        return '\ueb24';
+      case 'documents':
+        return '\ueb6f';
+      case 'folio':
+        return '\ueb16';
+      case 'portals':
+        return '\ueb01';
+      case 'reports':
+        return '\ueb70';
+      case 'goals':
+        return '\uea15';
+      case 'passive':
+        return '\ueb71';
+      default:
+        return '\ue924';
+    }
+  };
+</script>
+
+<button
+  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+  onclick={onclick}
+>
+  <div class="flex items-center w-full">
+    <div
+      class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white rounded-md bg-gradient-to-br {gradientForCategory(item.category)}"
+    >
+      {item.metadata?.icon || fallbackIcon(item.category)}
+    </div>
+    <span class="ml-4 text-lg truncate">
+      <HighlightedText text={item.text} term={searchTerm} matches={matches} />
+    </span>
+    <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
+      {item.metadata?.subjectCode || categoryLabel(item.category)}
+    </span>
+  </div>
+  {#if item.content}
+    <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
+      <HighlightedText text={item.content} term={searchTerm} matches={matches} />
+    </div>
+  {/if}
+</button>

src/plugins/built-in/globalSearch/src/core/commands.ts

@@ -25,11 +25,11 @@ async function getCurrentLesson() {
   try {
     const response = await fetch(`${location.origin}/seqta/student/load/timetable?`, {
       method: "POST",
+      credentials: "include",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         from: todayFormatted,
         until: todayFormatted,
-        student: 69,
       }),
     });
     

src/plugins/built-in/globalSearch/src/core/index.ts

@@ -15,6 +15,10 @@ import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
 import { IndexedDbManager } from "embeddia";
 import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
 import { checkAndHandleUpdate } from "../utils/versionCheck";
+import {
+  getStoredPassiveItems,
+  installPassiveObserver,
+} from "../indexing/passiveObserver";
 
 // Platform-aware default hotkey
 const getDefaultHotkey = () => {
@@ -43,11 +47,19 @@ const settings = defineSettings({
     title: "Index on Page Load",
     description: "Run content indexing when SEQTA loads",
   }),
+  passiveIndexing: booleanSetting({
+    default: true,
+    title: "Index Browsed Content",
+    description:
+      "Capture safe text from SEQTA pages you visit so they're searchable. Sensitive routes (settings, files, login) are always excluded.",
+  }),
   resetIndex: buttonSetting({
     title: "Reset Index",
     description: "Reset the search index and storage",
     trigger: async () => {
-      const confirmed = confirm("Are you sure you want to reset the search index and storage?");
+      const confirmed = confirm(
+        "Reset the search index and all stored Global Search data?\n\nAfter this, reload this SEQTA tab so indexing can run again and rebuild the index.",
+      );
 
       if (confirmed) {
         try {
@@ -106,7 +118,9 @@ const settings = defineSettings({
           try {
             await deleteDb("embeddiaDB");
             await deleteDb("betterseqta-index");
-            alert("Search index and storage have been reset successfully.");
+            alert(
+              "Search index and storage were reset.\n\nReload this tab to regenerate the index.",
+            );
           } catch (e) {
             alert("Failed to reset one or more databases: " + String(e) + "\n\nTry closing other browser tabs and try again.");
           }
@@ -131,6 +145,9 @@ class GlobalSearchPlugin extends BasePlugin<typeof settings> {
   @Setting(settings.runIndexingOnLoad)
   runIndexingOnLoad!: boolean;
 
+  @Setting(settings.passiveIndexing)
+  passiveIndexing!: boolean;
+
   @Setting(settings.resetIndex)
   resetIndex!: () => void;
 }
@@ -150,26 +167,35 @@ const globalSearchPlugin: Plugin<typeof settings> = {
   run: async (api) => {
     const appRef = { current: null };
 
-    // Check for extension updates and clear caches if needed
+    // Run the version check BEFORE we open any IndexedDB connections.
-    // Use a timeout to avoid blocking initialization
+    // On a normal load (no version change) this is just a string compare
-    setTimeout(async () => {
+    // and a manifest read, so the cost is negligible. On a real update,
-      try {
+    // we want the database wipe to complete before `IndexedDbManager`
-        const wasUpdated = await checkAndHandleUpdate();
+    // grabs a handle on `embeddiaDB`, otherwise the delete request comes
-        if (wasUpdated) {
+    // back blocked.
-          console.log("[Global Search] Extension updated - caches cleared");
+    try {
-        }
+      const wasUpdated = await checkAndHandleUpdate();
-      } catch (error: any) {
+      if (wasUpdated) {
-        // Handle CSS preload errors and other failures gracefully
+        console.log(
-        // These can happen in Firefox or when assets aren't available
+          "[Global Search] Extension updated — search index reset; the next indexing pass will repopulate.",
-        if (error?.message?.includes("preload CSS") || 
+        );
-            error?.message?.includes("MIME type") || 
-            error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")) {
-          console.debug("[Global Search] Version check skipped due to asset loading restrictions:", error.message);
-        } else {
-          console.warn("[Global Search] Failed to check for updates:", error);
-        }
       }
-    }, 100);
+    } catch (error: any) {
+      // Firefox sometimes refuses CSS preloads or asset reads; we never
+      // want this path to take the whole plugin down.
+      if (
+        error?.message?.includes("preload CSS") ||
+        error?.message?.includes("MIME type") ||
+        error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")
+      ) {
+        console.debug(
+          "[Global Search] Version check skipped due to asset loading restrictions:",
+          error.message,
+        );
+      } else {
+        console.warn("[Global Search] Failed to check for updates:", error);
+      }
+    }
 
     try {
       await IndexedDbManager.create("embeddiaDB", "embeddiaObjectStore", {
@@ -210,6 +236,17 @@ const globalSearchPlugin: Plugin<typeof settings> = {
         const workerManager = VectorWorkerManager.getInstance();
         console.log("Streaming active:", workerManager.isStreamingActive());
       },
+      passiveItems: async () => {
+        const items = await getStoredPassiveItems();
+        console.log(`Captured ${items.length} passive items`);
+        return items;
+      },
+      runSelfTests: async () => {
+        const { runGlobalSearchSelfTests } = await import(
+          "../indexing/selfTests"
+        );
+        return runGlobalSearchSelfTests();
+      },
       checkIndexedDBSize: async () => {
         try {
           const estimate = await navigator.storage.estimate();
@@ -232,6 +269,14 @@ const globalSearchPlugin: Plugin<typeof settings> = {
       }
     };
 
+    if (api.settings.passiveIndexing) {
+      try {
+        installPassiveObserver();
+      } catch (error) {
+        console.warn("[Global Search] Passive observer install failed:", error);
+      }
+    }
+
     if (api.settings.runIndexingOnLoad) {
       setTimeout(async () => {
         await runIndexing();

src/plugins/built-in/globalSearch/src/core/mountSearchBar.ts

@@ -8,7 +8,12 @@ import browser from "webextension-polyfill";
 export function mountSearchBar(
   titleElement: Element,
   api: any,
-  appRef: { current: any; storageChangeHandler?: any; progressHandler?: any },
+  appRef: {
+    current: any;
+    storageChangeHandler?: any;
+    progressHandler?: any;
+    clearDoneFlashTimer?: () => void;
+  },
 ) {
   if (titleElement.querySelector(".search-trigger")) {
     return;
@@ -18,74 +23,215 @@ export function mountSearchBar(
   let currentHotkey = isValidHotkey(api.settings.searchHotkey) ? api.settings.searchHotkey : "ctrl+k";
   let hotkeyDisplay = formatHotkeyForDisplay(currentHotkey);
 
+  // Search trigger + progress UI live in one wrapper so the auto-margin
+  // pushes the whole group to the left edge of the topbar instead of
+  // stranding the progress text on the far right of the screen.
+  const searchWrapper = document.createElement("div");
+  searchWrapper.className = "search-trigger-wrapper";
+
+  // Anchor stacks button + slim progress strip in one rounded chip (see
+  // `.search-trigger-anchor` in styles.css).
+  const searchAnchor = document.createElement("div");
+  searchAnchor.className = "search-trigger-anchor";
+
   const searchButton = document.createElement("div");
   searchButton.className = "search-trigger";
-  
+
-  // Create progress indicator container
-  const progressContainer = document.createElement("div");
-  progressContainer.className = "search-progress-container";
-  progressContainer.style.cssText = "display: flex; align-items: center; gap: 8px; margin-left: 8px; min-width: 120px;";
-  
-  // Create progress bar
   const progressBarWrapper = document.createElement("div");
   progressBarWrapper.className = "search-progress-bar-wrapper";
-  progressBarWrapper.style.cssText = "flex: 1; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; display: none;";
+
-  
+  const progressTrack = document.createElement("div");
+  progressTrack.className = "search-progress-track";
+
   const progressBar = document.createElement("div");
   progressBar.className = "search-progress-bar";
-  progressBar.style.cssText = "height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6); transition: width 0.3s ease-out; width: 0%; position: relative;";
+  progressTrack.appendChild(progressBar);
-  
+  progressBarWrapper.appendChild(progressTrack);
-  // Add shimmer effect
+
-  const shimmer = document.createElement("div");
+  // Use a block-level <div> so the label reliably participates in flex
-  shimmer.style.cssText = "position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite;";
+  // layout. A <span> defaults to `display: inline`, which silently ignores
-  progressBar.appendChild(shimmer);
+  // `max-width`, `overflow`, and `text-overflow: ellipsis`, and was the
-  progressBarWrapper.appendChild(progressBar);
+  // reason the label appeared blank when the bar was visible.
-  
+  const progressText = document.createElement("div");
-  // Create progress text
-  const progressText = document.createElement("span");
   progressText.className = "search-progress-text";
-  progressText.style.cssText = "font-size: 11px; color: #666; white-space: nowrap; display: none;";
+  progressText.setAttribute("aria-live", "polite");
-  
+
-  progressContainer.appendChild(progressBarWrapper);
+  searchAnchor.appendChild(searchButton);
-  progressContainer.appendChild(progressText);
+  searchAnchor.appendChild(progressBarWrapper);
-  
+  searchWrapper.appendChild(searchAnchor);
+  searchWrapper.appendChild(progressText);
+
   // Indexing state
   let isIndexing = false;
+  /** True while indexing has run until it finishes/fails — used for Done! flash only */
+  let ranIndexingCycle = false;
   let completedJobs = 0;
   let totalJobs = 0;
   let indexingStatus: string | null = null;
-  
+  let doneFlashTimer: ReturnType<typeof setTimeout> | null = null;
-  const updateProgressDisplay = () => {
+  let doneFadeTimer: ReturnType<typeof setTimeout> | null = null;
-    if (isIndexing && totalJobs > 0) {
+  /** Captures `wasIndexing && !indexing` for the current dispatcher tick */
-      const percentage = Math.round((completedJobs / totalJobs) * 100);
+  let indexingJustStoppedFlag = false;
-      progressBar.style.width = `${Math.max(2, percentage)}%`;
+
-      progressBarWrapper.style.display = "block";
+  const DONE_HOLD_MS = 5000;
-      
+  const DONE_FADE_MS = 550;
-      if (indexingStatus) {
+
-        progressText.textContent = indexingStatus.length > 20 ? indexingStatus.substring(0, 20) + "..." : indexingStatus;
+  /** Treat as failure copy — plain “Done!” would be misleading */
-        progressText.style.display = "block";
+  const statusLooksRough = (s: string) =>
-      } else {
+    /\b(fail|error|cancel)\b/i.test(s);
-        progressText.textContent = `${completedJobs}/${totalJobs} (${percentage}%)`;
+
-        progressText.style.display = "block";
+  const truncateStatus = (s: string, max = 44) =>
-      }
+    s.length > max ? s.slice(0, max - 1) + "…" : s;
-    } else {
+
-      progressBarWrapper.style.display = "none";
+  const clearDoneFlashTimer = () => {
-      progressText.style.display = "none";
+    if (doneFlashTimer) {
+      clearTimeout(doneFlashTimer);
+      doneFlashTimer = null;
+    }
+    if (doneFadeTimer) {
+      clearTimeout(doneFadeTimer);
+      doneFadeTimer = null;
     }
   };
-  
+
+  const updateProgressDisplay = () => {
+    const indexingStoppedThisTick = indexingJustStoppedFlag;
+    indexingJustStoppedFlag = false;
+
+    const active = isIndexing && totalJobs > 0;
+
+    // Stray pulses (missing total, 0 completed, etc.) used to hit the idle
+    // branch and call clearDoneFlashTimer(), killing the Done! hold/fade.
+    if (doneFlashTimer !== null || doneFadeTimer !== null) {
+      if (!active) {
+        return;
+      }
+      clearDoneFlashTimer();
+    }
+
+    const completionEligible =
+      ranIndexingCycle &&
+      !active &&
+      totalJobs > 0 &&
+      (completedJobs >= totalJobs || indexingStoppedThisTick);
+
+    if (active) {
+      clearDoneFlashTimer();
+      progressBarWrapper.classList.remove("is-rough-complete");
+      progressText.classList.remove(
+        "is-rough",
+        "is-fading-done",
+        "is-done-message",
+      );
+      const percentage = Math.round((completedJobs / totalJobs) * 100);
+      progressBar.style.width = `${Math.max(2, percentage)}%`;
+      progressBarWrapper.classList.add("is-active");
+      searchAnchor.classList.add("is-indexing");
+      searchButton.classList.add("is-indexing");
+
+      if (indexingStatus) {
+        progressText.textContent = `${truncateStatus(indexingStatus)} · ${percentage}%`;
+      } else {
+        progressText.textContent = `Indexing ${completedJobs}/${totalJobs} (${percentage}%)`;
+      }
+      progressText.classList.add("is-active");
+      return;
+    }
+
+    if (completionEligible) {
+      // Duplicate end-of-run ticks must not reschedule hold/fade timers
+      if (doneFlashTimer !== null || doneFadeTimer !== null) {
+        return;
+      }
+
+      const rough =
+        indexingStatus != null && statusLooksRough(indexingStatus);
+
+      progressBar.style.width = "0%";
+      progressBarWrapper.classList.remove("is-active");
+      searchAnchor.classList.remove("is-indexing");
+      searchButton.classList.remove("is-indexing");
+      progressText.classList.remove("is-fading-done");
+
+      progressText.textContent = rough ? truncateStatus(indexingStatus!, 52) : "Done!";
+      if (rough) {
+        progressText.classList.add("is-rough");
+        progressBarWrapper.classList.add("is-rough-complete");
+      } else {
+        progressText.classList.remove("is-rough");
+        progressBarWrapper.classList.remove("is-rough-complete");
+      }
+      progressText.classList.add("is-active", "is-done-message");
+
+      doneFlashTimer = setTimeout(() => {
+        doneFlashTimer = null;
+        progressText.classList.add("is-fading-done");
+        doneFadeTimer = setTimeout(() => {
+          doneFadeTimer = null;
+          ranIndexingCycle = false;
+          indexingStatus = null;
+          progressBar.style.width = "0%";
+          progressBarWrapper.classList.remove("is-active");
+          progressBarWrapper.classList.remove("is-rough-complete");
+          searchAnchor.classList.remove("is-indexing");
+          searchButton.classList.remove("is-indexing");
+          progressText.classList.remove(
+            "is-active",
+            "is-rough",
+            "is-fading-done",
+            "is-done-message",
+          );
+          progressText.textContent = "";
+        }, DONE_FADE_MS);
+      }, DONE_HOLD_MS);
+      return;
+    }
+
+    clearDoneFlashTimer();
+    progressBarWrapper.classList.remove("is-active");
+    progressBarWrapper.classList.remove("is-rough-complete");
+    searchAnchor.classList.remove("is-indexing");
+    searchButton.classList.remove("is-indexing");
+    progressText.classList.remove(
+      "is-active",
+      "is-rough",
+      "is-fading-done",
+      "is-done-message",
+    );
+    progressBar.style.width = "0%";
+    progressText.textContent = "";
+    ranIndexingCycle = false;
+    indexingStatus = null;
+  };
+
   // Listen for indexing progress events
   const progressHandler = (event: CustomEvent) => {
-    const { completed, total, indexing, status } = event.detail;
+    const { completed, total, indexing, status } = event.detail as {
-    completedJobs = completed || 0;
+      completed?: number;
-    totalJobs = total || 0;
+      total?: number;
-    isIndexing = indexing || false;
+      indexing?: boolean;
-    indexingStatus = status || null;
+      status?: string;
+    };
+    const wasIndexing = isIndexing;
+
+    completedJobs = completed ?? 0;
+    totalJobs = total ?? 0;
+    isIndexing = Boolean(indexing);
+    indexingStatus = status ?? null;
+    indexingJustStoppedFlag = wasIndexing && !isIndexing;
+
+    if (!wasIndexing && isIndexing) ranIndexingCycle = true;
+    if (wasIndexing && !isIndexing) ranIndexingCycle = true;
+    if (totalJobs > 0 && completedJobs >= totalJobs && !isIndexing) {
+      ranIndexingCycle = true;
+    }
+
     updateProgressDisplay();
   };
-  
+
   window.addEventListener('indexing-progress', progressHandler as EventListener);
   appRef.progressHandler = progressHandler;
+  appRef.clearDoneFlashTimer = clearDoneFlashTimer;
   
   const updateSearchButtonDisplay = () => {
     searchButton.innerHTML = /* html */ `
@@ -99,8 +245,7 @@ export function mountSearchBar(
   };
 
   updateSearchButtonDisplay();
-  titleElement.appendChild(searchButton);
+  titleElement.appendChild(searchWrapper);
-  titleElement.appendChild(progressContainer);
 
   // Listen for hotkey setting changes
   const handleStorageChange = (changes: any, area: string) => {
@@ -139,7 +284,12 @@ export function mountSearchBar(
   }
 }
 
-export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any; progressHandler?: any }) {
+export function cleanupSearchBar(appRef: {
+  current: any;
+  storageChangeHandler?: any;
+  progressHandler?: any;
+  clearDoneFlashTimer?: () => void;
+}) {
   if (appRef.current) {
     try {
       unmount(appRef.current);
@@ -149,24 +299,30 @@ export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?:
     }
   }
 
+  try {
+    appRef.clearDoneFlashTimer?.();
+  } catch {
+    /* ignore */
+  }
+  appRef.clearDoneFlashTimer = undefined;
+
   // Remove progress event listener
   if (appRef.progressHandler) {
     window.removeEventListener('indexing-progress', appRef.progressHandler as EventListener);
     appRef.progressHandler = null;
   }
 
-  // Remove search trigger button
+  // Remove search trigger wrapper (which contains the button and progress UI)
-  const searchTrigger = document.querySelector(".search-trigger");
+  const searchWrapper = document.querySelector(".search-trigger-wrapper");
-  if (searchTrigger) {
+  if (searchWrapper) {
-    searchTrigger.remove();
+    searchWrapper.remove();
-  }
-  
-  // Remove progress container
-  const progressContainer = document.querySelector(".search-progress-container");
-  if (progressContainer) {
-    progressContainer.remove();
   }
 
+  // Defensive cleanup for older mounts that may have left the trigger or
+  // progress container as direct children of the topbar.
+  document.querySelector(".search-trigger")?.remove();
+  document.querySelector(".search-progress-container")?.remove();
+
   // Remove search root
   const searchRoot = document.querySelector("div[data-search-root]");
   if (searchRoot) {

src/plugins/built-in/globalSearch/src/core/styles.css

@@ -1,15 +1,72 @@
+/*
+ * Wrapper that owns the auto-margin so the whole search-trigger-and-progress
+ * group sits at the left of the SEQTA topbar. Previously, only the
+ * `.search-trigger` had `margin-right: auto`, which pushed the progress text
+ * all the way to the far right of the screen.
+ */
+.search-trigger-wrapper {
+  display: flex !important;
+  align-items: center;
+  gap: 12px;
+  margin-left: 10px;
+  margin-right: auto !important;
+  /* Allow the bar's bottom portion to peek out below the wrapper without
+     getting clipped by the topbar's flex line. */
+  overflow: visible;
+}
+
+/*
+ * Stacks the clickable row and the progress strip as one visual “chip”
+ * so the bar is flush under the button (no floating gap).
+ */
+.search-trigger-anchor {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  vertical-align: middle;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 3px 8px rgba(0, 0, 0, 0.12);
+}
+
+.dark .search-trigger-anchor {
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 3px 10px rgba(0, 0, 0, 0.45);
+}
+
+.search-trigger-anchor.is-indexing {
+  /* Very soft “rear card” edge — tweak opacity if SEQTA chrome is noisy */
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 3px 8px rgba(0, 0, 0, 0.14),
+    1px 3px 0 rgba(139, 92, 246, 0.14),
+    0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.dark .search-trigger-anchor.is-indexing {
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.05) inset,
+    0 4px 12px rgba(0, 0, 0, 0.5),
+    1px 3px 0 rgba(167, 139, 250, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
 .search-trigger {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: none;
   height: 32px;
-  margin-left: 10px;
+  border-radius: 0;
-  border-radius: 8px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
-  margin-right: auto !important;
+    background-color 0.2s ease,
+    border-color 0.2s ease;
   padding: 3px 12px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: none;
   backdrop-filter: blur(4px);
   user-select: none;
 
@@ -28,10 +85,12 @@
   }
 }
 
-/* Light mode styles */
+/* Light mode chip */
 .search-trigger {
-  background-color: rgba(248, 250, 252, 0.05) !important;
   border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  background-color: rgba(248, 250, 252, 0.94) !important;
   color: #555 !important;
 
   p {
@@ -44,8 +103,10 @@
 }
 
 .dark .search-trigger {
-  background-color: rgba(0, 0, 0, 0.03) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  background-color: rgba(24, 24, 27, 0.92) !important;
   color: #aaa !important;
 
   p {
@@ -57,7 +118,17 @@
   }
 }
 
+/*
+ * Idle: full pill rounding + closed bottom border on the anchor chip.
+ */
+.search-trigger-anchor:not(.is-indexing) .search-trigger {
+  border-radius: 8px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
 
+.dark .search-trigger-anchor:not(.is-indexing) .search-trigger {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
 .highlight {
   background-color: rgba(255, 213, 0, 0.3);
   font-weight: 500;
@@ -83,57 +154,139 @@
   animation: shimmer 2s infinite;
 }
 
-/* Progress indicator next to search trigger */
+/*
-.search-progress-container {
+ * Thin track flush under `.search-trigger` — same width as chip, shared
-  display: flex;
+ * `overflow:hidden` rounding on `.search-trigger-anchor`.
-  align-items: center;
+ */
-  gap: 8px;
-  margin-left: 8px;
-  min-width: 120px;
-  max-width: 200px;
-  height: 32px;
-}
-
 .search-progress-bar-wrapper {
-  flex: 1;
+  flex: none;
-  height: 4px;
+  height: 0;
-  background: rgba(0, 0, 0, 0.1);
+  min-height: 0;
-  border-radius: 2px;
+  border: none;
+  background: transparent;
+  border-radius: 0;
   overflow: hidden;
-  display: none;
+  opacity: 1;
-  min-width: 60px;
+  transform: none;
+  pointer-events: none;
+  transition: height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
 }
 
-.dark .search-progress-bar-wrapper {
+.search-progress-bar-wrapper.is-active {
-  background: rgba(255, 255, 255, 0.1);
+  height: 4px;
+}
+
+.search-progress-track {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: rgba(15, 23, 42, 0.08);
+}
+
+.dark .search-progress-track {
+  background: rgba(248, 250, 252, 0.1);
 }
 
 .search-progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6);
-  transition: width 0.3s ease-out;
-  width: 0%;
   position: relative;
-  border-radius: 2px;
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, #38bdf8, #2563eb);
+  transition:
+    width 0.35s cubic-bezier(0.2, 0.7, 0.35, 1),
+    background 0.25s ease;
+}
+
+.search-progress-bar-wrapper.is-rough-complete .search-progress-track {
+  background: rgba(185, 28, 28, 0.12);
+}
+
+.dark .search-progress-bar-wrapper.is-rough-complete .search-progress-track {
+  background: rgba(248, 113, 113, 0.12);
+}
+
+.search-progress-bar-wrapper.is-rough-complete .search-progress-bar {
+  background: linear-gradient(90deg, #f87171, #dc2626);
 }
 
 .search-progress-bar::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.28),
+    transparent
+  );
   animation: shimmer 2s infinite;
-  border-radius: 2px;
+}
+/*
+ * Progress label sits as a flex child immediately to the right of the
+ * search button (gap is provided by .search-trigger-wrapper). It's hidden
+ * by default and fades in once an indexing pass is active.
+ */
+.search-progress-text {
+  display: block;
+  font-size: 12px;
+  color: #475569;
+  white-space: nowrap;
+  font-weight: 500;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease, color 0.25s ease;
+  pointer-events: none;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  flex: 0 0 auto;
+  align-self: center;
 }
 
-.search-progress-text {
+/* While indexing: same neutral label colour as default (only “Done!” is green). */
-  font-size: 11px;
+.search-progress-text.is-active {
-  color: #666;
+  opacity: 1;
-  white-space: nowrap;
+  transform: translateX(0);
-  display: none;
+  color: #475569;
-  font-weight: 500;
+}
+
+/* Completed pass — green text only here, not on the strip or chip */
+.search-progress-text.is-active.is-done-message {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #15803d !important;
+}
+
+.dark .search-progress-text.is-active.is-done-message {
+  color: #4ade80 !important;
+}
+
+/* After DONE_HOLD_MS, fade out before DOM teardown */
+.search-progress-text.is-active.is-fading-done {
+  opacity: 0;
+  transform: translateX(-4px);
+  transition:
+    opacity 0.5s ease,
+    transform 0.45s ease,
+    color 0.25s ease;
 }
 
 .dark .search-progress-text {
-  color: #999;
+  color: #cbd5e1;
+}
+
+.dark .search-progress-text.is-active {
+  color: #cbd5e1;
+}
+
+.search-progress-text.is-active.is-rough {
+  color: #b91c1c;
+}
+
+.dark .search-progress-text.is-active.is-rough {
+  color: #fca5a5;
 }

src/plugins/built-in/globalSearch/src/indexing/__fixtures__/seqtaResponses.ts

@@ -0,0 +1,161 @@
+/**
+ * Representative SEQTA response shapes captured from a real `/seqta/student/`
+ * session via the websiteskimmer recorder. These are static fixtures used
+ * by `selfTests.ts` to verify our extractors and the passive observer
+ * remain compatible with the upstream API as it evolves.
+ *
+ * NOTE: These fixtures are scrubbed of any secrets and reduced in size; the
+ * structure (keys, types, nesting) faithfully matches what SEQTA returns
+ * but the values are illustrative rather than real student data.
+ */
+
+export const subjectsListPayload = [
+  {
+    code: "2026S1",
+    description: "Sample Semester 1 timetable",
+    active: 1,
+    id: 77,
+    subjects: [
+      {
+        code: "ENGG1",
+        classunit: 29248,
+        description: "English GEN 1",
+        metaclass: 29611,
+        title: "English GEN 1",
+        programme: 3830,
+        marksbook_type: "numeric",
+      },
+      {
+        code: "MASA1",
+        classunit: 29247,
+        description: "Mathematics Specialist 1",
+        metaclass: 29610,
+        title: "Mathematics Specialist 1",
+        programme: 3831,
+        marksbook_type: "numeric",
+      },
+    ],
+  },
+];
+
+export const coursesPayload = {
+  c: "ENGG1#1",
+  t: "English GEN 1",
+  i: 3830,
+  m: 29611,
+  document:
+    '{"document":{"modules":[{"uuid":"1641cf87-ae08-4bcb-832d-d5709d84d0c5"}]}}',
+  w: [
+    [
+      { t: "", h: "", i: 248293, l: "", n: 0, o: "" },
+      {
+        t: "",
+        i: 248316,
+        l: '<p><a href="http://ed.ted.com/on/r80lnJL0#watch">http://ed.ted.com/on/r80lnJL0#watch</a></p>',
+        n: 1,
+        o: "",
+      },
+    ],
+    [{ t: "Lesson 2", h: "<h1>Module 2</h1>", i: 248294, l: "", n: 0, o: "" }],
+  ],
+};
+
+export const messagesListPayload = {
+  hasMore: false,
+  messages: [
+    {
+      date: "2026-04-29 04:26:25.075868+00",
+      attachments: false,
+      read: 1,
+      sender: "Jacob Johannesburg",
+      subject: "test",
+      sender_type: "student",
+      attachmentCount: 0,
+      id: 81469,
+      sender_id: 3111,
+    },
+  ],
+  ts: "2026-04-30 03:25:02.27900",
+};
+
+export const documentsPayload = [
+  {
+    docs: [
+      {
+        file: 49555,
+        filename: "School Glossary.docx",
+        size: "14931",
+        context_uuid: "3162189c-2052-4f83-ad83-a66c57460ea2",
+        mimetype:
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        created_date: "2021-08-04 12:55:55.102653+00",
+        title: "School Glossary",
+        uuid: "3162189c-2052-4f83-ad83-a66c57460ea2",
+        created_by: "537",
+      },
+    ],
+    id: 9,
+    category: "Document repository",
+  },
+];
+
+export const noticesPayload = [
+  {
+    id: 12345,
+    title: "Lunchtime sport tomorrow",
+    contents: "<p>Bring shoes.</p>",
+    staff: "Mr Coach",
+    staff_id: 246,
+    label: 9,
+    label_title: "All Students",
+    colour: "#ff5722",
+  },
+];
+
+export const portalsPayload = [
+  {
+    is_power_portal: false,
+    inherit_styles: true,
+    icon: "colour-cerulean",
+    id: 328,
+    label: "Mathletics",
+    priority: 20,
+    uuid: "9d20f40c-fdc9-4aa3-91f1-905d86e240c4",
+    url: "www.mathletics.com/",
+  },
+];
+
+export const folioListPayload = {
+  me: "Jacob Johannesburg",
+  list: [
+    {
+      student: "Jacob Johannesburg",
+      id: 203,
+      published: "2026-04-14 20:02:50",
+      title: "My folio",
+    },
+  ],
+};
+
+export const folioEntryPayload = {
+  forum: 478,
+  contents:
+    '[[embed:raw|<p>Some <strong>reflection</strong> text.</p>]] Plain trailing text.',
+  created: "2026-04-14 10:32:34.264641+00",
+  allow_comments: true,
+  author: { year: "Year 10", name: "Jacob Johannesburg", id: 3111 },
+  files: [],
+  id: 203,
+  published: "2026-04-14 20:02:50",
+  title: "My folio",
+  updated: "2026-04-14 10:32:50.696678+00",
+};
+
+/**
+ * Settings payload contains tenant-wide configuration including third-party
+ * URLs and API keys. The passive observer must NEVER index this route.
+ */
+export const settingsPayload = {
+  "global.dropbox.api.key": { value: "xxx-do-not-index" },
+  "global.ai.api.baseurl": { value: "https://example.com" },
+};

src/plugins/built-in/globalSearch/src/indexing/actions.ts

@@ -28,6 +28,40 @@ interface AssessmentMetadata {
 
 type ActionHandler<T = any> = (item: IndexItem & { metadata: T }) => void;
 
+/**
+ * Navigate to a SEQTA SPA hash route in the most reliable way available.
+ *
+ * Setting `location.hash` works when the destination module is already
+ * registered with SEQTA's hashchange router (as is the case for the
+ * existing `message`/`assessment` actions, which then poke at the live
+ * DOM). For navigations that switch to a module the SPA may not have
+ * loaded yet (courses, forums, folios, portals, documents, reports,
+ * goals, notices, ...) we instead assign through `location.href` against
+ * the canonical `${origin}/` base. The path stays `/`, so the browser
+ * still treats this as a hash-only change in practice — but if anything
+ * went sideways with the path, we get a clean reload that bootstraps the
+ * SPA fresh, which is far less surprising than a blank screen.
+ */
+function navigateToHashRoute(routeWithLeadingSlash: string): void {
+  const target = `${location.origin}/#?page=${routeWithLeadingSlash}`;
+  window.location.href = target;
+}
+
+function navigateInCurrentSeqtaApp(routeWithLeadingSlash: string): void {
+  window.location.hash = `#?page=${routeWithLeadingSlash}`;
+}
+
+/**
+ * Final-fallback hub when an item has no usable deep-link metadata.
+ *
+ * `/dashboard` is the standard SEQTA Learn landing page and is the
+ * destination the websiteskimmer recording captured for unknown routes.
+ * `/home` is BetterSEQTA-Plus's custom replacement which only renders
+ * after our content script has hooked the SPA — using it as a fallback
+ * from a fresh nav can produce a blank frame.
+ */
+const FALLBACK_ROUTE = "/dashboard";
+
 export const actionMap: Record<string, ActionHandler<any>> = {
   message: (async (item: IndexItem & { metadata: MessageMetadata }) => {
     window.location.hash = `#?page=/messages`;
@@ -81,32 +115,34 @@ export const actionMap: Record<string, ActionHandler<any>> = {
       }
     }
     
-    // Try to extract metadata values using multiple methods to handle XrayWrapper
+    // Try to extract metadata values using multiple methods to handle XrayWrapper.
+    // The metadata bag is intentionally typed loosely here because Firefox's
+    // XrayWrapper occasionally surfaces extra/casing-variant keys we still
+    // want to read defensively.
     const getMetadataValue = (key: string, altKey?: string): any => {
+      const bag = metadata as unknown as Record<string, any>;
       try {
-        // Try direct access first
+        const value = bag[key];
-        const value = metadata[key];
         if (value !== undefined && value !== null) {
           return value;
         }
         if (altKey) {
-          const altValue = metadata[altKey];
+          const altValue = bag[altKey];
           if (altValue !== undefined && altValue !== null) {
             return altValue;
           }
         }
-        // Try accessing via Object.keys iteration (works around XrayWrapper)
         try {
-          const keys = Object.keys(metadata);
+          const keys = Object.keys(bag);
           for (const k of keys) {
             if (k === key || k === altKey) {
-              const val = metadata[k];
+              const val = bag[k];
               if (val !== undefined && val !== null) {
                 return val;
               }
             }
           }
-        } catch (e) {
+        } catch {
           // Object.keys might fail on XrayWrapper, that's okay
         }
         return undefined;
@@ -189,14 +225,218 @@ export const actionMap: Record<string, ActionHandler<any>> = {
   }) as ActionHandler<any>,
 
   subjectassessment: ((item: IndexItem) => {
-    window.location.href = `/#?page=/assessments/${item.metadata.programme}:${item.metadata.subjectId}`;
+    navigateToHashRoute(
+      `/assessments/${item.metadata.programme}:${item.metadata.subjectId}`,
+    );
   }) as ActionHandler<any>,
 
   subjectcourse: ((item: IndexItem) => {
-    window.location.href = `/#?page=/courses/${item.metadata.programme}:${item.metadata.subjectId}`;
+    navigateToHashRoute(
+      `/courses/${item.metadata.programme}:${item.metadata.subjectId}`,
+    );
   }) as ActionHandler<any>,
 
   forum: ((item: IndexItem) => {
-    window.location.href = `/#?page=/forums/${item.metadata.forumId}`;
+    navigateToHashRoute(`/forums/${item.metadata.forumId}`);
+  }) as ActionHandler<any>,
+
+  course: ((item: IndexItem) => {
+    const programme = item.metadata?.programme;
+    const metaclass = item.metadata?.metaclass ?? item.metadata?.subjectId;
+    if (programme !== undefined && metaclass !== undefined) {
+      navigateToHashRoute(`/courses/${programme}:${metaclass}`);
+      return;
+    }
+    if (item.metadata?.route) {
+      navigateToHashRoute(String(item.metadata.route));
+      return;
+    }
+    navigateToHashRoute(FALLBACK_ROUTE);
+  }) as ActionHandler<any>,
+
+  notice: ((_item: IndexItem) => {
+    // SEQTA's notices route doesn't honour `&date=` from the hash, so just
+    // open the listing.
+    navigateToHashRoute("/notices");
+  }) as ActionHandler<any>,
+
+  document: ((_item: IndexItem) => {
+    // We don't trigger downloads automatically: opening the documents page
+    // gives users full SEQTA controls (preview, download, share) without
+    // needing the JWT-stamped streaming URL we deliberately avoid storing.
+    navigateToHashRoute("/documents");
+  }) as ActionHandler<any>,
+
+  folio: ((_item: IndexItem) => {
+    // SEQTA's folio SPA does not expose a per-id route; the previous
+    // `?page=/folios/read?id=N` shape contained a literal `?` inside the
+    // `page` query value and was unmatchable, which sent users to the
+    // dashboard. Always land on the read view and let the user pick.
+    navigateToHashRoute("/folios/read");
+  }) as ActionHandler<any>,
+
+  portal: ((item: IndexItem) => {
+    // SEQTA renders portals via the in-app viewer at `?page=/portals/<uuid>`
+    // (verified via the websiteskimmer capture). Prefer that so SSO/headers
+    // are preserved; only pop the external URL as a fallback if we don't
+    // have a UUID; final fallback to the dashboard rather than blanking.
+    const uuid = item.metadata?.portalUuid;
+    if (typeof uuid === "string" && uuid) {
+      navigateToHashRoute(`/portals/${uuid}`);
+      return;
+    }
+    const url = item.metadata?.url;
+    if (typeof url === "string" && url) {
+      window.open(url, "_blank", "noopener,noreferrer");
+      return;
+    }
+    navigateToHashRoute(FALLBACK_ROUTE);
+  }) as ActionHandler<any>,
+
+  report: ((_item: IndexItem) => {
+    navigateToHashRoute("/reports");
+  }) as ActionHandler<any>,
+
+  goal: ((item: IndexItem) => {
+    const year = item.metadata?.year;
+    if (year !== undefined) {
+      navigateToHashRoute(`/goals/${year}`);
+    } else {
+      navigateToHashRoute("/goals");
+    }
+  }) as ActionHandler<any>,
+
+  /**
+   * Routes for passively-captured items.
+   *
+   * The passive observer captures whatever `/seqta/student/...` JSON the
+   * page is fetching, so we can't trust a single category to imply a
+   * single SEQTA SPA route. Instead, derive the destination from the API
+   * route the entity came from, augmented with entity-shaped hints
+   * (programme/metaclass/year/uuid/...) that the observer hoists into
+   * metadata. We never replay the original POST: actions are user-driven
+   * and must stay safe even though the observer's own denylist excludes
+   * `save/*` and friends.
+   */
+  passive: ((item: IndexItem) => {
+    const md = (item.metadata ?? {}) as Record<string, unknown>;
+    const route = typeof md.route === "string" ? (md.route as string) : "";
+    const sourcePage =
+      typeof md.sourcePage === "string" ? (md.sourcePage as string) : "";
+    const routeParts = route
+      .replace(/^\/seqta\/student\/?/, "")
+      .replace(/^load\//, "")
+      .split("/")
+      .filter(Boolean)
+      .map((part) => part.toLowerCase());
+    const tail = routeParts[0] ?? "";
+    const child = routeParts[1] ?? "";
+
+    const num = (key: string): number | undefined => {
+      const value = md[key];
+      if (typeof value === "number" && Number.isFinite(value)) return value;
+      if (typeof value === "string" && value && Number.isFinite(Number(value))) {
+        return Number(value);
+      }
+      return undefined;
+    };
+    const str = (key: string): string | undefined => {
+      const value = md[key];
+      return typeof value === "string" && value ? value : undefined;
+    };
+
+    const programme = num("programme") ?? num("programmeId") ?? num("programmeID");
+    const metaclass =
+      num("metaclass") ?? num("metaclassId") ?? num("metaclassID");
+    const portalUuid = str("portalUuid") ?? str("uuid");
+    const forumId = num("forumId") ?? num("forum");
+    const year = num("year");
+    const assessmentId =
+      num("assessmentId") ?? num("assessmentID") ?? num("id");
+    const messageId = num("messageId");
+
+    if (sourcePage === "/messages") {
+      navigateInCurrentSeqtaApp("/messages");
+      return;
+    }
+
+    switch (tail) {
+      case "courses":
+        if (programme !== undefined && metaclass !== undefined) {
+          navigateToHashRoute(`/courses/${programme}:${metaclass}`);
+          return;
+        }
+        break;
+      case "assessments":
+        if (programme !== undefined && metaclass !== undefined) {
+          const itemSuffix =
+            assessmentId !== undefined ? `&item=${assessmentId}` : "";
+          navigateToHashRoute(
+            `/assessments/${programme}:${metaclass}${itemSuffix}`,
+          );
+          return;
+        }
+        if (assessmentId !== undefined) {
+          navigateToHashRoute(`/assessments/upcoming&item=${assessmentId}`);
+          return;
+        }
+        navigateToHashRoute("/assessments/upcoming");
+        return;
+      case "forums":
+      case "forum":
+        if (forumId !== undefined) {
+          navigateToHashRoute(`/forums/${forumId}`);
+          return;
+        }
+        break;
+      case "portals":
+      case "portal":
+        if (portalUuid) {
+          navigateToHashRoute(`/portals/${portalUuid}`);
+          return;
+        }
+        break;
+      case "goals":
+      case "goal":
+        navigateToHashRoute(year !== undefined ? `/goals/${year}` : "/goals");
+        return;
+      case "folio":
+      case "folios":
+        navigateToHashRoute("/folios/read");
+        return;
+      case "notices":
+      case "notice":
+        navigateToHashRoute("/notices");
+        return;
+      case "documents":
+      case "document":
+        navigateToHashRoute("/documents");
+        return;
+      case "reports":
+      case "report":
+        navigateToHashRoute("/reports");
+        return;
+      case "messages":
+      case "message":
+        // `/seqta/student/load/message/people` and related endpoints are
+        // only meaningful while SEQTA's message module is mounted. Use the
+        // same live hash navigation as the real message action instead of
+        // forcing a fresh bootstrap, which can drop back to dashboard for
+        // context-only endpoints.
+        void messageId; // noqa — preserved for future deep-select work
+        navigateInCurrentSeqtaApp("/messages");
+        return;
+      case "people":
+        if (route.includes("/load/message/people") || child === "people") {
+          navigateInCurrentSeqtaApp("/messages");
+          return;
+        }
+        break;
+      case "timetable":
+        navigateToHashRoute("/timetable");
+        return;
+    }
+
+    navigateToHashRoute(FALLBACK_ROUTE);
   }) as ActionHandler<any>,
 };

src/plugins/built-in/globalSearch/src/indexing/api.ts

@@ -0,0 +1,386 @@
+import { delay } from "@/seqta/utils/delay";
+
+/**
+ * Shared SEQTA HTTP layer used by every indexing job.
+ *
+ * - All requests are same-origin POSTs against `/seqta/student/...` with
+ *   `credentials: "include"` so they inherit the user's existing session.
+ * - Responses are parsed as JSON and lightly validated (status === "200" and
+ *   payload present, mirroring the SEQTA convention).
+ * - Failures are retried with exponential backoff up to a configurable limit.
+ * - A simple per-route concurrency / spacing limiter prevents heavy jobs (e.g.
+ *   per-subject course crawls) from hammering SEQTA.
+ */
+
+export interface SeqtaResponse<T = any> {
+  payload: T;
+  status: string;
+}
+
+export interface SeqtaFetchOptions {
+  /** Defaults to "POST". */
+  method?: "POST" | "GET";
+  /** Maximum number of retries for transient failures (default 2). */
+  retries?: number;
+  /** Initial backoff delay in ms (default 200). */
+  baseDelayMs?: number;
+  /** Hard cap on total request time in ms (default 20s). */
+  timeoutMs?: number;
+  /** AbortSignal for cancellation. */
+  signal?: AbortSignal;
+  /** Skip the routing limiter (rare; only for already-throttled callers). */
+  skipLimiter?: boolean;
+}
+
+const DEFAULT_RETRIES = 2;
+const DEFAULT_BASE_DELAY = 200;
+const DEFAULT_TIMEOUT = 20_000;
+
+/* ------------------------------------------------------------------ */
+/*                              limiter                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Caps concurrent in-flight requests per normalized SEQTA route. Indexing
+ * jobs often fan out (e.g. one /load/courses per subject); we don't want them
+ * sending dozens of requests in parallel.
+ */
+class RouteLimiter {
+  private inFlight = new Map<string, number>();
+  private waiters = new Map<string, Array<() => void>>();
+  private readonly maxConcurrent: number;
+
+  constructor(maxConcurrent = 4) {
+    this.maxConcurrent = maxConcurrent;
+  }
+
+  async acquire(route: string): Promise<() => void> {
+    const current = this.inFlight.get(route) ?? 0;
+    if (current < this.maxConcurrent) {
+      this.inFlight.set(route, current + 1);
+      return () => this.release(route);
+    }
+
+    return new Promise((resolve) => {
+      const queue = this.waiters.get(route) ?? [];
+      queue.push(() => {
+        this.inFlight.set(route, (this.inFlight.get(route) ?? 0) + 1);
+        resolve(() => this.release(route));
+      });
+      this.waiters.set(route, queue);
+    });
+  }
+
+  private release(route: string) {
+    const next = (this.inFlight.get(route) ?? 1) - 1;
+    if (next <= 0) {
+      this.inFlight.delete(route);
+    } else {
+      this.inFlight.set(route, next);
+    }
+    const queue = this.waiters.get(route);
+    if (queue && queue.length > 0) {
+      const wake = queue.shift()!;
+      if (queue.length === 0) this.waiters.delete(route);
+      wake();
+    }
+  }
+}
+
+const routeLimiter = new RouteLimiter(4);
+
+/* ------------------------------------------------------------------ */
+/*                       route normalization                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Strips the volatile anti-replay query token (e.g. `?mokx3qef`) so we can
+ * key caches and limiters off the canonical route.
+ */
+export function normalizeSeqtaPath(url: string): string {
+  try {
+    const parsed = new URL(url, location.origin);
+    // SEQTA appends a single random query token like `?mokx3qef`. Drop the
+    // entire query string so canonicalization is robust.
+    return parsed.pathname;
+  } catch {
+    // Fallback for already-relative URLs.
+    return url.split("?")[0];
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*                           sensitive routes                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Routes whose responses must never be indexed because they contain
+ * credentials, secrets, JWTs, or arbitrary configuration blobs.
+ */
+const SENSITIVE_PATH_PATTERNS: RegExp[] = [
+  /\/seqta\/student\/login(\b|\/)/i,
+  /\/seqta\/student\/save\//i,
+  /\/seqta\/student\/load\/settings(\b|\/)/i,
+  /\/seqta\/student\/load\/prefs(\b|\/)/i,
+  /\/seqta\/student\/heartbeat(\b|\/)/i,
+  /\/seqta\/student\/storage(\b|\/)/i,
+  /\/seqta\/student\/themes\//i,
+  /\/seqta\/student\/branding\//i,
+  /\/seqta\/student\/releasealert\//i,
+  /\/seqta\/student\/files\/stream(\b|\/)/i,
+  /\/seqta\/student\/load\/file(\b|\/)/i,
+  /\/seqta\/ta\/masquerade(\b|\/)/i,
+];
+
+export function isSensitiveSeqtaPath(path: string): boolean {
+  const normalized = normalizeSeqtaPath(path);
+  return SENSITIVE_PATH_PATTERNS.some((re) => re.test(normalized));
+}
+
+/* ------------------------------------------------------------------ */
+/*                     student / user identity                        */
+/* ------------------------------------------------------------------ */
+
+interface SeqtaUserInfo {
+  id?: number;
+  personUUID?: string;
+  username?: string;
+  [key: string]: unknown;
+}
+
+let cachedUserInfo: SeqtaUserInfo | null = null;
+let inflightUserInfo: Promise<SeqtaUserInfo | null> | null = null;
+
+/**
+ * Resolves the current SEQTA user identity by re-using the same `login`
+ * handshake that the host page performs. This is the canonical way to
+ * discover the active student id and avoids the historical hard-coded
+ * `student: 69` placeholder that was incorrect on every real instance.
+ *
+ * Failures are intentionally NOT cached — a transient login glitch on the
+ * very first call must not poison the cache for the lifetime of the page,
+ * because every subsequent indexing pass that needs the student id (e.g.
+ * the assignments job) would skip silently.
+ */
+export async function getCurrentUserInfo(): Promise<SeqtaUserInfo | null> {
+  if (cachedUserInfo) return cachedUserInfo;
+  if (inflightUserInfo) return inflightUserInfo;
+
+  inflightUserInfo = (async () => {
+    try {
+      const res = await fetch(`${location.origin}/seqta/student/login`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+        body: JSON.stringify({
+          mode: "normal",
+          query: null,
+          redirect_url: location.origin,
+        }),
+      });
+      if (!res.ok) return null;
+      const json = (await res.json()) as { payload?: SeqtaUserInfo };
+      const payload = json?.payload ?? null;
+      if (payload && typeof payload === "object") {
+        cachedUserInfo = payload;
+        return payload;
+      }
+      return null;
+    } catch (e) {
+      console.warn(
+        "[Global Search API] Failed to resolve current user info:",
+        e,
+      );
+      return null;
+    } finally {
+      inflightUserInfo = null;
+    }
+  })();
+
+  return inflightUserInfo;
+}
+
+/**
+ * Best-effort lookup of the active student id. Returns `undefined` when the
+ * value cannot be discovered (jobs should fall back gracefully rather than
+ * fabricating an id).
+ */
+export async function getCurrentStudentId(): Promise<number | undefined> {
+  const info = await getCurrentUserInfo();
+  const id = info?.id;
+  if (typeof id === "number" && Number.isFinite(id)) return id;
+  return undefined;
+}
+
+/* ------------------------------------------------------------------ */
+/*                            core fetch                              */
+/* ------------------------------------------------------------------ */
+
+class SeqtaApiError extends Error {
+  status: number;
+  route: string;
+  constructor(message: string, status: number, route: string) {
+    super(message);
+    this.name = "SeqtaApiError";
+    this.status = status;
+    this.route = route;
+  }
+}
+
+function isTransientError(err: unknown): boolean {
+  if (err instanceof SeqtaApiError) {
+    if (err.status === 0 || err.status >= 500) return true;
+    if (err.status === 429) return true;
+    return false;
+  }
+  if (err instanceof TypeError) return true;
+  if ((err as any)?.name === "AbortError") return false;
+  return true;
+}
+
+/**
+ * Sends a JSON POST against a SEQTA route and returns the parsed envelope.
+ *
+ * - Adds `credentials: "include"` so requests reuse the active session.
+ * - Sets `X-Requested-With: XMLHttpRequest` so SEQTA classifies the request
+ *   the same way as the first-party SPA (some routes 4xx without it).
+ * - Retries transient network/server errors with exponential backoff.
+ * - Validates that the response is JSON and has `status === "200"` (matches
+ *   the SEQTA convention; jobs that need raw payloads can pass `path` but
+ *   call `seqtaFetch` directly via the underlying API if they need to).
+ */
+export async function seqtaFetchJson<T = any>(
+  path: string,
+  body: Record<string, unknown> | undefined = {},
+  options: SeqtaFetchOptions = {},
+): Promise<SeqtaResponse<T>> {
+  const route = normalizeSeqtaPath(path);
+  const retries = Math.max(0, options.retries ?? DEFAULT_RETRIES);
+  const baseDelay = Math.max(50, options.baseDelayMs ?? DEFAULT_BASE_DELAY);
+  const timeoutMs = Math.max(1_000, options.timeoutMs ?? DEFAULT_TIMEOUT);
+
+  let release: (() => void) | null = null;
+  if (!options.skipLimiter) {
+    release = await routeLimiter.acquire(route);
+  }
+
+  try {
+    let attempt = 0;
+    let lastError: unknown = null;
+
+    while (attempt <= retries) {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), timeoutMs);
+
+      const onAbort = () => controller.abort();
+      if (options.signal) {
+        if (options.signal.aborted) controller.abort();
+        else options.signal.addEventListener("abort", onAbort, { once: true });
+      }
+
+      try {
+        const res = await fetch(`${location.origin}${route}`, {
+          method: options.method ?? "POST",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+            "X-Requested-With": "XMLHttpRequest",
+            Accept: "text/javascript, text/html, application/xml, text/xml, */*",
+          },
+          body: body === undefined ? undefined : JSON.stringify(body),
+          signal: controller.signal,
+        });
+
+        if (!res.ok) {
+          throw new SeqtaApiError(
+            `HTTP ${res.status} ${res.statusText} for ${route}`,
+            res.status,
+            route,
+          );
+        }
+
+        const rawJson = (await res.json()) as unknown;
+        if (!rawJson || typeof rawJson !== "object") {
+          throw new SeqtaApiError(
+            `Invalid SEQTA response (not a JSON object) for ${route}`,
+            res.status,
+            route,
+          );
+        }
+
+        // SEQTA's "envelope" convention is `{ status, payload }`, but in
+        // practice some endpoints — notably `/seqta/student/load/subjects`
+        // and `/seqta/student/assessment/list/*` — occasionally return
+        // either a bare array or an envelope with a non-"200" status.
+        // Strict validation here was historically silently killing the
+        // assignments + courses indexing pipelines when those endpoints
+        // returned a quirky shape, so we normalize permissively and let
+        // callers handle missing/empty payloads.
+        let json: SeqtaResponse<T>;
+        if (Array.isArray(rawJson)) {
+          json = { payload: rawJson as unknown as T, status: "200" };
+        } else {
+          const obj = rawJson as Record<string, unknown>;
+          const hasEnvelopeKey = "payload" in obj || "status" in obj;
+          if (hasEnvelopeKey) {
+            json = {
+              payload: ("payload" in obj ? obj.payload : undefined) as T,
+              status:
+                typeof obj.status === "string"
+                  ? obj.status
+                  : typeof obj.status === "number"
+                    ? String(obj.status)
+                    : "200",
+            };
+          } else {
+            json = { payload: rawJson as unknown as T, status: "200" };
+          }
+        }
+
+        if (json.status && json.status !== "200") {
+          console.warn(
+            `[Global Search API] Non-200 SEQTA status "${json.status}" for ${route} — returning payload anyway`,
+          );
+        }
+
+        return json;
+      } catch (err) {
+        lastError = err;
+        if (!isTransientError(err) || attempt === retries) {
+          throw err;
+        }
+        const wait = Math.min(5_000, baseDelay * Math.pow(2, attempt));
+        await delay(wait);
+        attempt++;
+      } finally {
+        clearTimeout(timer);
+        if (options.signal) options.signal.removeEventListener("abort", onAbort);
+      }
+    }
+
+    throw lastError ?? new Error(`seqtaFetchJson exhausted retries for ${route}`);
+  } finally {
+    if (release) release();
+  }
+}
+
+/**
+ * Convenience helper: fetch and unwrap `.payload` directly. Returns `null`
+ * on failure rather than throwing, so jobs can use the value optionally.
+ */
+export async function seqtaFetchPayload<T = any>(
+  path: string,
+  body: Record<string, unknown> | undefined = {},
+  options: SeqtaFetchOptions = {},
+): Promise<T | null> {
+  try {
+    const res = await seqtaFetchJson<T>(path, body, options);
+    return res.payload ?? null;
+  } catch (e) {
+    console.warn(
+      `[Global Search API] Request to ${normalizeSeqtaPath(path)} failed:`,
+      e,
+    );
+    return null;
+  }
+}

src/plugins/built-in/globalSearch/src/indexing/extract.ts

@@ -0,0 +1,303 @@
+import { htmlToPlainText } from "./utils";
+import type { IndexItem } from "./types";
+
+/**
+ * Safe extraction helpers used by both active SEQTA jobs and the passive
+ * network observer.
+ *
+ * The goal is to take arbitrary SEQTA JSON / embedded HTML fragments and
+ * derive concise, redacted, search-friendly text without ever indexing
+ * obvious credentials, tokens, JWTs, or large binary blobs.
+ */
+
+/* ------------------------------------------------------------------ */
+/*                          sensitive keys                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Field names whose values should never be indexed regardless of context.
+ * Matches SEQTA's frequently-used credential / config keys plus generic
+ * security-related names. Comparison is case-insensitive and matches both
+ * the full key and any sub-string fragments (so `client_secret`,
+ * `apiKey`, `dropboxKey` all hit).
+ */
+const SENSITIVE_KEY_FRAGMENTS: readonly string[] = [
+  "password",
+  "passwd",
+  "pwd",
+  "secret",
+  "token",
+  "jwt",
+  "session",
+  "cookie",
+  "auth",
+  "apikey",
+  "api_key",
+  "clientid",
+  "client_id",
+  "clientsecret",
+  "client_secret",
+  "credential",
+  "private",
+  "salt",
+  "hash",
+  "csrf",
+  "x-api",
+  "bearer",
+  "dropbox",
+  "oauth",
+  "signature",
+];
+
+export function isSensitiveKey(key: string): boolean {
+  if (!key) return false;
+  const lower = key.toLowerCase();
+  return SENSITIVE_KEY_FRAGMENTS.some((frag) => lower.includes(frag));
+}
+
+/**
+ * Returns true if the supplied scalar value looks credential-shaped: a long
+ * hex/base64-like blob that doesn't decode to readable text. This catches
+ * arbitrary tokens that don't have a clear field-name signal.
+ */
+export function looksLikeSecretValue(value: unknown): boolean {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (trimmed.length < 32) return false;
+
+  // Long contiguous base64 / hex with no whitespace and no humanish punctuation.
+  if (/\s/.test(trimmed)) return false;
+  if (/^[A-Za-z0-9+/=._-]{32,}$/.test(trimmed) && !/[.,!?]/.test(trimmed)) {
+    // Reject obvious URLs and UUIDs (they're useful and not secret).
+    if (/^https?:\/\//i.test(trimmed)) return false;
+    if (
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
+        trimmed,
+      )
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  // JWT detection: three base64url segments separated by dots.
+  if (/^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+$/.test(trimmed)) {
+    return true;
+  }
+
+  return false;
+}
+
+/* ------------------------------------------------------------------ */
+/*                          text extraction                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Recursively pulls human-readable text out of an arbitrary JSON value.
+ *
+ * - HTML strings are passed through `htmlToPlainText`.
+ * - Sensitive keys and secret-shaped values are skipped.
+ * - Long blobs are truncated to keep the index lean.
+ * - Arrays and objects are walked; depth is bounded to avoid pathological
+ *   structures.
+ */
+export interface ExtractTextOptions {
+  /** Hard cap on combined characters across the walk (default 4000). */
+  maxChars?: number;
+  /** Maximum recursion depth (default 6). */
+  maxDepth?: number;
+  /** Maximum array length to traverse (default 200). */
+  maxArrayItems?: number;
+  /** Skip individual string values longer than this (default 8000). */
+  maxStringLength?: number;
+}
+
+const DEFAULT_EXTRACT_OPTIONS: Required<ExtractTextOptions> = {
+  maxChars: 4000,
+  maxDepth: 6,
+  maxArrayItems: 200,
+  maxStringLength: 8000,
+};
+
+export function extractTextFromValue(
+  value: unknown,
+  options: ExtractTextOptions = {},
+): string {
+  const opts = { ...DEFAULT_EXTRACT_OPTIONS, ...options };
+  const parts: string[] = [];
+  let remaining = opts.maxChars;
+
+  const push = (text: string) => {
+    if (!text || remaining <= 0) return;
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    const slice = trimmed.length > remaining ? trimmed.slice(0, remaining) : trimmed;
+    parts.push(slice);
+    remaining -= slice.length + 1;
+  };
+
+  const walk = (node: unknown, depth: number, parentKey: string | null) => {
+    if (remaining <= 0) return;
+    if (node === null || node === undefined) return;
+    if (parentKey && isSensitiveKey(parentKey)) return;
+
+    if (typeof node === "string") {
+      if (node.length > opts.maxStringLength) return;
+      if (looksLikeSecretValue(node)) return;
+      if (node.includes("<") && node.includes(">")) {
+        push(htmlToPlainText(node));
+      } else {
+        push(node);
+      }
+      return;
+    }
+
+    if (typeof node === "number" || typeof node === "boolean") {
+      // Numbers/booleans rarely contribute to search recall; skip to keep
+      // the index focused on text.
+      return;
+    }
+
+    if (depth >= opts.maxDepth) return;
+
+    if (Array.isArray(node)) {
+      const limit = Math.min(node.length, opts.maxArrayItems);
+      for (let i = 0; i < limit; i++) {
+        walk(node[i], depth + 1, parentKey);
+        if (remaining <= 0) return;
+      }
+      return;
+    }
+
+    if (typeof node === "object") {
+      for (const [key, child] of Object.entries(node as Record<string, unknown>)) {
+        if (remaining <= 0) return;
+        if (isSensitiveKey(key)) continue;
+        walk(child, depth + 1, key);
+      }
+    }
+  };
+
+  walk(value, 0, null);
+
+  return parts.join("\n").trim();
+}
+
+/* ------------------------------------------------------------------ */
+/*                         redacted clones                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Returns a deep clone of `value` with sensitive keys/values stripped. The
+ * passive observer uses this when persisting metadata so we never store
+ * raw tokens or settings blobs in IndexedDB.
+ */
+export function redactSensitive<T>(value: T, depth = 0): T {
+  if (value === null || value === undefined) return value;
+  if (depth >= 8) return value;
+
+  if (Array.isArray(value)) {
+    return value
+      .slice(0, 200)
+      .map((v) => redactSensitive(v, depth + 1)) as unknown as T;
+  }
+  if (typeof value === "object") {
+    const out: Record<string, unknown> = {};
+    for (const [key, child] of Object.entries(value as Record<string, unknown>)) {
+      if (isSensitiveKey(key)) continue;
+      if (typeof child === "string" && looksLikeSecretValue(child)) continue;
+      out[key] = redactSensitive(child, depth + 1);
+    }
+    return out as T;
+  }
+  if (typeof value === "string" && looksLikeSecretValue(value)) {
+    return "" as unknown as T;
+  }
+  return value;
+}
+
+/* ------------------------------------------------------------------ */
+/*                       title / id heuristics                        */
+/* ------------------------------------------------------------------ */
+
+const TITLE_KEYS = [
+  "title",
+  "subject",
+  "name",
+  "label",
+  "heading",
+  "displayName",
+  "filename",
+  "code",
+];
+
+const ID_KEYS = ["id", "uuid", "messageID", "assessmentID", "notificationID"];
+
+/**
+ * Best-effort title extraction: returns the first sensible string-valued
+ * field commonly used by SEQTA payloads. Falls back to an empty string when
+ * none are present.
+ */
+export function pickTitle(node: unknown, fallback = ""): string {
+  if (!node || typeof node !== "object") return fallback;
+  const obj = node as Record<string, unknown>;
+  for (const key of TITLE_KEYS) {
+    const v = obj[key];
+    if (typeof v === "string" && v.trim()) return v.trim();
+  }
+  return fallback;
+}
+
+export function pickId(node: unknown, fallback = ""): string {
+  if (!node || typeof node !== "object") return fallback;
+  const obj = node as Record<string, unknown>;
+  for (const key of ID_KEYS) {
+    const v = obj[key];
+    if (typeof v === "string" && v.trim()) return v.trim();
+    if (typeof v === "number" && Number.isFinite(v)) return String(v);
+  }
+  return fallback;
+}
+
+/* ------------------------------------------------------------------ */
+/*                         IndexItem builders                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Constructs an `IndexItem` from a raw entity, applying our standard
+ * extraction rules. Callers fill in the things that need domain knowledge
+ * (`category`, `actionId`, `metadata`, deep-link route hints) and we handle
+ * the boring text + redaction work.
+ */
+export function buildIndexItem(input: {
+  id: string;
+  text: string;
+  category: string;
+  rawForContent?: unknown;
+  contentOverride?: string;
+  metadata?: Record<string, unknown>;
+  actionId: string;
+  renderComponentId: string;
+  dateAdded?: number;
+  contentMaxChars?: number;
+}): IndexItem {
+  const content =
+    input.contentOverride !== undefined
+      ? input.contentOverride
+      : extractTextFromValue(input.rawForContent, {
+          maxChars: input.contentMaxChars ?? 1500,
+        });
+
+  const metadata = input.metadata ? redactSensitive(input.metadata) : {};
+
+  return {
+    id: input.id,
+    text: input.text,
+    category: input.category,
+    content,
+    dateAdded: input.dateAdded ?? Date.now(),
+    metadata,
+    actionId: input.actionId,
+    renderComponentId: input.renderComponentId,
+  };
+}

src/plugins/built-in/globalSearch/src/indexing/indexer.ts

@@ -1,10 +1,11 @@
-import { clear, get, getAll, put, remove } from "./db";
+import { clear, get, getAll, put, remove, resetDatabase } from "./db";
 import { jobs } from "./jobs";
 import { renderComponentMap } from "./renderComponents";
 import type { IndexItem, Job, JobContext } from "./types";
 import { VectorWorkerManager } from "./worker/vectorWorkerManager";
 import { loadDynamicItems } from "../utils/dynamicItems";
 import { getVectorizedItemIds } from "./utils";
+import { INDEX_SCHEMA_VERSION, SCHEMA_VERSION_KEY } from "./schemaVersion";
 
 const META_STORE = "meta";
 const LOCK_KEY = "bsq-indexer-lock";
@@ -12,6 +13,50 @@ const HEARTBEAT_INTERVAL = 10000;
 const LOCK_TIMEOUT = 20000;
 const LOCK_ACQUIRE_TIMEOUT = 5000;
 
+let schemaCheckPromise: Promise<void> | null = null;
+
+async function ensureSchemaCurrent(): Promise<void> {
+  if (schemaCheckPromise) return schemaCheckPromise;
+  schemaCheckPromise = (async () => {
+    let storedRaw: string | null = null;
+    try {
+      storedRaw = localStorage.getItem(SCHEMA_VERSION_KEY);
+    } catch {
+      return;
+    }
+    const stored = storedRaw ? parseInt(storedRaw, 10) : 0;
+    if (stored === INDEX_SCHEMA_VERSION) return;
+
+    console.warn(
+      `[Indexer] Schema version changed (${stored} -> ${INDEX_SCHEMA_VERSION}); resetting structured + vector indexes.`,
+    );
+
+    try {
+      await resetDatabase();
+    } catch (e) {
+      console.warn("[Indexer] Failed to reset structured database:", e);
+    }
+
+    try {
+      await new Promise<void>((resolve) => {
+        const req = indexedDB.deleteDatabase("embeddiaDB");
+        req.onsuccess = () => resolve();
+        req.onerror = () => resolve();
+        req.onblocked = () => resolve();
+      });
+    } catch (e) {
+      console.warn("[Indexer] Failed to reset embeddiaDB:", e);
+    }
+
+    try {
+      localStorage.setItem(SCHEMA_VERSION_KEY, String(INDEX_SCHEMA_VERSION));
+    } catch {
+      /* ignore */
+    }
+  })();
+  return schemaCheckPromise;
+}
+
 /* ─────────── Progress‑meta helpers ─────────── */
 async function loadProgress<T = any>(jobId: string): Promise<T | undefined> {
   const rec = await get(META_STORE, `progress:${jobId}`);
@@ -162,6 +207,8 @@ export async function loadAllStoredItems(): Promise<IndexItem[]> {
 }
 
 export async function runIndexing(): Promise<void> {
+  await ensureSchemaCurrent();
+
   if (!(await acquireLock())) {
     console.debug(
       "%c[Indexer] Could not acquire lock - another tab is indexing or this tab is already indexing",
@@ -178,8 +225,6 @@ export async function runIndexing(): Promise<void> {
   const totalSteps = jobIds.length + 1;
   dispatchProgress(completedJobs, totalSteps, true, "Starting jobs");
 
-  let hasStreamingJobs = false;
-
   for (const jobId of jobIds) {
     dispatchProgress(
       completedJobs,
@@ -255,10 +300,6 @@ export async function runIndexing(): Promise<void> {
       await setStoredItems(merged);
       await updateLastRunMeta(jobId);
 
-      if (jobId === 'messages' || jobId === 'notifications') {
-        hasStreamingJobs = true;
-      }
-
       console.debug(
         `%c[Indexer] ${job.label}: ${newItemsRaw.length} new items reported by run, ${merged.length} total items now in '${jobId}' store.`,
         "color: #00c46f",

src/plugins/built-in/globalSearch/src/indexing/jobs.ts

@@ -4,6 +4,14 @@ import { notificationsJob } from "./jobs/notifications";
 import { forumsJob } from "./jobs/forums";
 import { subjectsJob } from "./jobs/subjects";
 import { assignmentsJob } from "./jobs/assignments";
+import { coursesJob } from "./jobs/courses";
+import { noticesJob } from "./jobs/notices";
+import { documentsJob } from "./jobs/documents";
+import { folioJob } from "./jobs/folio";
+import { portalsJob } from "./jobs/portals";
+import { reportsJob } from "./jobs/reports";
+import { goalsJob } from "./jobs/goals";
+import { passiveJob } from "./jobs/passive";
 
 export const jobs: Record<string, Job> = {
   messages: messagesJob,
@@ -11,4 +19,12 @@ export const jobs: Record<string, Job> = {
   forums: forumsJob,
   subjects: subjectsJob,
   assignments: assignmentsJob,
+  courses: coursesJob,
+  notices: noticesJob,
+  documents: documentsJob,
+  folio: folioJob,
+  portals: portalsJob,
+  reports: reportsJob,
+  goals: goalsJob,
+  passive: passiveJob,
 };

src/plugins/built-in/globalSearch/src/indexing/jobs/assignments.ts

@@ -37,7 +37,7 @@ const fetchSubjects = async () => {
 
 const fetchPastAssessments = async (student: number = 69, subjects: any[]) => {
   const map: Record<number, any> = {};
-  
+
   // Fetch past assessments for all subjects in parallel (like assessmentsOverview does)
   // This is much faster than sequential fetching
   await Promise.all(
@@ -49,7 +49,7 @@ const fetchPastAssessments = async (student: number = 69, subjects: any[]) => {
           metaclass: subject.metaclass,
           student,
         });
-        
+
         // Past assessments API can return data in payload.tasks OR payload.pending (or both)
         // Based on analytics.rs fetch_past_assessments, we need to check both arrays
         const processAssessment = (assessment: any) => {
@@ -65,13 +65,13 @@ const fetchPastAssessments = async (student: number = 69, subjects: any[]) => {
             };
           }
         };
-        
+
         // Match analytics.rs: Check both pending and tasks arrays
         // Check for pending array first (matching Rust code order)
         if (res.payload?.pending && Array.isArray(res.payload.pending)) {
           res.payload.pending.forEach(processAssessment);
         }
-        
+
         // Check for tasks array
         if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
           res.payload.tasks.forEach(processAssessment);
@@ -81,7 +81,7 @@ const fetchPastAssessments = async (student: number = 69, subjects: any[]) => {
       }
     })
   );
-  
+
   return Object.values(map);
 };
 
@@ -127,7 +127,7 @@ export const assignmentsJob: Job = {
     const existingIds = new Set(existingItems.map((i) => i.id));
 
     const student = 69; // TODO: Get from context if available
-    
+
     console.debug("[Assignments job] Starting indexing - fetching all assessments (upcoming and past)...");
     
     // Fetch data in parallel

src/plugins/built-in/globalSearch/src/indexing/jobs/courses.ts

@@ -0,0 +1,179 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+import { buildIndexItem } from "../extract";
+import { htmlToPlainText } from "../utils";
+
+/**
+ * Indexes per-subject course content from `/seqta/student/load/courses`.
+ *
+ * The course payload contains the lesson grid in `w[][]` where each cell's
+ * `l` field is a (possibly empty) HTML snippet authored by teachers. We
+ * concatenate these into searchable text per course, plus the course title
+ * and code from `t` / `c`. Embedded files referenced via TED/SEQTA URLs are
+ * preserved as plain-text links so users can find them by URL fragment.
+ */
+
+interface SubjectsListPayload {
+  code: string;
+  description?: string;
+  active: number;
+  subjects: Array<{
+    code: string;
+    title?: string;
+    description?: string;
+    metaclass: number;
+    programme: number;
+  }>;
+}
+
+interface CoursePayload {
+  c?: string;
+  t?: string;
+  i?: number;
+  m?: number;
+  w?: Array<Array<{ l?: string; h?: string; t?: string; o?: string; i?: number }>>;
+  document?: string;
+}
+
+const fetchActiveSubjects = async (): Promise<
+  SubjectsListPayload["subjects"]
+> => {
+  const payload = await seqtaFetchPayload<SubjectsListPayload[]>(
+    "/seqta/student/load/subjects",
+    {},
+  );
+  if (!Array.isArray(payload)) return [];
+
+  const out: SubjectsListPayload["subjects"] = [];
+  for (const semester of payload) {
+    if (!semester || !Array.isArray(semester.subjects)) continue;
+    if (semester.active !== 1) continue;
+    for (const subject of semester.subjects) {
+      if (
+        subject &&
+        Number.isFinite(subject.programme) &&
+        Number.isFinite(subject.metaclass)
+      ) {
+        out.push(subject);
+      }
+    }
+  }
+  return out;
+};
+
+function flattenLessonHtml(payload: CoursePayload): string {
+  if (!Array.isArray(payload.w)) return "";
+  const fragments: string[] = [];
+  for (const row of payload.w) {
+    if (!Array.isArray(row)) continue;
+    for (const cell of row) {
+      if (!cell) continue;
+      if (typeof cell.l === "string" && cell.l.trim()) {
+        fragments.push(cell.l);
+      }
+      if (typeof cell.h === "string" && cell.h.trim()) {
+        fragments.push(cell.h);
+      }
+      if (typeof cell.t === "string" && cell.t.trim()) {
+        fragments.push(cell.t);
+      }
+      if (typeof cell.o === "string" && cell.o.trim()) {
+        fragments.push(cell.o);
+      }
+    }
+  }
+  if (fragments.length === 0) return "";
+  return htmlToPlainText(fragments.join("\n"));
+}
+
+export const coursesJob: Job = {
+  id: "courses",
+  label: "Courses",
+  renderComponentId: "course",
+  // Course content rarely changes minute-to-minute but does evolve per term.
+  // Refresh once per day (after pageLoad cool-down) to keep new lessons
+  // discoverable without hammering SEQTA.
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 },
+
+  boostCriteria: (item, searchTerm) => {
+    if (!searchTerm) return -50;
+    let score = 0;
+    if (item.metadata?.subjectCode) score += 0.05;
+    if (item.metadata?.isActive) score += 0.02;
+    return score;
+  },
+
+  run: async (_ctx) => {
+    const subjects = await fetchActiveSubjects();
+    if (subjects.length === 0) {
+      console.debug("[Courses job] No active subjects discovered.");
+      return [];
+    }
+
+    const items: IndexItem[] = [];
+    const seenIds = new Set<string>();
+
+    // Sequential per-subject fetch keeps load on SEQTA bounded; the shared
+    // API layer also limits concurrency per route as a defense in depth.
+    for (const subject of subjects) {
+      const id = `course-${subject.programme}-${subject.metaclass}`;
+      if (seenIds.has(id)) continue;
+      seenIds.add(id);
+
+      const payload = await seqtaFetchPayload<CoursePayload>(
+        "/seqta/student/load/courses",
+        {
+          programme: String(subject.programme),
+          metaclass: String(subject.metaclass),
+        },
+      );
+
+      if (!payload) continue;
+
+      const title =
+        (typeof payload.t === "string" && payload.t.trim()) ||
+        subject.title ||
+        subject.description ||
+        subject.code ||
+        "Course";
+
+      const lessonText = flattenLessonHtml(payload);
+      const courseCode =
+        (typeof payload.c === "string" && payload.c.trim()) || subject.code;
+
+      const summary = [courseCode, lessonText]
+        .filter((s) => s && s.length > 0)
+        .join("\n")
+        .slice(0, 4000);
+
+      items.push(
+        buildIndexItem({
+          id,
+          text: title,
+          category: "courses",
+          contentOverride: summary || `Course content for ${title}`,
+          metadata: {
+            subjectCode: subject.code,
+            subjectName: subject.title ?? title,
+            programme: subject.programme,
+            metaclass: subject.metaclass,
+            courseCode,
+            isActive: true,
+            route: `/courses/${subject.programme}:${subject.metaclass}`,
+            entityType: "course",
+            icon: "\ueb4d",
+          },
+          actionId: "course",
+          renderComponentId: "course",
+        }),
+      );
+    }
+
+    console.debug(
+      `[Courses job] Indexed ${items.length} courses across ${subjects.length} subjects.`,
+    );
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/documents.ts

@@ -0,0 +1,139 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+
+/**
+ * Indexes file metadata from `/seqta/student/load/documents`.
+ *
+ * Each top-level entry is a category containing one or more documents
+ * (`docs[]`). We capture the human-readable title, filename, mimetype, and
+ * stable UUID/category for every doc, but never download or index the
+ * binary content itself - the document streaming endpoint uses one-time
+ * JWTs that are unsafe to persist or replay.
+ */
+
+interface DocumentEntry {
+  file?: number | string;
+  filename?: string;
+  size?: string | number;
+  context_uuid?: string;
+  mimetype?: string;
+  created_date?: string;
+  title?: string;
+  uuid?: string;
+  created_by?: string;
+}
+
+interface DocumentCategory {
+  id: number | string;
+  category: string;
+  colour?: string;
+  docs: DocumentEntry[];
+}
+
+function prettySize(size: string | number | undefined): string | null {
+  if (size === undefined || size === null) return null;
+  const bytes = typeof size === "string" ? parseInt(size, 10) : size;
+  if (!Number.isFinite(bytes) || bytes <= 0) return null;
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let i = 0;
+  while (value >= 1024 && i < units.length - 1) {
+    value /= 1024;
+    i++;
+  }
+  return `${value.toFixed(value < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
+}
+
+function describeMime(mime: string | undefined): string | null {
+  if (!mime) return null;
+  if (mime.startsWith("application/pdf")) return "PDF";
+  if (mime.includes("officedocument.wordprocessingml")) return "Word";
+  if (mime.includes("officedocument.spreadsheetml")) return "Excel";
+  if (mime.includes("officedocument.presentationml")) return "PowerPoint";
+  if (mime.startsWith("image/")) return "Image";
+  if (mime.startsWith("video/")) return "Video";
+  if (mime.startsWith("audio/")) return "Audio";
+  return null;
+}
+
+export const documentsJob: Job = {
+  id: "documents",
+  label: "Documents",
+  renderComponentId: "document",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 12 }, // 12 hours
+
+  boostCriteria: (_item, searchTerm) => {
+    if (!searchTerm) return -20;
+    return 0;
+  },
+
+  run: async (_ctx) => {
+    const payload = await seqtaFetchPayload<DocumentCategory[] | null>(
+      "/seqta/student/load/documents",
+      {},
+    );
+    if (!Array.isArray(payload)) return [];
+
+    const items: IndexItem[] = [];
+    const seen = new Set<string>();
+
+    for (const category of payload) {
+      if (!category || !Array.isArray(category.docs)) continue;
+      for (const doc of category.docs) {
+        const uuid = doc.uuid || doc.context_uuid;
+        if (!uuid && !doc.file) continue;
+        const id = `document-${uuid ?? doc.file}`;
+        if (seen.has(id)) continue;
+        seen.add(id);
+
+        const title =
+          doc.title?.trim() ||
+          doc.filename?.trim() ||
+          `Document ${doc.file ?? uuid}`;
+
+        const sizeText = prettySize(doc.size);
+        const mimeLabel = describeMime(doc.mimetype);
+
+        const contentParts: string[] = [];
+        if (doc.filename && doc.filename !== title) contentParts.push(doc.filename);
+        if (category.category) contentParts.push(`Category: ${category.category}`);
+        if (mimeLabel) contentParts.push(mimeLabel);
+        if (sizeText) contentParts.push(sizeText);
+        if (doc.created_date) contentParts.push(`Added ${doc.created_date}`);
+
+        const dateAdded = doc.created_date
+          ? new Date(doc.created_date).getTime() || Date.now()
+          : Date.now();
+
+        items.push({
+          id,
+          text: title,
+          category: "documents",
+          content: contentParts.join(" \u2022 "),
+          dateAdded,
+          metadata: {
+            documentUuid: uuid,
+            fileId: doc.file,
+            filename: doc.filename,
+            mimetype: doc.mimetype,
+            sizeBytes:
+              typeof doc.size === "string" ? parseInt(doc.size, 10) : doc.size,
+            categoryId: category.id,
+            categoryName: category.category,
+            createdDate: doc.created_date,
+            entityType: "document",
+            route: "/documents",
+            icon: "\ueb6f",
+          },
+          actionId: "document",
+          renderComponentId: "document",
+        });
+      }
+    }
+
+    console.debug(`[Documents job] Indexed ${items.length} document entries.`);
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/folio.ts

@@ -0,0 +1,134 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+import { htmlToPlainText } from "../utils";
+import { delay } from "@/seqta/utils/delay";
+
+/**
+ * Indexes student folio entries from `/seqta/student/folio`.
+ *
+ * The list mode returns `{ me, list: [{ id, title, published, student }] }`,
+ * and the load mode returns the full body via `{ contents, files, ... }`.
+ * Folio bodies frequently contain `[[embed:raw|<html>]]` blocks which we
+ * normalize to plain text before indexing - the htmlToPlainText sanitizer
+ * never executes scripts because it parses into an inert document.
+ */
+
+interface FolioListPayload {
+  me?: string;
+  list?: Array<{
+    id: number | string;
+    title?: string;
+    published?: string;
+    student?: string;
+  }>;
+}
+
+interface FolioEntryPayload {
+  forum?: number;
+  contents?: string;
+  created?: string;
+  allow_comments?: boolean;
+  author?: { name?: string; year?: string; id?: number };
+  files?: unknown[];
+  id?: number | string;
+  published?: string;
+  title?: string;
+  updated?: string;
+}
+
+const PER_ITEM_DELAY_MS = 80;
+
+function stripEmbedRaw(text: string): string {
+  if (!text) return "";
+  return text.replace(/\[\[embed:raw\|([\s\S]*?)\]\]/g, (_match, inner) => {
+    return htmlToPlainText(typeof inner === "string" ? inner : "");
+  });
+}
+
+export const folioJob: Job = {
+  id: "folio",
+  label: "Folio",
+  renderComponentId: "folio",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 },
+
+  boostCriteria: (_item, searchTerm) => {
+    if (!searchTerm) return -30;
+    return 0;
+  },
+
+  run: async (ctx) => {
+    const stored = await ctx.getStoredItems("folio");
+    const existing = new Map(stored.map((i) => [i.id, i]));
+
+    const list = await seqtaFetchPayload<FolioListPayload | null>(
+      "/seqta/student/folio",
+      { mode: "list", page: 0, filters: {} },
+    );
+    if (!list || !Array.isArray(list.list)) return [];
+
+    const items: IndexItem[] = [];
+    for (const entry of list.list) {
+      if (!entry || entry.id === undefined) continue;
+      const id = `folio-${entry.id}`;
+      const dateAdded = entry.published
+        ? new Date(entry.published).getTime() || Date.now()
+        : Date.now();
+
+      // If we already have this folio and the title hasn't changed, reuse
+      // the stored content instead of paying for another /folio?mode=load.
+      const existingItem = existing.get(id);
+      const titleChanged = existingItem && existingItem.text !== (entry.title ?? "");
+      if (existingItem && !titleChanged) {
+        items.push({
+          ...existingItem,
+          dateAdded,
+        });
+        continue;
+      }
+
+      try {
+        const detail = await seqtaFetchPayload<FolioEntryPayload | null>(
+          "/seqta/student/folio",
+          { mode: "load", id: entry.id },
+        );
+        const rawContents = detail?.contents ?? "";
+        const flattened = stripEmbedRaw(rawContents);
+        const content = flattened.slice(0, 4000);
+
+        items.push({
+          id,
+          text: entry.title?.trim() || `Folio ${entry.id}`,
+          category: "folio",
+          content,
+          dateAdded,
+          metadata: {
+            folioId: entry.id,
+            student: list.me ?? entry.student,
+            publishedAt: entry.published,
+            updatedAt: detail?.updated,
+            createdAt: detail?.created,
+            authorName: detail?.author?.name,
+            authorId: detail?.author?.id,
+            forumId: detail?.forum,
+            allowComments: detail?.allow_comments,
+            fileCount: Array.isArray(detail?.files) ? detail!.files!.length : 0,
+            entityType: "folio",
+            route: "/folios/read",
+            icon: "\ueb16",
+          },
+          actionId: "folio",
+          renderComponentId: "folio",
+        });
+      } catch (e) {
+        console.warn(`[Folio job] Failed to load folio ${entry.id}:`, e);
+      }
+
+      await delay(PER_ITEM_DELAY_MS);
+    }
+
+    console.debug(`[Folio job] Indexed ${items.length} folio entries.`);
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/goals.ts

@@ -0,0 +1,109 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+import { extractTextFromValue } from "../extract";
+import { delay } from "@/seqta/utils/delay";
+
+/**
+ * Indexes student goals from `/seqta/student/load/goals`.
+ *
+ * The endpoint exposes `mode: "years"` which returns the list of available
+ * years and `mode: "list"` (per-year) which returns the actual goals. We
+ * gracefully degrade if the school has goals disabled (the years payload
+ * is empty in that case).
+ */
+
+interface GoalEntry {
+  id?: number | string;
+  uuid?: string;
+  title?: string;
+  description?: string;
+  status?: string;
+  year?: number | string;
+  created?: string;
+  updated?: string;
+}
+
+const PER_YEAR_DELAY_MS = 80;
+
+export const goalsJob: Job = {
+  id: "goals",
+  label: "Goals",
+  renderComponentId: "goal",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 * 3 }, // every 3 days
+
+  boostCriteria: (_item, searchTerm) => {
+    if (!searchTerm) return -40;
+    return 0;
+  },
+
+  run: async (_ctx) => {
+    const years = await seqtaFetchPayload<Array<string | number> | null>(
+      "/seqta/student/load/goals",
+      { mode: "years" },
+    );
+    if (!Array.isArray(years) || years.length === 0) {
+      console.debug("[Goals job] No goal years available; skipping.");
+      return [];
+    }
+
+    const items: IndexItem[] = [];
+    const seen = new Set<string>();
+
+    for (const year of years) {
+      try {
+        const yearGoals = await seqtaFetchPayload<GoalEntry[] | null>(
+          "/seqta/student/load/goals",
+          { mode: "list", year },
+        );
+        if (!Array.isArray(yearGoals)) continue;
+
+        for (const goal of yearGoals) {
+          if (!goal) continue;
+          const stableId = goal.uuid ?? goal.id;
+          if (stableId === undefined || stableId === null) continue;
+          const id = `goal-${stableId}`;
+          if (seen.has(id)) continue;
+          seen.add(id);
+
+          const title =
+            goal.title?.trim() || goal.description?.slice(0, 80) || `Goal ${stableId}`;
+          const dateAdded = goal.updated || goal.created
+            ? new Date(goal.updated ?? goal.created!).getTime() || Date.now()
+            : Date.now();
+
+          items.push({
+            id,
+            text: title,
+            category: "goals",
+            content: extractTextFromValue(
+              { description: goal.description, status: goal.status },
+              { maxChars: 1000 },
+            ),
+            dateAdded,
+            metadata: {
+              goalId: goal.id,
+              goalUuid: goal.uuid,
+              status: goal.status,
+              year: goal.year ?? year,
+              createdAt: goal.created,
+              updatedAt: goal.updated,
+              entityType: "goal",
+              route: `/goals/${year}`,
+              icon: "\uea15",
+            },
+            actionId: "goal",
+            renderComponentId: "goal",
+          });
+        }
+      } catch (e) {
+        console.warn(`[Goals job] Failed to fetch goals for year ${year}:`, e);
+      }
+      await delay(PER_YEAR_DELAY_MS);
+    }
+
+    console.debug(`[Goals job] Indexed ${items.length} goal entries.`);
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/notices.ts

@@ -0,0 +1,218 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+import { htmlToPlainText } from "../utils";
+import { delay } from "@/seqta/utils/delay";
+
+/**
+ * Indexes daily notices from `/seqta/student/load/notices`.
+ *
+ * SEQTA returns notices keyed by date, so we sweep a sliding window
+ * (default: 14 days back) the first time we run, then incrementally pull
+ * the most recent days on subsequent runs. Sensitive routes are excluded
+ * because notices are surfaced for the active student already.
+ */
+
+interface NoticeRecord {
+  id?: number | string;
+  title?: string;
+  contents?: string;
+  staff?: string;
+  staff_id?: number;
+  date?: string;
+  label?: number;
+  label_title?: string;
+  colour?: string;
+}
+
+interface NoticesProgress {
+  earliestDate: string | null;
+  lastSweepBackTo: string | null;
+}
+
+const SWEEP_DAYS = 14;
+const MAX_HISTORY_DAYS = 365;
+const FETCH_DELAY_MS = 60;
+
+function formatYmd(date: Date): string {
+  const y = date.getFullYear();
+  const m = (date.getMonth() + 1).toString().padStart(2, "0");
+  const d = date.getDate().toString().padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+function parseYmd(value: string | null | undefined): Date | null {
+  if (!value) return null;
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  const [, y, m, d] = match;
+  return new Date(Number(y), Number(m) - 1, Number(d));
+}
+
+const fetchNoticesForDate = async (date: string): Promise<NoticeRecord[]> => {
+  const payload = await seqtaFetchPayload<NoticeRecord[] | { notices?: NoticeRecord[] } | null>(
+    "/seqta/student/load/notices",
+    { date },
+  );
+  if (!payload) return [];
+  if (Array.isArray(payload)) return payload;
+  if (Array.isArray((payload as any).notices)) return (payload as any).notices;
+  return [];
+};
+
+const fetchLabelLookup = async (): Promise<Map<number, string>> => {
+  const payload = await seqtaFetchPayload<
+    Array<{ id: number; title?: string }>
+  >("/seqta/student/load/notices", { mode: "labels" });
+  const map = new Map<number, string>();
+  if (Array.isArray(payload)) {
+    for (const entry of payload) {
+      if (entry && typeof entry.id === "number" && entry.title) {
+        map.set(entry.id, entry.title);
+      }
+    }
+  }
+  return map;
+};
+
+export const noticesJob: Job = {
+  id: "notices",
+  label: "Notices",
+  renderComponentId: "notice",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 6 }, // 6 hours
+
+  boostCriteria: (item, searchTerm) => {
+    if (!searchTerm) return -10;
+    let score = 0;
+    const ts = item.metadata?.timestamp;
+    if (typeof ts === "string") {
+      const ageDays =
+        (Date.now() - new Date(ts).getTime()) / (1000 * 60 * 60 * 24);
+      if (ageDays >= 0 && ageDays <= 7) score += 0.05;
+    }
+    return score;
+  },
+
+  run: async (ctx) => {
+    const stored = await ctx.getStoredItems("notices");
+    const existingIds = new Set(stored.map((i) => i.id));
+    const progress = (await ctx.getProgress<NoticesProgress>()) ?? {
+      earliestDate: null,
+      lastSweepBackTo: null,
+    };
+
+    const labelLookup = await fetchLabelLookup();
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    // Sweep window: always the most recent SWEEP_DAYS, plus extend further
+    // back the first time we run until we hit MAX_HISTORY_DAYS.
+    const earliestEverIso = formatYmd(
+      new Date(today.getTime() - MAX_HISTORY_DAYS * 86_400_000),
+    );
+
+    const dates: string[] = [];
+    for (let offset = 0; offset < SWEEP_DAYS; offset++) {
+      const day = new Date(today.getTime() - offset * 86_400_000);
+      dates.push(formatYmd(day));
+    }
+    if (
+      !progress.lastSweepBackTo ||
+      progress.lastSweepBackTo > earliestEverIso
+    ) {
+      // Walk backwards in batches of ~30 days per run so we don't blow up
+      // a single indexing pass.
+      const startBack = parseYmd(progress.lastSweepBackTo) ?? today;
+      const targetBack = new Date(startBack.getTime() - 30 * 86_400_000);
+      const minBack = parseYmd(earliestEverIso) ?? targetBack;
+      const stopBack = targetBack < minBack ? minBack : targetBack;
+      for (
+        let cursor = new Date(startBack.getTime() - SWEEP_DAYS * 86_400_000);
+        cursor >= stopBack;
+        cursor = new Date(cursor.getTime() - 86_400_000)
+      ) {
+        dates.push(formatYmd(cursor));
+      }
+      progress.lastSweepBackTo = formatYmd(stopBack);
+    }
+
+    const items: IndexItem[] = [];
+    const seen = new Set<string>();
+
+    for (const date of dates) {
+      try {
+        const notices = await fetchNoticesForDate(date);
+        for (const notice of notices) {
+          if (!notice || (notice.id === undefined && !notice.title)) continue;
+          const id = `notice-${date}-${notice.id ?? notice.title}`;
+          if (seen.has(id)) continue;
+          seen.add(id);
+
+          const labelTitle =
+            notice.label_title ??
+            (typeof notice.label === "number"
+              ? labelLookup.get(notice.label) ?? null
+              : null);
+
+          const bodyText = notice.contents
+            ? htmlToPlainText(notice.contents)
+            : "";
+
+          items.push({
+            id,
+            text: notice.title?.trim() || `Notice ${notice.id ?? date}`,
+            category: "notices",
+            content: bodyText.slice(0, 4000),
+            dateAdded: new Date(date).getTime(),
+            metadata: {
+              noticeId: notice.id,
+              date,
+              author: notice.staff,
+              authorId: notice.staff_id,
+              label: labelTitle,
+              labelId: notice.label,
+              colour: notice.colour,
+              timestamp: date,
+              entityType: "notice",
+              route: "/notices",
+              icon: "\ueb24",
+            },
+            actionId: "notice",
+            renderComponentId: "notice",
+          });
+        }
+      } catch (e) {
+        console.warn(`[Notices job] Failed to fetch notices for ${date}:`, e);
+      }
+      await delay(FETCH_DELAY_MS);
+    }
+
+    if (items.length > 0) {
+      const dateStrings = items
+        .map((i) => i.metadata?.date as string | undefined)
+        .filter((d): d is string => !!d);
+      if (dateStrings.length > 0) {
+        const earliest = dateStrings.sort()[0];
+        if (
+          !progress.earliestDate ||
+          earliest < progress.earliestDate
+        ) {
+          progress.earliestDate = earliest;
+        }
+      }
+    }
+
+    await ctx.setProgress(progress);
+
+    const newCount = items.filter((i) => !existingIds.has(i.id)).length;
+    console.debug(
+      `[Notices job] Indexed ${items.length} notices across ${dates.length} dates (${newCount} new).`,
+    );
+    return items;
+  },
+
+  purge: (items) => {
+    const oneYearAgo = Date.now() - 365 * 24 * 60 * 60 * 1000;
+    return items.filter((i) => i.dateAdded >= oneYearAgo);
+  },
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/passive.ts

@@ -0,0 +1,49 @@
+import type { Job } from "../types";
+
+/**
+ * Stub job for the passive-observer store.
+ *
+ * The passive observer (see `passiveObserver.ts`) writes captured items
+ * directly into IndexedDB via `getAll`/`put`. We still register a job here
+ * so the indexer:
+ *  - Creates the `passive` object store on first use.
+ *  - Picks up the right `renderComponentId` when materializing in-memory
+ *    items in `loadAllStoredItems()`.
+ *  - Applies a deterministic boost / purge policy to passive results.
+ *
+ * `run()` is a no-op: the passive observer has its own write path so it
+ * works whether or not an active indexing pass is running.
+ */
+export const passiveJob: Job = {
+  id: "passive",
+  label: "Recently viewed",
+  renderComponentId: "passive",
+  // Run frequently so any newly captured items are merged into the
+  // dynamic-items cache on the next indexing tick. The actual capture is
+  // continuous; this is only the synchronization cadence.
+  frequency: { type: "interval", ms: 1000 * 60 * 5 },
+
+  boostCriteria: (item, searchTerm) => {
+    // Passive items are noisier than curated ones, so penalize them
+    // slightly when there's no query and only modestly help on matches.
+    if (!searchTerm) return -60;
+    let score = 0;
+    if (item.metadata?.entityType) score += 0.02;
+    return score;
+  },
+
+  run: async () => {
+    return [];
+  },
+
+  purge: (items) => {
+    // Keep the most recent ~500 passive entries and anything newer than
+    // 30 days. This caps storage growth from heavy browsing sessions.
+    const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
+    const recent = items
+      .filter((i) => i.dateAdded >= cutoff)
+      .sort((a, b) => b.dateAdded - a.dateAdded)
+      .slice(0, 500);
+    return recent;
+  },
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/portals.ts

@@ -0,0 +1,90 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+
+/**
+ * Indexes the user's external portal entries from `/seqta/student/load/portals`.
+ *
+ * Portals are user-facing tiles linking to third-party tools (Mathletics,
+ * Seesaw, Google Classroom, ...). We index their labels and external URLs
+ * so users can jump to them via the global search palette without scrolling
+ * the dashboard.
+ */
+
+interface PortalPayload {
+  id: number | string;
+  label?: string;
+  url?: string;
+  uuid?: string;
+  icon?: string;
+  priority?: number;
+  is_power_portal?: boolean;
+  contents?: string;
+  inherit_styles?: boolean;
+}
+
+function normalizePortalUrl(raw: string | undefined): string | undefined {
+  if (!raw) return undefined;
+  const trimmed = raw.trim();
+  if (!trimmed) return undefined;
+  if (/^https?:\/\//i.test(trimmed)) return trimmed;
+  return `https://${trimmed.replace(/^\/+/, "")}`;
+}
+
+export const portalsJob: Job = {
+  id: "portals",
+  label: "Portals",
+  renderComponentId: "portal",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 * 7 }, // weekly
+
+  boostCriteria: (_item, searchTerm) => {
+    if (!searchTerm) return -50;
+    return 0;
+  },
+
+  run: async (_ctx) => {
+    const payload = await seqtaFetchPayload<PortalPayload[] | null>(
+      "/seqta/student/load/portals",
+      {},
+    );
+    if (!Array.isArray(payload)) return [];
+
+    const items: IndexItem[] = [];
+    const seen = new Set<string>();
+
+    for (const portal of payload) {
+      if (!portal || (portal.id === undefined && !portal.uuid)) continue;
+      const id = `portal-${portal.uuid ?? portal.id}`;
+      if (seen.has(id)) continue;
+      seen.add(id);
+
+      const url = normalizePortalUrl(portal.url);
+      const label = portal.label?.trim() || `Portal ${portal.id}`;
+      const contentParts: string[] = [];
+      if (url) contentParts.push(url);
+      if (portal.is_power_portal) contentParts.push("Power Portal");
+
+      items.push({
+        id,
+        text: label,
+        category: "portals",
+        content: contentParts.join(" \u2022 "),
+        dateAdded: Date.now(),
+        metadata: {
+          portalId: portal.id,
+          portalUuid: portal.uuid,
+          url,
+          isPowerPortal: !!portal.is_power_portal,
+          entityType: "portal",
+          icon: "\ueb01",
+        },
+        actionId: "portal",
+        renderComponentId: "portal",
+      });
+    }
+
+    console.debug(`[Portals job] Indexed ${items.length} portal entries.`);
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/jobs/reports.ts

@@ -0,0 +1,97 @@
+import type { IndexItem, Job } from "../types";
+import { seqtaFetchPayload } from "../api";
+
+/**
+ * Indexes report metadata from `/seqta/student/load/reports`.
+ *
+ * Reports are PDFs gated behind SEQTA's authenticated download endpoint, so
+ * we only index the human-readable metadata (year, term, title, file UUID)
+ * and a stable hash route so the search palette can deep-link straight
+ * into the reports page.
+ */
+
+interface ReportEntry {
+  id?: number | string;
+  uuid?: string;
+  title?: string;
+  description?: string;
+  date_published?: string;
+  date_created?: string;
+  year?: number | string;
+  term?: number | string;
+  metaclass?: number;
+  programme?: number;
+  filename?: string;
+}
+
+export const reportsJob: Job = {
+  id: "reports",
+  label: "Reports",
+  renderComponentId: "report",
+  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 }, // daily
+
+  boostCriteria: (_item, searchTerm) => {
+    if (!searchTerm) return -25;
+    return 0;
+  },
+
+  run: async (_ctx) => {
+    const payload = await seqtaFetchPayload<ReportEntry[] | null>(
+      "/seqta/student/load/reports",
+      {},
+    );
+    if (!Array.isArray(payload)) return [];
+
+    const items: IndexItem[] = [];
+    const seen = new Set<string>();
+
+    for (const report of payload) {
+      if (!report) continue;
+      const stableId = report.uuid ?? report.id;
+      if (stableId === undefined || stableId === null) continue;
+      const id = `report-${stableId}`;
+      if (seen.has(id)) continue;
+      seen.add(id);
+
+      const title = report.title?.trim() || `Report ${stableId}`;
+      const dateAdded = report.date_published
+        ? new Date(report.date_published).getTime() || Date.now()
+        : Date.now();
+
+      const contentParts: string[] = [];
+      if (report.description) contentParts.push(report.description);
+      if (report.year) contentParts.push(`Year ${report.year}`);
+      if (report.term) contentParts.push(`Term ${report.term}`);
+      if (report.date_published) contentParts.push(report.date_published);
+
+      items.push({
+        id,
+        text: title,
+        category: "reports",
+        content: contentParts.join(" \u2022 "),
+        dateAdded,
+        metadata: {
+          reportId: report.id,
+          reportUuid: report.uuid,
+          year: report.year,
+          term: report.term,
+          metaclass: report.metaclass,
+          programme: report.programme,
+          publishedAt: report.date_published,
+          createdAt: report.date_created,
+          filename: report.filename,
+          entityType: "report",
+          route: "/reports",
+          icon: "\ueb70",
+        },
+        actionId: "report",
+        renderComponentId: "report",
+      });
+    }
+
+    console.debug(`[Reports job] Indexed ${items.length} reports.`);
+    return items;
+  },
+
+  purge: (items) => items,
+};

src/plugins/built-in/globalSearch/src/indexing/passiveObserver.ts

@@ -0,0 +1,632 @@
+import type { IndexItem } from "./types";
+import { put, getAll } from "./db";
+import {
+  buildIndexItem,
+  extractTextFromValue,
+  pickId,
+  pickTitle,
+} from "./extract";
+import { isSensitiveSeqtaPath, normalizeSeqtaPath } from "./api";
+import { loadAllStoredItems } from "./indexer";
+import { loadDynamicItems } from "../utils/dynamicItems";
+import { renderComponentMap } from "./renderComponents";
+import { jobs } from "./jobs";
+
+/**
+ * Passive network observer.
+ *
+ * Wraps the page's `fetch` (and best-effort `XMLHttpRequest`) so that any
+ * successful same-origin SEQTA JSON response observed while the user
+ * browses is opportunistically distilled into IndexItems and persisted to
+ * the `passive` object store.
+ *
+ * Hard guarantees:
+ *  - Only same-origin requests under `/seqta/student/` are considered.
+ *  - The shared sensitive-route denylist (login, save/*, settings, prefs,
+ *    heartbeat, branding, themes, file streams, masquerade, ...) is checked
+ *    before any persistence.
+ *  - Response bodies are read via `Response.clone()` so we never consume the
+ *    body the host page intends to use.
+ *  - Sensitive keys/values are stripped via `redactSensitive` before the
+ *    item is stored.
+ *  - Binary file contents are never indexed (we only work on JSON responses
+ *    served as `text/json` / `application/json`).
+ */
+
+const STORE_ID = "passive";
+const FLUSH_DEBOUNCE_MS = 1500;
+const MAX_ITEMS_PER_RESPONSE = 50;
+const MAX_PER_RESPONSE_TEXT_CHARS = 1500;
+
+let installed = false;
+let pendingFlush: ReturnType<typeof setTimeout> | null = null;
+let pendingDirty = false;
+
+export function isPassiveObserverInstalled(): boolean {
+  return installed;
+}
+
+/* ------------------------------------------------------------------ */
+/*                          eligibility checks                        */
+/* ------------------------------------------------------------------ */
+
+function isSameOriginSeqtaUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url, location.origin);
+    if (parsed.origin !== location.origin) return false;
+    return parsed.pathname.startsWith("/seqta/student/");
+  } catch {
+    return false;
+  }
+}
+
+function looksLikeJsonContentType(contentType: string | null): boolean {
+  if (!contentType) return false;
+  return /json/i.test(contentType);
+}
+
+/* ------------------------------------------------------------------ */
+/*                        item synthesis                              */
+/* ------------------------------------------------------------------ */
+
+interface CapturedContext {
+  route: string;
+  requestBody: unknown;
+  observedAt: number;
+}
+
+function categoryFromRoute(route: string): string {
+  // /seqta/student/load/courses -> courses
+  // /seqta/student/load/message -> message
+  const tail = route.replace(/^\/seqta\/student\//, "").split("/").filter(Boolean);
+  if (tail.length === 0) return "passive";
+  // message/people is a support endpoint that backs the messages compose UI.
+  // We treat it as a low-priority `messages-support` record rather than a
+  // standalone "people" category so it never competes with real assessments
+  // / messages in the result list.
+  if (route.includes("/load/message/people")) return "messages-support";
+  return tail[tail.length - 1].toLowerCase();
+}
+
+/**
+ * `/seqta/student/load/message/people` returns the contact picker dataset
+ * used by the messages compose view. We only want to surface entries that
+ * actually carry a human display name — the rest is structural noise that
+ * historically caused raw API paths to appear as titles.
+ */
+function isPeopleEntityWorthIndexing(entity: unknown): boolean {
+  if (!entity || typeof entity !== "object") return false;
+  const obj = entity as Record<string, unknown>;
+  const first = stringField(obj, [
+    "preferredName",
+    "preferred",
+    "firstname",
+    "firstName",
+    "first_name",
+    "given",
+    "givenName",
+  ]);
+  const last = stringField(obj, [
+    "surname",
+    "lastname",
+    "lastName",
+    "last_name",
+    "familyName",
+  ]);
+  const display = stringField(obj, ["displayName", "name", "fullName"]);
+  return Boolean((first && last) || display);
+}
+
+function sourcePageForRoute(route: string): string | undefined {
+  if (route.includes("/load/message/people")) return "/messages";
+  if (route.includes("/load/message")) return "/messages";
+  if (route.includes("/load/messages")) return "/messages";
+  if (route.includes("/load/courses")) return "/courses";
+  if (route.includes("/load/assessments")) return "/assessments/upcoming";
+  if (route.includes("/load/notices")) return "/notices";
+  if (route.includes("/load/documents")) return "/documents";
+  if (route.includes("/folio")) return "/folios/read";
+  if (route.includes("/load/forums")) return "/forums";
+  if (route.includes("/load/goals")) return "/goals";
+  if (route.includes("/load/reports")) return "/reports";
+  if (route.includes("/load/portals")) return "/dashboard";
+  return undefined;
+}
+
+/** Programme + metaclass for `/load/courses` POST body or embedded course JSON. */
+function extractProgrammeMetaclass(
+  requestBody: unknown,
+  entity: unknown,
+): { programme: number; metaclass: number } | null {
+  const coerce = (value: unknown): number | undefined => {
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string") {
+      const t = value.trim();
+      if (!t) return undefined;
+      const n = Number(t);
+      return Number.isFinite(n) ? n : undefined;
+    }
+    return undefined;
+  };
+
+  const read = (
+    src: Record<string, unknown> | null,
+  ): { programme: number; metaclass: number } | null => {
+    if (!src) return null;
+    const programme = coerce(
+      src.programme ?? src.programmeId ?? src.programmeID,
+    );
+    const metaclass = coerce(
+      src.metaclass ?? src.metaclassId ?? src.metaclassID ?? src.subjectId,
+    );
+    if (programme !== undefined && metaclass !== undefined) {
+      return { programme, metaclass };
+    }
+    return null;
+  };
+
+  if (requestBody && typeof requestBody === "object" && !Array.isArray(requestBody)) {
+    const r = read(requestBody as Record<string, unknown>);
+    if (r) return r;
+  }
+  if (entity && typeof entity === "object" && !Array.isArray(entity)) {
+    const r = read(entity as Record<string, unknown>);
+    if (r) return r;
+  }
+  return null;
+}
+
+function entitiesFromPayload(payload: unknown): unknown[] {
+  if (Array.isArray(payload)) return payload;
+  if (payload && typeof payload === "object") {
+    const obj = payload as Record<string, unknown>;
+    // SEQTA frequently nests arrays as `payload.list`, `.messages`,
+    // `.items`, `.tasks`, etc. Pull the first array-shaped child as our
+    // best guess; if none exists, fall back to the object itself so we
+    // still index a single entry.
+    for (const key of [
+      "list",
+      "items",
+      "messages",
+      "tasks",
+      "pending",
+      "forums",
+      "docs",
+    ]) {
+      const value = obj[key];
+      if (Array.isArray(value)) return value;
+    }
+    return [payload];
+  }
+  return [];
+}
+
+/**
+ * Whitelist of entity-shaped fields we hoist into item metadata so the
+ * `passive` action handler can deep-link into the right SEQTA SPA route.
+ * These mirror what the active jobs already store (see `courses.ts`,
+ * `portals.ts`, etc.) so the action only has to consult one source.
+ */
+const DEEP_LINK_FIELDS = [
+  "programme",
+  "programmeId",
+  "programmeID",
+  "metaclass",
+  "metaclassId",
+  "metaclassID",
+  "year",
+  "uuid",
+  "portalUuid",
+  "forum",
+  "forumId",
+  "assessmentId",
+  "assessmentID",
+  "messageId",
+] as const;
+
+function pickDeepLinkHints(
+  entity: unknown,
+): Record<string, string | number> {
+  if (!entity || typeof entity !== "object") return {};
+  const src = entity as Record<string, unknown>;
+  const out: Record<string, string | number> = {};
+  for (const key of DEEP_LINK_FIELDS) {
+    const value = src[key];
+    if (typeof value === "number" && Number.isFinite(value)) {
+      out[key] = value;
+    } else if (typeof value === "string" && value) {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
+function stringField(
+  entity: Record<string, unknown>,
+  keys: readonly string[],
+): string | undefined {
+  for (const key of keys) {
+    const value = entity[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return undefined;
+}
+
+function titleFromEndpoint(
+  route: string,
+  entity: unknown,
+  extractedContent: string,
+  fallback: string,
+): string {
+  if (route.includes("/load/message/people") && entity && typeof entity === "object") {
+    const obj = entity as Record<string, unknown>;
+    const first = stringField(obj, [
+      "preferredName",
+      "preferred",
+      "firstname",
+      "firstName",
+      "first_name",
+      "given",
+      "givenName",
+    ]);
+    const last = stringField(obj, [
+      "surname",
+      "lastname",
+      "lastName",
+      "last_name",
+      "familyName",
+    ]);
+    const full = [first, last].filter(Boolean).join(" ").trim();
+    if (full) return full.slice(0, 200);
+  }
+
+  const picked = pickTitle(entity, "");
+  if (picked) return picked.slice(0, 200);
+
+  // Last resort: show a human-readable content preview instead of a raw API
+  // path like `/seqta/student/load/message/people#20`.
+  const firstLine = extractedContent
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .find(Boolean);
+  return (firstLine || fallback).slice(0, 200);
+}
+
+function synthesizeItems(
+  ctx: CapturedContext,
+  payload: unknown,
+): IndexItem[] {
+  const entities = entitiesFromPayload(payload);
+  if (entities.length === 0) return [];
+
+  const category = categoryFromRoute(ctx.route);
+  const now = ctx.observedAt;
+  const out: IndexItem[] = [];
+
+  const isPeopleSupport = ctx.route.includes("/load/message/people");
+
+  const limit = Math.min(entities.length, MAX_ITEMS_PER_RESPONSE);
+  for (let i = 0; i < limit; i++) {
+    const entity = entities[i];
+    if (!entity || (typeof entity !== "object" && typeof entity !== "string")) {
+      continue;
+    }
+
+    // For the messages compose-people endpoint, skip records that don't
+    // carry a real human name. We never want raw entries like
+    // `/seqta/student/load/message/people#20` becoming titles, and we
+    // explicitly route the rest to /messages so they're treated as support
+    // records, not standalone "people" results.
+    if (isPeopleSupport && !isPeopleEntityWorthIndexing(entity)) {
+      continue;
+    }
+
+    const fallbackId = `${ctx.route}#${i}`;
+    const entityId = pickId(entity, fallbackId);
+    const stableId = `passive-${ctx.route.replace(/\//g, "_")}-${entityId}`;
+
+    const content = extractTextFromValue(entity, {
+      maxChars: MAX_PER_RESPONSE_TEXT_CHARS,
+    });
+    const title = titleFromEndpoint(ctx.route, entity, content, fallbackId);
+    if (!content && (!title || title === fallbackId)) {
+      // Skip records that produced neither title nor content; they are
+      // structurally noise (e.g. tiny acknowledgement payloads).
+      continue;
+    }
+
+    const deepLinkHints = pickDeepLinkHints(entity);
+    const sourcePage = sourcePageForRoute(ctx.route);
+    const coursePm = ctx.route.includes("/load/courses")
+      ? extractProgrammeMetaclass(ctx.requestBody, entity)
+      : null;
+
+    out.push(
+      buildIndexItem({
+        id: stableId,
+        text: title,
+        category,
+        contentOverride: content,
+        metadata: {
+          route: ctx.route,
+          source: "passive",
+          observedAt: new Date(now).toISOString(),
+          entityType: category,
+          entityId,
+          icon: "\ueb71",
+          sourcePage,
+          // Mark message/people as a low-priority support record so the
+          // search ranker can deprioritize it relative to real messages,
+          // assessments, courses, etc.
+          ...(isPeopleSupport ? { supportRecord: true, priority: "low" } : {}),
+          ...deepLinkHints,
+          ...(coursePm
+            ? { programme: coursePm.programme, metaclass: coursePm.metaclass }
+            : {}),
+        },
+        actionId: "passive",
+        renderComponentId: "passive",
+        dateAdded: now,
+      }),
+    );
+  }
+
+  return out;
+}
+
+/* ------------------------------------------------------------------ */
+/*                          persistence                               */
+/* ------------------------------------------------------------------ */
+
+async function persistItems(items: IndexItem[]): Promise<void> {
+  if (items.length === 0) return;
+
+  // Dedupe against existing entries. We replace on collision so the latest
+  // observation wins (e.g. if a message changes title).
+  for (const item of items) {
+    try {
+      await put(STORE_ID, item, item.id);
+    } catch (e) {
+      console.warn(
+        `[Passive Observer] Failed to persist item ${item.id}:`,
+        e,
+      );
+    }
+  }
+
+  pendingDirty = true;
+  scheduleFlush();
+}
+
+function scheduleFlush() {
+  if (pendingFlush) return;
+  pendingFlush = setTimeout(() => {
+    pendingFlush = null;
+    if (!pendingDirty) return;
+    pendingDirty = false;
+    void flushDynamicItems();
+  }, FLUSH_DEBOUNCE_MS);
+}
+
+async function flushDynamicItems(): Promise<void> {
+  try {
+    const all = await loadAllStoredItems();
+    const decorated = all.map((item) => {
+      try {
+        const jobDef =
+          jobs[item.category] ||
+          Object.values(jobs).find((j) => j.id === item.category) ||
+          jobs[item.renderComponentId];
+        let renderComponent = item.renderComponent;
+        if (jobDef) {
+          renderComponent =
+            renderComponentMap[jobDef.renderComponentId] || renderComponent;
+        } else if (renderComponentMap[item.renderComponentId]) {
+          renderComponent = renderComponentMap[item.renderComponentId];
+        }
+        try {
+          const cloned = JSON.parse(JSON.stringify(item));
+          cloned.renderComponent = renderComponent;
+          return cloned;
+        } catch {
+          return { ...item, renderComponent };
+        }
+      } catch {
+        return item;
+      }
+    });
+    loadDynamicItems(decorated);
+    window.dispatchEvent(
+      new CustomEvent("dynamic-items-updated", {
+        detail: {
+          incremental: true,
+          jobId: STORE_ID,
+          streaming: false,
+        },
+      }),
+    );
+  } catch (e) {
+    console.warn("[Passive Observer] Failed to refresh dynamic items:", e);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*                          fetch hook                                */
+/* ------------------------------------------------------------------ */
+
+async function consumeResponse(
+  response: Response,
+  url: string,
+  requestBody: unknown,
+): Promise<void> {
+  if (!response.ok) return;
+
+  const route = normalizeSeqtaPath(url);
+  if (isSensitiveSeqtaPath(route)) return;
+
+  const contentType = response.headers.get("content-type");
+  if (!looksLikeJsonContentType(contentType)) return;
+
+  let body: any;
+  try {
+    body = await response.clone().json();
+  } catch {
+    return;
+  }
+
+  if (!body || typeof body !== "object") return;
+  if (body.status && body.status !== "200") return;
+
+  const payload = body.payload;
+  if (payload === undefined || payload === null) return;
+
+  const items = synthesizeItems(
+    {
+      route,
+      requestBody,
+      observedAt: Date.now(),
+    },
+    payload,
+  );
+
+  if (items.length > 0) {
+    await persistItems(items);
+  }
+}
+
+function tryParseJson(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+/**
+ * Installs the passive observer once. Subsequent calls are no-ops.
+ *
+ * Designed to be called from the global-search plugin bootstrap after
+ * `mountSearchBar` succeeds so the observer is only active when the
+ * plugin itself is enabled.
+ */
+export function installPassiveObserver(): void {
+  if (installed) return;
+  if (typeof window === "undefined" || typeof window.fetch !== "function") {
+    return;
+  }
+  installed = true;
+
+  const originalFetch = window.fetch.bind(window);
+  window.fetch = async function patchedFetch(
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> {
+    const response = await originalFetch(input, init);
+
+    try {
+      const url =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (isSameOriginSeqtaUrl(url)) {
+        const body = init?.body;
+        const parsed =
+          body && typeof body === "string"
+            ? tryParseJson(body)
+            : undefined;
+        // Fire-and-forget: never block the host page on indexing work.
+        void consumeResponse(response, url, parsed);
+      }
+    } catch (e) {
+      // Never let observer errors bubble up to the host page.
+      console.debug("[Passive Observer] fetch hook error:", e);
+    }
+
+    return response;
+  };
+
+  // Best-effort XHR hook for the rare callers that bypass fetch.
+  const ProtoXhr = (window as any).XMLHttpRequest?.prototype;
+  if (ProtoXhr) {
+    const originalOpen = ProtoXhr.open;
+    const originalSend = ProtoXhr.send;
+    ProtoXhr.open = function patchedOpen(
+      this: XMLHttpRequest,
+      method: string,
+      url: string,
+      ...rest: any[]
+    ) {
+      try {
+        (this as any).__bsplusUrl = url;
+        (this as any).__bsplusMethod = method;
+      } catch {
+        /* ignore */
+      }
+      return originalOpen.call(this, method, url, ...rest);
+    };
+    ProtoXhr.send = function patchedSend(
+      this: XMLHttpRequest,
+      body?: any,
+    ) {
+      try {
+        const url = (this as any).__bsplusUrl as string | undefined;
+        if (url && isSameOriginSeqtaUrl(url)) {
+          const parsed =
+            typeof body === "string" ? tryParseJson(body) : undefined;
+          this.addEventListener("load", () => {
+            try {
+              if (this.status < 200 || this.status >= 300) return;
+              const ct = this.getResponseHeader("content-type");
+              if (!looksLikeJsonContentType(ct)) return;
+              const route = normalizeSeqtaPath(url);
+              if (isSensitiveSeqtaPath(route)) return;
+              let json: any;
+              try {
+                json = JSON.parse(this.responseText);
+              } catch {
+                return;
+              }
+              if (!json || typeof json !== "object") return;
+              if (json.status && json.status !== "200") return;
+              const payload = json.payload;
+              if (payload === undefined || payload === null) return;
+              const items = synthesizeItems(
+                {
+                  route,
+                  requestBody: parsed,
+                  observedAt: Date.now(),
+                },
+                payload,
+              );
+              if (items.length > 0) {
+                void persistItems(items);
+              }
+            } catch (e) {
+              console.debug("[Passive Observer] xhr load error:", e);
+            }
+          });
+        }
+      } catch {
+        /* ignore */
+      }
+      return originalSend.call(this, body);
+    };
+  }
+
+  console.debug("[Passive Observer] Installed.");
+}
+
+/**
+ * Returns currently-stored passive items. Mainly used for diagnostics from
+ * `window.globalSearchDebug`.
+ */
+export async function getStoredPassiveItems(): Promise<IndexItem[]> {
+  try {
+    return (await getAll(STORE_ID)) as IndexItem[];
+  } catch {
+    return [];
+  }
+}

src/plugins/built-in/globalSearch/src/indexing/renderComponents.ts

@@ -2,10 +2,23 @@ import type { SvelteComponent } from "svelte";
 import AssessmentItem from "../components/items/AssessmentItem.svelte";
 import ForumItem from "../components/items/ForumItem.svelte";
 import SubjectItem from "../components/items/SubjectItem.svelte";
+import GenericItem from "../components/items/GenericItem.svelte";
 
 export const renderComponentMap: Record<string, typeof SvelteComponent> = {
   assessment: AssessmentItem as unknown as typeof SvelteComponent,
   message: AssessmentItem as unknown as typeof SvelteComponent,
   forum: ForumItem as unknown as typeof SvelteComponent,
   subject: SubjectItem as unknown as typeof SvelteComponent,
-};
+  // New categories share a generic, category-aware row component to keep
+  // the palette consistent without bespoke layouts for every job. The
+  // component reads `item.metadata.icon` and the `category` to pick a
+  // sensible default visual treatment.
+  course: GenericItem as unknown as typeof SvelteComponent,
+  notice: GenericItem as unknown as typeof SvelteComponent,
+  document: GenericItem as unknown as typeof SvelteComponent,
+  folio: GenericItem as unknown as typeof SvelteComponent,
+  portal: GenericItem as unknown as typeof SvelteComponent,
+  report: GenericItem as unknown as typeof SvelteComponent,
+  goal: GenericItem as unknown as typeof SvelteComponent,
+  passive: GenericItem as unknown as typeof SvelteComponent,
+};

src/plugins/built-in/globalSearch/src/indexing/resetIndexes.ts

@@ -0,0 +1,112 @@
+import { SCHEMA_VERSION_KEY } from "./schemaVersion";
+
+/**
+ * Hard-reset of all global-search persistence.
+ *
+ * This module is intentionally dependency-free (no imports from `db.ts`,
+ * the worker manager, embeddia, or any heavy bundle) so it can be
+ * statically imported from:
+ *
+ *  - The always-loaded plugin shell (`lazy.ts`) for the manual
+ *    "Reset Index" settings button. Statically importing means the button
+ *    keeps working across extension updates — there's no chunk hash to
+ *    chase via dynamic import, which previously produced
+ *    `Failed to fetch dynamically imported module: .../assets/<chunk>.js`
+ *    when an older settings page tried to load a chunk that the new build
+ *    had already replaced.
+ *
+ *  - The version-check path (`utils/versionCheck.ts`) for the auto-reset
+ *    that fires whenever the extension's manifest version changes.
+ *
+ * The function:
+ *   1. Notifies in-process modules to drop in-memory caches and any open
+ *      IndexedDB connections via custom DOM events (best effort).
+ *   2. Deletes the structured `betterseqta-index` and the vector
+ *      `embeddiaDB` databases.
+ *   3. Clears version-tracking localStorage keys so the next indexing
+ *      pass treats the world as fresh.
+ *
+ * It never throws on partial failure: each step is wrapped in try/catch
+ * so a stuck connection on one DB doesn't block the other.
+ */
+
+const STRUCTURED_DB = "betterseqta-index";
+const VECTOR_DB = "embeddiaDB";
+const STRUCTURED_VERSION_KEY = "betterseqta-index-version";
+
+function deleteIndexedDb(name: string): Promise<void> {
+  return new Promise((resolve) => {
+    let resolved = false;
+    const finish = () => {
+      if (resolved) return;
+      resolved = true;
+      resolve();
+    };
+
+    let req: IDBOpenDBRequest;
+    try {
+      req = indexedDB.deleteDatabase(name);
+    } catch (e) {
+      console.warn(`[Reset] Could not start delete of ${name}:`, e);
+      finish();
+      return;
+    }
+
+    req.onsuccess = () => finish();
+    req.onerror = () => {
+      console.warn(`[Reset] Error deleting ${name}:`, req.error);
+      finish();
+    };
+    req.onblocked = () => {
+      // Connections are still open in another tab. Wait briefly, retry,
+      // then resolve regardless so we never hang the caller forever.
+      console.warn(
+        `[Reset] Delete of ${name} blocked; will retry then resolve.`,
+      );
+      setTimeout(() => {
+        try {
+          const retry = indexedDB.deleteDatabase(name);
+          retry.onsuccess = () => finish();
+          retry.onerror = () => finish();
+          retry.onblocked = () => finish();
+        } catch {
+          finish();
+        }
+      }, 600);
+    };
+  });
+}
+
+export async function resetSearchIndexes(): Promise<void> {
+  try {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("betterseqta-clear-search-cache"),
+      );
+      window.dispatchEvent(
+        new CustomEvent("betterseqta-clear-embedding-cache"),
+      );
+      window.dispatchEvent(
+        new CustomEvent("betterseqta-reset-search-index"),
+      );
+    }
+  } catch {
+    /* ignore — events are best-effort */
+  }
+
+  // Give listeners a tick to close any open IDB connections; otherwise
+  // the delete request below comes back with `onblocked`.
+  await new Promise<void>((resolve) => setTimeout(resolve, 150));
+
+  await Promise.allSettled([
+    deleteIndexedDb(STRUCTURED_DB),
+    deleteIndexedDb(VECTOR_DB),
+  ]);
+
+  try {
+    localStorage.removeItem(STRUCTURED_VERSION_KEY);
+    localStorage.removeItem(SCHEMA_VERSION_KEY);
+  } catch {
+    /* ignore */
+  }
+}

src/plugins/built-in/globalSearch/src/indexing/schemaVersion.ts

@@ -0,0 +1,16 @@
+/**
+ * Index schema version. Bump whenever the IndexItem shape, category set,
+ * or text construction changes in a way that should invalidate previously
+ * stored items (and their embeddings).
+ *
+ * On mismatch, both the structured IndexedDB store and the embeddiaDB are
+ * wiped before the next indexing pass so we don't serve stale results.
+ *
+ * Kept in its own file (with no imports) so very lightweight callers — the
+ * always-loaded plugin shell in `lazy.ts`, the version-check path — can
+ * pull it in without bringing the heavy indexer/worker bundle along.
+ */
+export const INDEX_SCHEMA_VERSION = 6;
+
+/** Key used to track the schema version a previous run wrote out. */
+export const SCHEMA_VERSION_KEY = "bsq-index-schema-version";

src/plugins/built-in/globalSearch/src/indexing/selfTests.ts

@@ -0,0 +1,328 @@
+import {
+  isSensitiveKey,
+  looksLikeSecretValue,
+  redactSensitive,
+  extractTextFromValue,
+  pickTitle,
+  pickId,
+  buildIndexItem,
+} from "./extract";
+import { isSensitiveSeqtaPath, normalizeSeqtaPath } from "./api";
+import {
+  coursesPayload,
+  documentsPayload,
+  folioEntryPayload,
+  noticesPayload,
+  portalsPayload,
+  settingsPayload,
+  subjectsListPayload,
+} from "./__fixtures__/seqtaResponses";
+
+/**
+ * Lightweight in-process self-tests for the global-search overhaul.
+ *
+ * The repository does not (yet) ship with a test runner, so we instead
+ * expose a deterministic suite of assertions over the pure helpers that
+ * back active jobs and the passive observer. This is intentionally
+ * dependency-free so it can run inside the extension page (`window.
+ * globalSearchDebug.runSelfTests()`) and from any future Vitest harness
+ * without modification.
+ */
+
+interface TestCase {
+  name: string;
+  run: () => void | Promise<void>;
+}
+
+class AssertionError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "AssertionError";
+  }
+}
+
+function assert(condition: unknown, message: string): asserts condition {
+  if (!condition) throw new AssertionError(message);
+}
+
+function assertEqual<T>(actual: T, expected: T, label: string) {
+  if (actual !== expected) {
+    throw new AssertionError(
+      `${label}: expected ${JSON.stringify(expected)} but got ${JSON.stringify(actual)}`,
+    );
+  }
+}
+
+function assertContains(haystack: string, needle: string, label: string) {
+  if (!haystack.includes(needle)) {
+    throw new AssertionError(
+      `${label}: expected "${haystack}" to contain "${needle}"`,
+    );
+  }
+}
+
+function assertNotContains(haystack: string, needle: string, label: string) {
+  if (haystack.includes(needle)) {
+    throw new AssertionError(
+      `${label}: expected "${haystack}" NOT to contain "${needle}"`,
+    );
+  }
+}
+
+const cases: TestCase[] = [
+  {
+    name: "normalizeSeqtaPath strips query tokens",
+    run: () => {
+      assertEqual(
+        normalizeSeqtaPath("/seqta/student/load/messages?mokx3qef"),
+        "/seqta/student/load/messages",
+        "trailing token",
+      );
+      assertEqual(
+        normalizeSeqtaPath(
+          "https://learn.example.com/seqta/student/load/courses?abc123",
+        ),
+        "/seqta/student/load/courses",
+        "absolute URL",
+      );
+    },
+  },
+  {
+    name: "isSensitiveSeqtaPath catches credential routes",
+    run: () => {
+      assert(
+        isSensitiveSeqtaPath("/seqta/student/login?xyz"),
+        "login is sensitive",
+      );
+      assert(
+        isSensitiveSeqtaPath("/seqta/student/save/message"),
+        "save/* is sensitive",
+      );
+      assert(
+        isSensitiveSeqtaPath("/seqta/student/load/settings"),
+        "settings is sensitive",
+      );
+      assert(
+        isSensitiveSeqtaPath("/seqta/student/load/prefs?z=1"),
+        "prefs is sensitive",
+      );
+      assert(
+        isSensitiveSeqtaPath("/seqta/ta/masquerade"),
+        "masquerade is sensitive",
+      );
+      assert(
+        !isSensitiveSeqtaPath("/seqta/student/load/messages"),
+        "messages is NOT sensitive",
+      );
+      assert(
+        !isSensitiveSeqtaPath("/seqta/student/load/courses"),
+        "courses is NOT sensitive",
+      );
+    },
+  },
+  {
+    name: "isSensitiveKey covers the credential vocabulary",
+    run: () => {
+      for (const key of [
+        "password",
+        "Password",
+        "client_secret",
+        "apiKey",
+        "X-API-Token",
+        "jwtSession",
+        "oauth_signature",
+      ]) {
+        assert(isSensitiveKey(key), `expected ${key} to be sensitive`);
+      }
+      for (const key of ["title", "subject", "uuid", "metaclass"]) {
+        assert(!isSensitiveKey(key), `expected ${key} to be safe`);
+      }
+    },
+  },
+  {
+    name: "looksLikeSecretValue catches token-shaped strings",
+    run: () => {
+      assert(
+        looksLikeSecretValue(
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMifQ.abc123def456",
+        ),
+        "JWT looks secret",
+      );
+      assert(
+        looksLikeSecretValue("a".repeat(40) + "b".repeat(40)),
+        "long base64-ish string looks secret",
+      );
+      assert(
+        !looksLikeSecretValue("Hello world"),
+        "short readable text is safe",
+      );
+      assert(
+        !looksLikeSecretValue("https://example.com/foo/bar"),
+        "URLs are not secrets",
+      );
+      assert(
+        !looksLikeSecretValue("3162189c-2052-4f83-ad83-a66c57460ea2"),
+        "UUIDs are useful and not secret",
+      );
+    },
+  },
+  {
+    name: "redactSensitive scrubs settings payloads",
+    run: () => {
+      const cleaned = redactSensitive(settingsPayload);
+      const json = JSON.stringify(cleaned);
+      assertNotContains(json, "global.dropbox.api.key", "dropbox key dropped");
+      assertNotContains(json, "xxx-do-not-index", "secret value dropped");
+    },
+  },
+  {
+    name: "extractTextFromValue distills HTML and skips secrets",
+    run: () => {
+      const text = extractTextFromValue({
+        title: "Hello",
+        body: "<p>Some <strong>HTML</strong> body.</p>",
+        password: "should-not-appear",
+        nested: { token: "leak-me-please" },
+      });
+      assertContains(text, "Hello", "title preserved");
+      assertContains(text, "HTML body", "html flattened");
+      assertNotContains(text, "should-not-appear", "password redacted");
+      assertNotContains(text, "leak-me-please", "nested token redacted");
+    },
+  },
+  {
+    name: "pickTitle / pickId prefer common SEQTA fields",
+    run: () => {
+      assertEqual(
+        pickTitle({ title: "Hello", name: "Other" }),
+        "Hello",
+        "title wins over name",
+      );
+      assertEqual(
+        pickTitle({ filename: "doc.pdf" }),
+        "doc.pdf",
+        "filename fallback",
+      );
+      assertEqual(pickId({ id: 42 }), "42", "numeric id stringified");
+      assertEqual(pickId({ uuid: "abc" }), "abc", "uuid id");
+    },
+  },
+  {
+    name: "buildIndexItem produces redacted, well-formed records",
+    run: () => {
+      const item = buildIndexItem({
+        id: "x-1",
+        text: "Test",
+        category: "passive",
+        rawForContent: {
+          title: "Test",
+          body: "<p>Hello</p>",
+          token: "should-be-stripped",
+        },
+        metadata: { route: "/seqta/student/load/whatever", apiKey: "drop" },
+        actionId: "passive",
+        renderComponentId: "passive",
+      });
+      assertEqual(item.id, "x-1", "id propagated");
+      assertContains(item.content, "Hello", "html distilled");
+      assertNotContains(item.content, "should-be-stripped", "token stripped");
+      assert(
+        !("apiKey" in (item.metadata as Record<string, unknown>)),
+        "apiKey metadata stripped",
+      );
+      assertEqual(item.category, "passive", "category passes through");
+    },
+  },
+  {
+    name: "courses fixture flattens lesson HTML",
+    run: () => {
+      // Verify that the structural shape we depend on still matches.
+      assert(Array.isArray(coursesPayload.w), "lesson grid present");
+      const lessonHtml = (coursesPayload.w[0]?.[1] as { l?: string })?.l ?? "";
+      assertContains(lessonHtml, "ed.ted.com", "lesson html link present");
+    },
+  },
+  {
+    name: "subjects fixture exposes programme/metaclass",
+    run: () => {
+      const subject = subjectsListPayload[0]?.subjects[0];
+      assert(subject, "fixture has at least one subject");
+      assert(
+        Number.isFinite(subject!.programme) &&
+          Number.isFinite(subject!.metaclass),
+        "programme & metaclass numeric",
+      );
+    },
+  },
+  {
+    name: "documents fixture exposes uuid + filename",
+    run: () => {
+      const doc = documentsPayload[0]?.docs[0];
+      assert(doc?.uuid && doc?.filename, "uuid + filename present");
+    },
+  },
+  {
+    name: "notices fixture is HTML-bearing",
+    run: () => {
+      assertContains(
+        noticesPayload[0]?.contents ?? "",
+        "<p>",
+        "notice html present",
+      );
+    },
+  },
+  {
+    name: "portals fixture has external url",
+    run: () => {
+      assert(portalsPayload[0]?.url?.includes("mathletics"), "portal url");
+    },
+  },
+  {
+    name: "folio entry contents passes html-flattening",
+    run: () => {
+      const distilled = extractTextFromValue(folioEntryPayload, {
+        maxChars: 4000,
+      });
+      assertContains(distilled, "reflection", "folio body extracted");
+    },
+  },
+];
+
+export interface SelfTestReport {
+  passed: number;
+  failed: number;
+  failures: Array<{ name: string; error: string }>;
+}
+
+/**
+ * Runs every assertion case and resolves with a summary. Never throws.
+ *
+ * Designed to be invoked from `window.globalSearchDebug.runSelfTests()`
+ * by maintainers who want to validate the indexing pipeline against a
+ * real SEQTA tab.
+ */
+export async function runGlobalSearchSelfTests(): Promise<SelfTestReport> {
+  const report: SelfTestReport = { passed: 0, failed: 0, failures: [] };
+  for (const test of cases) {
+    try {
+      await test.run();
+      report.passed++;
+    } catch (e) {
+      report.failed++;
+      const error =
+        e instanceof Error ? `${e.name}: ${e.message}` : String(e);
+      report.failures.push({ name: test.name, error });
+    }
+  }
+  if (report.failed > 0) {
+    console.warn(
+      `[Global Search Self-Tests] ${report.failed} failed / ${report.passed} passed`,
+      report.failures,
+    );
+  } else {
+    console.info(
+      `[Global Search Self-Tests] All ${report.passed} cases passed`,
+    );
+  }
+  return report;
+}

src/plugins/built-in/globalSearch/src/indexing/worker/vectorWorkerManager.ts

@@ -19,6 +19,8 @@ export class VectorWorkerManager {
   private initializationMutex = false;
   private idleTimer: NodeJS.Timeout | null = null;
   private unloadTimer: NodeJS.Timeout | null = null;
+  /** Non-streaming `process` jobs must not hit the idle shutdown mid-flight. */
+  private vectorizationLockCount = 0;
 
   private streamingSession: {
     isActive: boolean;
@@ -92,6 +94,12 @@ export class VectorWorkerManager {
             break;
 
           case "progress":
+            if (
+              data.status === "processing" ||
+              data.status === "started"
+            ) {
+              this.bumpActivityDuringVectorization();
+            }
             if (this.progressCallback) {
               this.progressCallback(data);
 
@@ -120,6 +128,7 @@ export class VectorWorkerManager {
             break;
 
           case "streamingProgress":
+            this.bumpActivityDuringVectorization();
             if (this.progressCallback && this.streamingSession?.isActive) {
               const { processed } = data;
               this.progressCallback({
@@ -150,6 +159,7 @@ export class VectorWorkerManager {
     this.readyPromise = null;
     this.progressCallback = null;
     this.initializationMutex = false;
+    this.vectorizationLockCount = 0;
     this.clearIdleTimer();
     this.clearUnloadTimer();
     if (this.streamingSession?.isActive) {
@@ -158,15 +168,27 @@ export class VectorWorkerManager {
   }
 
   private startIdleTimer() {
+    if (this.vectorizationLockCount > 0 || this.streamingSession?.isActive) {
+      return;
+    }
     this.clearIdleTimer();
     this.idleTimer = setTimeout(() => {
-      if (!this.streamingSession?.isActive && this.isInitialized) {
+      if (this.vectorizationLockCount > 0) return;
-        console.debug("[VectorWorker] Auto-shutting down due to 2 minutes of inactivity");
+      if (this.streamingSession?.isActive) return;
-        this.resetWorkerState();
+      if (!this.isInitialized) return;
-      }
+      console.debug("[VectorWorker] Auto-shutting down due to 2 minutes of inactivity");
+      this.resetWorkerState();
     }, 120000); // 2 minutes
   }
 
+  /** Extends idle deadline while embeddings run; cheap if no idle timer is scheduled. */
+  private bumpActivityDuringVectorization() {
+    if (this.vectorizationLockCount > 0 || this.streamingSession?.isActive) {
+      this.clearIdleTimer();
+    }
+    this.updateActivity();
+  }
+
   private clearIdleTimer() {
     if (this.idleTimer) {
       clearTimeout(this.idleTimer);
@@ -184,6 +206,7 @@ export class VectorWorkerManager {
   private scheduleUnload(delay: number = 10000) {
     this.clearUnloadTimer();
     this.unloadTimer = setTimeout(() => {
+      if (this.vectorizationLockCount > 0) return;
       if (!this.streamingSession?.isActive && this.isInitialized) {
         console.debug("[VectorWorker] Auto-unloading after processing complete");
         this.resetWorkerState();
@@ -193,6 +216,9 @@ export class VectorWorkerManager {
 
   private updateActivity() {
     this.clearUnloadTimer();
+    if (this.vectorizationLockCount > 0 || this.streamingSession?.isActive) {
+      return;
+    }
     this.startIdleTimer();
   }
 
@@ -298,17 +324,50 @@ export class VectorWorkerManager {
       return;
     }
 
-    this.progressCallback = onProgress || null;
+    // Wait until the worker reports a terminal status. Previously this method
-    this.updateActivity();
+    // returned as soon as the job was queued, so indexers.ts continued into
+    // stopHeartbeat/loadAll/loadDynamicItems on the main thread while
+    // vectorization was still running — blocking indexing-progress handlers
+    // and freezing the chip on “Vectorization in progress”.
+    this.vectorizationLockCount++;
+    this.clearIdleTimer();
+    this.clearUnloadTimer();
 
-    console.debug(
+    try {
-      `Sending ${uniqueItems.length} unique items to worker for processing.`,
+      await new Promise<void>((resolve) => {
-    );
+        let settled = false;
+        const wrap: ProgressCallback = (data) => {
+          onProgress?.(data);
+          if (
+            !settled &&
+            (data.status === "complete" ||
+              data.status === "error" ||
+              data.status === "cancelled")
+          ) {
+            settled = true;
+            resolve();
+          }
+        };
+        this.progressCallback = wrap;
 
-    this.worker!.postMessage({
+        console.debug(
-      type: "process",
+          `Sending ${uniqueItems.length} unique items to worker for processing.`,
-      data: { items: uniqueItems },
+        );
-    });
+
+        this.worker!.postMessage({
+          type: "process",
+          data: { items: uniqueItems },
+        });
+      });
+    } finally {
+      this.vectorizationLockCount = Math.max(0, this.vectorizationLockCount - 1);
+      if (
+        this.vectorizationLockCount === 0 &&
+        !this.streamingSession?.isActive
+      ) {
+        this.startIdleTimer();
+      }
+    }
   }
 
   async startStreamingSession(

src/plugins/built-in/globalSearch/src/search/dedupeIndexItems.ts

@@ -0,0 +1,151 @@
+import type { CombinedResult } from "../core/types";
+import type { IndexItem } from "../indexing/types";
+
+function toFiniteNumber(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const t = value.trim();
+    if (!t) return undefined;
+    const n = Number(t);
+    return Number.isFinite(n) ? n : undefined;
+  }
+  return undefined;
+}
+
+/** Same SPA destination as handlers for `course` / `subjectcourse` / passive `courses`. */
+function shouldDedupeAsSameCourseSPA(item: IndexItem): boolean {
+  if (item.actionId === "subjectassessment") return false;
+  if (item.metadata?.type === "assessments") return false;
+
+  if (item.renderComponentId === "course") return true;
+  if (item.actionId === "course") return true;
+  if (item.actionId === "subjectcourse") return true;
+  if (
+    item.actionId === "passive" &&
+    item.metadata?.sourcePage === "/courses"
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export function courseDestinationKey(item: IndexItem): string | undefined {
+  if (!shouldDedupeAsSameCourseSPA(item)) return undefined;
+  const md = item.metadata ?? {};
+  const programme = toFiniteNumber(
+    md.programme ?? md.programmeId ?? md.programmeID,
+  );
+  const metaclass = toFiniteNumber(
+    md.metaclass ?? md.metaclassId ?? md.metaclassID ?? md.subjectId,
+  );
+  if (programme === undefined || metaclass === undefined) return undefined;
+  return `course:${programme}:${metaclass}`;
+}
+
+function isPassiveLike(item: IndexItem): boolean {
+  return (
+    item.actionId === "passive" || item.metadata?.source === "passive"
+  );
+}
+
+function pickBetterCourseNavDuplicate(a: IndexItem, b: IndexItem): IndexItem {
+  const aP = isPassiveLike(a);
+  const bP = isPassiveLike(b);
+  if (aP && !bP) return b;
+  if (!aP && bP) return a;
+  // Prefer curated job row (courses store) vs other categories
+  if (a.category === "courses" && b.category !== "courses") return a;
+  if (b.category === "courses" && a.category !== "courses") return b;
+  if (a.renderComponentId === "course" && b.renderComponentId !== "course")
+    return a;
+  if (b.renderComponentId === "course" && a.renderComponentId !== "course")
+    return b;
+  const ad = typeof a.dateAdded === "number" ? a.dateAdded : 0;
+  const bd = typeof b.dateAdded === "number" ? b.dateAdded : 0;
+  return ad >= bd ? a : b;
+}
+
+/**
+ * Collapses multiple index rows that open the same course hash route
+ * (e.g. `course` job + passive `/load/courses` capture) so search shows one hit.
+ */
+export function dedupeIndexItemsForSearch(items: IndexItem[]): IndexItem[] {
+  const winners = new Map<string, IndexItem>();
+
+  for (const item of items) {
+    const key = courseDestinationKey(item);
+    if (!key) continue;
+    const prev = winners.get(key);
+    winners.set(
+      key,
+      prev ? pickBetterCourseNavDuplicate(prev, item) : item,
+    );
+  }
+
+  const seenCanon = new Set<string>();
+  const out: IndexItem[] = [];
+
+  for (const item of items) {
+    const key = courseDestinationKey(item);
+    if (!key) {
+      out.push(item);
+      continue;
+    }
+    if (seenCanon.has(key)) continue;
+    seenCanon.add(key);
+    out.push(winners.get(key)!);
+  }
+
+  return out;
+}
+
+function dynamicCourseKey(row: CombinedResult): string | undefined {
+  if (row.type !== "dynamic") return undefined;
+  return courseDestinationKey(row.item as IndexItem);
+}
+
+/**
+ * Final pass after hybrid expansion: vector-only recall can still surface a
+ * second row for the same `/courses/P:M` SPA route using a stale passive id.
+ */
+export function dedupeCombinedResultsByCourseNav(
+  results: CombinedResult[],
+): CombinedResult[] {
+  const best = new Map<string, CombinedResult>();
+
+  for (const r of results) {
+    const key = dynamicCourseKey(r);
+    if (!key) continue;
+    const prev = best.get(key);
+    if (!prev) {
+      best.set(key, r);
+      continue;
+    }
+    const aItem = prev.item as IndexItem;
+    const bItem = r.item as IndexItem;
+    const winnerItem = pickBetterCourseNavDuplicate(aItem, bItem);
+    const envelope = winnerItem.id === aItem.id ? prev : r;
+    best.set(key, {
+      ...envelope,
+      score: Math.max(prev.score, r.score),
+      id: winnerItem.id,
+      item: winnerItem,
+    });
+  }
+
+  const seenCanon = new Set<string>();
+  const out: CombinedResult[] = [];
+
+  for (const r of results) {
+    const key = dynamicCourseKey(r);
+    if (!key) {
+      out.push(r);
+      continue;
+    }
+    if (seenCanon.has(key)) continue;
+    seenCanon.add(key);
+    out.push(best.get(key)!);
+  }
+
+  return out;
+}

src/plugins/built-in/globalSearch/src/search/hybridSearch.ts

@@ -2,6 +2,32 @@ import type { IndexItem } from "../indexing/types";
 import type { CombinedResult } from "../core/types";
 import { searchVectors, type VectorSearchResult } from "./vector/vectorSearch";
 import { jobs } from "../indexing/jobs";
+import {
+  getLexicalMatchQuality,
+  isStrongLexicalMatch,
+  STRONG_LEXICAL_THRESHOLD,
+} from "./lexicalMatch";
+
+function isIndexItem(item: CombinedResult["item"]): item is IndexItem {
+  return (item as IndexItem).dateAdded !== undefined;
+}
+
+/**
+ * Heuristic for "this query is still too short / too sparse for vector
+ * recall to be reliable". When true we should not promote vector-only
+ * results above lexical ones.
+ *
+ * Note: this is intentionally distinct from the absolute >2 character cut-off
+ * used for `hybridSearch`. Vector recall on 3-7 character single-token
+ * queries is noisy enough that we should keep lexical results dominant.
+ */
+function isWeakSemanticQuery(trimmedQuery: string): boolean {
+  if (trimmedQuery.length < 8) return true;
+  const meaningfulTokens = trimmedQuery
+    .split(/\s+/)
+    .filter((t) => t.length >= 3);
+  return meaningfulTokens.length < 2;
+}
 
 /**
  * Hybrid Search Implementation
@@ -36,14 +62,6 @@ const DEFAULT_OPTIONS: Required<HybridSearchOptions> = {
   recencyWeight: 0.1,
 };
 
-/**
- * Normalizes a score to 0-1 range
- */
-function normalizeScore(score: number, min: number, max: number): number {
-  if (max === min) return 0.5;
-  return Math.max(0, Math.min(1, (score - min) / (max - min)));
-}
-
 /**
  * Calculates recency boost based on item age
  */
@@ -55,28 +73,56 @@ function calculateRecencyBoost(item: IndexItem, now: number): number {
 }
 
 /**
- * Calculates popularity boost (can be extended with click tracking, etc.)
+ * Category-aware popularity / structure boost.
+ *
+ * High-confidence curated content (assignments, courses, subjects, forums)
+ * sits above noisier sources (notices, documents) which sit above the
+ * passive store. This keeps the most actionable hits at the top while
+ * still surfacing wide-recall semantic matches when relevant.
  */
 function calculatePopularityBoost(item: IndexItem): number {
-  // For now, boost based on category and metadata
   let boost = 0;
-  
+
-  // Boost assignments/assessments
+  switch (item.category) {
-  if (item.category === "assignments") {
+    case "assignments":
-    boost += 0.1;
+      boost += 0.12;
+      break;
+    case "subjects":
+    case "courses":
+      boost += 0.08;
+      break;
+    case "forums":
+    case "messages":
+      boost += 0.06;
+      break;
+    case "notices":
+    case "folio":
+    case "reports":
+    case "goals":
+      boost += 0.04;
+      break;
+    case "documents":
+      boost += 0.03;
+      break;
+    case "portals":
+      boost += 0.02;
+      break;
+    case "passive":
+      boost -= 0.1;
+      break;
+    case "messages-support":
+      boost -= 0.18;
+      break;
   }
-  
+
-  // Boost upcoming items
+  if (item.metadata?.isUpcoming) boost += 0.12;
-  if (item.metadata?.isUpcoming) {
+  if (item.metadata?.subjectCode) boost += 0.04;
-    boost += 0.15;
+  if (item.metadata?.entityType === "course") boost += 0.02;
-  }
+  if (item.metadata?.source === "passive") boost -= 0.08;
-  
+  if (item.metadata?.supportRecord) boost -= 0.12;
-  // Boost items with subject codes (more structured)
+  if (item.metadata?.priority === "low") boost -= 0.05;
-  if (item.metadata?.subjectCode) {
+
-    boost += 0.05;
+  return Math.max(-0.2, Math.min(boost, 0.3));
-  }
-  
-  return Math.min(boost, 0.3); // Cap at 0.3
 }
 
 /**
@@ -97,11 +143,7 @@ export async function hybridSearch(
   
   // Limit BM25 results to top K
   const topBm25Results = bm25Results.slice(0, opts.bm25TopK);
-  
+
-  // Get vector search results for reranking
-  // We'll search the full index and then filter to our BM25 results
-  let vectorResults: VectorSearchResult[] = [];
-  
   if (trimmedQuery.length > 2) {
     try {
       // Get more vector results than BM25 results to ensure coverage
@@ -121,59 +163,59 @@ export async function hybridSearch(
       // Now rerank BM25 results with vector scores
       const now = Date.now();
       
-      const rerankedResults = topBm25Results.map(result => {
+      const rerankedResults: CombinedResult[] = topBm25Results.map(result => {
         const item = result.item;
-        
+
-        // Normalize BM25 score to 0-1
+        // Static command items don't have dateAdded/metadata/category to score
-        // Fuse.js scores: lower is better (0 = perfect match)
+        // against — pass them through untouched so palette commands still
-        // We need to invert: higher score = better match
+        // surface correctly.
-        // Result.score is typically 0-100, where higher = better
+        if (!isIndexItem(item)) {
-        // So we normalize it to 0-1
+          return result;
+        }
+
+        // Normalize BM25 score to 0-1.
+        // Result.score is typically 0-100, where higher = better, so we
+        // clamp into the 0..1 range.
         const normalizedBm25Score = Math.max(0, Math.min(1, result.score / 100));
-        
+
-        // Get vector similarity (0-1, already normalized)
+        // Get vector similarity (0-1, already normalized). If item wasn't in
-        // If item wasn't in vector results, use a default low score
+        // vector results, use a default mid-low score.
-        const vectorSimilarity = vectorMap.get(item.id) || 0.3; // Default to 0.3 if not found
+        const vectorSimilarity = vectorMap.get(item.id) || 0.3;
-        
+
-        // Calculate recency boost (0-1 range)
+        const recencyBoost = opts.recencyBoost
-        const recencyBoost = opts.recencyBoost 
           ? calculateRecencyBoost(item, now) * opts.recencyWeight
           : 0;
-        
+
-        // Calculate popularity boost (0-1 range)
         const popularityBoost = calculatePopularityBoost(item);
-        
+
-        // Apply job-specific boost if available
         const job = jobs[item.category];
         let jobBoost = 0;
         if (job && typeof job.boostCriteria === 'function') {
           const boost = job.boostCriteria(item, trimmedQuery);
           if (boost) {
-            jobBoost = boost / 100; // Normalize boost to 0-1
+            jobBoost = boost / 100;
           }
         }
-        
+
-        // Combine scores using weighted average
+        // Lexical guardrail: title matches must outweigh fuzzy vector/content
-        // BM25 and vector are weighted, boosts are additive
+        // overlap so exact titles lead the list.
-        const hybridScore = 
+        const lexicalQuality = getLexicalMatchQuality(item, trimmedQuery);
+        let lexicalBonus = lexicalQuality > 0 ? lexicalQuality / 80 : 0;
+        if (lexicalQuality >= 12) lexicalBonus += 0.42;
+        else if (lexicalQuality >= 10) lexicalBonus += 0.24;
+        else if (lexicalQuality >= 8) lexicalBonus += 0.14;
+
+        const hybridScore =
           (normalizedBm25Score * opts.bm25Weight) +
           (vectorSimilarity * opts.vectorWeight) +
           recencyBoost +
           popularityBoost +
-          jobBoost;
+          jobBoost +
-        
+          lexicalBonus;
+
         return {
           ...result,
-          score: hybridScore * 100, // Scale back to 0-100 for consistency
+          score: hybridScore * 100,
-          // Store component scores for debugging (optional, can be removed in production)
-          _hybridScores: {
-            bm25: normalizedBm25Score,
-            vector: vectorSimilarity,
-            recency: recencyBoost,
-            popularity: popularityBoost,
-            jobBoost: jobBoost,
-            final: hybridScore,
-          },
         };
       });
       
@@ -200,20 +242,27 @@ export async function hybridSearch(
 export async function hybridSearchWithExpansion(
   bm25Results: CombinedResult[],
   query: string,
-  allItems: IndexItem[],
+  _allItems: IndexItem[],
   options: HybridSearchOptions = {},
 ): Promise<CombinedResult[]> {
   const opts = { ...DEFAULT_OPTIONS, ...options };
   const trimmedQuery = query.trim().toLowerCase();
-  
+
   // First, rerank BM25 results
   const rerankedBm25 = await hybridSearch(bm25Results, query, options);
-  
+
   // If query is too short, skip vector expansion
   if (trimmedQuery.length <= 2) {
     return rerankedBm25;
   }
-  
+
+  // For short / single-token queries vector expansion brings in too much
+  // noise (and is the main reason results "flicker" between adjacent
+  // keystrokes). Keep semantic recall for longer queries.
+  if (isWeakSemanticQuery(trimmedQuery)) {
+    return rerankedBm25.slice(0, opts.finalLimit);
+  }
+
   // Get vector search results
   let vectorResults: VectorSearchResult[] = [];
   try {
@@ -222,59 +271,88 @@ export async function hybridSearchWithExpansion(
     console.warn("[Hybrid Search] Vector search failed:", e);
     return rerankedBm25;
   }
-  
+
   // Find vector results that weren't in BM25 results
   const bm25Ids = new Set(bm25Results.map(r => r.item.id));
   const vectorOnlyResults: CombinedResult[] = [];
-  
+
   const now = Date.now();
-  
+
-  vectorResults.forEach(v => {
+  // Compute the floor at which a vector-only result is allowed to enter the
-    if (!bm25Ids.has(v.object.id)) {
+  // ranking. Strong lexical matches in the BM25 list set this floor — a
-      // This is a semantic match that BM25 missed
+  // vector-only result must beat the lowest strong lexical match's score by
-      const item = v.object;
+  // a margin to displace it.
-      
+  let strongLexicalFloor = -Infinity;
-      // Calculate boosts
+  for (const r of rerankedBm25) {
-      const recencyBoost = opts.recencyBoost 
+    if (isIndexItem(r.item) && isStrongLexicalMatch(r.item, trimmedQuery)) {
-        ? calculateRecencyBoost(item, now) * opts.recencyWeight
+      if (r.score > strongLexicalFloor) {
-        : 0;
+        strongLexicalFloor = r.score;
-      const popularityBoost = calculatePopularityBoost(item);
-      
-      // Vector-only results get lower base score but high vector similarity
-      const vectorScore = v.similarity * opts.vectorWeight + recencyBoost + popularityBoost;
-      
-      // Apply job-specific boost if available
-      const job = jobs[item.category];
-      let jobBoost = 0;
-      if (job && typeof job.boostCriteria === 'function') {
-        const boost = job.boostCriteria(item, trimmedQuery);
-        if (boost) {
-          jobBoost = boost / 100; // Normalize boost
-        }
       }
-      
-      vectorOnlyResults.push({
-        id: item.id,
-        type: "dynamic" as const,
-        score: (vectorScore + jobBoost) * 100,
-        item,
-        _hybridScores: {
-          bm25: 0,
-          vector: v.similarity,
-          recency: recencyBoost,
-          popularity: popularityBoost,
-          final: vectorScore + jobBoost,
-        },
-      });
     }
+  }
+  // Vector-only results may sit at most at this score:
+  const vectorOnlyCeiling = strongLexicalFloor === -Infinity
+    ? Infinity
+    : strongLexicalFloor - 1;
+
+  vectorResults.forEach(v => {
+    if (bm25Ids.has(v.object.id)) return;
+
+    // This is a semantic match that BM25 missed
+    const item = v.object;
+
+    // Calculate boosts
+    const recencyBoost = opts.recencyBoost
+      ? calculateRecencyBoost(item, now) * opts.recencyWeight
+      : 0;
+    const popularityBoost = calculatePopularityBoost(item);
+
+    // Penalize vector-only matches that have no lexical content overlap.
+    // Vector recall on its own is fuzzy — without lexical confirmation we
+    // should rank these below curated keyword hits.
+    const lexicalQuality = getLexicalMatchQuality(item, trimmedQuery);
+    let vectorOnlyPenalty = 0;
+    if (lexicalQuality === 0) {
+      vectorOnlyPenalty -= 0.18;
+    }
+
+    // Passive captures without lexical confirmation are demoted further —
+    // they're often raw API records that should never lead the result list.
+    if (item.category === "passive" && lexicalQuality < STRONG_LEXICAL_THRESHOLD) {
+      vectorOnlyPenalty -= 0.12;
+    }
+
+    // Vector-only results get lower base score but high vector similarity
+    const vectorScore =
+      v.similarity * opts.vectorWeight + recencyBoost + popularityBoost + vectorOnlyPenalty;
+
+    // Apply job-specific boost if available
+    const job = jobs[item.category];
+    let jobBoost = 0;
+    if (job && typeof job.boostCriteria === 'function') {
+      const boost = job.boostCriteria(item, trimmedQuery);
+      if (boost) {
+        jobBoost = boost / 100; // Normalize boost
+      }
+    }
+
+    let finalScore = (vectorScore + jobBoost) * 100;
+    if (finalScore > vectorOnlyCeiling) finalScore = vectorOnlyCeiling;
+
+    vectorOnlyResults.push({
+      id: item.id,
+      type: "dynamic" as const,
+      score: finalScore,
+      item,
+    });
   });
-  
+
   // Combine reranked BM25 results with vector-only results
   const allResults = [...rerankedBm25, ...vectorOnlyResults];
-  
+
   // Sort by score and return top results
   allResults.sort((a, b) => b.score - a.score);
-  
+
   return allResults.slice(0, opts.finalLimit);
 }
 

src/plugins/built-in/globalSearch/src/search/lexicalMatch.ts

@@ -0,0 +1,118 @@
+import type { IndexItem } from "../indexing/types";
+
+/**
+ * Maximum bonus a strong lexical title match can contribute on top of the
+ * underlying Fuse / hybrid score. Tuned to outweigh small vector reranking
+ * deltas so a true assessment-title match cannot be displaced by a vector
+ * neighbour as the user types one more character.
+ */
+export const LEXICAL_TITLE_BONUS = 12;
+
+/**
+ * Threshold at or above which a result counts as a "strong lexical match".
+ * Strong matches must always be surfaced and protected from vector reranking
+ * displacing them.
+ */
+export const STRONG_LEXICAL_THRESHOLD = 6;
+
+const WORD_SPLIT_RE = /\s+/;
+const NON_WORD_RE = /[^a-z0-9]+/gi;
+
+function normalize(value: string | undefined | null): string {
+  if (!value) return "";
+  return String(value).toLowerCase().trim();
+}
+
+function tokens(value: string): string[] {
+  return normalize(value)
+    .split(WORD_SPLIT_RE)
+    .map((t) => t.replace(NON_WORD_RE, ""))
+    .filter(Boolean);
+}
+
+/**
+ * Score how strongly the query lexically matches the title-like fields of an
+ * IndexItem. Return value is a non-negative number — 0 means no useful match.
+ *
+ * Tiers (roughly):
+ *   ~12  exact title equality
+ *   ~10  title starts with full query string
+ *   ~8   title contains full query string, on a word boundary
+ *   ~7   ordered token-prefix match (e.g. `world w` vs `World War 2 Essay`)
+ *   ~5   subject / metadata title contains query
+ *   ~3   any token in title starts with query
+ *   ~2   substring anywhere in title
+ *   0    no lexical signal
+ *
+ * The function is intentionally cheap (string ops only, no regex compilation
+ * per call beyond the constants above) because it is called for every item in
+ * the candidate pool.
+ */
+export function getLexicalMatchQuality(item: IndexItem, query: string): number {
+  const q = normalize(query);
+  if (!q) return 0;
+
+  const title = normalize(item.text);
+  if (!title) return 0;
+
+  if (title === q) return 12;
+  if (title.startsWith(q + " ") || title.startsWith(q)) return 10;
+
+  const queryTokens = tokens(q);
+  const titleTokens = tokens(title);
+
+  if (queryTokens.length > 0 && titleTokens.length >= queryTokens.length) {
+    let bestStreakStart = -1;
+    for (let i = 0; i <= titleTokens.length - queryTokens.length; i++) {
+      let ok = true;
+      for (let j = 0; j < queryTokens.length; j++) {
+        const tt = titleTokens[i + j];
+        const qt = queryTokens[j];
+        const isLast = j === queryTokens.length - 1;
+        if (isLast) {
+          if (!tt.startsWith(qt)) {
+            ok = false;
+            break;
+          }
+        } else {
+          if (tt !== qt) {
+            ok = false;
+            break;
+          }
+        }
+      }
+      if (ok) {
+        bestStreakStart = i;
+        break;
+      }
+    }
+    if (bestStreakStart === 0) return 9;
+    if (bestStreakStart > 0) return 7;
+  }
+
+  if (title.includes(" " + q) || title.includes(q + " ")) return 8;
+
+  // Token starts-with anywhere
+  for (const t of titleTokens) {
+    if (t.startsWith(q)) return 3;
+  }
+
+  // Subject / curated metadata title
+  const md = (item.metadata ?? {}) as Record<string, unknown>;
+  const subjectName = normalize(
+    typeof md.subjectName === "string" ? md.subjectName : "",
+  );
+  const subjectCode = normalize(
+    typeof md.subjectCode === "string" ? md.subjectCode : "",
+  );
+  if (subjectName && (subjectName === q || subjectName.startsWith(q))) return 5;
+  if (subjectCode && (subjectCode === q || subjectCode.startsWith(q))) return 5;
+
+  if (title.includes(q)) return 2;
+
+  return 0;
+}
+
+export function isStrongLexicalMatch(item: IndexItem, query: string): boolean {
+  return getLexicalMatchQuality(item, query) >= STRONG_LEXICAL_THRESHOLD;
+}

src/plugins/built-in/globalSearch/src/search/searchUtils.ts

@@ -3,10 +3,64 @@ import { getStaticCommands, type StaticCommandItem } from "../core/commands";
 import { getDynamicItems } from "../utils/dynamicItems";
 import type { CombinedResult } from "../core/types";
 import type { IndexItem } from "../indexing/types";
-import { searchVectors } from "./vector/vectorSearch";
+import { dedupeCombinedResultsByCourseNav, dedupeIndexItemsForSearch } from "./dedupeIndexItems";
-import type { VectorSearchResult } from "./vector/vectorTypes";
-import { jobs } from "../indexing/jobs";
 import { hybridSearchWithExpansion } from "./hybridSearch";
+import {
+  getLexicalMatchQuality,
+  isStrongLexicalMatch,
+  STRONG_LEXICAL_THRESHOLD,
+} from "./lexicalMatch";
+
+/** Same normalization as lexical matching (trim + lowercase). */
+function normSearchKey(s: string): string {
+  return s.trim().toLowerCase();
+}
+
+/**
+ * Exact title tiers so palette navigation (e.g. "Home", "Assessments") always
+ * wins over hybrid-scored body matches. Higher = sort earlier.
+ */
+function exactTitleSortTier(r: CombinedResult, queryNorm: string): number {
+  if (!queryNorm) return 0;
+  if (r.type === "command") {
+    const cmd = r.item as StaticCommandItem;
+    if (normSearchKey(cmd.text) !== queryNorm) return 0;
+    return cmd.category === "navigation" ? 3 : 2;
+  }
+  const ix = r.item as IndexItem;
+  if (normSearchKey(ix.text) === queryNorm) return 1;
+  return 0;
+}
+
+function compareCombinedSearchResults(
+  a: CombinedResult,
+  b: CombinedResult,
+  queryNorm: string,
+): number {
+  const tierDiff = exactTitleSortTier(b, queryNorm) - exactTitleSortTier(a, queryNorm);
+  if (tierDiff !== 0) return tierDiff;
+
+  if (a.type === "command" && b.type === "dynamic") {
+    return b.score - a.score - 10;
+  }
+  if (a.type === "dynamic" && b.type === "command") {
+    return b.score - a.score + 10;
+  }
+  return b.score - a.score;
+}
+
+function syntheticIndexFromCommand(cmd: StaticCommandItem): IndexItem {
+  return {
+    id: cmd.id,
+    text: cmd.text,
+    category: cmd.category,
+    content: "",
+    dateAdded: 0,
+    metadata: {},
+    actionId: "",
+    renderComponentId: "",
+  };
+}
 
 // Search result cache for better performance
 const searchCache = new Map<string, { results: CombinedResult[]; timestamp: number }>();
@@ -25,7 +79,9 @@ function setCachedResults(query: string, results: CombinedResult[]) {
   // Limit cache size
   if (searchCache.size >= MAX_CACHE_SIZE) {
     const firstKey = searchCache.keys().next().value;
-    searchCache.delete(firstKey);
+    if (firstKey !== undefined) {
+      searchCache.delete(firstKey);
+    }
   }
   searchCache.set(query, { results, timestamp: Date.now() });
 }
@@ -46,8 +102,9 @@ if (typeof window !== 'undefined') {
 }
 
 export function createSearchIndexes() {
+  clearSearchCache();
   const commands = getStaticCommands();
-  const dynamicItems = getDynamicItems();
+  const dynamicItems = dedupeIndexItemsForSearch(getDynamicItems());
 
   // Optimized command search options
   const commandOptions = {
@@ -61,23 +118,40 @@ export function createSearchIndexes() {
     findAllMatches: false, // Performance optimization
   };
 
-  // Optimized dynamic content search options
+  // Optimized dynamic content search options.
+  // The expanded corpus mixes structured entities (assessments, subjects)
+  // with free-form text (course content, notices, folio bodies, passive
+  // captures) so we list a broad set of metadata keys while keeping titles
+  // dominant in the ranking.
+  // NOTE: metadata.route is intentionally excluded. Raw API paths like
+  // `/seqta/student/load/message/people` should never influence ranking — they
+  // historically caused passive-capture support records to bubble up above
+  // real assessments when the user typed substrings that happened to appear in
+  // the path.
   const dynamicOptions = {
     keys: [
-      { name: "text", weight: 3 }, // Increased weight for title matches
+      { name: "text", weight: 3 }, // Title is king
       { name: "content", weight: 1 },
-      { name: "category", weight: 0.5 }, // Lower weight for category
+      { name: "category", weight: 0.4 },
-      { name: "metadata.subjectName", weight: 1.5 }, // Boost subject name matches
+      { name: "metadata.subjectName", weight: 1.6 },
-      { name: "metadata.subjectCode", weight: 1.5 }, // Boost subject code matches
+      { name: "metadata.subjectCode", weight: 1.6 },
+      { name: "metadata.subject", weight: 1.4 },
+      { name: "metadata.courseCode", weight: 1.2 },
+      { name: "metadata.filename", weight: 1.2 },
+      { name: "metadata.author", weight: 0.8 },
+      { name: "metadata.authorName", weight: 0.8 },
+      { name: "metadata.label", weight: 0.6 },
+      { name: "metadata.categoryName", weight: 0.6 },
+      { name: "metadata.entityType", weight: 0.4 },
     ],
     includeScore: true,
     includeMatches: true,
-    threshold: 0.5, // More permissive for better partial word matching (increased from 0.4)
+    threshold: 0.5,
-    minMatchCharLength: 2, // Minimum 2 characters for Fuse.js matches (substring fallback handles shorter queries)
+    minMatchCharLength: 2,
-    distance: 100, // Increased to allow matches across longer strings
+    distance: 100,
     useExtendedSearch: true,
-    ignoreLocation: true, // Allow matches anywhere in the string for better partial word matching
+    ignoreLocation: true,
-    findAllMatches: true, // Enable to find all matches for better partial word support
+    findAllMatches: true,
     shouldSort: true,
   };
 
@@ -117,7 +191,19 @@ export function searchCommands(
   return searchResults.map((result: FuseResult<StaticCommandItem>) => {
     const item = result.item;
     const fuseScore = 15 * (1 - (result.score || 0.5));
-    const score = fuseScore + (item.priority ?? 0);
+    let score = fuseScore + (item.priority ?? 0);
+
+    // Static palette titles share the same lexical tiers as index titles, but
+    // Fuse scores are tiny versus hybrid dynamic scores — scale title matches
+    // up so "Assessments" / prefix matches stay competitive with body hits.
+    const titleLex = getLexicalMatchQuality(syntheticIndexFromCommand(item), query);
+    if (titleLex >= 12) score += 240;
+    else if (titleLex >= 10) score += 195;
+    else if (titleLex >= 9) score += 165;
+    else if (titleLex >= 8) score += 140;
+    else if (titleLex >= 7) score += 120;
+    else if (titleLex >= 6) score += 100;
+    else if (titleLex > 0) score += titleLex * 14;
 
     return {
       id: item.id,
@@ -189,23 +275,32 @@ export function searchDynamicItems(
   const results = searchResults.map((result: FuseResult<IndexItem>) => {
     const item = result.item;
     const fuseScore = 10 * (1 - (result.score || 0.5));
-    
+
     let score = fuseScore;
 
     // Recency boost
     const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
     const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
     score += recencyBoost;
-    
+
-    // Boost for exact text matches (especially at the start)
+    // Lexical title bonus — sticky across adjacent keystrokes so a strong
-    const textLower = item.text.toLowerCase();
+    // title prefix match like `world wa` doesn't disappear from the top once
-    if (textLower.startsWith(queryLower)) {
+    // vector reranking kicks in.
-      score += 5; // Strong boost for prefix matches
+    const lexicalQuality = getLexicalMatchQuality(item, queryLower);
-    } else if (textLower.includes(queryLower)) {
+    if (lexicalQuality > 0) {
-      score += 2; // Boost for substring matches
+      score += lexicalQuality;
+      // Curated-content boost: assessments and assignments with a strong
+      // title match should be elevated further, since they are the items
+      // users are most often hunting for.
+      if (
+        lexicalQuality >= STRONG_LEXICAL_THRESHOLD &&
+        (item.category === "assignments" || item.category === "assessments")
+      ) {
+        score += 4;
+      }
     }
-    
+
-    // Boost for category matches
+    // Category match (small nudge)
     if (item.category.toLowerCase().includes(queryLower)) {
       score += 1;
     }
@@ -218,37 +313,34 @@ export function searchDynamicItems(
       matches: result.matches,
     };
   });
-  
+
   // Add additional matches from simple substring search
   additionalMatches.forEach((item) => {
-    // Check if already in results
     if (!results.find(r => r.id === item.id)) {
-      const textLower = item.text.toLowerCase();
       let score = 5; // Base score for substring matches
-      
+
-      // Boost for prefix matches
+      const lexicalQuality = getLexicalMatchQuality(item, queryLower);
-      if (textLower.startsWith(queryLower)) {
+      score += lexicalQuality;
-        score += 5;
+
-      }
-      
-      // Recency boost
       const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
       const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
       score += recencyBoost;
-      
+
       results.push({
         id: item.id,
         type: "dynamic" as const,
         score,
         item,
+        matches: undefined,
       });
     }
   });
-  
+
   // Sort by score and return top results
   return results.sort((a, b) => b.score - a.score).slice(0, limit);
 }
 
+
 export async function performSearch(
   query: string,
   commandsFuse: Fuse<StaticCommandItem>,
@@ -286,12 +378,37 @@ export async function performSearch(
       sortByRecent,
     );
 
+    // Step 2b: Always include strong lexical title matches, even if Fuse
+    // missed them with the current threshold. This is the safety net that
+    // stops `world wa` from dropping a `World War 2 Essay` assessment that
+    // `world w` happily showed.
+    const allItems = Array.from(dynamicIdToItemMap.values());
+    const seen = new Set(bm25Results.map((r) => r.id));
+    const lexicalAdds: CombinedResult[] = [];
+    for (const item of allItems) {
+      if (seen.has(item.id)) continue;
+      if (!isStrongLexicalMatch(item, trimmedQuery)) continue;
+      const quality = getLexicalMatchQuality(item, trimmedQuery);
+      let score = 6 + quality;
+      if (item.category === "assignments" || item.category === "assessments") {
+        score += 4;
+      }
+      lexicalAdds.push({
+        id: item.id,
+        type: "dynamic" as const,
+        score,
+        item,
+        matches: undefined,
+      });
+    }
+    if (lexicalAdds.length > 0) {
+      bm25Results.push(...lexicalAdds);
+      bm25Results.sort((a, b) => b.score - a.score);
+    }
+
     // Step 3: Apply hybrid search (BM25 + Vector reranking + boosting)
     if (trimmedQuery.length > 2 && bm25Results.length > 0) {
       try {
-        // Get all items for expansion
-        const allItems = Array.from(dynamicIdToItemMap.values());
-        
         // Apply hybrid search with expansion
         dynamicResults = await hybridSearchWithExpansion(
           bm25Results,
@@ -319,23 +436,20 @@ export async function performSearch(
 
   // Step 4: Combine command and dynamic results
   const allResults = [...commandResults, ...dynamicResults];
-  
+
-  // Sort by score (commands typically have higher priority)
+  allResults.sort((a, b) =>
-  allResults.sort((a, b) => {
+    compareCombinedSearchResults(a, b, trimmedQuery),
-    // Commands always come first if scores are similar
+  );
-    if (a.type === "command" && b.type === "dynamic") {
+
-      return b.score - a.score - 10; // Commands get +10 boost
+  const dedupedResults = dedupeCombinedResultsByCourseNav(allResults);
-    }
+  dedupedResults.sort((a, b) =>
-    if (a.type === "dynamic" && b.type === "command") {
+    compareCombinedSearchResults(a, b, trimmedQuery),
-      return b.score - a.score + 10; // Commands get +10 boost
+  );
-    }
-    return b.score - a.score;
-  });
 
   // Cache results for queries longer than 2 chars
   if (trimmedQuery.length > 2) {
-    setCachedResults(trimmedQuery, allResults);
+    setCachedResults(trimmedQuery, dedupedResults);
   }
 
-  return allResults;
+  return dedupedResults;
 }

src/plugins/built-in/globalSearch/src/search/vector/vectorSearch.ts

@@ -40,7 +40,6 @@ export interface VectorSearchResult extends SearchResult {
 
 // Cache for query embeddings to avoid recomputing
 const embeddingCache = new Map<string, number[]>();
-const EMBEDDING_CACHE_TTL = 1000 * 60 * 30; // 30 minutes
 const MAX_EMBEDDING_CACHE_SIZE = 50;
 
 function getCachedEmbedding(query: string): number[] | null {
@@ -55,7 +54,9 @@ function setCachedEmbedding(query: string, embedding: number[]) {
   // Limit cache size
   if (embeddingCache.size >= MAX_EMBEDDING_CACHE_SIZE) {
     const firstKey = embeddingCache.keys().next().value;
-    embeddingCache.delete(firstKey);
+    if (firstKey !== undefined) {
+      embeddingCache.delete(firstKey);
+    }
   }
   embeddingCache.set(query, embedding);
 }

src/plugins/built-in/globalSearch/src/utils/versionCheck.ts

@@ -1,4 +1,5 @@
 import browser from "webextension-polyfill";
+import { resetSearchIndexes } from "../indexing/resetIndexes";
 
 const VERSION_STORAGE_KEY = "betterseqta-global-search-version";
 const VERSION_CACHE_KEY = "betterseqta-global-search-cache-version";
@@ -40,34 +41,53 @@ export function storeVersion(version: string): void {
 }
 
 /**
- * Checks if the extension has been updated and clears caches if needed
+ * Checks if the extension has been updated and clears caches + resets the
- * Returns true if an update was detected
+ * search index if needed.
+ *
+ * The reset is intentionally aggressive: every manifest version bump
+ * triggers a full IndexedDB wipe so changes to indexer extraction logic,
+ * job sets, or item shape can never serve stale results from an older
+ * build. The next indexing pass will repopulate from scratch in the
+ * background. Re-population is bounded by the per-job rate limits in
+ * `api.ts` so it can't hammer SEQTA after an update.
+ *
+ * Returns true if an update was detected.
  */
 export async function checkAndHandleUpdate(): Promise<boolean> {
   const currentVersion = getCurrentVersion();
   const storedVersion = getStoredVersion();
-  
+
-  // If no stored version, this is first run - store current version
+  // First run: just remember the version, don't reset (the user likely
+  // just installed the extension; the index is already empty).
   if (!storedVersion) {
-    console.debug(`[Version Check] First run detected, storing version ${currentVersion}`);
+    console.debug(
+      `[Version Check] First run detected, storing version ${currentVersion}`,
+    );
     storeVersion(currentVersion);
     return false;
   }
-  
+
-  // If versions match, no update
   if (storedVersion === currentVersion) {
     return false;
   }
-  
+
-  // Version mismatch detected - extension was updated
+  console.log(
-  console.log(`[Version Check] Extension updated from ${storedVersion} to ${currentVersion}, clearing caches...`);
+    `[Version Check] Extension updated from ${storedVersion} to ${currentVersion}, resetting search index...`,
-  
+  );
-  // Clear all caches
+
   await clearAllCaches();
-  
+
-  // Store new version
+  try {
+    await resetSearchIndexes();
+    console.log(
+      "[Version Check] Search index reset; next indexing pass will repopulate from scratch.",
+    );
+  } catch (e) {
+    console.warn("[Version Check] resetSearchIndexes failed:", e);
+  }
+
   storeVersion(currentVersion);
-  
+
   return true;
 }
 

src/plugins/built-in/gradeAnalytics/AnalyticsAreaChart.svelte

@@ -0,0 +1,388 @@
+<script lang="ts">
+
+  import * as Chart from "./chart/index";
+
+  import { scaleUtc, scaleLinear } from "d3-scale";
+
+  import { Area, AreaChart, ChartClipPath } from "layerchart";
+
+  import { curveNatural } from "d3-shape";
+
+  import { cubicInOut } from "svelte/easing";
+
+  import type { Assessment } from "./types";
+
+  import {
+
+    buildGradeTrendChart,
+
+    getTimeRangeLabel,
+
+    type TimeRange,
+
+  } from "./timeRange";
+
+
+
+  interface Props {
+
+    data: Assessment[];
+
+    timeRange: TimeRange;
+
+    showSubjectTrends?: boolean;
+
+  }
+
+
+
+  let { data, timeRange, showSubjectTrends = false }: Props = $props();
+
+
+
+  const chartUid = `area-${Math.random().toString(36).slice(2, 9)}`;
+
+
+
+  const chartResult = $derived(() =>
+
+    buildGradeTrendChart(data, timeRange, {
+
+      showPerSubject: showSubjectTrends,
+
+    }),
+
+  );
+
+
+
+  const filteredData = $derived(() => chartResult().points);
+
+  const chartSeries = $derived(() => chartResult().series);
+
+  const accentColor = $derived(() => chartResult().accentColor);
+
+
+
+  const chartConfig = $derived(() => {
+
+    const config: Chart.ChartConfig = {};
+
+    for (const s of chartSeries()) {
+
+      config[s.key] = { label: s.label, color: s.color };
+
+    }
+
+    return config;
+
+  });
+
+
+
+  const yScale = $derived.by(() => {
+
+    const points = filteredData();
+
+    const series = chartSeries();
+
+    if (!points.length) return scaleLinear().domain([0, 100]);
+
+    const values: number[] = [];
+
+    for (const p of points) {
+
+      for (const s of series) {
+
+        const v = p[s.key];
+
+        if (typeof v === "number" && !Number.isNaN(v)) values.push(v);
+
+      }
+
+    }
+
+    if (!values.length) return scaleLinear().domain([0, 100]);
+
+    const min = Math.max(0, Math.min(...values) - 8);
+
+    const max = Math.min(100, Math.max(...values) + 8);
+
+    return scaleLinear().domain([min, max]).nice();
+
+  });
+
+
+
+  const trend = $derived(() => {
+
+    const points = filteredData();
+
+    if (points.length < 2) return { percentage: "0", direction: "neutral" as const };
+
+    const recent = points.slice(-2);
+
+    const change = recent[1].average - recent[0].average;
+
+    return {
+
+      percentage: Math.abs(change).toFixed(1),
+
+      direction: change > 0 ? ("up" as const) : change < 0 ? ("down" as const) : ("neutral" as const),
+
+    };
+
+  });
+
+
+
+  const areaSeries = $derived(() =>
+
+    chartSeries().map((s) => ({
+
+      key: s.key,
+
+      label: s.label,
+
+      color: s.color,
+
+    })),
+
+  );
+
+</script>
+
+
+
+<article class="bsplus-analytics-card">
+
+  <header class="bsplus-analytics-card-header">
+
+    <div>
+
+      <h3 class="bsplus-analytics-card-title">Grade trends</h3>
+
+      <p class="bsplus-analytics-card-desc">
+
+        {#if showSubjectTrends}
+
+          Overall and per-subject averages · {getTimeRangeLabel(timeRange)}
+
+        {:else}
+
+          Average grades over time · {getTimeRangeLabel(timeRange)}
+
+        {/if}
+
+      </p>
+
+    </div>
+
+  </header>
+
+
+
+  <div class="bsplus-analytics-card-body">
+
+    {#if filteredData().length > 0}
+
+      <Chart.Container config={chartConfig()} class="bsplus-chart-surface w-full">
+
+        <AreaChart
+
+          legend
+
+          data={filteredData()}
+
+          x="date"
+
+          xScale={scaleUtc()}
+
+          yScale={yScale()}
+
+          series={areaSeries()}
+
+          props={{
+
+            area: {
+
+              curve: curveNatural,
+
+              "fill-opacity": showSubjectTrends ? 0.12 : 0.35,
+
+              line: { class: "stroke-2" },
+
+              motion: "tween",
+
+            },
+
+            xAxis: {
+
+              ticks: timeRange === "7d" ? 7 : undefined,
+
+              format: (v: Date) =>
+
+                v.toLocaleDateString("en-US", {
+
+                  month: "short",
+
+                  day: timeRange === "7d" ? "numeric" : undefined,
+
+                }),
+
+            },
+
+            yAxis: {
+
+              format: (v: number) => `${v.toFixed(0)}%`,
+
+            },
+
+          }}
+
+        >
+
+          {#snippet marks({ series, getAreaProps })}
+
+            <defs>
+
+              <linearGradient id={chartUid} x1="0" y1="0" x2="0" y2="1">
+
+                <stop offset="0%" stop-color={accentColor()} stop-opacity="0.55" />
+
+                <stop offset="100%" stop-color={accentColor()} stop-opacity="0.04" />
+
+              </linearGradient>
+
+            </defs>
+
+            <ChartClipPath
+
+              initialWidth={0}
+
+              motion={{
+
+                width: { type: "tween", duration: 900, easing: cubicInOut },
+
+              }}
+
+            >
+
+              {#each series as s, i (s.key)}
+
+                {@const meta = chartSeries().find((c) => c.key === s.key)}
+
+                {@const isOverall = meta?.isOverall ?? s.key === "average"}
+
+                <Area
+
+                  {...getAreaProps(s, i)}
+
+                  fill={isOverall && !showSubjectTrends
+
+                    ? `url(#${chartUid})`
+
+                    : isOverall
+
+                      ? accentColor()
+
+                      : "transparent"}
+
+                  fill-opacity={isOverall ? (showSubjectTrends ? 0.08 : 0.35) : 0}
+
+                  stroke={meta?.color ?? s.color}
+
+                  style={`stroke: ${meta?.color ?? s.color}`}
+
+                />
+
+              {/each}
+
+            </ChartClipPath>
+
+          {/snippet}
+
+          {#snippet tooltip()}
+
+            <Chart.Tooltip
+
+              labelFormatter={(v: Date) =>
+
+                v.toLocaleDateString("en-US", {
+
+                  month: "long",
+
+                  day: "numeric",
+
+                  year: "numeric",
+
+                })}
+
+              indicator="line"
+
+            />
+
+          {/snippet}
+
+        </AreaChart>
+
+      </Chart.Container>
+
+    {:else}
+
+      <div class="bsplus-analytics-card-empty">
+
+        <strong>No grade data for this range</strong>
+
+        <span>Complete assessments with released marks to see trends.</span>
+
+      </div>
+
+    {/if}
+
+  </div>
+
+
+
+  <footer class="bsplus-analytics-card-footer">
+
+    {#if trend().direction === "up"}
+
+      <span class="bsplus-analytics-trend-up"
+
+        >Trending up · {trend().percentage}% vs previous period</span
+
+      >
+
+    {:else if trend().direction === "down"}
+
+      <span class="bsplus-analytics-trend-down"
+
+        >Trending down · {trend().percentage}% vs previous period</span
+
+      >
+
+    {:else}
+
+      <span>Grades remain stable across this period</span>
+
+    {/if}
+
+    <br />
+
+    <span>
+
+      {filteredData().length} data points · {getTimeRangeLabel(timeRange)}
+
+      {#if showSubjectTrends && chartSeries().length > 1}
+
+        · {chartSeries().length - 1} subject{chartSeries().length - 1 === 1 ? "" : "s"}
+
+      {/if}
+
+    </span>
+
+  </footer>
+
+</article>
+

src/plugins/built-in/gradeAnalytics/AnalyticsBarChart.svelte

@@ -0,0 +1,408 @@
+<script lang="ts">
+
+  import { onMount } from "svelte";
+
+  import { scaleBand, scaleLinear } from "d3-scale";
+
+  import { BarChart } from "layerchart";
+
+  import * as Chart from "./chart/index";
+
+  import { cubicInOut } from "svelte/easing";
+
+  import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
+
+  import type { Assessment } from "./types";
+
+  import { getTimeRangeLabel, type TimeRange } from "./timeRange";
+
+  import {
+
+    buildGradeDistribution,
+
+    DISTRIBUTION_MODE_OPTIONS,
+
+    type DistributionMode,
+
+  } from "./gradeDistribution";
+
+  import { loadDistributionMode, saveDistributionMode } from "./storage";
+
+
+
+  interface Props {
+
+    data: Assessment[];
+
+    timeRange: TimeRange;
+
+  }
+
+
+
+  let { data, timeRange }: Props = $props();
+
+
+
+  let distributionMode: DistributionMode = $state("auto");
+
+  let modeReady = $state(false);
+
+  let studentId: number | null = $state(null);
+
+
+
+  const accentColor =
+
+    "var(--bsplus-analytics-accent, var(--better-main, #007bff))";
+
+
+
+  const distribution = $derived(() =>
+
+    buildGradeDistribution(data, distributionMode),
+
+  );
+
+
+
+  const chartData = $derived(() =>
+
+    distribution().buckets.map((b) => ({
+
+      grade: b.label,
+
+      count: b.count,
+
+      minPercent: b.minPercent,
+
+      maxPercent: b.maxPercent,
+
+    })),
+
+  );
+
+  const useLetterScaleLabels = $derived(() => distribution().modeUsed === "letter");
+
+  function formatXTick(label: string): string {
+
+    if (!useLetterScaleLabels()) return label;
+
+    const row = chartData().find((d) => d.grade === label);
+
+    if (
+
+      row?.minPercent !== undefined &&
+
+      row?.maxPercent !== undefined &&
+
+      !(row.minPercent === 0 && row.maxPercent === 100)
+
+    ) {
+
+      return `${label}\n${Math.round(row.minPercent)}–${Math.round(row.maxPercent)}%`;
+
+    }
+
+    return label;
+
+  }
+
+
+
+  const chartConfig = $derived(() => {
+
+    const config: Chart.ChartConfig = {
+
+      count: { label: "Assessments", color: accentColor },
+
+    };
+
+    return config;
+
+  });
+
+
+
+  const yMax = $derived(Math.max(1, ...chartData().map((d) => d.count)));
+
+
+
+  const yScale = $derived(scaleLinear().domain([0, yMax]).nice());
+
+
+
+  const totalAssessments = $derived(distribution().gradedCount);
+
+
+
+  const modeOptionLabel = $derived(
+
+    DISTRIBUTION_MODE_OPTIONS.find((o) => o.value === distributionMode)?.label ??
+
+      "Auto",
+
+  );
+
+
+
+  const subtitle = $derived(() => {
+
+    const d = distribution();
+
+    if (d.modeUsed === "letter") {
+
+      return `Assessments per letter grade · ${getTimeRangeLabel(timeRange)}`;
+
+    }
+
+    return `Assessments per grade band · ${getTimeRangeLabel(timeRange)}`;
+
+  });
+
+
+
+  onMount(async () => {
+
+    try {
+
+      const info = await getUserInfo();
+
+      if (info?.id) {
+
+        studentId = info.id;
+
+        const saved = await loadDistributionMode(location.origin, info.id);
+
+        if (saved) distributionMode = saved;
+
+      }
+
+    } catch {
+
+      /* use default */
+
+    } finally {
+
+      modeReady = true;
+
+    }
+
+  });
+
+
+
+  async function onModeChange(next: DistributionMode) {
+
+    distributionMode = next;
+
+    if (studentId != null) {
+
+      await saveDistributionMode(location.origin, studentId, next);
+
+    }
+
+  }
+
+</script>
+
+
+
+<article class="bsplus-analytics-card">
+
+  <header class="bsplus-analytics-card-header bsplus-analytics-card-header-split">
+
+    <div>
+
+      <h3 class="bsplus-analytics-card-title">Grade distribution</h3>
+
+      <p class="bsplus-analytics-card-desc">{subtitle()}</p>
+
+    </div>
+
+    <div class="bsplus-analytics-card-controls">
+
+      <label class="bsplus-analytics-card-control">
+
+        <span class="bsplus-analytics-field-label">Grouping</span>
+
+        <select
+
+          class="bsplus-analytics-select bsplus-analytics-select-compact"
+
+          value={distributionMode}
+
+          disabled={!modeReady}
+
+          aria-label="Grade distribution grouping"
+
+          onchange={(e) => onModeChange(e.currentTarget.value as DistributionMode)}
+
+        >
+
+          {#each DISTRIBUTION_MODE_OPTIONS as option}
+
+            <option value={option.value} title={option.description}>{option.label}</option>
+
+          {/each}
+
+        </select>
+
+      </label>
+
+    </div>
+
+  </header>
+
+
+
+  <div class="bsplus-analytics-card-body">
+
+    {#if totalAssessments > 0 && chartData().length > 0}
+
+      <Chart.Container config={chartConfig()} class="bsplus-chart-surface bsplus-chart-surface-bar w-full">
+
+        <BarChart
+
+          data={chartData()}
+
+          xScale={scaleBand().padding(distribution().modeUsed === "letter" ? 0.22 : 0.28)}
+
+          yScale={yScale()}
+
+          x="grade"
+
+          y="count"
+
+          axis={true}
+
+          grid={true}
+
+          series={[
+
+            {
+
+              key: "count",
+
+              label: "Assessments",
+
+              color: accentColor,
+
+            },
+
+          ]}
+
+          props={{
+
+            bars: {
+
+              stroke: "none",
+
+              fill: accentColor,
+
+              rounded: "all",
+
+              radius: 10,
+
+              insets: { top: 4, bottom: 0, left: 4, right: 4 },
+
+              motion: {
+
+                y: { type: "tween", duration: 600, easing: cubicInOut },
+
+                height: { type: "tween", duration: 600, easing: cubicInOut },
+
+              },
+
+            },
+
+            highlight: { area: { fill: "none" } },
+
+            xAxis: {
+
+              format: (d: string) => formatXTick(d),
+
+              tickMultiline: useLetterScaleLabels(),
+
+              tickLabelProps: useLetterScaleLabels()
+
+                ? { class: "bsplus-bar-tick-label" }
+
+                : undefined,
+
+            },
+
+            yAxis: {
+
+              label: "Assessments",
+
+              format: (d: number) => (Number.isInteger(d) ? String(d) : ""),
+
+              ticks: 5,
+
+            },
+
+          }}
+
+        >
+
+          {#snippet tooltip()}
+
+            <Chart.Tooltip hideLabel />
+
+          {/snippet}
+
+        </BarChart>
+
+      </Chart.Container>
+
+      {#if distribution().modeUsed === "letter"}
+
+        <p class="bsplus-analytics-scale-hint">{distribution().scaleLabel}</p>
+
+      {/if}
+
+    {:else}
+
+      <div class="bsplus-analytics-card-empty">
+
+        <strong>No graded assessments</strong>
+
+        <span>for {getTimeRangeLabel(timeRange).toLowerCase()}</span>
+
+      </div>
+
+    {/if}
+
+  </div>
+
+
+
+  <footer class="bsplus-analytics-card-footer">
+
+    {#if distribution().averagePercent !== null}
+
+      Average <strong>{distribution().averagePercent}%</strong>
+
+    {:else}
+
+      Average <strong>—</strong>
+
+    {/if}
+
+    across {totalAssessments} assessment{totalAssessments === 1 ? "" : "s"}
+
+    {#if distributionMode === "auto" && distribution().modeUsed === "letter"}
+
+      <span class="bsplus-analytics-footer-muted"> · letter scale detected</span>
+
+    {:else if distributionMode !== "auto"}
+
+      <span class="bsplus-analytics-footer-muted"> · {modeOptionLabel} grouping</span>
+
+    {/if}
+
+  </footer>
+
+</article>
+

src/plugins/built-in/gradeAnalytics/AssessmentTable.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { Assessment } from "./types";
+
+  interface Props {
+    data: Assessment[];
+  }
+
+  let { data }: Props = $props();
+
+  let currentPage = $state(0);
+  let itemsPerPage = $state(10);
+  let sortColumn = $state<keyof Assessment | null>("due");
+  let sortDirection = $state<"asc" | "desc">("desc");
+
+  const sortedData = $derived.by(() => {
+    const list = [...data];
+    if (!sortColumn) return list;
+    list.sort((a, b) => {
+      const av = a[sortColumn!];
+      const bv = b[sortColumn!];
+      if (av === bv) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      const cmp = av < bv ? -1 : 1;
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+    return list;
+  });
+
+  const pageCount = $derived(Math.max(1, Math.ceil(sortedData.length / itemsPerPage)));
+  const pageData = $derived(
+    sortedData.slice(
+      currentPage * itemsPerPage,
+      (currentPage + 1) * itemsPerPage,
+    ),
+  );
+
+  function toggleSort(column: keyof Assessment) {
+    if (sortColumn === column) {
+      sortDirection = sortDirection === "asc" ? "desc" : "asc";
+    } else {
+      sortColumn = column;
+      sortDirection = "asc";
+    }
+    currentPage = 0;
+  }
+
+  function formatStatus(status: string) {
+    return status.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+
+  function gradeDisplay(a: Assessment) {
+    if (a.finalGrade !== undefined) {
+      return a.letterGrade
+        ? `${a.finalGrade}% (${a.letterGrade})`
+        : `${a.finalGrade}%`;
+    }
+    return a.letterGrade ?? "—";
+  }
+</script>
+
+<section class="bsplus-analytics-table-wrap">
+  <header class="bsplus-analytics-table-header">
+    <h2>Assessment history</h2>
+  </header>
+
+  <div class="bsplus-analytics-table-scroll">
+    <table class="bsplus-analytics-table">
+      <thead>
+        <tr>
+          {#each [
+            ["title", "Title"],
+            ["subject", "Subject"],
+            ["due", "Due"],
+            ["status", "Status"],
+            ["finalGrade", "Grade"],
+          ] as [col, label]}
+            <th>
+              <button type="button" onclick={() => toggleSort(col as keyof Assessment)}>
+                {label}
+                {#if sortColumn === col}
+                  {sortDirection === "asc" ? " ↑" : " ↓"}
+                {/if}
+              </button>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each pageData as row (row.id)}
+          <tr>
+            <td class="cell-title" title={row.title}>{row.title}</td>
+            <td>{row.subject}</td>
+            <td style="white-space: nowrap">
+              {new Date(row.due).toLocaleDateString(undefined, {
+                day: "numeric",
+                month: "short",
+                year: "numeric",
+              })}
+            </td>
+            <td>{formatStatus(row.status)}</td>
+            <td>
+              {#if row.finalGrade !== undefined}
+                <span class="bsplus-analytics-grade-pill">{gradeDisplay(row)}</span>
+              {:else}
+                {gradeDisplay(row)}
+              {/if}
+            </td>
+          </tr>
+        {:else}
+          <tr>
+            <td colspan="5" style="text-align: center; padding: 2rem; color: var(--bsplus-analytics-muted)">
+              No assessments match your filters
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  <footer class="bsplus-analytics-table-footer">
+    <label>
+      Rows per page
+      <select bind:value={itemsPerPage} onchange={() => (currentPage = 0)}>
+        {#each [5, 10, 20, 50] as n}
+          <option value={n}>{n}</option>
+        {/each}
+      </select>
+    </label>
+    <div style="display: flex; align-items: center; gap: 0.5rem;">
+      <button
+        type="button"
+        class="bsplus-analytics-btn bsplus-analytics-btn-ghost"
+        style="padding: 0.4rem 0.85rem; font-size: 0.8125rem;"
+        disabled={currentPage === 0}
+        onclick={() => currentPage--}
+      >
+        Previous
+      </button>
+      <span>Page {currentPage + 1} of {pageCount}</span>
+      <button
+        type="button"
+        class="bsplus-analytics-btn bsplus-analytics-btn-ghost"
+        style="padding: 0.4rem 0.85rem; font-size: 0.8125rem;"
+        disabled={currentPage >= pageCount - 1}
+        onclick={() => currentPage++}
+      >
+        Next
+      </button>
+    </div>
+  </footer>
+</section>

src/plugins/built-in/gradeAnalytics/GradeAnalyticsPage.svelte

@@ -0,0 +1,441 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import type { Assessment } from "./types";
+  import {
+    loadGradeAnalytics,
+    syncGradeAnalytics,
+    getCacheTtlMs,
+  } from "./api";
+  import AnalyticsAreaChart from "./AnalyticsAreaChart.svelte";
+  import AnalyticsBarChart from "./AnalyticsBarChart.svelte";
+  import AssessmentTable from "./AssessmentTable.svelte";
+  import GradeRangeSlider from "./GradeRangeSlider.svelte";
+  import {
+    filterAssessmentsByTimeRange,
+    getTimeRangeLabel,
+    TIME_RANGE_OPTIONS,
+    type TimeRange,
+  } from "./timeRange";
+  import { openAnalyticsPrivacyPopup } from "./openAnalyticsPrivacyPopup";
+
+  let analyticsData: Assessment[] | null = $state(null);
+  let loading = $state(true);
+  let syncing = $state(false);
+  let lastUpdated: Date | null = $state(null);
+  let timestampRefresh = $state(0);
+  let error: string | null = $state(null);
+
+  let filterSubjects: string[] = $state([]);
+  let filterSearch = $state("");
+  let gradeRange = $state([0, 100]);
+  let showSubjectsDropdown = $state(false);
+  let showTimeRangeDropdown = $state(false);
+  let timeRange: TimeRange = $state("all");
+  let showSubjectTrends = $state(false);
+
+  let timestampInterval: ReturnType<typeof setInterval> | null = null;
+
+  const formattedTimestamp = $derived(() => {
+    if (!lastUpdated) return "";
+    timestampRefresh;
+    return formatLastUpdated(lastUpdated);
+  });
+
+  const uniqueSubjects = $derived(() => {
+    if (!analyticsData) return [];
+    return [...new Set(analyticsData.map((a) => a.subject))].sort();
+  });
+
+  const filteredData = $derived(() => {
+    if (!analyticsData) return [];
+    const [minG, maxG] = gradeRange;
+    return analyticsData.filter((a) => {
+      if (filterSubjects.length && !filterSubjects.includes(a.subject)) return false;
+      const grade = a.finalGrade ?? -1;
+      if (grade < minG || grade > maxG) return false;
+      if (
+        filterSearch &&
+        !a.title.toLowerCase().includes(filterSearch.toLowerCase()) &&
+        !a.subject.toLowerCase().includes(filterSearch.toLowerCase())
+      ) {
+        return false;
+      }
+      return true;
+    });
+  });
+
+  const timeScopedData = $derived(() =>
+    filterAssessmentsByTimeRange(filteredData(), timeRange),
+  );
+
+  const gradedFiltered = $derived(() =>
+    timeScopedData().filter((a) => a.finalGrade !== undefined),
+  );
+
+  const statsAverage = $derived.by(() => {
+    const graded = gradedFiltered();
+    if (!graded.length) return null;
+    const sum = graded.reduce((acc, a) => acc + (a.finalGrade ?? 0), 0);
+    return Math.round((sum / graded.length) * 10) / 10;
+  });
+
+  const statsSubjectCount = $derived(
+    new Set(timeScopedData().map((a) => a.subject)).size,
+  );
+
+  function formatLastUpdated(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins} minute${diffMins === 1 ? "" : "s"} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+    return date.toLocaleString();
+  }
+
+  async function runSync() {
+    syncing = true;
+    error = null;
+    try {
+      const result = await syncGradeAnalytics();
+      analyticsData = result.assessments;
+      lastUpdated = new Date(result.updatedAt);
+    } catch (e) {
+      console.error("[BetterSEQTA+] Analytics sync failed:", e);
+      error =
+        "Failed to sync analytics data. Showing cached data if available.";
+    } finally {
+      syncing = false;
+    }
+  }
+
+  function clearFilters() {
+    filterSubjects = [];
+    filterSearch = "";
+    gradeRange = [0, 100];
+  }
+
+  function hasActiveFilters() {
+    return !!(
+      filterSubjects.length ||
+      filterSearch ||
+      gradeRange[0] !== 0 ||
+      gradeRange[1] !== 100
+    );
+  }
+
+  function toggleSubject(subject: string) {
+    if (filterSubjects.includes(subject)) {
+      filterSubjects = filterSubjects.filter((s) => s !== subject);
+    } else {
+      filterSubjects = [...filterSubjects, subject];
+    }
+  }
+
+  const timeRangeLabel = $derived(() => getTimeRangeLabel(timeRange));
+
+  function closeToolbarDropdowns() {
+    showSubjectsDropdown = false;
+    showTimeRangeDropdown = false;
+  }
+
+  /** Shadow DOM retargets `event.target`; use the full composed path for outside-click. */
+  function isInsideToolbarDropdown(event: Event): boolean {
+    return event.composedPath().some((node) => {
+      if (!(node instanceof Element)) return false;
+      return node.closest("[data-analytics-dropdown]") !== null;
+    });
+  }
+
+  function selectTimeRange(value: TimeRange) {
+    timeRange = value;
+    showTimeRangeDropdown = false;
+  }
+
+  onMount(async () => {
+    timestampInterval = setInterval(() => {
+      timestampRefresh = Date.now();
+    }, 60000);
+
+    try {
+      const result = await loadGradeAnalytics();
+      analyticsData = result.assessments;
+      lastUpdated = result.updatedAt ? new Date(result.updatedAt) : null;
+    } catch (e) {
+      console.error("[BetterSEQTA+] Failed to load analytics:", e);
+      analyticsData = [];
+    } finally {
+      loading = false;
+    }
+
+    const ttl = getCacheTtlMs(24);
+    const needsSync =
+      !lastUpdated || Date.now() - lastUpdated.getTime() > ttl;
+    if (needsSync) {
+      void runSync();
+    }
+  });
+
+  onDestroy(() => {
+    if (timestampInterval) clearInterval(timestampInterval);
+  });
+</script>
+
+<svelte:window
+  onclick={(e) => {
+    if (!isInsideToolbarDropdown(e)) {
+      closeToolbarDropdowns();
+    }
+  }}
+/>
+
+<div class="bsplus-analytics-root">
+  <header class="bsplus-analytics-header bsplus-analytics-animate">
+    <div class="bsplus-analytics-header-text">
+      <h1>
+        Analytics
+        {#if syncing}
+          <span class="bsplus-analytics-badge">
+            <span class="bsplus-analytics-badge-dot" aria-hidden="true"></span>
+            Syncing
+          </span>
+        {/if}
+      </h1>
+      <p>Track your academic performance and progress over time</p>
+      {#if lastUpdated && analyticsData && analyticsData.length > 0}
+        <p class="bsplus-analytics-meta">Last updated: {formattedTimestamp()}</p>
+      {/if}
+    </div>
+    <div class="bsplus-analytics-header-actions">
+      <button
+        type="button"
+        class="bsplus-analytics-btn bsplus-analytics-btn-privacy"
+        onclick={() => openAnalyticsPrivacyPopup()}
+      >
+        Privacy notice
+      </button>
+      <button
+        type="button"
+        class="bsplus-analytics-btn bsplus-analytics-btn-primary"
+        disabled={syncing}
+        onclick={() => runSync()}
+      >
+        {syncing ? "Syncing…" : "Refresh data"}
+      </button>
+    </div>
+  </header>
+
+  {#if error}
+    <p class="bsplus-analytics-alert bsplus-analytics-animate" role="alert" transition:fade={{ duration: 200 }}>
+      {error}
+    </p>
+  {/if}
+
+  {#if loading}
+    <div class="bsplus-analytics-loading bsplus-analytics-animate">
+      <div class="bsplus-analytics-spinner" aria-label="Loading analytics"></div>
+    </div>
+  {:else if analyticsData && analyticsData.length > 0}
+    <section
+      class="bsplus-analytics-stats bsplus-analytics-animate bsplus-analytics-delay-1"
+      aria-label="Summary statistics"
+    >
+      <div class="bsplus-analytics-stat">
+        <div class="bsplus-analytics-stat-label">Average grade</div>
+        <div class="bsplus-analytics-stat-value bsplus-analytics-stat-value-accent">
+          {statsAverage !== null ? `${statsAverage}%` : "—"}
+        </div>
+      </div>
+      <div class="bsplus-analytics-stat">
+        <div class="bsplus-analytics-stat-label">Graded shown</div>
+        <div class="bsplus-analytics-stat-value">{gradedFiltered().length}</div>
+      </div>
+      <div class="bsplus-analytics-stat">
+        <div class="bsplus-analytics-stat-label">Subjects</div>
+        <div class="bsplus-analytics-stat-value">{statsSubjectCount}</div>
+      </div>
+    </section>
+
+    <div class="bsplus-analytics-toolbar bsplus-analytics-animate bsplus-analytics-delay-2">
+      <div
+        class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
+        data-analytics-dropdown
+      >
+        <span class="bsplus-analytics-field-label">Time period</span>
+        <div class="bsplus-analytics-dropdown" data-analytics-dropdown>
+          <button
+            type="button"
+            class="bsplus-analytics-dropdown-trigger"
+            onclick={(e) => {
+              e.stopPropagation();
+              showSubjectsDropdown = false;
+              showTimeRangeDropdown = !showTimeRangeDropdown;
+            }}
+            aria-expanded={showTimeRangeDropdown}
+            aria-haspopup="listbox"
+            aria-label="Time period for analytics"
+          >
+            {timeRangeLabel()}
+          </button>
+          {#if showTimeRangeDropdown}
+            <div class="bsplus-analytics-dropdown-menu" role="listbox">
+              {#each TIME_RANGE_OPTIONS as option (option.value)}
+                {@const selected = timeRange === option.value}
+                <button
+                  type="button"
+                  class="bsplus-analytics-dropdown-item"
+                  class:is-selected={selected}
+                  role="option"
+                  aria-selected={selected}
+                  onclick={() => selectTimeRange(option.value)}
+                >
+                  <span class="bsplus-analytics-dropdown-check"
+                    >{selected ? "✓" : ""}</span
+                  >
+                  <span>{option.label}</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <div
+        class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
+        data-analytics-dropdown
+      >
+        <span class="bsplus-analytics-field-label">Subjects</span>
+        <div class="bsplus-analytics-dropdown" data-analytics-dropdown>
+          <button
+            type="button"
+            class="bsplus-analytics-dropdown-trigger"
+            onclick={(e) => {
+              e.stopPropagation();
+              showTimeRangeDropdown = false;
+              showSubjectsDropdown = !showSubjectsDropdown;
+            }}
+            aria-expanded={showSubjectsDropdown}
+            aria-haspopup="listbox"
+          >
+            {#if filterSubjects.length === 0}
+              All subjects
+            {:else if filterSubjects.length === 1}
+              {filterSubjects[0]}
+            {:else}
+              {filterSubjects.length} selected
+            {/if}
+          </button>
+          {#if showSubjectsDropdown}
+            <div class="bsplus-analytics-dropdown-menu" role="listbox">
+              <button
+                type="button"
+                class="bsplus-analytics-dropdown-item"
+                class:is-selected={filterSubjects.length === 0}
+                onclick={() => {
+                  filterSubjects = [];
+                  showSubjectsDropdown = false;
+                }}
+              >
+                <span class="bsplus-analytics-dropdown-check"
+                  >{filterSubjects.length === 0 ? "✓" : ""}</span
+                >
+                All subjects
+              </button>
+              {#each uniqueSubjects() as subject}
+                {@const selected = filterSubjects.includes(subject)}
+                <button
+                  type="button"
+                  class="bsplus-analytics-dropdown-item"
+                  class:is-selected={selected}
+                  onclick={() => toggleSubject(subject)}
+                >
+                  <span class="bsplus-analytics-dropdown-check"
+                    >{selected ? "✓" : ""}</span
+                  >
+                  <span style="overflow:hidden;text-overflow:ellipsis">{subject}</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <div class="bsplus-analytics-field bsplus-analytics-grade-range">
+        <span class="bsplus-analytics-field-label">Grade range</span>
+        <GradeRangeSlider bind:value={gradeRange} />
+      </div>
+
+      <div class="bsplus-analytics-field bsplus-analytics-toolbar-search">
+        <span class="bsplus-analytics-field-label">Search</span>
+        <input
+          type="search"
+          class="bsplus-analytics-input"
+          bind:value={filterSearch}
+          placeholder="Search assessments…"
+        />
+      </div>
+
+      <label class="bsplus-analytics-checkbox">
+        <input type="checkbox" bind:checked={showSubjectTrends} />
+        <span>Show per-subject trends on chart</span>
+      </label>
+    </div>
+
+    <div class="bsplus-analytics-charts">
+      {#key filteredData().length + "-" + gradeRange.join(",") + filterSearch + filterSubjects.join("|") + timeRange + String(showSubjectTrends)}
+        <div class="bsplus-analytics-animate bsplus-analytics-delay-3">
+          <AnalyticsAreaChart
+            data={gradedFiltered()}
+            {timeRange}
+            showSubjectTrends={showSubjectTrends}
+          />
+        </div>
+        <div class="bsplus-analytics-animate bsplus-analytics-delay-4">
+          <AnalyticsBarChart data={gradedFiltered()} {timeRange} />
+        </div>
+      {/key}
+    </div>
+
+    <div class="bsplus-analytics-animate bsplus-analytics-delay-4" style="animation-delay: 400ms;">
+      <AssessmentTable data={timeScopedData()} />
+    </div>
+
+    <footer class="bsplus-analytics-footer">
+      <span>
+        {timeScopedData().length} of {analyticsData.length} assessments shown
+        {#if gradedFiltered().length !== timeScopedData().length}
+          ({gradedFiltered().length} with grades)
+        {/if}
+      </span>
+      {#if hasActiveFilters()}
+        <button
+          type="button"
+          class="bsplus-analytics-btn bsplus-analytics-btn-ghost"
+          onclick={clearFilters}
+        >
+          Clear filters
+        </button>
+      {/if}
+    </footer>
+  {:else}
+    <div class="bsplus-analytics-empty bsplus-analytics-animate" transition:fade={{ duration: 300 }}>
+      <h2>No analytics data yet</h2>
+      <p>
+        Data syncs when you visit this page. Assessments with released marks will
+        appear here with trends and grade breakdowns.
+      </p>
+      <button
+        type="button"
+        class="bsplus-analytics-btn bsplus-analytics-btn-primary"
+        disabled={syncing}
+        onclick={() => runSync()}
+      >
+        Sync now
+      </button>
+    </div>
+  {/if}
+</div>

src/plugins/built-in/gradeAnalytics/GradeRangeSlider.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  let {
+    value = $bindable<[number, number]>([0, 100]),
+    min = 0,
+    max = 100,
+    step = 1,
+  } = $props<{
+    value?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+  }>();
+
+  let dragging: "min" | "max" | null = $state(null);
+
+  const span = $derived(max - min || 1);
+  const minPercent = $derived(((value[0] - min) / span) * 100);
+  const maxPercent = $derived(((value[1] - min) / span) * 100);
+
+  const minZ = $derived(
+    dragging === "min" ? 5 : dragging === "max" ? 2 : value[0] > (min + max) / 2 ? 4 : 3,
+  );
+  const maxZ = $derived(
+    dragging === "max" ? 5 : dragging === "min" ? 2 : value[1] <= (min + max) / 2 ? 4 : 3,
+  );
+
+  function onMinInput(e: Event) {
+    const raw = Number((e.currentTarget as HTMLInputElement).value);
+    if (raw > value[1]) {
+      value = [value[1], raw];
+    } else {
+      value = [raw, value[1]];
+    }
+  }
+
+  function onMaxInput(e: Event) {
+    const raw = Number((e.currentTarget as HTMLInputElement).value);
+    if (raw < value[0]) {
+      value = [raw, value[0]];
+    } else {
+      value = [value[0], raw];
+    }
+  }
+</script>
+
+<div class="bsplus-grade-range-slider">
+  <div class="bsplus-grade-range-slider-track-wrap">
+    <div class="bsplus-grade-range-slider-track" aria-hidden="true">
+      <div class="bsplus-grade-range-slider-rail"></div>
+      <div
+        class="bsplus-grade-range-slider-fill"
+        style:left="{minPercent}%"
+        style:width="{maxPercent - minPercent}%"
+      ></div>
+    </div>
+    <input
+      type="range"
+      class="bsplus-grade-range-slider-input"
+      {min}
+      {max}
+      {step}
+      value={value[0]}
+      oninput={onMinInput}
+      onpointerdown={() => (dragging = "min")}
+      onpointerup={() => (dragging = null)}
+      onpointercancel={() => (dragging = null)}
+      onblur={() => {
+        if (dragging === "min") dragging = null;
+      }}
+      style:z-index={minZ}
+      aria-label="Minimum grade"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value[0]}
+    />
+    <input
+      type="range"
+      class="bsplus-grade-range-slider-input"
+      {min}
+      {max}
+      {step}
+      value={value[1]}
+      oninput={onMaxInput}
+      onpointerdown={() => (dragging = "max")}
+      onpointerup={() => (dragging = null)}
+      onpointercancel={() => (dragging = null)}
+      onblur={() => {
+        if (dragging === "max") dragging = null;
+      }}
+      style:z-index={maxZ}
+      aria-label="Maximum grade"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value[1]}
+    />
+  </div>
+  <span class="bsplus-analytics-range-value" aria-live="polite">
+    {value[0]}% – {value[1]}%
+  </span>
+</div>
+
+<style>
+  .bsplus-grade-range-slider {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .bsplus-grade-range-slider-track-wrap {
+    position: relative;
+    flex: 1;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .bsplus-grade-range-slider-track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0.35rem;
+    pointer-events: none;
+  }
+
+  .bsplus-grade-range-slider-rail {
+    position: absolute;
+    inset: 0;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--bsplus-analytics-muted) 28%, transparent);
+  }
+
+  .bsplus-grade-range-slider-fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: 999px;
+    background: var(--bsplus-analytics-accent);
+  }
+
+  .bsplus-grade-range-slider-input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    height: 1.5rem;
+    background: transparent;
+    pointer-events: none;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .bsplus-grade-range-slider-input::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 0.35rem;
+    background: transparent;
+    border: none;
+  }
+
+  .bsplus-grade-range-slider-input::-moz-range-track {
+    height: 0.35rem;
+    background: transparent;
+    border: none;
+  }
+
+  .bsplus-grade-range-slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.325rem;
+    border-radius: 50%;
+    border: 2px solid var(--bsplus-analytics-accent);
+    background: var(--bsplus-analytics-surface, #fff);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+    cursor: grab;
+    transition:
+      transform 0.12s var(--bsplus-analytics-ease, ease),
+      box-shadow 0.12s var(--bsplus-analytics-ease, ease);
+  }
+
+  .bsplus-grade-range-slider-input:active::-webkit-slider-thumb {
+    cursor: grabbing;
+    transform: scale(1.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+  }
+
+  .bsplus-grade-range-slider-input::-moz-range-thumb {
+    pointer-events: all;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    border: 2px solid var(--bsplus-analytics-accent);
+    background: var(--bsplus-analytics-surface, #fff);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+    cursor: grab;
+  }
+
+  .bsplus-grade-range-slider-input:active::-moz-range-thumb {
+    cursor: grabbing;
+    transform: scale(1.08);
+  }
+
+  .bsplus-grade-range-slider :global(.bsplus-analytics-range-value) {
+    flex-shrink: 0;
+  }
+</style>

src/plugins/built-in/gradeAnalytics/api.ts

@@ -0,0 +1,354 @@
+import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { getMockGradeAnalyticsData } from "@/seqta/ui/dev/hideSensitiveContent";
+import {
+  extractLetterGradeStringFromPayload,
+  resolveNumericGradeFromAssessmentPayload,
+} from "./letterGradeScale";
+import { loadAnalyticsCache, saveAnalyticsCache } from "./storage";
+import type { Assessment, AssessmentStatus } from "./types";
+
+const PAST_FETCH_CONCURRENCY = 8;
+const DEFAULT_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+interface Subject {
+  code: string;
+  programme: number;
+  metaclass: number;
+}
+
+async function fetchJSON(url: string, body: Record<string, unknown>) {
+  const res = await fetch(`${location.origin}${url}`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+function isValidDate(dateStr: string): boolean {
+  const date = new Date(dateStr);
+  return date instanceof Date && !isNaN(date.getTime());
+}
+
+export function parseAssessment(data: unknown): Assessment | null {
+  try {
+    if (!data || typeof data !== "object") return null;
+    const raw = data as Record<string, unknown>;
+
+    const letterGrade = extractLetterGradeStringFromPayload(
+      raw as Parameters<typeof extractLetterGradeStringFromPayload>[0],
+    );
+    let finalGrade = resolveNumericGradeFromAssessmentPayload(
+      raw as Parameters<typeof resolveNumericGradeFromAssessmentPayload>[0],
+    );
+    if (
+      finalGrade !== undefined &&
+      (typeof finalGrade !== "number" || isNaN(finalGrade))
+    ) {
+      finalGrade = undefined;
+    }
+
+    const assessment: Assessment = {
+      id: Number(raw.id),
+      title: String(raw.title || ""),
+      subject: String(raw.subject || raw.code || ""),
+      status: String(raw.status || "PENDING") as AssessmentStatus,
+      due: String(raw.due || raw.date || raw.dueDate || ""),
+      code: String(raw.code || raw.subject || ""),
+      metaclassID: Number(raw.metaclassID ?? raw.metaclass ?? 0),
+      programmeID: Number(raw.programmeID ?? raw.programme ?? 0),
+      graded: Boolean(raw.graded),
+      overdue: Boolean(raw.overdue),
+      hasFeedback: Boolean(raw.hasFeedback),
+      reflectionsEnabled: Boolean(raw.reflectionsEnabled),
+      reflectionsCompleted: Boolean(raw.reflectionsCompleted),
+      expectationsEnabled: Boolean(raw.expectationsEnabled),
+      expectationsCompleted: Boolean(raw.expectationsCompleted),
+      availability: String(raw.availability || ""),
+      finalGrade,
+      letterGrade,
+    };
+
+    if (
+      !assessment.id ||
+      !assessment.title ||
+      !assessment.subject ||
+      !isValidDate(assessment.due)
+    ) {
+      return null;
+    }
+
+    return assessment;
+  } catch {
+    return null;
+  }
+}
+
+function jsonGradeToString(grade: unknown): string | undefined {
+  if (typeof grade === "string") return grade.trim() || undefined;
+  if (typeof grade === "number") return String(grade);
+  return undefined;
+}
+
+function extractFinalGrade(assessment: Record<string, unknown>): number | undefined {
+  if (assessment.status !== "MARKS_RELEASED") return undefined;
+
+  const criteria = assessment.criteria as
+    | { results?: { percentage?: unknown } }[]
+    | undefined;
+  if (criteria?.[0]?.results?.percentage !== undefined) {
+    const n = Number(criteria[0].results!.percentage);
+    if (!isNaN(n)) return n;
+  }
+
+  const results = assessment.results as { percentage?: unknown } | undefined;
+  if (results?.percentage !== undefined) {
+    const n = Number(results.percentage);
+    if (!isNaN(n)) return n;
+  }
+
+  if (assessment.finalGrade !== undefined && assessment.finalGrade !== null) {
+    const n = Number(assessment.finalGrade);
+    if (!isNaN(n)) return n;
+  }
+
+  const letter = extractLetterGradeStringFromPayload(
+    assessment as Parameters<typeof extractLetterGradeStringFromPayload>[0],
+  );
+  if (letter) {
+    const approx = resolveNumericGradeFromAssessmentPayload({
+      status: "MARKS_RELEASED",
+      letterGrade: letter,
+    });
+    if (approx !== undefined) return approx;
+  }
+
+  return undefined;
+}
+
+function extractLetterGrade(
+  assessment: Record<string, unknown>,
+): string | undefined {
+  if (assessment.status !== "MARKS_RELEASED") return undefined;
+
+  const criteria = assessment.criteria as
+    | { results?: { grade?: unknown } }[]
+    | undefined;
+  const c0 = criteria?.[0]?.results?.grade;
+  const fromCriteria = jsonGradeToString(c0);
+  if (fromCriteria) return fromCriteria;
+
+  const results = assessment.results as { grade?: unknown } | undefined;
+  const fromResults = jsonGradeToString(results?.grade);
+  if (fromResults) return fromResults;
+
+  return extractLetterGradeStringFromPayload(
+    assessment as Parameters<typeof extractLetterGradeStringFromPayload>[0],
+  );
+}
+
+/** All programme years / folders from SEQTA (active and inactive), matching DesQTA analytics. */
+function flattenSubjectFolders(payload: unknown): Subject[] {
+  if (!Array.isArray(payload)) return [];
+
+  const subjects: Subject[] = [];
+  for (const folder of payload) {
+    if (!folder || typeof folder !== "object") continue;
+    const list = (folder as { subjects?: Subject[] }).subjects;
+    if (!Array.isArray(list)) continue;
+
+    for (const raw of list) {
+      if (!raw || typeof raw !== "object") continue;
+      const programme = Number(
+        (raw as Subject).programme ?? (raw as { programmeID?: number }).programmeID,
+      );
+      const metaclass = Number(
+        (raw as Subject).metaclass ?? (raw as { metaclassID?: number }).metaclassID,
+      );
+      if (!programme || !metaclass || isNaN(programme) || isNaN(metaclass)) continue;
+
+      subjects.push({
+        code: String((raw as Subject).code ?? (raw as { subject?: string }).subject ?? ""),
+        programme,
+        metaclass,
+      });
+    }
+  }
+  return subjects;
+}
+
+/** Subjects implied by cached assessments (covers metaclasses no longer listed). */
+function subjectsFromAssessments(assessments: Assessment[]): Subject[] {
+  const map = new Map<string, Subject>();
+  for (const a of assessments) {
+    if (!a.programmeID || !a.metaclassID) continue;
+    const key = `${a.programmeID}-${a.metaclassID}`;
+    if (!map.has(key)) {
+      map.set(key, {
+        code: a.code || a.subject,
+        programme: a.programmeID,
+        metaclass: a.metaclassID,
+      });
+    }
+  }
+  return Array.from(map.values());
+}
+
+function dedupeSubjects(subjects: Subject[]): Subject[] {
+  const map = new Map<string, Subject>();
+  for (const s of subjects) {
+    map.set(`${s.programme}-${s.metaclass}`, s);
+  }
+  return Array.from(map.values());
+}
+
+async function loadAllSubjects(existingAssessments: Assessment[] = []): Promise<Subject[]> {
+  const res = await fetchJSON("/seqta/student/load/subjects?", {});
+  const fromFolders = flattenSubjectFolders(res.payload);
+  return dedupeSubjects([...fromFolders, ...subjectsFromAssessments(existingAssessments)]);
+}
+
+async function loadUpcoming(studentId: number): Promise<Record<string, unknown>[]> {
+  const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
+    student: studentId,
+  });
+  return Array.isArray(res.payload) ? res.payload : [];
+}
+
+async function loadPastForSubject(
+  studentId: number,
+  subject: Subject,
+): Promise<Record<string, unknown>[]> {
+  const res = await fetchJSON("/seqta/student/assessment/list/past?", {
+    programme: subject.programme,
+    metaclass: subject.metaclass,
+    student: studentId,
+  });
+  const items: Record<string, unknown>[] = [];
+  const process = (assessment: unknown) => {
+    if (!assessment || typeof assessment !== "object") return;
+    const a = assessment as Record<string, unknown>;
+    if (!a.id) return;
+    items.push({
+      ...a,
+      programmeID: a.programmeID ?? a.programme ?? subject.programme,
+      metaclassID: a.metaclassID ?? a.metaclass ?? subject.metaclass,
+      code: a.code ?? a.subject ?? subject.code,
+    });
+  };
+  if (Array.isArray(res.payload?.pending)) {
+    res.payload.pending.forEach(process);
+  }
+  if (Array.isArray(res.payload?.tasks)) {
+    res.payload.tasks.forEach(process);
+  }
+  return items;
+}
+
+async function loadAllPast(
+  studentId: number,
+  subjects: Subject[],
+): Promise<Record<string, unknown>[]> {
+  const results: Record<string, unknown>[][] = [];
+  for (let i = 0; i < subjects.length; i += PAST_FETCH_CONCURRENCY) {
+    const batch = subjects.slice(i, i + PAST_FETCH_CONCURRENCY);
+    const batchResults = await Promise.all(
+      batch.map((s) => loadPastForSubject(studentId, s)),
+    );
+    results.push(...batchResults);
+  }
+  return results.flat();
+}
+
+function mergeRawAssessments(
+  existing: Assessment[],
+  rawItems: Record<string, unknown>[],
+): Assessment[] {
+  const existingMap = new Map<number, Assessment>();
+  for (const a of existing) {
+    existingMap.set(a.id, a);
+  }
+
+  for (const raw of rawItems) {
+    const id = Number(raw.id);
+    if (!id) continue;
+
+    const finalGrade = extractFinalGrade(raw);
+    const letterGrade = extractLetterGrade(raw);
+    if (finalGrade !== undefined) raw.finalGrade = finalGrade;
+    if (letterGrade !== undefined) raw.letterGrade = letterGrade;
+
+    const existingItem = existingMap.get(id);
+    if (existingItem?.finalGrade !== undefined && finalGrade === undefined) {
+      continue;
+    }
+
+    const parsed = parseAssessment(raw);
+    if (parsed) existingMap.set(id, parsed);
+  }
+
+  return Array.from(existingMap.values()).sort(
+    (a, b) => new Date(b.due).getTime() - new Date(a.due).getTime(),
+  );
+}
+
+export async function getStudentId(): Promise<number> {
+  const info = await getUserInfo();
+  const id = Number(info?.id);
+  if (!id || isNaN(id)) throw new Error("Could not resolve student ID");
+  return id;
+}
+
+export function getCacheTtlMs(cacheTtlHours = 24): number {
+  return cacheTtlHours * 60 * 60 * 1000;
+}
+
+export async function loadGradeAnalytics(
+  cacheTtlMs = getCacheTtlMs(),
+): Promise<{ assessments: Assessment[]; updatedAt: number | null; fromCache: boolean }> {
+  if (settingsState.hideSensitiveContent) {
+    const mock = getMockGradeAnalyticsData();
+    return { assessments: mock, updatedAt: Date.now(), fromCache: false };
+  }
+
+  const studentId = await getStudentId();
+  const cached = await loadAnalyticsCache(location.origin, studentId);
+  if (cached) {
+    const stale = Date.now() - cached.updatedAt > cacheTtlMs;
+    return {
+      assessments: cached.assessments,
+      updatedAt: cached.updatedAt,
+      fromCache: !stale,
+    };
+  }
+
+  return { assessments: [], updatedAt: null, fromCache: false };
+}
+
+export async function syncGradeAnalytics(): Promise<{
+  assessments: Assessment[];
+  updatedAt: number;
+}> {
+  if (settingsState.hideSensitiveContent) {
+    const mock = getMockGradeAnalyticsData();
+    return { assessments: mock, updatedAt: Date.now() };
+  }
+
+  const studentId = await getStudentId();
+  const cached = await loadAnalyticsCache(location.origin, studentId);
+  const existing = cached?.assessments ?? [];
+
+  const subjectList = await loadAllSubjects(existing);
+
+  const [upcoming, past] = await Promise.all([
+    loadUpcoming(studentId),
+    loadAllPast(studentId, subjectList),
+  ]);
+
+  const merged = mergeRawAssessments(existing, [...upcoming, ...past]);
+  await saveAnalyticsCache(location.origin, studentId, merged);
+
+  return { assessments: merged, updatedAt: Date.now() };
+}

src/plugins/built-in/gradeAnalytics/chart/chart-container.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import ChartStyle from "./chart-style.svelte";
+  import { setChartContext, type ChartConfig } from "./chart-utils";
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = uid,
+    class: className = "",
+    children,
+    config,
+    ...restProps
+  }: HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement | null;
+    config: ChartConfig;
+    class?: string;
+  } = $props();
+
+  const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
+
+  setChartContext({
+    get config() {
+      return config;
+    },
+  });
+</script>
+
+<div
+  bind:this={ref}
+  data-chart={chartId}
+  data-slot="chart"
+  class="bsplus-chart-host {className}"
+  {...restProps}
+>
+  <ChartStyle id={chartId} {config} />
+  {@render children?.()}
+</div>

src/plugins/built-in/gradeAnalytics/chart/chart-style.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { THEMES, type ChartConfig } from "./chart-utils";
+
+  let { id, config }: { id: string; config: ChartConfig } = $props();
+
+  const colorConfig = $derived(
+    config
+      ? Object.entries(config).filter(([, c]) => c.theme || c.color)
+      : null,
+  );
+
+  const themeContents = $derived.by(() => {
+    if (!colorConfig?.length) return;
+
+    const themeContents: string[] = [];
+    for (const [_theme, prefix] of Object.entries(THEMES)) {
+      let content = `${prefix} [data-chart=${id}] {\n`;
+      const color = colorConfig.map(([key, itemConfig]) => {
+        const theme = _theme as keyof typeof itemConfig.theme;
+        const c = itemConfig.theme?.[theme] || itemConfig.color;
+        return c ? `\t--color-${key}: ${c};` : null;
+      });
+      content += color.filter(Boolean).join("\n") + "\n}";
+      themeContents.push(content);
+    }
+    return themeContents.join("\n");
+  });
+</script>
+
+{#if themeContents}
+  {#key id}
+    <svelte:element this={"style"}>
+      {themeContents}
+    </svelte:element>
+  {/key}
+{/if}

src/plugins/built-in/gradeAnalytics/chart/chart-tooltip.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import { getTooltipContext, Tooltip as TooltipPrimitive } from "layerchart";
+  import { cn } from "../utils/cn";
+  import {
+    getPayloadConfigFromPayload,
+    useChart,
+    type TooltipPayload,
+  } from "./chart-utils";
+
+  function defaultFormatter(value: unknown) {
+    return `${value}`;
+  }
+
+  let {
+    class: className,
+    hideLabel = false,
+    indicator = "dot",
+    hideIndicator = false,
+    labelKey,
+    label,
+    labelFormatter = defaultFormatter,
+    labelClassName,
+    formatter,
+    nameKey,
+    color,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: (
+      value: unknown,
+      payload: TooltipPayload[],
+    ) => string | number | Snippet;
+    formatter?: Snippet<
+      [
+        {
+          value: unknown;
+          name: string;
+          item: TooltipPayload;
+          index: number;
+          payload: TooltipPayload[];
+        },
+      ]
+    >;
+  } = $props();
+
+  const chart = useChart();
+  const tooltipCtx = getTooltipContext();
+
+  const formattedLabel = $derived.by(() => {
+    if (hideLabel || !tooltipCtx.payload?.length) return null;
+
+    const [item] = tooltipCtx.payload;
+    const key = labelKey ?? item?.label ?? item?.name ?? "value";
+    const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? (chart.config[label as keyof typeof chart.config]?.label ?? label)
+        : (itemConfig?.label ?? item.label);
+
+    if (value === undefined) return null;
+    if (!labelFormatter) return value;
+    return labelFormatter(value, tooltipCtx.payload);
+  });
+
+  const nestLabel = $derived(
+    tooltipCtx.payload.length === 1 && indicator !== "dot",
+  );
+</script>
+
+{#snippet TooltipLabel()}
+  {#if formattedLabel}
+    <div class={cn("font-medium text-zinc-900 dark:text-white", labelClassName)}>
+      {#if typeof formattedLabel === "function"}
+        {@render formattedLabel()}
+      {:else}
+        {formattedLabel}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+  <div
+    class={cn(
+      "grid min-w-[9rem] items-start gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-2.5 py-1.5 text-xs shadow-xl text-zinc-900 dark:text-white",
+      className,
+    )}
+    {...restProps}
+  >
+    {#if !nestLabel}
+      {@render TooltipLabel()}
+    {/if}
+    <div class="grid gap-1.5">
+      {#each tooltipCtx.payload as item, i (item.key + i)}
+        {@const key = `${nameKey || item.key || item.name || "value"}`}
+        {@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+        {@const indicatorColor = color || item.payload?.color || item.color}
+        <div
+          class={cn(
+            "flex w-full flex-wrap items-stretch gap-2",
+            indicator === "dot" && "items-center",
+          )}
+        >
+          {#if formatter && item.value !== undefined && item.name}
+            {@render formatter({
+              value: item.value,
+              name: item.name,
+              item,
+              index: i,
+              payload: tooltipCtx.payload,
+            })}
+          {:else}
+            {#if !hideIndicator}
+              <div
+                style="background: {indicatorColor}; border-color: {indicatorColor};"
+                class={cn("shrink-0 rounded-[2px] border", {
+                  "size-2.5": indicator === "dot",
+                  "h-full w-1": indicator === "line",
+                  "w-0 border-[1.5px] border-dashed bg-transparent":
+                    indicator === "dashed",
+                })}
+              ></div>
+            {/if}
+            <div
+              class={cn(
+                "flex flex-1 shrink-0 justify-between leading-none",
+                nestLabel ? "items-end" : "items-center",
+              )}
+            >
+              <div class="grid gap-1.5">
+                {#if nestLabel}
+                  {@render TooltipLabel()}
+                {/if}
+                <span class="text-zinc-500 dark:text-zinc-400">
+                  {itemConfig?.label || item.name}
+                </span>
+              </div>
+              {#if item.value !== undefined}
+                <span class="font-mono font-medium tabular-nums">
+                  {item.value.toLocaleString()}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</TooltipPrimitive.Root>

src/plugins/built-in/gradeAnalytics/chart/chart-utils.ts

@@ -0,0 +1,80 @@
+import type { Tooltip } from "layerchart";
+import {
+  getContext,
+  setContext,
+  type Component,
+  type ComponentProps,
+  type Snippet,
+} from "svelte";
+
+export const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: string;
+    icon?: Component;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+
+export type TooltipPayload = ExtractSnippetParams<
+  ComponentProps<typeof Tooltip.Root>["children"]
+>["payload"][number];
+
+export function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: TooltipPayload,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) return undefined;
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (payload.key === key) {
+    configLabelKey = payload.key;
+  } else if (payload.name === key) {
+    configLabelKey = payload.name;
+  } else if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload !== undefined &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+type ChartContextValue = {
+  config: ChartConfig;
+};
+
+const chartContextKey = Symbol("chart-context");
+
+export function setChartContext(value: ChartContextValue) {
+  return setContext(chartContextKey, value);
+}
+
+export function useChart() {
+  return getContext<ChartContextValue>(chartContextKey);
+}

src/plugins/built-in/gradeAnalytics/chart/index.ts

@@ -0,0 +1,10 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+
+export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils";
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartContainer as Container,
+  ChartTooltip as Tooltip,
+};

src/plugins/built-in/gradeAnalytics/core/index.ts

@@ -0,0 +1,75 @@
+import type { Plugin } from "@/plugins/core/types";
+import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import { processMenuItemNode } from "@/seqta/utils/sidebarMenuIcons";
+import { loadAnalyticsPage } from "../loadAnalyticsPage";
+import styles from "../styles.css?inline";
+
+const ANALYTICS_MENU_ICON = MenuitemSVGKey.analytics;
+
+const ANALYTICS_MENU_CLASS = "betterseqta-grade-analytics-item";
+
+const gradeAnalyticsPlugin: Plugin<{}> = {
+  id: "grade-analytics",
+  name: "Grade Analytics",
+  description:
+    "Adds an analytics page with grade trends, distribution charts, and assessment history",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: false,
+  styles,
+
+  run: async () => {
+    if (isSeqtaEngageExperience()) {
+      return () => {};
+    }
+
+    const menuList = (await waitForElm("#menu > ul, #menu ul", true, 100, 60)) as HTMLElement;
+
+    const analyticsItem = document.createElement("li");
+    analyticsItem.className = "item";
+    analyticsItem.classList.add(ANALYTICS_MENU_CLASS);
+    analyticsItem.id = "analyticsbutton";
+    analyticsItem.dataset.key = "analytics";
+    analyticsItem.dataset.path = "/analytics";
+    analyticsItem.dataset.betterseqta = "true";
+    analyticsItem.innerHTML = `<label>${ANALYTICS_MENU_ICON}<span>Analytics</span></label>`;
+
+    const homeButton = document.getElementById("homebutton");
+    if (homeButton?.parentElement === menuList) {
+      homeButton.insertAdjacentElement("afterend", analyticsItem);
+    } else {
+      menuList.insertBefore(analyticsItem, menuList.firstChild);
+    }
+
+    processMenuItemNode(analyticsItem);
+
+    const menuObserver = new MutationObserver(() => {
+      if (!menuList.contains(analyticsItem)) {
+        if (homeButton?.parentElement === menuList) {
+          homeButton.insertAdjacentElement("afterend", analyticsItem);
+        } else {
+          menuList.insertBefore(analyticsItem, menuList.firstChild);
+        }
+        processMenuItemNode(analyticsItem);
+      }
+    });
+    menuObserver.observe(menuList, { childList: true });
+
+    const onClick = (e: Event) => {
+      e.preventDefault();
+      window.history.pushState({}, "", "/#?page=/analytics");
+      void loadAnalyticsPage();
+    };
+    analyticsItem.addEventListener("click", onClick);
+
+    return () => {
+      menuObserver.disconnect();
+      analyticsItem.removeEventListener("click", onClick);
+      analyticsItem.remove();
+    };
+  },
+};
+
+export default gradeAnalyticsPlugin;

src/plugins/built-in/gradeAnalytics/gradeDistribution.ts

@@ -0,0 +1,475 @@
+import { approximatePercentFromLetterGrade } from "./letterGradeScale";
+import type { Assessment } from "./types";
+
+export type DistributionMode = "auto" | "letter" | "percent";
+
+export const DISTRIBUTION_MODE_OPTIONS: {
+  value: DistributionMode;
+  label: string;
+  description: string;
+}[] = [
+  {
+    value: "auto",
+    label: "Auto",
+    description: "Letter grades when your school uses them, otherwise percentages",
+  },
+  {
+    value: "letter",
+    label: "Letter grades",
+    description: "Group by letter band (school scale or standard A–F)",
+  },
+  {
+    value: "percent",
+    label: "Percentage bands",
+    description: "Group by score ranges (90–100, 80–89, …)",
+  },
+];
+
+export type DistributionBucket = {
+  label: string;
+  count: number;
+  minPercent?: number;
+  maxPercent?: number;
+};
+
+export type GradeDistributionResult = {
+  buckets: DistributionBucket[];
+  modeUsed: "letter" | "percent";
+  scaleSource: "inferred" | "standard" | "percent";
+  scaleLabel: string;
+  gradedCount: number;
+  averagePercent: number | null;
+  letterGradeCoverage: number;
+};
+
+const PERCENT_BUCKETS: { label: string; min: number; max: number }[] = [
+  { label: "90–100", min: 90, max: 100 },
+  { label: "80–89", min: 80, max: 89 },
+  { label: "70–79", min: 70, max: 79 },
+  { label: "60–69", min: 60, max: 69 },
+  { label: "50–59", min: 50, max: 59 },
+  { label: "0–49", min: 0, max: 49 },
+];
+
+/** Standard A–F (+ modifiers) ordering when school scale cannot be inferred. */
+const STANDARD_LETTER_ORDER = [
+  "A+",
+  "A",
+  "A-",
+  "B+",
+  "B",
+  "B-",
+  "C+",
+  "C",
+  "C-",
+  "D+",
+  "D",
+  "D-",
+  "E",
+  "F",
+  "HD",
+  "CR",
+  "P",
+  "PS",
+  "N",
+  "PASS",
+  "FAIL",
+] as const;
+
+export type InferredLetterBand = {
+  key: string;
+  label: string;
+  medianPercent: number;
+  minPercent: number;
+  maxPercent: number;
+  pairedSamples: number;
+  totalCount: number;
+};
+
+export type InferredLetterScale = {
+  bands: InferredLetterBand[];
+  pairedCount: number;
+  letterAssessmentCount: number;
+  confidence: "high" | "medium" | "low";
+};
+
+function normalizeLetterKey(raw: string): string {
+  const s = raw.trim().toLowerCase();
+  const first = s.split(/[\s(/]/)[0] ?? s;
+  return first.replace(/[^a-z0-9+-]/gi, "") || s;
+}
+
+function pickDisplayLabel(variants: string[]): string {
+  if (!variants.length) return "";
+  const counts = new Map<string, number>();
+  for (const v of variants) {
+    const t = v.trim();
+    if (!t) continue;
+    counts.set(t, (counts.get(t) ?? 0) + 1);
+  }
+  let best = variants[0].trim();
+  let bestCount = 0;
+  for (const [label, count] of counts) {
+    if (count > bestCount) {
+      bestCount = count;
+      best = label;
+    }
+  }
+  return best;
+}
+
+export function looksLikeLetterGrade(raw: string | undefined | null): boolean {
+  if (raw == null) return false;
+  const t = raw.trim();
+  if (!t) return false;
+  if (/^\d+(\.\d+)?%?$/.test(t)) return false;
+  if (t.length > 12) return false;
+  const upper = t.toUpperCase();
+  if (["HD", "CR", "P", "PS", "N", "PASS", "FAIL"].includes(upper)) return true;
+  return /[a-zA-Z]/.test(t);
+}
+
+function isGradedAssessment(a: Assessment): boolean {
+  return (
+    a.finalGrade !== undefined ||
+    (a.letterGrade != null && looksLikeLetterGrade(a.letterGrade))
+  );
+}
+
+function buildStandardLetterScale(): InferredLetterScale {
+  const bands: InferredLetterBand[] = [];
+  const seen = new Set<string>();
+
+  for (const label of STANDARD_LETTER_ORDER) {
+    const key = normalizeLetterKey(label);
+    if (seen.has(key)) continue;
+    const approx = approximatePercentFromLetterGrade(label);
+    if (approx === undefined) continue;
+    seen.add(key);
+    bands.push({
+      key,
+      label,
+      medianPercent: approx,
+      minPercent: approx,
+      maxPercent: approx,
+      pairedSamples: 0,
+      totalCount: 0,
+    });
+  }
+
+  bands.sort((a, b) => b.medianPercent - a.medianPercent);
+
+  for (let i = 0; i < bands.length; i++) {
+    const above = bands[i - 1];
+    const below = bands[i + 1];
+    bands[i].maxPercent =
+      above != null
+        ? (above.medianPercent + bands[i].medianPercent) / 2
+        : 100;
+    bands[i].minPercent =
+      below != null
+        ? (below.medianPercent + bands[i].medianPercent) / 2
+        : 0;
+  }
+
+  return {
+    bands,
+    pairedCount: 0,
+    letterAssessmentCount: 0,
+    confidence: "low",
+  };
+}
+
+/**
+ * Learn letter bands from assessments that report both % and the letter SEQTA assigned.
+ */
+export function inferLetterGradeScale(
+  assessments: Assessment[],
+): InferredLetterScale | null {
+  const pairMap = new Map<string, { percents: number[]; labels: string[] }>();
+  const letterOnlyMap = new Map<string, { labels: string[]; count: number }>();
+  let pairedCount = 0;
+  let letterAssessmentCount = 0;
+
+  for (const a of assessments) {
+    if (!isGradedAssessment(a)) continue;
+
+    const letterRaw = a.letterGrade?.trim();
+    const hasLetter = letterRaw && looksLikeLetterGrade(letterRaw);
+    if (hasLetter) letterAssessmentCount++;
+
+    if (hasLetter && a.finalGrade !== undefined) {
+      const key = normalizeLetterKey(letterRaw);
+      if (/^\d+(\.\d+)?$/.test(key)) continue;
+      pairedCount++;
+      if (!pairMap.has(key)) pairMap.set(key, { percents: [], labels: [] });
+      const entry = pairMap.get(key)!;
+      entry.percents.push(a.finalGrade);
+      entry.labels.push(letterRaw);
+    } else if (hasLetter) {
+      const key = normalizeLetterKey(letterRaw);
+      if (/^\d+(\.\d+)?$/.test(key)) continue;
+      if (!letterOnlyMap.has(key)) letterOnlyMap.set(key, { labels: [], count: 0 });
+      const entry = letterOnlyMap.get(key)!;
+      entry.count++;
+      entry.labels.push(letterRaw);
+    }
+  }
+
+  if (letterAssessmentCount < 2 && pairedCount < 2) return null;
+
+  const allKeys = new Set([...pairMap.keys(), ...letterOnlyMap.keys()]);
+  if (allKeys.size < 2 && pairedCount < 2) return null;
+
+  const bands: InferredLetterBand[] = [];
+
+  for (const key of allKeys) {
+    const paired = pairMap.get(key);
+    const letterOnly = letterOnlyMap.get(key);
+    const labels = [...(paired?.labels ?? []), ...(letterOnly?.labels ?? [])];
+    const percents = paired?.percents ?? [];
+    const totalCount = percents.length + (letterOnly?.count ?? 0);
+
+    let medianPercent: number;
+    let minPercent: number;
+    let maxPercent: number;
+
+    if (percents.length > 0) {
+      const sorted = [...percents].sort((x, y) => x - y);
+      medianPercent = sorted[Math.floor(sorted.length / 2)]!;
+      minPercent = sorted[0]!;
+      maxPercent = sorted[sorted.length - 1]!;
+    } else {
+      const approx = approximatePercentFromLetterGrade(pickDisplayLabel(labels));
+      if (approx === undefined) continue;
+      medianPercent = approx;
+      minPercent = approx;
+      maxPercent = approx;
+    }
+
+    bands.push({
+      key,
+      label: pickDisplayLabel(labels),
+      medianPercent,
+      minPercent,
+      maxPercent,
+      pairedSamples: percents.length,
+      totalCount,
+    });
+  }
+
+  if (bands.length < 2) return null;
+
+  bands.sort((a, b) => b.medianPercent - a.medianPercent);
+
+  for (let i = 0; i < bands.length; i++) {
+    const above = bands[i - 1];
+    const below = bands[i + 1];
+    if (bands[i].pairedSamples > 0 || above?.pairedSamples || below?.pairedSamples) {
+      bands[i].maxPercent =
+        above != null
+          ? (above.medianPercent + bands[i].medianPercent) / 2
+          : 100;
+      bands[i].minPercent =
+        below != null
+          ? (below.medianPercent + bands[i].medianPercent) / 2
+          : 0;
+    }
+  }
+
+  const confidence: InferredLetterScale["confidence"] =
+    pairedCount >= 8 || (pairedCount >= 5 && pairedCount / letterAssessmentCount >= 0.4)
+      ? "high"
+      : pairedCount >= 3 || letterAssessmentCount >= 5
+        ? "medium"
+        : "low";
+
+  return {
+    bands,
+    pairedCount,
+    letterAssessmentCount,
+    confidence,
+  };
+}
+
+function resolveEffectiveMode(
+  mode: DistributionMode,
+  inferred: InferredLetterScale | null,
+  graded: Assessment[],
+): "letter" | "percent" {
+  if (mode === "percent") return "percent";
+  if (mode === "letter") return "letter";
+
+  if (!inferred) return "percent";
+  const letterCount = graded.filter(
+    (a) => a.letterGrade && looksLikeLetterGrade(a.letterGrade),
+  ).length;
+  if (letterCount === 0) return "percent";
+  if (inferred.confidence === "high" || inferred.confidence === "medium") {
+    return "letter";
+  }
+  return letterCount / graded.length >= 0.35 ? "letter" : "percent";
+}
+
+function assignPercentToBand(
+  percent: number,
+  scale: InferredLetterScale,
+): string | null {
+  if (!scale.bands.length) return null;
+  for (const band of scale.bands) {
+    if (percent >= band.minPercent) return band.key;
+  }
+  return scale.bands[scale.bands.length - 1]!.key;
+}
+
+function buildPercentDistribution(graded: Assessment[]): GradeDistributionResult {
+  const counts = PERCENT_BUCKETS.map((b) => ({ label: b.label, count: 0 }));
+  let percentSum = 0;
+  let percentCount = 0;
+
+  for (const a of graded) {
+    let grade = a.finalGrade;
+    if (grade === undefined && a.letterGrade) {
+      grade = approximatePercentFromLetterGrade(a.letterGrade);
+    }
+    if (grade === undefined) continue;
+    percentSum += grade;
+    percentCount++;
+    const bucket = PERCENT_BUCKETS.find((b) => grade! >= b.min && grade! <= b.max);
+    if (bucket) {
+      const row = counts.find((c) => c.label === bucket.label);
+      if (row) row.count++;
+    }
+  }
+
+  return {
+    buckets: counts,
+    modeUsed: "percent",
+    scaleSource: "percent",
+    scaleLabel: "Percentage bands",
+    gradedCount: graded.length,
+    averagePercent:
+      percentCount > 0 ? Math.round((percentSum / percentCount) * 10) / 10 : null,
+    letterGradeCoverage: 0,
+  };
+}
+
+function buildLetterDistribution(
+  graded: Assessment[],
+  inferred: InferredLetterScale | null,
+  forceStandard: boolean,
+): GradeDistributionResult {
+  const scale =
+    !forceStandard && inferred && inferred.bands.length >= 2
+      ? inferred
+      : buildStandardLetterScale();
+  const scaleSource =
+    !forceStandard && inferred && inferred.bands.length >= 2 ? "inferred" : "standard";
+
+  const countByKey = new Map<string, number>();
+  for (const band of scale.bands) countByKey.set(band.key, 0);
+
+  let percentSum = 0;
+  let percentCount = 0;
+  let withLetter = 0;
+
+  for (const a of graded) {
+    if (a.finalGrade !== undefined) {
+      percentSum += a.finalGrade;
+      percentCount++;
+    }
+
+    const letterRaw = a.letterGrade?.trim();
+    if (letterRaw && looksLikeLetterGrade(letterRaw)) withLetter++;
+
+    let key: string | null = null;
+    if (letterRaw && looksLikeLetterGrade(letterRaw)) {
+      key = normalizeLetterKey(letterRaw);
+      if (/^\d+(\.\d+)?$/.test(key)) key = null;
+    }
+    if (!key && a.finalGrade !== undefined) {
+      key = assignPercentToBand(a.finalGrade, scale);
+    }
+    if (!key && letterRaw && looksLikeLetterGrade(letterRaw)) {
+      const approx = approximatePercentFromLetterGrade(letterRaw);
+      if (approx !== undefined) key = assignPercentToBand(approx, scale);
+    }
+    if (!key) continue;
+
+    if (!countByKey.has(key)) {
+      countByKey.set(key, 0);
+      const existing = scale.bands.find((b) => b.key === key);
+      if (!existing) {
+        const approx =
+          a.finalGrade ??
+          (letterRaw ? approximatePercentFromLetterGrade(letterRaw) : undefined) ??
+          0;
+        scale.bands.push({
+          key,
+          label:
+            letterRaw && looksLikeLetterGrade(letterRaw)
+              ? letterRaw
+              : key.toUpperCase(),
+          medianPercent: approx,
+          minPercent: 0,
+          maxPercent: 100,
+          pairedSamples: 0,
+          totalCount: 0,
+        });
+        scale.bands.sort((x, y) => y.medianPercent - x.medianPercent);
+      }
+    }
+    countByKey.set(key, (countByKey.get(key) ?? 0) + 1);
+  }
+
+  const buckets: DistributionBucket[] = scale.bands
+    .filter((b) => (countByKey.get(b.key) ?? 0) > 0)
+    .map((b) => ({
+      label: b.label,
+      count: countByKey.get(b.key) ?? 0,
+      minPercent: Math.round(b.minPercent),
+      maxPercent: Math.round(b.maxPercent),
+    }));
+
+  const scaleLabel =
+    scaleSource === "inferred"
+      ? "Learned from your school's percentage ↔ letter marks"
+      : "Standard A–F style scale (override)";
+
+  return {
+    buckets,
+    modeUsed: "letter",
+    scaleSource,
+    scaleLabel,
+    gradedCount: graded.length,
+    averagePercent:
+      percentCount > 0 ? Math.round((percentSum / percentCount) * 10) / 10 : null,
+    letterGradeCoverage: graded.length ? withLetter / graded.length : 0,
+  };
+}
+
+export function buildGradeDistribution(
+  assessments: Assessment[],
+  mode: DistributionMode = "auto",
+): GradeDistributionResult {
+  const graded = assessments.filter(isGradedAssessment);
+  if (!graded.length) {
+    return {
+      buckets: [],
+      modeUsed: "percent",
+      scaleSource: "percent",
+      scaleLabel: "Percentage bands",
+      gradedCount: 0,
+      averagePercent: null,
+      letterGradeCoverage: 0,
+    };
+  }
+
+  const inferred = inferLetterGradeScale(graded);
+  const effective = resolveEffectiveMode(mode, inferred, graded);
+
+  if (effective === "letter") {
+    return buildLetterDistribution(graded, inferred, mode === "letter" && !inferred);
+  }
+  return buildPercentDistribution(graded);
+}

src/plugins/built-in/gradeAnalytics/lazy.ts

@@ -0,0 +1,38 @@
+import { defineLazyPlugin } from "../../core/dynamicLoader";
+import { defineSettings, numberSetting } from "../../core/settingsHelpers";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import styles from "./styles.css?inline";
+
+const settings = defineSettings({
+  cacheTtlHours: numberSetting({
+    default: 24,
+    title: "Cache duration (hours)",
+    description: "How long to keep synced analytics before refreshing from SEQTA",
+    min: 1,
+    max: 168,
+  }),
+});
+
+const gradeAnalyticsPluginLazy = defineLazyPlugin({
+  id: "grade-analytics",
+  name: "Grade Analytics",
+  description:
+    "Grade trends, distribution charts, and assessment history synced from SEQTA",
+  version: "1.0.0",
+  settings,
+  disableToggle: false,
+  defaultEnabled: true,
+  styles,
+  loader: () => import("./core/index"),
+});
+
+const runGradeAnalytics = gradeAnalyticsPluginLazy.run!;
+
+gradeAnalyticsPluginLazy.run = async (api) => {
+  if (isSeqtaEngageExperience()) {
+    return () => {};
+  }
+  return runGradeAnalytics(api);
+};
+
+export default gradeAnalyticsPluginLazy;

src/plugins/built-in/gradeAnalytics/letterGradeScale.ts

@@ -0,0 +1,116 @@
+/**
+ * When SEQTA only reports letter bands (no percentage), map to approximate 0–100
+ * so analytics charts can run. Conventional scale, not official school conversion.
+ */
+const LETTER_TO_APPROX_PERCENT: Record<string, number> = {
+  "a+": 95,
+  a: 85,
+  "a-": 80,
+  "b+": 75,
+  b: 68,
+  "b-": 62,
+  "c+": 58,
+  c: 55,
+  "c-": 50,
+  "d+": 48,
+  d: 45,
+  "d-": 42,
+  e: 38,
+  f: 32,
+  hd: 95,
+  cr: 60,
+  p: 55,
+  ps: 55,
+  n: 35,
+  pass: 55,
+  fail: 32,
+};
+
+function normalizeLetterKey(raw: string): string {
+  const s = raw.trim().toLowerCase();
+  const first = s.split(/[\s(/]/)[0] ?? s;
+  return first.replace(/[^a-z+-]/gi, "") || s;
+}
+
+export function approximatePercentFromLetterGrade(
+  letter: string | null | undefined,
+): number | undefined {
+  if (letter == null) return undefined;
+  const t = String(letter).trim();
+  if (!t) return undefined;
+  if (/^\d+(\.\d+)?$/.test(t)) {
+    const n = parseFloat(t);
+    if (!isNaN(n) && n >= 0 && n <= 100) return n;
+  }
+  const key = normalizeLetterKey(t);
+  if (LETTER_TO_APPROX_PERCENT[key] !== undefined)
+    return LETTER_TO_APPROX_PERCENT[key];
+  if (t.length === 1 && /^[a-f]$/i.test(t)) {
+    const single = t.toLowerCase() as keyof typeof LETTER_TO_APPROX_PERCENT;
+    if (LETTER_TO_APPROX_PERCENT[single] !== undefined)
+      return LETTER_TO_APPROX_PERCENT[single];
+  }
+  return undefined;
+}
+
+export function extractLetterGradeStringFromPayload(data: {
+  criteria?: { results?: { grade?: unknown } }[];
+  results?: { grade?: unknown };
+  letterGrade?: unknown;
+  extra?: Record<string, unknown>;
+}): string | undefined {
+  const merged: Record<string, unknown> = {
+    ...(data?.extra && typeof data.extra === "object" ? data.extra : {}),
+    ...data,
+  };
+  if (merged.letterGrade != null && String(merged.letterGrade).trim() !== "") {
+    return String(merged.letterGrade).trim();
+  }
+  const criteria = merged.criteria as
+    | { results?: { grade?: unknown } }[]
+    | undefined;
+  const c0 = criteria?.[0]?.results?.grade;
+  if (c0 != null && String(c0).trim() !== "") return String(c0).trim();
+  const r = (merged.results as { grade?: unknown } | undefined)?.grade;
+  if (r != null && String(r).trim() !== "") return String(r).trim();
+  return undefined;
+}
+
+export function resolveNumericGradeFromAssessmentPayload(data: {
+  status?: string;
+  finalGrade?: unknown;
+  criteria?: { results?: { percentage?: unknown; grade?: unknown } }[];
+  results?: { percentage?: unknown; grade?: unknown };
+  letterGrade?: unknown;
+  extra?: Record<string, unknown>;
+}): number | undefined {
+  const merged: Record<string, unknown> = {
+    ...(data?.extra && typeof data.extra === "object" ? data.extra : {}),
+    ...data,
+  };
+  if (merged.finalGrade != null && merged.finalGrade !== "") {
+    const n = Number(merged.finalGrade);
+    if (!isNaN(n)) return n;
+  }
+  if (merged.status && merged.status !== "MARKS_RELEASED") return undefined;
+
+  const criteria = merged.criteria as
+    | { results?: { percentage?: unknown; grade?: unknown } }[]
+    | undefined;
+  if (criteria?.[0]?.results?.percentage !== undefined) {
+    const n = Number(criteria[0].results!.percentage);
+    if (!isNaN(n)) return n;
+  }
+  const results = merged.results as
+    | { percentage?: unknown; grade?: unknown }
+    | undefined;
+  if (results?.percentage !== undefined) {
+    const n = Number(results.percentage);
+    if (!isNaN(n)) return n;
+  }
+
+  const letter = extractLetterGradeStringFromPayload(
+    merged as Parameters<typeof extractLetterGradeStringFromPayload>[0],
+  );
+  return approximatePercentFromLetterGrade(letter);
+}

src/plugins/built-in/gradeAnalytics/loadAnalyticsPage.ts

@@ -0,0 +1,46 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+
+let loadInFlight: Promise<void> | null = null;
+
+export async function loadAnalyticsPage(): Promise<void> {
+  if (!settingsState.onoff) return;
+
+  if (loadInFlight) {
+    await loadInFlight;
+    return;
+  }
+
+  loadInFlight = loadAnalyticsPageInner();
+  try {
+    await loadInFlight;
+  } finally {
+    loadInFlight = null;
+  }
+}
+
+async function loadAnalyticsPageInner(): Promise<void> {
+  document.title = "Analytics ― SEQTA Learn";
+
+  document.querySelectorAll("#menu .item").forEach((item) => {
+    item.classList.remove("active");
+  });
+  document.querySelector('[data-key="analytics"]')?.classList.add("active");
+
+  const main = (await waitForElm("#main", true, 100, 60)) as HTMLElement;
+
+  main.innerHTML = "";
+  main.style.overflow = "auto";
+  main.style.width = "100%";
+  main.style.maxWidth = "none";
+  const viewShell = document.createElement("div");
+  viewShell.id = "analytics-view-container";
+  main.appendChild(viewShell);
+  const container = viewShell;
+
+  const titlediv = document.getElementById("title")?.firstChild;
+  if (titlediv) (titlediv as HTMLElement).innerText = "Analytics";
+
+  const { renderAnalyticsPage } = await import("./ui");
+  renderAnalyticsPage(container);
+}

src/plugins/built-in/gradeAnalytics/openAnalyticsPrivacyPopup.ts

@@ -0,0 +1,61 @@
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { openPopup } from "@/seqta/utils/Openers/PopupManager";
+
+/** Grade Analytics privacy — uses the shared BetterSEQTA+ whatsnew popup shell. */
+export function openAnalyticsPrivacyPopup() {
+  const header = stringToHTML(
+    /* html */
+    `<div class="whatsnewHeader">
+        <h1>Privacy notice</h1>
+        <p>Grade Analytics on this device</p>
+      </div>`,
+  ).firstChild as HTMLElement;
+
+  const text = stringToHTML(/* html */ `
+      <div class="whatsnewTextContainer privacyStatement">
+        <p style="margin-top: 0;">
+          <strong>Your grade history and charts stay on this device.</strong>
+          BetterSEQTA+ does not collect or store your analytics on our servers.
+        </p>
+
+        <h3>What we store locally</h3>
+        <ul style="text-align: left; margin: 10px 0;">
+          <li>Assessment results and subjects used for trends, distribution, and the table</li>
+          <li>Chart preferences (for example, grade distribution grouping) for your school account</li>
+          <li>A cache timestamp so Refresh data knows when to fetch from SEQTA again</li>
+        </ul>
+
+        <h3>What we never do</h3>
+        <ul style="text-align: left; margin: 10px 0;">
+          <li>Upload analytics data to BetterSEQTA Cloud or any BetterSEQTA server</li>
+          <li>Include analytics in automatic cloud settings backup or restore</li>
+          <li>Send your grades to third-party analytics or tracking services</li>
+        </ul>
+
+        <h3>How refresh works</h3>
+        <p>
+          Refresh data loads released marks directly from SEQTA while you are logged in.
+          That traffic is between your browser and your school’s SEQTA site — not to us.
+        </p>
+
+        <h3>Clearing your data</h3>
+        <p>
+          You can remove cached analytics any time by clearing this extension’s storage in
+          your browser settings.
+        </p>
+
+        <p style="font-weight: 600;">
+          General plugin settings (such as cache duration in the Grade Analytics plugin
+          panel) may still sync if you use BetterSEQTA Cloud — but never your assessment
+          results or charts.
+        </p>
+      </div>
+    `).firstChild as HTMLElement;
+
+  openPopup({
+    header,
+    content: [text],
+    animateSelector: ".whatsnewTextContainer *",
+    containerClass: "whatsnewContainer--scrollBody",
+  });
+}

src/plugins/built-in/gradeAnalytics/storage.ts

@@ -0,0 +1,68 @@
+import browser from "webextension-polyfill";
+import type { DistributionMode } from "./gradeDistribution";
+import type { AnalyticsCache } from "./types";
+
+const STORAGE_PREFIX = "bsplus.analytics.v2";
+const DISTRIBUTION_MODE_PREFIX = "bsplus.analytics.distMode.v1";
+
+export function analyticsStorageKey(origin: string, studentId: number): string {
+  return `${STORAGE_PREFIX}.${origin}.${studentId}`;
+}
+
+export async function loadAnalyticsCache(
+  origin: string,
+  studentId: number,
+): Promise<AnalyticsCache | null> {
+  const key = analyticsStorageKey(origin, studentId);
+  const result = await browser.storage.local.get(key);
+  const cached = result[key] as AnalyticsCache | undefined;
+  if (!cached?.assessments) return null;
+  return cached;
+}
+
+export async function saveAnalyticsCache(
+  origin: string,
+  studentId: number,
+  assessments: AnalyticsCache["assessments"],
+): Promise<void> {
+  const key = analyticsStorageKey(origin, studentId);
+  const payload: AnalyticsCache = {
+    updatedAt: Date.now(),
+    assessments,
+  };
+  await browser.storage.local.set({ [key]: payload });
+}
+
+export function distributionModeStorageKey(
+  origin: string,
+  studentId: number,
+): string {
+  return `${DISTRIBUTION_MODE_PREFIX}.${origin}.${studentId}`;
+}
+
+const VALID_DISTRIBUTION_MODES: DistributionMode[] = ["auto", "letter", "percent"];
+
+export async function loadDistributionMode(
+  origin: string,
+  studentId: number,
+): Promise<DistributionMode | null> {
+  const key = distributionModeStorageKey(origin, studentId);
+  const result = await browser.storage.local.get(key);
+  const mode = result[key];
+  if (
+    typeof mode === "string" &&
+    VALID_DISTRIBUTION_MODES.includes(mode as DistributionMode)
+  ) {
+    return mode as DistributionMode;
+  }
+  return null;
+}
+
+export async function saveDistributionMode(
+  origin: string,
+  studentId: number,
+  mode: DistributionMode,
+): Promise<void> {
+  const key = distributionModeStorageKey(origin, studentId);
+  await browser.storage.local.set({ [key]: mode });
+}

src/plugins/built-in/gradeAnalytics/timeRange.ts

@@ -0,0 +1,224 @@
+import type { Assessment } from "./types";
+
+export type TimeRange = "all" | "365d" | "90d" | "30d" | "7d";
+
+export const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
+  { value: "all", label: "All time" },
+  { value: "365d", label: "Last 12 months" },
+  { value: "90d", label: "Last 3 months" },
+  { value: "30d", label: "Last 30 days" },
+  { value: "7d", label: "Last 7 days" },
+];
+
+export function getTimeRangeLabel(timeRange: TimeRange): string {
+  return TIME_RANGE_OPTIONS.find((o) => o.value === timeRange)?.label ?? "All time";
+}
+
+export function getTimeRangeCutoff(timeRange: TimeRange): Date | null {
+  if (timeRange === "all") return null;
+  const referenceDate = new Date();
+  let daysToSubtract = 90;
+  if (timeRange === "30d") daysToSubtract = 30;
+  else if (timeRange === "7d") daysToSubtract = 7;
+  else if (timeRange === "365d") daysToSubtract = 365;
+  const cutoff = new Date(referenceDate);
+  cutoff.setDate(cutoff.getDate() - daysToSubtract);
+  cutoff.setHours(0, 0, 0, 0);
+  return cutoff;
+}
+
+export function filterAssessmentsByTimeRange(
+  assessments: Assessment[],
+  timeRange: TimeRange,
+): Assessment[] {
+  const cutoff = getTimeRangeCutoff(timeRange);
+  if (!cutoff) return assessments;
+  return assessments.filter((a) => new Date(a.due) >= cutoff);
+}
+
+export type TrendPoint = {
+  date: Date;
+  average: number;
+  count: number;
+  [seriesKey: string]: number | Date;
+};
+
+export type TrendSeries = {
+  key: string;
+  label: string;
+  color: string;
+  isOverall?: boolean;
+};
+
+const SUBJECT_CHART_COLORS = [
+  "#2563eb",
+  "#16a34a",
+  "#ca8a04",
+  "#9333ea",
+  "#0891b2",
+  "#ea580c",
+  "#db2777",
+  "#4f46e5",
+  "#0d9488",
+  "#b45309",
+  "#7c3aed",
+  "#dc2626",
+];
+
+export function subjectChartColor(index: number): string {
+  return SUBJECT_CHART_COLORS[index % SUBJECT_CHART_COLORS.length];
+}
+
+function periodKeyForAssessment(
+  assessment: Assessment,
+  useMonthlyGrouping: boolean,
+): string {
+  const date = new Date(assessment.due);
+  if (useMonthlyGrouping) {
+    return date.toISOString().slice(0, 7);
+  }
+  const monday = new Date(date);
+  const dayOfWeek = date.getDay();
+  const diff = date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
+  monday.setDate(diff);
+  return monday.toISOString().slice(0, 10);
+}
+
+function periodDate(periodKey: string, useMonthlyGrouping: boolean): Date {
+  return useMonthlyGrouping ? new Date(`${periodKey}-01`) : new Date(periodKey);
+}
+
+function average(nums: number[]): number {
+  return nums.reduce((sum, g) => sum + g, 0) / nums.length;
+}
+
+function slugSubjectKey(name: string, keyBySubject: Map<string, string>): string {
+  if (keyBySubject.has(name)) return keyBySubject.get(name)!;
+  let base =
+    name
+      .trim()
+      .replace(/[^\w]+/g, "_")
+      .replace(/^_+|_+$/g, "")
+      .slice(0, 48) || "subject";
+  const taken = new Set(keyBySubject.values());
+  let candidate = base;
+  let n = 2;
+  while (taken.has(candidate)) {
+    candidate = `${base}_${n}`;
+    n++;
+  }
+  keyBySubject.set(name, candidate);
+  return candidate;
+}
+
+export function buildGradeTrendChart(
+  data: Assessment[],
+  timeRange: TimeRange,
+  options: { showPerSubject?: boolean } = {},
+): { points: TrendPoint[]; series: TrendSeries[]; accentColor: string } {
+  const accentColor =
+    "var(--bsplus-analytics-accent, var(--better-main, #007bff))";
+
+  const graded = data.filter(
+    (a) => a.finalGrade !== undefined && a.finalGrade !== null,
+  );
+  if (!graded.length) {
+    return { points: [], series: [], accentColor };
+  }
+
+  const useMonthlyGrouping = timeRange === "365d" || timeRange === "all";
+  const cutoff = getTimeRangeCutoff(timeRange);
+
+  const overallBuckets = new Map<string, number[]>();
+  const subjectBuckets = new Map<string, Map<string, number[]>>();
+  const subjectLabels = new Map<string, string>();
+  const keyBySubject = new Map<string, string>();
+
+  for (const assessment of graded) {
+    const grade = assessment.finalGrade!;
+    const periodKey = periodKeyForAssessment(assessment, useMonthlyGrouping);
+    const periodDateValue = periodDate(periodKey, useMonthlyGrouping);
+    if (cutoff && periodDateValue < cutoff) continue;
+
+    if (!overallBuckets.has(periodKey)) overallBuckets.set(periodKey, []);
+    overallBuckets.get(periodKey)!.push(grade);
+
+    if (options.showPerSubject) {
+      const subject = assessment.subject;
+      if (!subjectBuckets.has(subject)) {
+        subjectBuckets.set(subject, new Map());
+        subjectLabels.set(subject, subject);
+        slugSubjectKey(subject, keyBySubject);
+      }
+      const buckets = subjectBuckets.get(subject)!;
+      if (!buckets.has(periodKey)) buckets.set(periodKey, []);
+      buckets.get(periodKey)!.push(grade);
+    }
+  }
+
+  const periodKeys = new Set<string>(overallBuckets.keys());
+  if (options.showPerSubject) {
+    for (const buckets of subjectBuckets.values()) {
+      for (const key of buckets.keys()) periodKeys.add(key);
+    }
+  }
+
+  const points: TrendPoint[] = Array.from(periodKeys)
+    .sort()
+    .map((periodKey) => {
+      const grades = overallBuckets.get(periodKey) ?? [];
+      const point: TrendPoint = {
+        date: periodDate(periodKey, useMonthlyGrouping),
+        average: grades.length ? average(grades) : NaN,
+        count: grades.length,
+      };
+
+      if (options.showPerSubject) {
+        for (const [subject, buckets] of subjectBuckets) {
+          const seriesKey = keyBySubject.get(subject)!;
+          const subjectGrades = buckets.get(periodKey);
+          if (subjectGrades?.length) {
+            point[seriesKey] = average(subjectGrades);
+          }
+        }
+      }
+
+      return point;
+    })
+    .filter((p) => {
+      if (!Number.isNaN(p.average)) return true;
+      if (!options.showPerSubject) return false;
+      return Object.keys(p).some(
+        (key) =>
+          key !== "date" &&
+          key !== "average" &&
+          key !== "count" &&
+          typeof p[key] === "number" &&
+          !Number.isNaN(p[key] as number),
+      );
+    });
+
+  const series: TrendSeries[] = [
+    {
+      key: "average",
+      label: "Overall average",
+      color: accentColor,
+      isOverall: true,
+    },
+  ];
+
+  if (options.showPerSubject) {
+    const subjects = [...subjectLabels.keys()].sort((a, b) =>
+      a.localeCompare(b, undefined, { sensitivity: "base" }),
+    );
+    subjects.forEach((subject, index) => {
+      series.push({
+        key: keyBySubject.get(subject)!,
+        label: subject,
+        color: subjectChartColor(index),
+      });
+    });
+  }
+
+  return { points, series, accentColor };
+}

src/plugins/built-in/gradeAnalytics/types.ts

@@ -0,0 +1,29 @@
+export type AssessmentStatus = "OVERDUE" | "MARKS_RELEASED" | "PENDING";
+
+export interface Assessment {
+  id: number;
+  title: string;
+  subject: string;
+  status: AssessmentStatus;
+  due: string;
+  code: string;
+  metaclassID: number;
+  programmeID: number;
+  graded: boolean;
+  overdue: boolean;
+  hasFeedback: boolean;
+  expectationsEnabled: boolean;
+  expectationsCompleted: boolean;
+  reflectionsEnabled: boolean;
+  reflectionsCompleted: boolean;
+  availability: string;
+  finalGrade?: number;
+  letterGrade?: string;
+}
+
+export type AnalyticsData = Assessment[];
+
+export interface AnalyticsCache {
+  updatedAt: number;
+  assessments: Assessment[];
+}

src/plugins/built-in/gradeAnalytics/ui.ts

@@ -0,0 +1,195 @@
+import tailwindStyles from "@/interface/index.css?inline";
+import pluginStyles from "./styles.css?inline";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { mount, unmount } from "svelte";
+import GradeAnalyticsPage from "./GradeAnalyticsPage.svelte";
+
+type ThemeSettingKey =
+  | "selectedColor"
+  | "DarkMode"
+  | "adaptiveThemeColour"
+  | "adaptiveThemeGradient"
+  | "selectedTheme";
+
+type ThemeListenerRegistration = {
+  key: ThemeSettingKey;
+  listener: () => void;
+};
+
+let currentApp: ReturnType<typeof mount> | null = null;
+let shadowHost: HTMLElement | null = null;
+let analyticsRoot: HTMLElement | null = null;
+let darkModeObserver: MutationObserver | null = null;
+let themeStyleObserver: MutationObserver | null = null;
+let themeListeners: ThemeListenerRegistration[] = [];
+
+const THEME_CSS_VARS = [
+  "--better-main",
+  "--better-pale",
+  "--better-light",
+  "--text-color",
+  "--background-primary",
+  "--background-secondary",
+  "--text-primary",
+  "--theme-offset-bg",
+  "--better-sub",
+] as const;
+
+const ACCENT_CSS_VARS = [
+  "--better-main",
+  "--accent-color-value",
+  "--accentColor",
+  "--colour-betterseqta-blue",
+] as const;
+
+/** Resolve a solid colour for charts (gradients → first stop). */
+function extractSolidColor(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "initial") return null;
+  if (
+    trimmed.startsWith("#") ||
+    trimmed.startsWith("rgb") ||
+    trimmed.startsWith("hsl")
+  ) {
+    return trimmed;
+  }
+  if (trimmed.includes("gradient")) {
+    const match = trimmed.match(
+      /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
+    );
+    return match?.[0] ?? null;
+  }
+  return null;
+}
+
+const THEME_ACCENT_OVERRIDES: Record<string, string> = {
+  "bb0aaf40-55ef-40f7-bc64-93b67ef96c01": "#4ade80",
+};
+
+function resolvePageAccentColor(): string {
+  const themeId = settingsState.selectedTheme;
+  if (themeId && themeId in THEME_ACCENT_OVERRIDES) {
+    return THEME_ACCENT_OVERRIDES[themeId];
+  }
+  const computed = getComputedStyle(document.documentElement);
+  for (const name of ACCENT_CSS_VARS) {
+    const solid = extractSolidColor(computed.getPropertyValue(name));
+    if (solid) return solid;
+  }
+  const fromSettings = settingsState.selectedColor?.trim();
+  if (fromSettings) {
+    const solid = extractSolidColor(fromSettings);
+    if (solid) return solid;
+  }
+  return "#007bff";
+}
+
+function syncThemeFromPage(target: HTMLElement) {
+  const computed = getComputedStyle(document.documentElement);
+
+  for (const name of THEME_CSS_VARS) {
+    let value = computed.getPropertyValue(name).trim();
+    value = document.documentElement.style.getPropertyValue(name).trim();
+    if (value) {
+      target.style.setProperty(name, value);
+    }
+  }
+
+  const accent = resolvePageAccentColor();
+  target.style.setProperty("--bsplus-analytics-accent", accent);
+  target.style.setProperty("--better-main", accent);
+
+  target.classList.toggle(
+    "dark",
+    document.documentElement.classList.contains("dark"),
+  );
+}
+
+function syncThemeToAnalyticsUi() {
+  if (shadowHost) syncThemeFromPage(shadowHost);
+  if (analyticsRoot) syncThemeFromPage(analyticsRoot);
+}
+
+function clearThemeListeners() {
+  for (const { key, listener } of themeListeners) {
+    settingsState.unregister(key, listener);
+  }
+  themeListeners = [];
+}
+
+function watchThemeChanges() {
+  clearThemeListeners();
+
+  const keys: ThemeSettingKey[] = [
+    "selectedColor",
+    "DarkMode",
+    "adaptiveThemeColour",
+    "adaptiveThemeGradient",
+    "selectedTheme",
+  ];
+
+  const listener = () => syncThemeToAnalyticsUi();
+  for (const key of keys) {
+    settingsState.register(key, listener);
+    themeListeners.push({ key, listener });
+  }
+
+  themeStyleObserver?.disconnect();
+  themeStyleObserver = new MutationObserver(() => syncThemeToAnalyticsUi());
+  themeStyleObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["style", "class"],
+  });
+}
+
+function teardown() {
+  clearThemeListeners();
+  themeStyleObserver?.disconnect();
+  themeStyleObserver = null;
+
+  if (currentApp) {
+    unmount(currentApp);
+    currentApp = null;
+  }
+  darkModeObserver?.disconnect();
+  darkModeObserver = null;
+  shadowHost?.remove();
+  shadowHost = null;
+  analyticsRoot = null;
+}
+
+export function renderAnalyticsPage(container: HTMLElement) {
+  teardown();
+
+  container.innerHTML = "";
+  container.className = "bsplus-analytics-container";
+
+  shadowHost = document.createElement("div");
+  shadowHost.className = "bsplus-analytics-host";
+  container.appendChild(shadowHost);
+
+  const shadow = shadowHost.attachShadow({ mode: "open" });
+
+  const styleElement = document.createElement("style");
+  styleElement.textContent = `${tailwindStyles}\n${pluginStyles}`;
+  shadow.appendChild(styleElement);
+
+  analyticsRoot = document.createElement("div");
+  analyticsRoot.className = "bsplus-analytics-root";
+  syncThemeToAnalyticsUi();
+  shadow.appendChild(analyticsRoot);
+
+  watchThemeChanges();
+
+  darkModeObserver = new MutationObserver(() => syncThemeToAnalyticsUi());
+  darkModeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  currentApp = mount(GradeAnalyticsPage, { target: analyticsRoot });
+}
+
+export function unmountAnalyticsPage() {
+  teardown();
+}

src/plugins/built-in/gradeAnalytics/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(" ");
+}

src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
   import localforage from 'localforage'
+  import {
+    isUseCloudPfpEnabled,
+    notifyProfilePictureChanged,
+    syncLocalProfilePictureToCloud,
+  } from '@/seqta/utils/cloudPfpSync'
   let value = $state<string | undefined>(undefined)
   let fileInput = $state<HTMLInputElement | undefined>(undefined)
   let dragging = $state(false)
@@ -25,6 +30,14 @@
 
   load()
 
+  async function afterProfilePictureChange() {
+    window.dispatchEvent(new Event('profile-picture-updated'))
+    if (await isUseCloudPfpEnabled()) {
+      await syncLocalProfilePictureToCloud()
+    }
+    await notifyProfilePictureChanged()
+  }
+
   function triggerSelect() {
     fileInput?.click()
   }
@@ -43,7 +56,7 @@
     const newBlobUrl = URL.createObjectURL(file)
     value = newBlobUrl
     blobUrl = newBlobUrl
-    window.dispatchEvent(new Event('profile-picture-updated'))
+    await afterProfilePictureChange()
   }
 
   function onFileChange() {
@@ -63,7 +76,7 @@
     }
     value = undefined
     await store.removeItem('profile-picture')
-    window.dispatchEvent(new Event('profile-picture-updated'))
+    await afterProfilePictureChange()
   }
 </script>
 

src/plugins/built-in/profilePicture/index.ts

@@ -6,6 +6,7 @@ import {
 } from "@/plugins/core/settingsHelpers";
 import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
 import { waitForElm } from "@/seqta/utils/waitForElm";
+import browser from "webextension-polyfill";
 import { cloudAuth } from "@/seqta/utils/CloudAuth";
 import styles from "./styles.css?inline";
 import localforage from "localforage";
@@ -67,7 +68,8 @@ const profilePicturePlugin: Plugin<typeof settings> = {
       if (useCloud && pfpUrl) {
         img = document.createElement("img");
         img.className = "userInfoImg";
-        img.src = pfpUrl;
+        const base = pfpUrl.split("?")[0]!;
+        img.src = `${base}?v=${Date.now()}`;
         if (svg) svg.style.display = "none";
         container.appendChild(img);
         return;
@@ -93,11 +95,26 @@ const profilePicturePlugin: Plugin<typeof settings> = {
     };
     window.addEventListener("profile-picture-updated", onLocalPictureUpdated);
 
+    const onStorageRevision = (
+      changes: Record<string, browser.Storage.StorageChange>,
+      areaName: string,
+    ) => {
+      if (areaName === "local" && changes.profile_picture_revision) {
+        void applyProfileImage();
+      }
+    };
+    browser.storage.onChanged.addListener(onStorageRevision);
+
     const cloudUnsub = cloudAuth.subscribe(() => {
       void applyProfileImage();
     });
 
-    const useCloudUnreg = api.settings.onChange("useCloudPfp", () => {
+    const useCloudUnreg = api.settings.onChange("useCloudPfp", (enabled: boolean) => {
+      if (enabled) {
+        void import("@/seqta/utils/cloudPfpSync").then(({ syncLocalProfilePictureToCloud }) =>
+          syncLocalProfilePictureToCloud(),
+        );
+      }
       void applyProfileImage();
     });
 
@@ -105,6 +122,7 @@ const profilePicturePlugin: Plugin<typeof settings> = {
       useCloudUnreg.unregister();
       cloudUnsub();
       window.removeEventListener("profile-picture-updated", onLocalPictureUpdated);
+      browser.storage.onChanged.removeListener(onStorageRevision);
       if (img) img.remove();
       if (svg) svg.style.display = "";
       if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);

src/plugins/built-in/themes/theme-manager.ts

@@ -17,6 +17,15 @@ import {
   clearCustomThemeAdaptiveCssVariables,
   setCustomThemeAdaptiveCssVariables,
 } from "@/seqta/ui/colors/customThemeAdaptiveBindings";
+import {
+  clearThemeRuntime,
+  injectThemeDom,
+  runThemeScript,
+  type ThemeDomSpec,
+  type ThemeScriptSpec,
+  validateThemeDom,
+  validateThemeScript,
+} from "./theme-runtime";
 
 type ThemeContent = {
   id: string;
@@ -31,6 +40,8 @@ type ThemeContent = {
   forceDark?: boolean;
   adaptiveCssVariables?: string[];
   images?: { id: string; variableName: string; data: string }[]; // data: base64
+  themeScript?: ThemeScriptSpec;
+  themeDom?: ThemeDomSpec;
 };
 
 export type InstallThemeMeta = {
@@ -53,6 +64,7 @@ export class ThemeManager {
   private imageUrlCache: Map<string, string> = new Map();
   private lastTransitionPoint: { x: number; y: number } = { x: 0, y: 0 };
   private storeUpdateCheckRunning = false;
+  private headObserver: MutationObserver | null = null;
 
   private constructor() {
     console.debug("[ThemeManager] Initializing...");
@@ -307,6 +319,13 @@ export class ThemeManager {
   private async applyTheme(theme: CustomTheme): Promise<void> {
     console.debug("[ThemeManager] Applying theme:", theme.name);
     try {
+      // Run the theme script BEFORE injecting CustomCSS so any state the
+      // script publishes (e.g. `data-city-state` and `--city-sky-color` for
+      // Noir City) is already on <html> when the new CSS rules paint.
+      // Otherwise the CSS lands with var() unresolved and the page flashes
+      // its previous state before snapping to the right colour.
+      runThemeScript(theme.themeScript);
+
       // Apply custom CSS
       if (theme.CustomCSS) {
         console.debug("[ThemeManager] Applying custom CSS");
@@ -348,6 +367,8 @@ export class ThemeManager {
       }
 
       setCustomThemeAdaptiveCssVariables(theme.adaptiveCssVariables ?? []);
+
+      injectThemeDom(theme.themeDom);
     } catch (error) {
       console.error("[ThemeManager] Error applying theme:", error);
     }
@@ -379,6 +400,13 @@ export class ThemeManager {
   ): Promise<void> {
     console.debug("[ThemeManager] Removing theme:", theme.name);
     try {
+      clearThemeRuntime();
+
+      // Disconnect the head observer BEFORE removing the style element,
+      // otherwise the removal fires the observer and it would no-op only
+      // because the style is already gone — wasted work, but harmless.
+      this.disconnectStyleObserver();
+
       // Remove custom CSS
       if (this.styleElement) {
         console.debug("[ThemeManager] Removing custom CSS");
@@ -448,7 +476,13 @@ export class ThemeManager {
   }
 
   /**
-   * Apply custom CSS to the document
+   * Apply custom CSS to the document. The `<style>` element is always
+   * re-appended to the end of `<head>` so it wins specificity ties
+   * against any styles SEQTA's late-loading injected.scss adds in dev
+   * mode (where `import("@/css/injected.scss")` is fire-and-forget and
+   * can resolve after the theme has already been applied). The head
+   * observer below keeps us at the end if anything else gets appended
+   * later (Vite HMR, another script-injected stylesheet, etc.).
    */
   private applyCustomCSS(css: string): void {
     console.debug("[ThemeManager] Applying custom CSS");
@@ -456,14 +490,39 @@ export class ThemeManager {
       if (!this.styleElement) {
         this.styleElement = document.createElement("style");
         this.styleElement.id = "custom-theme";
-        document.head.appendChild(this.styleElement);
       }
       this.styleElement.textContent = css;
+      document.head.appendChild(this.styleElement);
+      this.ensureStyleStaysLast();
     } catch (error) {
       console.error("[ThemeManager] Error applying custom CSS:", error);
     }
   }
 
+  /**
+   * Watch `<head>` for any child-list changes and re-append the theme
+   * style element if anything has been added after it. Idempotent: the
+   * observer's own re-append fires the callback again, but the early
+   * `lastElementChild === style` check short-circuits the second pass.
+   */
+  private ensureStyleStaysLast(): void {
+    if (this.headObserver) return;
+    this.headObserver = new MutationObserver(() => {
+      const style = this.styleElement;
+      if (!style || !document.head.contains(style)) return;
+      if (document.head.lastElementChild === style) return;
+      document.head.appendChild(style);
+    });
+    this.headObserver.observe(document.head, { childList: true });
+  }
+
+  private disconnectStyleObserver(): void {
+    if (this.headObserver) {
+      this.headObserver.disconnect();
+      this.headObserver = null;
+    }
+  }
+
   /**
    * Get list of available themes
    */
@@ -637,6 +696,15 @@ export class ThemeManager {
         throw new Error("Theme is missing required fields (id or name)");
       }
 
+      // Validate optional runtime hooks. Reject the install if either is
+      // malformed so a tampered theme cannot smuggle in unsafe values.
+      if (!validateThemeScript(themeData.themeScript)) {
+        throw new Error("Theme has invalid themeScript");
+      }
+      if (!validateThemeDom(themeData.themeDom)) {
+        throw new Error("Theme has invalid themeDom");
+      }
+
       const fromStore = meta?.fromStore ?? false;
       const serverUpdatedAtSec = meta?.serverUpdatedAtSec;
 
@@ -701,6 +769,8 @@ export class ThemeManager {
               ? true
               : undefined,
         adaptiveCssVariables: themeData.adaptiveCssVariables,
+        themeScript: themeData.themeScript,
+        themeDom: themeData.themeDom,
       };
 
       await this.saveTheme(theme);

src/plugins/built-in/themes/theme-runtime.ts

@@ -0,0 +1,792 @@
+/**
+ * Theme runtime: minimal, locked-down hooks for themes that need a clock or
+ * a few decorative DOM elements (e.g. Noir City's day/night cycle and
+ * animated cars).
+ *
+ * Hard constraints:
+ *   - No `eval` and no execution of theme-author JS. Themes reference built-in
+ *     functions by name from a fixed allowlist.
+ *   - No network, storage, cookies, or SEQTA DOM access.
+ *   - Only mutations allowed are: CSS custom properties on <html>, a single
+ *     `data-city-state` attribute on <html>, and appending a fixed set of
+ *     decorative elements into `#bsplus-theme-runtime-root`.
+ */
+
+export type ThemeScriptSpec = {
+  onLoad?: string;
+  interval?: number;
+  onInterval?: string;
+};
+
+export type ThemeDomSpec = {
+  roadStrip?: boolean;
+  cars?: number;
+  /** @deprecated Use cityLayers flicker overlays instead. */
+  flickers?: number;
+  cityLayers?: boolean;
+};
+
+const ROOT_ID = "bsplus-theme-runtime-root";
+const WALLPAPER_ID = "bsplus-theme-wallpaper";
+const MAX_CARS = 10;
+const MAX_FLICKERS = 8;
+const MIN_INTERVAL_MS = 60_000;
+const DEFAULT_INTERVAL_MS = 600_000;
+
+/**
+ * IDs of decorative city layers injected when `themeDom.cityLayers` is on.
+ * Order matters: earlier entries paint behind later ones. Buildings sit
+ * behind the lit batches (so windows draw over the silhouettes); flicker
+ * frames sit over the lit batches so blinking windows hide steady ones.
+ * Sun and moon are last so they paint over everything else in the
+ * wallpaper stack (still behind #main via z-index 0).
+ */
+/**
+ * `city-buildings` always paints the night panorama; `city-day` paints
+ * the day panorama on top with opacity controlled by `--city-day-
+ * opacity`. The two stack so we can CSS-transition opacity between
+ * them at the day boundary, instead of snapping background-image (which
+ * doesn't animate). */
+const CITY_LAYER_IDS = [
+  "city-buildings",
+  "city-day",
+  "city-lights-1",
+  "city-lights-2",
+  "city-lights-3",
+  "city-flicker-a",
+  "city-flicker-b",
+  "city-sun",
+  "city-moon",
+] as const;
+
+// Built-in functions themes may reference by exact string match.
+const BUILTINS: Record<string, () => void> = {
+  "setTimeState()": setTimeState,
+  "setCityTime()": setCityTime,
+};
+
+let intervalHandle: ReturnType<typeof setInterval> | null = null;
+let lastTimeState: TimeState | null = null;
+let lastDomSpec: ThemeDomSpec | null = null;
+let bodyObserver: MutationObserver | null = null;
+let pageshowListenerAttached = false;
+let repaintScheduled = false;
+
+type TimeState = "night" | "dawn" | "day" | "dusk" | "evening";
+
+/**
+ * Sky colour anchors. Exactly one of these is published as
+ * `--city-sky-color` at any given moment, based on the discrete
+ * `timeStateForMinutes()` bucket. CSS handles the cross-fade between
+ * anchors via its own `transition: background-color` rule, so the sky
+ * is a flat colour during the whole duration of each phase and only
+ * animates on the boundary crossing itself.
+ *
+ *   night    near-black with a hint of blue
+ *   dawn     peachy sunrise — brighter than the previous dusty rose so
+ *            the lerp from night -> dawn -> day doesn't pass through
+ *            desaturated grey-purple in the middle.
+ *   day      soft pastel "skyblue" (#87CEEB, the CSS named colour). Was
+ *            previously a desaturated steel-blue that read as grey at
+ *            mid-lightness.
+ *   dusk     warm orange sunset, matching dawn's brightness so the
+ *            afternoon transition stays colourful.
+ *   evening  deep indigo, low chroma, settling toward night.
+ */
+const SKY_COLOR: Record<TimeState, string> = {
+  night: "#0d0d0f",
+  dawn: "#cc6a5a",
+  day: "#87ceeb",
+  dusk: "#d56a3a",
+  evening: "#111118",
+};
+
+/* ============================================================ *
+ * Dev-only time picker
+ *
+ * Flip this to `false` to remove the floating slider entirely
+ * (it's also automatically off in production builds via the
+ * `IS_DEV` check below).
+ * ============================================================ */
+const DEV_TIME_PICKER_ENABLED = true;
+
+const DEV_OVERRIDE_KEY = "bsplus-city-time-override";
+const IS_DEV = import.meta.env.MODE === "development";
+const DEV_PICKER_ID = "bsplus-city-dev-picker";
+
+function readDevOverride(): number | null {
+  if (!IS_DEV || !DEV_TIME_PICKER_ENABLED) return null;
+  try {
+    const raw = localStorage.getItem(DEV_OVERRIDE_KEY);
+    if (raw === null) return null;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n >= 0 && n < 24 * 60) return n;
+  } catch {
+    // localStorage may be unavailable; ignore.
+  }
+  return null;
+}
+
+/**
+ * "Balanced 1h wedges" schedule:
+ *
+ *   00:00 .. 05:30   night    (dark)
+ *   05:30 .. 06:30   dawn     (peachy sunrise, ramping up)
+ *   06:30 .. 18:00   day      (pastel blue, the big stable block)
+ *   18:00 .. 19:00   dusk     (warm sunset)
+ *   19:00 .. 21:00   evening  (deep indigo, fading toward night)
+ *   21:00 .. 24:00   night
+ *
+ * The discrete bucket here drives `data-city-state` (used by the car
+ * sprite swap and the day panorama). The continuous sky-colour lerp in
+ * `TIME_BOUNDARIES` MUST use the same minute markers so the boundary
+ * the user sees in the dev slider matches the visible colour change.
+ */
+function timeStateForMinutes(minutes: number): TimeState {
+  if (minutes < 5 * 60 + 30) return "night";
+  if (minutes < 6 * 60 + 30) return "dawn";
+  if (minutes < 18 * 60) return "day";
+  if (minutes < 19 * 60) return "dusk";
+  if (minutes < 21 * 60) return "evening";
+  return "night";
+}
+
+function getMinutesOfDay(now: Date = new Date()): number {
+  const override = readDevOverride();
+  if (override !== null) return override;
+  return now.getHours() * 60 + now.getMinutes();
+}
+
+function getTimeState(now: Date = new Date()): TimeState {
+  return timeStateForMinutes(getMinutesOfDay(now));
+}
+
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value));
+}
+
+/**
+ * Sky colour publishing is intentionally NOT time-interpolated. We
+ * publish exactly one of the five `SKY_COLOR` anchors based on the
+ * discrete state from `timeStateForMinutes()`, and let CSS handle the
+ * cross-fade via its own `transition: background-color` on #content.
+ *
+ * That way the sky is a flat colour for the entire duration of each
+ * phase, and only animates between two anchors AT THE MOMENT the state
+ * boundary is crossed. The animation duration is decoupled from how
+ * long the phase lasts.
+ *
+ * Removed: the previous `lerpColor` + `TIME_BOUNDARIES` minute table.
+ */
+function skyColorForState(state: TimeState): string {
+  return SKY_COLOR[state];
+}
+
+function darknessForMinutes(minutes: number): number {
+  const noon = 12 * 60;
+  let distance = Math.abs(minutes - noon);
+  if (distance > 12 * 60) distance = 24 * 60 - distance;
+  return clamp01(distance / (12 * 60));
+}
+
+/**
+ * Per-phase lit-window opacities. Like `SKY_COLOR`, this is a flat lookup
+ * by discrete state — NOT a continuous function of minute-of-day. The
+ * existing 10s CSS `transition: opacity` on #city-lights-1/2/3 handles
+ * the cross-fade between phases when the discrete state changes.
+ *
+ *   night    everything lit — peak window activity
+ *   dawn     batch 1 only — a few early risers, lobby lights
+ *   day      all off
+ *   dusk     batch 1 fully on, batch 2 fading in
+ *   evening  batches 1 + 2 fully on, batch 3 partially — peak evening
+ *
+ * Tweak these freely; they're purely cosmetic and don't have to add up
+ * to anything.
+ */
+const LIT_OPACITIES: Record<TimeState, [number, number, number]> = {
+  night:   [1.0, 1.0, 1.0],
+  dawn:    [1.0, 0.0, 0.0],
+  day:     [0.0, 0.0, 0.0],
+  dusk:    [1.0, 0.6, 0.0],
+  evening: [1.0, 1.0, 0.5],
+};
+
+function litOpacitiesForState(state: TimeState): [number, number, number] {
+  return LIT_OPACITIES[state];
+}
+
+function sunForMinutes(minutes: number): { t: number; opacity: number } {
+  const sunrise = 6 * 60;
+  const sunset = 19 * 60;
+  if (minutes < sunrise || minutes >= sunset) return { t: 0, opacity: 0 };
+  return {
+    t: (minutes - sunrise) / (sunset - sunrise),
+    opacity: 1,
+  };
+}
+
+function moonForMinutes(minutes: number): { t: number; opacity: number } {
+  const sun = sunForMinutes(minutes);
+  if (sun.opacity > 0) return { t: 0, opacity: 0 };
+  const dusk = 19 * 60 + 30;
+  const dawn = 5 * 60;
+  if (minutes >= dusk) {
+    return { t: clamp01((minutes - dusk) / (24 * 60 - dusk)), opacity: 1 };
+  }
+  if (minutes < dawn) {
+    return { t: clamp01((dawn - minutes) / dawn), opacity: 1 };
+  }
+  return { t: 0.5, opacity: 1 };
+}
+
+function formatMinutes(minutes: number): string {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Read the clock and update `data-city-state` + sky colour on <html>. Only
+ * writes when the state actually changes, so CSS transitions are driven by
+ * real state changes rather than every tick.
+ */
+export function setTimeState(): void {
+  setCityTime();
+}
+
+/**
+ * Read the clock and publish continuous city variables plus the discrete
+ * `data-city-state` bucket used by CSS that still needs hard cuts (e.g. day
+ * panorama swap, night car sprites).
+ */
+export function setCityTime(): void {
+  const minutes = getMinutesOfDay();
+  const state = timeStateForMinutes(minutes);
+  const html = document.documentElement;
+
+  if (state !== lastTimeState) {
+    lastTimeState = state;
+    html.setAttribute("data-city-state", state);
+    html.style.setProperty("--city-time-state", state);
+  }
+
+  const darkness = darknessForMinutes(minutes);
+  const [lit1, lit2, lit3] = litOpacitiesForState(state);
+  const sun = sunForMinutes(minutes);
+  const moon = moonForMinutes(minutes);
+
+  html.style.setProperty("--city-sky-color", skyColorForState(state));
+  html.style.setProperty("--city-darkness", String(darkness));
+  // 1 only during the `day` phase; 0 in every other phase. CSS cross-
+  // fades the day panorama over the night panorama using this on a 10s
+  // opacity transition, which avoids the visual snap that
+  // `background-image` swaps cause (background-image doesn't animate).
+  html.style.setProperty("--city-day-opacity", state === "day" ? "1" : "0");
+  html.style.setProperty("--city-lit-1-opacity", String(lit1));
+  html.style.setProperty("--city-lit-2-opacity", String(lit2));
+  html.style.setProperty("--city-lit-3-opacity", String(lit3));
+  html.style.setProperty("--city-sun-t", String(sun.t));
+  html.style.setProperty("--city-sun-opacity", String(sun.opacity));
+  html.style.setProperty("--city-moon-t", String(moon.t));
+  html.style.setProperty("--city-moon-opacity", String(moon.opacity));
+}
+
+/**
+ * Validate the script spec strictly. Returns true if the spec is safe to run.
+ * Themes that include unknown calls or non-builtins are rejected wholesale.
+ */
+export function validateThemeScript(script: unknown): script is ThemeScriptSpec {
+  if (script == null) return true; // optional field
+  if (typeof script !== "object") return false;
+  const s = script as Record<string, unknown>;
+  for (const key of Object.keys(s)) {
+    if (key !== "onLoad" && key !== "interval" && key !== "onInterval") {
+      return false;
+    }
+  }
+  if (s.onLoad !== undefined && !isAllowedCall(s.onLoad)) return false;
+  if (s.onInterval !== undefined && !isAllowedCall(s.onInterval)) return false;
+  if (
+    s.interval !== undefined &&
+    (typeof s.interval !== "number" ||
+      !Number.isFinite(s.interval) ||
+      s.interval < MIN_INTERVAL_MS)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function isAllowedCall(value: unknown): boolean {
+  return typeof value === "string" && value in BUILTINS;
+}
+
+/**
+ * Validate the DOM spec. Caps counts and rejects unknown keys.
+ */
+export function validateThemeDom(dom: unknown): dom is ThemeDomSpec {
+  if (dom == null) return true;
+  if (typeof dom !== "object") return false;
+  const d = dom as Record<string, unknown>;
+  for (const key of Object.keys(d)) {
+    if (key !== "roadStrip" && key !== "cars" && key !== "flickers" && key !== "cityLayers") {
+      return false;
+    }
+  }
+  if (d.cityLayers !== undefined && typeof d.cityLayers !== "boolean") return false;
+  if (d.roadStrip !== undefined && typeof d.roadStrip !== "boolean") return false;
+  if (
+    d.cars !== undefined &&
+    (typeof d.cars !== "number" ||
+      !Number.isInteger(d.cars) ||
+      d.cars < 0 ||
+      d.cars > MAX_CARS)
+  ) {
+    return false;
+  }
+  if (
+    d.flickers !== undefined &&
+    (typeof d.flickers !== "number" ||
+      !Number.isInteger(d.flickers) ||
+      d.flickers < 0 ||
+      d.flickers > MAX_FLICKERS)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function callBuiltin(name: string): void {
+  const fn = BUILTINS[name];
+  if (!fn) return;
+  try {
+    fn();
+  } catch (e) {
+    console.error("[ThemeRuntime] Built-in failed:", name, e);
+  }
+}
+
+/**
+ * Run a validated themeScript: invoke `onLoad` once and start an interval
+ * timer for `onInterval` if configured. Idempotent — clears any prior
+ * interval before scheduling a new one so repeated calls (e.g. during
+ * theme re-apply races) don't leak timers.
+ */
+export function runThemeScript(script: ThemeScriptSpec | undefined): void {
+  if (intervalHandle !== null) {
+    clearInterval(intervalHandle);
+    intervalHandle = null;
+  }
+  if (!script || !validateThemeScript(script)) return;
+  if (script.onLoad) callBuiltin(script.onLoad);
+  if (script.onInterval) {
+    const period = Math.max(MIN_INTERVAL_MS, script.interval ?? DEFAULT_INTERVAL_MS);
+    intervalHandle = setInterval(() => callBuiltin(script.onInterval!), period);
+  }
+}
+
+function getOrCreateRoot(): HTMLElement {
+  let root = document.getElementById(ROOT_ID);
+  if (!root) {
+    root = document.createElement("div");
+    root.id = ROOT_ID;
+    root.setAttribute("aria-hidden", "true");
+  }
+  // Always parent under <body>: the runtime root uses `position: fixed`
+  // and needs to escape any stacking context SEQTA puts on `#content` so
+  // the sidebar can layer over it cleanly via z-index.
+  if (root.parentElement !== document.body) {
+    document.body.appendChild(root);
+  }
+  return root;
+}
+
+/**
+ * The wallpaper container is a *separate* sibling of the runtime root,
+ * never a child. We keep it independent so its existence is determined
+ * solely by `themeDom.cityLayers`, and so the road strip's tight 60px
+ * bottom geometry can't accidentally constrain the full-area city
+ * layers. All CSS positioning of cityscape/sun/moon happens via
+ * `position: fixed` on the layer divs themselves; this container only
+ * groups them for cheap teardown.
+ */
+function getOrCreateWallpaper(): HTMLElement {
+  let wallpaper = document.getElementById(WALLPAPER_ID);
+  if (!wallpaper) {
+    wallpaper = document.createElement("div");
+    wallpaper.id = WALLPAPER_ID;
+    wallpaper.setAttribute("aria-hidden", "true");
+  }
+  if (wallpaper.parentElement !== document.body) {
+    document.body.appendChild(wallpaper);
+  }
+  return wallpaper;
+}
+
+/** Content scripts run at `document_start`; defer until `<body>` exists. */
+function whenBodyReady(run: () => void): void {
+  if (document.body) {
+    run();
+    return;
+  }
+  document.addEventListener("DOMContentLoaded", run, { once: true });
+}
+
+function runtimeRootNeedsContent(spec: ThemeDomSpec): boolean {
+  const root = document.getElementById(ROOT_ID);
+  if (!root) return true;
+  if (spec.roadStrip && !document.getElementById("city-road")) return true;
+  const carCount = Math.min(spec.cars ?? 0, MAX_CARS);
+  if (carCount > 0 && root.querySelector(".city-car") === null) return true;
+  return false;
+}
+
+function cityWallpaperNeedsLayers(): boolean {
+  if (!lastDomSpec?.cityLayers) return false;
+  const wallpaper = document.getElementById(WALLPAPER_ID);
+  if (!wallpaper) return true;
+  return wallpaper.querySelector("#city-buildings") === null;
+}
+
+function repaintThemeDomIfNeeded(): void {
+  if (!lastDomSpec || !document.body) return;
+  if (runtimeRootNeedsContent(lastDomSpec)) {
+    const root = getOrCreateRoot();
+    populateRoot(root, lastDomSpec);
+  }
+  if (cityWallpaperNeedsLayers()) {
+    const wallpaper = getOrCreateWallpaper();
+    populateWallpaper(wallpaper);
+  }
+}
+
+function scheduleRepaintThemeDomIfNeeded(): void {
+  if (repaintScheduled) return;
+  repaintScheduled = true;
+  requestAnimationFrame(() => {
+    repaintScheduled = false;
+    repaintThemeDomIfNeeded();
+  });
+}
+
+function themeDomNeedsRepaint(): boolean {
+  if (!lastDomSpec) return false;
+  if (!document.getElementById(ROOT_ID)) return true;
+  if (lastDomSpec.cityLayers && !document.getElementById(WALLPAPER_ID)) {
+    return true;
+  }
+  return runtimeRootNeedsContent(lastDomSpec) || cityWallpaperNeedsLayers();
+}
+
+function populateWallpaper(wallpaper: HTMLElement): void {
+  while (wallpaper.firstChild) wallpaper.removeChild(wallpaper.firstChild);
+  for (const id of CITY_LAYER_IDS) {
+    const layer = document.createElement("div");
+    layer.id = id;
+    // `class` lets the theme target all cityscape overlays with a single
+    // rule for the shared fixed-positioning + background-attachment block.
+    if (
+      id.startsWith("city-buildings") ||
+      id === "city-day" ||
+      id.startsWith("city-lights") ||
+      id.startsWith("city-flicker")
+    ) {
+      layer.className = "city-cityscape-layer";
+    }
+    wallpaper.appendChild(layer);
+  }
+}
+
+const CAR_VARIANTS = ["car-sedan", "car-hatchback", "car-boxy"] as const;
+
+/**
+ * Populate the runtime root with the decorative DOM described by `dom`.
+ * Always wipes the root's existing children first so repeated calls leave
+ * exactly one road / N cars, no duplicates. The runtime root contains
+ * ONLY the road strip and cars — full-area city layers (buildings, lit
+ * batches, flicker, sun, moon) live in a separate `#bsplus-theme-wallpaper`
+ * container so the root's tight 60px bottom strip never grows.
+ */
+function populateRoot(root: HTMLElement, dom: ThemeDomSpec): void {
+  while (root.firstChild) root.removeChild(root.firstChild);
+
+  if (dom.roadStrip) {
+    const road = document.createElement("div");
+    road.id = "city-road";
+    root.appendChild(road);
+  }
+
+  const carCount = Math.min(dom.cars ?? 0, MAX_CARS);
+  for (let i = 1; i <= carCount; i++) {
+    const car = document.createElement("div");
+    const variant = CAR_VARIANTS[(i - 1) % CAR_VARIANTS.length];
+    car.className = `city-car city-car-${i} ${variant}`;
+    root.appendChild(car);
+  }
+
+  // Legacy scattered flicker dots. Themes that opt into `cityLayers` use
+  // the overlay-cross-fade flicker instead, so we skip these when the new
+  // system is active to avoid double flickering.
+  if (!dom.cityLayers) {
+    const flickerCount = Math.min(dom.flickers ?? 0, MAX_FLICKERS);
+    for (let i = 1; i <= flickerCount; i++) {
+      const flicker = document.createElement("div");
+      flicker.className = `city-win-flicker city-win-flicker-${i}`;
+      root.appendChild(flicker);
+    }
+  }
+}
+
+/**
+ * Watch `<body>` for the runtime root or wallpaper being removed (SPA
+ * re-renders, external code, etc.) and re-inject from the cached spec.
+ * Without this, intermittent reloads could leave the page with no road/
+ * cars or no cityscape layers even though the runtime believed they were
+ * mounted.
+ */
+function ensureBodyObserver(): void {
+  if (bodyObserver) return;
+  const attach = () => {
+    if (!document.body || bodyObserver) return;
+    bodyObserver = new MutationObserver(() => {
+      if (themeDomNeedsRepaint()) scheduleRepaintThemeDomIfNeeded();
+    });
+    // Only direct children of <body>: the theme nodes are appended there.
+    // Watching the full subtree fired on every SEQTA menu/content mutation and
+    // could repaint decorative layers mid-navigation (felt like a page reload).
+    bodyObserver.observe(document.body, { childList: true });
+  };
+  whenBodyReady(attach);
+
+  if (!pageshowListenerAttached && typeof window !== "undefined") {
+    pageshowListenerAttached = true;
+    window.addEventListener(
+      "pageshow",
+      (event) => {
+        if (event.persisted) repaintThemeDomIfNeeded();
+      },
+      { capture: true },
+    );
+  }
+}
+
+/**
+ * Inject the decorative DOM scaffolding required by themes that opt in via
+ * `themeDom`. Idempotent: safe to call multiple times in a row without
+ * an intervening `clearThemeRuntime`. Everything is positioned/styled by
+ * theme CSS.
+ */
+export function injectThemeDom(dom: ThemeDomSpec | undefined): void {
+  if (!dom || !validateThemeDom(dom)) return;
+  lastDomSpec = dom;
+  ensureBodyObserver();
+
+  const mount = () => {
+    if (!lastDomSpec) return;
+    const spec = lastDomSpec;
+    if (runtimeRootNeedsContent(spec)) {
+      const root = getOrCreateRoot();
+      populateRoot(root, spec);
+    }
+    if (spec.cityLayers) {
+      if (cityWallpaperNeedsLayers()) {
+        const wallpaper = getOrCreateWallpaper();
+        populateWallpaper(wallpaper);
+      }
+    } else {
+      // Theme switched from a cityLayers theme to one without — tear down
+      // any leftover wallpaper so we don't paint stale buildings/sun.
+      document.getElementById(WALLPAPER_ID)?.remove();
+    }
+
+    // Suppress the slow `transition: background-color` for the very first
+    // frame after the theme CSS lands. Without this, the browser
+    // interpolates from SEQTA's pre-theme `background: unset` (light) to
+    // var(--city-sky-color) over 30s on every page load. Double rAF: the
+    // first runs after the next layout, the second after that frame has
+    // actually been painted with the attribute set, so we can safely
+    // remove it and let real state changes (night -> dawn etc.) animate.
+    const html = document.documentElement;
+    html.setAttribute("data-city-just-applied", "");
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        html.removeAttribute("data-city-just-applied");
+      });
+    });
+
+    mountDevTimePicker();
+  };
+
+  whenBodyReady(mount);
+}
+
+/**
+ * Dev-only floating time picker. Renders a slider (0..1440 minutes) plus a
+ * checkbox to toggle "use real clock". The override is persisted in
+ * `localStorage` so it survives reloads during a debugging session. The
+ * whole block is dead code in production builds (the `IS_DEV` check is
+ * static and Vite tree-shakes it out).
+ */
+function mountDevTimePicker(): void {
+  if (!IS_DEV || !DEV_TIME_PICKER_ENABLED) return;
+  if (document.getElementById(DEV_PICKER_ID)) return;
+
+  const initialOverride = readDevOverride();
+  const startMinutes =
+    initialOverride ?? new Date().getHours() * 60 + new Date().getMinutes();
+  const useReal = initialOverride === null;
+
+  const panel = document.createElement("div");
+  panel.id = DEV_PICKER_ID;
+  panel.setAttribute("aria-label", "City time override (dev mode)");
+  // Inline styles so the panel can't be styled away by the active theme.
+  Object.assign(panel.style, {
+    position: "fixed",
+    bottom: "12px",
+    right: "12px",
+    zIndex: "2147483647",
+    padding: "10px 12px",
+    background: "rgba(20, 20, 24, 0.92)",
+    color: "#e8e8f0",
+    font: "12px/1.4 system-ui, sans-serif",
+    borderRadius: "8px",
+    boxShadow: "0 4px 16px rgba(0, 0, 0, 0.4)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    pointerEvents: "auto",
+    userSelect: "none",
+    minWidth: "220px",
+  } satisfies Partial<CSSStyleDeclaration>);
+
+  const header = document.createElement("div");
+  header.textContent = "City time (dev)";
+  Object.assign(header.style, {
+    fontWeight: "600",
+    marginBottom: "6px",
+    opacity: "0.85",
+  } satisfies Partial<CSSStyleDeclaration>);
+  panel.appendChild(header);
+
+  const realRow = document.createElement("label");
+  Object.assign(realRow.style, {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginBottom: "8px",
+    cursor: "pointer",
+  } satisfies Partial<CSSStyleDeclaration>);
+  const realCheck = document.createElement("input");
+  realCheck.type = "checkbox";
+  realCheck.checked = useReal;
+  realRow.appendChild(realCheck);
+  const realLabel = document.createElement("span");
+  realLabel.textContent = "Use real clock";
+  realRow.appendChild(realLabel);
+  panel.appendChild(realRow);
+
+  const slider = document.createElement("input");
+  slider.type = "range";
+  slider.min = "0";
+  slider.max = String(24 * 60 - 1);
+  slider.step = "5";
+  slider.value = String(startMinutes);
+  slider.disabled = useReal;
+  Object.assign(slider.style, {
+    width: "100%",
+    accentColor: "#c8b97a",
+  } satisfies Partial<CSSStyleDeclaration>);
+  panel.appendChild(slider);
+
+  const readout = document.createElement("div");
+  Object.assign(readout.style, {
+    marginTop: "4px",
+    opacity: "0.8",
+    fontVariantNumeric: "tabular-nums",
+  } satisfies Partial<CSSStyleDeclaration>);
+  panel.appendChild(readout);
+
+  function paintReadout(): void {
+    const m = Number(slider.value);
+    readout.textContent = useReal
+      ? "Real clock"
+      : `${formatMinutes(m)} · ${timeStateForMinutes(m)}`;
+  }
+
+  function applyOverride(): void {
+    try {
+      if (realCheck.checked) {
+        localStorage.removeItem(DEV_OVERRIDE_KEY);
+      } else {
+        localStorage.setItem(DEV_OVERRIDE_KEY, slider.value);
+      }
+    } catch (e) {
+      console.warn("[ThemeRuntime] Could not persist time override:", e);
+    }
+    // Force a full re-publish next tick by clearing the cached bucket;
+    // setCityTime() short-circuits the discrete state when unchanged but
+    // always re-writes the continuous vars.
+    lastTimeState = null;
+    setCityTime();
+    paintReadout();
+  }
+
+  realCheck.addEventListener("change", () => {
+    slider.disabled = realCheck.checked;
+    applyOverride();
+  });
+  slider.addEventListener("input", () => {
+    if (realCheck.checked) {
+      realCheck.checked = false;
+      slider.disabled = false;
+    }
+    applyOverride();
+  });
+
+  paintReadout();
+  document.body.appendChild(panel);
+}
+
+function unmountDevTimePicker(): void {
+  document.getElementById(DEV_PICKER_ID)?.remove();
+}
+
+/**
+ * Remove everything the runtime added: injected DOM, interval timer, custom
+ * properties, and the `data-city-state` attribute.
+ */
+export function clearThemeRuntime(): void {
+  if (intervalHandle !== null) {
+    clearInterval(intervalHandle);
+    intervalHandle = null;
+  }
+  // Disconnect the body observer BEFORE removing the root so the observer
+  // doesn't see its own teardown removal as "root went missing" and try to
+  // re-inject what we're trying to clear.
+  if (bodyObserver) {
+    bodyObserver.disconnect();
+    bodyObserver = null;
+  }
+  lastDomSpec = null;
+  lastTimeState = null;
+
+  const root = document.getElementById(ROOT_ID);
+  if (root) root.remove();
+  document.getElementById(WALLPAPER_ID)?.remove();
+
+  unmountDevTimePicker();
+
+  const html = document.documentElement;
+  html.removeAttribute("data-city-state");
+  html.removeAttribute("data-city-just-applied");
+  html.style.removeProperty("--city-time-state");
+  html.style.removeProperty("--city-sky-color");
+  html.style.removeProperty("--city-darkness");
+  html.style.removeProperty("--city-day-opacity");
+  html.style.removeProperty("--city-lit-1-opacity");
+  html.style.removeProperty("--city-lit-2-opacity");
+  html.style.removeProperty("--city-lit-3-opacity");
+  html.style.removeProperty("--city-sun-t");
+  html.style.removeProperty("--city-sun-opacity");
+  html.style.removeProperty("--city-moon-t");
+  html.style.removeProperty("--city-moon-opacity");
+}

src/plugins/index.ts

@@ -15,6 +15,7 @@ import messageFoldersPlugin from "./built-in/messageFolders";
 
 // Heavy plugins (lazy-loaded only when enabled)
 import globalSearchPluginLazy from "./built-in/globalSearch/lazy";
+import gradeAnalyticsPluginLazy from "./built-in/gradeAnalytics/lazy";
 
 // Initialize plugin manager
 const pluginManager = PluginManager.getInstance();
@@ -34,6 +35,7 @@ pluginManager.registerPlugin(messageFoldersPlugin);
 
 // Register heavy plugins with lazy loading
 pluginManager.registerPlugin(globalSearchPluginLazy);
+pluginManager.registerPlugin(gradeAnalyticsPluginLazy);
 
 export { init as Monofile } from "./monofile";
 

src/plugins/monofile.ts

@@ -3,10 +3,6 @@ import browser from "webextension-polyfill";
 import { animate, stagger } from "motion";
 
 // Internal utilities and functions
-import {
-  ChangeMenuItemPositions,
-  MenuOptionsOpen,
-} from "@/seqta/utils/Openers/OpenMenuOptions";
 import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import { delay } from "@/seqta/utils/delay";
@@ -21,6 +17,7 @@ import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import RegisterClickListeners from "@/seqta/utils/listeners/ClickListeners";
 import { AddBetterSEQTAElements } from "@/seqta/ui/AddBetterSEQTAElements";
 import { updateAllColors } from "@/seqta/ui/colors/Manager";
+import { applySelectedFont } from "@/seqta/ui/fonts/Manager";
 import loading from "@/seqta/ui/Loading";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { getEngageRoutePage } from "@/seqta/utils/engageRoute";
@@ -29,12 +26,13 @@ import {
   updateEngageHomeMenuActive,
 } from "@/seqta/utils/Loaders/LoadEngageHomePage";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
+import { loadAnalyticsPage } from "@/plugins/built-in/gradeAnalytics/loadAnalyticsPage";
 import { runStartupPopupQueue } from "@/seqta/utils/Openers/StartupPopupQueue";
 
 import { updateTimetableTimes } from "@/seqta/utils/updateTimetableTimes";
 
 // JSON content
-import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
+import { observeMenuItemPosition } from "@/seqta/utils/sidebarMenuIcons";
 
 // Icons and fonts
 import IconFamily from "@/resources/fonts/IconFamily.woff";
@@ -206,9 +204,7 @@ function SortMessagePageItems(messagesParentElement: any) {
 
 async function LoadPageElements(): Promise<void> {
   await AddBetterSEQTAElements();
-  const sublink: string | undefined = isSeqtaEngageExperience()
+  const sublink: string | undefined = getEngageRoutePage();
-    ? getEngageRoutePage()
-    : window.location.href.split("/")[4];
 
   if (isSeqtaEngageExperience() && !engageHashListenerAttached) {
     engageHashListenerAttached = true;
@@ -339,6 +335,11 @@ async function handleSublink(sublink: string | undefined): Promise<void> {
     case "news":
       await handleNewsPage();
       break;
+    case "analytics":
+      console.info("[BetterSEQTA+] Started Init (Analytics)");
+      if (settingsState.onoff) void loadAnalyticsPage();
+      finishLoad();
+      break;
     case undefined:
       window.location.replace(
         `${location.origin}/#?page=/${settingsState.defaultPage}`,
@@ -612,75 +613,6 @@ export function tryLoad() {
   );
 }
 
-function ReplaceMenuSVG(element: HTMLElement, svg: string) {
-  let item = element.firstChild as HTMLElement;
-  item!.firstChild!.remove();
-
-  item.innerHTML = `<span>${item.innerHTML}</span>`;
-
-  let newsvg = stringToHTML(svg).firstChild;
-  item.insertBefore(newsvg as Node, item.firstChild);
-}
-
-const processedSymbol = Symbol("processed");
-
-export async function ObserveMenuItemPosition() {
-  if (isSeqtaEngageExperience()) return;
-  await waitForElm("#menu > ul > li");
-
-  eventManager.register(
-    "menuList",
-    {
-      parentElement: document.querySelector("#menu")!.firstChild as Element,
-    },
-    (element: Element) => {
-      const node = element as HTMLElement;
-
-      // Only process top-level menu items and skip everything else
-      if (
-        !node.classList.contains("item") ||
-        node.nodeName !== "LI" ||
-        node.parentElement?.parentElement?.id !== "menu"
-      ) {
-        return;
-      }
-
-      // Early exit if already processed
-      if ((element as any)[processedSymbol]) {
-        return;
-      }
-
-      if (!MenuOptionsOpen) {
-        const key =
-          MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey];
-        if (key) {
-          ReplaceMenuSVG(
-            node,
-            MenuitemSVGKey[node.dataset.key as keyof typeof MenuitemSVGKey],
-          );
-        } else if (node?.firstChild?.nodeName === "LABEL") {
-          const label = node.firstChild as HTMLElement;
-          let textNode = label.lastChild as HTMLElement;
-
-          if (
-            textNode.nodeType === 3 &&
-            textNode.parentNode &&
-            textNode.parentNode.nodeName !== "SPAN"
-          ) {
-            const span = document.createElement("span");
-            span.textContent = textNode.nodeValue;
-
-            label.replaceChild(span, textNode);
-          }
-        }
-        ChangeMenuItemPositions(settingsState.menuorder);
-
-        (element as any)[processedSymbol] = true;
-      }
-    },
-  );
-}
-
 export function showConflictPopup() {
   if (document.getElementById("conflict-popup")) return;
   document.body.classList.remove("hidden");
@@ -760,12 +692,13 @@ export function init() {
     }
 
     document.querySelector(".legacy-root")?.classList.add("hidden");
-    ObserveMenuItemPosition();
+    void observeMenuItemPosition();
 
     new StorageChangeHandler();
     new MessageHandler();
 
     void updateAllColors();
+    applySelectedFont();
 
     window.addEventListener("hashchange", () => {
       if (settingsState.adaptiveThemeColour) void updateAllColors();

src/seqta/content/MenuItemSVGKey.json

@@ -8,5 +8,6 @@
   "portals": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n  <path fill=\"currentColor\" d=\"M15,4A8,8 0 0,1 23,12A8,8 0 0,1 15,20A8,8 0 0,1 7,12A8,8 0 0,1 15,4M15,18A6,6 0 0,0 21,12A6,6 0 0,0 15,6A6,6 0 0,0 9,12A6,6 0 0,0 15,18M3,12C3,14.61 4.67,16.83 7,17.65V19.74C3.55,18.85 1,15.73 1,12C1,8.27 3.55,5.15 7,4.26V6.35C4.67,7.17 3,9.39 3,12Z\" />\n</svg>",
   "reports": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n  <path fill=\"currentColor\" d=\"M18 2H12V9L9.5 7.5L7 9V2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V4A2 2 0 0 0 18 2M14 12A2 2 0 1 1 12 14A2 2 0 0 1 14 12M18 20H10V19C10 17.67 12.67 17 14 17S18 17.67 18 19Z\" />\n</svg>",
   "settings": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n  <path fill=\"currentColor\" d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\" />\n</svg>",
-  "timetable": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n  <path fill=\"currentColor\" d=\"M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z\" />\n</svg>"
+  "timetable": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n  <path fill=\"currentColor\" d=\"M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z\" />\n</svg>",
+  "analytics": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n  <path fill=\"currentColor\" d=\"M4,2H2V28a2,2,0,0,0,2,2H30V28H4Z\" />\n  <path fill=\"currentColor\" d=\"M30,9H23v2h3.59L19,18.59l-4.29-4.3a1,1,0,0,0-1.42,0L6,21.59,7.41,23,14,16.41l4.29,4.3a1,1,0,0,0,1.42,0L28,12.41V16h2Z\" />\n</svg>"
 }

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -1,3 +1,4 @@
+import { waitForEngageMenuList } from "@/seqta/utils/waitForEngageMenuList";
 import { addExtensionSettings } from "@/seqta/utils/Adders/AddExtensionSettings";
 import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import { loadEngageHomePage } from "@/seqta/utils/Loaders/LoadEngageHomePage";
@@ -21,6 +22,9 @@ let sidebarAccessibilityObserver: MutationObserver | null = null;
 let sidebarTabOrderAnimationFrame: number | null = null;
 let sidebarAccessibilityListenersAttached = false;
 
+/** Marks menu rows that are off-screen in the drill stack (CSS blocks clicks). */
+const BSPLUS_SIDEBAR_OFFSCREEN = "bsplus-sidebar-offscreen";
+
 export async function getUserInfo() {
   if (cachedUserInfo) return cachedUserInfo;
 
@@ -287,44 +291,6 @@ async function createSettingsButton(parent?: Element) {
   );
 }
 
-/** Engage mounts the sidebar inside batched React trees; EventManager-based waitForElm can miss `#menu`. Polling `waitForElm` matches the real DOM reliably. */
-async function waitForEngageMenuList(): Promise<HTMLElement | null> {
-  const poll = true as const;
-  const interval = 100;
-  const trySelectors: { selector: string; maxIterations: number }[] = [
-    { selector: "#menu > ul > li", maxIterations: 500 },
-    { selector: "#menu ul", maxIterations: 350 },
-    { selector: "#menu", maxIterations: 350 },
-  ];
-
-  for (const { selector, maxIterations } of trySelectors) {
-    try {
-      await waitForElm(selector, poll, interval, maxIterations);
-    } catch {
-      continue;
-    }
-
-    if (selector === "#menu > ul > li") {
-      const ul = document.querySelector("#menu > ul") as HTMLElement | null;
-      if (ul) return ul;
-    } else if (selector === "#menu ul") {
-      const ul = document.querySelector("#menu ul") as HTMLElement | null;
-      if (ul) return ul;
-    } else {
-      const menu = document.getElementById("menu");
-      const ul =
-        (menu?.querySelector("ul") as HTMLElement | null) ??
-        (menu?.firstElementChild as HTMLElement | null);
-      if (ul) return ul;
-    }
-  }
-
-  console.warn(
-    "[BetterSEQTA+] Engage: could not find a menu list to inject the home button",
-  );
-  return null;
-}
-
 async function injectEngageHomeButton() {
   if (document.getElementById("homebutton")) return;
 
@@ -530,9 +496,15 @@ function scheduleSidebarAccessibilityUpdate() {
     cancelAnimationFrame(sidebarTabOrderAnimationFrame);
   }
 
+  // Double rAF: SEQTA applies `.active` / updates `.sub` on the next frame
+  // after a click. Running earlier hid the submenu with `aria-hidden` while
+  // focus was still on a <label> inside it, which broke routing and sent
+  // the SPA back to home.
   sidebarTabOrderAnimationFrame = requestAnimationFrame(() => {
-    sidebarTabOrderAnimationFrame = null;
+    requestAnimationFrame(() => {
-    updateSidebarAccessibility();
+      sidebarTabOrderAnimationFrame = null;
+      updateSidebarAccessibility();
+    });
   });
 }
 
@@ -543,9 +515,10 @@ function handleSidebarKeyboardActivation(event: KeyboardEvent) {
   const menuItem = target.closest("#menu li, #menu section") as
     | HTMLElement
     | null;
-  if (!menuItem || target !== menuItem) return;
+  if (!menuItem) return;
 
   if (event.key === "Tab") {
+    if (target !== menuItem) return;
     const menu = document.getElementById("menu");
     if (!menu) return;
 
@@ -589,11 +562,52 @@ function handleSidebarKeyboardActivation(event: KeyboardEvent) {
   }
 }
 
+/**
+ * Keyboard tab order for the drilled-in sidebar only.
+ * SEQTA already sets `aria-hidden` on off-screen menu rows; we must not
+ * override that or hide `.sub` ourselves — doing so while a <label> inside
+ * the submenu still has focus breaks SEQTA's router and navigates to home.
+ */
+/** Every folder row on the path to the open list (e.g. Assessments → 2026_S1). */
+function getDrillFolderChain(
+  menu: HTMLElement,
+  visibleList: HTMLElement | null,
+): Set<HTMLElement> {
+  const chain = new Set<HTMLElement>();
+  let list: HTMLElement | null = visibleList;
+
+  while (list && menu.contains(list)) {
+    const folder = getSidebarListParentEntry(list);
+    if (!folder || !menu.contains(folder)) break;
+    chain.add(folder);
+
+    const containerUl = folder.parentElement;
+    if (!(containerUl instanceof HTMLElement)) break;
+    const parentSub = containerUl.closest(".sub");
+    if (!parentSub || !menu.contains(parentSub)) break;
+    const parentFolder = parentSub.parentElement;
+    if (!(parentFolder instanceof HTMLElement) || !menu.contains(parentFolder)) {
+      break;
+    }
+    chain.add(parentFolder);
+    list =
+      parentFolder.parentElement instanceof HTMLElement
+        ? parentFolder.parentElement
+        : null;
+  }
+
+  return chain;
+}
+
 function updateSidebarAccessibility() {
   const menu = document.getElementById("menu");
   if (!menu) return;
 
-  const visibleEntries = new Set(getVisibleSidebarEntries(menu));
+  const visibleList = getVisibleSidebarList(menu);
+  const visibleEntries = new Set(
+    visibleList ? getDirectSidebarEntries(visibleList) : [],
+  );
+  const drillFolders = getDrillFolderChain(menu, visibleList);
   const menuEntries = menu.querySelectorAll("li.item, section.item, li, section");
 
   for (const entry of menuEntries) {
@@ -602,28 +616,19 @@ function updateSidebarAccessibility() {
     const label = entry.querySelector(":scope > label") as HTMLLabelElement | null;
     if (!label) continue;
 
-    const childSubmenu = entry.querySelector(":scope > .sub") as HTMLElement | null;
+    const interactive =
-    const isHidden =
+      visibleEntries.has(entry) || drillFolders.has(entry);
-      entry.offsetParent === null ||
-      window.getComputedStyle(entry).display === "none" ||
-      window.getComputedStyle(label).display === "none" ||
-      !visibleEntries.has(entry);
 
-    if (isHidden) {
+    if (!interactive) {
+      entry.classList.add(BSPLUS_SIDEBAR_OFFSCREEN);
       entry.tabIndex = -1;
       label.tabIndex = -1;
-      entry.setAttribute("aria-hidden", "true");
-      label.setAttribute("aria-hidden", "true");
-      if (childSubmenu) {
-        childSubmenu.setAttribute("aria-hidden", "true");
-      }
       continue;
     }
 
+    entry.classList.remove(BSPLUS_SIDEBAR_OFFSCREEN);
     entry.tabIndex = 0;
     label.tabIndex = -1;
-    entry.removeAttribute("aria-hidden");
-    label.removeAttribute("aria-hidden");
 
     if (!entry.hasAttribute("role")) {
       entry.setAttribute("role", "button");
@@ -633,14 +638,6 @@ function updateSidebarAccessibility() {
     if (accessibleLabel) {
       entry.setAttribute("aria-label", accessibleLabel);
     }
-
-    if (childSubmenu) {
-      const isExpanded = entry.classList.contains("active");
-      entry.setAttribute("aria-expanded", String(isExpanded));
-      childSubmenu.setAttribute("aria-hidden", String(!isExpanded));
-    } else {
-      entry.removeAttribute("aria-expanded");
-    }
   }
 }
 

src/seqta/ui/dev/hideSensitiveContent.ts

@@ -705,6 +705,52 @@ export function getMockNotices() {
   };
 }
 
+export function getMockGradeAnalyticsData() {
+  const { assessments } = getMockAssessmentsData();
+  return assessments
+    .filter((a: { percentage?: number; results?: { percentage?: number } }) => {
+      const pct = a.percentage ?? a.results?.percentage;
+      return pct != null;
+    })
+    .map(
+      (
+        a: {
+          id: number;
+          title: string;
+          code: string;
+          due: string;
+          percentage?: number;
+          results?: { percentage?: number };
+          programmeID: number;
+          metaclassID: number;
+        },
+      ) => {
+        const finalGrade = a.percentage ?? a.results?.percentage ?? 0;
+        return {
+          id: a.id,
+          title: a.title,
+          subject: a.code,
+          status: "MARKS_RELEASED" as const,
+          due: a.due,
+          code: a.code,
+          metaclassID: a.metaclassID,
+          programmeID: a.programmeID,
+          graded: true,
+          overdue: false,
+          hasFeedback: false,
+          expectationsEnabled: false,
+          expectationsCompleted: false,
+          reflectionsEnabled: false,
+          reflectionsCompleted: false,
+          availability: "",
+          finalGrade,
+          letterGrade:
+            finalGrade >= 85 ? "A" : finalGrade >= 70 ? "B" : "C",
+        };
+      },
+    );
+}
+
 export function getMockAssessmentsData() {
   const subjects = mockData.subjects.slice(0, 5).map((title, i) => ({
     code: `SUBJ${i + 1}`,

src/seqta/ui/fonts/Manager.ts

@@ -0,0 +1,136 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { FONT_PRESETS, getFontPreset, type FontPreset } from "./presets";
+
+const FONT_STYLE_ID = "betterseqta-font-override";
+const FONT_PICKER_BATCH_ID = "betterseqta-font-picker-preview";
+const loadedFontIds = new Set<string>();
+let pickerFontsPromise: Promise<void> | null = null;
+
+/** Elements that show per-font previews must stay outside the global override. */
+export const FONT_PICKER_ROOT_CLASS = "bsplus-font-picker-root";
+
+function googleFamilyParam(preset: FontPreset): string | null {
+  if (!preset.googleUrl) return null;
+  const name =
+    preset.stack.split(",")[0]?.trim().replace(/^"|"$/g, "") ?? "";
+  if (!name) return null;
+  return `family=${encodeURIComponent(name)}:wght@400;500;600;700`;
+}
+
+function injectStylesheet(id: string, href: string): Promise<void> {
+  if (document.getElementById(id)) return Promise.resolve();
+
+  return new Promise((resolve) => {
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = href;
+    link.setAttribute("data-betterseqta-font-picker-batch", "true");
+    link.onload = () => resolve();
+    link.onerror = () => resolve();
+    document.head.appendChild(link);
+  });
+}
+
+/** Load all Google Fonts for picker previews (batched, awaited). */
+export function ensureFontPickerFontsLoaded(): Promise<void> {
+  if (!pickerFontsPromise) {
+    pickerFontsPromise = (async () => {
+      const params = FONT_PRESETS.map(googleFamilyParam).filter(
+        (param): param is string => param !== null,
+      );
+
+      const chunkSize = 10;
+      for (let i = 0; i < params.length; i += chunkSize) {
+        const chunk = params.slice(i, i + chunkSize);
+        const url = `https://fonts.googleapis.com/css2?${chunk.join("&")}&display=swap`;
+        await injectStylesheet(`${FONT_PICKER_BATCH_ID}-${i / chunkSize}`, url);
+      }
+
+      try {
+        await document.fonts.ready;
+      } catch {
+        /* FontFaceSet unsupported or blocked */
+      }
+    })();
+  }
+
+  return pickerFontsPromise;
+}
+
+export function ensureFontLoaded(preset: FontPreset): void {
+  if (!preset.googleUrl || loadedFontIds.has(preset.id)) return;
+
+  if (document.querySelector(`link[data-betterseqta-font="${preset.id}"]`)) {
+    loadedFontIds.add(preset.id);
+    return;
+  }
+
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = preset.googleUrl;
+  link.setAttribute("data-betterseqta-font", preset.id);
+  document.head.appendChild(link);
+  loadedFontIds.add(preset.id);
+}
+
+export function buildFontPreviewCss(): string {
+  return FONT_PRESETS.map(
+    (preset) => `
+.bsplus-font-picker-option[data-font-id="${preset.id}"] .bsplus-font-picker-option-name {
+  font-family: ${preset.stack} !important;
+}`,
+  ).join("\n");
+}
+
+const SEQTA_FONT_SCOPE = `
+  .legacy-root,
+  .legacy-root input,
+  .legacy-root textarea,
+  .legacy-root button,
+  .legacy-root select,
+  .legacy-root option,
+  .legacy-root .input,
+  .legacy-root *,
+  #container,
+  #container *
+`;
+
+function buildFontOverrideCss(family: string): string {
+  const rule = `font-family: ${family} !important;`;
+
+  return `
+    ${SEQTA_FONT_SCOPE} {
+      ${rule}
+    }
+
+    .iconFamily,
+    .iconFamily *,
+    button.uiButton.timetable-zoom.iconFamily,
+    [class~="iconFamily"],
+    [class~="iconFamily"] * {
+      font-family: "IconFamily" !important;
+    }
+  `;
+}
+
+export function applySelectedFont(fontId?: string | null): void {
+  if (typeof document === "undefined") return;
+
+  const preset = getFontPreset(fontId ?? settingsState.selectedFont);
+  ensureFontLoaded(preset);
+
+  document.documentElement.style.setProperty(
+    "--betterseqta-font-family",
+    preset.stack.split(",")[0]?.trim().replace(/^"|"$/g, "") ?? "Rubik",
+  );
+
+  let style = document.getElementById(FONT_STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement("style");
+    style.id = FONT_STYLE_ID;
+    document.head.appendChild(style);
+  }
+
+  style.textContent = buildFontOverrideCss(preset.stack);
+}