feat: 3.4.13

2026-06-06 19:54:39 +00:00 · 2026-01-23 07:56:39 +11:00
212 changed files with 2589 additions and 32220 deletions
@@ -5,30 +5,31 @@
    "es2021": true,
    "node": true
  },
-  "extends": ["eslint:recommended"],
+  "extends": "eslint:recommended",
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "import"],
  "ignorePatterns": ["**/*.d.ts"],
  "globals": {
    "__ENABLE_GH_RELEASE_UPDATE_CHECK__": "readonly",
    "__GH_RELEASE_REPO__": "readonly",
    "__UPDATE_CHANNEL__": "readonly",
    "__BUILD_LABEL__": "readonly"
  },
  "rules": {
-    "no-unused-vars": "off",
+    // allow importing ts extensions
-    "no-undef": "off",
+    "sort-imports": [
-    "no-useless-escape": "off",
+      "error",
-    "no-prototype-builtins": "off",
+      {
-    "no-empty": "off",
+        "ignoreCase": true,
-    "no-case-declarations": "off",
+        "ignoreDeclarationSort": true,
-    "no-irregular-whitespace": "off",
+        "ignoreMemberSort": false,
-    "sort-imports": "off",
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-    "import/extensions": "off",
+      }
-    "no-async-promise-executor": "off"
+    ],
-  }
+    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "plugins": ["import"]
 }
@@ -1,67 +0,0 @@
 name: Build Extension
 description: Install dependencies, build Chrome and Firefox extensions, and package zips.
 inputs:
  gh_release_update_check:
    description: Enable GitHub release update checker in the built extension.
    required: false
    default: "false"
  update_channel:
    description: Update channel baked into the build (stable or nightly).
    required: false
    default: stable
  build_label:
    description: Optional build label for nightly display (e.g. run number).
    required: false
    default: ""
  release_repo:
    description: GitHub repo slug for the update checker (owner/name).
    required: false
    default: BetterSEQTA/BetterSEQTA-Plus
 outputs:
  version:
    description: Version from package.json
    value: ${{ steps.version.outputs.version }}
  chrome_zip:
    description: Path to the Chrome extension zip
    value: ${{ steps.zip.outputs.chrome_zip }}
  firefox_zip:
    description: Path to the Firefox extension zip
    value: ${{ steps.zip.outputs.firefox_zip }}
 runs:
  using: composite
  steps:
    - name: Use Node.js 20.x
      uses: actions/setup-node@v4
      with:
        node-version: 20.x
    - name: Install dependencies
      shell: bash
      run: npm install --legacy-peer-deps
    - name: Read version
      id: version
      shell: bash
      run: echo "version=$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
    - name: Build extension
      shell: bash
      env:
        GH_RELEASE_UPDATE_CHECK: ${{ inputs.gh_release_update_check }}
        UPDATE_CHANNEL: ${{ inputs.update_channel }}
        GH_RELEASE_REPO: ${{ inputs.release_repo }}
        BUILD_LABEL: ${{ inputs.build_label }}
      run: npm run build
    - name: Package zips
      id: zip
      shell: bash
      run: |
        VERSION="${{ steps.version.outputs.version }}"
        (cd dist/chrome && zip -r "../betterseqtaplus-${VERSION}-chrome.zip" .)
        (cd dist/firefox && zip -r "../betterseqtaplus-${VERSION}-firefox.zip" .)
        echo "chrome_zip=dist/betterseqtaplus-${VERSION}-chrome.zip" >> "$GITHUB_OUTPUT"
        echo "firefox_zip=dist/betterseqtaplus-${VERSION}-firefox.zip" >> "$GITHUB_OUTPUT"
@@ -1 +0,0 @@
 Experimental nightly build from `main`. May break. **Do not upload to Chrome Web Store or Firefox Add-ons.** Download, replace your sideloaded copy, and reload the extension.
@@ -3,6 +3,8 @@ name: NodeJS Build
 on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]
 jobs:
  build:
@@ -1,46 +0,0 @@
 # Nightly release workflow — updates the same "nightly" release with fresh builds from main.
 # Runs only on BetterSEQTA/BetterSEQTA-Plus. Uses the default GITHUB_TOKEN.
 name: Nightly Release
 on:
  schedule:
    - cron: "0 3 * * *"
  workflow_dispatch:
 permissions:
  contents: write
 env:
  NIGHTLY_TAG: nightly
 jobs:
  nightly:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build extension
        id: build
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "true"
          update_channel: nightly
          build_label: ${{ github.run_number }}
          release_repo: ${{ github.repository }}
      - name: Ensure nightly release exists
        run: |
          if ! gh release view "${{ env.NIGHTLY_TAG }}" 2>/dev/null; then
            gh release create "${{ env.NIGHTLY_TAG }}" \
              --prerelease \
              --title "Nightly" \
              --notes-file .github/nightly-release-notes.md
          fi
      - name: Upload nightly assets
        run: |
          gh release upload "${{ env.NIGHTLY_TAG }}" \
            --clobber \
            "${{ steps.build.outputs.chrome_zip }}" \
            "${{ steps.build.outputs.firefox_zip }}"
@@ -1,29 +0,0 @@
 name: PR CI
 on:
  pull_request:
    branches: ["main"]
 jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
      - name: Install dependencies
        run: npm install --legacy-peer-deps
      - name: Lint
        run: npm run lint
        env:
          ESLINT_USE_FLAT_CONFIG: "false"
      - name: Build extension
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "false"
@@ -1,56 +0,0 @@
 # Manual release workflow only — runs on BetterSEQTA/BetterSEQTA-Plus via workflow_dispatch.
 # Bump package.json version on main, confirm when dispatching, then run.
 # Uses the default GITHUB_TOKEN (contents: write).
 name: Release
 on:
  workflow_dispatch:
    inputs:
      version_updated:
        description: I have already updated the version in package.json
        type: boolean
        required: true
        default: false
 permissions:
  contents: write
 jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Confirm version was updated
        if: inputs.version_updated != true
        run: |
          echo "Check the confirmation box: you must update package.json version before releasing."
          exit 1
      - uses: actions/checkout@v4
      - name: Read version
        id: version
        run: echo "version=$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
      - name: Build extension
        id: build
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "true"
          update_channel: stable
          release_repo: ${{ github.repository }}
      - name: Create release if missing
        run: |
          if ! gh release view "${{ steps.version.outputs.version }}" 2>/dev/null; then
            gh release create "${{ steps.version.outputs.version }}" \
              --title "${{ steps.version.outputs.version }}" \
              --notes "Edit this release description on GitHub."
          fi
      - name: Upload release assets
        run: |
          gh release upload "${{ steps.version.outputs.version }}" \
            --clobber \
            "${{ steps.build.outputs.chrome_zip }}" \
            "${{ steps.build.outputs.firefox_zip }}"
@@ -4,11 +4,12 @@ package-lock.json
 bun.lockb
 pnpm-lock.yaml
 yarn.lock
 bun.lock
-# PDF.js extension assets (copied by postinstall from pdfjs-dist)
+.parcel-cache
-src/public/resources/pdfjs/pdf.worker.min.mjs
+.env
-src/public/resources/pdfjs/pdf.legacy.min.mjs
+.env.submit
 dependency-graph.svg
 # Build
 extension.zip
@@ -18,9 +19,5 @@ betterseqtaplus-safari/
 .million/
 .vscode/
 **/.DS_Store
 .parcel-cache
 .env
 .env.submit
 dependency-graph.svg
 **/.DS_Store
@@ -1,2 +0,0 @@
 legacy-peer-deps=true
@@ -6,9 +6,9 @@ Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're
 **Never contributed to an open source project before?** No worries! We've made it super easy to get started:
- **📖 Read our [contributing guide](https://docs.betterseqta.org/contributing/)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
+- **📖 Read our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
- **🏗️ Understand the codebase** with the [architecture guide](https://docs.betterseqta.org/architecture/)
+- **🏗️ Understand the codebase** with our [Architecture Guide](./docs/ARCHITECTURE.md)
- **🔧 Having issues?** Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
+- **🔧 Having issues?** Check our [Troubleshooting Guide](./docs/TROUBLESHOOTING.md)
 We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
@@ -33,8 +33,8 @@ Join our community channels to discuss the project, get help, and connect with o
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
+- [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
+- [Plugin API Reference](./docs/advanced/plugin-api.md)
 ## Pull Request Process
@@ -16,15 +16,17 @@
  <img src="https://img.shields.io/chrome-web-store/rating/afdgaoaclhkhemfkkkonemoapeinchel" />
 </div>
-## 📚 Documentation
+## Table of contents
 All documentation has been moved to the [official docs site](https://docs.betterseqta.org):
-Includes:
+- [Features](#features)
- Getting started
+- [Creating Custom Themes](#creating-custom-themes)
- Development setup
+- [Getting Started](#getting-started)
- Architecture
+  - [Running Development](#running-development)
- Plugin system
+  - [Building for production](#building-for-production)
- Theme creation
+  - [Folder Structure](#folder-structure)
 - [Contributors](#contributors)
 - [Credits](#credits)
 - [Star History](#star-history)
 ## Features
@@ -48,32 +50,64 @@ Includes:
 ## Creating Custom Themes
-If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://docs.betterseqta.org/theme-creation/). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
+If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://betterseqta.gitbook.io/betterseqta-docs). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
 Don't worry- if you get stuck feel free to ask around in the [discord](https://discord.gg/YzmbnCDkat). We're open and happy to help out! Happy creating :)
-## 🚀 Contributing
+## 🚀 Want to Contribute?
 **New contributors welcome!**
 - 📖 Start here: https://docs.betterseqta.org/install/
 - 🧠 Architecture: https://docs.betterseqta.org/architecture/
 - 🧩 Plugins: https://docs.betterseqta.org/plugins/
 - 💬 Discord: https://discord.gg/YzmbnCDkat
 **New contributors welcome!** 🎉 We've made it easy to get started:
-## ⚡ Quick Start
+- **👋 New to the project?** Start with our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)
 - **🏗️ Want to understand the code?** Check out our [Architecture Guide](./docs/ARCHITECTURE.md)
 - **🧩 Interested in plugins?** Read our [Plugin Development Guide](./docs/plugins/README.md)
 - **🐛 Found a bug?** Open an [issue](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) or fix it yourself!
 - **💬 Need help?** Join our [Discord community](https://discord.gg/YzmbnCDkat)
 We have lots of https://github.com/BetterSEQTA/BetterSEQTA-Plus/labels/good%20first%20issue labels perfect for beginners!
 ## Quick Development Setup
 &nbsp;&nbsp;&nbsp; **1. Fork & Clone**
 ```bash
-git clone https://github.com/YOUR_USERNAME_FORKED_WITH/BetterSEQTA-Plus
+git clone https://github.com/YOUR_USERNAME/BetterSEQTA-Plus
 cd BetterSEQTA-Plus
 ```
 &nbsp;&nbsp;&nbsp; **2. Install & Run**
 ```bash
 npm install --legacy-peer-deps
 npm run dev
-````
+```
-Then load `dist` in `chrome://extensions` (Developer Mode → Load unpacked).
+&nbsp;&nbsp;&nbsp; **3. Load in Browser**
 1. Go to `chrome://extensions`
 2. Enable "Developer mode"
 3. Click "Load unpacked" → Select `dist` folder
 4. Visit a SEQTA page to see it work! 🎉
 > [!WARNING]
 > Whenever you update the extension while not in dev mode, you will need to use the reload button on the extension page.
 📚 **Need more details?** Check our [detailed setup guide](./docs/GETTING_STARTED_CONTRIBUTING.md#your-first-30-minutes)
-Full setup guide:
+### Building for Production
-[https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment](https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment)
+
 ```bash
 npm run build     # Build for all browsers
 npm run zip       # Package for distribution (requires 7-Zip)
 ```
 ## Folder Structure
 The folder structure is as follows:
 - The `src` folder contains source files that are compiled to the build directory.
 - The `src/plugins` folder contains vital loaders required for BetterSEQTA+ functionality.
 - The `src/interface` folder contains source React & Svelte files that are required for the Settings page.
 - The `dist` folder is where the compiled code ends up, this is the folder what you need to load into chrome as an unpacked extension for development.
 ## Contributors
@@ -81,14 +115,11 @@ Full setup guide:
  <img src="https://contrib.rocks/image?repo=betterseqta/betterseqta-plus" />
 </a>
-Want to contribute? [Click Here!](https://docs.betterseqta.org/contributing/)
+Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
 ## Credits
 This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers.
 Originally developed by [Nulkem](https://github.com/Nulkem/betterseqta)
 Ported to Manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68)
 Maintained by [SethBurkart123](https://github.com/SethBurkart123), [Crazypersonalph](https://github.com/Crazypersonalph) & the rest of the BetterSEQTA team!
 ## Star History
@@ -1,7 +1,5 @@
 # BetterSEQTA+ Architecture
 **Published version:** [docs.betterseqta.org/architecture/](https://docs.betterseqta.org/architecture/)
 Hey there! 👋 New to the codebase and feeling a bit lost? Don't worry - this guide will help you understand how everything fits together!
 ## Table of Contents
@@ -223,7 +221,7 @@ console.log(settingsState.[the setting name])
 Ready to contribute? Here's what to do next:
 1. **Read the code**: Start with `src/SEQTA.ts` and follow the flow
-2. **Try creating a simple plugin**: Follow the [plugin documentation](https://docs.betterseqta.org/plugins/)
+2. **Try creating a simple plugin**: Follow our [plugin guide](./plugins/README.md)
 3. **Look at existing issues**: Check our [GitHub issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) for "good first issue" labels
 4. **Join our Discord**: Get help from the community!
@@ -1,141 +0,0 @@
 # BetterSEQTA Cloud — settings sync (server specification)
 This document describes the HTTP API the BetterSEQTA+ extension expects for **cloud backup of extension settings**. The client is implemented in the extension repo; the accounts service (`accounts.betterseqta.org`) must implement these endpoints.
 ## Purpose
 - Store **one JSON document per authenticated BetterSEQTA Cloud user** representing a snapshot of the extension’s `chrome.storage.local` data (theme, layout, plugin settings, `plugin.*` keys, etc.).
 - The extension **does not upload OAuth tokens** (`bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`). Those remain only on the client.
 - **Download** replaces local storage with the stored snapshot, then the client reapplies the current device’s session tokens so the user stays signed in.
 ## Base URL
 All routes below are relative to:
 `https://accounts.betterseqta.org`
 ## Authentication
 Every request must include:
 ```http
 Authorization: Bearer <access_token>
 ```
 Use the same **access tokens** issued by the existing BetterSEQTA+ OAuth flows (`/api/bsplus/login`, `/api/bsplus/refresh`). Resolve the user from the token; the document is scoped to that user.
 ## Endpoints
 ### `PUT /api/bsplus/settings/sync`
 Upserts the caller’s settings backup.
 **Request body (JSON):**
 ```json
 {
  "schemaVersion": 1,
  "themeId": "uuid-string-or-empty",
  "data": {
    "...": "flat key-value map mirroring extension storage (see Payload shape)",
    "selectedTheme": "uuid-or-empty-string"
  }
 }
 ```
 - **`schemaVersion`**: integer. The extension currently sends `1`. The server may reject unknown major versions or store it for future migrations.
 - **`themeId`**: optional but recommended duplicate of **`data.selectedTheme`**. Should be the UUID of the **installed** BetterSEQTA store theme (`selectedTheme`). This may be a normal theme id **or** a **flavour (slave) variant** id from themes with **`flavours[]`** — the extension uses it after restore to prefetch `theme.json` when missing locally (same **`GET …/themes/{id}/download`** as the store UI). Persist and return **`themeId`** in sync with **`data.selectedTheme`**.
 - **`data`**: object whose keys are storage keys (strings) and values are JSON-serializable values (same types as stored in `chrome.storage.local`).
 **Success response:** HTTP `200` (or `201` if you prefer create semantics). Example:
 ```json
 {
  "updated_at": "2026-04-07T12:00:00.000Z"
 }
 ```
 `updated_at` should be an ISO 8601 timestamp of the save time. The extension displays success without requiring extra fields.
 **Error responses:** Standard JSON error body if applicable, e.g. `{ "error": "message" }`, with appropriate HTTP status (`401`, `413`, `422`, etc.).
 ---
 ### `GET /api/bsplus/settings/sync`
 Returns the caller’s latest settings backup.
 **Success response:** HTTP `200` with body:
 ```json
 {
  "schemaVersion": 1,
  "themeId": "uuid-string-or-empty",
  "data": { },
  "updated_at": "2026-04-07T12:00:00.000Z"
 }
 ```
 - **`data`**: required for restore; must be the same shape as accepted in `PUT` (flat map of storage keys).
 - **`themeId`**: optional; if present must match **`data.selectedTheme`** (see `PUT`).
 - **`schemaVersion`**: optional but recommended; should match what was stored.
 - **`updated_at`**: optional; included for UX if the client shows “last backup” time.
 The extension resolves **`themeId`** (if non-empty), else **`data.selectedTheme`,** to [`resolveThemeIdForPostSyncDownload`](../src/seqta/utils/cloudSettingsSync.ts) after downloading the envelope — used only to reinstall theme assets from **`betterseqta.org`** when IndexedDB lacks that id (see **BetterSEQTA Cloud** flavour note in **[THEME_STORE_FLAVOURS_API](./THEME_STORE_FLAVOURS_API.md)** section “Cloud settings sync compatibility”).
 **No backup yet:** HTTP **`404`**. The extension treats this as “nothing in the cloud” and shows an error to the user.
 **Error responses:** `401` if the token is invalid, etc.
 ---
 ## Suggested database shape
 Example relational layout:
 | Column        | Type        | Notes |
 |---------------|-------------|--------|
 | `user_id`     | FK → users  | Unique per backup row (one row per user). |
 | `payload`     | JSON / JSONB| Store `{ "schemaVersion", "data" }` or only `data` + separate `schema_version` column. |
 | `updated_at`  | timestamptz | Set on each successful `PUT`. |
 Unique constraint on `user_id`.
 ## Semantics
 - **Last write wins:** each `PUT` replaces the stored backup for that user.
 - **Optional later:** `If-Unmodified-Since` or a `revision` field for conflict detection (not required for v1).
 ## Security and privacy
 - **Encryption at rest** for `payload` is recommended.
 - Payload may contain **school-related UI preferences** and plugin data; treat as **user data** under your privacy policy.
 - **Do not require or store** refresh/access tokens in the payload; the extension already strips them on upload.
 ### Never included in the sync payload (`chrome.storage.local` only)
 The backup is a flat JSON map of **`chrome.storage.local`** keys. It does **not** include:
 - **IndexedDB** — e.g. the Global Search index (`betterseqta-index` and related DBs) lives outside extension storage and is never serialized here.
 - **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.
 ## Related endpoint: `GET /api/user/cloud-summary`
 The extension may call **`GET /api/user/cloud-summary`** (same host, `Authorization: Bearer`) for a **small** JSON summary (e.g. whether DesQTA / BetterSEQTA+ cloud settings exist and **`bsplus.updated_at`** / **`schemaVersion`**). It does **not** return the large settings `data` blob.
 - **Auto-sync flow:** compare `bsplus.updated_at` to a **client-only** watermark stored in extension storage as **`bsplus_cloud_settings_known_remote_updated_at`** (never uploaded, never applied from the server payload; preserved on restore).
 - If the server timestamp is newer (and `schemaVersion` is not ahead of the client), the client then calls **`GET /api/bsplus/settings/sync`** and applies the full envelope as usual.
 This uses standard **WebExtension** APIs (`browser.alarms`, `runtime` messages, `storage`) and works on **Chromium and Firefox** builds (see `webextension-polyfill`).
 ## Client reference (extension)
 - Upload / dev export: `buildUploadPayload` / `getSnapshotForUpload` in `src/seqta/utils/cloudSettingsSync.ts` (strips OAuth-related keys, sensitive device keys, **`bsplus_pending_theme_ensure_after_cloud`**, and **`bsplus_cloud_settings_known_remote_updated_at`** — includes **`themeId`** aligned with **`selectedTheme`**).
 - Download: resolve id via **`resolveThemeIdForPostSyncDownload`** → **`applyDownloadedEnvelope`** after `GET` → prefetch theme blobs in page context if needed (**`prepareThemeAfterCloudSync`** in **`ThemeManager`**) → reload SEQTA tabs; local auth keys, sensitive device keys, client-only watermark, and **`bsplus_pending_theme_ensure_after_cloud`** semantics preserved as documented above.
 - Auto sync (summary, debounced upload, alarms): `src/background/cloudSettingsAutoSync.ts`; content script triggers a poll on each verified SEQTA Learn/Engage page load (top frame) via `cloudSettingsPoll`.
@@ -1,7 +1,5 @@
 # Getting Started as a Contributor
 **Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
 Welcome to BetterSEQTA+! 🎉 This guide will walk you through making your first contribution, even if you're completely new to the project.
 ## Table of Contents
@@ -224,7 +222,7 @@ git push origin your-branch-name
 ### Stuck? Here's How to Get Unstuck
-1. **Check the docs** - The [architecture guide](https://docs.betterseqta.org/architecture/) explains everything
+1. **Check the docs** - [Architecture guide](./ARCHITECTURE.md) explains everything
 2. **Search existing issues** - Someone might have had the same problem
 3. **Ask in Discord** - Our community is super helpful
 4. **Create an issue** - If you found a bug or need help
@@ -1,37 +1,30 @@
 # BetterSEQTA+ Documentation
-**Canonical documentation lives at [docs.betterseqta.org](https://docs.betterseqta.org/).** The pages below are the same topics; use the site for search, navigation, and the latest updates.
+🚧 DOCS UNDER CONSTRUCTION! 🚧
 Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
 ## Table of Contents
 ### Getting Started
- [Documentation home](https://docs.betterseqta.org/)
+- [Project Overview](./README.md) - This file
- [Installation](https://docs.betterseqta.org/install/)
+- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
- [Contributing](https://docs.betterseqta.org/contributing/)
+- [Getting Started Contributing](./GETTING_STARTED_CONTRIBUTING.md) - **Start here!** Complete beginner-friendly guide
- [GitHub releases & CI](RELEASES.md) — workflows, nightly builds, update detector
+- [Architecture Guide](./ARCHITECTURE.md) - How BetterSEQTA+ works under the hood
- [Architecture](https://docs.betterseqta.org/architecture/)
+- [Contributing Guide](../CONTRIBUTING.md) - Official contribution guidelines
- [Contribution guidelines (repository)](../CONTRIBUTING.md)
+- [Troubleshooting](./TROUBLESHOOTING.md) - Common issues and solutions
 - [Troubleshooting](https://docs.betterseqta.org/troubleshooting/)
-### Features & customization
+### Plugin System
- [Features](https://docs.betterseqta.org/features/)
+- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
- [Themes & customization](https://docs.betterseqta.org/customization/)
+- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
 - [Theme creation](https://docs.betterseqta.org/theme-creation/)
 ### Plugin system
 - [Plugins overview](https://docs.betterseqta.org/plugins/)
 - [Plugin development](https://docs.betterseqta.org/plugin-development/)
 - [Plugin API](https://docs.betterseqta.org/plugin-api/)
 - [Example plugin](https://docs.betterseqta.org/example-plugin/)
 ## Core Concepts
 BetterSEQTA+ is built around several core concepts:
-1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. See the [plugins documentation](https://docs.betterseqta.org/plugins/).
+1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. Check out our [plugin guide](./plugins/README.md) to learn how to create your own!
 2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
@@ -43,13 +36,19 @@ BetterSEQTA+ is built around several core concepts:
 If you need help with BetterSEQTA+, you can:
- [Open an Issue](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) - Report bugs or request features
+- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
 - [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
 - [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
 ## Contributing to the Documentation
-We welcome contributions to the documentation. The published site is built from the documentation repository; see [Contributing](https://docs.betterseqta.org/contributing/) for how to help.
+We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
 To contribute to the documentation:
 1. Fork the repository
 2. Make your changes to the documentation files
 3. Submit a pull request with a clear description of your changes
 ## License
@@ -1,266 +0,0 @@
 # GitHub releases, CI, and the update detector
 BetterSEQTA+ is distributed on the Chrome Web Store and Firefox Add-ons, but some users sideload builds from GitHub. This document explains how automated builds, releases, and the in-extension update badge work.
 All published releases target the upstream repository: **[BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus)**.
 ---
 ## Overview
 ```mermaid
 flowchart TB
  subgraph ci [Continuous integration]
    PrCi[pr-ci.yml — every PR]
    Mvp[mvp.yml — push to main]
  end
  subgraph releases [GitHub releases]
    Manual[release.yml — manual stable]
    Nightly[nightly.yml — daily cron]
  end
  subgraph output [Outputs]
    Zips["betterseqtaplus-VERSION-chrome.zip\nbetterseqtaplus-VERSION-firefox.zip"]
    GhStable["Release tag: 3.7.0"]
    GhNightly["Release tag: nightly"]
    Badge[Update badge in settings]
  end
  PrCi -->|build only| NoRelease[No release]
  Mvp -->|artifact| DistZip[dist.zip artifact]
  Manual --> Zips
  Manual --> GhStable
  Manual --> Badge
  Nightly --> Zips
  Nightly --> GhNightly
  Nightly --> Badge
 ```
 | Workflow | Trigger | Creates a release? | Update detector in build? |
 |----------|---------|------------------|---------------------------|
 | `pr-ci.yml` | Every pull request to `main` | No | No |
 | `mvp.yml` | Every push to `main` | No | No |
 | `release.yml` | Manual (`workflow_dispatch`) | Yes — stable version tag | Yes — stable channel |
 | `nightly.yml` | Daily at 03:00 UTC + manual | Yes — reuses `nightly` tag | Yes — nightly channel |
 ---
 ## Shared build action
 All release and CI builds that need packaged extensions use the composite action at [`.github/actions/build-extension/action.yml`](../.github/actions/build-extension/action.yml).
 It:
 1. Installs dependencies (`npm install --legacy-peer-deps`)
 2. Runs `npm run build` (Chrome then Firefox via Vite)
 3. Zips each unpacked folder into sideload-ready archives:
   - `dist/betterseqtaplus-{version}-chrome.zip`
   - `dist/betterseqtaplus-{version}-firefox.zip`
 The `{version}` comes from `package.json`.
 ### Build-time flags (release builds only)
 Release and nightly workflows pass environment variables into Vite, which bakes them into the extension at compile time via `define` in [`vite.config.ts`](../vite.config.ts):
 | Variable | Stable release | Nightly | PR / local dev |
 |----------|----------------|---------|----------------|
 | `GH_RELEASE_UPDATE_CHECK` | `true` | `true` | `false` / unset |
 | `UPDATE_CHANNEL` | `stable` | `nightly` | `stable` (unused) |
 | `GH_RELEASE_REPO` | `BetterSEQTA/BetterSEQTA-Plus` | same | same |
 | `BUILD_LABEL` | empty | GitHub run number | empty |
 When `GH_RELEASE_UPDATE_CHECK` is not `true`, the update-checker code is tree-shaken out of the bundle. PR CI builds and local `npm run build` do **not** include the update badge.
 To test a release-style build locally:
 ```bash
 # PowerShell
 $env:GH_RELEASE_UPDATE_CHECK="true"
 $env:UPDATE_CHANNEL="stable"
 npm run build
 # bash
 GH_RELEASE_UPDATE_CHECK=true UPDATE_CHANNEL=stable npm run build
 ```
 ---
 ## Stable release (`release.yml`)
 **Purpose:** A safe, manual way to publish versioned builds that users can download from GitHub.
 **Trigger:** Manual only — Actions → **Release** → **Run workflow**. There is no schedule or automatic trigger.
 When dispatching, check **“I have already updated the version in package.json”**. The workflow will not run without that confirmation.
 ### Before you run it
 1. Merge your changes to `main`.
 2. Bump `version` in [`package.json`](../package.json) (e.g. `3.7.0` → `3.8.0`).
 3. Commit and push that bump.
 ### What the workflow does
 1. Aborts if the version confirmation was not checked.
 2. Reads the version from `package.json`.
 3. Builds Chrome and Firefox with the update detector enabled (stable channel).
 4. If no release exists for that tag: creates one (e.g. `3.8.0`) with a placeholder description.
 5. If a release already exists for that tag: **only replaces the zip assets** (`--clobber`). Title and body are left unchanged.
 6. Uploads `betterseqtaplus-{version}-chrome.zip` and `-firefox.zip`.
 On first publish, edit the **title** and **release notes** on GitHub afterward. Re-running for the same version refreshes the files only.
 ### Downloading and installing
 1. Open [github.com/BetterSEQTA/BetterSEQTA-Plus/releases](https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases).
 2. Pick the version you want.
 3. Download `betterseqtaplus-{version}-chrome.zip` or `-firefox.zip`.
 4. Unzip and load the unpacked folder as a temporary extension (Chrome: Extensions → Load unpacked; Firefox: `about:debugging` → Load Temporary Add-on).
 **These GitHub builds are for sideloading only. Do not upload them to the Chrome Web Store or Firefox Add-ons.**
 ---
 ## Nightly release (`nightly.yml`)
 **Purpose:** Continuous experimental builds from `main` so testers always have a single place to get the latest code.
 **Trigger:**
 - Automatically every day at **03:00 UTC**
 - Manually via Actions → **Nightly Release** → **Run workflow**
 ### What the workflow does
 1. Builds from the current `main` branch with the update detector enabled (nightly channel).
 2. Uses a fixed release tag: **`nightly`** (marked as prerelease).
 3. On first run: creates the `nightly` release with the text in [`.github/nightly-release-notes.md`](../.github/nightly-release-notes.md).
 4. On every subsequent run: **replaces** the zip assets on the same release (`--clobber`). The release title and body are not rewritten.
 The nightly release body warns that builds are experimental and must not be uploaded to extension stores.
 ---
 ## PR CI (`pr-ci.yml`)
 **Purpose:** Verify that every pull request builds cleanly in a fresh environment.
 **Trigger:** Every pull request targeting `main`.
 **Steps:**
 1. `npm install --legacy-peer-deps`
 2. `npm run lint` (ESLint on `src/**/*.{js,ts}`)
 3. Build via the shared action with **no** update detector
 No release is created and no artifacts are published for end users.
 ---
 ## Push CI (`mvp.yml`)
 **Purpose:** Build verification when code lands on `main`.
 **Trigger:** Push to `main` only (not pull requests — those use `pr-ci.yml`).
 Uploads a `dist.zip` artifact containing the full `dist/` folder for debugging. No release, no update detector.
 ---
 ## Authentication
 Release workflows run **only on [BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus)**. They use the default `GITHUB_TOKEN` with `contents: write` — no extra secrets or PATs required.
 ---
 ## Update detector (in-extension)
 GitHub release builds include a small feature that tells sideload users when a newer build is available, so they do not have to check GitHub manually.
 ### Where it appears
 In the **settings popup** header (top-right): an amber **“Update available — X.X.X”** pill when an update exists, plus a muted line:
 > GitHub release build — do not upload to extension stores.
 Clicking the badge opens the relevant GitHub releases page.
 ### How it checks for updates
 Implementation: [`src/utils/githubReleaseUpdate.ts`](../src/utils/githubReleaseUpdate.ts)
 **Stable channel** (from `release.yml` builds):
 1. Fetches releases from the GitHub API for `BetterSEQTA/BetterSEQTA-Plus`.
 2. Ignores the `nightly` tag and any non-semver tags.
 3. Finds the highest semver tag.
 4. Compares it to `browser.runtime.getManifest().version`.
 5. Shows the badge if the remote version is newer.
 **Nightly channel** (from `nightly.yml` builds):
 1. Fetches the `nightly` release.
 2. Compares its `published_at` timestamp to `lastSeenNightlyPublishedAt` in extension storage.
 3. On first install, records the current publish time without showing a badge.
 4. Shows **“Update available — nightly #123”** (run number) when a newer nightly has been published.
 Checks are throttled to once every **6 hours** per browser profile (`localStorage` key `bsplus_lastGhReleaseCheck`). Recent results are cached in memory for the session.
 ### Dev override (testing)
 To test the badge without publishing a real release:
 1. Open settings and unlock **dev mode** (click the logo, type `dev`).
 2. In the developer section, set **GitHub latest version override** to a version higher than your installed one (e.g. `9.9.9`).
 3. Reopen settings — the badge should appear.
 This only applies when dev mode is on. Clear the field to return to normal API checks.
 ---
 ## File reference
 | Path | Role |
 |------|------|
 | `.github/actions/build-extension/action.yml` | Shared install, build, zip |
 | `.github/workflows/release.yml` | Manual stable releases |
 | `.github/workflows/nightly.yml` | Nightly releases |
 | `.github/workflows/pr-ci.yml` | PR lint + build |
 | `.github/workflows/mvp.yml` | Push-to-main build artifact |
 | `.github/nightly-release-notes.md` | Static body for the `nightly` release |
 | `vite.config.ts` | Injects build-time `define` flags |
 | `src/env.d.ts` | TypeScript declarations for those flags |
 | `src/utils/githubReleaseUpdate.ts` | Update check logic |
 | `src/interface/pages/settings.svelte` | Badge and disclaimer UI |
 | `src/interface/pages/settings/general.svelte` | Dev override input |
 | `src/types/storage.ts` | `devGhReleaseVersionOverride`, `lastSeenNightlyPublishedAt` |
 ---
 ## Quick reference
 ### Publish a stable release
 ```text
 1. Bump version in package.json on main
 2. Actions → Release → Run workflow → confirm version checkbox
 3. Edit release title/notes on GitHub (first time only)
 4. Re-run with same version to refresh zips without changing release text
 ```
 ### Get the latest nightly
 ```text
 https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases/tag/nightly
 ```
 ### Verify a PR locally
 ```bash
 npm run lint
 npm run build
 ```
@@ -1,587 +0,0 @@
 # Theme Creation Guide
 **Published version:** [docs.betterseqta.org/theme-creation/](https://docs.betterseqta.org/theme-creation/)
 This guide covers everything you need to know about creating custom themes for BetterSEQTA+.
 ## Table of Contents
 1. [Overview](#overview)
 2. [Theme Structure](#theme-structure)
 3. [CSS Variables](#css-variables)
 4. [CSS Selectors & Classes](#css-selectors--classes)
 5. [Custom Images](#custom-images)
 6. [Theme Settings](#theme-settings)
 7. [Best Practices](#best-practices)
 8. [Examples](#examples)
 ## Overview
 Themes in BetterSEQTA+ allow you to completely customize the appearance of SEQTA Learn. A theme consists of:
 - **Custom CSS**: CSS rules that override default styles
 - **Custom Images**: Images that can be referenced via CSS variables
 - **Theme Metadata**: Name, description, default color, etc.
 - **Theme Settings**: Options like forcing dark/light mode
 Themes are applied by injecting CSS into the SEQTA page and setting CSS custom properties (variables) on the document root.
 ## CSS Variables
 BetterSEQTA+ provides a comprehensive set of CSS variables that you can use in your themes. These variables automatically adapt to light/dark mode and user preferences.
 ### Core Background Variables
 | Variable | Light Mode | Dark Mode | Description |
 |----------|------------|-----------|-------------|
 | `--background-primary` | `#ffffff` | `#232323` | Main background color |
 | `--background-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary background color |
 | `--theme-primary` | `#ffffff` | `#232323` | Primary theme color (same as background-primary) |
 | `--theme-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary theme color (same as background-secondary) |
 | `--text-primary` | `black` | `white` | Primary text color |
 | `--text-color` | `black` | `white` | Text color (alias for text-primary) |
 ### BetterSEQTA+ Specific Variables
 | Variable | Description | Notes |
 |----------|-------------|-------|
 | `--better-main` | User's selected accent color | Dynamically set based on color picker |
 | `--better-sub` | Dark navy color | Always `#161616` |
 | `--better-pale` | Lightened version of accent color | Only available in light mode |
 | `--better-light` | Lighter version of accent color | Calculated based on brightness |
 | `--better-alert-highlight` | Alert/highlight color | `#c61851` |
 | `--betterseqta-logo` | Logo URL | Changes based on dark/light mode |
 | `--auto-background` | Auto background color | Falls back to `--better-pale` or `--background-secondary` |
 | `--navy` | Navy color | `#1a1a1a` |
 | `--theme-fg-parts` | Theme foreground parts | `white` |
 ### Subject/Item Color Variables
 | Variable | Description |
 |----------|-------------|
 | `--item-colour` | Subject/item color | Set dynamically per subject/item |
 | `--colour` | Generic color variable | Used in various contexts |
 | `--person-colour` | Person/avatar color | `var(--better-light)` for staff |
 ### Transparency Effects
 When transparency effects are enabled, background variables become semi-transparent:
 | Variable | Light Mode (Transparent) | Dark Mode (Transparent) |
 |----------|--------------------------|-------------------------|
 | `--background-primary` | `rgba(255, 255, 255, 0.6)` | `rgba(35, 35, 35, 0.6)` |
 | `--background-secondary` | `rgba(229, 231, 235, 0.6)` | `rgba(26, 26, 26, 0.6)` |
 ### Using CSS Variables
 You can use these variables in your custom CSS:
 ```css
 /* Example: Style a custom element */
 .my-custom-element {
  background: var(--background-primary);
  color: var(--text-primary);
  border: 1px solid var(--better-main);
 }
 /* Example: Create a gradient */
 .gradient-box {
  background: linear-gradient(
    to bottom,
    var(--better-main),
    var(--background-secondary)
  );
 }
 ```
 ## CSS Selectors & Classes
 BetterSEQTA+ uses specific CSS selectors and classes that you can target in your themes. Here are the most important ones:
 ### Main Layout Elements
 | Selector | Description |
 |----------|-------------|
 | `#container` | Main container element |
 | `#content` | Content area |
 | `#main` | Main content wrapper |
 | `#title` | Top title bar |
 | `#menu` | Sidebar menu |
 ### Dark Mode
 The `dark` class is added to `html` when dark mode is active:
 ```css
 /* Target dark mode specifically */
 html.dark #main {
  background: var(--background-primary);
 }
 /* Target light mode */
 html:not(.dark) #main {
  background: var(--background-primary);
 }
 ```
 ### Transparency Effects
 When transparency effects are enabled, the `transparencyEffects` class is added to `html`:
 ```css
 html.transparencyEffects .notice {
  backdrop-filter: blur(80px);
 }
 ```
 ### Common SEQTA Classes
 | Class/Selector | Description |
 |----------------|-------------|
 | `.notice` | Notice cards |
 | `.day` | Day containers in timetable |
 | `.dashboard` | Dashboard sections |
 | `.dashlet` | Dashboard widgets |
 | `.document` | Document elements |
 | `.quickbar` | Quick action bar |
 | `.calendar` | Calendar elements |
 | `.message` | Message elements |
 | `.thread` | Forum threads |
 | `.shortcut` | Shortcut buttons |
 | `.upcoming-assessment` | Upcoming assessments |
 | `.entry.class` | Timetable entries |
 ### BetterSEQTA+ Specific Classes
 | Class | Description |
 |-------|-------------|
 | `.addedButton` | BetterSEQTA+ added buttons |
 | `.tooltip` | Tooltip elements |
 | `.notice-unified-content` | Unified notice content |
 | `.home-container` | Home page container |
 | `.timetable-container` | Timetable container |
 | `.notices-container` | Notices container |
 ### Attribute Selectors
 SEQTA uses data attributes that you can target:
 ```css
 /* Target specific data types */
 [data-type="student"] .header {
  color: var(--text-primary);
 }
 /* Target specific labels */
 [data-label="inbox"] {
  /* Styles */
 }
 ```
 ### CSS Modules
 SEQTA uses CSS modules with hashed class names. You can target them using attribute selectors:
 ```css
 /* Target CSS module classes */
 [class*="MessageList__MessageList___"] {
  background: var(--background-primary);
 }
 [class*="BasicPanel__BasicPanel___"] {
  border-radius: 16px;
 }
 ```
 ## Custom Images
 Themes can include custom images that are made available as CSS variables.
 ### Adding Images
 1. Upload an image in the theme creator
 2. Set a CSS variable name (e.g., `custom-background`)
 3. The image will be available as `var(--custom-background)`
 ### Using Image Variables
 ```css
 /* Use as background */
 .my-element {
  background-image: var(--custom-background);
  background-size: cover;
  background-position: center;
 }
 /* Use in content */
 .my-icon::before {
  content: '';
  background-image: var(--custom-icon);
  width: 24px;
  height: 24px;
 }
 ```
 ### Image Variable Format
 Images are stored as `url()` values:
 ```css
 /* The variable contains: url(blob:...) */
 --custom-background: url(blob:chrome-extension://...);
 ```
 ## Theme Settings
 ### Force Dark/Light Mode
 You can force a theme to always use dark or light mode:
 ```typescript
 forceDark: true   // Force dark mode
 forceDark: false  // Force light mode
 forceDark: undefined  // Use user's preference (default)
 ```
 When `forceDark` is set, users cannot toggle dark/light mode while the theme is active.
 ### Default Color
 Set a default accent color for your theme:
 ```typescript
 defaultColour: "rgba(0, 123, 255, 1)"  // Blue
 defaultColour: "#ff6b6b"                // Red (hex format)
 ```
 ### Allow Color Changes
 Control whether users can change the accent color:
 ```typescript
 CanChangeColour: true   // Users can change color
 CanChangeColour: false  // Color is locked
 ```
 ## Best Practices
 ### 1. Use CSS Variables
 Always use CSS variables instead of hardcoded colors:
 ```css
 /* Good */
 .my-element {
  background: var(--background-primary);
  color: var(--text-primary);
 }
 /* Bad */
 .my-element {
  background: #ffffff;
  color: #000000;
 }
 ```
 ### 2. Support Both Light and Dark Modes
 Unless your theme forces a specific mode, ensure it works in both:
 ```css
 /* Use variables that adapt automatically */
 .my-element {
  background: var(--background-primary);
  color: var(--text-primary);
 }
 /* Or explicitly handle both modes */
 html.dark .my-element {
  background: #1a1a1a;
 }
 html:not(.dark) .my-element {
  background: #ffffff;
 }
 ```
 ### 3. Use !important Sparingly
 Only use `!important` when necessary to override SEQTA's default styles:
 ```css
 /* Good - necessary override */
 #title {
  background: var(--background-primary) !important;
 }
 /* Bad - unnecessary */
 .my-element {
  color: var(--text-primary) !important;
 }
 ```
 ### 4. Test Responsive Design
 SEQTA is responsive. Test your theme at different screen sizes:
 ```css
 /* Example: Mobile-specific styles */
@media (max-width: 900px) {
  #menu {
    transform: translate(-270px);
  }
 }
 ```
 ### 5. Use Semantic Selectors
 Prefer semantic selectors over fragile ones:
 ```css
 /* Good - stable selector */
 #main > .dashboard > section {
  border-radius: 16px;
 }
 /* Caution - CSS module classes may change */
 [class*="Dashboard__Dashboard___"] {
  border-radius: 16px;
 }
 ```
 ### 6. Optimize Images
 Keep image file sizes reasonable:
 - Use appropriate formats (PNG for transparency, JPG for photos)
 - Compress images before uploading
 - Consider using CSS for simple graphics instead of images
 ### 7. Document Your Theme
 Include comments in your CSS explaining complex styles:
 ```css
 /* 
 * Custom gradient background for dashboard
 * Uses the user's accent color for a cohesive look
 */
 #main > .dashboard {
  background: linear-gradient(
    135deg,
    var(--better-main),
    var(--background-secondary)
  );
 }
 ```
 ## Examples
 ### Example 1: Simple Color Theme
 ```css
 /* Change accent color throughout */
 :root {
  --better-main: #ff6b6b;
 }
 /* Style the menu */
 #menu {
  background: var(--background-primary);
  border-right: 3px solid var(--better-main);
 }
 /* Style buttons */
 .uiButton {
  background: var(--better-main);
  color: var(--text-color);
  border-radius: 8px;
 }
 ```
 ### Example 2: Custom Background Image
 ```css
 /* Use a custom background image */
 body {
  background-image: var(--custom-background);
  background-size: cover;
  background-attachment: fixed;
 }
 /* Add overlay for readability */
 #main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
 }
 ```
 ### Example 3: Rounded Corners Theme
 ```css
 /* Make everything more rounded */
 #main > .dashboard > section,
 .dashlet,
 .notice,
 .document {
  border-radius: 20px !important;
 }
 /* Round buttons */
 .uiButton {
  border-radius: 25px !important;
 }
 ```
 ### Example 4: Minimal Theme
 ```css
 /* Remove shadows and borders */
 #main > .dashboard > section,
 .dashlet,
 .notice {
  box-shadow: none !important;
  border: 1px solid var(--background-secondary) !important;
 }
 /* Simplify colors */
 #menu {
  background: var(--background-primary) !important;
 }
 /* Remove gradients */
 .day {
  background: var(--background-primary) !important;
 }
 ```
 ### Example 5: High Contrast Theme
 ```css
 /* Increase contrast */
 :root {
  --background-primary: #000000;
  --background-secondary: #1a1a1a;
  --text-primary: #ffffff;
 }
 html:not(.dark) {
  --background-primary: #ffffff;
  --background-secondary: #f0f0f0;
  --text-primary: #000000;
 }
 /* Add borders for clarity */
 .dashlet,
 .notice,
 .document {
  border: 2px solid var(--better-main) !important;
 }
 ```
 ## Advanced Techniques
 ### CSS Custom Properties Override
 You can override CSS variables in your theme:
 ```css
 /* Override a variable */
 :root {
  --better-main: #your-color;
 }
 /* Override conditionally */
 html.dark {
  --background-primary: #your-dark-color;
 }
 ```
 ### Animations
 Add smooth transitions:
 ```css
 /* Smooth color transitions */
 #menu li {
  transition: background-color 0.3s ease;
 }
 /* Hover effects */
 .dashlet:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
 }
 ```
 ### Pseudo-elements
 Use pseudo-elements for decorative elements:
 ```css
 /* Add decorative border */
 .notice::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--better-main);
 }
 ```
 ## Troubleshooting
 ### Theme Not Applying
 1. Check browser console for CSS errors
 2. Verify CSS syntax is correct
 3. Ensure selectors are specific enough
 4. Check if `!important` is needed
 ### Colors Not Changing
 1. Verify you're using CSS variables
 2. Check if `forceDark` is overriding your styles
 3. Ensure variables are set on `:root` or `html`
 ### Images Not Showing
 1. Verify image variable name matches CSS
 2. Check image format is supported
 3. Ensure image size is reasonable
 4. Verify `url()` wrapper in CSS
 ### Dark Mode Issues
 1. Test with `forceDark: true` and `forceDark: false`
 2. Check if transparency effects are interfering
 3. Verify `html.dark` selector is correct
 ## Resources
 - **Theme Creator**: Access via BetterSEQTA+ settings
 - **CSS Variables Reference**: See [CSS Variables](#css-variables) section above
 - **SEQTA DOM Structure**: Inspect SEQTA pages in browser DevTools
 - **BetterSEQTA+ Source**: Check `src/css/injected.scss` for default styles
 ## Contributing Themes
 If you create a great theme, consider sharing it:
 1. Export your theme (Share button in theme creator)
 2. Submit to the BetterSEQTA+ theme store
 3. Or share on GitHub/Discord
 ---
 **Note**: This documentation is based on BetterSEQTA+ v3.4.13. Some details may change in future versions.
@@ -1,7 +1,5 @@
 # Troubleshooting Guide
 **Published version:** [docs.betterseqta.org/troubleshooting/](https://docs.betterseqta.org/troubleshooting/)
 Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
 ## Table of Contents
@@ -1,7 +1,5 @@
 # Contributing to BetterSEQTA+
 **Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
 Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
 ## Table of Contents
@@ -59,7 +57,7 @@ Key points:
 5. **Install in Chrome/Firefox**
-   Follow the [installation instructions](https://docs.betterseqta.org/install/) to load the development version into your browser.
+   Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
 ### Project Structure
@@ -119,13 +117,12 @@ git checkout -b feature/my-new-feature
   If your changes require documentation updates, include them in the same PR.
-4. **Run CI checks locally**
+4. **Run Tests**
-   Pull requests trigger **PR CI**, which lints and builds in a clean environment:
+   Make sure all tests pass before submitting your PR:
   ```bash
-   npm run lint
+   npm test
   npm run build
   ```
 5. **Submit Your PR**
@@ -140,25 +137,6 @@ git checkout -b feature/my-new-feature
   Once approved, a maintainer will merge your PR.
 ### GitHub Actions workflows
 See [RELEASES.md](RELEASES.md) for a full guide (workflows, sideload installs, and update detector).
 | Workflow | Trigger | Purpose |
 |----------|---------|---------|
 | `pr-ci.yml` | Every PR to `main` | Typecheck, lint, and build (no release) |
 | `mvp.yml` | Push to `main` | Build and upload `dist.zip` artifact |
 | `release.yml` | Manual (`workflow_dispatch`) | Stable release on [BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus) tagged with `package.json` version |
 | `nightly.yml` | Daily cron + manual | Updates the fixed `nightly` prerelease with latest `main` builds |
 **Releasing a stable version:** bump `version` in `package.json` on `main`, then manually run the **Release** workflow and confirm the version checkbox. Edit the release title and notes on GitHub after the first publish. Re-running for the same tag only updates the zip files. Assets are `betterseqtaplus-{version}-chrome.zip` and `-firefox.zip`.
 **Nightly builds** replace assets on the same `nightly` release. The release body warns that builds are experimental and must not be uploaded to extension stores.
 **GitHub release builds** include an in-extension update checker (settings header badge). **PR CI and local dev builds do not.**
 Release workflows are dispatched only on the main **BetterSEQTA/BetterSEQTA-Plus** repository and use the default `GITHUB_TOKEN`.
 ### Coding Standards
 We follow TypeScript best practices and have a consistent code style:
@@ -268,8 +246,8 @@ Join our community channels to discuss the project, get help, and connect with o
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
+- [Creating Your First Plugin](./plugins/creating-plugins.md)
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
+- [Plugin API Reference](./advanced/plugin-api.md)
 ## Recognition
@@ -1,7 +1,5 @@
 # Installing BetterSEQTA+
 **Published version:** [docs.betterseqta.org/install/](https://docs.betterseqta.org/install/)
 This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
 ## Prerequisites
@@ -180,5 +178,5 @@ bun run dev
 Now that you have BetterSEQTA+ installed, you can:
- [Plugins](https://docs.betterseqta.org/plugins/)
+- [Getting Started with Plugins](./plugins/getting-started.md)
- [Contribute to the project](https://docs.betterseqta.org/contributing/) · [Repository CONTRIBUTING.md](../CONTRIBUTING.md)
+- [Contribute to the project](../CONTRIBUTING.md)
@@ -1,7 +1,5 @@
 # Example Plugin Template
 **Published version:** [docs.betterseqta.org/example-plugin/](https://docs.betterseqta.org/example-plugin/)
 This is a complete, working example of a simple BetterSEQTA+ plugin. You can copy this code and modify it to create your own plugin!
 ## What This Example Does
@@ -330,8 +328,8 @@ Once you've got this working:
 ## Need Help?
 - 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
- 📚 Read the [plugin documentation](https://docs.betterseqta.org/plugins/)
+- 📚 Read our [Plugin Development Guide](./README.md)
- 🐛 Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
+- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
 - 📝 Open an issue on GitHub
 Happy coding! 🎉 
@@ -1,7 +1,5 @@
 # Creating Plugins for BetterSEQTA+
 **Published version:** [docs.betterseqta.org/plugins/](https://docs.betterseqta.org/plugins/) · [Plugin development](https://docs.betterseqta.org/plugin-development/) · [Plugin API](https://docs.betterseqta.org/plugin-api/)
 Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome! This guide will walk you through everything you need to know, from the very basics to more advanced features. Don't worry if you're new to this - we'll explain everything step by step.
 ## What is a Plugin?
@@ -296,4 +294,4 @@ Got stuck? No worries! Here's where you can get help:
 - Check out the built-in plugins in the `src/plugins/built-in` folder
 - Open an issue on our [GitHub page](https://github.com/betterseqta/betterseqta-plus/issues)
-Happy coding and feel free to check out the [plugin API](https://docs.betterseqta.org/plugin-api/) on the documentation site.
+Happy coding and feel free to checkout the api reference [here](./api-reference.md)
@@ -1,8 +1,6 @@
 # Plugin API Reference
-**Published version:** [docs.betterseqta.org/plugin-api/](https://docs.betterseqta.org/plugin-api/)
+This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see [Creating Your First Plugin](./README.md).
 This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see the [plugins section](https://docs.betterseqta.org/plugins/) at [docs.betterseqta.org](https://docs.betterseqta.org/).
 ## Plugin Structure
@@ -1,43 +0,0 @@
 import type { Plugin } from "vite";
 /**
 * Firefox extension pages forbid eval / `Function` constructor. Some deps still emit:
 * - `Function(\`return this\`)()` (lodash-style global)
 * - `try { return Function(\`\`) / new Function("") … }` (feature probes, e.g. PDF.js / ORT)
 */
 export function firefoxStripFunctionProbe(): Plugin {
  return {
    name: "firefox-strip-function-probe",
    apply: "build",
    enforce: "post",
    generateBundle(_options, bundle) {
      if ((process.env.MODE || "chrome").toLowerCase() !== "firefox") return;
      const literalReplacements: [string, string][] = [
        ['try{return new Function(""),!0}catch{return!1}', "return!1"],
        ["try{return new Function(''),!0}catch{return!1}", "return!1"],
        ['try{return new Function(""),true}catch{return false}', "return false"],
        ["try{return new Function(''),true}catch{return false}", "return false"],
        // Empty template literal probe (minifier output)
        ["try{return Function(``),!0}catch{return!1}", "return!1"],
      ];
      for (const chunk of Object.values(bundle)) {
        if (chunk.type !== "chunk" || typeof chunk.code !== "string") continue;
        let { code } = chunk;
        code = code.replace(/Function\(`return this`\)\(\)/g, "(globalThis)");
        code = code.replace(/Function\("return this"\)\(\)/g, "(globalThis)");
        code = code.replace(/Function\('return this'\)\(\)/g, "(globalThis)");
        for (const [from, to] of literalReplacements) {
          if (code.includes(from)) {
            code = code.split(from).join(to);
          }
        }
        chunk.code = code;
      }
    },
  };
 }
@@ -1,15 +1,12 @@
 {
  "name": "betterseqtaplus",
-  "version": "3.7.0",
+  "version": "3.4.13",
  "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development and add heaps more features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "postinstall": "node scripts/copy-pdfjs-assets.mjs",
    "autoaudit": "npm audit && npm audit fix && npm run build",
    "dev": "cross-env MODE=chrome vite dev",
    "dev:firefox": "cross-env MODE=firefox vite build --watch",
    "compile": "npm i && npm run build",
    "build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build",
    "build:chrome": "cross-env MODE=chrome vite build",
    "build:firefox": "cross-env MODE=firefox vite build",
@@ -17,8 +14,7 @@
    "build:dev": "cross-env MODE=chrome SOURCEMAP=true vite build && cross-env MODE=firefox SOURCEMAP=true vite build",
    "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
-    "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint \"src/**/*.{js,ts}\"",
+    "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
    "release": "gh release create $npm_package_version --repo BetterSEQTA/BetterSEQTA-Plus ./dist/*.zip --generate-notes",
    "publish": "bun lib/publish.js --b",
    "zip": "bedframe zip"
  },
@@ -33,30 +29,25 @@
  "author": {
    "name": "SethBurkart123",
    "email": "betterseqta.plus@gmail.com",
-    "url": "https://github.com/BetterSEQTA/BetterSEQTA-Plus"
+    "url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.26.9",
    "@babel/runtime": "^7.26.9",
-    "@bedframe/cli": "^0.1.2",
+    "@bedframe/cli": "^0.0.95",
-    "@crxjs/vite-plugin": "^2.4.0",
+    "@crxjs/vite-plugin": "^2.2.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",
    "@typescript-eslint/eslint-plugin": "^8.60.1",
    "@typescript-eslint/parser": "^8.60.1",
    "cross-env": "^10.0.0",
    "dependency-cruiser": "^17.0.1",
    "eslint": "^9.33.0",
    "eslint-plugin-import": "^2.31.0",
    "glob": "^11.0.1",
    "mime-types": "^3.0.1",
    "prettier": "^3.5.3",
    "process": "^0.11.10",
-    "publish-browser-extension": "^4.0.4",
+    "publish-browser-extension": "^3.0.1",
    "sass": "^1.85.1",
    "sass-loader": "^16.0.5",
    "semver": "^7.7.1",
@@ -64,7 +55,7 @@
    "url": "^0.11.4"
  },
  "dependencies": {
-    "@bedframe/core": "^0.1.0",
+    "@bedframe/core": "^0.0.46",
    "@codemirror/autocomplete": "^6.18.6",
    "@codemirror/commands": "^6.8.0",
    "@codemirror/lang-css": "^6.3.1",
@@ -72,14 +63,13 @@
    "@codemirror/search": "^6.5.10",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.36.4",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tailwindcss/forms": "^0.5.10",
    "@tsconfig/svelte": "^5.0.4",
    "@types/chrome": "^0.1.4",
    "@types/color": "^4.2.0",
    "@types/lodash": "^4.17.16",
    "@types/node": "^24.3.0",
    "@types/qrcode": "^1.5.6",
    "@types/sortablejs": "^1.15.8",
    "@types/uuid": "^10.0.0",
    "@types/webextension-polyfill": "^0.12.3",
@@ -89,10 +79,8 @@
    "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.3.0",
+    "embeddia": "^1.2.1",
    "embla-carousel-autoplay": "^8.5.2",
    "embla-carousel-svelte": "^8.5.2",
    "esbuild": "^0.25.3",
@@ -100,24 +88,21 @@
    "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",
    "million": "^3.1.11",
    "motion": "^12.4.12",
    "pdfjs-dist": "^5.4.530",
    "postcss": "^8.5.3",
    "qrcode": "^1.5.4",
    "react": "17",
    "react-best-gradient-color-picker": "3.0.11",
    "react-dom": "17",
    "rss-parser": "^3.13.0",
    "sortablejs": "^1.15.6",
-    "svelte": "^5.46.4",
+    "svelte": "^5.22.6",
    "typescript": "^5.8.2",
    "uuid": "^11.1.0",
-    "vite": "^8.0.5",
+    "vite": "^6.2.1",
    "webextension-polyfill": "^0.12.0"
  }
 }
@@ -1,17 +0,0 @@
 import { copyFileSync, mkdirSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const pdfjsRoot = join(root, "node_modules", "pdfjs-dist");
 const outDir = join(root, "src", "public", "resources", "pdfjs");
 mkdirSync(outDir, { recursive: true });
 copyFileSync(
  join(pdfjsRoot, "build", "pdf.worker.min.mjs"),
  join(outDir, "pdf.worker.min.mjs"),
 );
 copyFileSync(
  join(pdfjsRoot, "legacy", "build", "pdf.min.mjs"),
  join(outDir, "pdf.legacy.min.mjs"),
 );
@@ -11,30 +11,6 @@ import { main } from "@/seqta/main";
 import { delay } from "./seqta/utils/delay";
 import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
 function registerFetchSeqtaAppLinkListener() {
  browser.runtime.onMessage.addListener((request, _sender, sendResponse) => {
    if (request?.type !== "fetchSeqtaAppLink") return false;
    void (async () => {
      try {
        const res = await fetch(`${location.origin}/seqta/student/load/profile`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
          body: JSON.stringify({}),
        });
        const data = await res.json();
        const statusOk = data?.status === "200" || data?.status === 200;
        const raw = data?.payload?.app_link;
        const appLink = typeof raw === "string" && raw.length > 0 ? raw : null;
        sendResponse({ appLink: statusOk ? appLink : null });
      } catch {
        sendResponse({ appLink: null });
      }
    })();
    return true;
  });
 }
 export let MenuOptionsOpen = false;
 var IsSEQTAPage = false;
@@ -49,50 +25,35 @@ if (document.childNodes[1]) {
  init();
 }
 /**
 * Initializes BetterSEQTA+ on a SEQTA page.
 *
 * This function performs the following steps:
 * 1. Verifies that the current page is a SEQTA page.
 * 2. Injects CSS styles for document loading.
 * 3. Changes the page's favicon.
 * 4. Initializes the extension's settings state.
 * 5. Sets default storage if settings are not already defined.
 * 6. Calls the main function to apply core BetterSEQTA+ modifications.
 * 7. Initializes legacy and new plugins if the extension is enabled.
 * 8. Logs success or error messages during initialization.
 */
 async function init() {
-  if (
+  const hasSEQTATitle = document.title.includes("SEQTA Learn");
-    hasSEQTAText &&
+
-    (document.title.includes("SEQTA Learn") ||
+  if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
-      document.title.includes("SEQTA Engage")) &&
+    // Verify we are on a SEQTA page
    !IsSEQTAPage
  ) {
    IsSEQTAPage = true;
    console.info("[BetterSEQTA+] Verified SEQTA Page");
    if (typeof window !== "undefined" && window === window.top) {
      void browser.runtime.sendMessage({ type: "cloudSettingsPoll" }).catch(() => {});
    }
    registerFetchSeqtaAppLinkListener();
    const documentLoadStyle = document.createElement("style");
    documentLoadStyle.textContent = documentLoadCSS;
    document.head.appendChild(documentLoadStyle);
-    replaceIcons();
+    const icon = document.querySelector(
-
+      'link[rel*="icon"]',
-    const observer = new MutationObserver((mutations) => {
+    )! as HTMLLinkElement;
-      for (const mutation of mutations) {
+    icon.href = icon48; // Change the icon
        if (
          mutation.type === "attributes" &&
          mutation.target instanceof HTMLLinkElement &&
          mutation.target.rel.includes("icon") &&
          mutation.attributeName === "href"
        ) {
          replaceIcons();
          return;
        }
      }
    });
    observer.observe(document.head, {
      subtree: true,
      attributes: true,
      attributeFilter: ["href"],
    });
    try {
      await initializeSettingsState();
@@ -117,18 +78,8 @@ async function init() {
      console.info(
        "[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
      );
-    } catch (error) {
+    } catch (error: any) {
      console.error(error);
    }
  }
 }
 function replaceIcons() {
  document
    .querySelectorAll<HTMLLinkElement>('link[rel*="icon"]')
    .forEach((link) => {
      if (link.href !== icon48) {
        link.href = icon48;
      }
    });
 }
@@ -1,38 +1,12 @@
 import browser from "webextension-polyfill";
 import semver from "semver";
 import type { SettingsState } from "@/types/storage";
 import { fetchNews } from "./background/news";
 import {
  initCloudSettingsAutoSync,
  performCloudSettingsDownloadWithRetry,
  performCloudSettingsUploadWithRetry,
  requestCloudSettingsDebouncedUpload,
  runCloudSettingsPoll,
 } from "./background/cloudSettingsAutoSync";
 /**
 * Session-only dev-mode override of the content API base.
 *
 * Stored in a module-level variable (not `chrome.storage`) so it is wiped
 * automatically when the browser/service-worker process restarts. Content
 * scripts re-sync this on every page load via `setDevApiBase` so the value
 * survives transient service-worker terminations within the same browser
 * session.
 */
 const DEFAULT_API_BASE = "https://betterseqta.org";
 let DEV_API_BASE: string | null = null;
 function apiBase(): string {
  return DEV_API_BASE ?? DEFAULT_API_BASE;
 }
 function reloadSeqtaPages() {
  const result = browser.tabs.query({});
  function open(tabs: any) {
    for (let tab of tabs) {
-      if (
+      if (tab.title.includes("SEQTA Learn")) {
        tab.title?.includes("SEQTA Learn") ||
        tab.title?.includes("SEQTA Engage")
      ) {
        browser.tabs.reload(tab.id);
      }
    }
@@ -40,439 +14,52 @@ function reloadSeqtaPages() {
  result.then(open, console.error);
 }
-/** Callback for sending a response back to the message sender */
+// @ts-ignore
 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()}`;
  const githubUrl = `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${Date.now()}`;
  const headers: Record<string, string> = {};
  if (token) headers["Authorization"] = `Bearer ${token}`;
  fetch(apiUrl, { cache: "no-store", headers })
    .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(async (r) => {
          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 });
        });
    });
  return true;
 }
 function handleFetchThemeDetails(request: any, sendResponse: MessageSender): boolean {
  const { themeId, token } = request;
  if (!themeId || typeof themeId !== "string") {
    sendResponse({ success: false, error: "Missing themeId" });
    return false;
  }
  const headers: Record<string, string> = {};
  if (token) headers["Authorization"] = `Bearer ${token}`;
  fetch(`${apiBase()}/api/themes/${themeId}`, { cache: "no-store", headers })
    .then((r) => r.json())
    .then(sendResponse)
    .catch((err) => {
      console.error("[Background] fetchThemeDetails error:", err);
      sendResponse({ success: false, error: err?.message });
    });
  return true;
 }
 function handleFetchFromUrl(request: any, sendResponse: MessageSender): boolean {
  const { url } = request;
  if (!url || typeof url !== "string") {
    sendResponse({ error: "Missing url" });
    return false;
  }
  fetch(url, { cache: "no-store" })
    .then((r) => r.json())
    .then((data) => sendResponse({ data }))
    .catch((err) => {
      console.error("[Background] fetchFromUrl error:", err);
      sendResponse({ error: err?.message });
    });
  return true;
 }
 async function parseJsonResponse(r: Response): Promise<any> {
  const text = await r.text();
  try {
    return text ? JSON.parse(text) : {};
  } catch {
    return {};
  }
 }
 function handleCloudReserveClient(request: any, sendResponse: MessageSender): boolean {
  const redirect_uri = request.redirect_uri ?? "https://accounts.betterseqta.org/auth/bsplus/callback";
  fetch("https://accounts.betterseqta.org/api/bsplus/client/reserve", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ redirect_uri }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? `Reserve failed (${r.status})` });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudReserveClient error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudLogin(request: any, sendResponse: MessageSender): boolean {
  const { client_id, redirect_uri, login, password } = request;
  if (!client_id || !redirect_uri || !login || !password) {
    sendResponse({ error: "Missing client_id, redirect_uri, login, or password" });
    return false;
  }
  fetch("https://accounts.betterseqta.org/api/bsplus/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ client_id, redirect_uri, login, password }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? "Login failed" });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudLogin error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudStartLogin(request: any, sendResponse: MessageSender): boolean {
  const { client_id, redirect_uri } = request;
  if (!client_id || !redirect_uri) {
    sendResponse({ error: "Missing client_id or redirect_uri" });
    return true;
  }
  const authorizeUrl = `https://accounts.betterseqta.org/login?redirect=${encodeURIComponent(`/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}`)}`;
  browser.tabs.create({ url: authorizeUrl }).then(() => {
    sendResponse({ success: true });
  }).catch((err) => {
    console.error("[Background] cloudStartLogin error:", err);
    sendResponse({ error: err?.message ?? "Failed to open login page" });
  });
  return true;
 }
 const CALLBACK_URL_PREFIX = "https://accounts.betterseqta.org/auth/bsplus/callback";
 function initCloudLoginCallbackListener() {
  browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url && changeInfo.url.startsWith(CALLBACK_URL_PREFIX)) {
      try {
        const url = new URL(changeInfo.url);
        const token = url.searchParams.get("token");
        const refreshToken = url.searchParams.get("refresh_token");
        const userId = url.searchParams.get("user_id");
        if (token && refreshToken) {
          // Store tokens
          void (async () => {
            try {
              await browser.storage.local.set({
                bsplus_token: token,
                bsplus_refresh_token: refreshToken,
              });
              // Fetch full user info
              const userRes = await fetch("https://accounts.betterseqta.org/api/auth/me", {
                headers: { Authorization: `Bearer ${token}` },
              });
              if (userRes.ok) {
                const user = await userRes.json();
                await browser.storage.local.set({ bsplus_user: user });
              } else if (userId) {
                await browser.storage.local.set({ bsplus_user: { id: userId } });
              }
              // Trigger cloud settings download
              void performCloudSettingsDownloadWithRetry(token).catch((err) => {
                console.warn("[Background] Cloud settings download after login:", err);
              });
            } catch (err) {
              console.error("[Background] Failed to process login callback:", err);
            }
          })();
          // Close the callback tab
          void browser.tabs.remove(tabId);
        }
      } catch (err) {
        console.error("[Background] Error parsing callback URL:", err);
      }
    }
  });
 }
 initCloudLoginCallbackListener();
 function handleCloudRefresh(request: any, sendResponse: MessageSender): boolean {
  const { refresh_token, client_id } = request;
  if (!refresh_token || !client_id) {
    sendResponse({ error: "Missing refresh_token or client_id" });
    return false;
  }
  fetch("https://accounts.betterseqta.org/api/bsplus/refresh", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ refresh_token, client_id }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? "Refresh failed" });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudRefresh error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudSettingsUpload(request: any, sendResponse: MessageSender): boolean {
  void (async () => {
    try {
      const token = request.token as string | undefined;
      if (!token) {
        sendResponse({ success: false, error: "Not authenticated" });
        return;
      }
      const res = await performCloudSettingsUploadWithRetry(token);
      sendResponse({
        success: res.success,
        error: res.error,
        updated_at: res.updated_at,
      });
    } catch (err) {
      console.error("[Background] cloudSettingsUpload error:", err);
      sendResponse({
        success: false,
        error: err instanceof Error ? err.message : "Upload failed",
      });
    }
  })();
  return true;
 }
 function handleCloudSettingsDownload(request: any, sendResponse: MessageSender): boolean {
  void (async () => {
    try {
      const token = request.token as string | undefined;
      if (!token) {
        sendResponse({ success: false, error: "Not authenticated" });
        return;
      }
      const res = await performCloudSettingsDownloadWithRetry(token);
      sendResponse({
        success: res.success,
        notFound: res.notFound,
        error: res.error,
        updated_at: res.updated_at,
      });
    } catch (err) {
      console.error("[Background] cloudSettingsDownload error:", err);
      sendResponse({
        success: false,
        error: err instanceof Error ? err.message : "Download failed",
      });
    }
  })();
  return true;
 }
 function handleCloudFavorite(request: any, sendResponse: MessageSender): boolean {
  const { themeId, token, action } = request;
  if (!themeId || !token) {
    sendResponse({ success: false, error: "Theme ID and token required" });
    return false;
  }
  const isFavorite = action === "favorite";
  fetch(`${apiBase()}/api/themes/${themeId}/favorite`, {
    method: isFavorite ? "POST" : "DELETE",
    headers: { Authorization: `Bearer ${token}` },
  })
    .then((r) => r.json())
    .then(sendResponse)
    .catch((err) => {
      console.error("[Background] cloudFavorite error:", err);
      sendResponse({ success: false, error: err?.message });
    });
  return true;
 }
 /** Handler for a message type; receives request, sendResponse, and optional sender (for tab routing) */
 type MessageHandler = {
  (request: any, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender): boolean | void;
 };
 function isSeqtaOrigin(origin: string): boolean {
  try {
    const u = new URL(origin);
    return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
  } catch {
    return false;
  }
 }
 function handleSetDevApiBase(request: any): boolean {
  const url = typeof request?.url === "string" ? request.url.trim() : null;
  if (url && /^https?:\/\//.test(url)) {
    DEV_API_BASE = url.replace(/\/$/, "");
  } else {
    DEV_API_BASE = null;
  }
  return false;
 }
 const MESSAGE_HANDLERS: Record<string, MessageHandler> = {
  reloadTabs: () => reloadSeqtaPages(),
  setDevApiBase: handleSetDevApiBase,
  extensionPages: (req) => {
    browser.tabs.query({}).then((tabs) => {
      for (const tab of tabs) {
        if (tab.url?.includes("chrome-extension://")) browser.tabs.sendMessage(tab.id!, req);
      }
    });
  },
  currentTab: (req, sendResponse) => {
    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
      browser.tabs.sendMessage(tabs[0].id!, req).then(sendResponse);
    });
    return true;
  },
  githubTab: () => {
    void browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
  },
  setDefaultStorage: () => SetStorageValue(getDefaultValues()),
  sendNews: (req, sendResponse) => {
    fetchNews(req.source ?? "australia", sendResponse);
    return true;
  },
  fetchThemes: handleFetchThemes,
  fetchThemeDetails: handleFetchThemeDetails,
  fetchFromUrl: handleFetchFromUrl,
  cloudReserveClient: handleCloudReserveClient,
  cloudLogin: handleCloudLogin,
  cloudStartLogin: handleCloudStartLogin,
  cloudRefresh: handleCloudRefresh,
  cloudFavorite: handleCloudFavorite,
  cloudSettingsUpload: handleCloudSettingsUpload,
  cloudSettingsDownload: handleCloudSettingsDownload,
  cloudSettingsPoll: () => {
    void runCloudSettingsPoll();
    return false;
  },
  cloudSettingsRequestDebouncedUpload: () => {
    requestCloudSettingsDebouncedUpload();
    return false;
  },
  getSeqtaSession: (req: { baseUrl?: string }, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender) => {
    (async () => {
      try {
        let tabId = sender?.tab?.id;
        let originForCheck: string | undefined = req.baseUrl;
        if (tabId == null) {
          const tabs = await browser.tabs.query({ active: true, lastFocusedWindow: true });
          const tab = tabs[0];
          if (!tab?.id || !tab.url) {
            sendResponse({ appLink: null });
            return;
          }
          tabId = tab.id;
          if (!originForCheck) originForCheck = new URL(tab.url).origin;
        } else if (!originForCheck && sender?.tab?.url) {
          originForCheck = new URL(sender.tab.url).origin;
        }
        if (!originForCheck || !isSeqtaOrigin(originForCheck)) {
          sendResponse({ appLink: null });
          return;
        }
        const reply = (await browser.tabs.sendMessage(tabId, { type: "fetchSeqtaAppLink" })) as
          | { appLink?: string | null }
          | undefined;
        const appLink = typeof reply?.appLink === "string" && reply.appLink.length > 0 ? reply.appLink : null;
        sendResponse({ appLink });
      } catch (err) {
        console.error("[Background] getSeqtaSession error:", err);
        sendResponse({ appLink: null });
      }
    })();
    return true;
  },
 };
 browser.runtime.onMessage.addListener(
-  // @ts-ignore - OnMessageListener expects literal true for async, we return boolean
+  (request: any, _: any, sendResponse: (response?: any) => void) => {
-  (request: any, sender: browser.Runtime.MessageSender, sendResponse: MessageSender) => {
+    switch (request.type) {
-    const handler = MESSAGE_HANDLERS[request.type];
+      case "reloadTabs":
-    if (handler) {
+        reloadSeqtaPages();
-      const result = handler(request, sendResponse, sender);
+        break;
-      return result === true;
+
      case "extensionPages":
        browser.tabs.query({}).then(function (tabs) {
          for (let tab of tabs) {
            if (tab.url?.includes("chrome-extension://")) {
              browser.tabs.sendMessage(tab.id!, request);
            }
          }
        });
        break;
      case "currentTab":
        browser.tabs
          .query({ active: true, currentWindow: true })
          .then(function (tabs) {
            browser.tabs
              .sendMessage(tabs[0].id!, request)
              .then(function (response) {
                sendResponse(response);
              });
          });
        return true;
      case "githubTab":
        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
        break;
      case "setDefaultStorage":
        SetStorageValue(getDefaultValues());
        break;
      case "sendNews":
        fetchNews(request.source ?? "australia", sendResponse);
        return true;
      default:
        console.log("Unknown request type");
    }
-    console.log("Unknown request type");
+
    return false;
  },
 );
@@ -540,12 +127,6 @@ function getDefaultValues(): SettingsState {
    customshortcuts: [],
    lettergrade: false,
    newsSource: "australia",
    iconOnlySidebar: false,
    adaptiveThemeColour: false,
    adaptiveThemeGradient: false,
    adaptiveThemeColourTransition: true,
    themeOfTheMonthDisabled: false,
    autoCloudSettingsSync: true,
  };
 }
@@ -555,120 +136,6 @@ 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"]);
@@ -676,12 +143,4 @@ 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 });
@@ -1,420 +0,0 @@
 import browser from "webextension-polyfill";
 import {
  applyDownloadedEnvelope,
  buildUploadPayload,
  BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY,
  BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY,
  CLOUD_SETTINGS_SYNC_SCHEMA_VERSION,
  isKeyIncludedInCloudUploadPayload,
  resolveThemeIdForPostSyncDownload,
  setKnownRemoteUpdatedAt,
 } from "@/seqta/utils/cloudSettingsSync";
 const ACCOUNTS_BASE = "https://accounts.betterseqta.org";
 export const CLOUD_SUMMARY_URL = `${ACCOUNTS_BASE}/api/user/cloud-summary`;
 const CLOUD_SETTINGS_SYNC_URL = `${ACCOUNTS_BASE}/api/bsplus/settings/sync`;
 const REFRESH_URL = `${ACCOUNTS_BASE}/api/bsplus/refresh`;
 const UPLOAD_DEBOUNCE_MS = 2000;
 const POLL_THROTTLE_MS = 24 * 60 * 60 * 1000;
 const POLL_THROTTLE_KEY = "bsplus_lastCloudPoll";
 type CloudSummaryResponse = {
  desqta?: unknown;
  bsplus?: { updated_at: string; schemaVersion: number } | null;
 };
 let reloadSeqtaPagesFn: (() => void) | null = null;
 let suppressAutoUploadDuringRestore = false;
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let pollInFlight: Promise<void> | null = null;
 function isAutoCloudSyncEnabled(all: Record<string, unknown>): boolean {
  return all.autoCloudSettingsSync !== false;
 }
 async function parseJsonResponse(r: Response): Promise<any> {
  const text = await r.text();
  try {
    return text ? JSON.parse(text) : {};
  } catch {
    return {};
  }
 }
 async function getAccessToken(): Promise<string | null> {
  const { bsplus_token } = await browser.storage.local.get("bsplus_token");
  return typeof bsplus_token === "string" && bsplus_token.length > 0 ? bsplus_token : null;
 }
 async function tryRefreshTokens(): Promise<boolean> {
  const result = await browser.storage.local.get([
    "bsplus_refresh_token",
    "bsplus_client_id",
    "bsplus_user",
  ]);
  const refresh_token = result.bsplus_refresh_token as string | undefined;
  const client_id = result.bsplus_client_id as string | undefined;
  if (!refresh_token || !client_id) return false;
  try {
    const r = await fetch(REFRESH_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refresh_token, client_id }),
    });
    const data = await parseJsonResponse(r);
    if (!r.ok || !data.access_token || !data.refresh_token) return false;
    await browser.storage.local.set({
      bsplus_token: data.access_token,
      bsplus_refresh_token: data.refresh_token,
      bsplus_user: data.user ?? result.bsplus_user,
    });
    return true;
  } catch {
    return false;
  }
 }
 function isServerTimestampNewer(serverIso: string, localIso: string | undefined): boolean {
  const a = Date.parse(serverIso);
  if (Number.isNaN(a)) return false;
  if (localIso === undefined || localIso === "") return true;
  const b = Date.parse(localIso);
  if (Number.isNaN(b)) return true;
  return a > b;
 }
 async function fetchCloudSummaryOnce(
  token: string,
 ): Promise<
  | { ok: true; data: CloudSummaryResponse }
  | { ok: false; unauthorized: boolean; error?: string }
 > {
  try {
    const r = await fetch(CLOUD_SUMMARY_URL, {
      headers: { Authorization: `Bearer ${token}` },
      cache: "no-store",
    });
    const data = (await parseJsonResponse(r)) as CloudSummaryResponse;
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: (data as { error?: string })?.error ?? `Summary failed (${r.status})`,
      };
    }
    return { ok: true, data };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Network error",
    };
  }
 }
 async function fetchCloudSummaryWithAuthRetry(
  token: string,
 ): Promise<CloudSummaryResponse | null> {
  let t = token;
  for (let attempt = 0; attempt < 2; attempt++) {
    const res = await fetchCloudSummaryOnce(t);
    if (res.ok) return res.data;
    if (res.unauthorized && attempt === 0) {
      const refreshed = await tryRefreshTokens();
      if (!refreshed) break;
      const next = await getAccessToken();
      if (!next) break;
      t = next;
      continue;
    }
    if (res.error) console.warn("[BS+ cloud sync] cloud-summary:", res.error);
    break;
  }
  return null;
 }
 type PutResult =
  | { ok: true; updated_at?: string }
  | { ok: false; unauthorized: boolean; error?: string };
 async function putSettingsOnce(token: string): Promise<PutResult> {
  try {
    const all = await browser.storage.local.get();
    const payload = buildUploadPayload(all as Record<string, unknown>);
    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    const data = await parseJsonResponse(r);
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: data?.error ?? `Upload failed (${r.status})`,
      };
    }
    const updated_at = data?.updated_at as string | undefined;
    await setKnownRemoteUpdatedAt(updated_at);
    return { ok: true, updated_at };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Upload failed",
    };
  }
 }
 export async function performCloudSettingsUploadWithRetry(
  token: string,
 ): Promise<{ success: boolean; error?: string; updated_at?: string }> {
  let t = token;
  for (let attempt = 0; attempt < 2; attempt++) {
    const res = await putSettingsOnce(t);
    if (res.ok) return { success: true, updated_at: res.updated_at };
    if (res.unauthorized && attempt === 0) {
      const refreshed = await tryRefreshTokens();
      if (!refreshed) return { success: false, error: "Not authenticated" };
      const next = await getAccessToken();
      if (!next) return { success: false, error: "Not authenticated" };
      t = next;
      continue;
    }
    return { success: false, error: res.error ?? "Upload failed" };
  }
  return { success: false, error: "Upload failed" };
 }
 type GetResult =
  | { ok: true; updated_at?: string }
  | { ok: false; notFound?: boolean; unauthorized: boolean; error?: string };
 async function getSettingsAndApplyOnce(token: string): Promise<GetResult> {
  try {
    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
      method: "GET",
      headers: { Authorization: `Bearer ${token}` },
      cache: "no-store",
    });
    const data = await parseJsonResponse(r);
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (r.status === 404) {
      return {
        ok: false,
        notFound: true,
        unauthorized: false,
        error: "No settings backup found in the cloud",
      };
    }
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: data?.error ?? `Download failed (${r.status})`,
      };
    }
    const themeIdToEnsure = resolveThemeIdForPostSyncDownload(data);
    await applyDownloadedEnvelope(data);
    if (themeIdToEnsure) {
      await browser.storage.local.set({
        [BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY]: themeIdToEnsure,
      });
    } else {
      await browser.storage.local.remove(BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY);
    }
    reloadSeqtaPagesFn?.();
    const updated_at = data?.updated_at as string | undefined;
    await setKnownRemoteUpdatedAt(updated_at);
    return { ok: true, updated_at };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Download failed",
    };
  }
 }
 export async function performCloudSettingsDownloadWithRetry(
  token: string,
 ): Promise<{ success: boolean; notFound?: boolean; error?: string; updated_at?: string }> {
  suppressAutoUploadDuringRestore = true;
  try {
    let t = token;
    for (let attempt = 0; attempt < 2; attempt++) {
      const res = await getSettingsAndApplyOnce(t);
      if (res.ok) return { success: true, updated_at: res.updated_at };
      if (res.unauthorized && attempt === 0) {
        const refreshed = await tryRefreshTokens();
        if (!refreshed) return { success: false, error: "Not authenticated" };
        const next = await getAccessToken();
        if (!next) return { success: false, error: "Not authenticated" };
        t = next;
        continue;
      }
      return {
        success: false,
        notFound: res.notFound,
        error: res.error ?? "Download failed",
      };
    }
    return { success: false, error: "Download failed" };
  } finally {
    suppressAutoUploadDuringRestore = false;
  }
 }
 async function maybeUploadBaseline(token: string): Promise<void> {
  const res = await performCloudSettingsUploadWithRetry(token);
  if (!res.success) {
    console.warn("[BS+ cloud sync] Baseline upload failed:", res.error);
  }
 }
 async function downloadIfNeeded(token: string): Promise<void> {
  const res = await performCloudSettingsDownloadWithRetry(token);
  if (!res.success && !res.notFound) {
    console.warn("[BS+ cloud sync] Auto-download failed:", res.error);
  }
 }
 async function runCloudSettingsPollInner(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) return;
  let token = await getAccessToken();
  if (!token) return;
  const summary = await fetchCloudSummaryWithAuthRetry(token);
  if (!summary) return;
  const bsplus = summary.bsplus;
  const watermark = all[BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY] as string | undefined;
  if (
    bsplus &&
    typeof bsplus.schemaVersion === "number" &&
    bsplus.schemaVersion > CLOUD_SETTINGS_SYNC_SCHEMA_VERSION
  ) {
    console.warn(
      "[BS+ cloud sync] Server schemaVersion newer than client; skip auto-download",
    );
    return;
  }
  token = (await getAccessToken()) ?? token;
  if (!watermark) {
    if (!bsplus?.updated_at) {
      await maybeUploadBaseline(token);
      return;
    }
    await downloadIfNeeded(token);
    return;
  }
  if (!bsplus?.updated_at) return;
  if (isServerTimestampNewer(bsplus.updated_at, watermark)) {
    await downloadIfNeeded(token);
  }
 }
 export function runCloudSettingsPoll(): Promise<void> {
  if (pollInFlight) return pollInFlight;
  pollInFlight = (async () => {
    try {
      const { [POLL_THROTTLE_KEY]: last } = await browser.storage.local.get(POLL_THROTTLE_KEY);
      if (Date.now() - (Number(last) || 0) < POLL_THROTTLE_MS) return;
      await browser.storage.local.set({ [POLL_THROTTLE_KEY]: Date.now() });
      await runCloudSettingsPollInner();
    } catch (e) {
      console.error("[BS+ cloud sync] Poll error:", e);
    } finally {
      pollInFlight = null;
    }
  })();
  return pollInFlight;
 }
 function clearUploadDebounce(): void {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = null;
  }
 }
 function scheduleDebouncedUpload(): void {
  if (suppressAutoUploadDuringRestore) return;
  clearUploadDebounce();
  debounceTimer = setTimeout(() => {
    debounceTimer = null;
    void runDebouncedUploadJob();
  }, UPLOAD_DEBOUNCE_MS);
 }
 /** Call after store theme install (and similar) so cloud upload runs even if storage events are flaky. */
 export function requestCloudSettingsDebouncedUpload(): void {
  void (async () => {
    const all = (await browser.storage.local.get()) as Record<string, unknown>;
    if (!isAutoCloudSyncEnabled(all)) return;
    if (suppressAutoUploadDuringRestore) return;
    if (!(await getAccessToken())) return;
    scheduleDebouncedUpload();
  })();
 }
 async function runDebouncedUploadJob(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) return;
  const token = await getAccessToken();
  if (!token) return;
  const res = await performCloudSettingsUploadWithRetry(token);
  if (!res.success) {
    console.warn("[BS+ cloud sync] Auto-upload failed:", res.error);
  }
 }
 async function syncAutoUploadWithStorage(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) {
    clearUploadDebounce();
  }
 }
 function onStorageChanged(
  changes: Record<string, browser.storage.StorageChange>,
  area: string,
 ): void {
  if (area !== "local") return;
  if (Object.prototype.hasOwnProperty.call(changes, "autoCloudSettingsSync")) {
    void syncAutoUploadWithStorage();
  }
  const keys = Object.keys(changes);
  if (!keys.some((k) => isKeyIncludedInCloudUploadPayload(k))) return;
  void (async () => {
    const all = (await browser.storage.local.get()) as Record<string, unknown>;
    if (!isAutoCloudSyncEnabled(all)) return;
    if (suppressAutoUploadDuringRestore) return;
    if (!(await getAccessToken())) return;
    scheduleDebouncedUpload();
  })();
 }
 export function initCloudSettingsAutoSync(deps: { reloadSeqtaPages: () => void }): void {
  reloadSeqtaPagesFn = deps.reloadSeqtaPages;
  browser.storage.onChanged.addListener(onStorageChanged);
 }
@@ -92,12 +92,8 @@ const rssFeedsByCountry: Record<string, string[]> = {
 *                           used to send the fetched news data back to the caller.
 *                           It's called with an object like `{ news: { articles: [...] } }`.
 */
-export async function fetchNews(source: string | undefined, sendResponse: any) {
+export async function fetchNews(source: string, sendResponse: any) {
-  const normalizedSource = typeof source === "string" && source.trim()
+  if (source === "australia") {
    ? source.trim()
    : "australia";
  if (normalizedSource === "australia") {
    const date = new Date();
    const from =
@@ -115,15 +111,18 @@ export async function fetchNews(source: string | undefined, sendResponse: any) {
  const parser = new Parser();
  let feeds: string[];
-  console.log("fetchNews", normalizedSource);
+  console.log("fetchNews", source);
-  if (rssFeedsByCountry[normalizedSource.toLowerCase()]) {
+  if (rssFeedsByCountry[source.toLowerCase()]) {
-    feeds = rssFeedsByCountry[normalizedSource.toLowerCase()];
+    // If the source is a country, fetch from predefined feeds
-  } else if (normalizedSource.startsWith("http")) {
+    feeds = rssFeedsByCountry[source.toLowerCase()];
-    feeds = [normalizedSource];
+  } else if (source.startsWith("http")) {
    // If the source is a URL, use it directly
    feeds = [source];
  } else {
-    console.warn("[BetterSEQTA+] Invalid news source, falling back to Australia", normalizedSource);
+    throw new Error(
-    return fetchNews("australia", sendResponse);
+      "Invalid source. Provide a country code or a valid RSS feed URL.",
    );
  }
  const articlesPromises = feeds.map(async (feedUrl) => {
@@ -17,43 +17,10 @@
@use "injected/popup.scss";
@font-face {
  font-family: "Roboto";
  src: url("https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: "IconFamily";
  src: url("@/resources/fonts/IconFamily.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
 }
@layer base, override;
@layer override {
  .legacy-root,
  .legacy-root * {
    font-family: var(--betterseqta-font-family, Rubik), sans-serif !important;
  }
  .iconFamily,
  .iconFamily *,
  [class~="iconFamily"],
  [class~="iconFamily"] * {
    font-family: "IconFamily" !important;
  }
 }
 html {
  background: #161616 !important;
  background-color: #161616;
-  font-family: Roboto, system-ui, -apple-system, sans-serif !important;
+  font-family: Rubik, Roboto !important;
 }
 .tooltip svg {
@@ -116,6 +116,7 @@ body {
 }
 .cke_panel_listItem > a {
  &:hover {
    background: #3d3d3e !important;
  }
@@ -35,19 +35,9 @@
 }
 #menu .sub {
-  transition: transform 0.3s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.3s ease;
 }
 #menu > ul:has(li.hasChildren.active) > li.active {
  background: transparent !important;
 }
 /* Icon-only collapsed: submenu slides over narrow icons */
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
  transform: translateX(-70px);
 }
@@ -1,4 +0,0 @@
 declare const __ENABLE_GH_RELEASE_UPDATE_CHECK__: boolean;
 declare const __GH_RELEASE_REPO__: string;
 declare const __UPDATE_CHANNEL__: "stable" | "nightly";
 declare const __BUILD_LABEL__: string;
@@ -1,20 +1,7 @@
 <script lang="ts">
-  let {
+  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
    onClick,
    text,
    disabled = false,
  } = $props<{
    onClick: () => void;
    text: string;
    disabled?: boolean;
  }>();
 </script>
-<button
+<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
  type="button"
  onclick={onClick}
  disabled={disabled}
  class="px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:cursor-not-allowed disabled:opacity-50"
 >
  {text}
 </button>
@@ -1,157 +0,0 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { animate } from "motion";
  import { delay } from "@/seqta/utils/delay.ts";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  const { hidePanel } = $props<{
    hidePanel: () => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let background = $state<HTMLDivElement | null>(null);
  let content = $state<HTMLDivElement | null>(null);
  let loginError = $state<string | null>(null);
  onMount(() => {
    const unsub = cloudAuth.subscribe((s) => {
      cloudState = s;
    });
    if (background && content) {
      animate(
        background,
        { opacity: [0, 1] },
        { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
      );
      animate(
        content,
        { scale: [0.4, 1], opacity: [0, 1] },
        { type: "spring", stiffness: 400, damping: 30 }
      );
    }
    const handleEscapeKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closePanel();
    };
    document.addEventListener("keydown", handleEscapeKey);
    return () => {
      unsub();
      document.removeEventListener("keydown", handleEscapeKey);
    };
  });
  async function closePanel() {
    if (!background || !content) return;
    animate(
      content,
      { scale: [1, 0.4], opacity: [1, 0] },
      { type: "spring", stiffness: 400, damping: 30 }
    );
    animate(
      background,
      { opacity: [1, 0] },
      { ease: [0.4, 0, 0.2, 1] }
    );
    await delay(400);
    hidePanel();
  }
  function handleBackgroundClick(event: MouseEvent) {
    if (event.target === background) closePanel();
  }
  async function handleSignIn() {
    loginError = null;
    const result = await cloudAuth.startLogin();
    if (result.success) {
      closePanel();
    } else {
      loginError = result.error ?? "Failed to open login page";
    }
  }
  async function handleLogout() {
    await cloudAuth.logout();
  }
  function getInitials(): string {
    const u = cloudState.user;
    if (!u) return "?";
    if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
    if (u.username) return u.username.slice(0, 2).toUpperCase();
    if (u.email) return u.email.slice(0, 2).toUpperCase();
    return "?";
  }
 </script>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
  bind:this={background}
  class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full cursor-pointer bg-black/50"
  onclick={handleBackgroundClick}
  onkeydown={(e) => { if (e.key === "Enter") handleBackgroundClick; }}
 >
  <div
    bind:this={content}
    class="p-5 w-[320px] bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
  >
    <h3 class="text-lg font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
    <p class="mt-0.5 text-sm text-zinc-500 dark:text-zinc-400">Account & sync</p>
    <div class="mt-4">
      {#if cloudState.isLoggedIn}
        <div class="flex flex-col gap-4">
          <div class="flex items-center gap-3">
            {#if cloudState.user?.pfpUrl}
              <img
                src={cloudState.user.pfpUrl}
                alt=""
                class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
              />
            {:else}
              <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                {getInitials()}
              </div>
            {/if}
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-zinc-900 dark:text-white truncate">
                {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
              </p>
              {#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
                <p class="text-xs text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
              {/if}
            </div>
          </div>
          <button
            type="button"
            onclick={handleLogout}
            class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
          >
            Sign out
          </button>
        </div>
      {:else}
        <div class="flex flex-col gap-3">
          <p class="text-sm text-zinc-600 dark:text-zinc-400">
            Sign in to sync settings across devices, use your cloud profile picture, and more.
          </p>
          <button
            type="button"
            onclick={handleSignIn}
            class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
          >
            Sign in with BetterSEQTA Cloud
          </button>
          {#if loginError}
            <p class="text-xs text-red-600 dark:text-red-400">{loginError}</p>
          {/if}
          <p class="text-xs text-center text-zinc-400 dark:text-zinc-500">
            Opens accounts.betterseqta.org in a new tab
          </p>
        </div>
      {/if}
    </div>
  </div>
 </div>
@@ -1,120 +0,0 @@
 <script lang="ts">
  import browser from "webextension-polyfill";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
  import Button from "./Button.svelte";
  import Switch from "./Switch.svelte";
  let { showDisclaimer } = $props<{
    showDisclaimer: (onConfirm: () => void, onCancel: () => void) => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let busy = $state(false);
  let statusMessage = $state<string | null>(null);
  let statusError = $state<string | null>(null);
  $effect(() => {
    const unsub = cloudAuth.subscribe((s) => {
      cloudState = s;
    });
    return unsub;
  });
  async function upload() {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    busy = true;
    statusError = null;
    statusMessage = null;
    try {
      const res = (await browser.runtime.sendMessage({
        type: "cloudSettingsUpload",
        token,
      })) as { success?: boolean; error?: string };
      if (res?.success) {
        statusMessage = "Settings uploaded.";
      } else {
        statusError = res?.error ?? "Upload failed";
      }
    } catch (e) {
      statusError = e instanceof Error ? e.message : "Upload failed";
    } finally {
      busy = false;
    }
  }
  function promptDownload() {
    showDisclaimer(confirmDownload, () => {});
  }
  async function confirmDownload() {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    busy = true;
    statusError = null;
    statusMessage = null;
    try {
      const res = (await browser.runtime.sendMessage({
        type: "cloudSettingsDownload",
        token,
      })) as { success?: boolean; error?: string; notFound?: boolean };
      if (res?.success) {
        statusMessage = "Settings restored.";
      } else {
        statusError = res?.error ?? "Download failed";
      }
    } catch (e) {
      statusError = e instanceof Error ? e.message : "Download failed";
    } finally {
      busy = false;
    }
  }
 </script>
 {#if cloudState.isLoggedIn}
  <div class="flex flex-col gap-2.5">
    <div class="flex items-center justify-between gap-3">
      <div>
        <p class="text-[11px] font-semibold text-zinc-800 dark:text-zinc-100">Automatic sync</p>
        <p class="text-[10px] text-zinc-500 dark:text-zinc-400">Syncs settings when SEQTA loads and when you make changes</p>
      </div>
      <div class="shrink-0">
        <Switch
          state={$settingsState.autoCloudSettingsSync !== false}
          onChange={(isOn: boolean) => (settingsState.autoCloudSettingsSync = isOn)}
        />
      </div>
    </div>
    <div class="flex flex-wrap gap-2">
      <Button
        text={busy ? "Please wait\u2026" : "Upload"}
        onClick={upload}
        disabled={busy}
      />
      <Button
        text={busy ? "Please wait\u2026" : "Download"}
        onClick={promptDownload}
        disabled={busy}
      />
    </div>
    {#if statusMessage}
      <p class="text-[11px] text-emerald-600 dark:text-emerald-400">{statusMessage}</p>
    {/if}
    {#if statusError}
      <p class="text-[11px] text-red-600 dark:text-red-400">{statusError}</p>
    {/if}
    <p class="text-[10px] text-zinc-400 dark:text-zinc-500">
      Passwords and tokens are never synced.
      <a
        href="https://betterseqta.org/privacy"
        target="_blank"
        rel="noopener noreferrer"
        class="font-medium text-emerald-600 underline decoration-emerald-600/50 underline-offset-2 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 rounded-sm"
      >Privacy policy</a>
    </p>
  </div>
 {/if}
@@ -1,172 +0,0 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
  import browser from "webextension-polyfill";
  import QRCode from "qrcode";
  import { portal } from "../utils/portal";
  let showQrModal = $state(false);
  let qrDataUrl = $state<string | null>(null);
  let appLink = $state<string | null>(null);
  let errorMessage = $state<string | null>(null);
  let isLoading = $state(false);
  let isStandalone = $state(false);
  function isExtensionPage(): boolean {
    return (
      window.location.protocol === "chrome-extension:" ||
      window.location.protocol === "moz-extension:"
    );
  }
  function isSeqtaUrl(url: string): boolean {
    try {
      const u = new URL(url);
      return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
    } catch {
      return false;
    }
  }
  function normalizeBaseUrl(url: string): string {
    try {
      const u = new URL(url);
      return u.origin;
    } catch {
      return url;
    }
  }
  async function getAppLink(): Promise<string | null> {
    let baseUrl: string | undefined;
    if (isExtensionPage()) {
      baseUrl = undefined;
    } else {
      baseUrl = normalizeBaseUrl(window.location.href);
      if (!isSeqtaUrl(baseUrl)) return null;
    }
    const { appLink: link } = (await browser.runtime.sendMessage({
      type: "getSeqtaSession",
      baseUrl,
    })) as { appLink: string | null };
    return link ?? null;
  }
  async function generateQrCode() {
    errorMessage = null;
    qrDataUrl = null;
    isLoading = true;
    try {
      isStandalone = isExtensionPage();
      const link = await getAppLink();
      if (!link) {
        if (isStandalone) {
          errorMessage =
            "Open SEQTA Learn in a tab and log in, then open settings from that tab to generate a QR code.";
        } else {
          errorMessage = "Please log in to SEQTA Learn first.";
        }
        return;
      }
      const dataUrl = await QRCode.toDataURL(link, { width: 256, margin: 2 });
      appLink = link;
      qrDataUrl = dataUrl;
      showQrModal = true;
    } catch (err) {
      console.error("[ConnectMobileApp] Failed to generate QR:", err);
      errorMessage = "Failed to generate QR code. Please try again.";
    } finally {
      isLoading = false;
    }
  }
  function closeModal() {
    showQrModal = false;
    qrDataUrl = null;
    appLink = null;
    errorMessage = null;
  }
  function openAppLink() {
    if (appLink) window.location.href = appLink;
  }
  function downloadQrImage() {
    if (!qrDataUrl) return;
    const link = document.createElement("a");
    link.href = qrDataUrl;
    link.download = "desqta-login-qr.png";
    link.click();
  }
 </script>
 <div class="flex flex-col gap-1 items-end">
  <button
    type="button"
    onclick={generateQrCode}
    disabled={isLoading}
    class="px-5 py-1.5 text-[0.75rem] text-nowrap shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
    {isLoading ? "Generating..." : "Generate QR"}
  </button>
  {#if errorMessage}
    <p class="text-xs text-right text-amber-600 dark:text-amber-400">{errorMessage}</p>
  {/if}
 </div>
 {#if showQrModal && qrDataUrl}
  <div
    use:portal
    class="fixed cursor-auto inset-0 z-[10000] flex justify-center items-center bg-black/50 {isStandalone ? 'backdrop-blur-sm' : ''}"
    role="button"
    tabindex="-1"
    onclick={(e) => {
      if (e.target === e.currentTarget) closeModal();
    }}
    onkeydown={(e) => {
      if (e.key === "Escape") closeModal();
    }}
    transition:fade={{ duration: 150 }}>
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="p-6 mx-4 w-full max-w-sm bg-white rounded-2xl shadow-2xl dark:bg-zinc-800"
      onclick={(e) => e.stopPropagation()}
      onkeydown={(e) => e.stopPropagation()}>
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold text-zinc-900 dark:text-white">Scan with DesQTA</h2>
        <button
          type="button"
          onclick={closeModal}
          class="p-2 rounded-lg transition-colors text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-400 dark:hover:bg-zinc-700"
          aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex justify-center p-4 bg-white rounded-xl dark:bg-zinc-900">
        <img src={qrDataUrl} alt="SEQTA Learn app link QR code" class="w-64 h-64" />
      </div>
      <div class="flex flex-col gap-2 mt-4">
        <button
          type="button"
          onclick={openAppLink}
          class="px-4 py-2.5 w-full text-sm font-medium text-white bg-indigo-600 rounded-lg transition-colors dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
          Sign into DesQTA Desktop
        </button>
        <button
          type="button"
          onclick={downloadQrImage}
          class="px-4 py-2 w-full text-xs font-medium rounded-lg border transition-colors text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
          Download QR as image
        </button>
      </div>
      <p class="mt-2 text-sm text-center text-zinc-600 dark:text-zinc-400">
        Or scan this QR code with DesQTA on your phone.
      </p>
    </div>
  </div>
 {/if}
@@ -1,141 +0,0 @@
 <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>
@@ -8,12 +8,12 @@
  let select: HTMLSelectElement;
 </script>
-<div class="select-wrapper relative w-full overflow-hidden rounded-2xl border shadow-2xl">
+<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
  <select
    bind:this={select}
    value={state}
    onchange={() => onChange(select.value)}
-    class="select-input w-full appearance-none border-none bg-transparent px-4 py-2.5 pr-10 text-[0.875rem] font-medium transition-colors"
+    class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
  >
    {#each options as option}
      <option value={option.value}>
@@ -21,62 +21,20 @@
      </option>
    {/each}
  </select>
  <span class="select-icon pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" aria-hidden="true">
    <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"></path>
    </svg>
  </span>
 </div>
 <style>
-  .select-wrapper {
+  /* Make native dropdown list readable on Windows */
-    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
+  select option {
-    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 72%, transparent);
+    background-color: #ffffff;
-    border-radius: 18px;
+    color: #111827; /* zinc-900 */
-    color: var(--text-primary);
+  }
-    transition:
+  :global(.dark) select option {
-      background-color 180ms ease,
+    background-color: #1f2937; /* zinc-800 */
-      border-color 180ms ease,
+    color: #ffffff;
      box-shadow 180ms ease,
      transform 180ms ease;
  }
-  .select-wrapper:hover {
+  :global(.dark) div::after {
-    background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%);
+    color: rgba(255, 255, 255, 0.6);
    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 88%, transparent);
  }
  .select-wrapper:focus-within {
    background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%);
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-offset-bg, var(--background-secondary)) 78%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
  .select-input {
    color: var(--text-primary);
    outline: none;
    text-overflow: ellipsis;
  }
  .select-input:hover,
  .select-input:focus {
    background: transparent;
  }
  .select-input option {
    background: var(--background-primary);
    color: var(--text-primary);
  }
  .select-icon {
    color: color-mix(in srgb, var(--text-primary) 60%, transparent);
  }
  .select-input {
    color-scheme: light;
  }
  :global(.dark) .select-input {
    color-scheme: dark;
  }
 </style>
@@ -1,79 +0,0 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
  import { animate } from "motion";
  import { onMount } from "svelte";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  let { onClose } = $props<{ onClose: () => void }>();
  let modalElement: HTMLElement;
  onMount(() => {
    return cloudAuth.subscribe((s) => {
      if (s.isLoggedIn) onClose();
    });
  });
  $effect(() => {
    if (modalElement) {
      animate(
        modalElement,
        { scale: [0.9, 1], opacity: [0, 1] },
        { type: "spring", stiffness: 300, damping: 25 },
      );
    }
  });
  async function handleSignIn() {
    await cloudAuth.startLogin();
  }
 </script>
 <div
  class="flex fixed inset-0 z-[99999] justify-center items-center bg-black/50"
  onclick={(e) => {
    if (e.target === e.currentTarget) onClose();
  }}
  onkeydown={(e) => {
    if (e.key === "Escape") onClose();
  }}
  role="button"
  tabindex="-1"
  transition:fade={{ duration: 150 }}
 >
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    bind:this={modalElement}
    class="p-4 mx-4 w-full max-w-md max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
  >
    <h2 class="mb-3 text-xl font-bold text-zinc-900 dark:text-white">
      Sign in to favorite themes
    </h2>
    <p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
      Sign in to the Theme Store to save favorites across devices, or create an account to get started.
    </p>
    <button
      type="button"
      onclick={handleSignIn}
      class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
    >
      Sign in with BetterSEQTA Cloud
    </button>
    <p class="mt-2 text-xs text-center text-zinc-400 dark:text-zinc-500">
      Opens accounts.betterseqta.org in a new tab
    </p>
    <div class="flex justify-end mt-4">
      <button
        type="button"
        onclick={onClose}
        class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
      >
        Close
      </button>
    </div>
  </div>
 </div>
@@ -9,7 +9,7 @@
  let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
-<div class="relative w-full min-w-0">
+<div class="relative mx-auto w-full max-w-lg">
  <input
    type="range"
    min={min}
@@ -3,7 +3,8 @@
  import './TabbedContainer.css';
  import { onMount } from 'svelte';
-  let { tabs, activeTab = $bindable(0) } = $props<{ tabs: { title: string, Content: any, props?: any }[]; activeTab?: number }>();
+  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
  let activeTab = $state(0);
  let containerRef: HTMLElement | null = null;
  let tabWidth = $state(0);
@@ -1,311 +0,0 @@
 /* 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);
 }
@@ -1,161 +0,0 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  let { alwaysShowUserName = false, onClick = undefined } = $props<{
    alwaysShowUserName?: boolean;
    onClick?: () => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let open = $state(false);
  let dropdownEl: HTMLElement;
  onMount(() => {
    const unsubscribe = cloudAuth.subscribe((state) => {
      cloudState = state;
    });
    return unsubscribe;
  });
  function handleClickOutside(e: MouseEvent) {
    if (dropdownEl && !dropdownEl.contains(e.target as Node)) {
      open = false;
    }
  }
  $effect(() => {
    if (open) {
      const timer = setTimeout(() => {
        document.addEventListener("click", handleClickOutside);
      }, 0);
      return () => {
        clearTimeout(timer);
        document.removeEventListener("click", handleClickOutside);
      };
    }
  });
  async function handleLogout() {
    await cloudAuth.logout();
    open = false;
  }
  async function handleSignIn() {
    await cloudAuth.startLogin();
    open = false;
  }
  function handleButtonClick() {
    if (onClick) {
      onClick();
    } else {
      open = !open;
    }
  }
  function getInitials(): string {
    const u = cloudState.user;
    if (!u) return "?";
    if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
    if (u.username) return u.username.slice(0, 2).toUpperCase();
    if (u.email) return u.email.slice(0, 2).toUpperCase();
    return "?";
  }
 </script>
 <div class="relative flex items-center" bind:this={dropdownEl}>
  <button
    type="button"
    onclick={handleButtonClick}
    class="flex items-center gap-2 px-3 py-1.5 text-[0.75rem] rounded-lg shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white transition-colors duration-200"
  >
    {#if cloudState.isLoggedIn}
      {#if cloudState.user?.pfpUrl}
        <img
          src={cloudState.user.pfpUrl}
          alt=""
          class="w-5 h-5 rounded-full object-cover ring-1 ring-zinc-200 dark:ring-zinc-600"
        />
      {:else}
        <div class="flex items-center justify-center w-5 h-5 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-[0.6rem]">
          {getInitials()}
        </div>
      {/if}
      <span
        class={alwaysShowUserName
          ? "inline max-w-[10rem] truncate text-[0.75rem]"
          : "hidden max-w-24 truncate sm:inline text-[0.75rem]"}
      >
        {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
      </span>
    {:else}
      <span class="text-sm font-IconFamily" aria-hidden="true">{'\ued53'}</span>
      <span class="text-[0.75rem]">Sign in</span>
    {/if}
  </button>
  {#if !onClick && open}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="absolute right-0 top-full mt-2 w-80 rounded-xl border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 shadow-xl z-[100] overflow-hidden"
      onclick={(e) => e.stopPropagation()}
    >
      <div class="p-4 border-b border-zinc-200 dark:border-zinc-600">
        <h3 class="text-xl font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
        <p class="text-base text-zinc-500 dark:text-zinc-400">Sync favorites across devices</p>
      </div>
      <div class="p-4">
        {#if cloudState.isLoggedIn}
          <div class="flex flex-col gap-3">
            <div class="flex items-center gap-3">
              {#if cloudState.user?.pfpUrl}
                <img
                  src={cloudState.user.pfpUrl}
                  alt=""
                  class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
                />
              {:else}
                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                  {getInitials()}
                </div>
              {/if}
              <div class="min-w-0 flex-1">
                <p class="text-base font-medium text-zinc-900 dark:text-white truncate">
                  {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
                </p>
                {#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
                  <p class="text-base text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
                {/if}
              </div>
            </div>
            <button
              type="button"
              onclick={handleLogout}
              class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
            >
              Sign out
            </button>
          </div>
        {:else}
          <div class="flex flex-col gap-3">
            <p class="text-sm text-zinc-600 dark:text-zinc-400">
              Sign in to sync favorites across devices.
            </p>
            <button
              type="button"
              onclick={handleSignIn}
              class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
            >
              Sign in with BetterSEQTA Cloud
            </button>
            <p class="text-xs text-center text-zinc-400 dark:text-zinc-500">
              Opens accounts.betterseqta.org in a new tab
            </p>
          </div>
        {/if}
      </div>
    </div>
  {/if}
 </div>
@@ -1,111 +0,0 @@
 <script lang="ts">
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  let {
    introText,
    onSuccess,
    compact = false,
  } = $props<{
    introText?: string;
    onSuccess?: () => void;
    /** Smaller padding/text for overlays (e.g. SignInToFavoriteModal) */
    compact?: boolean;
  }>();
  let username = $state("");
  let password = $state("");
  let loading = $state(false);
  let error = $state<string | null>(null);
  const inputClass = $derived(
    compact
      ? "w-full px-4 py-2 text-sm rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200"
      : "w-full px-4 py-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200",
  );
  const btnClass = $derived(
    compact
      ? "w-full px-4 py-2 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200"
      : "w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200",
  );
  const linkClass = $derived(
    compact
      ? "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
      : "inline-flex items-center justify-center gap-2 px-4 py-3 text-base font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200",
  );
  async function handleLogin() {
    if (loading) return;
    error = null;
    if (!username.trim() || !password) {
      error = "Please enter username and password";
      return;
    }
    loading = true;
    try {
      const result = await cloudAuth.login(username.trim(), password);
      if (result.success) {
        password = "";
        onSuccess?.();
      } else {
        error = result.error ?? "Login failed";
      }
    } finally {
      loading = false;
    }
  }
 </script>
 {#if introText}
  <p
    class="mb-4 text-zinc-600 dark:text-zinc-400 {compact ? 'text-sm' : 'text-base'}"
  >
    {introText}
  </p>
 {/if}
 <form
  class="flex flex-col gap-3"
  autocomplete="off"
  onsubmit={(e) => {
    e.preventDefault();
    handleLogin();
  }}
 >
  <input
    type="text"
    name="betterseqta-cloud-username"
    autocomplete="off"
    placeholder="Email or username"
    bind:value={username}
    disabled={loading}
    readonly
    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
    class={inputClass}
  />
  <input
    type="password"
    name="betterseqta-cloud-password"
    autocomplete="new-password"
    placeholder="Password"
    bind:value={password}
    disabled={loading}
    readonly
    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
    class={inputClass}
  />
  {#if error}
    <p class="text-red-600 dark:text-red-400 {compact ? 'text-sm' : 'text-base'}">{error}</p>
  {/if}
  <button type="submit" disabled={loading} class={btnClass}>
    {loading ? "Signing in..." : "Sign in"}
  </button>
  <a
    href="https://accounts.betterseqta.org/register"
    target="_blank"
    rel="noopener noreferrer"
    class={linkClass}
  >
    Create account
  </a>
 </form>
@@ -1,27 +1,20 @@
 <script lang="ts">
  import { fade } from 'svelte/transition';
-  import type { ThemeCoverSlide } from '@/interface/types/Theme';
+  import type { Theme } from '@/interface/types/Theme';
  import emblaCarouselSvelte from 'embla-carousel-svelte';
  import Autoplay from 'embla-carousel-autoplay';
-  let { slides, setDisplayTheme } = $props<{
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void }>();
    slides: ThemeCoverSlide[];
    setDisplayTheme: (theme: import('@/interface/types/Theme').Theme) => void;
  }>();
  let emblaApi = $state();
-  const options = $derived({ loop: slides.length > 1 });
+  const options = { loop: true };
-  const plugins = $derived(
+  const plugins = [
-    slides.length > 1
+    Autoplay({
-      ? [
+      delay: 5000,
-          Autoplay({
+      stopOnInteraction: false,
-            delay: 5000,
+      stopOnMouseEnter: true
-            stopOnInteraction: false,
+    })
-            stopOnMouseEnter: true,
+  ];
          }),
        ]
      : [],
  );
  function onInit(event: CustomEvent) {
    emblaApi = event.detail;
@@ -33,77 +26,41 @@
  const slideNext = () => emblaApi?.scrollNext();
 </script>
-{#if slides.length > 0}
+{#if coverThemes.length > 0}
  <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
    <div 
-      class="w-full aspect-[5/1] max-h-[500px]"
+      class="w-full aspect-8/3" 
      use:emblaCarouselSvelte={{ options, plugins }} 
      onemblaInit={onInit}
    >
      <div class="flex">
-        {#each slides as slide (slide.imageUrl + slide.title + (slide.subtitle ?? ''))}
+        {#each coverThemes as theme}
          <div
            class="relative flex-[0_0_100%] cursor-pointer rounded-xl overflow-clip"
            role="button"
            tabindex="0"
-            onkeydown={(e) => {
+            onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
-              if (e.key === 'Enter') setDisplayTheme(slide.openTheme);
+            onclick={() => setDisplayTheme(theme)}
            }}
            onclick={() => setDisplayTheme(slide.openTheme)}
          >
-            <img src={slide.imageUrl} alt="" class="object-cover w-full h-full" />
+            <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
-            {#if slide.badgeFeatured === true}
+            <div class='absolute bottom-0 left-0 p-8 z-[1]'>
-              <div class="absolute top-4 left-4 z-[2] pointer-events-none">
+              <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
-                <span
+              <p class='text-lg text-white'>{theme.description}</p>
                  class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
                  aria-label="Featured theme"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  Featured
                </span>
              </div>
            {/if}
            <div class="absolute bottom-0 left-0 p-8 z-[1]">
              <h2 class="text-4xl font-bold text-white">{slide.title}</h2>
              {#if slide.subtitle}
                <p class="text-lg font-medium text-white/95 mt-1 line-clamp-2">{slide.subtitle}</p>
              {/if}
              {#if slide.openTheme.author && !slide.subtitle}
                <p class="text-sm text-white/90 mt-1 mb-1 line-clamp-1">By {slide.openTheme.author}</p>
              {/if}
              {#if slide.openTheme.description && !slide.subtitle}
                <p class="text-lg text-white line-clamp-3">{slide.openTheme.description}</p>
              {/if}
            </div>
-            <div class="absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80"></div>
+            <div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>
          </div>
        {/each}
      </div>
    </div>
-    <div class="flex absolute right-2 bottom-2 z-10 gap-2">
+    <!-- Navigation buttons -->
-      <button
+    <div class='flex absolute right-2 bottom-2 z-10 gap-2'>
-        aria-label="Previous"
+      <button aria-label="Previous" onclick={slidePrev} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
        onclick={slidePrev}
        type="button"
        class="flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800 transition-all duration-200"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
        </svg>
      </button>
-      <button
+      <button aria-label="Next" onclick={slideNext} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
        aria-label="Next"
        onclick={slideNext}
        type="button"
        class="flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800 transition-all duration-200"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
@@ -3,7 +3,6 @@
  import logoDark from '@/resources/icons/betterseqta-light-full.png';
  import { closeStore } from '@/seqta/ui/renderStore'
  import browser from 'webextension-polyfill';
  import CloudHeader from './CloudHeader.svelte';
  // Props
  let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
@@ -40,8 +39,6 @@
      >
        Backgrounds
      </button>
      <CloudHeader />
    </div>
    <div class="flex relative gap-2">
@@ -1,201 +1,19 @@
 <script lang="ts">
  import type { Theme } from '@/interface/types/Theme'
-  import {
+
-    masterGridDisplayDownloadCount,
+  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
-    gridCardPreviewImageUrls,
+
  } from '@/interface/utils/themeStoreFlavours'
  import { fade } from 'svelte/transition';
  import { onMount } from 'svelte';
  import emblaCarouselSvelte from 'embla-carousel-svelte';
  import Autoplay from 'embla-carousel-autoplay';
  let { theme, onClick, toggleFavorite, isLoggedIn, onRequestSignIn, allStoreThemeRows } = $props<{
    theme: Theme;
    onClick: () => void;
    toggleFavorite: (theme: Theme) => void;
    isLoggedIn: boolean;
    onRequestSignIn?: () => void;
    /** Raw API themes (includes hidden slaves) for aggregated master download totals */
    allStoreThemeRows?: Theme[];
  }>();
  const displayDownloadCount = $derived(
    allStoreThemeRows != null
      ? masterGridDisplayDownloadCount(theme, allStoreThemeRows)
      : (theme.download_count ?? 0),
  );
  const gridRotatorUrls = $derived(gridCardPreviewImageUrls(theme, allStoreThemeRows));
  /** Mirrors CoverSwiper (featured bar): horizontal slides + autoplay */
  function prefersReducedMotion(): boolean {
    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }
  /** Read once synchronously where `window` exists so reduced-motion doesn’t briefly mount carousel */
  let allowSlideAutoplay = $state(!prefersReducedMotion());
  const gridEmblaKey = $derived(gridRotatorUrls.join('|'));
  const gridEmblaOptions = $derived({ loop: gridRotatorUrls.length > 1 });
  const gridEmblaPlugins = $derived.by(() => {
    if (!allowSlideAutoplay || gridRotatorUrls.length <= 1) return [];
    return [
      Autoplay({
        delay: 2000,
        stopOnInteraction: false,
        stopOnMouseEnter: true,
      }),
    ];
  });
  let menuOpen = $state(false);
  let menuRef: HTMLDivElement;
  onMount(() => {
    const closeMenu = (e: MouseEvent) => {
      if (menuOpen && menuRef && !menuRef.contains(e.target as Node)) {
        menuOpen = false;
      }
    };
    document.addEventListener('click', closeMenu);
    return () => document.removeEventListener('click', closeMenu);
  });
  function handleCardClick(e: MouseEvent) {
    if ((e.target as HTMLElement).closest('[data-theme-menu]')) return;
    onClick();
  }
  function handleFavoriteClick(e: MouseEvent) {
    e.stopPropagation();
    if (isLoggedIn) {
      toggleFavorite(theme);
    } else {
      onRequestSignIn?.();
    }
    menuOpen = false;
  }
 </script>
-<div
+<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
-  class="relative z-0 hover:z-20 w-full cursor-pointer"
+  <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
-  role="button"
+    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
-  tabindex="-1"
+      {theme.name}
  onkeydown={onClick}
  onclick={handleCardClick}
 >
  <div
    class="bg-gray-50 w-full transition-all duration-500 ease-out relative group flex flex-col rounded-xl overflow-clip border hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] dark:hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto"
    transition:fade
  >
    {#if theme.featured === true}
      <div class="absolute top-2 left-2 z-20 pointer-events-none">
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
          aria-label="Featured theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
          </svg>
          Featured
        </span>
      </div>
    {/if}
    <!-- Menu dropdown -->
    <div class="absolute top-2 right-2 z-20" data-theme-menu bind:this={menuRef}>
      <button
        type="button"
        class="flex justify-center items-center w-8 h-8 rounded-lg bg-black/40 hover:bg-black/60 text-white transition-all"
        onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
        aria-label="Theme options"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
      </button>
      {#if menuOpen}
        <div
          class="absolute right-0 top-full mt-1 py-1 min-w-[140px] rounded-lg bg-white dark:bg-zinc-800 shadow-lg border border-zinc-200 dark:border-zinc-700"
          role="menu"
        >
          <button
            type="button"
            class="flex gap-2 items-center w-full px-3 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700"
            role="menuitem"
            onclick={handleFavoriteClick}
            title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill={theme.is_favorited ? 'currentColor' : 'none'}
              stroke="currentColor"
              stroke-width="2"
              class="w-5 h-5 {theme.is_favorited ? 'text-red-500' : ''}"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
            {theme.is_favorited ? 'Favorited' : 'Favorite'}
          </button>
        </div>
      {/if}
    </div>
    <div class="absolute bottom-1 left-3 right-3 z-10 mb-1 flex flex-col gap-0.5">
      <span class="text-xl font-bold text-white drop-shadow-md">{theme.name}</span>
      {#if theme.author}
        <span class="text-xs text-white/85 drop-shadow-md line-clamp-1">By {theme.author}</span>
      {/if}
      <div class="flex gap-3 text-xs font-medium text-white/90 drop-shadow-sm">
        <span class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
          </svg>
          {displayDownloadCount.toLocaleString()}
        </span>
        <span class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-3.5 h-3.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          {(theme.favorite_count ?? 0).toLocaleString()}
        </span>
      </div>
    </div>
    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
-    {#if gridRotatorUrls.length === 0}
+    <div class='w-full'>
-      <div class="relative w-full h-48 overflow-hidden rounded-md bg-zinc-200 dark:bg-zinc-700" aria-hidden="true"></div>
+      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
-    {:else if !allowSlideAutoplay || gridRotatorUrls.length === 1}
+    </div>
      <div class="relative w-full h-48 overflow-hidden rounded-md">
        <img
          src={gridRotatorUrls[0] ?? theme.marqueeImage ?? theme.coverImage}
          alt=""
          class="object-cover w-full h-full"
          draggable="false"
        />
      </div>
    {:else}
      {#key gridEmblaKey}
        <div
          class="relative w-full h-48 overflow-hidden rounded-md"
          use:emblaCarouselSvelte={{
            options: gridEmblaOptions,
            plugins: gridEmblaPlugins,
          }}
        >
          <div class="flex h-full">
            {#each gridRotatorUrls as url (url)}
              <div class="relative flex-[0_0_100%] min-w-0 h-full shrink-0">
                <img
                  src={url}
                  alt=""
                  class="object-cover w-full h-full select-none"
                  draggable="false"
                />
              </div>
            {/each}
          </div>
        </div>
      {/key}
    {/if}
  </div>
 </div>
@@ -2,49 +2,22 @@
  import type { Theme } from '@/interface/types/Theme'
  import ThemeCard from './ThemeCard.svelte';
-  let {
+  let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
    themes,
    searchTerm,
    setDisplayTheme,
    toggleFavorite,
    isLoggedIn,
    onRequestSignIn,
    allStoreThemeRows,
  } = $props<{
    themes: Theme[];
    searchTerm: string;
    setDisplayTheme: (theme: Theme) => void;
    toggleFavorite: (theme: Theme) => void;
    isLoggedIn: boolean;
    onRequestSignIn?: () => void;
    /** Raw API list (includes `slave` rows) for master download aggregation */
    allStoreThemeRows?: Theme[];
  }>();
-  let filteredThemes = $derived(themes.filter((theme: Theme) => {
+  let filteredThemes = $derived(themes.filter((theme: Theme) =>
-    const q = searchTerm.toLowerCase();
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
-    const name = (theme.name ?? '').toLowerCase();
+  ));
    const description = (theme.description ?? '').toLowerCase();
    return name.includes(q) || description.includes(q);
  }));
 </script>
 <div class="relative" >
  <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
    {#each filteredThemes as theme (theme.id)}
-      <ThemeCard
+      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
        {theme}
        onClick={() => setDisplayTheme(theme)}
        {toggleFavorite}
        {isLoggedIn}
        {onRequestSignIn}
        {allStoreThemeRows}
      />
    {/each}
    {#if filteredThemes.length !== 0}
-      <a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
-        <div class="bg-zinc-50 h-48 w-full transition-all duration-500 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1]">
+        <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
          <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
          <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
            Got a Theme Idea?
@@ -59,7 +32,7 @@
    <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
      <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
-      <a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
        Show me how!
      </a>
    </div>
@@ -1,14 +1,11 @@
 <script lang="ts">
  import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
  import { onDestroy, onMount } from 'svelte'
  import browser from 'webextension-polyfill'
  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import { OpenStorePage } from '@/seqta/ui/renderStore'
  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  import { cloudAuth } from '@/seqta/utils/CloudAuth'
  import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte'
  const themeManager = ThemeManager.getInstance();
@@ -16,17 +13,6 @@
  let { isEditMode } = $props<{ isEditMode: boolean }>();
  let isDragging = $state(false);
  let tempTheme = $state(null);
  let favoriteStatus = $state<Record<string, boolean>>({});
  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
  let prevLoggedIn = $state(false);
  let showSignInModal = $state(false);
  cloudAuth.subscribe((s) => {
    const now = s.isLoggedIn;
    if (now && !prevLoggedIn && themes) void fetchThemes();
    prevLoggedIn = now;
    cloudLoggedIn = now;
  });
  const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
    if (isEditMode) return;
@@ -85,7 +71,7 @@
      try {
        const result = JSON.parse(event.target?.result as string);
        tempTheme = result;
-        await themeManager.installTheme(result, { fromStore: false });
+        await themeManager.installTheme(result);
        await fetchThemes();
      } catch (error) {
        console.error('Error parsing file:', error);
@@ -101,55 +87,11 @@
      themes: await themeManager.getAvailableThemes(),
      selectedTheme: themeManager.getSelectedThemeId() || '',
    }
    if (themes && cloudLoggedIn) {
      const token = await cloudAuth.getStoredToken();
      if (token) {
        const status: Record<string, boolean> = {};
        await Promise.all(
          themes.themes.map(async (t) => {
            try {
              const res = (await browser.runtime.sendMessage({
                type: 'fetchThemeDetails',
                themeId: t.id,
                token,
              })) as { success?: boolean; data?: { theme?: { is_favorited?: boolean } } };
              if (res?.success && res?.data?.theme) {
                status[t.id] = !!res.data.theme.is_favorited;
              }
            } catch {
              // Theme may not exist on store (e.g. locally created)
            }
          })
        );
        favoriteStatus = status;
      }
    } else {
      favoriteStatus = {};
    }
  }
  const handleToggleFavorite = async (theme: CustomTheme, e: MouseEvent) => {
    e.stopPropagation();
    if (!cloudLoggedIn) {
      showSignInModal = true;
      return;
    }
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    const isFavorite = !favoriteStatus[theme.id];
    const result = (await browser.runtime.sendMessage({
      type: 'cloudFavorite',
      themeId: theme.id,
      token,
      action: isFavorite ? 'favorite' : 'unfavorite',
    })) as { success?: boolean };
    if (result?.success) {
      favoriteStatus = { ...favoriteStatus, [theme.id]: isFavorite };
    }
  }
  onMount(async () => {
    await fetchThemes();
    themeUpdates.addListener(fetchThemes);
  })
@@ -202,18 +144,6 @@
          {/if}
          {#if !isEditMode}
            <div
              class="flex absolute right-24 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 group-hover:opacity-100 group-hover:top-1/2 {(favoriteStatus[theme.id] ?? false) ? 'text-red-400' : 'text-white/80'} bg-black/50"
              onclick={(event) => handleToggleFavorite(theme, event)}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleToggleFavorite(theme, event as any) }}
              role="button"
              tabindex="-1"
              title={cloudLoggedIn ? ((favoriteStatus[theme.id] ?? false) ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={(favoriteStatus[theme.id] ?? false) ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </div>
            <div
              class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
@@ -281,7 +211,3 @@
    </button>
  </div>
 </div>
 {#if showSignInModal}
  <SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
 {/if}
@@ -15,35 +15,12 @@
  //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";
  import {
    checkGithubReleaseUpdate,
    dismissNightlyUpdate,
    isGhReleaseUpdateCheckEnabled,
    type GhReleaseUpdateInfo,
  } from "@/utils/githubReleaseUpdate";
  let devModeSequence = "";
  let settingsActiveTab = $state(0);
  let showDisclaimerModal = $state(false);
  let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
  let disclaimerTitle = $state("Confirm");
  let disclaimerMessage = $state("");
  const ghReleaseUpdateEnabled = isGhReleaseUpdateCheckEnabled();
  let ghReleaseUpdate = $state<GhReleaseUpdateInfo | null>(null);
  const openGhRelease = () => {
    const url = ghReleaseUpdate?.url
      ?? "https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases";
    if (ghReleaseUpdate?.available) {
      dismissNightlyUpdate();
    }
    window.open(url, "_blank");
    closeExtensionPopup();
  };
  const handleDevModeToggle = () => {
    const handleKeyDown = (event: KeyboardEvent) => {
@@ -66,10 +43,6 @@
    showColourPicker = true;
  };
  const openFontPicker = () => {
    showFontPicker = true;
  };
  const openChangelog = () => {
    OpenWhatsNewPopup();
    closeExtensionPopup();
@@ -92,41 +65,24 @@
  let { standalone } = $props<{ standalone?: boolean }>();
  let showColourPicker = $state<boolean>(false);
  let showFontPicker = $state<boolean>(false);
  let showCloudPanel = $state<boolean>(false);
-  const openCloudPanel = () => {
+  const showDisclaimer = (onConfirm: () => void, onCancel: () => void) => {
    showCloudPanel = true;
  };
  const showDisclaimer = (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => {
    disclaimerCallbacks = { onConfirm, onCancel };
    disclaimerTitle = title ?? "Confirm";
    disclaimerMessage = message ?? "";
    showDisclaimerModal = true;
  };
-  onMount(() => {
+  onMount(async () => {
    settingsPopup.addListener(() => {
      showColourPicker = false;
      showFontPicker = false;
      showCloudPanel = false;
    });
-    if (standalone) {
+    if (!standalone) return;
-      StandaloneStore.setStandalone(true);
+    StandaloneStore.setStandalone(true);
    }
    if (ghReleaseUpdateEnabled) {
      void checkGithubReleaseUpdate().then((info) => {
        ghReleaseUpdate = info;
      });
    }
  });
 </script>
 <div
-  class="relative w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
+  class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
    ? 'dark'
    : ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
 >
@@ -158,25 +114,7 @@
      />
      {#if !standalone}
-        <div class="flex absolute top-1 right-1 gap-1 items-start">
+        <div class="flex absolute top-1 right-1 gap-1 items-center">
          {#if ghReleaseUpdateEnabled}
            <div class="flex flex-col items-end gap-0.5 max-w-[9rem] mr-0.5">
              {#if ghReleaseUpdate?.available}
                <button
                  type="button"
                  onclick={openGhRelease}
                  class="px-1.5 py-0.5 text-[10px] font-semibold leading-tight text-white rounded-full bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500"
                  title="Open GitHub release"
                >
                  Update available — {ghReleaseUpdate.label}
                </button>
              {/if}
              <p class="text-[9px] leading-tight text-right text-zinc-500 dark:text-zinc-400">
                GitHub release build — do not upload to extension stores.
              </p>
            </div>
          {/if}
          <div class="flex gap-1 items-center">
          <button
            onclick={openAbout}
            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
@@ -198,7 +136,6 @@
          >
            {"\uecba"}
          </button>
          </div>
          <!-- <button
            onclick={openMinecraftServer}
@@ -338,12 +275,11 @@
    </div>
    <TabbedContainer
      bind:activeTab={settingsActiveTab}
      tabs={[
        {
          title: "Settings",
          Content: Settings,
-          props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
+          props: { showColourPicker: openColourPicker, showDisclaimer },
        },
        { title: "Shortcuts", Content: Shortcuts },
        { title: "Themes", Content: Theme },
@@ -358,28 +294,19 @@
      }}
    />
  {/if}
  {#if showCloudPanel}
    <CloudPanel
      hidePanel={() => {
        showCloudPanel = false;
      }}
    />
  {/if}
 </div>
 {#if showFontPicker}
  <FontPickerModal
    hidePicker={() => {
      showFontPicker = false;
    }}
  />
 {/if}
 {#if showDisclaimerModal && disclaimerCallbacks}
  <DisclaimerModal
-    title={disclaimerTitle}
+    title="Assessment Averages Disclaimer"
-    message={disclaimerMessage}
+    message="This feature calculates a simple average of your assessment grades. It does not take into account:
 • Assessment weightings
 • Different grading scales
 • Other factors used in official reports
 The displayed average may be inaccurate compared to your actual marks found in reports.
 Do you want to enable this feature?"
    onConfirm={() => {
      disclaimerCallbacks?.onConfirm();
      showDisclaimerModal = false;
@@ -10,42 +10,10 @@
  import type { SettingsList } from "@/interface/types/SettingsProps"
  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
  import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
  import ConnectMobileApp from "@/interface/components/ConnectMobileApp.svelte"
  import CloudSettingsSync from "@/interface/components/CloudSettingsSync.svelte"
  import CloudHeader from "@/interface/components/store/CloudHeader.svelte"
  import { cloudAuth } from "@/seqta/utils/CloudAuth"
  import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
  import { showThemeOfTheMonthPopupNow } from "@/seqta/utils/Openers/OpenThemeOfTheMonthPopup"
  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
  import { getSnapshotForUpload } from "@/seqta/utils/cloudSettingsSync"
  import { getStoredOverride, setApiBase } from "@/seqta/utils/DevApiBase"
  let devApiBaseInput = $state<string>(getStoredOverride() ?? "")
  let devApiBaseActive = $state<string | null>(getStoredOverride())
  function applyDevApiBase() {
    const trimmed = devApiBaseInput.trim()
    if (trimmed === "") {
      setApiBase(null)
      devApiBaseActive = null
      return
    }
    if (!/^https?:\/\//.test(trimmed)) {
      alert("Please enter a full URL starting with http:// or https://")
      return
    }
    setApiBase(trimmed)
    devApiBaseActive = trimmed.replace(/\/$/, "")
  }
  function clearDevApiBase() {
    devApiBaseInput = ""
    setApiBase(null)
    devApiBaseActive = null
  }
  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
@@ -80,17 +48,9 @@
    settings: Record<string, SettingType>;
  }
-  const pluginSettings = getAllPluginSettings().filter(
+  const pluginSettings = getAllPluginSettings() as Plugin[];
    (plugin) => !(isSeqtaEngageExperience() && plugin.pluginId === "global-search"),
  ) as Plugin[];
  const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
  let cloudState = $state(cloudAuth.state);
  $effect(() => {
    const unsub = cloudAuth.subscribe((s) => { cloudState = s; });
    return unsub;
  });
  async function loadPluginSettings() {
    for (const plugin of pluginSettings) {
      if (Object.keys(plugin.settings).length === 0) continue;
@@ -132,25 +92,10 @@
    loadPluginSettings();
  })
-  const { showColourPicker, showFontPicker, showDisclaimer, showCloudPanel } = $props<{ 
+  const { showColourPicker, showDisclaimer } = $props<{ 
    showColourPicker: () => void;
-    showFontPicker: () => void;
+    showDisclaimer: (onConfirm: () => void, onCancel: () => void) => void;
    showDisclaimer: (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => void;
    showCloudPanel: () => void;
  }>();
  async function exportCloudSettingsJsonToFile() {
    const payload = await getSnapshotForUpload();
    const blob = new Blob([JSON.stringify(payload, null, 2)], {
      type: "application/json",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `betterseqta-plus-settings-export-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }
 </script>
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -168,15 +113,27 @@
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
  {#each [
    {
-      title: "Connect Mobile App",
+      title: "Transparency Effects",
-      description: "Link your SEQTA session to DesQTA — the modern desktop and mobile app for SEQTA Learn",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
-      id: 0,
+      id: 1,
-      Component: ConnectMobileApp,
+      Component: Switch,
-      props: {}
+      props: {
        state: $settingsState.transparencyEffects,
        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
      }
    },
    {
      title: "Custom Theme Colour",
      description: "Customise the overall theme colour of SEQTA Learn.",
      id: 4,
      Component: PickerSwatch,
      props: {
        onClick: showColourPicker
      }
    },
    {
      title: "Edit Sidebar Layout",
-      description: "Reorder pages on the sidebar",
+      description: "Customise the sidebar layout.",
      id: 5,
      Component: Button,
      props: {
@@ -184,38 +141,9 @@
        text: "Edit"
      }
    },
    {
      title: "Custom Theme Colour",
      description: "Customise the overall theme colour of SEQTA Learn",
      id: 4,
      Component: PickerSwatch,
      props: {
        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",
      id: 14,
      Component: Switch,
      props: {
        state: $settingsState.iconOnlySidebar ?? false,
        onChange: (isOn: boolean) => settingsState.iconOnlySidebar = isOn
      }
    },
    {
      title: "Animations",
-      description: "Enable animations on certain pages",
+      description: "Enables animations on certain pages.",
      id: 6,
      Component: Switch,
      props: {
@@ -233,38 +161,28 @@
        onChange: (isOn: boolean) => settingsState.timeFormat = isOn ? "12" : "24"
      }
    },
    {
      title: "Transparency Effects",
      description: "Enable transparency effects on certain elements, such as blur (May impact battery life)",
      id: 1,
      Component: Switch,
      props: {
        state: $settingsState.transparencyEffects,
        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
      }
    },
    {
      title: "Default Page",
-      description: "Choose which page loads first when you open SEQTA",
+      description: "The page to load when SEQTA Learn is opened.",
      id: 10,
      Component: Select,
      props: {
-        state: $settingsState.defaultPage ?? "home",
+        state: $settingsState.defaultPage,
-        onChange: (value: string) => (settingsState.defaultPage = value),
+        onChange: (value: string) => settingsState.defaultPage = value,
        options: [
-          { value: "home", label: "Home" },
+          { value: 'home', label: 'Home' },
-          { value: "dashboard", label: "Dashboard" },
+          { value: 'dashboard', label: 'Dashboard' },
-          { value: "timetable", label: "Timetable" },
+          { value: 'timetable', label: 'Timetable' },
-          { value: "welcome", label: "Welcome" },
+          { value: 'welcome', label: 'Welcome' },
-          { value: "messages", label: "Messages" },
+          { value: 'messages', label: 'Messages' },
-          { value: "documents", label: "Documents" },
+          { value: 'documents', label: 'Documents' },
-          { value: "reports", label: "Reports" },
+          { value: 'reports', label: 'Reports' },
-        ],
+        ]
-      },
+      }
    },
    {
      title: "News Feed Source",
-      description: "Choose the sources for your news feed",
+      description: "Choose sources of your news feed.",
      id: 11,
      Component: Select,
      props: {
@@ -289,49 +207,6 @@
    {@render Setting(option)}
  {/each}
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Adaptive Theme Colour</h2>
          <p class="text-xs">Change the theme colour based on the current class (e.g. when viewing a course or assessments page)</p>
        </div>
        <div>
          <Switch
            state={$settingsState.adaptiveThemeColour ?? false}
            onChange={(isOn: boolean) => settingsState.adaptiveThemeColour = isOn}
          />
        </div>
      </div>
      {#if $settingsState.adaptiveThemeColour}
        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
          <div class="pr-4">
            <h2 class="text-sm font-bold">Soft Gradient</h2>
            <p class="text-xs">Use a soft gradient instead of a solid colour when viewing a class</p>
          </div>
          <div>
            <Switch
              state={$settingsState.adaptiveThemeGradient ?? false}
              onChange={(isOn: boolean) => settingsState.adaptiveThemeGradient = isOn}
            />
          </div>
        </div>
        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
          <div class="pr-4">
            <h2 class="text-sm font-bold">Smooth colour transition</h2>
            <p class="text-xs">Ease between class/subject colours when navigating instead of switching instantly</p>
          </div>
          <div>
            <Switch
              state={$settingsState.adaptiveThemeColourTransition ?? true}
              onChange={(isOn: boolean) => settingsState.adaptiveThemeColourTransition = isOn}
            />
          </div>
        </div>
      {/if}
    </div>
  </div>
  {#each pluginSettings as plugin}
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
@@ -358,9 +233,9 @@
                      async () => {
                        await updatePluginSetting(plugin.pluginId, 'enabled', true);
                      },
-                      () => {},
+                      () => {
-                      "Assessment Averages Disclaimer",
+                        // Do nothing on cancel
-                      "This feature calculates a simple average of your assessment grades. It does not take into account:\n• Assessment weightings\n• Different grading scales\n• Other factors used in official reports\n\nThe displayed average may be inaccurate compared to your actual marks found in reports.\n\nDo you want to enable this feature?"
+                      }
                    );
                    return;
                  }
@@ -373,8 +248,8 @@
        {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
          {#each Object.entries(plugin.settings) as [key, setting]}
-            <!-- Skip the 'enabled' setting and hide cloud-only settings when not signed in -->
+            <!-- Skip the 'enabled' setting if it's part of the settings object -->
-            {#if key !== 'enabled' && !(key === 'useCloudPfp' && !cloudState.isLoggedIn)}
+            {#if key !== 'enabled'}
              <div class="flex justify-between items-center px-4 py-3">
                <div class="pr-4">
                  <h2 class="text-sm font-bold">{setting.title || key}</h2>
@@ -387,15 +262,13 @@
                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                    />
                  {:else if setting.type === 'number'}
-                    <div class="w-28 shrink-0">
+                    <Slider
-                      <Slider
+                      state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                        state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                        onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                      min={setting.min}
-                        min={setting.min}
+                      max={setting.max}
-                        max={setting.max}
+                      step={setting.step}
-                        step={setting.step}
+                    />
                      />
                    </div>
                  {:else if setting.type === 'string'}
                    <input
                      type="text"
@@ -434,40 +307,9 @@
          {/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}
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">BetterSEQTA Cloud</h2>
          <p class="text-xs">Account & sync</p>
        </div>
        <div>
          <CloudHeader alwaysShowUserName onClick={showCloudPanel} />
        </div>
      </div>
      {#if cloudState.isLoggedIn}
        <div class="px-3 pb-3">
          <CloudSettingsSync showDisclaimer={(onConfirm, onCancel) => showDisclaimer(onConfirm, onCancel, "Restore from cloud?", "This will replace your local settings with the cloud backup. Continue?")} />
        </div>
      {/if}
    </div>
  </div>
  <div class="p-1 border-none"></div>
  {@render Setting({
@@ -535,71 +377,6 @@
          />
        </div>
      </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Show Theme of the Month</h2>
          <p class="text-xs">Fetch and show the current month's popup now (ignores dismissed state)</p>
        </div>
        <div>
          <Button
            onClick={async () => {
              closeExtensionPopup();
              await new Promise((resolve) => setTimeout(resolve, 100));
              await showThemeOfTheMonthPopupNow();
            }}
            text="Show Now"
          />
        </div>
      </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Export cloud settings JSON</h2>
          <p class="text-xs">Download the same payload as cloud sync (OAuth tokens stripped). For debugging and server testing.</p>
        </div>
        <div>
          <Button onClick={exportCloudSettingsJsonToFile} text="Export to file" />
        </div>
      </div>
      <div class="flex flex-col gap-2 px-4 py-3">
        <div class="flex justify-between items-start gap-3">
          <div class="pr-4">
            <h2 class="text-sm font-bold">API Base URL (session only)</h2>
            <p class="text-xs">Override the content API host for this browser session. Cleared on restart. Affects themes, theme of the month, and other server-driven content.</p>
            {#if devApiBaseActive}
              <p class="text-xs mt-1 text-amber-600 dark:text-amber-400">
                Override active: <span class="font-mono">{devApiBaseActive}</span>
              </p>
            {/if}
          </div>
        </div>
        <div class="flex gap-2 items-center">
          <input
            type="text"
            placeholder="https://betterseqta.org"
            bind:value={devApiBaseInput}
            class="flex-1 px-2 py-1 text-xs rounded border bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100"
          />
          <Button onClick={applyDevApiBase} text="Apply" />
          {#if devApiBaseActive}
            <Button onClick={clearDevApiBase} text="Clear" />
          {/if}
        </div>
      </div>
      <div class="flex flex-col gap-2 px-4 py-3">
        <div>
          <h2 class="text-sm font-bold">GitHub latest version override</h2>
          <p class="text-xs">Pretend a newer GitHub release exists to test the update badge. Only applies when dev mode is on.</p>
        </div>
        <input
          type="text"
          placeholder="e.g. 9.9.9"
          value={$settingsState.devGhReleaseVersionOverride ?? ""}
          oninput={(e) => {
            settingsState.devGhReleaseVersionOverride = e.currentTarget.value;
          }}
          class="px-2 py-1 text-xs rounded border bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100"
        />
      </div>
    </div>
  {/if}
 </div>
@@ -7,7 +7,6 @@
  import SkeletonLoader from '../components/SkeletonLoader.svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
  import type { Theme } from '../types/Theme'
  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'
@@ -16,24 +15,13 @@
  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
  import Backgrounds from '../components/store/Backgrounds.svelte'
  import { cloudAuth } from '@/seqta/utils/CloudAuth'
  import SignInToFavoriteModal from '../components/SignInToFavoriteModal.svelte'
  import { consumePendingHighlightThemeId } from '@/seqta/utils/openThemeStoreWithHighlight'
  const themeManager = ThemeManager.getInstance();
  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
  cloudAuth.subscribe((s) => { cloudLoggedIn = s.isLoggedIn; });
  // State variables
  let searchTerm = $state('');
  let themes = $state<Theme[]>([]);
-
+  let coverThemes = $state<Theme[]>([]);
  /** Grid/search/cover: hides flat-listed slaves when API sends them */
  let listThemes = $derived(visibleStoreThemes(themes));
  /** Cover marquee slides (master + flavour imagery for top masters) */
  let coverSlides = $derived(buildCoverSlidesForThemes(listThemes.slice(0, 3)));
  let loading = $state(true);
  let darkMode = $state(false);
  let displayTheme = $state<Theme | null>(null);
@@ -41,21 +29,7 @@
  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();
@@ -74,151 +48,38 @@
    activeTab = tab;
  };
-  /** Featured themes first; within each group, newest by `created_at` (API: Unix seconds). */
+  // Fetch themes and initialize app
-  function compareStoreThemes(a: Theme, b: Theme): number {
+  const fetchThemes = async () => {
    const fa = a.featured === true ? 1 : 0;
    const fb = b.featured === true ? 1 : 0;
    if (fa !== fb) return fb - fa;
    const ca = a.created_at ?? 0;
    const cb = b.created_at ?? 0;
    if (ca !== cb) return cb - ca;
    return a.name.localeCompare(b.name);
  }
  const toggleFavorite = async (theme: Theme) => {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    const isFavorite = !theme.is_favorited;
    const result = (await browser.runtime.sendMessage({
      type: 'cloudFavorite',
      themeId: theme.id,
      token,
      action: isFavorite ? 'favorite' : 'unfavorite',
    })) as { success?: boolean };
    if (result?.success) {
      const delta = isFavorite ? 1 : -1;
      themes = themes.map((t) =>
        t.id === theme.id
          ? { ...t, is_favorited: isFavorite, favorite_count: Math.max(0, (t.favorite_count ?? 0) + delta) }
          : t
      );
      if (displayTheme?.id === theme.id) {
        displayTheme = {
          ...displayTheme,
          is_favorited: isFavorite,
          favorite_count: Math.max(0, (displayTheme.favorite_count ?? 0) + delta),
        };
      }
    }
  };
  // Fetch themes via background script (avoids CORS when store runs inside SEQTA page)
  const fetchThemes = async (isRetry = false) => {
    if (!isRetry) {
      fetchAttempt = 0;
      error = null;
    }
    try {
-      const token = await cloudAuth.getStoredToken();
+      const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${(new Date()).getTime()}`, { cache: 'no-store' });
-      const data = await sendMessageWithTimeout<{
+      const data = await response.json();
-        success?: boolean;
+      themes = data.themes;
-        data?: { themes: unknown[] };
+
-        error?: string;
+      // Shuffle for cover themes
-      }>({
+      const shuffled = [...themes].sort(() => 0.5 - Math.random());
-        type: 'fetchThemes',
+      coverThemes = shuffled.slice(0, 3);
-        token: token ?? undefined,
+
      });
      if (!data?.success || !Array.isArray(data?.data?.themes)) {
        throw new Error(data?.error || 'Failed to fetch themes');
      }
      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) {
+    } catch (error) {
-      console.error('Failed to fetch themes', err);
+      console.error('Failed to fetch themes', error);
-      fetchAttempt += 1;
+      setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
      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);
    }
  };
  function focusThemeById(themeId: string) {
    const match = themes.find((t) => t.id === themeId)
      ?? themes.find((t) => t.flavours?.some((f) => f.id === themeId));
    if (match) {
      activeTab = 'themes';
      searchTerm = '';
      displayTheme = match;
    }
  }
  function onHighlightThemeEvent(e: Event) {
    const detail = (e as CustomEvent).detail;
    if (detail?.themeId && typeof detail.themeId === 'string') {
      focusThemeById(detail.themeId);
    }
  }
  // On mount
  onMount(async () => {
    window.addEventListener('bsplus:highlight-theme', onHighlightThemeEvent);
    await fetchThemes();
    await fetchCurrentThemes();
    darkMode = (await browser.storage.local.get('DarkMode')).DarkMode === 'true';
    darkMode = $settingsState.DarkMode;
    const pending = consumePendingHighlightThemeId();
    if (pending) focusThemeById(pending);
    return () => {
      window.removeEventListener('bsplus:highlight-theme', onHighlightThemeEvent);
    };
  });
-  // Filter themes (list is already featured-first, then newest; filter preserves order)
+  // Filter themes based on search term
-  let filteredThemes = $derived(
+  let filteredThemes = $derived(themes.filter(theme =>
-    listThemes.filter((theme) => {
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
-      const q = searchTerm.toLowerCase();
+    theme.description.toLowerCase().includes(searchTerm.toLowerCase())
-      const name = (theme.name ?? '').toLowerCase();
+  ));
      const description = (theme.description ?? '').toLowerCase();
      return name.includes(q) || description.includes(q);
    }),
  );
  async function installThemeFromStore(themeId: string, meta: Theme) {
    const fullRow = themes.find((x) => x.id === themeId);
    if (fullRow) {
      await themeManager.downloadTheme(fullRow);
    } else {
      const flavour = meta.flavours?.find((f) => f.id === themeId);
      await themeManager.downloadTheme({
        id: themeId,
        name: flavour?.name ?? meta.name,
      } as Theme);
    }
    await themeManager.setTheme(themeId);
    themeUpdates.triggerUpdate();
    await fetchCurrentThemes();
    void browser.runtime.sendMessage({ type: 'cloudSettingsRequestDebouncedUpload' }).catch(() => {});
  }
  async function removeThemeFromStore(themeId: string) {
    await themeManager.deleteTheme(themeId);
    themeUpdates.triggerUpdate();
    await fetchCurrentThemes();
  }
  $effect(() => {
    loadBackground();
@@ -230,17 +91,6 @@
      console.error(error);
    }
  });
  // Refetch themes when user logs in (from another tab) to get is_favorited
  let lastLoggedIn = $state(false);
  $effect(() => {
    if (cloudLoggedIn && !lastLoggedIn) {
      lastLoggedIn = true;
      fetchThemes();
    } else if (!cloudLoggedIn) {
      lastLoggedIn = false;
    }
  });
 </script>
 <div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
@@ -251,64 +101,40 @@
      <!-- Loading State -->
      {#if loading}
        <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-          {#each Array(6) as _, i (i)}
+          <SkeletonLoader width="100%" height="200px" />
            <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 -->
        {#if activeTab === 'themes'}
          {#if searchTerm === ''}
-            <CoverSwiper slides={coverSlides} {setDisplayTheme} />
+            <CoverSwiper {coverThemes} {setDisplayTheme} />
          {/if}
          <!-- ThemeGrid to display filtered themes -->
-          <ThemeGrid
+          <ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
            themes={filteredThemes}
            allStoreThemeRows={themes}
            {searchTerm}
            {setDisplayTheme}
            {toggleFavorite}
            isLoggedIn={cloudLoggedIn}
            onRequestSignIn={() => (showSignInOverlay = true)}
          />
          {#if displayTheme}
            <ThemeModal
              currentThemes={currentThemes}
-              allThemes={listThemes}
+              allThemes={themes}
              allStoreThemeRows={themes}
              theme={displayTheme}
              {displayTheme}
              {setDisplayTheme}
-              {toggleFavorite}
+              onInstall={async () => {
-              isLoggedIn={cloudLoggedIn}
+                if (displayTheme) {
-              onRequestSignIn={() => (showSignInOverlay = true)}
+                  await themeManager.downloadTheme(displayTheme);
-              onInstall={async (themeId: string) => {
+                  await themeManager.setTheme(displayTheme.id);
-                if (displayTheme) await installThemeFromStore(themeId, displayTheme);
+                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
              }}
-              onRemove={async (themeId: string) => {
+              onRemove={async () => {
-                console.debug('deleting theme', themeId);
+                if (displayTheme?.id) {
-                await removeThemeFromStore(themeId);
+                  console.debug('deleting theme', displayTheme.id);
                  await themeManager.deleteTheme(displayTheme.id);
                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
              }}
            />
          {/if}
@@ -318,8 +144,4 @@
      {/if}
    </div>
  </div>
  {#if showSignInOverlay}
    <SignInToFavoriteModal onClose={() => (showSignInOverlay = false)} />
  {/if}
 </div>
@@ -4,10 +4,7 @@
  import { slide } from 'svelte/transition';
  import { fade } from 'svelte/transition';
-  import {
+  import { type LoadedCustomTheme } from '@/types/CustomThemes'
    type LoadedCustomTheme,
    shouldForceThemeAppearance,
  } from '@/types/CustomThemes'
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
@@ -24,9 +21,9 @@
    handleImageVariableChange,
    handleCoverImageUpload
  } from '../utils/themeImageHandlers';
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  const { themeID } = $props<{ themeID: string }>()
  const themeManager = ThemeManager.getInstance();
@@ -43,9 +40,7 @@
    coverImage: null,
    isEditable: true,
    hideThemeName: false,
-    forceTheme: undefined,
+    forceDark: undefined
    forceDark: undefined,
    adaptiveCssVariables: [],
  })
  let closedAccordions = $state<string[]>([])
  let themeLoaded = $state(false);
@@ -85,13 +80,7 @@
        }))
      }
-      theme = {
+      theme = loadedTheme
        ...loadedTheme,
        adaptiveCssVariables: loadedTheme.adaptiveCssVariables ?? [],
        forceTheme:
          loadedTheme.forceTheme ??
          (loadedTheme.forceDark !== undefined ? true : undefined),
      }
      themeLoaded = true
    } else {
      themeLoaded = true
@@ -125,14 +114,6 @@
      blob: image.blob
    }))
    themeClone.coverImage = theme.coverImage
    themeClone.userEdited = true
    if (shouldForceThemeAppearance(themeClone)) {
      themeClone.forceTheme = true;
    } else {
      themeClone.forceTheme = false;
      themeClone.forceDark = undefined;
    }
    themeManager.clearPreview();
    await themeManager.saveTheme(themeClone);
@@ -289,7 +270,7 @@
    <h1 class='text-xl font-semibold'>Theme Creator</h1>
-    <a href='https://docs.betterseqta.org/theme-creation/' target='_blank' rel='noopener noreferrer' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
+    <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
      <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
      <span class='underline'>
        Need help? Check out the docs!
@@ -336,27 +317,6 @@
    <Divider />
    <div class="py-3">
      <h2 class="text-sm font-bold">Adaptive CSS variables</h2>
      <p class="text-xs text-zinc-600 dark:text-zinc-400">
        One per line, each must start with <code class="text-xs">--</code>. These receive the same colour as the adaptive accent when &quot;Adaptive theme colour&quot; is enabled in general settings. Use them in Custom CSS, e.g. <code class="text-xs">border-color: var(--my-accent);</code>
      </p>
      <textarea
        placeholder="--my-accent&#10;--class-banner"
        value={theme.adaptiveCssVariables?.join('\n') ?? ''}
        oninput={(e) => {
          const lines = e.currentTarget.value
            .split(/\r?\n/)
            .map((s) => s.trim())
            .filter(Boolean);
          theme = { ...theme, adaptiveCssVariables: lines };
        }}
        class="p-2 mt-2 w-full min-h-[5rem] font-mono text-sm rounded-lg border-0 transition dark:placeholder-zinc-400 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
      ></textarea>
    </div>
    <Divider />
    {#each [
      {
        type: 'switch',
@@ -372,28 +332,21 @@
        title: 'Force Theme',
        description: 'Force users to use either dark or light mode',
        props: {
-          state: shouldForceThemeAppearance(theme),
+          state: theme.forceDark !== undefined,
-          onChange: (value: boolean) => {
+          onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
            if (value) {
              theme = { ...theme, forceTheme: true, forceDark: false };
            } else {
              theme = { ...theme, forceTheme: false, forceDark: undefined };
            }
          }
        }
      },
      {
        type: 'conditional',
        props: {
-          condition: shouldForceThemeAppearance(theme),
+          condition: theme.forceDark !== undefined,
          children: {
            type: 'lightDarkToggle',
            title: 'Mode',
            description: 'Choose whether to force light or dark mode',
            props: {
              state: theme.forceDark === true,
-              onChange: (value: boolean) =>
+              onChange: (value: boolean) => theme = { ...theme, forceDark: value }
                (theme = { ...theme, forceDark: value, forceTheme: true })
            }
          }
        }
@@ -1,50 +1,7 @@
 export type ThemeRole = "standard" | "master" | "slave";
 /** List/detail metadata for variants of a master theme (full theme.json fetched at install by id). */
 export type ThemeFlavour = {
  id: string;
  name: string;
  /** Mirrors theme.json accent (e.g. defaultColour); used for install picker buttons */
  accent_color: string;
  cover_image: string;
  marquee_image?: string;
  /** Per-variant installs when slaves are not returned as flat `theme_role` rows */
  download_count?: number;
 };
 export type Theme = {
  id: string;
  name: string;
  description: string;
  coverImage: string;
-  marqueeImage?: string;
+  marqueeImage: string;
-  theme_json_url?: string;
+  id: string;
  is_favorited?: boolean;
  favorite_count?: number;
  download_count?: number;
  author?: string;
  featured?: boolean;
  tags?: string[];
  /** Unix time in seconds (API list/detail). */
  created_at?: number;
  /** Unix seconds — last server update (GET /api/themes). */
  updated_at?: number;
  /** Omitted / `standard` — show in grid. `slave` hides from grid. `master` can list `flavours`. */
  theme_role?: ThemeRole;
  /** Present when `theme_role === "slave"` and API returns a flat list during migration */
  master_id?: string;
  /** Variants nested on master rows; installs use flavour `id` */
  flavours?: ThemeFlavour[];
 };
 /** One marquee slide (cover hero or modal carousel). */
 export type ThemeCoverSlide = {
  imageUrl: string;
  /** Main line — usually master name */
  title: string;
  /** Subline — flavour name when applicable */
  subtitle?: string;
  /** Opening the modal uses this theme (always the grid row / master object) */
  openTheme: Theme;
  badgeFeatured?: boolean;
 };
@@ -1,27 +0,0 @@
 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.
 * Pass `document.body` to escape transformed/contained settings popups entirely.
 */
 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) {
      const nextDest =
        newTarget ?? (root instanceof ShadowRoot ? root : document.body);
      nextDest.appendChild(node);
    },
    destroy() {
      node.remove();
    },
  };
 };
@@ -1,74 +0,0 @@
 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"),
  );
 }
@@ -1,246 +0,0 @@
 import type { Theme, ThemeCoverSlide, ThemeFlavour } from "@/interface/types/Theme";
 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[] {
  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 {
  return t.marqueeImage || t.coverImage;
 }
 /**
 * Builds slides for CoverSwiper: for each top-N master, first master image then each flavour image.
 */
 export function buildCoverSlidesForThemes(topThemes: Theme[]): ThemeCoverSlide[] {
  const slides: ThemeCoverSlide[] = [];
  for (const theme of topThemes) {
    const flavours = theme.flavours ?? [];
    if (flavours.length === 0) {
      slides.push({
        imageUrl: marqueeOrCoverUrl(theme),
        title: theme.name,
        subtitle: theme.author ? `By ${theme.author}` : undefined,
        openTheme: theme,
        badgeFeatured: theme.featured === true,
      });
      continue;
    }
    slides.push({
      imageUrl: marqueeOrCoverUrl(theme),
      title: theme.name,
      subtitle: theme.author ? `By ${theme.author}` : undefined,
      openTheme: theme,
      badgeFeatured: theme.featured === true,
    });
    for (const f of flavours) {
      slides.push({
        imageUrl: f.marquee_image || f.cover_image,
        title: theme.name,
        subtitle: f.name,
        openTheme: theme,
        badgeFeatured: theme.featured === true,
      });
    }
  }
  return slides;
 }
 export type ModalHeroSlide = { imageUrl: string; caption: string };
 /** Preview image for carousel + flavour picker (matches hero slide order after master slide). */
 export function flavourCarouselImageUrl(f: ThemeFlavour): string {
  const u = (f.marquee_image || f.cover_image || "").trim();
  return u;
 }
 /** Preview image for master variant tile (modal hero slide 0). */
 export function masterCarouselImageUrl(t: Theme): string {
  return (marqueeOrCoverUrl(t) || "").trim();
 }
 /**
 * Ordered preview URLs for the store grid card rotator: master first, then each variant.
 * Uses nested `flavours` when present; otherwise flat `slave` rows (same order as modal when possible).
 */
 export function gridCardPreviewImageUrls(theme: Theme, allStoreRows?: Theme[]): string[] {
  const urls: string[] = [];
  const push = (raw: string) => {
    const u = raw.trim();
    if (u && !urls.includes(u)) urls.push(u);
  };
  push(marqueeOrCoverUrl(theme) || "");
  const flavours = theme.flavours ?? [];
  if (flavours.length > 0) {
    for (const f of flavours) {
      push(flavourCarouselImageUrl(f));
    }
    return urls.length > 0 ? urls : [(theme.coverImage || "").trim()].filter(Boolean);
  }
  if (allStoreRows) {
    const slaves = allStoreRows
      .filter((t) => t.theme_role === "slave" && t.master_id === theme.id)
      .sort((a, b) => a.id.localeCompare(b.id));
    for (const s of slaves) {
      push((marqueeOrCoverUrl(s) || "").trim());
    }
  }
  if (urls.length > 0) return urls;
  const fallback = (theme.coverImage || "").trim();
  return fallback ? [fallback] : [];
 }
 /**
 * Downloads shown on the grid card for a master row: master's count plus each slave
 * (flat `theme_role === "slave"` with `master_id`) and any flavour-only `download_count`
 * when there is no matching flat slave id (nested-only API shape).
 */
 export function masterGridDisplayDownloadCount(master: Theme, allStoreRows: Theme[]): number {
  let total = master.download_count ?? 0;
  const slaveRows = allStoreRows.filter(
    (t) => t.theme_role === "slave" && t.master_id === master.id,
  );
  const countedIds = new Set(slaveRows.map((r) => r.id));
  for (const r of slaveRows) {
    total += r.download_count ?? 0;
  }
  for (const f of master.flavours ?? []) {
    if (countedIds.has(f.id)) continue;
    total += f.download_count ?? 0;
  }
  return total;
 }
 /** Modal hero: master first, then each flavour (plan order). */
 export function buildModalHeroSlides(theme: Theme): ModalHeroSlide[] {
  const slides: ModalHeroSlide[] = [];
  slides.push({
    imageUrl: marqueeOrCoverUrl(theme),
    caption: theme.name,
  });
  const flavours = theme.flavours ?? [];
  for (const f of flavours) {
    slides.push({
      imageUrl: f.marquee_image || f.cover_image,
      caption: `${theme.name} — ${f.name}`,
    });
  }
  return slides;
 }
 /**
 * Relative luminance 0–1 for rgba/rgb/hex-ish strings; fallback 0.5 → white text
 */
 export function pickContrastingTextColor(backgroundCss: string): "#ffffff" | "#0a0a0a" {
  const s = backgroundCss.trim();
  const rgba = s.match(
    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i,
  );
  if (rgba) {
    const r = Number(rgba[1]) / 255;
    const g = Number(rgba[2]) / 255;
    const b = Number(rgba[3]) / 255;
    const a = rgba[4] !== undefined ? Number(rgba[4]) : 1;
    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    const effective = lum * a + 0.05 * (1 - a);
    return effective > 0.45 ? "#0a0a0a" : "#ffffff";
  }
  const hex = s.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
  if (hex) {
    const r = parseInt(hex[1], 16) / 255;
    const g = parseInt(hex[2], 16) / 255;
    const b = parseInt(hex[3], 16) / 255;
    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return lum > 0.45 ? "#0a0a0a" : "#ffffff";
  }
  return "#ffffff";
 }
@@ -1,27 +0,0 @@
 import * as pdfjs from "pdfjs-dist";
 import browser from "webextension-polyfill";
 /** Static copies in `src/public` (see `scripts/copy-pdfjs-assets.mjs`, manifest web_accessible_resources). */
 const PDF_WORKER_RESOURCE = "resources/pdfjs/pdf.worker.min.mjs";
 const PDF_LEGACY_RESOURCE = "resources/pdfjs/pdf.legacy.min.mjs";
 function extensionAssetUrl(relativePath: string): string {
  return browser.runtime.getURL(relativePath.replace(/^\/+/, ""));
 }
 let workerConfigured = false;
 /** Required before pdfjs spawns a worker (content-script / extension isolate). */
 export function ensurePdfjsWorker(): void {
  if (workerConfigured) return;
  pdfjs.GlobalWorkerOptions.workerSrc = extensionAssetUrl(PDF_WORKER_RESOURCE);
  workerConfigured = true;
 }
 /** Page-context script on Firefox must load these chrome-extension:// URLs (see web_accessible_resources). */
 export function getPdfjsPageContextUrls(): { lib: string; worker: string } {
  return {
    lib: extensionAssetUrl(PDF_LEGACY_RESOURCE),
    worker: extensionAssetUrl(PDF_WORKER_RESOURCE),
  };
 }
@@ -16,12 +16,12 @@
    }
  },
  "permissions": ["tabs", "notifications", "storage"],
-  "host_permissions": ["https://newsapi.org/", "https://betterseqta.org/", "https://accounts.betterseqta.org/", "*://*/*"],
+  "host_permissions": ["https://newsapi.org/", "*://*/*"],
  "background": {
    "service_worker": "background.ts"
  },
  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' http: https: https://betterseqta.org https://accounts.betterseqta.org https://raw.githubusercontent.com https://newsapi.org"
+    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "content_scripts": [
    {
@@ -32,12 +32,7 @@
  ],
  "web_accessible_resources": [
    {
-      "resources": [
+      "resources": ["resources/icons/*", "resources/update-image.webp"],
        "resources/icons/*",
        "resources/update-image.webp",
        "resources/pdfjs/pdf.worker.min.mjs",
        "resources/pdfjs/pdf.legacy.min.mjs"
      ],
      "matches": ["*://*/*"]
    }
  ]
@@ -6,7 +6,6 @@ import {
  Setting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 const settings = defineSettings({
  speed: numberSetting({
@@ -36,10 +35,13 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
  settings: instance.settings,
  run: async (api) => {
-    const [container, menu] = await Promise.all([
+    // Create the background elements
-      waitForElm("#container", true),
+    const container = document.getElementById("container");
-      waitForElm("#menu", true),
+    const menu = document.getElementById("menu");
-    ]);
+
    if (!container || !menu) {
      return () => {};
    }
    const backgrounds = [
      { classes: ["bg"] },
@@ -1,46 +0,0 @@
 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)}`;
 }
@@ -7,22 +7,6 @@ import {
 import { type Plugin } from "@/plugins/core/types";
 import stringToHTML from "@/seqta/utils/stringToHTML";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import {
  clearStuck,
  getClassByPattern,
  initStorage,
  injectWeightingsTab,
  letterToNumber,
  parseAssessments,
  processAssessments,
 } from "./utils.ts";
 import { injectRubricCopyButtons } from "./rubricCopy.ts";
 interface weightingsStorage {
  weightings: Record<string, string>;
  assessments: Record<string, string>;
  weightingOverrides: Record<string, string>;
 }
 const settings = defineSettings({
  lettergrade: booleanSetting({
@@ -39,9 +23,7 @@ class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
 const instance = new AssessmentsAveragePluginClass();
-let overrideListenerController: AbortController | null = null;
+const assessmentsAveragePlugin: Plugin<typeof settings> = {
 const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
  id: "assessments-average",
  name: "Assessment Averages",
  description: "Adds an average grade to the Assessments page",
@@ -50,10 +32,8 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
  settings: instance.settings,
  run: async (api) => {
    await initStorage(api);
    clearStuck(api);
    api.seqta.onMount(".assessmentsWrapper", async () => {
      // Wait for any assessment item to load first
      await waitForElm(
        "#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
        true,
@@ -61,182 +41,164 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
        1000,
      );
-      await parseAssessments(api);
+      // Helper function to find actual class names by their base pattern
-      await renderSubjectAverage(api);
+      const getClassByPattern = (
-      overrideListenerController?.abort();
+        element: Element | Document,
-      overrideListenerController = new AbortController();
+        basePattern: string,
-      document.addEventListener(
+      ): string => {
-        "betterseqta:overrideChanged",
+        // Find all classes on the element
-        () => renderSubjectAverage(api),
+        const classes = Array.from(element.querySelectorAll("*"))
-        { signal: overrideListenerController.signal },
+          .flatMap((el) => Array.from(el.classList))
          .filter((className) => className.startsWith(basePattern));
        return classes.length ? classes[0] : "";
      };
      // Find actual class names from the DOM
      const sampleAssessmentItem = document.querySelector(
        "[class*='AssessmentItem__AssessmentItem___']",
      );
-      const wrapper = document.querySelector(".assessmentsWrapper");
+      if (!sampleAssessmentItem) return;
-      if (wrapper) {
+
-        const observer = new MutationObserver(() => {
+      // Extract all necessary class patterns from a sample assessment item
-          applySubjectColourToOverallResult();
+      const assessmentItemClass =
-        });
+        Array.from(sampleAssessmentItem.classList).find((c) =>
-        observer.observe(wrapper, { childList: true, subtree: true });
+          c.startsWith("AssessmentItem__AssessmentItem___"),
-        setTimeout(() => observer.disconnect(), 10000);
+        ) || "";
      const metaContainerClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__metaContainer___",
      );
      const metaClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__meta___",
      );
      const simpleResultClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__simpleResult___",
      );
      const titleClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__title___",
      );
      // Get Thermoscore classes
      const thermoscoreElement = document.querySelector(
        "[class*='Thermoscore__Thermoscore___']",
      );
      if (!thermoscoreElement) return;
      const thermoscoreClass =
        Array.from(thermoscoreElement.classList).find((c) =>
          c.startsWith("Thermoscore__Thermoscore___"),
        ) || "";
      const fillClass = getClassByPattern(
        thermoscoreElement,
        "Thermoscore__fill___",
      );
      const textClass = getClassByPattern(
        thermoscoreElement,
        "Thermoscore__text___",
      );
      // Find assessment list
      const assessmentsList = document.querySelector(
        "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
      );
      if (!assessmentsList) return;
      const gradeElements = document.querySelectorAll(
        "[class*='Thermoscore__text___']",
      );
      if (!gradeElements.length) return;
      // Parse and average grades
      const letterToNumber: Record<string, number> = {
        "A+": 100,
        A: 95,
        "A-": 90,
        "B+": 85,
        B: 80,
        "B-": 75,
        "C+": 70,
        C: 65,
        "C-": 60,
        "D+": 55,
        D: 50,
        "D-": 45,
        "E+": 40,
        E: 35,
        "E-": 30,
        F: 0,
      };
      function parseGrade(text: string): number {
        const str = text.trim().toUpperCase();
        if (str.includes("/")) {
          const [raw, max] = str.split("/").map((n) => parseFloat(n));
          return (raw / max) * 100;
        }
        if (str.includes("%")) {
          return parseFloat(str.replace("%", "")) || 0;
        }
        return letterToNumber[str] ?? 0;
      }
-    });
+
-    api.seqta.onMount("[class*='SelectedAssessment__']", () => {
+      let total = 0;
-      injectWeightingsTab(api);
+      let count = 0;
-      injectRubricCopyButtons();
+      gradeElements.forEach((el) => {
        const grade = parseGrade(el.textContent || "");
        if (grade > 0) {
          total += grade;
          count++;
        }
      });
      if (!count) return;
      const avg = total / count;
      const rounded = Math.ceil(avg / 5) * 5;
      const numberToLetter = Object.entries(letterToNumber).reduce(
        (acc, [k, v]) => {
          acc[v] = k;
          return acc;
        },
        {} as Record<number, string>,
      );
      const letterAvg = numberToLetter[rounded] ?? "N/A";
      const display = api.settings.lettergrade
        ? letterAvg
        : `${avg.toFixed(2)}%`;
      // Prevent duplicate
      const existing = assessmentsList.querySelector(
        `[class*='AssessmentItem__title___']`,
      );
      if (existing?.textContent === "Subject Average") return;
      // Use the dynamic class names in the HTML template
      const averageElement = stringToHTML(/* html */ `
        <div class="${assessmentItemClass}">
          <div class="${metaContainerClass}">
            <div class="${metaClass}">
              <div class="${simpleResultClass}">
                <div class="${titleClass}">Subject Average</div>
              </div>
            </div>
          </div>
          <div class="${thermoscoreClass}">
            <div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
              <div class="${textClass}" title="${display}">${display}</div>
            </div>
          </div>
        </div>
      `).firstChild;
      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
    });
  },
 };
 let renderInFlight = false;
 async function renderSubjectAverage(api: any) {
  if (renderInFlight) return;
  renderInFlight = true;
  try {
    const assessmentsList = document.querySelector(
      "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
    );
    if (!assessmentsList) return;
    // Remove existing subject average before re-rendering
    Array.from(
      assessmentsList.querySelectorAll(`[class*='AssessmentItem__title___']`),
    )
      .find((el) => el.textContent === "Subject Average")
      ?.closest("[class*='AssessmentItem__AssessmentItem___']")
      ?.remove();
    const sampleAssessmentItem = document.querySelector(
      "[class*='AssessmentItem__AssessmentItem___']",
    );
    if (!sampleAssessmentItem) return;
    const assessmentItemClass =
      Array.from(sampleAssessmentItem.classList).find((c) =>
        c.startsWith("AssessmentItem__AssessmentItem___"),
      ) || "";
    const metaContainerClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__metaContainer___",
    );
    const metaClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__meta___",
    );
    const simpleResultClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__simpleResult___",
    );
    const titleClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__title___",
    );
    const assessmentItems = Array.from(
      assessmentsList.querySelectorAll(
        `[class*='AssessmentItem__AssessmentItem___']`,
      ),
    ).filter(
      (item) =>
        !item
          .querySelector(`[class*='AssessmentItem__title___']`)
          ?.textContent?.includes("Subject Average"),
    );
    const { weightedTotal, totalWeight, hasInaccurateWeighting, count } =
      await processAssessments(api, assessmentItems);
    if (!count || totalWeight === 0) return;
    const thermoscoreElement = document.querySelector(
      "[class*='Thermoscore__Thermoscore___']",
    );
    if (!thermoscoreElement) return;
    const thermoscoreClass =
      Array.from(thermoscoreElement.classList).find((c) =>
        c.startsWith("Thermoscore__Thermoscore___"),
      ) || "";
    const fillClass = getClassByPattern(
      thermoscoreElement,
      "Thermoscore__fill___",
    );
    const textClass = getClassByPattern(
      thermoscoreElement,
      "Thermoscore__text___",
    );
    const avg = weightedTotal / totalWeight;
    const rounded = Math.ceil(avg / 5) * 5;
    const numberToLetter = Object.entries(letterToNumber).reduce(
      (acc, [k, v]) => {
        acc[v] = k;
        return acc;
      },
      {} as Record<number, string>,
    );
    const letterAvg = numberToLetter[rounded] ?? "N/A";
    const display = api.settings.lettergrade ? letterAvg : `${avg.toFixed(2)}%`;
    let warningHTML = "";
    if (hasInaccurateWeighting) {
      warningHTML = /* html */ `
            <div style="margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.6); opacity: 0.8; line-height: 1.3;">
              ⚠ Some weightings unavailable
            </div>
          `;
    }
    assessmentsList.insertBefore(
      stringToHTML(/* html */ `
          <div class="${assessmentItemClass}">
            <div class="${metaContainerClass}">
              <div class="${metaClass}">
                <div class="${simpleResultClass}">
                  <div class="${titleClass}">Subject Average</div>
                  ${warningHTML}
                </div>
              </div>
            </div>
            <div class="${thermoscoreClass}">
              <div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
                <div class="${textClass}" title="${hasInaccurateWeighting ? display + " (some weightings unavailable)" : display}">${display}</div>
              </div>
            </div>
          </div>
        `).firstChild!,
      assessmentsList.firstChild,
    );
    applySubjectColourToOverallResult();
  } finally {
    renderInFlight = false;
  }
 }
 function applySubjectColourToOverallResult() {
  const selectedAssessmentItem = document.querySelector(
    "[class*='AssessmentItem__AssessmentItem___'][class*='selected___']",
  ) || document.querySelector(
    "[class*='Collapsible__content___'] [class*='AssessmentItem__AssessmentItem___']",
  );
  const assessmentThermoscore = selectedAssessmentItem?.querySelector(
    "[class*='Thermoscore__Thermoscore___']",
  ) as HTMLElement | null;
  const overallResult = document.querySelector(
    "[class*='OverallResult__OverallResult___']",
  ) as HTMLElement | null;
  const assessableCriterionHeaders = document.querySelectorAll(
    "[class*='AssessableCriterion__header___']",
  );
  if (assessmentThermoscore && (overallResult || assessableCriterionHeaders.length > 0)) {
    const accentColour =
      getComputedStyle(assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
      getComputedStyle(assessmentThermoscore).getPropertyValue("--fill-colour").trim() ||
      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--item-colour").trim();
    if (accentColour) {
      overallResult?.style.setProperty("--assessment-accent-colour", accentColour);
      overallResult?.style.setProperty("--fill-colour", accentColour);
      assessableCriterionHeaders.forEach((el) => {
        (el as HTMLElement).style.setProperty("--assessment-accent-colour", accentColour);
        (el as HTMLElement).style.setProperty("--fill-colour", accentColour);
      });
    }
  }
 }
 export default assessmentsAveragePlugin;
@@ -1,388 +0,0 @@
 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, "&amp;")
    .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;
 }
@@ -1,26 +1,15 @@
 <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";
    sortBy: "due" | "grade" | "subject" | "title" | "year";
  }
  const HIDDEN_ASSESSMENTS_KEY = "betterseqta-hidden-assessments";
  function percentageToLetter(percentage: number): string {
    const letterMap: Record<number, string> = {
      100: "A+",
@@ -47,142 +36,53 @@
  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: OverviewIconName;
  }[] = [];
  function getAssessmentYear(a: any): number {
    const dateStr = a.due || a.date || a.dueDate || a.created;
    return dateStr ? new Date(dateStr).getFullYear() : 0;
  }
  function getAssessmentType(a: any): string {
    return (a.type || a.assessmentType || a.taskType || "Other").toString();
  }
  function getAssessmentGrade(a: any): string {
    const val = getGradeValue(a);
    if (val === null) return "No grade";
    return percentageToLetter(val);
  }
  function getGroupKey(assessment: any): string {
    switch (currentFilters.sortBy) {
      case "due":
        return determineStatus(assessment);
      case "year":
        return String(getAssessmentYear(assessment) || "Unknown");
      case "subject":
        return assessment.code || "Unknown";
      case "grade":
        return getAssessmentGrade(assessment);
      case "title":
        const first = (assessment.title || "?")[0].toUpperCase();
        return /[A-Z0-9]/.test(first) ? first : "#";
      default:
        return determineStatus(assessment);
    }
  }
  function sortCompare(a: any, b: any): number {
    return new Date(a.due || a.date || 0).getTime() - new Date(b.due || b.date || 0).getTime();
  }
  const STATUS_COLUMNS: {
    key: string;
    title: string;
    className: string;
    icon: OverviewIconName;
  }[] = [
    { 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 || {};
    const hiddenAssessmentIds = new Set(
      (JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String)
    );
    const filtered = data.assessments.filter((a: any) => {
      if (hiddenAssessmentIds.has(String(a.id))) return false;
      if (subjectFilters[a.code] === false) return false;
      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[]> = {};
    filtered.forEach((assessment) => {
      const key = getGroupKey(assessment);
      if (!groups[key]) groups[key] = [];
      groups[key].push(assessment);
    });
    Object.keys(groups).forEach((key) => {
      groups[key].sort(sortCompare);
    });
    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: 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: sortIcon }));
      } else {
        cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: sortIcon }));
      }
    }
    return { filteredAssessments: filtered, statusGroups: groups, columns: cols };
  }
  $: if (data) {
    const _ = currentFilters.sortBy && currentFilters.subject;
    const result = buildGroupsAndColumns();
    filteredAssessments = result.filteredAssessments;
    statusGroups = result.statusGroups;
    columns = result.columns;
  }
  function updateAssessments() {
-    const result = buildGroupsAndColumns();
+    filteredAssessments = data.assessments.filter((a: any) => {
-    filteredAssessments = result.filteredAssessments;
+      const subjectMatch =
-    statusGroups = result.statusGroups;
+        currentFilters.subject === "all" || a.code === currentFilters.subject;
-    columns = result.columns;
+      return subjectMatch;
    });
    filteredAssessments.sort((a: any, b: any) => {
      switch (currentFilters.sortBy) {
        case "due":
          return new Date(a.due).getTime() - new Date(b.due).getTime();
        case "grade":
          const gradeA = getGradeValue(a);
          const gradeB = getGradeValue(b);
          if (gradeA === null && gradeB === null) return 0;
          if (gradeA === null) return 1;
          if (gradeB === null) return -1;
          return gradeB - gradeA;
        case "subject":
          return a.code.localeCompare(b.code);
        case "title":
          return a.title.localeCompare(b.title);
        default:
          return 0;
      }
    });
    statusGroups = {
      UPCOMING: [],
      DUE_SOON: [],
      OVERDUE: [],
      SUBMITTED: [],
      MARKS_RELEASED: [],
    };
    filteredAssessments.forEach((assessment) => {
      const status = determineStatus(assessment);
      if (statusGroups[status]) {
        statusGroups[status].push(assessment);
      }
    });
  }
  function getDueDateClass(assessment: any): string {
@@ -223,56 +123,6 @@
    }
  }
  function hideAssessment(assessment: any) {
    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
    const id = String(assessment.id);
    if (!hidden.includes(id)) {
      hidden.push(id);
      localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(hidden));
      visibilityRefresh++;
      closeAllMenus();
      updateAssessments();
    }
  }
  function hideSubject(subjectCode: string) {
    const filters = { ...(settingsState.subjectfilters || {}) };
    filters[subjectCode] = false;
    settingsState.subjectfilters = filters;
    closeAllMenus();
    updateAssessments();
  }
  function unhideSubject(subjectCode: string) {
    const filters = { ...(settingsState.subjectfilters || {}) };
    filters[subjectCode] = true;
    settingsState.subjectfilters = filters;
    updateAssessments();
  }
  function unhideAssessment(assessmentId: string) {
    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
    const idStr = String(assessmentId);
    const filtered = hidden.filter((id: string) => id !== idStr);
    localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(filtered));
    visibilityRefresh++;
    updateAssessments();
  }
  function initSubjectFilters() {
    const filters = settingsState.subjectfilters || {};
    let updated = false;
    data.subjects.forEach((s: any) => {
      if (!Object.prototype.hasOwnProperty.call(filters, s.code)) {
        filters[s.code] = true;
        updated = true;
      }
    });
    if (updated) {
      settingsState.subjectfilters = filters;
    }
  }
  function checkForCelebration() {
    const overdueCount = statusGroups.OVERDUE?.length || 0;
    const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
@@ -347,37 +197,10 @@
    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}`;
  }
  let openMenuId: string | null = null;
  let showVisibilityPanel = false;
  let visibilityRefresh = 0;
  $: hiddenSubjects = data?.subjects?.filter(
    (s: any) => (settingsState.subjectfilters || {})[s.code] === false
  ) || [];
  $: hiddenAssessmentIds = (() => {
    visibilityRefresh; // Dependency for reactivity
    return new Set((JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String));
  })();
  $: hiddenAssessmentsWithInfo = data?.assessments?.filter(
    (a: any) => hiddenAssessmentIds.has(String(a.id))
  ) || [];
  $: hasHiddenItems = hiddenSubjects.length > 0 || hiddenAssessmentsWithInfo.length > 0;
  function toggleMenu(assessmentId: string, event: Event) {
    event.stopPropagation();
@@ -388,96 +211,71 @@
    openMenuId = null;
  }
-  $: if (data) {
+  $: {
-    initSubjectFilters();
+    if (data) {
-    updateAssessments();
+      updateAssessments();
-    void currentFilters.sortBy;
+    }
    void currentFilters.subject;
    void currentFilters.student;
  }
  const columns = [
    {
      key: "UPCOMING",
      title: "Upcoming",
      className: "column-upcoming",
      icon: "📅",
    },
    {
      key: "DUE_SOON",
      title: "Due Soon",
      className: "column-due-soon",
      icon: "⏰",
    },
    {
      key: "OVERDUE",
      title: "Overdue",
      className: "column-overdue",
      icon: "🚨",
    },
    {
      key: "SUBMITTED",
      title: "Submitted",
      className: "column-submitted",
      icon: "📝",
    },
    {
      key: "MARKS_RELEASED",
      title: "Marked",
      className: "column-marked",
      icon: "✅",
    },
  ];
 </script>
 <svelte:window on:click={closeAllMenus} />
-<div class="bsplus-overview-page">
+<div id="grid-view-container">
-  <header class="grid-view-header bsplus-overview-animate">
+  <div class="grid-view-header">
-    <div class="grid-view-header-text">
+    <h1 class="grid-view-title">Assessments</h1>
-      <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
      <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}
          <option value={subject.code}>{subject.code} - {subject.title}</option>
        {/each}
      </select>
-      <select class="filter-select" bind:value={currentFilters.sortBy} title="Group by - columns change based on this">
+      <select class="filter-select" bind:value={currentFilters.sortBy}>
-        <option value="due">Group: Status</option>
+        <option value="due">Sort by Due Date</option>
-        <option value="year">Group: Year</option>
+        <option value="grade">Sort by Grade</option>
-        <option value="subject">Group: Subject</option>
+        <option value="subject">Sort by Subject</option>
-        <option value="grade">Group: Grade</option>
+        <option value="title">Sort by Title</option>
        <option value="title">Group: Title (A-Z)</option>
      </select>
      {#if hasHiddenItems}
        <button
          class="visibility-toggle"
          class:active={showVisibilityPanel}
          on:click={() => (showVisibilityPanel = !showVisibilityPanel)}
          title="Manage hidden subjects and assessments"
        >
          <OverviewIcon name="eye" size={18} />
          <span>Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})</span>
        </button>
      {/if}
    </div>
-  </header>
+  </div>
-  {#if showVisibilityPanel && hasHiddenItems}
+  <div id="main-grid-content">
    <div class="visibility-panel bsplus-overview-animate">
      <h4 class="visibility-panel-title">Hidden items</h4>
      {#if hiddenSubjects.length > 0}
        <div class="visibility-section">
          <span class="visibility-label">Subjects:</span>
          <div class="visibility-chips">
            {#each hiddenSubjects as subject}
              <span class="visibility-chip">
                {subject.code}
                <button class="visibility-unhide" on:click={() => unhideSubject(subject.code)}>Show</button>
              </span>
            {/each}
          </div>
        </div>
      {/if}
      {#if hiddenAssessmentsWithInfo.length > 0}
        <div class="visibility-section">
          <span class="visibility-label">Assessments:</span>
          <div class="visibility-chips">
            {#each hiddenAssessmentsWithInfo as assessment}
              <span class="visibility-chip">
                {assessment.title}
                <button class="visibility-unhide" on:click={() => unhideAssessment(assessment.id)}>Show</button>
              </span>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  {/if}
  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
    {#if filteredAssessments.length === 0}
      <div class="empty-state">
-        <OverviewIcon name="clipboard-document-list" size={40} class="empty-icon" />
+        <div class="empty-icon">📋</div>
        <p>No assessments found matching your filters</p>
      </div>
    {:else}
@@ -488,15 +286,9 @@
              <div class="kanban-column {column.className}">
                <div class="column-header">
                  <div class="column-title">
-                  <span class="column-title-main">
+                    {column.icon} {column.title}
-                    <OverviewIcon
+                    <span class="column-count">{statusGroups[column.key].length}</span>
-                      name={column.icon ?? STATUS_COLUMN_ICONS[column.key] ?? "queue-list"}
+                  </div>
                      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}
@@ -515,9 +307,6 @@
                      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>
@@ -535,7 +324,11 @@
                            on:click={(e) => toggleMenu(assessment.id, e)}
                            aria-label="Open menu"
                          >
-                            <OverviewIcon name="ellipsis-vertical" size={16} />
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                              <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"}
@@ -547,12 +340,6 @@
                                Mark as Not Complete
                              </button>
                            {/if}
                            <button class="menu-item menu-item-hide" on:click={() => hideAssessment(assessment)}>
                              Hide assessment
                            </button>
                            <button class="menu-item menu-item-hide" on:click={() => hideSubject(assessment.code)}>
                              Hide subject ({assessment.code})
                            </button>
                          </div>
                        </div>
                      {/if}
@@ -562,8 +349,7 @@
                      {#if !assessment.results && !isCompleted}
                        <div class="assessment-meta">
                          <div class="due-date {dueDateClass}">
-                            <OverviewIcon name="calendar-days" size={14} />
+                            📅 {formatDate(assessment.due, assessment.submitted)}
                            {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
                          </div>
                        </div>
                      {/if}
@@ -1,11 +1,8 @@
 <script lang="ts">
  import OverviewIcon from "./OverviewIcon.svelte";
  export let error: string;
 </script>
-<div class="error-container bsplus-overview-animate">
+<div class="error-container">
  <OverviewIcon name="exclamation-circle" size={40} class="error-icon" />
  <p class="error-text">Failed to load assessments</p>
-  <p class="error-detail">{error}</p>
+  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
 </div>
@@ -1,32 +0,0 @@
 <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>
@@ -1,28 +1,7 @@
-<script lang="ts">
+<div id="grid-view-container">
-  import OverviewIcon from "./OverviewIcon.svelte";
+  <div class="grid-view-header">
-  import type { OverviewIconName } from "./icons";
+    <h1 class="grid-view-title">Assessments</h1>
-
+    <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>
@@ -30,20 +9,17 @@
        <option value="due">Sort by Due Date</option>
      </select>
    </div>
-  </header>
+  </div>
-  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
+  <div id="main-grid-content">
    <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">
-                <span class="column-title-main">
+                {column.icon} {column.title}
-                  <OverviewIcon name={column.icon} size={18} />
+                <span class="column-count">...</span>
                  {column.title}
                </span>
                <span class="column-count">…</span>
              </div>
            </div>
            <div class="column-cards" id="{column.key.toLowerCase()}-cards">
@@ -67,3 +43,36 @@
    </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>
@@ -1,26 +1,20 @@
-import {
+interface Subject {
-  activeSubjectsFromLearnPayload,
+  code: string;
-  assessmentBelongsToActiveSubjects,
+  programme: number;
-  filterAssessmentsForActiveSubjects,
+  metaclass: number;
-  type OverviewSubject,
+  title: string;
-} 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; engageAll?: boolean; studentId: number; data: any } | null =
+let cache: { time: number; data: any } | null = 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}`, {
@@ -32,9 +26,11 @@ async function fetchJSON(url: string, body: any) {
  return res.json();
 }
-async function loadSubjects(): Promise<OverviewSubject[]> {
+async function loadSubjects() {
  const res = await fetchJSON("/seqta/student/load/subjects?", {});
-  return activeSubjectsFromLearnPayload(res.payload);
+  return res.payload
    .filter((s: any) => s.active === 1)
    .flatMap((s: any) => s.subjects);
 }
 async function loadPrefs(student: number) {
@@ -60,18 +56,7 @@ async function loadUpcoming(student: number) {
  return res.payload;
 }
-function normalizeAssessmentDates(t: any, subject: OverviewSubject): any {
+async function loadPast(student: number, subjects: Subject[]) {
  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 loadPast(student: number, subjects: OverviewSubject[]) {
  const map: Record<number, any> = {};
  await Promise.all(
    subjects.map(async (s) => {
@@ -80,22 +65,10 @@ async function loadPast(student: number, subjects: OverviewSubject[]) {
        metaclass: s.metaclass,
        student,
      });
-      const processAssessment = (t: any) => {
+      if (res.payload.tasks) {
-        if (t && t.id) {
+        res.payload.tasks.forEach((t: any) => {
-          const merged = {
+          map[t.id] = t;
-            ...t,
+        });
            programmeID: t.programmeID || t.programme || s.programme,
            metaclassID: t.metaclassID || t.metaclass || s.metaclass,
            code: t.code || t.subject || s.code,
          };
          map[t.id] = normalizeAssessmentDates(merged, s);
        }
      };
      if (res.payload?.pending && Array.isArray(res.payload.pending)) {
        res.payload.pending.forEach(processAssessment);
      }
      if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
        res.payload.tasks.forEach(processAssessment);
      }
    }),
  );
@@ -131,65 +104,35 @@ async function loadSubmissions(student: number, assessments: any[]) {
  return submissionMap;
 }
 async function getLearnAssessmentsData(studentId: number) {
  const [subjects, colors, upcoming] = await Promise.all([
    loadSubjects(),
    loadPrefs(studentId),
    loadUpcoming(studentId),
  ]);
  const pastMap = await loadPast(studentId, subjects);
  const map: Record<number, any> = {};
  upcoming.forEach((a: any) => {
    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 = filterAssessmentsForActiveSubjects(
    Object.values(map),
    subjects,
  );
  const submissions = await loadSubmissions(studentId, allAssessments);
  allAssessments.forEach((assessment: any) => {
    assessment.submitted = submissions[assessment.id] || false;
  });
  return { assessments: allAssessments, subjects, colors, studentId };
 }
 export async function getAssessmentsData() {
  if (settingsState.mockNotices) {
    return getMockAssessmentsData();
  }
-  if (isSeqtaEngageExperience()) {
+  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
-    if (cache && Date.now() - cache.time < CACHE_MS && cache.engageAll) {
+  const [subjects, colors, upcoming] = await Promise.all([
-      return cache.data;
+    loadSubjects(),
-    }
+    loadPrefs(student),
    loadUpcoming(student),
  ]);
  const pastMap = await loadPast(student, subjects);
  const map: Record<number, any> = {};
  upcoming.forEach((a: any) => {
    map[a.id] = { ...a };
  });
  Object.values(pastMap).forEach((t: any) => {
    if (map[t.id]) Object.assign(map[t.id], t);
    else map[t.id] = t;
  });
-    const data = await getEngageAssessmentsData();
+  const allAssessments = Object.values(map);
-    cache = { time: Date.now(), studentId: 0, engageAll: true, data };
+  const submissions = await loadSubmissions(student, allAssessments);
    return data;
  }
-  const studentId = (await getUserInfo()).id;
+  allAssessments.forEach((assessment: any) => {
    assessment.submitted = submissions[assessment.id] || false;
  });
-  if (
+  const data = { assessments: allAssessments, subjects, colors };
-    cache &&
+  cache = { time: Date.now(), data };
    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;
 }
@@ -1,235 +0,0 @@
 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,
  };
 }
@@ -1,65 +0,0 @@
 /** 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",
 };
@@ -1,50 +1,9 @@
 import type { Plugin } from "../../core/types";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import { getAssessmentsData } from "./api";
-import { renderErrorState, renderGrid, renderSkeletonLoader } from "./ui";
+import { renderSkeletonLoader, renderErrorState } 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",
@@ -57,46 +16,33 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
  styles,
  run: async () => {
-    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.firstChild);
+    menu.insertBefore(gridItem, menu.children[1] || null);
-    const menuObserver = new MutationObserver(() => {
+    if (window.location.hash.includes("/assessments/overview")) {
-      ensureOverviewMenuPosition(menu, gridItem);
+      loadGridView();
    });
    menuObserver.observe(menu, { childList: true });
    if (isOverviewRoute()) {
      void loadGridView();
    }
    const clickHandler = (e: Event) => {
      e.preventDefault();
-      void loadGridView();
+      loadGridView();
    };
    gridItem.addEventListener("click", clickHandler);
    async function loadGridView() {
      await delay(1);
-
+      window.history.pushState({}, "", "/#?page=/assessments/overview");
-      if (isSeqtaEngageExperience()) {
+      document.title = "Overview ― SEQTA Learn";
        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;
@@ -110,7 +56,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
        .querySelector('[data-key="assessments"]')
        ?.classList.add("active");
-  main.innerHTML = '<div id="grid-view-container" class="bsplus-overview-host"></div>';
+      main.innerHTML = '<div id="grid-view-container"></div>';
      const container = document.getElementById(
        "grid-view-container",
      ) as HTMLElement;
@@ -119,6 +65,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
      try {
        const data = await getAssessmentsData();
        const { renderGrid } = await import("./ui");
        renderGrid(container, data);
      } catch (err) {
        console.error("Failed to load assessments:", err);
@@ -130,7 +77,6 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
    }
    return () => {
      menuObserver.disconnect();
      gridItem.removeEventListener("click", clickHandler);
      gridItem.remove();
    };
@@ -1,191 +1,84 @@
-/* ─── Design tokens (aligned with Grade Analytics) ─── */
+#grid-view-container {
 .bsplus-overview-host,
 .bsplus-overview-root,
 #grid-view-container.bsplus-overview-root {
  --bsplus-overview-radius: 16px;
  --bsplus-overview-radius-sm: 12px;
  --bsplus-overview-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bsplus-overview-surface: var(--background-primary, #ffffff);
  --bsplus-overview-surface-2: var(--background-secondary, #f8fafc);
  --bsplus-overview-text: var(--text-primary, #1a1a1a);
  --bsplus-overview-muted: color-mix(
    in srgb,
    var(--bsplus-overview-text) 55%,
    transparent
  );
  --bsplus-overview-border: color-mix(
    in srgb,
    var(--theme-offset-bg, var(--background-secondary, #e2e8f0)) 78%,
    transparent
  );
  --bsplus-overview-shadow: 0 5px 16px 6px rgba(0, 0, 0, 0.08);
  --bsplus-overview-shadow-hover: 0 8px 24px 8px rgba(0, 0, 0, 0.12);
  --bsplus-overview-accent: var(--better-main, #007bff);
 }
 .bsplus-overview-root.dark {
  --bsplus-overview-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.35);
  --bsplus-overview-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.45);
 }
@keyframes bsplus-overview-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 .bsplus-overview-animate {
  animation: bsplus-overview-fade-in-up 0.5s var(--bsplus-overview-ease) forwards;
 }
@media (prefers-reduced-motion: reduce) {
  .bsplus-overview-animate {
    animation: none;
  }
 }
 .bsplus-overview-delay-1 {
  animation-delay: 80ms;
 }
 .bsplus-overview-icon {
  flex-shrink: 0;
 }
 #grid-view-container,
 .bsplus-overview-root {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-height: min(100%, calc(100vh - 6rem));
  box-sizing: border-box;
  padding: 1.5rem 1.25rem 2rem;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--bsplus-overview-text);
  gap: 1.25rem;
 }
 .grid-view-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  gap: 1.25rem;
+  padding: 1rem;
  flex-shrink: 0;
  padding: 0;
 }
 .grid-view-header-text {
  min-width: 0;
 }
 .grid-view-title {
  font-size: 1.875rem !important;
  font-weight: 700;
-  letter-spacing: -0.02em;
+  color: #1a1a1a;
  line-height: 1.2;
  color: var(--bsplus-overview-text);
  margin: 0 0 0.35rem;
 }
 .grid-view-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bsplus-overview-muted);
 }
-.grid-view-filters,
+/* Dark mode support */
-.bsplus-overview-toolbar {
+.dark .grid-view-title {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .grid-view-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: var(--bsplus-overview-radius);
  background: var(--bsplus-overview-surface);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
 .filter-select {
-  appearance: none;
+  background: #ffffff !important;
-  -webkit-appearance: none;
+  border: 2px solid #e2e8f0;
-  -moz-appearance: none;
+  border-radius: 8px;
-  background: var(--bsplus-overview-surface-2) !important;
+  color: #1a1a1a;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  padding: 0.75rem 1rem;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1rem !important;
  border: 2px solid var(--bsplus-overview-border);
  border-radius: var(--bsplus-overview-radius-sm);
  color: var(--bsplus-overview-text);
  color-scheme: light;
  padding: 0.65rem 2.25rem 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
-  font-family: inherit;
+  transition: all 0.2s ease;
  line-height: 1.2;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  min-width: 11rem;
+  min-width: 180px;
  min-height: 2.75rem;
 }
 .filter-select::-ms-expand {
  display: none;
 }
 .filter-select option {
  background: var(--bsplus-overview-surface);
  color: var(--bsplus-overview-text);
 }
 .filter-select:focus {
  outline: none;
-  border-color: var(--bsplus-overview-accent);
+  border-color: #d41e3a;
-  box-shadow: 0 0 0 3px
+  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
    color-mix(in srgb, var(--bsplus-overview-accent) 22%, transparent);
 }
 .filter-select:hover {
-  border-color: color-mix(
+  border-color: #cbd5e1;
-    in srgb,
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    var(--bsplus-overview-accent) 35%,
    var(--bsplus-overview-border)
  );
 }
 /* Dark mode dropdowns */
 .dark .filter-select {
-  background: var(--bsplus-overview-surface-2) !important;
+  background: var(--background-primary) !important;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  border-color: var(--background-secondary);
-  color-scheme: dark;
+  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .dark .filter-select:focus {
  border-color: #d41e3a;
  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.2);
 }
 .dark .filter-select:hover {
  border-color: var(--background-secondary);
  background: var(--background-secondary);
 }
 .dark .filter-select option {
-  background: var(--bsplus-overview-surface);
+  background: var(--background-primary);
-  color: var(--bsplus-overview-text);
+  color: var(--text-primary);
 }
 .bsplus-overview-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
 }
 #main-grid-content {
@@ -206,62 +99,68 @@
 .kanban-column-parent {
  flex: 0 0 320px;
 }
 .kanban-column {
  max-height: 100%;
-  background: color-mix(in srgb, var(--bsplus-overview-surface-2) 88%, transparent);
+  background: #f8fafc;
-  border-radius: var(--bsplus-overview-radius);
+  border-radius: 12px;
  box-shadow: 0 0 0 2px #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
-  border: 1px solid var(--bsplus-overview-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--bsplus-overview-shadow);
  overflow: hidden;
  transition:
    box-shadow 0.25s var(--bsplus-overview-ease),
    transform 0.25s var(--bsplus-overview-ease);
 }
-.kanban-column:hover {
+/* Dark mode columns */
-  box-shadow: var(--bsplus-overview-shadow-hover);
+.dark .kanban-column {
  background: var(--background-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
 .column-header {
-  padding: 1rem 1.15rem;
+  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--bsplus-overview-border);
+  border-bottom: 2px solid #e2e8f0;
-  border-radius: var(--bsplus-overview-radius) var(--bsplus-overview-radius) 0 0;
+  background: #ffffff;
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
 }
 /* Dark mode column headers */
 .dark .column-header {
  background: var(--background-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 .column-title {
-  font-size: 0.9375rem;
+  font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
 }
-.column-title-main {
+.dark .column-title {
-  display: inline-flex;
+  color: var(--text-primary);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
 }
 .column-count {
-  background: color-mix(in srgb, var(--bsplus-overview-muted) 18%, transparent);
+  background: #e2e8f0;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
-  padding: 0.2rem 0.55rem;
+  padding: 0.25rem 0.5rem;
-  border-radius: 999px;
+  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
-  flex-shrink: 0;
+}
 .dark .column-count {
  background: var(--background-secondary);
  color: var(--text-primary);
 }
 .column-cards {
@@ -275,28 +174,33 @@
 /* Assessment Cards */
 .assessment-card {
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border-radius: var(--bsplus-overview-radius-sm);
+  border-radius: 8px;
  padding: 1rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition:
+  transition: all 0.2s ease;
    transform 0.2s var(--bsplus-overview-ease),
    box-shadow 0.2s var(--bsplus-overview-ease),
    border-color 0.2s ease;
  cursor: pointer;
  position: relative;
-  border: 1px solid var(--bsplus-overview-border);
+  border-left: 4px solid var(--subject-color, #d41e3a);
-  border-left: 4px solid var(--subject-color, var(--bsplus-overview-accent));
+  border: 1px solid #e2e8f0;
 }
 .assessment-card:hover {
-  box-shadow: var(--bsplus-overview-shadow-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
-  border-color: color-mix(
+  border-color: #cbd5e1;
-    in srgb,
+}
-    var(--bsplus-overview-accent) 22%,
+
-    var(--bsplus-overview-border)
+/* Dark mode cards */
-  );
+.dark .assessment-card {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 .dark .assessment-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
 }
 .card-labels {
@@ -317,16 +221,7 @@
 }
 .label-subject {
-  background: color-mix(in srgb, var(--subject-color, var(--bsplus-overview-accent)) 88%, transparent);
+  background: var(--subject-color, #d41e3a);
 }
 .label-student {
  background: rgba(99, 102, 241, 0.9);
  text-transform: none;
 }
 .dark .label-student {
  background: rgba(99, 102, 241, 0.75);
 }
 .card-menu {
@@ -341,17 +236,14 @@
  border: none !important;
  padding: 0.25rem !important;
  cursor: pointer;
-  border-radius: 8px;
+  border-radius: 4px;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
-  transition:
+  transition: all 0.2s ease;
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  display: flex !important;
  align-items: center;
  justify-content: center;
-  width: 28px !important;
+  width: 24px !important;
-  height: 28px !important;
+  height: 24px !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
@@ -360,32 +252,44 @@
 }
 .menu-button:hover {
-  background: color-mix(
+  background: #f1f5f9 !important;
-    in srgb,
+  color: #1a1a1a;
    var(--bsplus-overview-surface-2) 90%,
    transparent
  ) !important;
  color: var(--bsplus-overview-text);
  transform: scale(1.05) !important;
 }
-.menu-button:focus-visible {
+.menu-button svg {
-  box-shadow: 0 0 0 2px
+  width: 16px !important;
-    color-mix(in srgb, var(--bsplus-overview-accent) 35%, transparent) !important;
+  height: 16px !important;
  fill: currentColor !important;
  display: block !important;
 }
 .dark .menu-button {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .dark .menu-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
 }
 .menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border: 1px solid var(--bsplus-overview-border);
+  border: 1px solid #e2e8f0;
-  border-radius: var(--bsplus-overview-radius-sm);
+  border-radius: 6px;
-  box-shadow: var(--bsplus-overview-shadow-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 160px;
+  min-width: 140px;
  z-index: 30;
  margin-top: 4px;
-  padding: 0.25rem;
+}
 .dark .menu-dropdown {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 .menu-item {
@@ -396,19 +300,22 @@
  border: none;
  text-align: left;
  cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.2s ease;
  white-space: nowrap;
  border-radius: 8px;
 }
 .menu-item:hover {
-  background: color-mix(
+  background: #f8fafc;
-    in srgb,
+}
-    var(--bsplus-overview-surface-2) 90%,
+
-    transparent
+.dark .menu-item {
-  );
+  color: var(--text-primary);
 }
 .dark .menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
 }
 .menu-item.mark-completed {
@@ -429,138 +336,17 @@
  color: #ef4444;
 }
 .menu-item.menu-item-hide {
  color: #64748b;
 }
 .dark .menu-item.menu-item-hide {
  color: var(--text-primary);
  opacity: 0.8;
 }
 .visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--bsplus-overview-radius-sm);
  border: 2px solid var(--bsplus-overview-border);
  background: var(--bsplus-overview-surface-2);
  color: var(--bsplus-overview-muted);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  min-height: 2.75rem;
 }
 .visibility-toggle:hover {
  border-color: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 35%,
    var(--bsplus-overview-border)
  );
  color: var(--bsplus-overview-text);
  transform: scale(1.02);
 }
 .visibility-toggle.active {
  border-color: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 45%,
    var(--bsplus-overview-border)
  );
  background: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 10%,
    var(--bsplus-overview-surface-2)
  );
  color: var(--bsplus-overview-accent);
 }
 .visibility-panel {
  padding: 1rem 1.15rem;
  margin: 0;
  background: var(--bsplus-overview-surface);
  border-radius: var(--bsplus-overview-radius);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
 .visibility-panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bsplus-overview-text);
  margin: 0 0 0.75rem;
 }
 .visibility-section {
  margin-bottom: 0.5rem;
 }
 .visibility-section:last-child {
  margin-bottom: 0;
 }
 .visibility-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bsplus-overview-muted);
  display: block;
  margin-bottom: 0.35rem;
 }
 .visibility-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
 }
 .visibility-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--bsplus-overview-surface-2) 92%, transparent);
  border: 1px solid var(--bsplus-overview-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--bsplus-overview-text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .visibility-unhide {
  padding: 0.125rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  background: var(--bsplus-overview-accent);
  color: var(--text-color, #fff);
  cursor: pointer;
  transition: transform 0.2s var(--bsplus-overview-ease);
  flex-shrink: 0;
 }
 .visibility-unhide:hover {
  transform: scale(1.05);
 }
 .assessment-title {
  font-size: 0.875rem;
  font-weight: 600;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.75rem 0;
-  line-height: 1.45;
+  line-height: 1.4;
-  padding-right: 2rem;
+  padding-right: 2rem; /* Make room for menu button */
 }
 .dark .assessment-title {
  color: var(--text-primary);
 }
 .assessment-meta {
@@ -569,7 +355,12 @@
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.75rem;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
 }
 .dark .assessment-meta {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .due-date {
@@ -597,7 +388,11 @@
  justify-content: flex-start;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
-  border-top: 1px solid var(--bsplus-overview-border);
+  border-top: 1px solid #e5e7eb;
 }
 .dark .card-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
 }
 .grade-display {
@@ -640,101 +435,46 @@
  border-color: var(--background-secondary);
 }
-/* Column header gradients — softer tints, same status colours */
+/* Column-specific styling */
 .column-upcoming .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #38bdf8 9%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-due-soon .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #fbbf24 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-overdue .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f87171 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-submitted .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f59e0b 9%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-marked .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #34d399 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-custom .column-header {
  background: linear-gradient(
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, var(--bsplus-overview-accent) 8%, var(--bsplus-overview-surface)) 100%
  );
 }
 /* Dark mode column headers */
 .dark .column-upcoming .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #3b82f6 14%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-due-soon .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f59e0b 14%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-overdue .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #ef4444 13%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-submitted .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #d97706 12%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-marked .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #10b981 13%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-custom .column-header {
  background: linear-gradient(
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, var(--bsplus-overview-accent) 12%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 /* Subject filter view */
@@ -790,54 +530,73 @@
 }
 /* Loading and error states */
-.loading-container,
+.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .loading-container {
  background: var(--background-primary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #d41e3a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
 .dark .loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #d41e3a;
 }
 .loading-text {
  margin-top: 1rem;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
 }
 .dark .loading-text {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 3rem 2rem;
+  padding: 4rem 0;
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border-radius: var(--bsplus-overview-radius);
+  border-radius: 12px;
-  border: 1px solid var(--bsplus-overview-border);
+  border: 2px solid #fecaca;
-  box-shadow: var(--bsplus-overview-shadow);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-.loading-spinner {
+.dark .error-container {
-  width: 3rem;
+  background: var(--background-primary);
-  height: 3rem;
+  border-color: #991b1b;
-  border: 4px solid var(--bsplus-overview-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-top-color: var(--bsplus-overview-accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
 }
 .loading-text {
  margin-top: 1rem;
  color: var(--bsplus-overview-muted);
  font-size: 0.875rem;
  font-weight: 500;
 }
 .error-icon {
  color: #ef4444;
  margin-bottom: 0.75rem;
  opacity: 0.85;
 }
 .error-text {
  color: #ef4444;
  font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
-  margin: 0 0 0.35rem;
+  margin-bottom: 0.5rem;
 }
 .error-detail {
  color: var(--bsplus-overview-muted);
  font-size: 0.875rem;
  margin: 0;
  text-align: center;
  max-width: 28rem;
 }
 .empty-state {
@@ -845,20 +604,15 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  gap: 0.75rem;
+  padding: 2rem;
-  padding: 3rem 2rem;
+  color: #64748b;
-  color: var(--bsplus-overview-muted);
+  font-size: 0.875rem;
  font-size: 0.9375rem;
  text-align: center;
  border-radius: var(--bsplus-overview-radius);
  background: var(--bsplus-overview-surface);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
-.empty-icon {
+.dark .empty-state {
-  color: var(--bsplus-overview-muted);
+  color: var(--text-primary);
-  opacity: 0.55;
+  opacity: 0.7;
 }
 .empty-column {
@@ -878,6 +632,12 @@
  opacity: 0.7;
 }
 .empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
@@ -953,10 +713,8 @@
 /* Responsive design */
@media (max-width: 768px) {
-  #grid-view-container,
+  #grid-view-container {
-  .bsplus-overview-root {
+    padding: 1rem;
    padding: 1.25rem 1rem 1.5rem;
    gap: 1rem;
  }
  .grid-view-header {
@@ -965,29 +723,23 @@
    align-items: stretch;
  }
-  .grid-view-filters,
+  .grid-view-filters {
-  .bsplus-overview-toolbar {
+    justify-content: center;
-    justify-content: stretch;
+    flex-wrap: wrap;
  }
  .kanban-board {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }
  .kanban-column-parent {
    flex: none;
    width: 100%;
  }
  .kanban-column {
    flex: none;
    max-height: none;
  }
  .filter-select {
-    min-width: 0;
+    min-width: 140px;
    flex: 1 1 140px;
  }
 }
@@ -1,155 +1,45 @@
 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) unmount(currentApp);
+  if (currentApp) {
-  prepareContainer(container);
+    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(AssessmentsOverview, container, { data });
 }
 export function renderSkeletonLoader(container: HTMLElement) {
-  if (currentApp) unmount(currentApp);
+  if (currentApp) {
-  prepareContainer(container);
+    unmount(currentApp);
  }
  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 });
 }
@@ -1,115 +1,3 @@
 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();
@@ -1,5 +1,5 @@
 import type { Plugin } from "@/plugins/core/types";
-import { booleanSetting, componentSetting, defineSettings, numberSetting } from "@/plugins/core/settingsHelpers";
+import { componentSetting, defineSettings, numberSetting, booleanSetting } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import BackgroundMusicSetting from "./BackgroundMusicSetting.svelte";
 import localforage from "localforage";
@@ -7,7 +7,7 @@ import localforage from "localforage";
 const settings = defineSettings({
  uploader: componentSetting({
    title: "Background Music",
-    description: "Upload a .wav or .mp3 audio file to play in the background",
+    description: "Upload a .wav or .mp3 audio file to play in the background.",
    component: BackgroundMusicSetting,
  }),
  volume: numberSetting({
@@ -99,7 +99,7 @@ async function startPlayback(volume: number): Promise<void> {
 const backgroundMusicPlugin: Plugin<typeof settings> = {
  id: "background-music",
  name: "Background Music",
-  description: "Play your own music in the background while SEQTA is open",
+  description: "Play your own music in the background while SEQTA is open.",
  version: "1.0.0",
  settings,
  styles,
@@ -142,6 +142,7 @@ const backgroundMusicPlugin: Plugin<typeof settings> = {
      if (!currentAudio) return;
      const pauseOnHidden = (api.settings as any).pauseOnHidden ?? true;
      if (!pauseOnHidden) return;
      if (document.visibilityState === "hidden") {
        if (visibilityResumeTimeout !== null) {
          clearTimeout(visibilityResumeTimeout);
@@ -182,3 +183,5 @@ const backgroundMusicPlugin: Plugin<typeof settings> = {
 };
 export default backgroundMusicPlugin;
@@ -5,9 +5,7 @@ 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 = () => {
@@ -36,42 +34,48 @@ 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(
+      const confirmed = confirm("Are you sure you want to reset the search index and storage?");
        "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;
-      try {
+      if (confirmed) {
-        // `resetSearchIndexes` is a tiny statically-imported helper: no
+        try {
-        // dynamic chunks to chase, so the button keeps working even when
+          // Dynamically import the worker manager to avoid loading heavy dependencies
-        // the settings page has been open across an extension update.
+          const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
-        await resetSearchIndexes();
+          const workerManager = VectorWorkerManager.getInstance();
-        alert(
+          await workerManager.resetWorker();
-          "Search index and storage were reset.\n\nReload this tab to regenerate the index.",
+          console.log("Vector worker reset successfully");
-        );
+        } catch (e) {
-      } catch (e) {
+          console.warn("Failed to reset vector worker:", e);
-        alert(
+        }
-          "Failed to reset index: " +
+
-            String(e) +
+        // Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
-            "\n\nTry closing other browser tabs and try again.",
+        const deleteDb = (dbName: string) => {
-        );
+          return new Promise<void>((resolve, reject) => {
            const req = indexedDB.deleteDatabase(dbName);
            req.onsuccess = () => resolve();
            req.onerror = () => reject(req.error);
            req.onblocked = () => {
              reject(new Error(`One database is open, failed to remove: ${dbName}`));
            };
          });
        };
        try {
          await deleteDb("embeddiaDB");
          await deleteDb("betterseqta-index");
          alert("Search index and storage have been reset.");
        } catch (e) {
          alert("Failed to reset one or more databases: " + String(e));
        }
      }
    },
  }),
 });
 // Create the lazy plugin definition - this loads immediately but doesn't import heavy dependencies
-const globalSearchPlugin = defineLazyPlugin({
+export default defineLazyPlugin({
  id: "global-search",
  name: "Global Search",
  description: "Quick search for everything in SEQTA",
@@ -79,20 +83,9 @@ const globalSearchPlugin = defineLazyPlugin({
  settings,
  disableToggle: true,
  defaultEnabled: false,
  beta: true,
  styles: styles,
  // 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;
@@ -35,8 +35,6 @@
  let isIndexing = $state(false);
  let completedJobs = $state(0);
  let totalJobs = $state(0);
  let indexingStatus = $state<string | null>(null);
  let indexingDetail = $state<string | null>(null);
  let commandPalleteOpen = $state(false);
  let searchTerm = $state('');
@@ -48,13 +46,6 @@
  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;
  };
@@ -119,12 +110,10 @@
  onMount(() => {
    const progressHandler = (event: CustomEvent) => {
-      const { completed, total, indexing, status, detail } = event.detail;
+      const { completed, total, indexing } = event.detail;
      completedJobs = completed;
      totalJobs = total;
      isIndexing = indexing;
      indexingStatus = status || null;
      indexingDetail = detail || null;
    };
    window.addEventListener('indexing-progress', progressHandler as EventListener);
@@ -173,46 +162,27 @@
    });
    const term = searchTerm.trim().toLowerCase();
    const requestId = ++searchRequestId;
    if (commandsFuse && dynamicContentFuse) {
-      const results = await doSearch(
+      combinedResults = await doSearch(
        term, 
        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;
  };
-  // Optimized debounce: shorter delay for better responsiveness
+  const debouncedPerformSearch = debounce(performSearch, 20);
  const debouncedPerformSearch = debounce(performSearch, 50);
  $effect(() => {
    if (commandPalleteOpen) {
      if (searchTerm === '') {
        // Immediate search for empty query (shows recent items)
        performSearch();
      } else if (searchTerm.length <= 2) {
        // Immediate search for very short queries
        performSearch();
      } else {
        // Debounced search for longer queries
        debouncedPerformSearch();
      }
      tick().then(() => searchbar?.focus()); 
@@ -419,6 +389,19 @@
                {@render Shortcut({ text: 'Select', keybind: ['↵']})}
                {/if}
              </div>
              {#if isIndexing}
                <div class="inset-x-0 top-0">
                  <div class="absolute right-2 -bottom-4 text-[10px] text-zinc-500 dark:text-zinc-400">
                    Indexing
                  </div>
                  <div class="overflow-hidden h-0.5 bg-zinc-200 dark:bg-zinc-700">
                    <div 
                      class="h-full bg-blue-500 transition-all duration-300 ease-out"
                      style="width: {(completedJobs / totalJobs) * 100}%"
                    ></div>
                  </div>
                </div>
              {/if}
            </div>
          {/if}
        </div>
@@ -1,89 +0,0 @@
 <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>
@@ -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,
      }),
    });
@@ -4,8 +4,8 @@ import {
  booleanSetting,
  buttonSetting,
  defineSettings,
  hotkeySetting,
  Setting,
  hotkeySetting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import { waitForElm } from "@/seqta/utils/waitForElm";
@@ -14,11 +14,6 @@ import { initVectorSearch } from "../search/vector/vectorSearch";
 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 = () => {
@@ -47,85 +42,39 @@ 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(
+      const confirmed = confirm("Are you sure you want to reset the search index and storage?");
        "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 {
          // Import resetDatabase function to properly close connections
          const { resetDatabase } = await import("../indexing/db");
          // Reset the vector worker first
-          try {
+          const workerManager = VectorWorkerManager.getInstance();
-            const workerManager = VectorWorkerManager.getInstance();
+          await workerManager.resetWorker();
-            await workerManager.resetWorker();
+          console.log("Vector worker reset successfully");
            console.log("Vector worker reset successfully");
          } catch (e) {
            console.warn("Failed to reset vector worker:", e);
          }
          // Close all database connections properly before deletion
          try {
            await resetDatabase();
          } 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 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.");
          }
        } catch (e) {
-          alert("Failed to reset index: " + String(e));
+          console.warn("Failed to reset vector worker:", e);
        }
        // Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
        const deleteDb = (dbName: string) => {
          return new Promise<void>((resolve, reject) => {
            const req = indexedDB.deleteDatabase(dbName);
            req.onsuccess = () => resolve();
            req.onerror = () => reject(req.error);
            req.onblocked = () => {
              reject(new Error(`One database is open, failed to remove: ${dbName}`));
            };
          });
        };
        try {
          await deleteDb("embeddiaDB");
          await deleteDb("betterseqta-index");
          alert("Search index and storage have been reset.");
        } catch (e) {
          alert("Failed to reset one or more databases: " + String(e));
        }
      }
    },
@@ -145,9 +94,6 @@ class GlobalSearchPlugin extends BasePlugin<typeof settings> {
  @Setting(settings.runIndexingOnLoad)
  runIndexingOnLoad!: boolean;
  @Setting(settings.passiveIndexing)
  passiveIndexing!: boolean;
  @Setting(settings.resetIndex)
  resetIndex!: () => void;
 }
@@ -162,41 +108,12 @@ const globalSearchPlugin: Plugin<typeof settings> = {
  settings: settingsInstance.settings,
  disableToggle: true,
  defaultEnabled: false,
  beta: true,
  styles: styles,
  run: async (api) => {
    const appRef = { current: null };
    // Run the version check BEFORE we open any IndexedDB connections.
    // On a normal load (no version change) this is just a string compare
    // and a manifest read, so the cost is negligible. On a real update,
    // we want the database wipe to complete before `IndexedDbManager`
    // grabs a handle on `embeddiaDB`, otherwise the delete request comes
    // back blocked.
    try {
      const wasUpdated = await checkAndHandleUpdate();
      if (wasUpdated) {
        console.log(
          "[Global Search] Extension updated — search index reset; the next indexing pass will repopulate.",
        );
      }
    } 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", {
        primaryKey: "id",
@@ -209,16 +126,10 @@ const globalSearchPlugin: Plugin<typeof settings> = {
    initVectorSearch();
-    // Warm up vector worker in background to improve initial response time (skip in Firefox)
+    // Warm up vector worker in background to improve initial response time
    setTimeout(async () => {
      try {
-        // Only initialize worker if vector search is supported
+        VectorWorkerManager.getInstance();
        const { isVectorSearchSupported } = await import("../utils/browserDetection");
        if (isVectorSearchSupported()) {
          VectorWorkerManager.getInstance();
        } else {
          console.debug("[Global Search] Skipping vector worker warm-up (Firefox detected - using text search only)");
        }
      } catch (error) {
        console.warn("[Global Search] Vector worker warm-up failed:", error);
      }
@@ -236,17 +147,6 @@ 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();
@@ -269,14 +169,6 @@ 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();
@@ -8,12 +8,7 @@ import browser from "webextension-polyfill";
 export function mountSearchBar(
  titleElement: Element,
  api: any,
-  appRef: {
+  appRef: { current: any; storageChangeHandler?: any },
    current: any;
    storageChangeHandler?: any;
    progressHandler?: any;
    clearDoneFlashTimer?: () => void;
  },
 ) {
  if (titleElement.querySelector(".search-trigger")) {
    return;
@@ -23,216 +18,9 @@ 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";
  const progressBarWrapper = document.createElement("div");
  progressBarWrapper.className = "search-progress-bar-wrapper";
  const progressTrack = document.createElement("div");
  progressTrack.className = "search-progress-track";
  const progressBar = document.createElement("div");
  progressBar.className = "search-progress-bar";
  progressTrack.appendChild(progressBar);
  progressBarWrapper.appendChild(progressTrack);
  // Use a block-level <div> so the label reliably participates in flex
  // layout. A <span> defaults to `display: inline`, which silently ignores
  // `max-width`, `overflow`, and `text-overflow: ellipsis`, and was the
  // reason the label appeared blank when the bar was visible.
  const progressText = document.createElement("div");
  progressText.className = "search-progress-text";
  progressText.setAttribute("aria-live", "polite");
  searchAnchor.appendChild(searchButton);
  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;
  let doneFadeTimer: ReturnType<typeof setTimeout> | null = null;
  /** Captures `wasIndexing && !indexing` for the current dispatcher tick */
  let indexingJustStoppedFlag = false;
  const DONE_HOLD_MS = 5000;
  const DONE_FADE_MS = 550;
  /** Treat as failure copy — plain “Done!” would be misleading */
  const statusLooksRough = (s: string) =>
    /\b(fail|error|cancel)\b/i.test(s);
  const truncateStatus = (s: string, max = 44) =>
    s.length > max ? s.slice(0, max - 1) + "…" : s;
  const clearDoneFlashTimer = () => {
    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 as {
      completed?: number;
      total?: number;
      indexing?: boolean;
      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 */ `
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -245,7 +33,7 @@ export function mountSearchBar(
  };
  updateSearchButtonDisplay();
-  titleElement.appendChild(searchWrapper);
+  titleElement.appendChild(searchButton);
  // Listen for hotkey setting changes
  const handleStorageChange = (changes: any, area: string) => {
@@ -284,12 +72,7 @@ export function mountSearchBar(
  }
 }
-export function cleanupSearchBar(appRef: {
+export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any }) {
  current: any;
  storageChangeHandler?: any;
  progressHandler?: any;
  clearDoneFlashTimer?: () => void;
 }) {
  if (appRef.current) {
    try {
      unmount(appRef.current);
@@ -299,29 +82,11 @@ export function cleanupSearchBar(appRef: {
    }
  }
-  try {
+  // Remove search trigger button
-    appRef.clearDoneFlashTimer?.();
+  const searchTrigger = document.querySelector(".search-trigger");
-  } catch {
+  if (searchTrigger) {
-    /* ignore */
+    searchTrigger.remove();
  }
  appRef.clearDoneFlashTimer = undefined;
  // Remove progress event listener
  if (appRef.progressHandler) {
    window.removeEventListener('indexing-progress', appRef.progressHandler as EventListener);
    appRef.progressHandler = null;
  }
  // Remove search trigger wrapper (which contains the button and progress UI)
  const searchWrapper = document.querySelector(".search-trigger-wrapper");
  if (searchWrapper) {
    searchWrapper.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]");
@@ -1,72 +1,15 @@
 /*
 * 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;
-  border-radius: 0;
+  margin-left: 10px;
  border-radius: 8px;
  cursor: pointer;
-  transition:
+  transition: all 0.2s ease;
-    background-color 0.2s ease,
+  margin-right: auto !important;
    border-color 0.2s ease;
  padding: 3px 12px;
-  box-shadow: none;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  user-select: none;
@@ -85,12 +28,10 @@
  }
 }
-/* Light mode chip */
+/* Light mode styles */
 .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 {
@@ -103,10 +44,8 @@
 }
 .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 {
@@ -118,17 +57,7 @@
  }
 }
 /*
 * 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;
@@ -140,153 +69,3 @@
 .dark .highlight {
  background-color: rgba(255, 230, 100, 0.4);
 }
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
 }
 .animate-shimmer {
  animation: shimmer 2s infinite;
 }
 /*
 * Thin track flush under `.search-trigger` — same width as chip, shared
 * `overflow:hidden` rounding on `.search-trigger-anchor`.
 */
 .search-progress-bar-wrapper {
  flex: none;
  height: 0;
  min-height: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  pointer-events: none;
  transition: height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
 }
 .search-progress-bar-wrapper.is-active {
  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 {
  position: relative;
  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.28),
    transparent
  );
  animation: shimmer 2s infinite;
 }
 /*
 * 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;
 }
 /* While indexing: same neutral label colour as default (only “Done!” is green). */
 .search-progress-text.is-active {
  opacity: 1;
  transform: translateX(0);
  color: #475569;
 }
 /* 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: #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;
 }
@@ -1,161 +0,0 @@
 /**
 * 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" },
 };
@@ -28,40 +28,6 @@ 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`;
@@ -93,350 +59,29 @@ export const actionMap: Record<string, ActionHandler<any>> = {
  }) as ActionHandler<any>,
  assessment: (async (item: IndexItem & { metadata: AssessmentMetadata }) => {
-    // Deep clone the entire item to avoid Firefox XrayWrapper issues
+    if (item.metadata.isMessageBased) {
    // Firefox XrayWrapper prevents direct access to nested properties
    let itemClone: IndexItem & { metadata: AssessmentMetadata };
    let metadata: AssessmentMetadata;
    try {
      // First try to clone the entire item
      itemClone = JSON.parse(JSON.stringify(item));
      metadata = itemClone.metadata || {};
    } catch (e) {
      console.warn("[Assessment Action] Failed to clone item, trying to clone metadata separately:", e);
      try {
        // If full clone fails, try cloning just metadata
        metadata = JSON.parse(JSON.stringify(item.metadata || {}));
        itemClone = { ...item, metadata };
      } catch (e2) {
        console.warn("[Assessment Action] Failed to clone metadata, using direct access:", e2);
        itemClone = item;
        metadata = item.metadata || {} as AssessmentMetadata;
      }
    }
    // 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 {
        const value = bag[key];
        if (value !== undefined && value !== null) {
          return value;
        }
        if (altKey) {
          const altValue = bag[altKey];
          if (altValue !== undefined && altValue !== null) {
            return altValue;
          }
        }
        try {
          const keys = Object.keys(bag);
          for (const k of keys) {
            if (k === key || k === altKey) {
              const val = bag[k];
              if (val !== undefined && val !== null) {
                return val;
              }
            }
          }
        } catch {
          // Object.keys might fail on XrayWrapper, that's okay
        }
        return undefined;
      } catch (e) {
        console.warn(`[Assessment Action] Failed to access metadata.${key}:`, e);
        return undefined;
      }
    };
    if (getMetadataValue('isMessageBased')) {
      window.location.hash = `#?page=/messages`;
      await waitForElm('[class*="Viewer__Viewer___"] > div', true, 20);
      // Select the specific direct message
      ReactFiber.find('[class*="Viewer__Viewer___"] > div').setState({
-        selected: new Set([getMetadataValue('messageId')]),
+        selected: new Set([item.metadata.messageId]),
      });
    } else {
-      // Extract values - check both camelCase and PascalCase, and try multiple access methods
+      window.location.hash = `#?page=/assessments&id=${item.metadata.assessmentId}`;
      let programmeId = getMetadataValue('programmeId', 'programmeID');
      let metaclassId = getMetadataValue('metaclassId', 'metaclassID');
      let assessmentId = getMetadataValue('assessmentId', 'assessmentID');
      // Fallback: try to extract assessmentId from item ID if metadata is missing
      if ((assessmentId === undefined || assessmentId === null) && itemClone.id && itemClone.id.startsWith('assignment-')) {
        const extractedId = itemClone.id.replace('assignment-', '');
        assessmentId = Number(extractedId) || extractedId;
        console.log("[Assessment Action] Extracted assessmentId from item ID:", assessmentId);
      }
      // Convert to numbers, but preserve 0 as valid
      if (programmeId !== undefined && programmeId !== null && programmeId !== '') {
        const num = Number(programmeId);
        programmeId = isNaN(num) ? programmeId : num;
      }
      if (metaclassId !== undefined && metaclassId !== null && metaclassId !== '') {
        const num = Number(metaclassId);
        metaclassId = isNaN(num) ? metaclassId : num;
      }
      if (assessmentId !== undefined && assessmentId !== null && assessmentId !== '') {
        const num = Number(assessmentId);
        assessmentId = isNaN(num) ? assessmentId : num;
      }
      // Check if values exist (including 0, which is a valid ID)
      // Use typeof check to properly handle 0
      const hasProgrammeId = programmeId !== undefined && programmeId !== null && programmeId !== '' && typeof programmeId === 'number';
      const hasMetaclassId = metaclassId !== undefined && metaclassId !== null && metaclassId !== '' && typeof metaclassId === 'number';
      const hasAssessmentId = assessmentId !== undefined && assessmentId !== null && assessmentId !== '' && typeof assessmentId === 'number';
      if (hasProgrammeId && hasMetaclassId && hasAssessmentId) {
        const url = `#?page=/assessments/${programmeId}:${metaclassId}&item=${assessmentId}`;
        console.log("[Assessment Action] ✅ Navigating to:", url);
        window.location.hash = url;
      } else {
        // Fallback: try to navigate to assessments page if metadata is incomplete
        console.error("[Assessment Action] ❌ Missing required metadata:", {
          programmeId,
          metaclassId,
          assessmentId,
          hasProgrammeId,
          hasMetaclassId,
          hasAssessmentId,
          metadataKeys: Object.keys(metadata),
          metadataString: JSON.stringify(metadata),
          itemId: itemClone.id,
        });
        // If we at least have an assessmentId, try to navigate to the general assessments page
        if (hasAssessmentId) {
          window.location.hash = `#?page=/assessments/upcoming&item=${assessmentId}`;
        } else {
          console.warn("[Assessment Action] No valid assessment ID, redirecting to upcoming");
          window.location.hash = `#?page=/assessments/upcoming`;
        }
      }
    }
  }) as ActionHandler<any>,
  subjectassessment: ((item: IndexItem) => {
-    navigateToHashRoute(
+    window.location.href = `/#?page=/assessments/${item.metadata.programme}:${item.metadata.subjectId}`;
      `/assessments/${item.metadata.programme}:${item.metadata.subjectId}`,
    );
  }) as ActionHandler<any>,
  subjectcourse: ((item: IndexItem) => {
-    navigateToHashRoute(
+    window.location.href = `/#?page=/courses/${item.metadata.programme}:${item.metadata.subjectId}`;
      `/courses/${item.metadata.programme}:${item.metadata.subjectId}`,
    );
  }) as ActionHandler<any>,
  forum: ((item: IndexItem) => {
-    navigateToHashRoute(`/forums/${item.metadata.forumId}`);
+    window.location.href = `/#?page=/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>,
 };
@@ -1,386 +0,0 @@
 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;
  }
 }
@@ -213,54 +213,25 @@ export async function clear(store: string): Promise<void> {
 }
 export async function resetDatabase(): Promise<void> {
  // Close cached database connection
  if (cachedDb) {
-    try {
+    cachedDb.close();
      cachedDb.close();
    } catch (e) {
      console.warn("[DB] Error closing cached database:", e);
    }
    cachedDb = null;
  }
  // Close pending database promise
  if (dbPromise) {
    try {
      const db = await dbPromise;
      db.close();
-    } catch (e) {
+    } catch (e) {}
      // Database might not be open yet, that's okay
    }
    dbPromise = null;
  }
  // Wait a bit for connections to fully close
  await new Promise(resolve => setTimeout(resolve, 100));
  return new Promise((resolve, reject) => {
    const req = indexedDB.deleteDatabase(DB_NAME);
    req.onsuccess = () => {
      localStorage.removeItem(VERSION_KEY);
      resolve();
    };
-    req.onerror = () => {
+    req.onerror = () => reject(req.error);
      console.error("[DB] Error deleting database:", req.error);
      reject(req.error);
    };
    req.onblocked = () => {
      console.warn("[DB] Database deletion blocked - waiting for connections to close");
      // Wait a bit longer and try again
      setTimeout(() => {
        const retryReq = indexedDB.deleteDatabase(DB_NAME);
        retryReq.onsuccess = () => {
          localStorage.removeItem(VERSION_KEY);
          resolve();
        };
        retryReq.onerror = () => reject(retryReq.error);
        retryReq.onblocked = () => {
          reject(new Error(`Database is still open. Please close other tabs/windows and try again.`));
        };
      }, 500);
    };
  });
 }
@@ -1,303 +0,0 @@
 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,
  };
 }
@@ -1,11 +1,10 @@
-import { clear, get, getAll, put, remove, resetDatabase } from "./db";
+import { clear, getAll, get, put, remove } 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";
@@ -13,50 +12,6 @@ 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}`);
@@ -207,8 +162,6 @@ 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",
@@ -225,6 +178,8 @@ 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,
@@ -300,6 +255,10 @@ 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",
@@ -437,34 +396,18 @@ export async function runIndexing(): Promise<void> {
  stopHeartbeat();
  allItemsInPrimaryStores = await loadAllStoredItems();
-  // Create new objects to avoid XrayWrapper issues in Firefox
+  allItemsInPrimaryStores.forEach(item => {
-  const itemsWithComponents = allItemsInPrimaryStores.map(item => {
+    const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
-    try {
+    if (jobDef) {
-      const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+        const renderComponent = renderComponentMap[jobDef.renderComponentId];
-      let renderComponent = item.renderComponent;
+        if (renderComponent) {
-      if (jobDef) {
+          item.renderComponent = renderComponent;
-        renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
+        }
-      } else if (renderComponentMap[item.renderComponentId]) {
+    } else if (renderComponentMap[item.renderComponentId]) {
-        renderComponent = renderComponentMap[item.renderComponentId];
+        item.renderComponent = renderComponentMap[item.renderComponentId];
      }
      // Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
      // Use JSON serialization to ensure all nested properties are accessible
      try {
        const cloned = JSON.parse(JSON.stringify(item));
        cloned.renderComponent = renderComponent;
        return cloned;
      } catch (e) {
        // Fallback to shallow copy if deep clone fails
        console.warn("[Indexer] Failed to deep clone item, using shallow copy:", e);
        return { ...item, renderComponent };
      }
    } catch (error) {
      // Fallback: return item as-is if modification fails (Firefox XrayWrapper)
      console.warn("[Indexer] Failed to add render component to item (Firefox XrayWrapper):", error);
      return item;
    }
  });
-  loadDynamicItems(itemsWithComponents);
+  loadDynamicItems(allItemsInPrimaryStores);
  window.dispatchEvent(new Event("dynamic-items-updated"));
 }
@@ -3,28 +3,10 @@ import { messagesJob } from "./jobs/messages";
 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,
  notifications: notificationsJob,
  forums: forumsJob,
  subjects: subjectsJob,
  assignments: assignmentsJob,
  courses: coursesJob,
  notices: noticesJob,
  documents: documentsJob,
  folio: folioJob,
  portals: portalsJob,
  reports: reportsJob,
  goals: goalsJob,
  passive: passiveJob,
 };
@@ -1,369 +0,0 @@
 import type { IndexItem, Job } from "../types";
 const fetchJSON = async (url: string, body: any) => {
  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();
 };
 const fetchUpcomingAssessments = async (student: number = 69) => {
  try {
    const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
      student,
    });
    // Match analytics.rs: payload is an array, return empty array if not found
    return Array.isArray(res.payload) ? res.payload : [];
  } catch (e) {
    console.error("[Assignments job] Failed to fetch upcoming assessments:", e);
    return [];
  }
 };
 const fetchSubjects = async () => {
  try {
    const res = await fetchJSON("/seqta/student/load/subjects?", {});
    return res.payload
      ?.filter((s: any) => s.active === 1)
      ?.flatMap((s: any) => s.subjects) || [];
  } catch (e) {
    console.error("[Assignments job] Failed to fetch subjects:", e);
    return [];
  }
 };
 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(
    subjects.map(async (subject) => {
      try {
        // Match analytics.rs exactly: parameter order is programme, metaclass, student
        const res = await fetchJSON("/seqta/student/assessment/list/past?", {
          programme: subject.programme,
          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) => {
          if (assessment && assessment.id) {
            // Ensure programme and metaclass are included from the subject
            // Use the assessment's IDs if available, otherwise fall back to subject's
            map[assessment.id] = {
              ...assessment,
              programme: assessment.programme || assessment.programmeID || subject.programme,
              programmeID: assessment.programmeID || assessment.programme || subject.programme,
              metaclass: assessment.metaclass || assessment.metaclassID || subject.metaclass,
              metaclassID: assessment.metaclassID || assessment.metaclass || subject.metaclass,
            };
          }
        };
        // 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);
        }
      } catch (e) {
        console.warn(`[Assignments job] Failed to fetch past assessments for subject ${subject.code || subject.subject || 'unknown'}:`, e);
      }
    })
  );
  return Object.values(map);
 };
 export const assignmentsJob: Job = {
  id: "assignments",
  label: "Assignments",
  renderComponentId: "assessment",
  frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 }, // Daily
  boostCriteria: (item, searchTerm) => {
    if (searchTerm === "") {
      return -100;
    }
    let score = 0;
    // Boost upcoming assignments
    if (item.metadata.dueDate) {
      const dueDate = new Date(item.metadata.dueDate).getTime();
      const now = Date.now();
      const daysUntilDue = (dueDate - now) / (1000 * 60 * 60 * 24);
      if (daysUntilDue >= 0 && daysUntilDue <= 7) {
        score += 0.05; // Boost assignments due within a week
      }
      if (daysUntilDue < 0) {
        score -= 0.1; // Penalty for overdue assignments
      }
    }
    // Boost if submitted
    if (item.metadata.submitted) {
      score += 0.02;
    }
    return score;
  },
  run: async (ctx) => {
    // Don't filter by existing IDs - we want to process ALL assessments (both new and old)
    // to ensure metadata is up-to-date and all past assignments are indexed
    const existingItems = await ctx.getStoredItems("assignments");
    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
    const [upcoming, subjects] = await Promise.all([
      fetchUpcomingAssessments(student),
      fetchSubjects(),
    ]);
    console.debug(`[Assignments job] Fetched ${upcoming.length} upcoming assessments and ${subjects.length} subjects`);
    // Fetch past assessments for ALL subjects to ensure we get all historical assignments
    const past = await fetchPastAssessments(student, subjects);
    console.debug(`[Assignments job] Fetched ${past.length} past assessments`);
    // Create a lookup map from subject code to programme/metaclass
    const subjectLookup = new Map<string, { programme: number; metaclass: number }>();
    subjects.forEach((s: any) => {
      if (s.code && s.programme && s.metaclass) {
        subjectLookup.set(s.code, { programme: s.programme, metaclass: s.metaclass });
      }
    });
    // Combine and deduplicate
    const allAssessments = new Map<number, any>();
    upcoming.forEach((a: any) => {
      if (a && a.id) {
        // Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
        let programme = a.programmeID || a.programme;
        let metaclass = a.metaclassID || a.metaclass;
        // If missing, try to get from subject lookup
        if ((!programme || !metaclass) && a.code) {
          const subjectInfo = subjectLookup.get(a.code);
          if (subjectInfo) {
            programme = programme || subjectInfo.programme;
            metaclass = metaclass || subjectInfo.metaclass;
          }
        }
        allAssessments.set(a.id, {
          ...a,
          programme,
          metaclass,
          programmeID: programme, // Ensure both formats are available
          metaclassID: metaclass,
          isUpcoming: true,
        });
      }
    });
    past.forEach((a: any) => {
      if (a && a.id) {
        // Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
        let programme = a.programmeID || a.programme;
        let metaclass = a.metaclassID || a.metaclass;
        const existing = allAssessments.get(a.id);
        if (existing) {
          // Merge past assessment data, ensuring programme/metaclass are preserved
          // Use existing values if new ones are missing
          programme = programme || existing.programme || existing.programmeID;
          metaclass = metaclass || existing.metaclass || existing.metaclassID;
          Object.assign(existing, {
            ...a,
            programme,
            metaclass,
            programmeID: programme,
            metaclassID: metaclass,
          });
        } else {
          allAssessments.set(a.id, { 
            ...a, 
            programme,
            metaclass,
            programmeID: programme,
            metaclassID: metaclass,
            isUpcoming: false 
          });
        }
      }
    });
    const items: IndexItem[] = [];
    const processedIds = new Set<string>();
    // Process assessments in batches to avoid overwhelming the API
    const assessmentArray = Array.from(allAssessments.values());
    const pastCount = assessmentArray.filter(a => !a.isUpcoming).length;
    const upcomingCount = assessmentArray.filter(a => a.isUpcoming).length;
    console.debug(`[Assignments job] Processing ${assessmentArray.length} total assessments (${upcomingCount} upcoming, ${pastCount} past)`);
    const batchSize = 15; // Increased batch size for better performance
    // Skip fetching assessment details - the API endpoint doesn't exist or returns 404
    // Details are optional and not critical for search functionality
    // Process ALL assessments (both upcoming and past) to ensure everything is indexed
    for (let i = 0; i < assessmentArray.length; i += batchSize) {
      const batch = assessmentArray.slice(i, i + batchSize);
      const batchItems = await Promise.all(
        batch.map(async (assessment) => {
          const id = `assignment-${assessment.id}`;
          // Skip if already processed in this batch
          if (processedIds.has(id)) {
            return null;
          }
          processedIds.add(id);
          // Process ALL assessments (both new and existing, upcoming and past)
          // This ensures all historical assignments are indexed and metadata is up-to-date
          // Skip fetching details - API endpoint doesn't exist
          const description = "";
          const subjectName = assessment.subject || assessment.code || "Unknown Subject";
          const dueDate = assessment.due ? new Date(assessment.due).getTime() : null;
          // Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
          const programmeId = assessment.programmeID || assessment.programme;
          const metaclassId = assessment.metaclassID || assessment.metaclass;
          // Validate that we have the required IDs for navigation
          if (!programmeId || !metaclassId || !assessment.id) {
            console.warn(`[Assignments job] Skipping assignment ${assessment.id} - missing required IDs:`, {
              programmeId,
              metaclassId,
              assessmentId: assessment.id,
              programmeID: assessment.programmeID,
              metaclassID: assessment.metaclassID,
              programme: assessment.programme,
              metaclass: assessment.metaclass,
              assessment,
            });
            return null;
          }
          // Convert to numbers, preserving 0 as valid
          let finalProgrammeId: number | undefined;
          let finalMetaclassId: number | undefined;
          if (programmeId !== undefined && programmeId !== null && programmeId !== '') {
            const num = Number(programmeId);
            finalProgrammeId = isNaN(num) ? undefined : num;
          }
          if (metaclassId !== undefined && metaclassId !== null && metaclassId !== '') {
            const num = Number(metaclassId);
            finalMetaclassId = isNaN(num) ? undefined : num;
          }
          // Final validation - check for actual numbers (including 0)
          if (finalProgrammeId === undefined || finalMetaclassId === undefined || !assessment.id) {
            console.error(`[Assignments job] ❌ Skipping assignment ${assessment.id} - invalid IDs after conversion:`, {
              programmeId: finalProgrammeId,
              metaclassId: finalMetaclassId,
              assessmentId: assessment.id,
              rawProgrammeId: programmeId,
              rawMetaclassId: metaclassId,
              assessment,
            });
            return null;
          }
          const item: IndexItem = {
            id,
            text: assessment.title || assessment.name || "Untitled Assignment",
            category: "assignments",
            content: `${description}\nSubject: ${subjectName}\nDue: ${assessment.due || "No due date"}`.trim(),
            dateAdded: dueDate || Date.now(),
            metadata: {
              assessmentId: assessment.id,
              assessmentID: assessment.id, // Store both variants for compatibility
              subject: subjectName,
              subjectCode: assessment.code,
              dueDate: assessment.due,
              programmeId: finalProgrammeId,
              programmeID: finalProgrammeId, // Store both variants for compatibility
              metaclassId: finalMetaclassId,
              metaclassID: finalMetaclassId, // Store both variants for compatibility
              submitted: assessment.submitted || false,
              isUpcoming: assessment.isUpcoming || false,
              term: assessment.term,
              timestamp: assessment.due || new Date().toISOString(), // Required by AssessmentMetadata interface
            },
            actionId: "assessment",
            renderComponentId: "assessment",
          };
          console.debug(`[Assignments job] ✅ Created item for assignment ${assessment.id}:`, {
            id: item.id,
            programmeId: item.metadata.programmeId,
            programmeID: item.metadata.programmeID,
            metaclassId: item.metadata.metaclassId,
            metaclassID: item.metadata.metaclassID,
            assessmentId: item.metadata.assessmentId,
            assessmentID: item.metadata.assessmentID,
          });
          return item;
        })
      );
      // Filter out nulls and add to items
      batchItems.forEach(item => {
        if (item) {
          items.push(item);
        }
      });
      // Small delay between batches to avoid rate limiting
      if (i + batchSize < assessmentArray.length) {
        await new Promise(resolve => setTimeout(resolve, 50)); // Reduced delay
      }
    }
    const newItemsCount = items.filter(item => !existingIds.has(item.id)).length;
    const updatedItemsCount = items.length - newItemsCount;
    console.debug(`[Assignments job] Indexed ${items.length} assignment items (${newItemsCount} new, ${updatedItemsCount} updated)`);
    return items;
  },
  purge: (items) => {
    // Keep ALL assignments - don't purge old ones as users may want to search for them
    // Only remove items that are truly invalid (missing required metadata)
    return items.filter((i) => {
      // Keep all items that have valid metadata
      return i.metadata && 
             i.metadata.assessmentId && 
             i.metadata.programmeId !== undefined && 
             i.metadata.metaclassId !== undefined;
    });
  },
 };
@@ -1,179 +0,0 @@
 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,
 };
@@ -1,139 +0,0 @@
 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,
 };
@@ -1,134 +0,0 @@
 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,
 };
@@ -1,4 +1,4 @@
-import type { IndexItem, Job } from "../types";
+import type { Job, IndexItem } from "../types";
 const fetchForums = async () => {
  const res = await fetch(`${location.origin}/seqta/student/load/forums`, {
--- a/Show More
+++ b/Show More
		`@@ -1 +0,0 @@`
			Experimental nightly build from `main`. May break. Do not upload to Chrome Web Store or Firefox Add-ons. Download, replace your sideloaded copy, and reload the extension.