fix: patch new SEQTA UI compatibility in 3.4.15

fix: fix the dodge stying by seqta

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -2,6 +2,7 @@ name: Bug report
 description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
 labels: bug
 title: "[BUG]"
+type: "Bug"
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -2,6 +2,7 @@ name: Feature request
 description: Suggest a new Feature to be added or replaced in BetterSeqtaPLUS
 labels: enhancement
 title: "[FR]"
+
 body:
   - type: checkboxes
     attributes:

.github/ISSUE_TEMPLATE/new_contributor.yml

@@ -0,0 +1,114 @@
+name: 🙋 New Contributor - Need Help Getting Started
+description: Perfect for first-time contributors who need guidance
+labels: ["help wanted", "documentation"]
+title: "[NEW CONTRIBUTOR] "
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Hi there! 👋
+        Welcome to BetterSEQTA+! We're excited to have you join our community.
+
+  - type: checkboxes
+    attributes:
+      label: Tell us about yourself (check all that apply)
+      options:
+        - label: "This is my first time contributing to open source"
+          required: false
+        - label: "I'm new to browser extensions"
+          required: false
+        - label: "I'm new to TypeScript/JavaScript"
+          required: false
+        - label: "I have some coding experience but new to this project"
+          required: false
+          
+  - type: checkboxes
+    attributes:
+      label: What would you like to work on? (check all that apply)
+      options:
+        - label: "Fix a bug 🐛"
+          required: false
+        - label: "Add a new feature ✨"
+          required: false
+        - label: "Improve documentation 📚"
+          required: false
+        - label: "Create a plugin 🧩"
+          required: false        
+        - label: "Improve the UI/design 🎨"
+          required: false
+        - label: "Write tests 🧪"
+          required: false
+        - label: "Not sure - I want to help but need guidance!"
+          required: false
+
+  - type: checkboxes
+    attributes:
+      label: Have you read our guides?
+      options:
+        - label: "Getting Started Guide (see docs/GETTING_STARTED_CONTRIBUTING.md)"
+          required: true
+        - label: "Architecture Guide (see docs/ARCHITECTURE.md)"
+          required: true
+        - label: "Plugin Development Guide (see docs/plugins/README.md)"
+          required: true
+
+  - type: checkboxes
+    attributes:
+      label: Have you set up the development environment yet?
+      options:
+        - label: Yes, everything works! 🎉
+          required: false
+        - label: Partially - I can run `npm run dev` but having some issues
+          required: false
+        - label: No, I need help with setup
+          required: false
+        - label: I tried but ran into errors (please describe below)
+          required: false
+
+  - type: input
+    attributes:
+      label: Errors
+      description: "Please list any encountered errors here:"
+      placeholder: "I am encountering issues with..."
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Questions or Issues
+      description: "Tell us:
+                    1. What specifically would you like help with?
+                    2. Are you stuck on anything?
+                    3. Do you have any questions about the codebase?
+                    4. Is there anything in our documentation that's unclear?"
+      placeholder: "I want help with..."
+    validations:
+      required: false
+      
+  - type: input
+    attributes:
+      label: Ideas or Suggestions
+      description: "If you have any ideas for features, improvements, or just want to share your thoughts:"
+      placeholder: "It would be cool if I could help add..."
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: |
+        ## What happens next?
+
+        A maintainer will respond within 24-48 hours to:
+        - Answer your questions
+        - Suggest some good issues to work on
+        - Help you with setup if needed
+        - Point you to relevant documentation
+        
+        Don't worry if you're new to this - we're here to help! Every expert was once a beginner. 🚀
+        
+        **Join our [Discord server](https://discord.gg/YzmbnCDkat) for real-time help and community chat!** 
+      
+      
+                    
+        

.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+

CONTRIBUTING.md

@@ -1,13 +1,31 @@
-# Contributing
+# Contributing to BetterSEQTA+
 
-When contributing to this repository, please first discuss the change you wish to make via issue,
-email, or any other method with the owners of this repository before making a change.
+Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're excited to have you join our community of contributors.
+
+## 🚀 New Contributors Start Here!
+
+**Never contributed to an open source project before?** No worries! We've made it super easy to get started:
+
+- **📖 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 our [Architecture Guide](./docs/ARCHITECTURE.md)
+- **🔧 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!
+
+## Discussion Before Contributing
+
+For significant changes, please first discuss what you'd like to change via:
+- Opening an issue
+- Joining our Discord server
+- Emailing the maintainers
+
+This helps ensure your contribution aligns with the project's goals and saves you time!
 
 ## Community
 
 Join our community channels to discuss the project, get help, and connect with other contributors:
 
-- **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
+- **Discord Server**: [Join our Discord](https://discord.gg/YzmbnCDkat)
 - **GitHub Discussions**: For longer-form conversations
 - **GitHub Issues**: For bug reports and feature requests
 
@@ -21,7 +39,7 @@ If you're interested in creating plugins for BetterSEQTA+, check out our plugin
 ## Pull Request Process
 
 1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.
-2. Fork the repo and create your branch from `master`.
+2. Fork the repo and create your branch from `main`.
 3. When writing your pull request, make sure to use the pull request template.
 
 ### Pull Request Template

README.md

@@ -1,5 +1,3 @@
-#
-
 <a href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel">
   <img src="https://socialify.git.ci/betterseqta/betterseqta-plus/image?description=1&font=Inter&forks=1&issues=1&logo=data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%20height%3D%27656pt%27%20fill%3D%27white%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%20658%20656%27%20width%3D%27658pt%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg%20transform%3D%27matrix(.1%200%200%20-.1%200%20656)%27%253E%253Cpath%20d%3D%27m2960%206499c-918-100-1726-561-2278-1299-196-262-374-609-475-925-171-533-203-1109-91-1655%20228-1115%201030-2032%202104-2408%20356-124%20680-177%201080-176%20269%201%20403%2014%20650%2064%20790%20159%201503%20624%201980%201290%20714%20998%20799%202342%20217%203420-488%20902-1361%201515-2382%201671-113%2017-196%2022-430%2024-159%202-328-1-375-6zm566-1443c476-99%20885-385%201134-791%20190-309%20282-696%20250-1045-22-240-73-420-180-635-78-156-159-275-274-401l-77-84h445%20446v-235-236l-1162%204-1163%203-100%2023c-449%20101-812%20337-1071%20697-77%20107-193%20335-233%20459-115%20358-116%20726-1%201078%20209%20644%20766%201101%201446%201187%20128%2016%20405%204%20540-24z%27%2F%253E%253Cpath%20d%3D%27m3065%204604c-250-36-396-89-576-209-280-187-470-478-535-821-25-135-16-395%2019-525%2095-351%20331-644%20651-806%2098-49%20225-93%20331-114%2092-18%20368-18%20460%200%20481%2095%20853%20444%20982%20921%2035%20129%2044%20389%2019%20524-36%20191-121%20387-228%20531-186%20249-476%20428-783%20485-65%2012-291%2021-340%2014z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E&name=1&owner=1&pattern=Signal&stargazers=1&theme=Dark" />
 </a>
@@ -10,7 +8,7 @@
 
 <p align="center">
  <a target="_blank" href="https://chrome.google.com/webstore/detail/betterseqta%20/afdgaoaclhkhemfkkkonemoapeinchel"><img src="https://user-images.githubusercontent.com/95666457/149519713-159d7ef7-2c21-4034-a616-f037ff46d9a4.png" alt="ChromeDownload" width="250"></a>
-  <a target="_blank" href="https://discord.gg/YzmbnCDkat"><img src="https://github.com/SethBurkart123/EvenBetterSEQTA/assets/108050083/23055730-b16e-44c0-9bef-221d8545af92" width="240" style="border-radius:10%;" /></a>
+  <a target="_blank" href="https://discord.gg/YzmbnCDkat"><img src="https://github.com/BetterSEQTA/BetterSEQTA-Plus/assets/108050083/23055730-b16e-44c0-9bef-221d8545af92" width="240" style="border-radius:10%;" /></a>
 </p>
 
 <div>
@@ -56,58 +54,48 @@ If you are looking to create custom themes, I would recommend you start at the o
 
 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 :)
 
-## Getting started
+## 🚀 Want to Contribute?
 
-1. Clone the repository
+**New contributors welcome!** 🎉 We've made it easy to get started:
 
-```
-git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
+- **👋 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/BetterSEQTA-Plus
+cd BetterSEQTA-Plus
 ```
 
-1. Install dependencies
-
-You may install the dependencies like below:
-
-```
-npm install # or your preferred package manager like pnpm or yarn
+&nbsp;&nbsp;&nbsp; **2. Install & Run**
+```bash
+npm install --legacy-peer-deps
+npm run dev
 ```
 
-But it is recommended to do it like this:
+&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)
+
+### Building for Production
+
+```bash
+npm run build     # Build for all browsers
+npm run zip       # Package for distribution (requires 7-Zip)
 ```
-npm install --legacy-peer-deps # Only NPM supported
-```
-
-### Running Development
-
-2. Run the dev script (it updates as you save files)
-
-```
-npm run dev # or use your perferred package manager
-```
-
-### Building for production
-
-2. Run the build script
-
-```
-npm run build # or use your perferred package manager
-```
-
-2.1. Package it up (optional)
-
-```
-npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your perferred package manager
-```
-
-3. Load the extension into chrome
-
-- Go to `chrome://extensions`
-- Enable developer mode
-- Click `Load unpacked`
-- Select the `dist` folder
-
-Just remember, in order to update changes to the extension if you are running in developer mode, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
 
 ## Folder Structure
 
@@ -131,7 +119,7 @@ Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plu
 
 ## 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
+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.
 
 ## Star History
 

docs/ARCHITECTURE.md

@@ -0,0 +1,235 @@
+# BetterSEQTA+ 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
+
+- [Overview](#overview)
+- [High-Level Architecture](#high-level-architecture)
+- [Core Components](#core-components)
+- [Plugin System](#plugin-system)
+- [File Structure Explained](#file-structure-explained)
+- [Data Flow](#data-flow)
+- [Browser Extension Basics](#browser-extension-basics)
+
+## Overview
+
+BetterSEQTA+ is a browser extension that enhances SEQTA Learn by:
+- Adding new features through a plugin system
+- Providing customizable themes and UI improvements
+- Offering better navigation and user experience
+
+Think of it like this: **SEQTA Learn + BetterSEQTA+ = Enhanced SEQTA Experience**
+
+## High-Level Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    BROWSER EXTENSION                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  ┌─────────────────┐    ┌──────────────────┐                │
+│  │  Background     │    │  Content Script  │                │
+│  │  Script         │    │  (SEQTA.ts)      │                │
+│  │                 │    │                  │                │
+│  │  - Settings     │◄───┤  - Page Detection│                │
+│  │  - Storage      │    │  - Plugin Loading│                │
+│  │  - Updates      │    │  - UI Injection  │                │
+│  └─────────────────┘    └──────────────────┘                │
+│                                   │                         │
+│                         ┌─────────▼─────────┐               │
+│                         │   Plugin System   │               │
+│                         │                   │               │
+│                         │  ┌─────────────┐  │               │
+│                         │  │ Built-in    │  │               │
+│                         │  │ Plugins     │  │               │
+│                         │  │             │  │               │
+│                         │  │ - Themes    │  │               │
+│                         │  │ - Search    │  │               │
+│                         │  │ - Timetable │  │               │
+│                         │  │ - etc...    │  │               │
+│                         │  └─────────────┘  │               │
+│                         └───────────────────┘               │
+│                                   │                         │
+│                         ┌─────────▼─────────┐               │
+│                         │   Settings UI     │               │
+│                         │   (Svelte App)    │               │
+│                         │                   │               │
+│                         │  - Plugin Config  │               │
+│                         │  - Theme Creator  │               │
+│                         │  - General Settings│              │
+│                         └───────────────────┘               │
+└─────────────────────────────────────────────────────────────┘
+                                   │
+                         ┌─────────▼─────────┐
+                         │   SEQTA Learn     │
+                         │   Website         │
+                         └───────────────────┘
+```
+
+## Core Components
+
+### 1. Entry Point (`src/SEQTA.ts`)
+This is where it all begins! When you visit a SEQTA page:
+1. Detects if you're on a SEQTA Learn page
+2. Injects our CSS styles
+3. Changes the favicon to BetterSEQTA+ icon
+4. Loads settings from storage
+5. Initializes the plugin system
+
+### 2. Plugin System (`src/plugins/`)
+The heart of BetterSEQTA+! This is what makes it extensible:
+- **Plugin Manager**: Registers and manages all plugins
+- **Built-in Plugins**: Pre-made plugins (themes, search, etc.)
+- **Plugin API**: Provides plugins with tools to interact with SEQTA
+
+### 3. Settings UI (`src/interface/`)
+A Svelte application that lets users:
+- Enable/disable plugins
+- Configure plugin settings
+- Create custom themes
+- Browse the theme store
+
+### 4. Background Script (`src/background.ts`)
+Runs in the background and handles:
+- Extension-wide settings storage
+- Communication between different parts
+- Update notifications
+
+## Plugin System
+
+Our plugin system is what makes BetterSEQTA+ so powerful. Here's how it works:
+
+### Plugin Lifecycle
+```
+Plugin Registration → Settings Loading → Plugin Initialization → Running → Cleanup
+```
+
+### Built-in Plugins Overview
+
+| Plugin | What it does | Files |
+|--------|-------------|-------|
+| **Themes** | Custom CSS themes and backgrounds | `src/plugins/built-in/themes/` |
+| **Global Search** | Search across all SEQTA content | `src/plugins/built-in/globalSearch/` |
+| **Timetable** | Enhanced timetable features | `src/plugins/built-in/timetable/` |
+| **Profile Picture** | Custom profile pictures | `src/plugins/built-in/profilePicture/` |
+| **Animated Background** | Moving background animations | `src/plugins/built-in/animatedBackground/` |
+
+### Creating a Plugin
+Every plugin follows this structure:
+```typescript
+const myPlugin: Plugin = {
+  id: "unique-plugin-id",
+  name: "Human Readable Name",
+  description: "What does this plugin do?",
+  version: "1.0.0",
+  settings: { /* user configurable options */ },
+  run: async (api) => {
+    // Your plugin code goes here!
+  }
+};
+```
+
+## File Structure Explained
+
+```
+src/
+├── SEQTA.ts              # 🚀 Main entry point - start reading here!
+├── background.ts         # 🔧 Background script for extension
+├── manifests/           # 📦 Browser extension manifests
+├── plugins/             # 🧩 Plugin system (the magic happens here!)
+│   ├── core/           # 🏗️  Plugin infrastructure 
+│   ├── built-in/       # 🎁 Pre-made plugins
+│   └── index.ts        # 📋 Plugin registration
+├── interface/          # 🎨 Settings UI (Svelte app)
+│   ├── pages/          # 📄 Settings pages
+│   ├── components/     # 🧱 Reusable UI components
+│   └── main.ts         # 🏠 Settings app entry point
+├── seqta/              # 🔗 SEQTA-specific utilities
+│   ├── main.ts         # 🎯 Core SEQTA modifications
+│   ├── ui/             # 🎨 UI manipulation helpers
+│   └── utils/          # 🛠️  Helper functions
+└── css/                # 💄 Styles and themes
+```
+
+### Where to Start Reading?
+1. **New to the project?** Start with `src/SEQTA.ts`
+2. **Want to understand plugins?** Look at `src/plugins/core/types.ts`
+3. **Want to see a simple plugin?** Check out `src/plugins/built-in/profilePicture/`
+4. **Interested in the UI?** Explore `src/interface/main.ts`
+
+## Data Flow
+
+Here's how data flows through the system:
+
+```
+User visits SEQTA → SEQTA.ts detects page → Loads settings from storage
+                                                        │
+                                                        ▼
+Plugin Manager initializes → Each plugin gets API access → Plugins modify SEQTA
+                                                        │
+                                                        ▼
+User opens settings → Svelte UI loads → Settings changed → Storage updated
+                                                        │
+                                                        ▼
+Storage change detected → Plugins notified → UI updates automatically
+```
+
+## Browser Extension Basics
+
+Never worked on a browser extension before? Here's what you need to know:
+
+### Content Scripts vs Background Scripts
+- **Content Script** (`SEQTA.ts`): Runs on SEQTA pages, can access and modify the page
+- **Background Script** (`background.ts`): Runs in the background, handles storage and messaging
+
+### Manifest Files
+Each browser needs a slightly different manifest file:
+- `manifests/chrome.ts` - Chrome, Edge, Brave
+- `manifests/firefox.ts` - Firefox
+- `manifests/safari.ts` - Safari (experimental)
+
+### Communication
+Different parts of the extension communicate using:
+- `browser.runtime.sendMessage()` - Send messages
+- `browser.storage` - Shared storage, but we have created a custom storage system that is easier to use:
+```ts
+settingsState.[the setting name] = [whatever you want to set it to]
+console.log(settingsState.[the setting name])
+```
+- Custom events for plugin communication
+
+## Development Tips
+
+### Debugging
+1. **Chrome DevTools**: Right-click → Inspect → Console tab
+2. **Extension Console**: `chrome://extensions` → BetterSEQTA+ → "Inspect views: background page"
+3. **Look for logs**: We log everything with `[BetterSEQTA+]` prefix
+
+### Making Changes
+1. Edit code → Save → Browser auto-reloads extension → Refresh SEQTA page
+2. For UI changes: The dev server hot-reloads automatically
+3. For plugin changes: May need to disable/enable the plugin in settings
+
+### Common Gotchas
+- Settings take a moment to load (use `api.settings.loaded` promise)
+- Some SEQTA elements load dynamically (use `api.seqta.onMount()`)
+- Plugin cleanup is important (always return a cleanup function)
+
+## Next Steps
+
+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 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!
+
+## Questions?
+
+Still confused about something? That's totally normal! Here are your options:
+- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
+- 🐛 Open an issue on GitHub
+- 📧 Email us at betterseqta.plus@gmail.com
+
+Remember: **Every expert was once a beginner!** We're here to help you learn and contribute. 🚀 

docs/GETTING_STARTED_CONTRIBUTING.md

@@ -0,0 +1,285 @@
+# Getting Started as a Contributor
+
+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
+
+- [Before You Start](#before-you-start)
+- [Your First 30 Minutes](#your-first-30-minutes)
+- [Making Your First Contribution](#making-your-first-contribution)
+- [Types of Contributions](#types-of-contributions)
+- [Finding Something to Work On](#finding-something-to-work-on)
+- [Development Workflow](#development-workflow)
+- [Getting Help](#getting-help)
+
+## Before You Start
+
+### What You'll Need
+- **Node.js** (v16 or higher) - [Download here](https://nodejs.org/)
+- **Git** - [Download here](https://git-scm.com/)
+- **A code editor** - We recommend [VS Code](https://code.visualstudio.com/)
+- **A Chromium browser** (Chrome, Edge, Brave) for testing (recommended, however you can use firefox although it requires being built every time you make a change)
+
+### Helpful Background (but not required!)
+- Basic JavaScript/TypeScript knowledge
+- Some familiarity with HTML/CSS
+- Understanding of browser extensions (we'll teach you!)
+
+**Don't worry if you're missing some of these!** We're happy to help you learn. 🤗
+
+## Your First 30 Minutes
+
+Let's get you up and running quickly:
+
+### 1. Get the Code (3 minutes)
+```bash
+# Fork the repository on GitHub first, then:
+git clone https://github.com/YOUR_USERNAME/BetterSEQTA-plus.git
+cd BetterSEQTA-plus
+```
+
+### 2. Install Dependencies (3 minutes)
+```bash
+npm install --legacy-peer-deps
+```
+
+### 3. Start Development Server (2 minutes)
+```bash
+npm run dev
+```
+
+### 4. Load Extension in Browser (4 minutes)
+1. Open Chrome and go to `chrome://extensions`
+2. Enable "Developer mode" (toggle in top right)
+3. Click "Load unpacked"
+4. Select the `dist` folder in your project
+5. Visit a SEQTA Learn page to see BetterSEQTA+ in action!
+
+### 5. Make a Tiny Change (5 minutes)
+Let's prove everything works:
+1. Open `src/SEQTA.ts`
+2. Find the line that says `"[BetterSEQTA+] Successfully initialised"`
+3. Change it to `"[BetterSEQTA+] Successfully initialised - Hello [YOUR_NAME]!"`
+4. Save the file
+5. Go to `chrome://extensions`, click the refresh icon on BetterSEQTA+
+6. Refresh a SEQTA page and check the browser console (F12) - you should see your message!
+
+### 6. Reset Your Change (3 minutes)
+```bash
+git checkout -- src/SEQTA.ts
+```
+
+**Congratulations! 🎉 You've successfully set up BetterSEQTA+ for development!**
+
+## Making Your First Contribution
+
+### Easy First Contributions
+
+Here are some great starter contributions:
+
+1. **Fix a typo in documentation** - Super easy and always appreciated!
+2. **Improve error messages** - Make them more helpful
+3. **Add comments to code** - Help other contributors understand
+4. **Create a simple plugin** - Follow our plugin guide
+5. **Fix a bug you found** - If you found a bug, fix it!
+
+### Step-by-Step: Your First Pull Request
+
+#### Step 1: Pick an Issue
+- Go to our [Issues page](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
+- Look for labels like:
+  - `good first issue` - Perfect for beginners
+  - `help wanted` - We'd love help with these
+  - `documentation` - Improve our docs
+  - `bug` - Fix something broken
+
+#### Step 2: Claim the Issue
+Comment on the issue saying "I'd like to work on this!" We'll assign it to you.
+
+#### Step 3: Create a Branch
+```bash
+git checkout -b fix-issue-123  # Replace 123 with the issue number
+```
+
+#### Step 4: Make Your Changes
+- Follow the patterns you see in existing code
+- Test your changes thoroughly
+- Keep changes focused and small
+
+#### Step 5: Test Everything
+```bash
+# Test the extension still loads
+npm run dev
+
+# Test in browser
+# 1. Reload extension at chrome://extensions
+# 2. Visit SEQTA page
+# 3. Verify everything still works
+```
+
+#### Step 6: Commit Your Changes
+```bash
+git add .
+git commit -m "Fix issue #123: Brief description of what you fixed"
+```
+
+#### Step 7: Push and Create Pull Request
+```bash
+git push origin fix-issue-123
+```
+
+Then go to GitHub and create a pull request with:
+- **Clear title**: "Fix issue #123: Brief description"
+- **Description**: Explain what you changed and why
+- **Testing**: Describe how you tested it
+
+## Types of Contributions
+
+### 🐛 Bug Fixes
+- Fix broken features
+- Improve error handling
+- Resolve compatibility issues
+
+**Example**: "The theme selector doesn't work on Firefox"
+
+### ✨ New Features
+- Add new plugins
+- Enhance existing functionality
+- Improve user experience
+
+**Example**: "Add keyboard shortcuts for common actions"
+
+### 📚 Documentation
+- Fix typos and unclear explanations
+- Add examples and tutorials
+- Improve code comments
+
+**Example**: "Add more examples to the plugin guide"
+
+### 🎨 Design & UI
+- Improve the settings interface
+- Make things more user-friendly
+- Add animations and polish
+
+**Example**: "Make the theme creator more intuitive"
+
+### 🔧 Technical Improvements
+- Refactor code for clarity
+- Add tests
+- Improve performance
+
+**Example**: "Simplify the plugin loading logic"
+
+## Finding Something to Work On
+
+### Browse Issues by Label
+- [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) - Perfect for beginners
+- [`help wanted`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/help%20wanted) - We need help with these
+- [`documentation`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/documentation) - Improve our docs
+- [`bug`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/bug) - Fix something broken
+- [`enhancement`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/enhancement) - Add new features
+
+### Create Your Own Issue
+Found a bug or have an idea? Create an issue first to discuss it!
+
+### Plugin Ideas
+Want to create a plugin? Here are some ideas:
+- **Study Timer**: Track study time across SEQTA pages
+- **Grade Tracker**: Better visualization of grades over time
+- **Quick Notes**: Add notes to any SEQTA page
+- **Homework Reminder**: Smart notifications for upcoming due dates
+- **Custom Shortcuts**: User-defined keyboard shortcuts
+
+## Development Workflow
+
+### Daily Development
+```bash
+# Start working
+git pull origin main
+npm run dev
+
+# Make changes, test, commit
+git add .
+git commit -m "Descriptive commit message"
+
+# Push when ready
+git push origin your-branch-name
+```
+
+### Before Submitting PR
+1. **Test thoroughly** - Make sure nothing breaks
+2. **Check console** - No new errors
+3. **Test in different browsers** - Chrome and Firefox
+4. **Update documentation** - If you changed how something works
+
+### Code Style
+- Use TypeScript where possible
+- Follow existing naming conventions
+- Add comments for complex logic
+- Keep functions small and focused
+
+## Getting Help
+
+### Stuck? Here's How to Get Unstuck
+
+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
+
+### Discord Community
+Join our [Discord server](https://discord.gg/YzmbnCDkat) for:
+- Real-time help and discussion
+- Collaboration on features
+- Sharing ideas and feedback
+- Getting to know the community
+
+### Code Review Process
+- All contributions need code review
+- We'll provide helpful feedback
+- Don't worry about making mistakes - we're here to help!
+- Reviews usually happen within 24-48 hours
+
+## Common Questions
+
+**Q: I'm new to browser extensions. Is this too advanced for me?**
+A: Not at all! We have lots of beginner-friendly issues, and our plugin system makes it easy to add features without understanding all the browser extension complexities.
+
+**Q: How long does it take to get my first PR merged?**
+A: For simple fixes, usually 1-3 days. For larger features, it might take a week or two as we discuss the best approach.
+
+**Q: I made a mistake in my PR. What do I do?**
+A: No worries! Just push more commits to the same branch and they'll be added to your PR automatically.
+
+**Q: Can I work on multiple issues at once?**
+A: It's better to focus on one issue at a time, especially when starting out. This makes code review easier and reduces conflicts.
+
+**Q: What if I start working on something and get stuck?**
+A: Ask for help! Create a draft PR with what you have so far, and we'll help you figure out the next steps.
+
+## Recognition
+
+All contributors get:
+- Recognition in our README
+- Contributor badge in Discord
+- Our eternal gratitude! 🙏
+
+Significant contributors may also get:
+- Special Discord roles
+- Input on project direction
+- Maintainer status
+
+## Next Steps
+
+Ready to contribute? Here's what to do:
+
+1. ✅ **Set up your development environment** (follow the 30-minute guide above)
+2. 🔍 **Find an issue to work on** (check the "good first issue" label)
+3. 💬 **Join our Discord** and introduce yourself
+4. 🚀 **Make your first contribution** and submit a PR
+
+Remember: **Every expert was once a beginner!** We're excited to help you learn and grow as a contributor. Welcome to the team! 🎉
+
+---
+
+*Questions? Suggestions for improving this guide? Open an issue or message us on Discord!* 

docs/README.md

@@ -10,7 +10,10 @@ Welcome to the BetterSEQTA+ documentation! This documentation will help you unde
 
 - [Project Overview](./README.md) - This file
 - [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
-- [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
+- [Getting Started Contributing](./GETTING_STARTED_CONTRIBUTING.md) - **Start here!** Complete beginner-friendly guide
+- [Architecture Guide](./ARCHITECTURE.md) - How BetterSEQTA+ works under the hood
+- [Contributing Guide](../CONTRIBUTING.md) - Official contribution guidelines
+- [Troubleshooting](./TROUBLESHOOTING.md) - Common issues and solutions
 
 ### Plugin System
 

docs/THEME_CREATION.md

@@ -0,0 +1,585 @@
+# Theme Creation Guide
+
+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.
+

docs/TROUBLESHOOTING.md

@@ -0,0 +1,348 @@
+# Troubleshooting Guide
+
+Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
+
+## Table of Contents
+
+- [Installation Issues](#installation-issues)
+- [Development Server Issues](#development-server-issues)
+- [Browser Extension Issues](#browser-extension-issues)
+- [Plugin Development Issues](#plugin-development-issues)
+- [Build Issues](#build-issues)
+- [Still Stuck?](#still-stuck)
+
+## Installation Issues
+
+### ❌ "npm install" fails with peer dependency errors
+
+**Problem**: You see errors about peer dependencies or conflicting packages.
+
+**Solution**:
+```bash
+rm -rf node_modules package-lock.json
+npm install --legacy-peer-deps
+```
+
+### ❌ "Cannot find module" errors
+
+**Problem**: Node.js can't find required packages.
+
+**Solutions**:
+1. **Clear and reinstall**:
+   ```bash
+   rm -rf node_modules
+   npm install --legacy-peer-deps
+   ```
+
+2. **Check Node.js version**:
+   ```bash
+   node --version  # Should be v16 or higher
+   ```
+
+3. **Try with npm cache clean**:
+   ```bash
+   npm cache clean --force
+   npm install --legacy-peer-deps
+   ```
+
+### ❌ Permission errors on macOS/Linux
+
+**Problem**: "EACCES" or permission denied errors.
+
+**Solution**:
+```bash
+sudo chown -R $(whoami) ~/.npm
+sudo chown -R $(whoami) /usr/local/lib/node_modules
+```
+
+## Development Server Issues
+
+### ❌ "npm run dev" fails
+
+**Problem**: Development server won't start.
+
+**Solutions**:
+1. **Check if port is in use**:
+   ```bash
+   lsof -i :5173  # Kill the process using the port
+   ```
+
+2. **Clear dist folder**:
+   ```bash
+   rm -rf dist
+   npm run dev
+   ```
+
+3. **Check for TypeScript errors**:
+   ```bash
+   npx tsc --noEmit  # Check for type errors
+   ```
+
+### ❌ Changes not reflecting in browser
+
+**Problem**: You make code changes but don't see them in the browser.
+
+**Solutions**:
+1. **Reload the extension**:
+   - Go to `chrome://extensions`
+   - Find BetterSEQTA+ and click the refresh icon
+   - Refresh your SEQTA page
+
+2. **Check if dev server is running**:
+   - Look for "Build completed" in your terminal
+   - If not, restart `npm run dev`
+
+3. **Hard refresh the page**:
+   - Press `Ctrl+Shift+R` (or `Cmd+Shift+R` on Mac)
+
+## Browser Extension Issues
+
+### ❌ Extension doesn't load in Chrome
+
+**Problem**: Extension appears in `chrome://extensions` but doesn't work.
+
+**Solutions**:
+1. **Check for errors**:
+   - Go to `chrome://extensions`
+   - Click "Errors" button on BetterSEQTA+
+   - Fix any JavaScript errors shown
+
+2. **Verify manifest**:
+   - Check if `dist/manifest.json` exists
+   - Ensure it has proper structure
+
+3. **Check permissions**:
+   - Extension needs permission to access SEQTA pages
+   - Click "Details" → "Site access" → "On all sites"
+
+### ❌ Extension doesn't appear on SEQTA pages
+
+**Problem**: Extension loads but doesn't modify SEQTA.
+
+**Solutions**:
+1. **Check if you're on a SEQTA Learn page**:
+   - URL should contain "seqta" or "learn"
+   - Page title should include "SEQTA Learn"
+
+2. **Check browser console**:
+   - Press `F12` → Console tab
+   - Look for "[BetterSEQTA+]" messages
+   - If no messages, extension isn't running
+
+3. **Verify page detection**:
+   - Extension only runs on actual SEQTA Learn pages
+   - Test on a real SEQTA instance
+
+### ❌ Settings page won't open
+
+**Problem**: Clicking the extension icon doesn't open settings.
+
+**Solutions**:
+1. **Check popup errors**:
+   - Right-click extension icon → "Inspect popup"
+   - Look for JavaScript errors
+
+2. **Clear extension storage**:
+   ```javascript
+   // In browser console on any page:
+   chrome.storage.local.clear()
+   ```
+
+3. **Reload extension and try again**
+
+## Plugin Development Issues
+
+### ❌ My plugin doesn't appear in settings
+
+**Problem**: Created a plugin but it's not showing up.
+
+**Solutions**:
+1. **Check plugin registration**:
+   - Ensure your plugin is imported in `src/plugins/index.ts`
+   - Verify `pluginManager.registerPlugin(yourPlugin)` is called
+
+2. **Check plugin structure**:
+   ```typescript
+   // Ensure your plugin has all required fields
+   const myPlugin: Plugin = {
+     id: "unique-id",      // Must be unique
+     name: "Display Name",
+     description: "What it does",
+     version: "1.0.0",
+     run: async (api) => {
+       // Your code here
+     }
+   };
+   ```
+
+3. **Check for errors**:
+   - Look in browser console for plugin loading errors
+
+### ❌ Plugin settings not working
+
+**Problem**: Plugin settings don't save or load properly.
+
+**Solutions**:
+1. **Check settings definition**:
+   ```typescript
+   import { defineSettings, booleanSetting } from "@/plugins/core/settingsHelpers";
+   
+   const settings = defineSettings({
+     myOption: booleanSetting({
+       default: true,
+       title: "My Option",
+       description: "What this does"
+     })
+   });
+   ```
+
+2. **Wait for settings to load**:
+   ```typescript
+   run: async (api) => {
+     await api.settings.loaded;  // Wait for settings to load
+     console.log(api.settings.myOption);  // Now you can use settings
+   }
+   ```
+
+### ❌ Plugin API functions not working
+
+**Problem**: `api.seqta.onMount()` or other API functions don't work.
+
+**Solutions**:
+1. **Check selector specificity**:
+   ```typescript
+   // Be specific with selectors
+   api.seqta.onMount(".home-page", (element) => {
+     // Your code
+   });
+   ```
+
+2. **Wait for elements**:
+   ```typescript
+   // Some elements load after page navigation
+   api.seqta.onPageChange((page) => {
+     if (page === "home") {
+       api.seqta.onMount(".home-content", (element) => {
+         // Now element should exist
+       });
+     }
+   });
+   ```
+
+## Build Issues
+
+### ❌ "npm run build" fails
+
+**Problem**: Production build fails with errors.
+
+**Solutions**:
+1. **Check TypeScript errors**:
+   ```bash
+   npx tsc --noEmit
+   ```
+
+2. **Clear cache and rebuild**:
+   ```bash
+   rm -rf dist node_modules
+   npm install --legacy-peer-deps
+   npm run build
+   ```
+
+3. **Check for import errors**:
+   - Ensure all imports use correct paths
+   - Check for missing files
+
+### ❌ Built extension doesn't work
+
+**Problem**: `npm run build` succeeds but extension doesn't work.
+
+**Solutions**:
+1. **Test the built extension**:
+   - Load the `dist` folder as unpacked extension
+   - Check console for errors
+
+2. **Compare with dev version**:
+   - If dev works but build doesn't, there might be a build configuration issue
+
+3. **Check manifest generation**:
+   - Verify `dist/manifest.json` looks correct
+   - Compare with working version
+
+## Common Error Messages
+
+### "Cannot access contents of the URL"
+- **Cause**: Extension permissions issue
+- **Fix**: Go to `chrome://extensions` → BetterSEQTA+ → Details → Site access → "On all sites"
+
+### "Extension context invalidated"
+- **Cause**: Extension was reloaded while page was open
+- **Fix**: Refresh the SEQTA page
+
+### "Uncaught ReferenceError: browser is not defined"
+- **Cause**: Missing webextension-polyfill import
+- **Fix**: Add `import browser from "webextension-polyfill";` at top of file
+
+### "Module not found: Can't resolve '@/...' "
+- **Cause**: TypeScript path mapping issue
+- **Fix**: Check `tsconfig.json` and `vite.config.ts` for path configuration
+
+## Performance Issues
+
+### Extension makes SEQTA slow
+1. **Check for memory leaks**:
+   - Use Chrome DevTools → Performance tab
+   - Look for growing memory usage
+
+2. **Optimize plugin code**:
+   - Remove unnecessary listeners
+   - Clean up intervals/timeouts
+   - Use efficient selectors
+
+3. **Profile your changes**:
+   - Test with extension disabled vs enabled
+   - Identify which plugin is causing issues
+
+## Still Stuck?
+
+If none of these solutions work:
+
+1. **🔍 Search existing issues**: [GitHub Issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
+
+2. **💬 Ask on Discord**: [Join our server](https://discord.gg/YzmbnCDkat) - fastest way to get help!
+
+3. **📝 Create a new issue**: Include:
+   - Your operating system
+   - Node.js version (`node --version`)
+   - Browser version
+   - Exact error message
+   - Steps to reproduce
+   - What you've already tried
+
+4. **📧 Email us**: betterseqta.plus@gmail.com for urgent issues
+
+## Getting More Debug Info
+
+### Enable verbose logging
+Add this to your plugin's `run` function:
+```typescript
+console.log("[DEBUG] Plugin starting:", api);
+```
+
+### Check extension background page
+1. Go to `chrome://extensions`
+2. Click "Details" on BetterSEQTA+
+3. Click "Inspect views: background page"
+4. Check console for background script errors
+
+### Export debug info
+Run this in browser console on a SEQTA page:
+```javascript
+console.log("Extension info:", {
+  version: chrome.runtime.getManifest().version,
+  url: window.location.href,
+  userAgent: navigator.userAgent,
+  storage: await chrome.storage.local.get()
+});
+```
+
+Remember: **Don't give up!** Every developer faces these issues. The community is here to help, and solving these problems makes you a better developer. 💪 

docs/plugins/EXAMPLE_PLUGIN.md

@@ -0,0 +1,335 @@
+# Example Plugin Template
+
+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
+
+This plugin adds a friendly welcome message to the SEQTA homepage and lets users customize the message through settings.
+
+## Complete Plugin Code
+
+Create a new file in `src/plugins/built-in/my-first-plugin/index.ts`:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+import { BasePlugin } from "@/plugins/core/settings";
+import { 
+  defineSettings, 
+  booleanSetting, 
+  stringSetting 
+} from "@/plugins/core/settingsHelpers";
+import { Setting } from "@/plugins/core/settingsHelpers";
+
+// Define the plugin settings
+const settings = defineSettings({
+  enabled: booleanSetting({
+    default: true,
+    title: "Show Welcome Message",
+    description: "Display a welcome message on the SEQTA homepage"
+  }),
+  customMessage: stringSetting({
+    default: "Welcome to SEQTA! 🎉",
+    title: "Custom Message",
+    description: "The message to display on the homepage",
+    maxLength: 100
+  }),
+  showEmoji: booleanSetting({
+    default: true,
+    title: "Show Emoji",
+    description: "Include emojis in the welcome message"
+  })
+});
+
+// Create settings class
+class MyFirstPluginSettings extends BasePlugin<typeof settings> {
+  @Setting(settings.enabled)
+  enabled!: boolean;
+
+  @Setting(settings.customMessage)
+  customMessage!: string;
+
+  @Setting(settings.showEmoji)
+  showEmoji!: boolean;
+}
+
+// Create settings instance
+const settingsInstance = new MyFirstPluginSettings();
+
+// Define the plugin
+const myFirstPlugin: Plugin<typeof settings> = {
+  id: "my-first-plugin",
+  name: "My First Plugin",
+  description: "Adds a customizable welcome message to the SEQTA homepage",
+  version: "1.0.0",
+  
+  // Link our settings
+  settings: settingsInstance.settings,
+  
+  // Mark as beta (optional)
+  beta: true,
+  
+  // Add some CSS styles (optional)
+  styles: `
+    .my-plugin-welcome {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 20px;
+      border-radius: 12px;
+      margin: 20px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      font-size: 18px;
+      animation: slideIn 0.5s ease-out;
+    }
+    
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    
+    .my-plugin-welcome .close-btn {
+      float: right;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      color: white;
+      padding: 5px 10px;
+      border-radius: 20px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    
+    .my-plugin-welcome .close-btn:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  `,
+  
+  // Main plugin function
+  run: async (api) => {
+    console.log("[My First Plugin] Starting up! 🚀");
+    
+    // Wait for settings to load
+    await api.settings.loaded;
+    
+    let welcomeElement: HTMLElement | null = null;
+    
+    // Function to create the welcome message
+    const createWelcomeMessage = () => {
+      // Only show if enabled in settings
+      if (!api.settings.enabled) {
+        return;
+      }
+      
+      // Remove existing message if it exists
+      if (welcomeElement) {
+        welcomeElement.remove();
+      }
+      
+      // Create the message element
+      welcomeElement = document.createElement("div");
+      welcomeElement.className = "my-plugin-welcome";
+      
+      // Build the message content
+      let message = api.settings.customMessage;
+      if (!api.settings.showEmoji) {
+        // Remove emojis if disabled
+        message = message.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
+      }
+      
+      welcomeElement.innerHTML = `
+        <button class="close-btn" onclick="this.parentElement.remove()">×</button>
+        <div>${message}</div>
+        <small style="opacity: 0.8; margin-top: 10px; display: block;">
+          Powered by My First Plugin
+        </small>
+      `;
+      
+      return welcomeElement;
+    };
+    
+    // Function to add message to homepage
+    const addToHomepage = () => {
+      api.seqta.onMount(".home-page, .dashboard, [class*='home']", (homePage) => {
+        console.log("[My First Plugin] Found homepage, adding welcome message");
+        
+        const message = createWelcomeMessage();
+        if (message) {
+          // Add to the top of the homepage
+          homePage.insertBefore(message, homePage.firstChild);
+        }
+      });
+    };
+    
+    // Add message when plugin starts
+    addToHomepage();
+    
+    // Re-add message when user navigates to homepage
+    api.seqta.onPageChange((page) => {
+      console.log("[My First Plugin] Page changed to:", page);
+      if (page.includes("home") || page.includes("dashboard")) {
+        // Small delay to let the page load
+        setTimeout(addToHomepage, 500);
+      }
+    });
+    
+    // Listen for settings changes and update the message
+    api.settings.onChange("enabled", (enabled) => {
+      console.log("[My First Plugin] Enabled setting changed:", enabled);
+      if (enabled) {
+        addToHomepage();
+      } else if (welcomeElement) {
+        welcomeElement.remove();
+        welcomeElement = null;
+      }
+    });
+    
+    api.settings.onChange("customMessage", (newMessage) => {
+      console.log("[My First Plugin] Message changed:", newMessage);
+      if (welcomeElement && api.settings.enabled) {
+        // Update existing message
+        addToHomepage();
+      }
+    });
+    
+    api.settings.onChange("showEmoji", (showEmoji) => {
+      console.log("[My First Plugin] Show emoji changed:", showEmoji);
+      if (welcomeElement && api.settings.enabled) {
+        // Update existing message
+        addToHomepage();
+      }
+    });
+    
+    // Return cleanup function (called when plugin is disabled)
+    return () => {
+      console.log("[My First Plugin] Cleaning up...");
+      if (welcomeElement) {
+        welcomeElement.remove();
+        welcomeElement = null;
+      }
+    };
+  }
+};
+
+export default myFirstPlugin;
+```
+
+## How to Use This Example
+
+### Step 1: Create the Plugin File
+1. Create a new folder: `src/plugins/built-in/my-first-plugin/`
+2. Create `index.ts` in that folder
+3. Copy the code above into `index.ts`
+
+### Step 2: Register the Plugin
+Add this to `src/plugins/index.ts`:
+
+```typescript
+// Add this import at the top
+import myFirstPlugin from "./built-in/my-first-plugin";
+
+// Add this line where other plugins are registered
+pluginManager.registerPlugin(myFirstPlugin);
+```
+
+### Step 3: Test It
+1. Run `npm run dev`
+2. Reload your extension in Chrome
+3. Visit a SEQTA page
+4. You should see your welcome message!
+5. Open BetterSEQTA+ settings to customize it
+
+## Key Concepts Explained
+
+### 1. Plugin Structure
+```typescript
+const myPlugin: Plugin = {
+  id: "unique-id",           // Must be unique across all plugins
+  name: "Display Name",      // Shown in settings
+  description: "What it does", // Shown in settings
+  version: "1.0.0",         // Plugin version
+  settings: settingsObject, // User-configurable options
+  styles: "/* CSS here */", // Optional CSS styles
+  run: async (api) => {     // Main plugin code
+    // Your code here
+  }
+};
+```
+
+### 2. Settings System
+```typescript
+// Define what settings your plugin has
+const settings = defineSettings({
+  myOption: booleanSetting({
+    default: true,
+    title: "My Option",
+    description: "What this option does"
+  })
+});
+
+// Use in your plugin
+if (api.settings.myOption) {
+  // Do something
+}
+```
+
+### 3. SEQTA Integration
+```typescript
+// Wait for elements to appear
+api.seqta.onMount(".some-selector", (element) => {
+  // Modify the element
+});
+
+// Detect page changes
+api.seqta.onPageChange((page) => {
+  if (page === "home") {
+    // User navigated to homepage
+  }
+});
+```
+
+### 4. Cleanup
+Always return a cleanup function to remove your changes when the plugin is disabled:
+
+```typescript
+run: async (api) => {
+  // Add your features
+  
+  return () => {
+    // Remove your features
+  };
+}
+```
+
+## Customization Ideas
+
+Want to modify this example? Here are some ideas:
+
+1. **Change the styling**: Modify the CSS to use different colors, animations, or layouts
+2. **Add more settings**: Number settings, select dropdowns, hotkeys
+3. **Different trigger**: Show on different pages, or based on time of day
+4. **Add interactions**: Buttons that do things when clicked
+5. **Store data**: Use `api.storage` to remember user preferences
+6. **Communicate with other plugins**: Use `api.events` to send/receive events
+
+## Next Steps
+
+Once you've got this working:
+
+1. **Experiment**: Try changing things and see what happens
+2. **Read other plugins**: Look at the built-in plugins for inspiration
+3. **Check the API docs**: Learn about all available API functions
+4. **Share your creation**: Show it off in Discord!
+
+## Need Help?
+
+- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
+- 📚 Read our [Plugin Development Guide](./README.md)
+- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
+- 📝 Open an issue on GitHub
+
+Happy coding! 🎉 

lib/base64loader.ts

@@ -1,8 +1,41 @@
 import fs from "fs";
 import mime from "mime-types";
 
+/**
+ * A Vite plugin designed to load files as base64 encoded data URLs.
+ * This plugin intercepts module imports that have a `?base64` query parameter
+ * appended to the file path. It then reads the targeted file, converts its content
+ * to a base64 string, and constructs a data URL which is then exported as the
+ * default export of a new JavaScript module.
+ *
+ * @example
+ * // To use this loader, import a file with ?base64 query:
+ * // import myImageBase64 from './path/to/myimage.png?base64';
+ * // myImageBase64 will then be a string like "data:image/png;base64,..."
+ */
 export const base64Loader = {
+  /**
+   * The name of the Vite plugin.
+   * @type {string}
+   */
   name: "base64-loader",
+  /**
+   * The core transformation function of the Vite plugin.
+   * It is called by Vite for modules that might need transformation. This function
+   * checks if the module ID includes the `?base64` query. If so, it reads the
+   * specified file, converts it to a base64 data URL, and returns a new
+   * JavaScript module that default exports this data URL.
+   *
+   * @param {any} _ The original code of the file. This parameter is unused by this loader.
+   * @param {string} id The ID of the module being transformed. This string typically
+   *                    contains the absolute file path and any query parameters
+   *                    (e.g., "/path/to/file.png?base64").
+   * @returns {string | null} If the module ID does not contain `?base64` query,
+   *                          it returns `null` to indicate no transformation.
+   *                          Otherwise, it returns a string of JavaScript code
+   *                          that default exports the base64 data URL of the file.
+   *                          For example: `export default 'data:image/png;base64,xxxx';`
+   */
   transform(_: any, id: string) {
     const [filePath, query] = id.split("?");
     if (query !== "base64") return null;

lib/closePlugin.ts

@@ -1,25 +1,58 @@
 // ref: https://stackoverflow.com/a/76920975
 import type { Plugin } from "vite";
 
+/**
+ * Creates a Vite plugin designed to gracefully handle the conclusion of the build process.
+ * This plugin utilizes the `buildEnd` and `closeBundle` hooks provided by Vite.
+ * It checks for errors at the end of the build:
+ * - If an error occurred during the build (`buildEnd` hook receives an error), it logs the error
+ *   and explicitly exits the Node.js process with a status code of 1 (indicating failure).
+ * - If the build completes without errors and the bundle is successfully generated
+ *   (`closeBundle` hook is called), it logs a success message and exits the process
+ *   with a status code of 0 (indicating success).
+ * This explicit process exiting can be useful in CI/CD environments or scripts that
+ * rely on the process status code to determine the build outcome.
+ * The core logic for using these hooks to exit the process is inspired by
+ * a solution found on StackOverflow (https://stackoverflow.com/a/76920975).
+ *
+ * @returns {Plugin} A Vite plugin object configured with `name`, `buildEnd`, and `closeBundle` hooks.
+ */
 export default function ClosePlugin(): Plugin {
   return {
+    /**
+     * The unique name of this Vite plugin. This name is used by Vite for identification
+     * purposes and will appear in warnings, errors, and logs related to this plugin.
+     * @type {string}
+     */
     name: "ClosePlugin", // required, will show up in warnings and errors
 
-    // use this to catch errors when building
+    /**
+     * A Vite hook that is called when the build process has finished, regardless of
+     * whether it was successful or encountered an error.
+     *
+     * @param {Error} [error] An optional error object. If the build failed, this parameter
+     *                        will contain the error that occurred. If the build was successful,
+     *                        this parameter will be undefined or null.
+     */
     buildEnd(error) {
       if (error) {
         console.error("Error bundling");
         console.error(error);
-        process.exit(1);
+        process.exit(1); // Exit with status 1 indicating an error
       } else {
-        console.log("Build ended");
+        console.log("Build ended"); // Log successful completion of the build phase
       }
     },
 
-    // use this to catch the end of a build without errors
+    /**
+     * A Vite hook that is called after the `buildEnd` hook, but only if the build
+     * was successful (i.e., no errors were passed to `buildEnd`) and all output
+     * files have been generated and written to disk. This signifies the successful
+     * completion of the entire bundling process.
+     */
     closeBundle() {
-      console.log("Bundle closed");
-      process.exit(0);
+      console.log("Bundle closed"); // Log successful closure of the bundle
+      process.exit(0); // Exit with status 0 indicating a successful build
     },
   };
 }

lib/createManifest.ts

@@ -1,12 +1,22 @@
 import type { Browser, BuildTarget, Manifest } from "./types";
 import type { AnyCase } from "./utils";
+
 /**
- *
+ * Packages a given manifest object with a specific target browser identifier.
+ * This function is typically used in multi-browser extension build processes
+ * to create a configuration object that pairs the manifest data with the browser
+ * it's intended for. The `AnyCase<Browser>` type for the browser parameter
+ * implies that browser names like 'chrome', 'firefox', etc., can be provided
+ * in various casings.
  *
  * @export
- * @param {Manifest} manifest
- * @param {AnyCase<Browser>} browser
- * @return {*}  {@link BuildTarget}
+ * @param {Manifest} manifest The core manifest data for the extension,
+ *                            compatible with `chrome.runtime.ManifestV3` as defined by the {@link Manifest} type.
+ * @param {AnyCase<Browser>} browser The target browser identifier (e.g., 'chrome', 'firefox', 'CHROME').
+ *                                   Refers to the {@link Browser} type, allowing for flexible casing.
+ * @returns {BuildTarget} An object that pairs the `manifest` with its target `browser`.
+ *                        The structure is `{ manifest: Manifest; browser: AnyCase<Browser>; }`
+ *                        as defined by the {@link BuildTarget} type.
  */
 export function createManifest(
   manifest: Manifest,
@@ -19,14 +29,17 @@ export function createManifest(
 }
 
 /**
- * create a base Manifest to inherit from
- * type Manifest = chrome.runtime.ManifestV3
- *
- * use as shared base to extend inBrowser manifests
+ * Defines a base manifest object.
+ * This function is typically used to establish a common, shared foundation for an extension's manifest
+ * (compatible with `chrome.runtime.ManifestV3` as per the {@link Manifest} type).
+ * This base can then be extended or modified for different browsers or specific build configurations.
+ * For example, you might define core permissions and properties here, and then add
+ * browser-specific keys in subsequent steps.
  *
  * @export
- * @param {Manifest} manifest
- * @return {*}  {@link Manifest}
+ * @param {Manifest} manifest The core manifest data to be used as a base.
+ *                            This should conform to the {@link Manifest} type structure.
+ * @returns {Manifest} The provided manifest object, intended to serve as a reusable base.
  */
 export function createManifestBase(manifest: Manifest): Manifest {
   return manifest;

lib/inlineWorker.ts

@@ -1,27 +1,60 @@
 // vite-plugin-inline-worker-dev.ts
+// vite-plugin-inline-worker-dev.ts
 import { Plugin } from "vite";
 import fs from "fs/promises";
-import { build, transform } from "esbuild";
+import { build } from "esbuild";
 
+/**
+ * Creates a Vite plugin designed for bundling and inlining web worker scripts during development.
+ * This plugin specifically targets module imports that include a `?inlineWorker` query parameter.
+ * When such an import is encountered, the plugin bundles the worker script using `esbuild`
+ * and then generates JavaScript code that inlines this bundled worker as a Blob,
+ * creating the worker instance via `URL.createObjectURL()`.
+ * The name "vite:inline-worker-dev" suggests it's primarily intended for development builds.
+ *
+ * @returns {Plugin} A Vite plugin object with `name` and `load` properties.
+ */
 export default function InlineWorkerDevPlugin(): Plugin {
   return {
+    /**
+     * The unique name of this Vite plugin.
+     * @type {string}
+     */
     name: "vite:inline-worker-dev",
+    /**
+     * The Vite hook responsible for loading and transforming modules.
+     * This function intercepts modules imported with `?inlineWorker`.
+     * For such modules, it bundles the worker script and returns JavaScript code
+     * that, when executed, will create an instance of this worker from an inlined Blob.
+     *
+     * @async
+     * @param {string} id The path or ID of the module Vite is attempting to load,
+     *                    potentially including query parameters (e.g., "/path/to/worker.ts?inlineWorker").
+     * @returns {Promise<string | null>} A promise that resolves to:
+     *                                   - `null` if the module ID does not include `?inlineWorker`.
+     *                                   - A string of JavaScript code if the module is an inline worker.
+     *                                     This code will define a default export function (e.g., `InlineWorker`)
+     *                                     that, when called, creates and returns a new `Worker` instance
+     *                                     from the bundled and inlined worker script.
+     */
     async load(id) {
       if (id.includes("?inlineWorker")) {
         const [cleanPath] = id.split("?");
-        console.log("cleanPath", cleanPath);
-        const code = await fs.readFile(cleanPath, "utf-8");
+        // Note: Original code had `await fs.readFile(cleanPath, "utf-8");` but `code` wasn't used.
+        // `esbuild` directly takes `cleanPath` as an entry point.
         const result = await build({
-          entryPoints: [cleanPath],
+          entryPoints: [cleanPath], // esbuild uses the file path directly
           bundle: true,
-          write: false,
-          platform: "browser",
-          format: "iife",
-          target: "esnext",
+          write: false, // We want the output in memory, not written to disk
+          platform: "browser", // Target environment for the worker code
+          format: "iife", // Immediately Invoked Function Expression, suitable for workers
+          target: "esnext", // Transpile to modern JavaScript
         });
 
         const workerCode = result.outputFiles[0].text;
 
+        // Construct JavaScript code that will create the worker from a Blob.
+        // This code is what gets returned to Vite and replaces the original import.
         const workerBlobCode = `
           const code = ${JSON.stringify(workerCode)};
           export default function InlineWorker() {
@@ -31,7 +64,7 @@ export default function InlineWorkerDevPlugin(): Plugin {
         `;
         return workerBlobCode;
       }
-      return null;
+      return null; // Let Vite handle other modules normally
     },
   };
 }

lib/publish.js

@@ -1,8 +1,33 @@
+/**
+ * @fileoverview
+ * This script is a command-line utility for publishing the BetterSEQTA+ extension.
+ * It automates the process of finding the latest built extension ZIP files for specified
+ * browsers, zipping the project source code (for Firefox), and then invoking the
+ * `publish-extension` tool with the appropriate arguments.
+ *
+ * To use this script, invoke it with Node.js followed by browser arguments:
+ * e.g., `node lib/publish.js --b chrome firefox`
+ * or `node lib/publish.js --b chrome`
+ * or `node lib/publish.js --b firefox`
+ */
+
 const glob = require("glob");
 const semver = require("semver");
 const { execSync } = require("child_process");
 const path = require("path");
 
+/**
+ * Determines the latest version string from a list of filenames that include version numbers.
+ * Filenames are expected to follow a pattern like `betterseqtaplus@3.4.5.1-chrome.zip`.
+ * This function handles potential 4-part versions (e.g., `3.4.5.1`) by trimming them
+ * to 3 parts (e.g., `3.4.5`) for comparison using the `semver` library. After identifying
+ * the latest semver-compatible version, it returns the original full version string
+ * (e.g., "3.4.5.1") that corresponds to this latest version.
+ *
+ * @param {string[]} files An array of filenames.
+ * @returns {string | null} The latest version string (e.g., "3.4.5.1") found among the files,
+ *                          or `null` if no valid version numbers are found or no files are provided.
+ */
 function getLatestVersion(files) {
   console.log("Files passed to getLatestVersion:", files);
 
@@ -19,32 +44,56 @@ function getLatestVersion(files) {
       if (!match) return null;
 
       const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
-      const semverVersion = fullVersion.split(".").slice(0, 3).join("."); // Trim to 3.4.5
+      // Trim to 3 parts for semver comparison, as semver typically handles X.Y.Z
+      const semverVersion = fullVersion.split(".").slice(0, 3).join(".");
 
       return { fullVersion, semverVersion };
     })
-    .filter(Boolean);
+    .filter(Boolean); // Remove null entries if any file didn't match
 
   console.log(
     "Extracted versions:",
     versions.map((v) => v.semverVersion),
   );
 
+  if (versions.length === 0) {
+    console.log("No versions extracted.");
+    return null;
+  }
+
   // Find latest version using the trimmed semver format
   const latestSemver = semver.maxSatisfying(
     versions.map((v) => v.semverVersion),
-    "*",
+    "*", // Satisfy any version, effectively finding the max
   );
   console.log("Latest SemVer-compatible version:", latestSemver);
 
-  // Get the full version that matches the latest SemVer version
-  const latestVersion =
-    versions.find((v) => v.semverVersion === latestSemver)?.fullVersion || null;
-
-  console.log("Final selected latest version:", latestVersion);
-  return latestVersion;
+  if (!latestSemver) {
+    console.log("Could not determine latest semver version.");
+    return null;
   }
 
+  // Get the original full version string that matches the identified latest SemVer version
+  const latestVersionData = versions.find(
+    (v) => v.semverVersion === latestSemver,
+  );
+  const latestFullVersion = latestVersionData ? latestVersionData.fullVersion : null;
+
+  console.log("Final selected latest version:", latestFullVersion);
+  return latestFullVersion;
+}
+
+/**
+ * Finds the path to the latest built ZIP file for a specific browser.
+ * It constructs a glob pattern based on the browser name (e.g., `dist/betterseqtaplus@*-*chrome.zip`),
+ * finds all matching files, and then uses `getLatestVersion` to identify the version string
+ * of the most recent file. Finally, it returns the full path to that specific file.
+ *
+ * @param {string} browser A string indicating the target browser (e.g., "chrome", "firefox").
+ * @returns {string | undefined} The filepath string to the latest ZIP file for the specified browser,
+ *                               or `undefined` if no matching file is found or if the latest version
+ *                               cannot be determined.
+ */
 function getLatestFiles(browser) {
   const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
   console.log("Glob pattern:", pattern);
@@ -52,15 +101,32 @@ function getLatestFiles(browser) {
   const files = glob.sync(pattern);
   console.log("Files found for browser", browser, ":", files);
 
-  const latestVersion = getLatestVersion(files);
+  if (files.length === 0) {
+    console.log("No files found for browser", browser);
+    return undefined;
+  }
 
-  // Find the exact file by matching the original full version
+  const latestVersion = getLatestVersion(files);
+  if (!latestVersion) {
+    console.log("Could not determine latest version for browser", browser);
+    return undefined;
+  }
+
+  // Find the exact file by matching the original full version string
   const latestFile = files.find((file) => file.includes(`@${latestVersion}-`));
 
   console.log("Latest file for browser", browser, ":", latestFile);
   return latestFile;
 }
 
+/**
+ * Creates a ZIP file of the project's source code, excluding specified development-related
+ * files and directories such as `node_modules`, `dist`, `.git`, etc.
+ * It uses the `7z` command-line tool to perform the archiving.
+ * The output filename is fixed as `dist/betterseqtaplus@latest-sources.zip`.
+ *
+ * @returns {string} The filename of the created ZIP file (e.g., `dist/betterseqtaplus@latest-sources.zip`).
+ */
 function zipSources() {
   const zipFileName = `dist/betterseqtaplus@latest-sources.zip`;
 
@@ -74,17 +140,31 @@ function zipSources() {
     "LICENSE",
     "package.json",
   ]
-    .map((pattern) => `-x!${pattern}`)
+    .map((pattern) => `-x!${pattern}`) // Format for 7z exclude syntax
     .join(" ");
 
+  // Command to zip the current directory's contents into zipFileName, applying exclude patterns
   const zipCommand = `7z a ${zipFileName} . ${excludePatterns}`;
 
   console.log("Zipping project sources with command:", zipCommand);
-  execSync(zipCommand, { stdio: "inherit" });
+  execSync(zipCommand, { stdio: "inherit" }); // Execute synchronously and show output
 
   return zipFileName;
 }
 
+/**
+ * Orchestrates the extension publishing process for the specified browsers.
+ * This function performs the following steps:
+ * 1. Calls `getLatestFiles` to find the latest built ZIP for Chrome if "chrome" is in `browsers`.
+ * 2. Calls `getLatestFiles` to find the latest built ZIP for Firefox if "firefox" is in `browsers`.
+ * 3. Calls `zipSources` to create a source code ZIP if "firefox" is in `browsers` (required for Mozilla Add-ons).
+ * 4. Validates that all required files were found and that at least one browser was specified. Exits if not.
+ * 5. Constructs the `publish-extension` command-line string with the appropriate arguments
+ *    based on the found ZIP files for the specified browsers.
+ * 6. Executes the constructed `publish-extension` command.
+ *
+ * @param {string[]} browsers An array of browser strings (e.g., ["chrome", "firefox"]) for which to publish the extension.
+ */
 function runPublishCommand(browsers) {
   const chromeZip = browsers.includes("chrome")
     ? getLatestFiles("chrome")
@@ -92,6 +172,7 @@ function runPublishCommand(browsers) {
   const firefoxZip = browsers.includes("firefox")
     ? getLatestFiles("firefox")
     : null;
+  // Sources are typically only needed for Firefox submissions
   const firefoxSourcesZip = browsers.includes("firefox") ? zipSources() : null;
 
   console.log("Chrome zip:", chromeZip);
@@ -100,15 +181,16 @@ function runPublishCommand(browsers) {
 
   if (browsers.length === 0) {
     console.log("No browsers specified. Exiting.");
-    process.exit(0);
+    process.exit(0); // Exit gracefully if no action is needed
   }
 
+  // Check if required files are missing for the specified browsers
   if (
     (browsers.includes("chrome") && !chromeZip) ||
     (browsers.includes("firefox") && (!firefoxZip || !firefoxSourcesZip))
   ) {
     console.error("Could not find required zip files for specified browsers.");
-    process.exit(1);
+    process.exit(1); // Exit with error status
   }
 
   let command = "publish-extension";
@@ -120,12 +202,13 @@ function runPublishCommand(browsers) {
   }
 
   console.log("Running command:", command);
-  execSync(command, { stdio: "inherit" });
+  execSync(command, { stdio: "inherit" }); // Execute and show output
 }
 
-// Parse command-line arguments
+// Parse command-line arguments to determine which browsers to publish for
 const args = process.argv.slice(2);
-const browserIndex = args.indexOf("--b");
+const browserIndex = args.indexOf("--b"); // Find the --b flag
+// If --b is found, take all subsequent arguments as browser names
 const browsers = browserIndex !== -1 ? args.slice(browserIndex + 1) : [];
 
 runPublishCommand(browsers);

lib/touchGlobalCSS.ts

@@ -1,17 +1,55 @@
 import fs from "fs";
 
+/**
+ * Creates a Vite plugin designed to improve the reliability of Hot Module Replacement (HMR)
+ * for global CSS files.
+ *
+ * When a JavaScript/TypeScript module that imports a CSS file is updated, Vite's HMR
+ * might not always reliably update the styles injected by that global CSS. This plugin
+ * attempts to mitigate this by listening for hot updates. If an updated module
+ * has direct importers that are CSS files (e.g., a JS file imports a global CSS file),
+ * this plugin will "touch" those CSS files by updating their access and modification
+ * timestamps using `fs.utimesSync`. This action can help signal to Vite or the browser
+ * that the CSS file has changed, potentially triggering a more reliable style reload.
+ *
+ * @returns {import('vite').Plugin} A Vite plugin object configured with `name` and `handleHotUpdate` hooks.
+ */
 export default function touchGlobalCSSPlugin() {
   return {
+    /**
+     * The unique name of this Vite plugin.
+     * This name is used by Vite for identification purposes and will appear in logs.
+     * @type {string}
+     */
     name: "touch-global-css",
+    /**
+     * A Vite hook that is called when a module is hot-updated.
+     * This function inspects the importers of the updated module. If any of these
+     * importers are CSS files, their filesystem timestamps are updated ("touched").
+     *
+     * @param {object} context The context object provided by Vite's `handleHotUpdate` hook.
+     * @param {Array<import('vite').ModuleNode>} context.modules An array of `ModuleNode` instances that have been updated.
+     *                                                            This plugin specifically accesses `modules[0]._clientModule.importers`
+     *                                                            to find CSS files that import the updated module.
+     */
     handleHotUpdate({ modules }) {
-      // log all of the staticImportedUrls
-      const importers = modules[0]._clientModule.importers;
+      // It's assumed `modules[0]` is the primary updated module of interest.
+      // `_clientModule` and `importers` might be internal or less stable Vite APIs.
+      const importers = modules[0]?._clientModule?.importers;
+      if (importers) {
         importers.forEach((importer) => {
-        if (importer.file.includes(".css")) {
-          console.log("touching", importer.file);
+          // Check if the importer is a CSS file
+          if (importer.file && importer.file.includes(".css")) {
+            console.log("[touch-global-css] touching", importer.file);
+            try {
+              // Update the access and modification times of the CSS file to the current time
               fs.utimesSync(importer.file, new Date(), new Date());
+            } catch (err) {
+              console.error(`[touch-global-css] Error touching file ${importer.file}:`, err);
+            }
           }
         });
+      }
     },
   };
 }

lib/types.ts

@@ -1,6 +1,9 @@
 import type { ManifestV3Export } from "@crxjs/vite-plugin";
-import { type AnyCase, createEnum } from "./utils";
+import { type AnyCase, createEnum, ObjectValues } from "./utils";
 
+/**
+ * Enumerates supported JavaScript frameworks for project generation or configuration.
+ */
 export const FrameworkEnum = {
   React: "React",
   Vanilla: "Vanilla",
@@ -10,6 +13,9 @@ export const FrameworkEnum = {
   Vue: "Vue",
 } as const;
 
+/**
+ * Enumerates supported web browsers, typically for targeting builds or configurations.
+ */
 export const BrowserEnum = {
   Chrome: "Chrome",
   Brave: "Brave",
@@ -19,15 +25,26 @@ export const BrowserEnum = {
   Safari: "Safari",
 } as const;
 
+/**
+ * @private
+ * Enumerates supported programming languages for project setup.
+ * This enum is not exported, suggesting it's for internal use within this module or related modules.
+ */
 const LanguageEnum = {
   TypeScript: "TypeScript",
   JavaScript: "JavaScript",
 } as const;
 
+/**
+ * Enumerates supported styling options or libraries.
+ */
 export const StyleEnum = {
   Tailwind: "Tailwind",
 } as const;
 
+/**
+ * Enumerates supported package managers.
+ */
 export const PackageManagerEnum = {
   Bun: "Bun",
   PnPm: "PnPm",
@@ -35,7 +52,21 @@ export const PackageManagerEnum = {
   Yarn: "Yarn",
 } as const;
 
-// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts
+/**
+ * Defines the structure for browser-specific settings within a web extension manifest.
+ * This is particularly used for Firefox (gecko) extensions to specify properties like
+ * an extension ID, and minimum/maximum supported browser versions.
+ * The structure is based on common manifest extensions for Firefox.
+ * See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
+ * The link in the original code (// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts)
+ * also points to type definitions that include this structure.
+ *
+ * @property {object} [browser_specific_settings] - Container for browser-specific settings.
+ * @property {object} [browser_specific_settings.gecko] - Settings specific to Gecko-based browsers (e.g., Firefox).
+ * @property {string} [browser_specific_settings.gecko.id] - The unique identifier for the extension in Firefox.
+ * @property {string} [browser_specific_settings.gecko.strict_min_version] - The minimum version of Firefox the extension is compatible with.
+ * @property {string} [browser_specific_settings.gecko.strict_max_version] - The maximum version of Firefox the extension is compatible with.
+ */
 export type BrowserSpecificSettings = {
   browser_specific_settings?: {
     gecko?: {
@@ -46,59 +77,164 @@ export type BrowserSpecificSettings = {
   };
 };
 
+/**
+ * Represents the structure of a Chrome Manifest V3 file.
+ * This type is an alias for `ManifestV3Export` from the `@crxjs/vite-plugin`,
+ * which provides a comprehensive definition for Chrome extension manifests.
+ */
 export type Manifest = ManifestV3Export;
+
+/** Alias for the `icons` property within a Chrome Manifest V3. */
 export type ManifestIcons = chrome.runtime.ManifestIcons;
+/** Alias for the `background` property within a Chrome Manifest V3. */
 export type ManifestBackground = chrome.runtime.ManifestV3["background"];
+/** Alias for the `content_scripts` property within a Chrome Manifest V3. */
 export type ManifestContentScripts =
   chrome.runtime.ManifestV3["content_scripts"];
+/** Alias for the `web_accessible_resources` property within a Chrome Manifest V3. */
 export type ManifestWebAccessibleResources =
   chrome.runtime.ManifestV3["web_accessible_resources"];
+/** Alias for the `commands` property within a Chrome Manifest V3. */
 export type ManifestCommands = chrome.runtime.ManifestV3["commands"];
+/** Alias for the `action` property (or `browser_action`/`page_action`) within a Chrome Manifest V3. */
 export type ManifestAction = chrome.runtime.ManifestV3["action"];
+/** Alias for the `permissions` property within a Chrome Manifest V3. */
 export type ManifestPermissions = chrome.runtime.ManifestV3["permissions"];
+/** Alias for the `options_ui` property within a Chrome Manifest V3. */
 export type ManifestOptionsUI = chrome.runtime.ManifestV3["options_ui"];
+/** Alias for the `chrome_url_overrides` property within a Chrome Manifest V3. */
 export type ManifestURLOverrides =
   chrome.runtime.ManifestV3["chrome_url_overrides"];
 
+/**
+ * Creates a type that accepts a string literal `T` in either its capitalized or lowercase form.
+ * Useful for defining types that should be case-insensitive for specific known strings.
+ * @template T - A string literal type.
+ */
 export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>;
+
+/**
+ * Creates a record type where both keys and values are derived from a string literal `T`,
+ * specifically using `BrowserName<T>` which allows for capitalized or lowercase forms.
+ * This could be used to define an object where, for example, keys are 'Chrome' or 'chrome'
+ * and values are also 'Chrome' or 'chrome'.
+ * @template T - A string literal type, typically representing a browser name.
+ */
 export type BrowserEnumType<T extends string> = {
   [browser in BrowserName<T>]: BrowserName<T>;
 };
 
+/**
+ * Represents the target browser for a build, allowing for various casings of browser names
+ * (e.g., "chrome", "Chrome", "CHROME") through the `AnyCase<Browser>` utility type.
+ * `Browser` itself is a union of specific browser name strings (e.g., "Chrome" | "Firefox").
+ */
 export type BuildMode = AnyCase<Browser>;
+
+/**
+ * Defines an object structure that pairs a web extension `Manifest`
+ * with its target `browser` (represented as `AnyCase<Browser>`).
+ * This is commonly used in build processes to manage configurations for different browsers.
+ */
 export type BuildTarget = {
   manifest: Manifest;
   browser: AnyCase<Browser>;
 };
+
+/**
+ * Defines the configuration options for a build process.
+ * @property {"build" | "serve"} [command] - The type of build command (e.g., 'build' for production, 'serve' for development).
+ * @property {AnyCase<Browser> | string | undefined} [mode] - The target build mode, typically a browser name (allowing various casings)
+ *                                                           or potentially other custom mode strings.
+ */
 export type BuildConfig = {
   command?: "build" | "serve";
   mode?: AnyCase<Browser> | string | undefined;
 };
 
+/**
+ * Defines the structure for repository information, commonly found in `package.json`.
+ * @property {string} type - The type of the repository (e.g., "git").
+ * @property {string} [url] - The URL of the repository.
+ * @property {Bugs} [bugs] - An object containing information about where to report bugs.
+ */
 export interface Repository {
   type: string;
   url?: string;
   bugs?: Bugs;
 }
 
+/**
+ * Defines the structure for bug reporting information, often part of the `Repository` interface.
+ * @property {string} [url] - The URL of the issue tracker.
+ * @property {string} [email] - The email address for reporting bugs.
+ */
 export interface Bugs {
   url?: string;
   email?: string;
 }
 
-export type Browser = (typeof BrowserEnum)[keyof typeof BrowserEnum];
+/**
+ * A string literal union type representing supported browser names, derived from the values of `BrowserEnum`.
+ * e.g., "Chrome" | "Firefox" | ...
+ */
+export type Browser = ObjectValues<typeof BrowserEnum>;
+
+/**
+ * A constant intended to provide access to browser names, potentially in various casings.
+ * Its type `AnyCase<Browser>` suggests it can be used where case-insensitivity for browser names is needed.
+ * The `createEnum(BrowserEnum)` call aims to produce a representation of browser names from `BrowserEnum`.
+ * Note: `createEnum` from `lib/utils.ts` has a declared return type of `ObjectValues<T>` (a union of values),
+ * while its implementation uses `Object.values()` which returns an array. This constant will hold the
+ * runtime array value, but its JSDoc type refers to the more restrictive `AnyCase<Browser>` union type.
+ */
 export const Browser: AnyCase<Browser> = createEnum(BrowserEnum);
 
-export type PackageManager =
-  (typeof PackageManagerEnum)[keyof typeof PackageManagerEnum];
+/**
+ * A string literal union type representing supported package managers, derived from the values of `PackageManagerEnum`.
+ * e.g., "Bun" | "PnPm" | "Npm" | "Yarn"
+ */
+export type PackageManager = ObjectValues<typeof PackageManagerEnum>;
+/**
+ * A constant intended to provide access to package manager names, potentially in various casings.
+ * Its type `AnyCase<PackageManager>` suggests it can be used where case-insensitivity for package manager names is needed.
+ * Utilizes `createEnum(PackageManagerEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
 export const PackageManager: AnyCase<PackageManager> =
   createEnum(PackageManagerEnum);
 
-export type Framework = (typeof FrameworkEnum)[keyof typeof FrameworkEnum];
+/**
+ * A string literal union type representing supported JavaScript frameworks, derived from the values of `FrameworkEnum`.
+ * e.g., "React" | "Vanilla" | ...
+ */
+export type Framework = ObjectValues<typeof FrameworkEnum>;
+/**
+ * A constant intended to provide access to framework names, potentially in various casings.
+ * Its type `AnyCase<Framework>` suggests it can be used where case-insensitivity for framework names is needed.
+ * Utilizes `createEnum(FrameworkEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
 export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum);
 
-export type Style = (typeof StyleEnum)[keyof typeof StyleEnum];
+/**
+ * A string literal union type representing supported styling options, derived from the values of `StyleEnum`.
+ * e.g., "Tailwind"
+ */
+export type Style = ObjectValues<typeof StyleEnum>;
+/**
+ * A constant intended to provide access to style option names, potentially in various casings.
+ * Its type `AnyCase<Style>` suggests it can be used where case-insensitivity for style names is needed.
+ * Utilizes `createEnum(StyleEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
 export const Style: AnyCase<Style> = createEnum(StyleEnum);
 
-export type Language = (typeof LanguageEnum)[keyof typeof LanguageEnum];
+/**
+ * A string literal union type representing supported programming languages, derived from the values of `LanguageEnum`.
+ * e.g., "TypeScript" | "JavaScript"
+ */
+export type Language = ObjectValues<typeof LanguageEnum>;
+/**
+ * A constant intended to provide access to programming language names, potentially in various casings.
+ * Its type `AnyCase<Language>` suggests it can be used where case-insensitivity for language names is needed.
+ * Utilizes `createEnum(LanguageEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
 export const Language: AnyCase<Language> = createEnum(LanguageEnum);

lib/utils.ts

@@ -1,21 +1,84 @@
+/**
+ * Extracts a union type of all values from the properties of an object type `T`.
+ *
+ * @template T - An object type (typically a Record or an enum-like object).
+ * @example
+ * type MyObject = { a: "foo", b: "bar", c: 123 };
+ * type MyObjectValues = ObjectValues<MyObject>; // "foo" | "bar" | 123
+ */
 export type ObjectValues<T> = T[keyof T];
 
+/**
+ * Creates a union of an object's string values, often used to represent the set of possible values for an enum-like object.
+ * Note: The implementation `Object.values(enumObj) as unknown as ObjectValues<T>` returns an array at runtime,
+ * but the declared return type `ObjectValues<T>` is a union of the object's property values.
+ * This type signature suggests it's intended to represent the set of possible string values from `enumObj`.
+ *
+ * @template T - An object type where keys are strings and values are strings (e.g., `const MyEnum = { VAL_A: "A", VAL_B: "B" }`).
+ * @param {T} enumObj - The object from which to extract values.
+ * @returns {ObjectValues<T>} A union type representing all possible string values of the `enumObj`.
+ *                            For example, if `enumObj` is `{ A: "valA", B: "valB" }`, the return type is `"valA" | "valB"`.
+ *                            (Runtime behavior of `Object.values()` is to return an array like `["valA", "valB"]`).
+ */
 export function createEnum<T extends Record<string, string>>(enumObj: T) {
   return Object.values(enumObj) as unknown as ObjectValues<T>;
 }
 
+/**
+ * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
+ * of a given string literal type `T`.
+ *
+ * @template T - A string literal type.
+ * @example
+ * type MyString = "example";
+ * type MyStringAnyCase = AnyCase<MyString>; // "EXAMPLE" | "example" | "Example" | "example" (Uncapitalize<"Example"> is "example")
+ */
 export type AnyCase<T extends string> =
   | Uppercase<T>
   | Lowercase<T>
   | Capitalize<T>
   | Uncapitalize<T>;
 
+/**
+ * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
+ * of the union of two given string literal types `T` and `K`.
+ * This is useful for representing a combined set of related string constants where case variations are permitted for each.
+ *
+ * @template T - A string literal type.
+ * @template K - Another string literal type.
+ * @example
+ * type Lang1 = "english";
+ * type Lang2 = "french";
+ * type CombinedLangsAnyCase = AnyCaseLanguage<Lang1, Lang2>;
+ * // Result includes: "ENGLISH" | "english" | "English" | "FRENCH" | "french" | "French" etc.
+ * // for all case variations of "english" and "french".
+ */
 export type AnyCaseLanguage<T extends string, K extends string> =
   | Uppercase<T | K>
   | Lowercase<T | K>
   | Capitalize<T | K>
   | Uncapitalize<T | K>;
 
+/**
+ * Extracts a new object type containing only the keys of `T` whose properties are optional
+ * (i.e., their type includes `undefined`). The values associated with these keys retain their original types.
+ *
+ * @template T - An object type.
+ * @example
+ * type MyObject = {
+ *   requiredProp: string;
+ *   optionalProp?: number;
+ *   anotherOptional?: boolean | undefined;
+ *   nullProp: string | null;
+ * };
+ * type MyOptionalProps = OptionalKeys<MyObject>;
+ * // MyOptionalProps would be conceptually equivalent to:
+ * // {
+ * //   optionalProp?: number;
+ * //   anotherOptional?: boolean | undefined;
+ * // }
+ * // The actual resulting type is an object type with only these optional keys.
+ */
 export type OptionalKeys<T> = {
   [K in keyof T as undefined extends T[K] ? K : never]: T[K];
 };

package.json

@@ -1,12 +1,14 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.6.1",
+  "version": "3.4.15",
   "type": "module",
   "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": {
+    "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",
@@ -16,10 +18,7 @@
     "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
     "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
     "publish": "bun lib/publish.js --b",
-    "zip": "bedframe zip",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "zip": "bedframe zip"
   },
   "targets": {
     "prod": {
@@ -31,36 +30,34 @@
   "keywords": [],
   "author": {
     "name": "SethBurkart123",
-    "email": "betterseqta@betterseqta.com",
+    "email": "betterseqta.plus@gmail.com",
     "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.0.91",
-    "@crxjs/vite-plugin": "2.0.0-beta.32",
-    "@types/jest": "^29.5.14",
-    "@types/mime-types": "^2.1.4",
+    "@bedframe/cli": "^0.0.95",
+    "@crxjs/vite-plugin": "^2.2.0",
+    "@types/mime-types": "^3.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "cross-env": "^7.0.3",
-    "dependency-cruiser": "^16.10.0",
-    "eslint": "9.22.0",
+    "cross-env": "^10.0.0",
+    "dependency-cruiser": "^17.0.1",
+    "eslint": "^9.33.0",
     "glob": "^11.0.1",
-    "jest": "^29.7.0",
-    "mime-types": "^2.1.35",
+    "mime-types": "^3.0.1",
     "prettier": "^3.5.3",
     "process": "^0.11.10",
-    "publish-browser-extension": "^3.0.0",
+    "publish-browser-extension": "^4.0.0",
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
     "tailwindcss": "3",
-    "ts-jest": "^29.3.4",
     "url": "^0.11.4"
   },
   "dependencies": {
+    "@bedframe/core": "^0.0.46",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-css": "^6.3.1",
@@ -71,16 +68,17 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/chrome": "^0.0.308",
+    "@types/chrome": "^0.1.4",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.16",
-    "@types/node": "^22.13.10",
+    "@types/node": "^24.3.0",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^10.0.0",
     "@types/webextension-polyfill": "^0.12.3",
     "@uiw/codemirror-extensions-color": "^4.23.10",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "autoprefixer": "^10.4.21",
+    "canvas-confetti": "^1.9.3",
     "codemirror": "^6.0.1",
     "color": "^5.0.0",
     "dompurify": "^3.2.4",
@@ -97,6 +95,7 @@
     "mathjs": "^14.4.0",
     "million": "^3.1.11",
     "motion": "^12.4.12",
+    "pdfjs-dist": "^5.4.530",
     "postcss": "^8.5.3",
     "react": "17",
     "react-best-gradient-color-picker": "3.0.11",

settings.patch

@@ -1,126 +0,0 @@
---- a/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
-+++ b/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
-@@ -2,7 +2,7 @@
- 
- // Base interfaces for our settings
- interface BaseSettingOptions {
--  title: string;
-+  readonly title: string; // Mark as readonly where appropriate
-   description?: string;
- }
- 
-@@ -11,21 +11,21 @@
- }
- 
- interface StringSettingOptions extends BaseSettingOptions {
--  default: string;
-+  readonly default: string;
-   maxLength?: number;
-   pattern?: string;
- }
- 
- interface NumberSettingOptions extends BaseSettingOptions {
--  default: number;
-+  readonly default: number;
-   min?: number;
-   max?: number;
-   step?: number;
- }
- 
- interface SelectSettingOptions<T extends string> extends BaseSettingOptions {
--  default: T;
--  options: readonly T[];
-+  readonly default: T;
-+  readonly options: readonly T[];
- }
- 
- // The actual decorators
-@@ -34,14 +34,16 @@
-     // Ensure the settings property exists on the constructor's prototype
-     const proto = target.constructor.prototype;
-     if (!proto.hasOwnProperty('settings')) {
--      proto.settings = {};
-+      // Initialize with a base type that can be extended
-+      Object.defineProperty(proto, 'settings', {
-+        value: {},
-+        writable: true, // Allows adding properties
-+        configurable: true,
-+        enumerable: true
-+      });
-     }
--    
-+
-     // Add the setting to the prototype's settings object with const assertion
-     proto.settings[propertyKey] = {
-       type: 'boolean' as const,
-       ...options
-     };
--  };
--}
--
--export function StringSetting(options: StringSettingOptions): PropertyDecorator {
--  return (target: Object, propertyKey: string | symbol) => {
--    // Ensure the settings property exists on the constructor's prototype
--    const proto = target.constructor.prototype;
--    if (!proto.hasOwnProperty('settings')) {
--      proto.settings = {};
--    }
--    
--    // Add the setting to the prototype's settings object with const assertion
--    proto.settings[propertyKey] = {
--      type: 'string' as const,
--      ...options
--    };
-   };
- }
- 
-@@ -50,14 +52,16 @@
-     // Ensure the settings property exists on the constructor's prototype
-     const proto = target.constructor.prototype;
-     if (!proto.hasOwnProperty('settings')) {
--      proto.settings = {};
-+       Object.defineProperty(proto, 'settings', {
-+        value: {},
-+        writable: true,
-+        configurable: true,
-+        enumerable: true
-+      });
-     }
--    
-+
-     // Add the setting to the prototype's settings object with const assertion
-     proto.settings[propertyKey] = {
-       type: 'number' as const,
-       ...options
-     };
--  };
--}
--
--export function SelectSetting<T extends string>(options: SelectSettingOptions<T>): PropertyDecorator {
--  return (target: Object, propertyKey: string | symbol) => {
--    // Ensure the settings property exists on the constructor's prototype
--    const proto = target.constructor.prototype;
--    if (!proto.hasOwnProperty('settings')) {
--      proto.settings = {};
--    }
--    
--    // Add the setting to the prototype's settings object with const assertion
--    proto.settings[propertyKey] = {
--      type: 'select' as const,
--      ...options
--    };
-   };
- }
- 
- // Base plugin class that handles settings
- export abstract class BasePlugin<T extends PluginSettings = PluginSettings> {
-   // The settings property will be populated by decorators
--  settings!: T;
--  
-+  // Keep the instance property and constructor logic as is,
-+  // as changing it would require changing animated-background/index.ts
-+  settings!: T; // Use definite assignment assertion
-+
-   constructor() {
-     // Copy settings from the prototype to the instance
-     // This ensures that each instance has its own settings object

src/SEQTA.ts

@@ -9,6 +9,7 @@ import browser from "webextension-polyfill";
 import * as plugins from "@/plugins";
 import { main } from "@/seqta/main";
 import { delay } from "./seqta/utils/delay";
+import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
 
 export let MenuOptionsOpen = false;
 
@@ -25,10 +26,7 @@ if (document.childNodes[1]) {
 }
 
 async function init() {
-  const hasSEQTATitle = document.title.includes("SEQTA Learn");
-
-  if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
-    // Verify we are on a SEQTA page
+  if (hasSEQTAText && document.title.includes("SEQTA Learn") && !IsSEQTAPage) {
     IsSEQTAPage = true;
     console.info("[BetterSEQTA+] Verified SEQTA Page");
 
@@ -36,10 +34,30 @@ async function init() {
     documentLoadStyle.textContent = documentLoadCSS;
     document.head.appendChild(documentLoadStyle);
 
-    const icon = document.querySelector(
-      'link[rel*="icon"]',
-    )! as HTMLLinkElement;
-    icon.href = icon48; // Change the icon
+    replaceIcons();
+
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+
+        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();
@@ -51,20 +69,31 @@ async function init() {
       }
 
       await main();
-
-      if (settingsState.onoff) {
-        // Initialize legacy plugins
       plugins.Monofile();
 
-        // Initialize new plugin system
+      if (settingsState.onoff) {
         await plugins.initializePlugins();
       }
 
+      if (settingsState.devMode) {
+        initializeHideSensitiveToggle();
+      }
+
       console.info(
         "[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
       );
-    } catch (error: any) {
+    } catch (error) {
       console.error(error);
     }
   }
 }
+
+function replaceIcons() {
+  document
+    .querySelectorAll<HTMLLinkElement>('link[rel*="icon"]')
+    .forEach((link) => {
+      if (link.href !== icon48) {
+        link.href = icon48;
+      }
+    });
+}

src/background.ts

@@ -49,7 +49,7 @@ browser.runtime.onMessage.addListener(
         break;
 
       case "setDefaultStorage":
-        SetStorageValue(DefaultValues);
+        SetStorageValue(getDefaultValues());
         break;
 
       case "sendNews":
@@ -64,7 +64,18 @@ browser.runtime.onMessage.addListener(
   },
 );
 
-const DefaultValues: SettingsState = {
+function detectLowEndDevice(): boolean {
+  // Check for low-end hardware indicators
+  const lowCoreCount = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4;
+  const lowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory <= 2;
+  
+  return lowCoreCount || lowMemory;
+}
+
+function getDefaultValues(): SettingsState {
+  const isLowEndDevice = detectLowEndDevice();
+
+  return {
     onoff: true,
     animatedbk: true,
     bksliderinput: "50",
@@ -96,8 +107,8 @@ const DefaultValues: SettingsState = {
       "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
     originalSelectedColor: "",
     DarkMode: true,
-  animations: true,
-  assessmentsAverage: true,
+    animations: !isLowEndDevice,
+    assessmentsAverage: false,
     defaultPage: "home",
     shortcuts: [
       {
@@ -117,6 +128,7 @@ const DefaultValues: SettingsState = {
     lettergrade: false,
     newsSource: "australia",
   };
+}
 
 function SetStorageValue(object: any) {
   for (var i in object) {
@@ -124,78 +136,11 @@ function SetStorageValue(object: any) {
   }
 }
 
-function convertBksliderToSpeed(bksliderinput: number): number {
-  const minBase = 50;
-  const maxBase = 150;
-
-  const scaledValue =
-    2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
-  const baseSpeed = 3;
-
-  const speed = baseSpeed / scaledValue;
-  return speed;
-}
-
-async function migrateLegacySettings() {
-  const storage = (await browser.storage.local.get(
-    null,
-  )) as unknown as SettingsState;
-
-  // Animated Background Migration
-  if ("animatedbk" in storage || "bksliderinput" in storage) {
-    const animatedSettings = {
-      enabled: storage.animatedbk ?? true,
-      speed: storage.bksliderinput
-        ? convertBksliderToSpeed(parseFloat(storage.bksliderinput))
-        : 1,
-    };
-    await browser.storage.local.set({
-      "plugin.animated-background.settings": animatedSettings,
-    });
-  }
-
-  // Assessments Average Migration
-  if ("assessmentsAverage" in storage || "lettergrade" in storage) {
-    const assessmentsSettings = {
-      enabled: storage.assessmentsAverage ?? true,
-      lettergrade: storage.lettergrade ?? false,
-    };
-    await browser.storage.local.set({
-      "plugin.assessments-average.settings": assessmentsSettings,
-    });
-  }
-
-  if ("selectedTheme" in storage) {
-    const themesSettings = { enabled: true };
-    await browser.storage.local.set({
-      "plugin.themes.settings": themesSettings,
-    });
-  }
-  if (storage.notificationCollector !== false) {
-    await browser.storage.local.set({
-      "plugin.notificationCollector.settings": { enabled: true },
-    });
-  } else {
-    await browser.storage.local.set({
-      "plugin.notificationCollector.settings": { enabled: false },
-    });
-  }
-
-  const keysToRemove = [
-    "animatedbk",
-    "bksliderinput",
-    "assessmentsAverage",
-    "lettergrade",
-  ];
-  await browser.storage.local.remove(keysToRemove);
-}
-
 browser.runtime.onInstalled.addListener(function (event) {
   browser.storage.local.remove(["justupdated"]);
   browser.storage.local.remove(["data"]);
 
   if (event.reason == "install" || event.reason == "update") {
     browser.storage.local.set({ justupdated: true });
-    migrateLegacySettings();
   }
 });

src/background/news.ts

@@ -1,5 +1,18 @@
 import Parser from "rss-parser";
 
+/**
+ * Fetches news articles specifically for Australia from the NewsAPI.
+ *
+ * This function handles a specific case for fetching Australian news. It includes a
+ * mechanism to retry the fetch operation by appending "%00" to the URL if a
+ * rate limit error (`response.code == "rateLimited"`) is encountered. This is
+ * likely a workaround for cache-busting or bypassing certain rate-limiting measures.
+ *
+ * @param {string} url The NewsAPI URL to fetch Australian news from.
+ * @param {any} sendResponse A callback function (likely from a browser extension message listener)
+ *                           to send the fetched news data back to the caller.
+ *                           It's called with an object like `{ news: responseData }`.
+ */
 const fetchAustraliaNews = async (url: string, sendResponse: any) => {
   fetch(url)
     .then((result) => result.json())
@@ -12,6 +25,12 @@ const fetchAustraliaNews = async (url: string, sendResponse: any) => {
     });
 };
 
+/**
+ * A record mapping lowercase country codes (e.g., "usa", "canada") to an array
+ * of RSS feed URLs for news sources in that country.
+ *
+ * @type {Record<string, string[]>}
+ */
 const rssFeedsByCountry: Record<string, string[]> = {
   usa: [
     "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
@@ -54,6 +73,25 @@ const rssFeedsByCountry: Record<string, string[]> = {
   netherlands: ["https://www.dutchnews.nl/feed/", "https://www.nrc.nl/rss/"],
 };
 
+/**
+ * Fetches news articles based on a specified source.
+ *
+ * The source can be:
+ * 1. The string "australia": Fetches news from Australian sources via NewsAPI,
+ *    handled by the `fetchAustraliaNews` function.
+ * 2. A lowercase country code (e.g., "usa", "canada"): Fetches news from a predefined
+ *    list of RSS feeds for that country, as specified in `rssFeedsByCountry`.
+ * 3. A direct RSS feed URL (starting with "http"): Fetches news directly from this URL.
+ *
+ * The fetched articles are then sent back to the caller using the `sendResponse` callback.
+ *
+ * @param {string} source The news source identifier. This can be "australia", a
+ *                        lowercase country code, or a direct RSS feed URL.
+ * @param {any} sendResponse A callback function (typically from a browser extension
+ *                           message listener, like `chrome.runtime.onMessage`)
+ *                           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, sendResponse: any) {
   if (source === "australia") {
     const date = new Date();

src/css/documentload.scss

@@ -17,10 +17,19 @@
 
 @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;
+}
+
 html {
   background: #161616 !important;
   background-color: #161616;
-  font-family: Rubik, Roboto !important;
+  font-family: Roboto, system-ui, -apple-system, sans-serif !important;
 }
 
 .tooltip svg {
@@ -94,3 +103,57 @@ body:has(.outside-container:not(.hide))
   background: var(--text-primary) !important;
   color: var(--theme-primary) !important;
 }
+.fixed-tooltip {
+  display: inline-block;
+  z-index: 5 !important;
+  width: 28px;
+  background: none;
+  box-shadow: none;
+  padding: 2px;
+  position: absolute;
+}
+.fixed-tooltip svg {
+  fill: var(--theme-primary);
+}
+.tooltiptext-fixed {
+  width: 120px;
+  transform: scale(0);
+  transition: transform 0.2s;
+  transform-origin: top;
+  background: var(--background-primary);
+  color: var(--text-primary);
+  text-align: center;
+  border-radius: 6px;
+  padding: 2px;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  margin-left: -62px;
+}
+.tooltiptext-fixed::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--text-primary) transparent;
+}
+.tooltiptext-fixed.show {
+  transform: scale(1);
+  transform-origin: top;
+  transition: transform 0.2s;
+}
+.tooltiptext-fixed p:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3) !important;
+  transition: 200ms;
+}
+.tooltiptext-fixed p {
+  border-radius: 8px !important;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px;
+}

src/css/iframe.scss

@@ -116,7 +116,6 @@ body {
 }
 
 .cke_panel_listItem > a {
-  
   &:hover {
     background: #3d3d3e !important;
   }

src/css/injected/transparency.scss

@@ -21,6 +21,9 @@ html.transparencyEffects {
   }
 
   /* Blurs */
+  .search,
+  .document,
+  .border,
   .draggable,
   .notice,
   [class*="BasicPanel__BasicPanel___"],
@@ -42,29 +45,23 @@ html.transparencyEffects {
     backdrop-filter: blur(80px);
   }
 
+  .filter-select,
+  .uiShortText.search,
   .report {
     backdrop-filter: blur(10px) !important;
   }
 
+  #menu,
+  .kanban-column,
   .whatsnewContainer,
   [class*="Message__Message___"] {
     backdrop-filter: blur(50px);
   }
 
-  #menu {
-    backdrop-filter: blur(20px);
-  }
-
   .title > a {
     backdrop-filter: blur(0px) !important;
   }
 
-  .search,
-  .document,
-  .border {
-    backdrop-filter: blur(80px);
-  }
-
   #main > .dashboard {
     section,
     .dashlet {

src/exampleprivacyresponse.json

@@ -0,0 +1,4 @@
+{
+    "last_updated": "2024-06-15T12:00:00Z",
+    "whatsnew_html": "<div class=\"whatsnewTextContainer\" style=\"overflow-y: auto; font-size: 1.3rem; line-height: 1.6;\"><p>It has come to our attention that several schools have expressed concerns about BetterSEQTA+. This is very disheartening, so we have decided to release a statement on the situation.</p><p>To view our privacy policy, please click the <strong>shield icon</strong> in the settings&nbsp;menu, or <a href=\"https://betterseqta.org/privacy\" target=\"_blank\" rel=\"noopener noreferrer\" id=\"privacy-link\" style=\"color: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap;\">click here</a>.</p><p style=\"font-weight: bold; margin-top: 15px;\">We never collect any information from you, and aim to provide the best features possible.</p></div>"
+}

src/interface/components/ColourPicker.css

@@ -2,6 +2,16 @@ div:has(> #rbgcp-wrapper) {
   background: transparent !important;
 }
 
+#rbgcp-inputs-wrap {
+  padding-top: 4px !important;
+  margin-bottom: -8px;
+
+  #rbgcp-hex-input,
+  #rbgcp-input {
+    height: 28px !important;
+  }
+}
+
 .dark {
   #rbgcp-wrapper {
     div[style="padding-top: 11px; position: relative;"] div {

src/interface/components/ColourPicker.tsx

@@ -108,7 +108,6 @@ export default function Picker({
     <ColorPicker
       disableDarkMode={true}
       presets={presets}
-      hideInputs={customOnChange ? false : true}
       value={customThemeColor ?? ""}
       onChange={(color: string) => {
         if (customOnChange) {

src/interface/components/DisclaimerModal.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { animate } from 'motion';
+
+  let { onConfirm, onCancel, title, message } = $props<{
+    onConfirm: () => void;
+    onCancel: () => void;
+    title: string;
+    message: string;
+  }>();
+
+  let modalElement: HTMLElement;
+
+  $effect(() => {
+    if (modalElement) {
+      animate(
+        modalElement,
+        { scale: [0.9, 1], opacity: [0, 1] },
+        {
+          type: 'spring',
+          stiffness: 300,
+          damping: 25
+        }
+      );
+    }
+  });
+</script>
+
+<div 
+  class="flex fixed inset-0 z-[10000] justify-center items-center bg-black/50" 
+  style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"
+  onclick={(e) => {
+    if (e.target === e.currentTarget) onCancel();
+  }} 
+  onkeydown={(e) => {
+    if (e.key === 'Escape') onCancel();
+  }} 
+  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 bg-white rounded-2xl shadow-2xl dark:bg-zinc-800" 
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
+    <h2 class="mb-3 text-xl font-bold text-gray-900 dark:text-white">
+      {title}
+    </h2>
+    
+    <div class="mb-6 text-lg text-gray-700 whitespace-pre-line dark:text-gray-300">
+      {message}
+    </div>
+
+    <div class="flex gap-3 justify-end">
+      <button
+        onclick={onCancel}
+        class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg transition-colors hover:bg-gray-200 dark:bg-zinc-700 dark:text-gray-200 dark:hover:bg-zinc-600"
+      >
+        Cancel
+      </button>
+      <button
+        onclick={onConfirm}
+        class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg shadow-inner transition-colors hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
+      >
+        Enable
+      </button>
+    </div>
+  </div>
+</div>
+

src/interface/components/Select.svelte

@@ -8,12 +8,12 @@
   let select: HTMLSelectElement;
 </script>
 
-<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
+<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="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
+    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}>
@@ -22,3 +22,19 @@
     {/each}
   </select>
 </div>
+
+<style>
+  /* Make native dropdown list readable on Windows */
+  select option {
+    background-color: #ffffff;
+    color: #111827; /* zinc-900 */
+  }
+  :global(.dark) select option {
+    background-color: #1f2937; /* zinc-800 */
+    color: #ffffff;
+  }
+
+  :global(.dark) div::after {
+    color: rgba(255, 255, 255, 0.6);
+  }
+</style>

src/interface/hooks/BackgroundDataLoader.ts

@@ -1,8 +1,20 @@
 import { type DBSchema, type IDBPDatabase, openDB } from "idb";
 
+/**
+ * Defines the schema for the IndexedDB database used for storing background image data.
+ *
+ * @interface BackgroundDB
+ * @extends {DBSchema}
+ * @property {object} backgrounds - The object store for background images.
+ * @property {string} backgrounds.key - The type of the key for the object store (in this case, it's `id` as defined in `keyPath`).
+ * @property {object} backgrounds.value - The structure of the objects stored.
+ * @property {string} backgrounds.value.id - The unique identifier for the background image record.
+ * @property {string} backgrounds.value.type - The MIME type of the image (e.g., "image/png", "image/jpeg").
+ * @property {Blob} backgrounds.value.blob - The binary large object (Blob) containing the image data.
+ */
 interface BackgroundDB extends DBSchema {
   backgrounds: {
-    key: string;
+    key: string; // Corresponds to the 'id' property due to keyPath: "id"
     value: {
       id: string;
       type: string;
@@ -13,6 +25,14 @@ interface BackgroundDB extends DBSchema {
 
 let db: IDBPDatabase<BackgroundDB> | null = null;
 
+/**
+ * Initializes and opens an IndexedDB connection or returns an existing one.
+ * If the database doesn't exist or needs an upgrade, the `upgrade` callback
+ * creates the 'backgrounds' object store with 'id' as the keyPath.
+ *
+ * @async
+ * @returns {Promise<IDBPDatabase<BackgroundDB>>} A promise that resolves with the database instance.
+ */
 export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
   if (db) return db;
 
@@ -25,6 +45,12 @@ export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
   return db;
 }
 
+/**
+ * Retrieves all background image records from the 'backgrounds' object store in IndexedDB.
+ *
+ * @async
+ * @returns {Promise<Array<{id: string, type: string, blob: Blob}>>} A promise that resolves with an array of all background image records.
+ */
 export async function readAllData(): Promise<
   Array<{ id: string; type: string; blob: Blob }>
 > {
@@ -32,6 +58,16 @@ export async function readAllData(): Promise<
   return db.getAll("backgrounds");
 }
 
+/**
+ * Writes or updates a background image record in the 'backgrounds' object store.
+ * If a record with the given `id` already exists, it will be updated. Otherwise, a new record is created.
+ *
+ * @async
+ * @param {string} id - The unique identifier for the background image record.
+ * @param {string} type - The MIME type of the image (e.g., "image/png").
+ * @param {Blob} blob - The Blob object containing the image data.
+ * @returns {Promise<void>} A promise that resolves when the data has been successfully written.
+ */
 export async function writeData(
   id: string,
   type: string,
@@ -41,16 +77,37 @@ export async function writeData(
   await db.put("backgrounds", { id, type, blob });
 }
 
+/**
+ * Deletes a background image record from the 'backgrounds' object store by its ID.
+ *
+ * @async
+ * @param {string} id - The unique identifier of the background image record to delete.
+ * @returns {Promise<void>} A promise that resolves when the data has been successfully deleted.
+ */
 export async function deleteData(id: string): Promise<void> {
   const db = await openDatabase();
   await db.delete("backgrounds", id);
 }
 
+/**
+ * Clears all records from the 'backgrounds' object store in IndexedDB.
+ *
+ * @async
+ * @returns {Promise<void>} A promise that resolves when all data has been successfully cleared.
+ */
 export async function clearAllData(): Promise<void> {
   const db = await openDatabase();
   await db.clear("backgrounds");
 }
 
+/**
+ * Retrieves a single background image record from the 'backgrounds' object store by its ID.
+ *
+ * @async
+ * @param {string} id - The unique identifier of the background image record to retrieve.
+ * @returns {Promise<{id: string, type: string, blob: Blob} | undefined>} A promise that resolves with the
+ *                                                                        background image record if found, or undefined otherwise.
+ */
 export async function getDataById(
   id: string,
 ): Promise<{ id: string; type: string; blob: Blob } | undefined> {
@@ -58,6 +115,10 @@ export async function getDataById(
   return db.get("backgrounds", id);
 }
 
+/**
+ * Closes the active IndexedDB connection and nullifies the global `db` variable.
+ * This is important to release resources and allow for proper database management.
+ */
 export function closeDatabase(): void {
   if (db) {
     db.close();
@@ -65,12 +126,24 @@ export function closeDatabase(): void {
   }
 }
 
-// Helper function to check if IndexedDB is supported
+/**
+ * Checks if IndexedDB is supported by the current browser environment.
+ *
+ * @returns {boolean} True if IndexedDB is supported, false otherwise.
+ */
 export function isIndexedDBSupported(): boolean {
   return "indexedDB" in window;
 }
 
-// Helper function to check if there's enough storage space
+/**
+ * Estimates available storage space and checks if it's sufficient for the specified `requiredSpace`.
+ * Uses the `navigator.storage.estimate()` API if available.
+ * If the API is not available or cannot determine space, it defaults to assuming enough space is available.
+ *
+ * @async
+ * @param {number} requiredSpace - The amount of storage space required, in bytes.
+ * @returns {Promise<boolean>} A promise that resolves with true if enough space is estimated to be available, false otherwise.
+ */
 export async function hasEnoughStorageSpace(
   requiredSpace: number,
 ): Promise<boolean> {

src/interface/hooks/BackgroundUpdates.ts

@@ -1,11 +1,21 @@
 type BackgroundUpdateCallback = () => void;
 
+/**
+ * A singleton class used to notify listeners about generic background updates or events.
+ * These updates typically signify that UI components or other parts of the application
+ * might need to refresh or re-evaluate background-related data (e.g., after a new background
+ * image is added, removed, or changed).
+ */
 class BackgroundUpdates {
   private static instance: BackgroundUpdates;
   private listeners: Set<BackgroundUpdateCallback> = new Set();
 
   private constructor() {}
 
+  /**
+   * Gets the singleton instance of the BackgroundUpdates class.
+   * @returns {BackgroundUpdates} The singleton instance.
+   */
   public static getInstance(): BackgroundUpdates {
     if (!BackgroundUpdates.instance) {
       BackgroundUpdates.instance = new BackgroundUpdates();
@@ -13,14 +23,31 @@ class BackgroundUpdates {
     return BackgroundUpdates.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when a background update is triggered.
+   *
+   * @param {BackgroundUpdateCallback} callback The function to call when a background update occurs.
+   *                                            This callback takes no arguments and returns void.
+   */
   public addListener(callback: BackgroundUpdateCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when a background update is triggered.
+   *
+   * @param {BackgroundUpdateCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: BackgroundUpdateCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks, signifying that a background update has occurred.
+   * This method should be called whenever a change to background data happens that requires
+   * other parts of the application to be notified.
+   */
   public triggerUpdate(): void {
     this.listeners.forEach((callback) => callback());
   }

src/interface/hooks/SettingsPopup.ts

@@ -21,14 +21,30 @@ class SettingsPopup {
     return SettingsPopup.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when the settings popup is closed.
+   *
+   * @param {SettingsPopupCallback} callback The function to call when the settings popup closes.
+   *                                         This callback takes no arguments and returns void.
+   */
   public addListener(callback: SettingsPopupCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when the settings popup closes.
+   *
+   * @param {SettingsPopupCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: SettingsPopupCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks.
+   * This method should be called when the settings popup is closed to notify all subscribed components or services.
+   */
   public triggerClose(): void {
     this.listeners.forEach((callback) => callback());
   }

src/interface/hooks/ThemeUpdates.ts

@@ -1,11 +1,21 @@
 type ThemeUpdateCallback = () => void;
 
+/**
+ * A singleton class used to notify listeners about theme-related updates.
+ * These updates can include events like theme changes, custom theme modifications,
+ * or any other event that might require UI components to refresh their appearance
+ * or re-apply theme styles.
+ */
 class ThemeUpdates {
   private static instance: ThemeUpdates;
   private listeners: Set<ThemeUpdateCallback> = new Set();
 
   private constructor() {}
 
+  /**
+   * Gets the singleton instance of the ThemeUpdates class.
+   * @returns {ThemeUpdates} The singleton instance.
+   */
   public static getInstance(): ThemeUpdates {
     if (!ThemeUpdates.instance) {
       ThemeUpdates.instance = new ThemeUpdates();
@@ -13,14 +23,31 @@ class ThemeUpdates {
     return ThemeUpdates.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when a theme update is triggered.
+   *
+   * @param {ThemeUpdateCallback} callback The function to call when a theme update occurs.
+   *                                       This callback takes no arguments and returns void.
+   */
   public addListener(callback: ThemeUpdateCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when a theme update is triggered.
+   *
+   * @param {ThemeUpdateCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: ThemeUpdateCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks, signifying that a theme-related update has occurred.
+   * This method should be called whenever a change related to themes happens that requires
+   * other parts of the application to be notified.
+   */
   public triggerUpdate(): void {
     this.listeners.forEach((callback) => callback());
   }

src/interface/index.ts

@@ -3,6 +3,7 @@ import Settings from "./pages/settings.svelte";
 import IconFamily from "@/resources/fonts/IconFamily.woff";
 import browser from "webextension-polyfill";
 import renderSvelte from "./main";
+import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
 
 function InjectCustomIcons() {
   console.info("[BetterSEQTA+] Injecting Icons");
@@ -26,4 +27,8 @@ if (!mountPoint) {
 }
 
 InjectCustomIcons();
+
+(async () => {
+  await initializeSettingsState();
   renderSvelte(Settings, mountPoint, { standalone: true });
+})();

src/interface/main.ts

@@ -15,9 +15,11 @@ export default function renderSvelte(
     },
   });
 
+  if (mountPoint instanceof ShadowRoot) {
     const styleElement = document.createElement("style");
     styleElement.textContent = style;
     mountPoint.appendChild(styleElement);
+  }
 
   return app;
 }

src/interface/pages/settings.svelte

@@ -1,43 +1,47 @@
 <script lang="ts">
-  import TabbedContainer from '../components/TabbedContainer.svelte';
-  import Settings from './settings/general.svelte';
-  import Shortcuts from './settings/shortcuts.svelte';
-  import Theme from './settings/theme.svelte';
-  import browser from 'webextension-polyfill';
+  import TabbedContainer from "../components/TabbedContainer.svelte";
+  import Settings from "./settings/general.svelte";
+  import Shortcuts from "./settings/shortcuts.svelte";
+  import Theme from "./settings/theme.svelte";
+  import browser from "webextension-polyfill";
 
-  import { standalone as StandaloneStore } from '../utils/standalone.svelte';
-  import { onMount } from 'svelte'
-  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { standalone as StandaloneStore } from "../utils/standalone.svelte";
+  import { onMount } from "svelte";
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
-  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
-  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
-  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
+  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
+  import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
+  //import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
 
-  import ColourPicker from '../components/ColourPicker.svelte'
-  import { settingsPopup } from '../hooks/SettingsPopup'
+  import ColourPicker from "../components/ColourPicker.svelte";
+  import DisclaimerModal from "../components/DisclaimerModal.svelte";
+  import { settingsPopup } from "../hooks/SettingsPopup";
 
-  let devModeSequence = '';
+  let devModeSequence = "";
+  let showDisclaimerModal = $state(false);
+  let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
 
   const handleDevModeToggle = () => {
     const handleKeyDown = (event: KeyboardEvent) => {
       devModeSequence += event.key.toLowerCase();
-      if (devModeSequence.includes('dev')) {
-        document.removeEventListener('keydown', handleKeyDown);
+      if (devModeSequence.includes("dev")) {
+        document.removeEventListener("keydown", handleKeyDown);
         settingsState.devMode = true;
-        alert('Dev mode is now enabled');
+        alert("Dev mode is now enabled");
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
     setTimeout(() => {
-      document.removeEventListener('keydown', handleKeyDown);
-      devModeSequence = '';
+      document.removeEventListener("keydown", handleKeyDown);
+      devModeSequence = "";
     }, 10000);
   };
 
   const openColourPicker = () => {
     showColourPicker = true;
-  }
+  };
 
   const openChangelog = () => {
     OpenWhatsNewPopup();
@@ -49,44 +53,269 @@
     closeExtensionPopup();
   };
 
+  /* const openMinecraftServer = () => {
+    OpenMinecraftServerPopup();
+    closeExtensionPopup();
+  }; */
+
+  const openPrivacyStatement = () => {
+    window.open("https://betterseqta.org/privacy", "_blank");
+    closeExtensionPopup();
+  };
+
   let { standalone } = $props<{ standalone?: boolean }>();
   let showColourPicker = $state<boolean>(false);
 
-  onMount(() => {
+  const showDisclaimer = (onConfirm: () => void, onCancel: () => void) => {
+    disclaimerCallbacks = { onConfirm, onCancel };
+    showDisclaimerModal = true;
+  };
+
+  onMount(async () => {
     settingsPopup.addListener(() => {
       showColourPicker = false;
     });
 
     if (!standalone) return;
-    initializeSettingsState();
     StandaloneStore.setStandalone(true);
   });
 </script>
 
-<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
-    <div class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40">
+<div
+  class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
+    ? 'dark'
+    : ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
+>
+  <div
+    class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"
+  >
+    <div
+      class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
+    >
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
+      <img
+        src={browser.runtime.getURL(
+          "resources/icons/betterseqta-dark-full.png",
+        )}
+        class="w-4/5 dark:hidden"
+        alt="Light logo"
+        onclick={handleDevModeToggle}
+      />
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
+      <img
+        src={browser.runtime.getURL(
+          "resources/icons/betterseqta-light-full.png",
+        )}
+        class="hidden w-4/5 dark:block"
+        alt="Dark logo"
+        onclick={handleDevModeToggle}
+      />
 
       {#if !standalone}
-        <button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
-        <button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+        <div class="flex absolute top-1 right-1 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"
+          >
+            {"\ueb73"}
+          </button>
+
+          <button
+            onclick={openChangelog}
+            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
+          >
+            {"\ue929"}
+          </button>
+
+          <button
+            onclick={openPrivacyStatement}
+            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
+            aria-label="Privacy Statement"
+          >
+            {"\uecba"}
+          </button>
+
+          <!-- <button
+            onclick={openMinecraftServer}
+            class="flex justify-center items-center p-1 w-8 h-8 rounded-xl bg-zinc-100 dark:bg-zinc-700"
+            aria-label="Open Minecraft Server"
+          >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 70"
+            fill="none"
+            class="w-full h-full"
+          >
+            <path
+              d="M0 0 C3.96 0 7.92 0 12 0 C12 3.96 12 7.92 12 12 C10.68 12 9.36 12 8 12 C8 10.68 8 9.36 8 8 C6.68 8 5.36 8 4 8 C4 6.68 4 5.36 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(42,10)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 6.6 4 13.2 4 20 C2.68 20 1.36 20 0 20 C0 13.4 0 6.8 0 0 Z "
+              fill="currentColor"
+              transform="translate(54,22)"
+            />
+            <path
+              d="M0 0 C6.6 0 13.2 0 20 0 C20 1.32 20 2.64 20 4 C13.4 4 6.8 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(22,6)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 5.28 4 10.56 4 16 C2.68 16 1.36 16 0 16 C0 10.72 0 5.44 0 0 Z "
+              fill="currentColor"
+              transform="translate(46,26)"
+            />
+            <path
+              d="M0 0 C5.28 0 10.56 0 16 0 C16 1.32 16 2.64 16 4 C10.72 4 5.44 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(22,14)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C5.32 4 6.64 4 8 4 C8 5.32 8 6.64 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z "
+              fill="currentColor"
+              transform="translate(6,50)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(14,50)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(18,46)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(10,46)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(50,42)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(22,42)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(14,42)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(26,38)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(18,38)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(30,34)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(22,34)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(34,30)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(26,30)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(38,26)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(30,26)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(42,22)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(34,22)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(38,18)"
+            />
+            <path
+              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
+              fill="currentColor"
+              transform="translate(18,10)"
+            />
+          </svg>
+        </button> -->
+        </div>
       {/if}
     </div>
 
-    <TabbedContainer tabs={[
-      { title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
-      { title: 'Shortcuts', Content: Shortcuts },
-      { title: 'Themes', Content: Theme },
-    ]} />
+    <TabbedContainer
+      tabs={[
+        {
+          title: "Settings",
+          Content: Settings,
+          props: { showColourPicker: openColourPicker, showDisclaimer },
+        },
+        { title: "Shortcuts", Content: Shortcuts },
+        { title: "Themes", Content: Theme },
+      ]}
+    />
   </div>
 
   {#if showColourPicker}
-    <ColourPicker hidePicker={() => { showColourPicker = false }} />
+    <ColourPicker
+      hidePicker={() => {
+        showColourPicker = false;
+      }}
+    />
   {/if}
 </div>
+
+{#if showDisclaimerModal && disclaimerCallbacks}
+  <DisclaimerModal
+    title="Assessment Averages Disclaimer"
+    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;
+      disclaimerCallbacks = null;
+    }}
+    onCancel={() => {
+      disclaimerCallbacks?.onCancel();
+      showDisclaimerModal = false;
+      disclaimerCallbacks = null;
+    }}
+  />
+{/if}

src/interface/pages/settings/general.svelte

@@ -10,10 +10,11 @@
   import type { SettingsList } from "@/interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
-  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
+  import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
 
   import { getAllPluginSettings } from "@/plugins"
-  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting } from "@/plugins/core/types"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
 
   // Union type representing all possible settings
   type SettingType =
@@ -32,6 +33,11 @@
     (Omit<HotkeySetting, 'type'> & {
       type: 'hotkey',
       id: string
+    }) |
+    (Omit<ComponentSetting, 'type'> & {
+      type: 'component',
+      id: string,
+      component: any
     });
 
   interface Plugin {
@@ -55,7 +61,11 @@
       pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
       
       for (const [key, setting] of Object.entries(plugin.settings)) {
-        if (pluginSettingsValues[plugin.pluginId][key] === undefined && setting.type !== 'button') {
+        if (
+          pluginSettingsValues[plugin.pluginId][key] === undefined &&
+          setting.type !== 'button' &&
+          setting.type !== 'component'
+        ) {
           pluginSettingsValues[plugin.pluginId][key] = setting.default;
         }
       }
@@ -82,7 +92,10 @@
     loadPluginSettings();
   })
 
-  const { showColourPicker } = $props<{ showColourPicker: () => void }>();
+  const { showColourPicker, showDisclaimer } = $props<{ 
+    showColourPicker: () => void;
+    showDisclaimer: (onConfirm: () => void, onCancel: () => void) => void;
+  }>();
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -178,15 +191,16 @@
           options: [
            { value: "australia", label: "Australia" },
            { value: "usa", label: "USA" },
+           { value: "uk", label: "UK" },
            { value: "taiwan", label: "Taiwan" },
            { value: "hong_kong", label: "Hong Kong" },
            { value: "panama", label: "Panama" },
            { value: "canada", label: "Canada" },
            { value: "singapore", label: "Singapore" },
-          { value: "uk", label: "UK" },
            { value: "japan", label: "Japan" },
            { value: "netherlands", label: "Netherlands" }
         ]
+
       }
     }
   ] as option}
@@ -213,7 +227,20 @@
             <div>
               <Switch
                 state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
-                onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
+                onChange={async (value) => {
+                  if (plugin.pluginId === 'assessments-average' && value === true) {
+                    showDisclaimer(
+                      async () => {
+                        await updatePluginSetting(plugin.pluginId, 'enabled', true);
+                      },
+                      () => {
+                        // Do nothing on cancel
+                      }
+                    );
+                    return;
+                  }
+                  await updatePluginSetting(plugin.pluginId, 'enabled', value);
+                }}
               />
             </div>
           </div>
@@ -268,6 +295,11 @@
                       value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                       onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                     />
+                  {:else if setting.type === 'component'}
+                    {#if setting.component}
+                      {@const Component = setting.component}
+                      <Component />
+                    {/if}
                   {/if}
                 </div>
               </div>
@@ -307,10 +339,41 @@
           <h2 class="text-sm font-bold">Sensitive Hider</h2>
           <p class="text-xs">Replace sensitive content with mock data</p>
         </div>
+        <div>
+          <Switch
+            state={$settingsState.hideSensitiveContent ?? false}
+            onChange={(isOn: boolean) => settingsState.hideSensitiveContent = isOn}
+          />
+        </div>
+      </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Mock Notices</h2>
+          <p class="text-xs">Use fake notice data on homepage instead of real data</p>
+        </div>
+        <div>
+          <Switch 
+            state={$settingsState.mockNotices ?? false} 
+            onChange={(isOn: boolean) => settingsState.mockNotices = isOn} 
+          />
+        </div>
+      </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Show Privacy Notification</h2>
+          <p class="text-xs">Show the privacy notification popup on next page load</p>
+        </div>
         <div>
           <Button
-            onClick={() => hideSensitiveContent()}
-            text="Hide"
+            onClick={async () => {
+              settingsState.privacyStatementShown = false;
+              settingsState.privacyStatementLastUpdated = undefined;
+              closeExtensionPopup();
+              // Small delay to ensure popup is closed before showing notification
+              await new Promise(resolve => setTimeout(resolve, 100));
+              await showPrivacyNotification();
+            }}
+            text="Show Now"
           />
         </div>
       </div>

src/interface/pages/settings/shortcuts.svelte

@@ -6,6 +6,7 @@
   import Shortcuts from "@/seqta/content/links.json"
 
   let isLoaded = $state(false);
+  let fileInput = $state<HTMLInputElement | null>(null);
 
   onMount(async () => {
     // Wait for settingsState to be initialized
@@ -23,18 +24,43 @@
   });
 
   const switchChange = (shortcut: any) => {
-    const value = $settingsState.shortcuts.find(s => s.name === shortcut);
-    if (value) {
-      value.enabled = !value.enabled;
-      settingsState.shortcuts = settingsState.shortcuts;
+    const idx = $settingsState.shortcuts.findIndex(s => s.name === shortcut);
+    if (idx !== -1) {
+      // Create a new array with the toggled value to ensure reactivity
+      const updated = settingsState.shortcuts.map(s =>
+        s.name === shortcut ? { ...s, enabled: !s.enabled } : s
+      );
+      settingsState.shortcuts = updated;
     } else {
-      settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
+      settingsState.shortcuts = [
+        ...settingsState.shortcuts,
+        { name: shortcut, enabled: true }
+      ];
     }
   }
 
   let isFormVisible = $state(false);
   let newTitle = $state("");
   let newURL = $state("");
+  let newIcon = $state<string | null>(null);
+
+  function handleIconChange(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file && file.type === "image/svg+xml") {
+      const reader = new FileReader();
+      reader.onload = () => {
+        newIcon = reader.result as string;
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  const clearIcon = () => {
+    newIcon = null;
+    if (fileInput) {
+      fileInput.value = ""; // Clear the file input so the same file can be re-selected
+    }
+  };
 
   const toggleForm = () => {
     isFormVisible = !isFormVisible;
@@ -54,11 +80,13 @@
 
   const addNewCustomShortcut = () => {
     if (isValidTitle(newTitle) && isValidURL(newURL)) {
-      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
+      const icon = newIcon || newTitle[0];
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon };
       settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
 
       newTitle = "";
       newURL = "";
+      newIcon = null;
       isFormVisible = false;
     } else {
       alert("Please enter a valid title and URL.");
@@ -101,7 +129,7 @@
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.05, duration: 0.2 }}
-              class="w-full"
+              class="flex gap-2 w-full"
             >
                 <input
                   class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
@@ -109,6 +137,48 @@
                   placeholder="URL eg. https://google.com"
                   bind:value={newURL}
                 />
+                <input
+                  bind:this={fileInput}
+                  class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                  type="file"
+                  accept=".svg"
+                  onchange={handleIconChange}
+                  hidden
+                />
+                <button
+                  type="button"
+                  class="flex justify-between items-center p-2 my-2 text-left rounded-lg border border-dashed transition text-nowrap text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-700/50 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/30 focus:bg-zinc-200/50 dark:focus:bg-zinc-600/50 border-zinc-300 dark:border-zinc-600"
+                  onclick={() => fileInput?.click()}
+                >
+                  {#if newIcon}
+                    <div class="flex overflow-hidden items-center">
+                      <div class="flex-shrink-0 mr-2 w-6 h-6">
+                        <img src={`data:image/svg+xml;base64,${btoa(newIcon)}`} alt="Selected Icon" class="object-contain w-full h-full" />
+                      </div>
+                      <span class="truncate">Selected Icon</span>
+                    </div>
+                    <span
+                      class="p-1 ml-2 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600"
+                      aria-label="Clear icon"
+                      role="button"
+                      tabindex="0"
+                      onclick={(event) => { event.stopPropagation(); clearIcon(); }}
+                      onkeydown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          clearIcon();
+                        }
+                      }}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </span>
+                  {:else}
+                    <span class="font-IconFamily">{ '\ued47' }</span>
+                    <span class="ml-2">SVG icon <span class="text-xs italic text-zinc-400 dark:text-zinc-500">(Optional)</span></span>
+                  {/if}
+                </button>
             </MotionDiv>
           </div>
         {/if}
@@ -132,16 +202,6 @@
       </MotionDiv>
     </div>
 
-    {#each Object.entries(Shortcuts) as shortcut}
-      <div class="flex justify-between items-center px-4 py-3">
-        <div class="pr-4">
-          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
-          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
-        </div>
-        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
-      </div>
-    {/each}
-
     <!-- Custom Shortcuts Section -->
     {#each $settingsState.customshortcuts as shortcut, index}
       <div class="flex justify-between items-center px-4 py-3">
@@ -153,6 +213,16 @@
         </button>
       </div>
     {/each}
+
+    {#each Object.entries(Shortcuts) as shortcut}
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
+          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
+        </div>
+        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
+      </div>
+    {/each}
   {:else}
     <div class="p-4 text-center">
       Loading shortcuts...

src/interface/pages/settings/theme.svelte

@@ -21,13 +21,16 @@
     <div class="relative w-full">
       <button
         onclick={() => editMode = !editMode}
-        class="absolute top-0 right-0 z-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{editMode ? '\ue9e4' : '\uec38'}</button>
+        class="absolute top-0 right-0 z-10 px-2 h-8 text-lg rounded-xl bg-zinc-100 dark:bg-zinc-700">
+        <span class="mr-2">{editMode ? 'Done' : 'Edit'}</span>
+        <span class="font-IconFamily">{editMode ? '\ue9e4' : '\uec38'}</span>
+      </button>
 
       <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
       <ThemeSelector isEditMode={editMode} />
     </div>
   {:else}
-    <div class="flex items-center justify-center w-full h-full">
+    <div class="flex justify-center items-center w-full h-full">
       <div class="text-lg">
         Open SEQTA and use the embedded settings to access theme settings. 🫠
       </div>

src/interface/utils/themeImageHandlers.ts

@@ -1,9 +1,27 @@
 import type { LoadedCustomTheme } from "@/types/CustomThemes";
 
+/**
+ * Generates a random 9-character alphanumeric string to be used as a unique ID for images.
+ * This helps in identifying and managing custom images within a theme.
+ *
+ * @returns {string} A randomly generated unique ID string.
+ */
 export function generateImageId(): string {
   return Math.random().toString(36).substr(2, 9);
 }
 
+/**
+ * Handles the upload of a new custom image from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * generates a unique ID and a default variable name for it, and then adds this new image
+ * to the `CustomImages` array within the provided `theme` object.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object to which the new image will be added.
+ * @returns {Promise<LoadedCustomTheme> | LoadedCustomTheme} A Promise that resolves with the updated theme object
+ *                                                          containing the new image if a file was processed.
+ *                                                          Returns the original theme object synchronously if no file was selected.
+ */
 export function handleImageUpload(
   event: Event,
   theme: LoadedCustomTheme,
@@ -34,6 +52,16 @@ export function handleImageUpload(
   return theme;
 }
 
+/**
+ * Removes a custom image from the theme based on its ID.
+ * It filters out the image with the specified `imageId` from the `CustomImages` array
+ * in the `theme` object.
+ *
+ * @param {string} imageId The unique ID of the custom image to be removed.
+ * @param {LoadedCustomTheme} theme The current theme object from which the image will be removed.
+ * @returns {LoadedCustomTheme} A new theme object with the specified image removed from its `CustomImages` array.
+ *                              This function is synchronous.
+ */
 export function handleRemoveImage(
   imageId: string,
   theme: LoadedCustomTheme,
@@ -44,6 +72,17 @@ export function handleRemoveImage(
   } as LoadedCustomTheme;
 }
 
+/**
+ * Updates the CSS variable name associated with a specific custom image in the theme.
+ * It finds the image by `imageId` in the `CustomImages` array of the `theme` object
+ * and updates its `variableName` property.
+ *
+ * @param {string} imageId The unique ID of the custom image whose variable name is to be updated.
+ * @param {string} variableName The new CSS variable name to assign to the image.
+ * @param {LoadedCustomTheme} theme The current theme object containing the image to be updated.
+ * @returns {LoadedCustomTheme} A new theme object with the updated image variable name.
+ *                              This function is synchronous.
+ */
 export function handleImageVariableChange(
   imageId: string,
   variableName: string,
@@ -57,6 +96,17 @@ export function handleImageVariableChange(
   } as LoadedCustomTheme;
 }
 
+/**
+ * Handles the upload of a cover image for the theme from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * and then updates the `coverImage` property of the provided `theme` object with this new blob.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object whose cover image will be updated.
+ * @returns {Promise<LoadedCustomTheme>} A Promise that resolves with the updated theme object
+ *                                       containing the new cover image if a file was processed.
+ *                                       Returns a Promise resolving with the original theme object if no file was selected.
+ */
 export function handleCoverImageUpload(
   event: Event,
   theme: LoadedCustomTheme,

src/manifests/firefox.ts

@@ -14,7 +14,7 @@ const updatedFirefoxManifest = {
   },
   browser_specific_settings: {
     gecko: {
-      id: pkg.author.email,
+      id: "betterseqta@betterseqta.com",
     },
   },
 };

src/manifests/manifest.json

@@ -32,7 +32,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["resources/icons/*"],
+      "resources": ["resources/icons/*", "resources/update-image.webp"],
       "matches": ["*://*/*"]
     }
   ]

src/pageState.js

@@ -10,6 +10,20 @@ class ReactFiber {
       console.log("Selected Nodes:", this.nodes);
       console.log("🔍 Found Fibers:", this.fibers);
       console.log("🛠 Found Components:", this.components);
+      
+      // Debug fiber info
+      this.fibers.forEach((fiber, index) => {
+        if (fiber) {
+          console.log(`Fiber ${index}:`, {
+            tag: fiber.tag,
+            type: fiber.type?.name || fiber.type,
+            elementType: fiber.elementType,
+            stateNode: fiber.stateNode,
+            hasState: !!fiber.stateNode?.state,
+            hasMemoizedState: !!fiber.memoizedState
+          });
+        }
+      });
     }
   }
 
@@ -19,10 +33,27 @@ class ReactFiber {
 
   getFiberNode(node) {
     if (!node) return null;
+    
+    // Try multiple property name patterns for different React versions
+    const possibleKeys = [
+      '__reactFiber$',           // React 16+
+      '__reactInternalFiber$',   // React 15
+      '__reactInternalInstance$', // Older versions
+      '__reactFiber',
+      '__reactInternalInstance'
+    ];
+    
+    // Check for exact matches first
+    for (const key of possibleKeys) {
+      if (node[key]) return node[key];
+    }
+    
+    // Fall back to pattern matching
     const fiberKey = Object.getOwnPropertyNames(node).find(
       (name) =>
         name.startsWith("__reactFiber") ||
-        name.startsWith("__reactInternalInstance"),
+        name.startsWith("__reactInternalInstance") ||
+        name.startsWith("__reactInternalFiber")
     );
     return fiberKey ? node[fiberKey] : null;
   }
@@ -30,20 +61,71 @@ class ReactFiber {
   getOwnerComponent(fiberNode) {
     let current = fiberNode;
     while (current) {
+      // Use React's internal tag system to identify component types
+      // Based on React's WorkTags: ClassComponent = 1, FunctionComponent = 0
+      if (current.tag === 1) { // ClassComponent
+        return current.stateNode; // For class components, stateNode is the component instance
+      }
+      
+      // For function components, look for hooks in memoizedState
+      if (current.tag === 0 || current.tag === 15) { // FunctionComponent or MemoComponent
+        // Function components don't have setState, but we can still track them
+        if (current.memoizedState && current.type) {
+          return {
+            type: 'function',
+            hooks: current.memoizedState,
+            fiber: current,
+            forceUpdate: () => {
+              // Trigger re-render by updating fiber
+              if (current.alternate) {
+                current.alternate.expirationTime = 1;
+              }
+              current.expirationTime = 1;
+            }
+          };
+        }
+      }
+      
+      // Legacy fallback: check if stateNode has React component methods
       if (
         current.stateNode &&
+        current.stateNode !== null &&
+        typeof current.stateNode === 'object' &&
         (current.stateNode.setState || current.stateNode.forceUpdate)
       ) {
         return current.stateNode;
       }
+      
       current = current.return;
     }
     return null;
   }
 
   getState(key) {
-    if (!this.components.length) return null;
-    const state = this.components[0]?.state || null;
+    if (!this.components.length && !this.fibers.length) return null;
+    
+    const component = this.components[0];
+    const fiber = this.fibers[0];
+    let state = null;
+    
+    // Handle class components
+    if (component?.state) {
+      state = component.state;
+    }
+    // Handle function components with hooks - look directly at fiber
+    else if (fiber?.memoizedState) {
+      if (this.debug) {
+        console.log("🔍 Raw fiber.memoizedState:", fiber.memoizedState);
+      }
+      // Extract useState values from the hook chain
+      const states = this.extractStateFromHooks(fiber.memoizedState);
+      state = states.length === 1 ? states[0] : states;
+    }
+    // Fallback: try component hooks if available
+    else if (component?.type === 'function' && component?.hooks) {
+      const states = this.extractStateFromHooks(component.hooks);
+      state = states.length === 1 ? states[0] : states;
+    }
 
     if (key === undefined) {
       return state;
@@ -61,8 +143,137 @@ class ReactFiber {
     return null;
   }
 
+  extractStateFromHooks(hookChain) {
+    const states = [];
+    let mainStateFound = false;
+    let currentHook = hookChain;
+    let hookIndex = 0;
+    
+    if (this.debug) {
+      console.log("🔍 Hook chain analysis:");
+    }
+    
+    while (currentHook) {
+      if (this.debug) {
+        console.log(`Hook ${hookIndex}:`, {
+          type: currentHook.tag || 'unknown',
+          memoizedState: currentHook.memoizedState,
+          queue: currentHook.queue,
+          next: !!currentHook.next
+        });
+      }
+      
+      // Try different approaches to extract state
+      if (currentHook.memoizedState !== undefined && currentHook.memoizedState !== null) {
+        const state = currentHook.memoizedState;
+        
+        // Priority 1: Check for useRef hooks with complex state in .current
+        if (!currentHook.queue && 
+            typeof state === 'object' && 
+            state !== null && 
+            state.current !== undefined &&
+            typeof state.current === 'object' &&
+            state.current !== null) {
+          
+          // Check if this looks like a substantial state object (has multiple properties)
+          const currentKeys = Object.keys(state.current);
+          if (currentKeys.length > 2) {
+            states.push(state.current);
+            mainStateFound = true;
+            if (this.debug) console.log(`  🎯 Found main state in useRef:`, state.current);
+          }
+        }
+        // Priority 2: useState hooks with queue
+        else if (currentHook.queue && typeof state !== 'function') {
+          states.push(state);
+          if (this.debug) console.log(`  ✅ Found useState state:`, state);
+        }
+        // Priority 3: Other potential state objects (only if we haven't found main state)
+        else if (!mainStateFound && !currentHook.queue && typeof state === 'object' && state !== null) {
+          // Skip useEffect hooks (they have tag 36)
+          if (!(state.tag === 36 && state.create)) {
+            states.push(state);
+            if (this.debug) console.log(`  📦 Found potential state object:`, state);
+          }
+        }
+        // Priority 4: Simple primitive state
+        else if (typeof state !== 'function' && typeof state !== 'object') {
+          states.push(state);
+          if (this.debug) console.log(`  🔹 Found primitive state:`, state);
+        }
+      }
+      
+      currentHook = currentHook.next;
+      hookIndex++;
+    }
+    
+    if (this.debug) {
+      console.log(`🎯 Extracted ${states.length} state values:`, states);
+    }
+    
+    // If we found main state objects, prioritize and deduplicate them
+    if (mainStateFound && states.length > 1) {
+      const mainStates = states.filter(state => 
+        typeof state === 'object' && 
+        state !== null && 
+        Object.keys(state).length > 2
+      );
+      
+      if (mainStates.length > 1) {
+        // If we have multiple main state objects, find the most comprehensive one
+        // or merge them if they seem complementary
+        const largestState = mainStates.reduce((largest, current) => {
+          const largestKeys = Object.keys(largest).length;
+          const currentKeys = Object.keys(current).length;
+          
+          // Prefer the one with more properties
+          if (currentKeys > largestKeys) return current;
+          
+          // If same number of properties, prefer the one with more complex data
+          if (currentKeys === largestKeys) {
+            const largestComplexity = this.calculateStateComplexity(largest);
+            const currentComplexity = this.calculateStateComplexity(current);
+            return currentComplexity > largestComplexity ? current : largest;
+          }
+          
+          return largest;
+        });
+        
+        if (this.debug) {
+          console.log(`🎯 Selected most comprehensive state from ${mainStates.length} candidates:`, largestState);
+        }
+        
+        return [largestState];
+      }
+      
+      return mainStates;
+    }
+    
+    return states;
+  }
+
+  calculateStateComplexity(state) {
+    if (!state || typeof state !== 'object') return 0;
+    
+    let complexity = 0;
+    for (const [key, value] of Object.entries(state)) {
+      complexity += 1; // Base point for each property
+      
+      if (Array.isArray(value)) {
+        complexity += value.length * 0.1; // Arrays get points based on length
+      } else if (typeof value === 'object' && value !== null) {
+        complexity += Object.keys(value).length * 0.5; // Nested objects get points
+      } else if (typeof value === 'function') {
+        complexity += 2; // Functions are valuable
+      }
+    }
+    
+    return complexity;
+  }
+
   setState(update) {
     this.components.forEach((component) => {
+      // Handle class components
       if (component?.setState) {
         if (typeof update === "function") {
           // Functional update
@@ -85,6 +296,13 @@ class ReactFiber {
           });
         }
       }
+      // Handle function components - force re-render since we can't directly update hooks
+      else if (component?.type === 'function' && component?.forceUpdate) {
+        if (this.debug) {
+          console.log("⚠️  Function component detected - triggering re-render. Direct state update not possible.");
+        }
+        component.forceUpdate();
+      }
     });
     return this;
   }
@@ -99,7 +317,7 @@ class ReactFiber {
     return this.fibers[0]?.memoizedProps?.[propName];
   }
 
-  setProp(propName) {
+  setProp(propName, value) {
     this.fibers.forEach((fiber) => {
       if (fiber?.memoizedProps) {
         fiber.memoizedProps[propName] = value;
@@ -119,38 +337,176 @@ class ReactFiber {
   }
 }
 
-function makeSerializable(obj) {
-  if (typeof obj !== "object" || obj === null) {
+function makeSerializable(obj, visited = new WeakSet(), depth = 0, maxDepth = 10) {
+  // Handle primitives first
+  if (obj === null || obj === undefined) {
     return obj;
   }
   
-  if (Array.isArray(obj)) {
-    return obj.map((item) => makeSerializable(item));
+  // Catch ALL functions early
+  if (typeof obj === "function") {
+    return `[Function: ${obj.name || 'anonymous'}]`;
   }
   
+  if (typeof obj !== "object") {
+    // Handle other primitives
+    if (typeof obj === "symbol") return obj.toString();
+    if (typeof obj === "bigint") return obj.toString() + "n";
+    return obj;
+  }
+
+  // Prevent infinite recursion - depth limit
+  if (depth > maxDepth) {
+    return "[Max Depth Reached]";
+  }
+
+  // Prevent circular references
+  if (visited.has(obj)) {
+    return "[Circular Reference]";
+  }
+  visited.add(obj);
+
+  try {
+    // Handle special objects first
+    if (obj instanceof HTMLElement) {
+      return {
+        type: "HTMLElement",
+        tagName: obj.tagName,
+        id: obj.id || null,
+        className: obj.className || null,
+        attributes: obj.attributes ? Array.from(obj.attributes).map(attr => ({ name: attr.name, value: attr.value })) : []
+      };
+    }
+
+    if (obj instanceof Event) {
+      return {
+        type: "Event",
+        eventType: obj.type,
+        target: obj.target?.tagName || null
+      };
+    }
+
+    if (obj instanceof Date) {
+      return { type: "Date", value: obj.toISOString() };
+    }
+
+    if (obj instanceof RegExp) {
+      return { type: "RegExp", source: obj.source, flags: obj.flags };
+    }
+
+    if (obj instanceof Error) {
+      return { type: "Error", message: obj.message, name: obj.name };
+    }
+
+    // Handle React Fiber nodes - these are super circular
+    if (obj.tag !== undefined && obj.elementType !== undefined) {
+      return {
+        type: "ReactFiber",
+        tag: obj.tag,
+        elementType: typeof obj.elementType === 'function' ? obj.elementType.name || 'AnonymousComponent' : String(obj.elementType),
+        key: obj.key,
+        hasState: !!obj.stateNode?.state,
+        hasMemoizedState: !!obj.memoizedState,
+        hasProps: !!obj.memoizedProps
+      };
+    }
+
+    // Handle arrays
+    if (Array.isArray(obj)) {
+      return obj.slice(0, 50).map((item, index) => {
+        if (index >= 25) return "[...truncated]"; // Smaller limit
+        return makeSerializable(item, visited, depth + 1, maxDepth);
+      });
+    }
+
+    // Handle regular objects
     const serializableObj = {};
-  for (const key in obj) {
-    if (Object.hasOwn(obj, key)) {
+    
+    // Get own enumerable properties only to avoid prototype pollution
+    const ownKeys = Object.getOwnPropertyNames(obj).filter(key => {
+      try {
+        return obj.propertyIsEnumerable(key);
+      } catch {
+        return false;
+      }
+    });
+    
+    // Limit number of properties to avoid huge objects
+    const maxKeys = 30; // Smaller limit for safety
+    const processedKeys = ownKeys.slice(0, maxKeys);
+    
+    for (const key of processedKeys) {
+      try {
+        // Skip problematic keys early
+        const dangerousKeys = [
+          'parentNode', 'parentElement', 'ownerDocument', 'children', 'childNodes',
+          'return', 'child', 'sibling', 'alternate', 'ref', // React Fiber circular refs
+          '_owner', '_source', '_self', '_debugOwner', '_debugSource', // React internals
+          'window', 'document', 'global', 'self', 'top', 'parent', // Global objects
+          'constructor', 'prototype', '__proto__', // Constructor/prototype chains
+          'addEventListener', 'removeEventListener', // Event handlers
+          'setState', 'forceUpdate', 'render' // React methods that might be functions
+        ];
+        
+        if (dangerousKeys.includes(key)) {
+          serializableObj[key] = `[Skipped: ${key}]`;
+          continue;
+        }
+
+        const descriptor = Object.getOwnPropertyDescriptor(obj, key);
+        if (descriptor && (descriptor.get || descriptor.set)) {
+          serializableObj[key] = "[Getter/Setter]";
+          continue;
+        }
+
         let value = obj[key];
 
-      if (typeof value === "function") {
-        value = "[Function]";
-      } else if (value instanceof HTMLElement) {
-        value = {
-          type: "HTMLElement",
-          id: value.id,
-          tagName: value.tagName,
-        }; // Replace DOM node with ID/tag info
-      } else if (typeof value === "symbol") {
-        value = value.toString();
-      } else if (typeof value === "object" && value !== null) {
-        value = makeSerializable(value);
+        // Handle symbols specifically (React context symbols)
+        if (typeof value === "symbol") {
+          value = `[Symbol: ${value.description || 'anonymous'}]`;
+        }
+        // Extra function check
+        else if (typeof value === "function") {
+          value = `[Function: ${value.name || 'anonymous'}]`;
+        } else if (value && typeof value === "object") {
+          value = makeSerializable(value, visited, depth + 1, maxDepth);
         }
 
         serializableObj[key] = value;
+      } catch (error) {
+        serializableObj[key] = `[Error: ${error.message}]`;
       }
     }
+    
+    if (ownKeys.length > maxKeys) {
+      serializableObj['...'] = `[${ownKeys.length - maxKeys} more properties]`;
+    }
+
     return serializableObj;
+  } catch (error) {
+    return `[Serialization Error: ${error.message}]`;
+  } finally {
+    visited.delete(obj); // Clean up for potential reuse
+  }
+}
+
+// Final safety check - recursively scan for any remaining functions
+function deepFunctionCheck(obj, path = "") {
+  if (typeof obj === "function") {
+    throw new Error(`Found function at path: ${path}`);
+  }
+  
+  if (obj && typeof obj === "object") {
+    if (Array.isArray(obj)) {
+      obj.forEach((item, index) => {
+        deepFunctionCheck(item, `${path}[${index}]`);
+      });
+    } else {
+      Object.keys(obj).forEach(key => {
+        deepFunctionCheck(obj[key], path ? `${path}.${key}` : key);
+      });
+    }
+  }
 }
 
 window.addEventListener("message", (event) => {
@@ -168,7 +524,7 @@ window.addEventListener("message", (event) => {
       case "setState":
         // Handle both function and object updates
         if (payload.updateFn) {
-          const updateFn = eval(`(${payload.updateFn})`);
+          const updateFn = new Function('return ' + payload.updateFn)();
           fiberInstance.setState(updateFn);
         } else {
           fiberInstance.setState(payload.updateObject);
@@ -196,6 +552,28 @@ window.addEventListener("message", (event) => {
       response = makeSerializable(response);
     }
 
+    // Final safety check before postMessage
+    try {
+      deepFunctionCheck(response);
+    } catch (functionError) {
+      console.warn("[pageState] Function detected in response, cleaning:", functionError.message);
+      response = `[Cleaned Response - Function found at: ${functionError.message}]`;
+    }
+
+    // Additional structured clone test
+    try {
+      // Test if the object can be cloned (same algorithm as postMessage)
+      if (typeof structuredClone === 'function') {
+        structuredClone(response);
+      } else {
+        // Fallback for older browsers - try JSON round-trip
+        JSON.parse(JSON.stringify(response));
+      }
+    } catch (cloneError) {
+      console.warn("[pageState] Response not cloneable, fallback:", cloneError.message);
+      response = `[Uncloneable Response: ${cloneError.message}]`;
+    }
+
     window.postMessage(
       {
         type: "reactFiberResponse",

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

@@ -7,6 +7,20 @@ import {
 import { type Plugin } from "@/plugins/core/types";
 import stringToHTML from "@/seqta/utils/stringToHTML";
 import { waitForElm } from "@/seqta/utils/waitForElm";
+import ReactFiber from "@/seqta/utils/ReactFiber.ts";
+import {
+  clearStuck,
+  getClassByPattern,
+  initStorage,
+  letterToNumber,
+  parseAssessments,
+  processAssessments,
+} from "./utils.ts";
+
+interface weightingsStorage {
+  weightings: Record<string, string>;
+  assessments: Record<string, string>;
+}
 
 const settings = defineSettings({
   lettergrade: booleanSetting({
@@ -23,7 +37,7 @@ class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
 
 const instance = new AssessmentsAveragePluginClass();
 
-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",
@@ -32,8 +46,10 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
   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,
@@ -41,26 +57,13 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
         1000,
       );
 
-      // Helper function to find actual class names by their base pattern
-      const getClassByPattern = (
-        element: Element | Document,
-        basePattern: string,
-      ): string => {
-        // Find all classes on the element
-        const classes = Array.from(element.querySelectorAll("*"))
-          .flatMap((el) => Array.from(el.classList))
-          .filter((className) => className.startsWith(basePattern));
+      await parseAssessments(api);
 
-        return classes.length ? classes[0] : "";
-      };
-
-      // Find actual class names from the DOM
       const sampleAssessmentItem = document.querySelector(
         "[class*='AssessmentItem__AssessmentItem___']",
       );
       if (!sampleAssessmentItem) return;
 
-      // Extract all necessary class patterns from a sample assessment item
       const assessmentItemClass =
         Array.from(sampleAssessmentItem.classList).find((c) =>
           c.startsWith("AssessmentItem__AssessmentItem___"),
@@ -83,7 +86,6 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
         "AssessmentItem__title___",
       );
 
-      // Get Thermoscore classes
       const thermoscoreElement = document.querySelector(
         "[class*='Thermoscore__Thermoscore___']",
       );
@@ -102,62 +104,34 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
         "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___']",
+      const state = await ReactFiber.find(
+        "[class*='AssessmentList__items___']",
+      ).getState();
+      const marks = state["marks"];
+      if (!marks || !marks.length) return;
+
+      const assessmentItems = Array.from(
+        assessmentsList.querySelectorAll(
+          `[class*='AssessmentItem__AssessmentItem___']`,
+        ),
+      ).filter(
+        (item) =>
+          !item
+            .querySelector(`[class*='AssessmentItem__title___']`)
+            ?.textContent?.includes("Subject Average"),
       );
-      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,
-      };
+      const { weightedTotal, totalWeight, hasInaccurateWeighting, count } =
+        await processAssessments(api, assessmentItems);
 
-      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;
-      }
+      if (!count || totalWeight === 0) return;
 
-      let total = 0;
-      let count = 0;
-      gradeElements.forEach((el) => {
-        const grade = parseGrade(el.textContent || "");
-        if (grade > 0) {
-          total += grade;
-          count++;
-        }
-      });
-
-      if (!count) return;
-
-      const avg = total / count;
+      const avg = weightedTotal / totalWeight;
       const rounded = Math.ceil(avg / 5) * 5;
       const numberToLetter = Object.entries(letterToNumber).reduce(
         (acc, [k, v]) => {
@@ -172,31 +146,40 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
         ? 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 */ `
+      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="${display}">${display}</div>
+              <div class="${textClass}" title="${hasInaccurateWeighting ? display + " (some weightings unavailable)" : display}">${display}</div>
             </div>
           </div>
         </div>
-      `).firstChild;
-
-      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
+      `).firstChild!,
+        assessmentsList.firstChild,
+      );
     });
   },
 };

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

@@ -0,0 +1,572 @@
+import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements.ts";
+import ReactFiber from "@/seqta/utils/ReactFiber.ts";
+import * as pdfjs from "pdfjs-dist";
+pdfjs.GlobalWorkerOptions.workerSrc =
+  "https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.worker.min.mjs";
+
+export async function initStorage(api: any) {
+  await api.storage.loaded;
+
+  if (!api.storage.weightings) {
+    api.storage.weightings = {};
+  }
+  if (!api.storage.assessments) {
+    api.storage.assessments = {};
+  }
+}
+
+export function clearStuck(api: any) {
+  let hasStuckProcessing = false;
+  for (const key in api.storage.weightings) {
+    if (api.storage.weightings[key] === "processing") {
+      delete api.storage.weightings[key];
+      hasStuckProcessing = true;
+    }
+  }
+  if (hasStuckProcessing) {
+    api.storage.weightings = { ...api.storage.weightings };
+  }
+}
+
+// Helper function to find actual class names by their base pattern
+export const getClassByPattern = (
+  element: Element | Document,
+  basePattern: string,
+): string => {
+  const classes = Array.from(element.querySelectorAll("*"))
+    .flatMap((el) => Array.from(el.classList))
+    .filter((className) => className.startsWith(basePattern));
+
+  return classes.length ? classes[0] : "";
+};
+
+export 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;
+}
+
+function createWeightLabel(
+  assessmentItem: Element,
+  weighting: string | undefined,
+) {
+  const statsContainer = assessmentItem.querySelector(
+    `[class*='AssessmentItem__stats___']`,
+  ) as HTMLElement;
+
+  if (
+    !statsContainer ||
+    statsContainer.querySelector(".betterseqta-weight-label")
+  )
+    return;
+
+  const label = statsContainer.querySelector(
+    `[class*='Label__Label___']`,
+  ) as HTMLElement;
+
+  if (!label) return;
+
+  const weightLabel = label.cloneNode(true) as HTMLElement;
+  weightLabel.classList.add("betterseqta-weight-label");
+
+  const innerTextDiv = weightLabel.querySelector(
+    `[class*='Label__innerText___']`,
+  );
+  if (innerTextDiv) innerTextDiv.textContent = "Weight";
+
+  const textNodes = Array.from(weightLabel.childNodes).filter(
+    (node) => node.nodeType === Node.TEXT_NODE,
+  );
+
+  if (textNodes.length) {
+    textNodes[0].textContent =
+      weighting && weighting !== "processing"
+        ? `${Number(weighting) % 1 === 0 ? Number(weighting) : weighting}%`
+        : "N/A";
+  }
+
+  statsContainer.style.position = "relative";
+  weightLabel.style.position = "absolute";
+  weightLabel.style.right = "0";
+  weightLabel.style.top = "50%";
+  weightLabel.style.transform = "translateY(-50%)";
+
+  statsContainer.appendChild(weightLabel);
+}
+
+export const isFirefox =
+  navigator.userAgent.toLowerCase().indexOf("firefox") > -1 &&
+  !navigator.userAgent.toLowerCase().includes("seamonkey") &&
+  !navigator.userAgent.toLowerCase().includes("waterfox");
+
+async function fetchPDFAsArrayBuffer(url: string): Promise<ArrayBuffer> {
+  const isBlobUrl = url.startsWith("blob:");
+
+  if (isBlobUrl || isFirefox) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      const requestId = `pdf-fetch-${Date.now()}-${Math.random()}`;
+      const escapedUrl = url.replace(/'/g, "\\'");
+
+      script.textContent = `
+        (function() {
+          fetch('${escapedUrl}')
+            .then(response => {
+              if (!response.ok) {
+                throw new Error('HTTP ' + response.status + ': ' + response.statusText);
+              }
+              return response.arrayBuffer();
+            })
+            .then(arrayBuffer => {
+              window.postMessage({
+                type: '${requestId}',
+                success: true,
+                data: Array.from(new Uint8Array(arrayBuffer))
+              }, '*');
+            })
+            .catch(error => {
+              window.postMessage({
+                type: '${requestId}',
+                success: false,
+                error: error.message || String(error)
+              }, '*');
+            });
+        })();
+      `;
+
+      const messageHandler = (event: MessageEvent) => {
+        if (event.data?.type === requestId) {
+          window.removeEventListener("message", messageHandler);
+          if (script.parentNode) {
+            script.parentNode.removeChild(script);
+          }
+
+          if (event.data.success) {
+            resolve(new Uint8Array(event.data.data).buffer);
+          } else {
+            reject(new Error(event.data.error || "Failed to fetch PDF"));
+          }
+        }
+      };
+
+      window.addEventListener("message", messageHandler);
+      (document.head || document.documentElement).appendChild(script);
+
+      setTimeout(() => {
+        window.removeEventListener("message", messageHandler);
+        if (script.parentNode) {
+          script.parentNode.removeChild(script);
+        }
+        reject(new Error("Timeout fetching PDF"));
+      }, 30000);
+    });
+  }
+
+  try {
+    const response = await fetch(url, {
+      credentials: "include",
+      redirect: "follow",
+    });
+
+    if (response.url && response.url.startsWith("blob:")) {
+      return await fetchPDFAsArrayBuffer(response.url);
+    }
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch PDF: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    return await response.arrayBuffer();
+  } catch (error: any) {
+    if (
+      error?.message?.includes("blob") ||
+      error?.message?.includes("Security") ||
+      error?.message?.includes("CSP")
+    ) {
+      return await fetchPDFAsArrayBuffer(url);
+    }
+    throw error;
+  }
+}
+
+export async function extractPDFText(url: string): Promise<string> {
+  try {
+    if (isFirefox) {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        const requestId = `pdf-extract-${Date.now()}-${Math.random()}`;
+
+        const escapedUrl = url
+          .replace(/\\/g, "\\\\")
+          .replace(/'/g, "\\'")
+          .replace(/"/g, '\\"');
+
+        script.textContent = `
+          (function() {
+            const requestId = '${requestId}';
+            const url = '${escapedUrl}';
+            
+            if (window.pdfjsLib) {
+              extractPDF();
+            } else {
+              const pdfjsScript = document.createElement('script');
+              pdfjsScript.src = 'https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.min.js';
+              pdfjsScript.type = 'text/javascript';
+              
+              pdfjsScript.onload = function() {
+                extractPDF();
+              };
+              pdfjsScript.onerror = function() {
+                window.postMessage({
+                  type: requestId,
+                  success: false,
+                  error: 'Failed to load pdfjs library'
+                }, '*');
+              };
+              
+              document.head.appendChild(pdfjsScript);
+            }
+            
+            function extractPDF() {
+              try {
+                window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';
+                
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', url, true);
+                xhr.responseType = 'arraybuffer';
+                xhr.withCredentials = true;
+                
+                xhr.onload = function() {
+                  if (xhr.status !== 200) {
+                    window.postMessage({
+                      type: requestId,
+                      success: false,
+                      error: 'HTTP ' + xhr.status + ': ' + xhr.statusText
+                    }, '*');
+                    return;
+                  }
+                  
+                  try {
+                    const arrayBuffer = xhr.response;
+                    if (!arrayBuffer || arrayBuffer.byteLength === 0) {
+                      throw new Error('PDF response is empty');
+                    }
+                    
+                    window.pdfjsLib.getDocument({ 
+                      data: arrayBuffer,
+                      useSystemFonts: true,
+                      verbosity: 0,
+                      useWorkerFetch: false,
+                      isEvalSupported: false
+                    }).promise
+                      .then(pdf => {
+                        const pagePromises = [];
+                        for (let i = 1; i <= pdf.numPages; i++) {
+                          pagePromises.push(
+                            pdf.getPage(i).then(page => {
+                              return page.getTextContent().then(content => {
+                                return content.items.map(item => item.str).join(' ');
+                              });
+                            })
+                          );
+                        }
+                        return Promise.all(pagePromises);
+                      })
+                      .then(pages => {
+                        const text = pages.join('\\n');
+                        window.postMessage({
+                          type: requestId,
+                          success: true,
+                          text: text
+                        }, '*');
+                      })
+                      .catch(error => {
+                        window.postMessage({
+                          type: requestId,
+                          success: false,
+                          error: 'PDF parsing error: ' + (error.message || String(error))
+                        }, '*');
+                      });
+                  } catch (error) {
+                    window.postMessage({
+                      type: requestId,
+                      success: false,
+                      error: 'ArrayBuffer error: ' + (error.message || String(error))
+                    }, '*');
+                  }
+                };
+                
+                xhr.onerror = function() {
+                  window.postMessage({
+                    type: requestId,
+                    success: false,
+                    error: 'Network error fetching PDF'
+                  }, '*');
+                };
+                
+                xhr.ontimeout = function() {
+                  window.postMessage({
+                    type: requestId,
+                    success: false,
+                    error: 'Timeout fetching PDF'
+                  }, '*');
+                };
+                
+                xhr.timeout = 30000;
+                xhr.send();
+              } catch (error) {
+                window.postMessage({
+                  type: requestId,
+                  success: false,
+                  error: 'Setup error: ' + (error.message || String(error))
+                }, '*');
+              }
+            }
+          })();
+        `;
+
+        const messageHandler = (event: MessageEvent) => {
+          if (event.data?.type === requestId) {
+            window.removeEventListener("message", messageHandler);
+            if (script.parentNode) {
+              script.parentNode.removeChild(script);
+            }
+
+            if (event.data.success) {
+              resolve(event.data.text);
+            } else {
+              reject(
+                new Error(event.data.error || "Failed to extract PDF text"),
+              );
+            }
+          }
+        };
+
+        window.addEventListener("message", messageHandler);
+        (document.head || document.documentElement).appendChild(script);
+
+        setTimeout(() => {
+          window.removeEventListener("message", messageHandler);
+          if (script.parentNode) {
+            script.parentNode.removeChild(script);
+          }
+          reject(new Error("Timeout extracting PDF text"));
+        }, 60000);
+      });
+    }
+
+    const arrayBuffer = await fetchPDFAsArrayBuffer(url);
+
+    if (arrayBuffer.byteLength === 0) {
+      throw new Error("PDF response is empty");
+    }
+
+    const pdf = await pdfjs.getDocument({
+      data: arrayBuffer,
+      useSystemFonts: true,
+    }).promise;
+
+    let text = "";
+
+    for (let i = 1; i <= pdf.numPages; i++) {
+      const page = await pdf.getPage(i);
+      const content = await page.getTextContent();
+      text += content.items.map((item: any) => item.str).join(" ") + "\n";
+    }
+
+    return text;
+  } catch (error) {
+    console.error("[BetterSEQTA+] Failed to extract PDF text:", error);
+    throw error;
+  }
+}
+
+async function handleWeightings(mark: any, api: any) {
+  const assessmentID = mark.id;
+  const metaclassID = mark.metaclassID;
+  const userInfo = await getUserInfo();
+  const userID = userInfo.id;
+  const title = mark.title;
+
+  if (
+    api.storage.weightings[assessmentID] != undefined &&
+    api.storage.weightings[assessmentID] !== "processing"
+  ) {
+    return;
+  }
+
+  api.storage.weightings = {
+    ...api.storage.weightings,
+    [assessmentID]: "processing",
+  };
+
+  api.storage.assessments = {
+    ...api.storage.assessments,
+    [title.trim()]: assessmentID,
+  };
+
+  try {
+    const filename =
+      "BetterSEQTA-" +
+      String(Math.floor(Math.random() * 1e15)).padStart(15, "0");
+
+    const printResponse = await fetch(
+      `${location.origin}/seqta/student/print/assessment`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+        credentials: "include",
+        body: JSON.stringify({
+          fileName: filename,
+          id: assessmentID,
+          metaclass: metaclassID,
+          student: userID,
+        }),
+      },
+    );
+
+    if (!printResponse.ok) {
+      throw new Error(
+        `Failed to generate PDF: ${printResponse.status} ${printResponse.statusText}`,
+      );
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const pdfUrl = `${location.origin}/seqta/student/report/get?file=${filename}`;
+
+    if (pdfUrl.startsWith("blob:")) {
+      throw new Error(`Cannot fetch blob URL from extension: ${pdfUrl}`);
+    }
+
+    let text: string;
+    try {
+      text = await extractPDFText(pdfUrl);
+    } catch (error: any) {
+      if (
+        isFirefox &&
+        (error?.message?.includes("blob") ||
+          error?.message?.includes("Security") ||
+          error?.message?.includes("CSP"))
+      ) {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        text = await extractPDFText(pdfUrl);
+      } else {
+        throw new Error(`PDF extraction failed: ${error.message}`);
+      }
+    }
+
+    const match = text.match(/weight:\s*(\d+\.?\d*)/i);
+
+    api.storage.weightings = {
+      ...api.storage.weightings,
+      [assessmentID]: match ? match[1] : "N/A",
+    };
+  } catch (error: any) {
+    api.storage.weightings = {
+      ...api.storage.weightings,
+      [assessmentID]: "N/A",
+    };
+  }
+}
+
+export async function parseAssessments(api: any) {
+  const state = await ReactFiber.find(
+    "[class*='AssessmentList__items___']",
+  ).getState();
+
+  const marks = state["marks"];
+  if (!marks) return;
+
+  await Promise.all(marks.map((mark: any) => handleWeightings(mark, api)));
+}
+
+export async function processAssessments(api: any, assessmentItems: Element[]) {
+  let weightedTotal = 0;
+  let totalWeight = 0;
+  let hasInaccurateWeighting = false;
+  let count = 0;
+
+  for (const assessmentItem of assessmentItems) {
+    const gradeElement = assessmentItem.querySelector(
+      `[class*='Thermoscore__text___']`,
+    );
+
+    if (!gradeElement) continue;
+
+    const grade = parseGrade(gradeElement.textContent || "");
+    if (grade <= 0) continue;
+
+    const titleEl = assessmentItem.querySelector(
+      `[class*='AssessmentItem__title___']`,
+    );
+    if (!titleEl) continue;
+
+    const title = titleEl.textContent?.trim();
+    if (!title) continue;
+
+    const assessmentID = api.storage.assessments?.[title];
+    const weighting = assessmentID
+      ? api.storage.weightings?.[assessmentID]
+      : undefined;
+
+    createWeightLabel(assessmentItem, weighting);
+
+    if (
+      weighting === null ||
+      weighting === undefined ||
+      weighting === "N/A" ||
+      weighting === "processing"
+    ) {
+      hasInaccurateWeighting = true;
+      weightedTotal += grade;
+      totalWeight += 1;
+    } else {
+      const weight = parseFloat(weighting);
+
+      if (!isNaN(weight) && weight >= 0) {
+        weightedTotal += grade * weight;
+        totalWeight += weight;
+      } else {
+        weightedTotal += grade;
+        totalWeight += 1;
+        hasInaccurateWeighting = true;
+      }
+    }
+    count++;
+  }
+
+  return {
+    weightedTotal,
+    totalWeight,
+    hasInaccurateWeighting,
+    count,
+  };
+}

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

@@ -0,0 +1,384 @@
+<script lang="ts">
+  import { determineStatus, formatDate, getGradeValue } from "./utils";
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import confetti from "canvas-confetti";
+
+  export let data: any;
+
+  interface FilterOptions {
+    subject: string;
+    sortBy: "due" | "grade" | "subject" | "title";
+  }
+
+  function percentageToLetter(percentage: number): string {
+    const letterMap: Record<number, string> = {
+      100: "A+",
+      95: "A",
+      90: "A-",
+      85: "B+",
+      80: "B",
+      75: "B-",
+      70: "C+",
+      65: "C",
+      60: "C-",
+      55: "D+",
+      50: "D",
+      45: "D-",
+      40: "E+",
+      35: "E",
+      30: "E-",
+      0: "F",
+    };
+
+    const rounded = Math.ceil(percentage / 5) * 5;
+    return letterMap[rounded] || "F";
+  }
+
+  let currentFilters: FilterOptions = {
+    subject: "all",
+    sortBy: "due",
+  };
+
+  let filteredAssessments: any[] = [];
+  let statusGroups: Record<string, any[]> = {};
+
+  function updateAssessments() {
+    filteredAssessments = data.assessments.filter((a: any) => {
+      const subjectMatch =
+        currentFilters.subject === "all" || a.code === currentFilters.subject;
+      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 {
+    const status = determineStatus(assessment);
+    switch (status) {
+      case "OVERDUE":
+        return "overdue";
+      case "DUE_SOON":
+        return "due-soon";
+      case "UPCOMING":
+        return "upcoming";
+      default:
+        return "";
+    }
+  }
+
+  function markAssessmentCompleted(assessment: any) {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+
+    if (!completed.includes(assessment.id)) {
+      completed.push(assessment.id);
+      localStorage.setItem(completedKey, JSON.stringify(completed));
+      updateAssessments();
+      checkForCelebration();
+    }
+  }
+
+  function unmarkAssessmentCompleted(assessment: any) {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+
+    const index = completed.indexOf(assessment.id);
+    if (index > -1) {
+      completed.splice(index, 1);
+      localStorage.setItem(completedKey, JSON.stringify(completed));
+      updateAssessments();
+    }
+  }
+
+  function checkForCelebration() {
+    const overdueCount = statusGroups.OVERDUE?.length || 0;
+    const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
+    
+    if (overdueCount === 0 && dueSoonCount === 0) {
+      setTimeout(() => {
+        try {
+          const duration = 100;
+          const end = Date.now() + duration;
+
+          (function frame() {
+            confetti({
+              particleCount: 17,
+              angle: 60,
+              spread: 65,
+              drift: 0.8,
+              startVelocity: 40,
+              scalar: 2,
+              gravity: 2,
+              decay: 0.97,
+              ticks: 300,
+              origin: { x: 0, y: 1 },
+              disableForReducedMotion: true,
+            });
+            
+            confetti({
+              particleCount: 17,
+              angle: 120,
+              spread: 65,
+              drift: -0.8,
+              startVelocity: 40,
+              scalar: 2,
+              decay: 0.97,
+              ticks: 300,
+              gravity: 2,
+              origin: { x: 1, y: 1 },
+              disableForReducedMotion: true,
+            });
+
+            if (Date.now() < end) {
+              requestAnimationFrame(frame);
+            }
+          }());
+        } catch (e) {
+          console.log("Confetti celebration failed:", e);
+        }
+      }, 500);
+    } else if (overdueCount === 0 || dueSoonCount === 0) {
+      setTimeout(() => {
+        try {
+          confetti({
+            particleCount: 100,
+            spread: 70,
+            origin: { y: 0.6 },
+            scalar: 0.9,
+            disableForReducedMotion: true,
+          });
+        } catch (e) {
+          console.log("Confetti celebration failed:", e);
+        }
+      }, 500);
+    }
+  }
+
+  function isManuallyCompleted(assessmentId: string): boolean {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+    return completed.includes(assessmentId);
+  }
+
+  function handleCardClick(assessment: any, event: Event) {
+    if ((event.target as HTMLElement).closest(".card-menu")) {
+      return;
+    }
+    window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
+  }
+
+  let openMenuId: string | null = null;
+
+  function toggleMenu(assessmentId: string, event: Event) {
+    event.stopPropagation();
+    openMenuId = openMenuId === assessmentId ? null : assessmentId;
+  }
+
+  function closeAllMenus() {
+    openMenuId = null;
+  }
+
+  $: {
+    if (data) {
+      updateAssessments();
+    }
+  }
+
+  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 id="grid-view-container">
+  <div class="grid-view-header">
+    <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
+      <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}>
+        <option value="due">Sort by Due Date</option>
+        <option value="grade">Sort by Grade</option>
+        <option value="subject">Sort by Subject</option>
+        <option value="title">Sort by Title</option>
+      </select>
+    </div>
+  </div>
+
+  <div id="main-grid-content">
+    {#if filteredAssessments.length === 0}
+      <div class="empty-state">
+        <div class="empty-icon">📋</div>
+        <p>No assessments found matching your filters</p>
+      </div>
+    {:else}
+      <div class="kanban-board">
+        {#each columns as column}
+          {#if statusGroups[column.key]?.length > 0}
+            <div class="kanban-column-parent">
+              <div class="kanban-column {column.className}">
+                <div class="column-header">
+                  <div class="column-title">
+                    {column.icon} {column.title}
+                    <span class="column-count">{statusGroups[column.key].length}</span>
+                  </div>
+                </div>
+                <div class="column-cards" id="{column.key.toLowerCase()}-cards">
+                  {#each statusGroups[column.key] as assessment}
+                    {@const status = determineStatus(assessment)}
+                    {@const dueDateClass = getDueDateClass(assessment)}
+                    {@const isCompleted = isManuallyCompleted(assessment.id)}
+                    {@const color = data.colors[assessment.code] || "#6366f1"}
+                    <div 
+                      class="assessment-card"
+                      data-subject={assessment.code}
+                      data-status={status}
+                      style="--subject-color: {color}"
+                      on:click={(e) => handleCardClick(assessment, e)}
+                      role="button"
+                      tabindex="0"
+                      on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
+                    >
+                      <div class="card-labels">
+                        <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>
+                        {/if}
+                        {#if isCompleted && status === "MARKS_RELEASED" && !assessment.results}
+                          <span class="card-label label-completed" style="background: #059669; color: white;">Completed</span>
+                        {/if}
+                      </div>
+
+                      {#if status !== "MARKS_RELEASED" || isCompleted}
+                        <div class="card-menu">
+                          <button 
+                            class="menu-button" 
+                            data-assessment-id={assessment.id}
+                            on:click={(e) => toggleMenu(assessment.id, e)}
+                            aria-label="Open menu"
+                          >
+                            <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"}
+                              <button class="menu-item mark-completed" on:click={() => markAssessmentCompleted(assessment)}>
+                                Mark as Completed
+                              </button>
+                            {:else if isCompleted}
+                              <button class="menu-item mark-not-completed" on:click={() => unmarkAssessmentCompleted(assessment)}>
+                                Mark as Not Complete
+                              </button>
+                            {/if}
+                          </div>
+                        </div>
+                      {/if}
+
+                      <h3 class="assessment-title">{assessment.title}</h3>
+
+                      {#if !assessment.results && !isCompleted}
+                        <div class="assessment-meta">
+                          <div class="due-date {dueDateClass}">
+                            📅 {formatDate(assessment.due, assessment.submitted)}
+                          </div>
+                        </div>
+                      {/if}
+
+                      {#if assessment.results}
+                        <div class="card-footer">
+                          <div class="Thermoscore__Thermoscore___WFpL3" style="--fill-colour: {color}">
+                            <div style="width: {assessment.results.percentage}%" class="Thermoscore__fill___ojxDI">
+                              <div title="{assessment.results.percentage}%" class="Thermoscore__text___XSR_M">
+                                {(() => {
+                                  const allSettings = settingsState.getAll() as unknown as any;
+                                  const letterGradeSetting = allSettings["plugin.assessments-average.settings"]?.lettergrade;
+                                  return letterGradeSetting 
+                                    ? percentageToLetter(assessment.results.percentage)
+                                    : `${assessment.results.percentage}%`;
+                                })()}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let error: string;
+</script>
+
+<div class="error-container">
+  <p class="error-text">Failed to load assessments</p>
+  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
+</div>

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

@@ -0,0 +1,78 @@
+<div id="grid-view-container">
+  <div class="grid-view-header">
+    <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
+      <select class="filter-select" disabled>
+        <option value="all">Loading subjects...</option>
+      </select>
+      <select class="filter-select" disabled>
+        <option value="due">Sort by Due Date</option>
+      </select>
+    </div>
+  </div>
+
+  <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">
+                {column.icon} {column.title}
+                <span class="column-count">...</span>
+              </div>
+            </div>
+            <div class="column-cards" id="{column.key.toLowerCase()}-cards">
+              {#each Array(column.skeletonCount) as _}
+                <div class="assessment-card">
+                  <div class="skeleton-element skeleton-label"></div>
+                  <div class="skeleton-element skeleton-title"></div>
+                  <div class="skeleton-element skeleton-title-line2"></div>
+                  <div class="skeleton-element skeleton-meta"></div>
+                  {#if column.key === "MARKS_RELEASED"}
+                    <div class="skeleton-footer">
+                      <div class="skeleton-element" style="height: 16px; width: 100%;"></div>
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<script lang="ts">
+  const columns = [
+    {
+      key: "UPCOMING",
+      title: "Upcoming",
+      className: "column-upcoming",
+      icon: "📅",
+      skeletonCount: 3,
+    },
+    {
+      key: "DUE_SOON",
+      title: "Due Soon",
+      className: "column-due-soon",
+      icon: "⏰",
+      skeletonCount: 2,
+    },
+    {
+      key: "OVERDUE",
+      title: "Overdue",
+      className: "column-overdue",
+      icon: "🚨",
+      skeletonCount: 1,
+    },
+    {
+      key: "MARKS_RELEASED",
+      title: "Marked",
+      className: "column-marked",
+      icon: "✅",
+      skeletonCount: 4,
+    },
+  ];
+</script>

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

@@ -0,0 +1,138 @@
+interface Subject {
+  code: string;
+  programme: number;
+  metaclass: number;
+  title: string;
+}
+interface PrefItem {
+  name: string;
+  value: string;
+}
+
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { getMockAssessmentsData } from "@/seqta/ui/dev/hideSensitiveContent";
+
+let cache: { time: number; data: any } | null = null;
+const CACHE_MS = 10 * 60 * 1000;
+const student = 69;
+
+async function fetchJSON(url: string, body: any) {
+  const res = await fetch(`${location.origin}${url}`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+async function loadSubjects() {
+  const res = await fetchJSON("/seqta/student/load/subjects?", {});
+  return res.payload
+    .filter((s: any) => s.active === 1)
+    .flatMap((s: any) => s.subjects);
+}
+
+async function loadPrefs(student: number) {
+  const res = await fetchJSON("/seqta/student/load/prefs?", {
+    request: "userPrefs",
+    asArray: true,
+    user: student,
+  });
+  const colors: Record<string, string> = {};
+  res.payload.forEach((p: PrefItem) => {
+    if (p.name.startsWith("timetable.subject.colour.")) {
+      const code = p.name.replace("timetable.subject.colour.", "");
+      colors[code] = p.value;
+    }
+  });
+  return colors;
+}
+
+async function loadUpcoming(student: number) {
+  const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
+    student,
+  });
+  return res.payload;
+}
+
+async function loadPast(student: number, subjects: Subject[]) {
+  const map: Record<number, any> = {};
+  await Promise.all(
+    subjects.map(async (s) => {
+      const res = await fetchJSON("/seqta/student/assessment/list/past?", {
+        programme: s.programme,
+        metaclass: s.metaclass,
+        student,
+      });
+      if (res.payload.tasks) {
+        res.payload.tasks.forEach((t: any) => {
+          map[t.id] = t;
+        });
+      }
+    }),
+  );
+  return map;
+}
+
+async function loadSubmissions(student: number, assessments: any[]) {
+  const submissionMap: Record<number, boolean> = {};
+
+  await Promise.all(
+    assessments.map(async (assessment) => {
+      try {
+        const res = await fetchJSON(
+          "/seqta/student/assessment/submissions/get",
+          {
+            assessment: assessment.id,
+            metaclass: assessment.metaclassID,
+            student,
+          },
+        );
+
+        submissionMap[assessment.id] = res.payload && res.payload.length > 0;
+      } catch (error) {
+        console.warn(
+          `Failed to fetch submission for assessment ${assessment.id}:`,
+          error,
+        );
+        submissionMap[assessment.id] = false;
+      }
+    }),
+  );
+
+  return submissionMap;
+}
+
+export async function getAssessmentsData() {
+  if (settingsState.mockNotices) {
+    return getMockAssessmentsData();
+  }
+
+  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
+  const [subjects, colors, upcoming] = await Promise.all([
+    loadSubjects(),
+    loadPrefs(student),
+    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 allAssessments = Object.values(map);
+  const submissions = await loadSubmissions(student, allAssessments);
+
+  allAssessments.forEach((assessment: any) => {
+    assessment.submitted = submissions[assessment.id] || false;
+  });
+
+  const data = { assessments: allAssessments, subjects, colors };
+  cache = { time: Date.now(), data };
+  return data;
+}

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

@@ -0,0 +1,86 @@
+import type { Plugin } from "../../core/types";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import { getAssessmentsData } from "./api";
+import { renderErrorState, renderSkeletonLoader } from "./ui";
+import styles from "./styles.css?inline";
+import { delay } from "@/seqta/utils/delay";
+
+const assessmentsOverviewPlugin: Plugin<{}> = {
+  id: "assessments-overview",
+  name: "Assessments Overview",
+  description:
+    "Adds an overview option to the assessments page that organizes assessments by status",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: false,
+  styles,
+
+  run: async () => {
+    const menu = (await waitForElm(
+      '[data-key="assessments"] > .sub > ul',
+      true,
+      100,
+      60,
+    )) as HTMLElement;
+    const gridItem = document.createElement("li");
+    gridItem.className = "item";
+    const label = document.createElement("label");
+    label.textContent = "Overview";
+    gridItem.appendChild(label);
+    menu.insertBefore(gridItem, menu.children[1] || null);
+
+    if (window.location.hash.includes("/assessments/overview")) {
+      loadGridView();
+    }
+
+    const clickHandler = (e: Event) => {
+      e.preventDefault();
+      loadGridView();
+    };
+    gridItem.addEventListener("click", clickHandler);
+
+    async function loadGridView() {
+      await delay(1);
+      window.history.pushState({}, "", "/#?page=/assessments/overview");
+      document.title = "Overview ― SEQTA Learn";
+      const main = document.getElementById("main");
+      if (!main) return;
+
+      document
+        .querySelectorAll('[data-key="assessments"] .item')
+        .forEach((item) => {
+          item.classList.remove("active");
+        });
+      gridItem.classList.add("active");
+      document
+        .querySelector('[data-key="assessments"]')
+        ?.classList.add("active");
+
+      main.innerHTML = '<div id="grid-view-container"></div>';
+      const container = document.getElementById(
+        "grid-view-container",
+      ) as HTMLElement;
+
+      renderSkeletonLoader(container);
+
+      try {
+        const data = await getAssessmentsData();
+        const { renderGrid } = await import("./ui");
+        renderGrid(container, data);
+      } catch (err) {
+        console.error("Failed to load assessments:", err);
+        renderErrorState(
+          container,
+          err instanceof Error ? err.message : "Unknown error",
+        );
+      }
+    }
+
+    return () => {
+      gridItem.removeEventListener("click", clickHandler);
+      gridItem.remove();
+    };
+  },
+};
+
+export default assessmentsOverviewPlugin;

src/plugins/built-in/assessmentsOverview/styles.css

@@ -0,0 +1,797 @@
+#grid-view-container {
+  background: transparent;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.grid-view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.grid-view-title {
+  font-size: 1.875rem !important;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* Dark mode support */
+.dark .grid-view-title {
+  color: #f8fafc;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.grid-view-filters {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.filter-select {
+  background: #ffffff !important;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  color: #1a1a1a;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 180px;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #d41e3a;
+  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
+}
+
+.filter-select:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode dropdowns */
+.dark .filter-select {
+  background: var(--background-primary) !important;
+  border-color: var(--background-secondary);
+  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(--background-primary);
+  color: var(--text-primary);
+}
+
+#main-grid-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Kanban Board Layout */
+.kanban-board {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  padding: 1rem;
+  flex: 0 1 auto;
+}
+
+.kanban-column-parent {
+  flex: 0 0 320px;
+
+}
+
+.kanban-column {
+  max-height: 100%;
+  background: #f8fafc;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode columns */
+.dark .kanban-column {
+  background: var(--background-primary);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.column-header {
+  padding: 1rem 1.25rem;
+  border-bottom: 2px solid #e2e8f0;
+  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: 1rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dark .column-title {
+  color: var(--text-primary);
+}
+
+.column-count {
+  background: #e2e8f0;
+  color: #64748b;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.dark .column-count {
+  background: var(--background-secondary);
+  color: var(--text-primary);
+}
+
+.column-cards {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Assessment Cards */
+.assessment-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  border-left: 4px solid var(--subject-color, #d41e3a);
+  border: 1px solid #e2e8f0;
+}
+
+.assessment-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+  border-color: #cbd5e1;
+}
+
+/* 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 {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.card-label {
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.label-subject {
+  background: var(--subject-color, #d41e3a);
+}
+
+.card-menu {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 20;
+}
+
+.menu-button {
+  background: transparent !important;
+  border: none !important;
+  padding: 0.25rem !important;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #64748b;
+  transition: all 0.2s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 !important;
+  position: static !important;
+  transform: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.menu-button:hover {
+  background: #f1f5f9 !important;
+  color: #1a1a1a;
+}
+
+.menu-button svg {
+  width: 16px !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: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 140px;
+  z-index: 30;
+  margin-top: 4px;
+}
+
+.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 {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #1a1a1a;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.menu-item:hover {
+  background: #f8fafc;
+}
+
+.dark .menu-item {
+  color: var(--text-primary);
+}
+
+.dark .menu-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.menu-item.mark-completed {
+  color: #059669;
+  font-weight: 500;
+}
+
+.dark .menu-item.mark-completed {
+  color: #10b981;
+}
+
+.menu-item.mark-not-completed {
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.dark .menu-item.mark-not-completed {
+  color: #ef4444;
+}
+
+.assessment-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 0.75rem;
+  line-height: 1.4;
+  padding-right: 2rem; /* Make room for menu button */
+}
+
+.dark .assessment-title {
+  color: var(--text-primary);
+}
+
+.assessment-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.dark .assessment-meta {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.due-date {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+
+.due-date.overdue {
+  color: #dc2626;
+}
+
+.due-date.due-soon {
+  color: #d97706;
+}
+
+.due-date.upcoming {
+  color: #059669;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .card-footer {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.grade-display {
+  font-weight: 700;
+  font-size: 0.875rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+}
+
+.grade-good {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.grade-average {
+  background: rgba(245, 158, 11, 0.1);
+  color: #d97706;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.grade-bad {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.grade-empty {
+  color: #64748b;
+  font-style: italic;
+  font-weight: 500;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+}
+
+.dark .grade-empty {
+  color: var(--text-primary);
+  opacity: 0.7;
+  background: var(--background-secondary);
+  border-color: var(--background-secondary);
+}
+
+/* Column-specific styling */
+.column-upcoming .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+}
+
+.column-due-soon .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
+}
+
+.column-overdue .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
+}
+
+.column-submitted .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
+}
+
+.column-marked .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
+}
+
+/* Dark mode column headers */
+.dark .column-upcoming .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
+}
+
+.dark .column-due-soon .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
+}
+
+.dark .column-overdue .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
+}
+
+.dark .column-submitted .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
+}
+
+.dark .column-marked .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
+}
+
+/* Subject filter view */
+.subject-section {
+  margin-bottom: 2rem;
+}
+
+.subject-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 2px solid #e2e8f0;
+  border-left: 4px solid var(--subject-color, #d41e3a);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dark .subject-header {
+  background: var(--background-secondary);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.subject-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.subject-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.dark .subject-title {
+  color: var(--text-primary);
+}
+
+.subject-code {
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.dark .subject-code {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+/* Loading and error states */
+.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: 4rem 0;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #fecaca;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark .error-container {
+  background: var(--background-primary);
+  border-color: #991b1b;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.error-text {
+  color: #ef4444;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.dark .empty-state {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.empty-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  text-align: center;
+  min-height: 200px;
+}
+
+.dark .empty-column {
+  color: var(--text-primary);
+  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); }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.skeleton-element {
+  background: linear-gradient(
+    90deg,
+    #f1f5f9 0%,
+    #e2e8f0 50%,
+    #f1f5f9 100%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite linear;
+  border-radius: 4px;
+}
+
+.dark .skeleton-element {
+  background: linear-gradient(
+    90deg,
+    var(--background-primary) 0%,
+    var(--background-secondary) 50%,
+    var(--background-primary) 100%
+  );
+  background-size: 1000px 100%;
+}
+
+.skeleton-label {
+  height: 20px;
+  width: 60px;
+  margin-bottom: 0.75rem;
+  border-radius: 6px;
+}
+
+.skeleton-title {
+  height: 16px;
+  width: 80%;
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-title-line2 {
+  height: 16px;
+  width: 60%;
+  margin-bottom: 0.75rem;
+}
+
+.skeleton-meta {
+  height: 12px;
+  width: 40%;
+  margin-top: 0.75rem;
+}
+
+.skeleton-footer {
+  height: 8px;
+  width: 100%;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .skeleton-footer {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  #grid-view-container {
+    padding: 1rem;
+  }
+  
+  .grid-view-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .grid-view-filters {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  
+  .kanban-board {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .kanban-column {
+    flex: none;
+    max-height: none;
+  }
+  
+  .filter-select {
+    min-width: 140px;
+  }
+}
+
+@media (max-width: 480px) {
+  .grid-view-title {
+    font-size: 1.5rem !important;
+  }
+  
+  .filter-select {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+    min-width: 120px;
+  }
+  
+  .assessment-card {
+    padding: 0.75rem;
+  }
+  
+  .card-footer {
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: stretch;
+  }
+}
+
+/* Scrollbar styling for webkit browsers */
+.column-cards::-webkit-scrollbar {
+  width: 6px;
+}
+
+.column-cards::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.column-cards::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.column-cards::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Dark mode scrollbars */
+.dark .column-cards::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+}
+
+.dark .column-cards::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.dark .column-cards::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

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

@@ -0,0 +1,45 @@
+import renderSvelte from "@/interface/main";
+import AssessmentsOverview from "./AssessmentsOverview.svelte";
+import SkeletonLoader from "./SkeletonLoader.svelte";
+import ErrorState from "./ErrorState.svelte";
+import { unmount } from "svelte";
+
+let currentApp: any = null;
+
+export function renderGrid(container: HTMLElement, data: any) {
+  if (currentApp) {
+    unmount(currentApp);
+  }
+  
+  container.innerHTML = "";
+  container.className = "";
+  
+  currentApp = renderSvelte(AssessmentsOverview, container, { data });
+}
+
+export function renderSkeletonLoader(container: HTMLElement) {
+  if (currentApp) {
+    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);
+  }
+  
+  container.innerHTML = "";
+  container.className = "";
+  
+  currentApp = renderSvelte(ErrorState, container, { error });
+}

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

@@ -0,0 +1,101 @@
+export function formatDate(dateStr: string, submitted?: boolean): string {
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffTime = d.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0 && !submitted) {
+    const overdueDays = Math.abs(diffDays);
+    if (overdueDays === 1) return "1 day overdue";
+    return `${overdueDays} days overdue`;
+  }
+
+  if (diffDays === 0) return "Today";
+
+  if (diffDays === 1) return "Tomorrow";
+
+  if (diffDays <= 7) {
+    const weekdayName = d.toLocaleDateString(undefined, { weekday: "long" });
+
+    return diffDays < 0 ? `Last ${weekdayName}` : weekdayName;
+  }
+
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+  });
+}
+
+export function determineStatus(item: any): string {
+  if (
+    item.status === "MARKS_RELEASED" ||
+    item.grade ||
+    (item.percentage !== undefined && item.percentage !== null) ||
+    (item.achieved !== undefined && item.achieved !== null)
+  ) {
+    return "MARKS_RELEASED";
+  }
+
+  const completedKey = "betterseqta-completed-assessments";
+  const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+  if (completed.includes(item.id)) {
+    return "MARKS_RELEASED";
+  }
+
+  if (item.submitted) {
+    return "SUBMITTED";
+  }
+
+  const now = new Date();
+  const due = new Date(item.due);
+
+  const diffTime = due.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    return "OVERDUE";
+  }
+
+  if (diffDays <= 7) {
+    return "DUE_SOON";
+  }
+
+  return "UPCOMING";
+}
+
+export function getGradeValue(assessment: any): number | null {
+  if (
+    assessment.results?.percentage !== undefined &&
+    assessment.results.percentage !== null
+  ) {
+    return assessment.results.percentage;
+  }
+
+  if (assessment.percentage !== undefined && assessment.percentage !== null) {
+    return assessment.percentage;
+  }
+
+  if (
+    assessment.achieved !== undefined &&
+    assessment.outOf !== undefined &&
+    assessment.achieved !== null &&
+    assessment.outOf !== null &&
+    assessment.outOf > 0
+  ) {
+    return (assessment.achieved / assessment.outOf) * 100;
+  }
+
+  if (
+    assessment.results?.achieved !== undefined &&
+    assessment.results?.outOf !== undefined &&
+    assessment.results.achieved !== null &&
+    assessment.results.outOf !== null &&
+    assessment.results.outOf > 0
+  ) {
+    return (assessment.results.achieved / assessment.results.outOf) * 100;
+  }
+
+  return null;
+}

src/plugins/built-in/backgroundMusic/BackgroundMusicSetting.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import localforage from 'localforage'
+  import { onMount } from 'svelte'
+
+  let fileInput = $state<HTMLInputElement | undefined>(undefined)
+  let dragging = $state(false)
+  let filename = $state<string | undefined>(undefined)
+  let durationText = $state<string | undefined>(undefined)
+
+  const store = localforage.createInstance({
+    name: 'background-music-store',
+    storeName: 'music',
+  })
+
+  async function loadExisting() {
+    const name = await store.getItem<string>('audio-name')
+    filename = name ?? undefined
+  }
+
+  onMount(() => { loadExisting() })
+
+  function triggerSelect() { fileInput?.click() }
+
+  async function handleFiles(files: FileList | null) {
+    const file = files?.[0]
+    if (!file) return
+    // Accept WAV and MP3 files
+    const isSupported = file.type === 'audio/wav' || file.type === 'audio/mpeg' || 
+                       file.name.toLowerCase().endsWith('.wav') || file.name.toLowerCase().endsWith('.mp3')
+    if (!isSupported) {
+      alert('Please select a .wav or .mp3 audio file')
+      return
+    }
+
+    await store.setItem('audio-blob', file)
+    await store.setItem('audio-name', file.name)
+    filename = file.name
+
+    // Probe duration
+    try {
+      const url = URL.createObjectURL(file)
+      const audio = new Audio(url)
+      await new Promise<void>((resolve, reject) => {
+        audio.onloadedmetadata = () => resolve()
+        audio.onerror = () => reject()
+      })
+      if (!isNaN(audio.duration) && audio.duration !== Infinity) {
+        const minutes = Math.floor(audio.duration / 60)
+        const seconds = Math.round(audio.duration % 60)
+        durationText = `${minutes}:${seconds.toString().padStart(2, '0')}`
+      } else {
+        durationText = undefined
+      }
+      URL.revokeObjectURL(url)
+    } catch {
+      durationText = undefined
+    }
+
+    window.dispatchEvent(new Event('betterseqta-background-music-updated'))
+  }
+
+  function onFileChange() { handleFiles(fileInput?.files || null) }
+
+  function onDrop(event: DragEvent) {
+    event.preventDefault()
+    dragging = false
+    handleFiles(event.dataTransfer?.files || null)
+  }
+
+  async function removeAudio() {
+    await store.removeItem('audio-blob')
+    await store.removeItem('audio-name')
+    filename = undefined
+    durationText = undefined
+    window.dispatchEvent(new Event('betterseqta-background-music-stop'))
+  }
+</script>
+
+<div
+  class="relative cursor-pointer select-none"
+  onclick={() => triggerSelect()}
+  ondragover={(e) => { e.stopPropagation(); dragging = true }}
+  ondragleave={() => dragging = false}
+  ondrop={onDrop}
+  onkeydown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerSelect()
+    }
+  }}
+  role="button"
+  tabindex="0"
+>
+  <div class="flex gap-3 items-center">
+    {#if filename}
+      <div class="flex items-center px-3 py-1 rounded-lg bg-zinc-200 dark:bg-zinc-800">
+        <div class="text-xs text-zinc-600 dark:text-zinc-300">
+          {filename}
+          <p>{durationText}</p>
+        </div>
+        <button
+          class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
+          onclick={(e) => { e.stopPropagation(); removeAudio() }}
+          aria-label="Remove audio"
+        >&#215;</button>
+      </div>
+    {:else}
+      <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 text-nowrap">
+        <span class="text-lg font-IconFamily">{'\ued47'}</span>
+        <span>Upload audio</span>
+      </div>
+    {/if}
+  </div>
+  <input type="file" accept="audio/wav,audio/mpeg" class="hidden" bind:this={fileInput} onchange={onFileChange} />
+  {#if dragging}
+    <div class="absolute inset-0 rounded-lg bg-zinc-200/40 dark:bg-zinc-700/40"></div>
+  {/if}
+</div>
+
+

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

@@ -0,0 +1,187 @@
+import type { Plugin } from "@/plugins/core/types";
+import { booleanSetting, componentSetting, defineSettings, numberSetting } from "@/plugins/core/settingsHelpers";
+import styles from "./styles.css?inline";
+import BackgroundMusicSetting from "./BackgroundMusicSetting.svelte";
+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.",
+    component: BackgroundMusicSetting,
+  }),
+  volume: numberSetting({
+    title: "Volume",
+    description: "Set background music volume",
+    default: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.05,
+  }),
+  pauseOnHidden: booleanSetting({
+    title: "Pause when tab hidden",
+    description: "Pause music when switching to another tab or minimizing the browser",
+    default: true,
+  }),
+});
+
+const store = localforage.createInstance({
+  name: "background-music-store",
+  storeName: "music",
+});
+
+let currentAudio: HTMLAudioElement | null = null;
+let currentObjectUrl: string | null = null;
+let cleanupRegistered = false;
+let pendingGestureCancel: (() => void) | null = null;
+let visibilityResumeTimeout: number | null = null;
+
+async function loadAudioBlob(): Promise<Blob | null> {
+  const blob = await store.getItem<Blob>("audio-blob");
+  return blob && blob instanceof Blob ? blob : null;
+}
+
+function stopAndCleanupAudio(): void {
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio.src = "";
+    currentAudio.remove();
+    currentAudio = null;
+  }
+  if (currentObjectUrl) {
+    URL.revokeObjectURL(currentObjectUrl);
+    currentObjectUrl = null;
+  }
+}
+
+function ensureGestureStart(handler: () => void): () => void {
+  const eventTypes = ["pointerdown", "keydown", "touchstart"]; // broad user gesture coverage
+  const listener = () => {
+    handler();
+    for (const type of eventTypes) {
+      window.removeEventListener(type, listener);
+    }
+  };
+  for (const type of eventTypes) {
+    window.addEventListener(type, listener, { once: true, passive: true });
+  }
+  return () => {
+    for (const type of eventTypes) {
+      window.removeEventListener(type, listener);
+    }
+  };
+}
+
+async function startPlayback(volume: number): Promise<void> {
+  const blob = await loadAudioBlob();
+  if (!blob) return;
+
+  stopAndCleanupAudio();
+
+  currentObjectUrl = URL.createObjectURL(blob);
+  const audio = new Audio(currentObjectUrl);
+  audio.loop = true;
+  audio.volume = Math.max(0, Math.min(1, volume));
+  audio.preload = "auto";
+  audio.crossOrigin = "anonymous";
+  audio.style.display = "none";
+  document.body.appendChild(audio);
+  currentAudio = audio;
+
+  try {
+    // Attempt immediate play; may be blocked until gesture
+    await audio.play();
+  } catch {
+    // Ignore; will be started after gesture if enabled
+  }
+}
+
+const backgroundMusicPlugin: Plugin<typeof settings> = {
+  id: "background-music",
+  name: "Background Music",
+  description: "Play your own music in the background while SEQTA is open.",
+  version: "1.0.0",
+  settings,
+  styles,
+  disableToggle: true,
+  defaultEnabled: false,
+
+  run: async (api) => {
+    await api.storage.loaded;
+
+    // react to specific setting changes
+    api.settings.onChange("volume" as any, (value: any) => {
+      const vol = (typeof value === "number" ? value : 0.5) as number;
+      if (currentAudio) currentAudio.volume = Math.max(0, Math.min(1, vol));
+    });
+
+    api.settings.onChange("pauseOnHidden" as any, (value: any) => {
+      const pauseOnHidden = (typeof value === "boolean" ? value : true) as boolean;
+      // If the setting is disabled and audio is currently paused due to tab being hidden, resume it
+      if (!pauseOnHidden && currentAudio && currentAudio.paused && document.visibilityState === "hidden") {
+        currentAudio.play().catch(() => {});
+      }
+    });
+
+    // Note: Stop button/event removed by user; no stop handling needed
+
+    // Start if we have audio and autoplay is enabled
+    const tryStart = async () => {
+      const vol = (api.settings as any).volume ?? 0.5;
+      await startPlayback(vol);
+    };
+
+    // Always arm gesture start and attempt immediate start
+    const cancel = ensureGestureStart(() => { tryStart(); });
+    cleanupRegistered = true;
+    (window as any).__betterseqta_bg_music_cancel__ = cancel;
+    tryStart();
+
+    // Pause on tab hide, resume on show with a small delay (if enabled)
+    const visHandler = () => {
+      if (!currentAudio) return;
+      const pauseOnHidden = (api.settings as any).pauseOnHidden ?? true;
+      if (!pauseOnHidden) return;
+      
+      if (document.visibilityState === "hidden") {
+        if (visibilityResumeTimeout !== null) {
+          clearTimeout(visibilityResumeTimeout);
+          visibilityResumeTimeout = null;
+        }
+        currentAudio.pause();
+      } else if (document.visibilityState === "visible") {
+        if (visibilityResumeTimeout !== null) {
+          clearTimeout(visibilityResumeTimeout);
+        }
+        visibilityResumeTimeout = window.setTimeout(() => {
+          visibilityResumeTimeout = null;
+          currentAudio?.play().catch(() => {});
+        }, 200);
+      }
+    };
+    document.addEventListener("visibilitychange", visHandler);
+
+    // Allow uploads to trigger refresh
+    const uploadedHandler = () => {
+      const vol = (api.settings as any).volume ?? 0.5;
+      startPlayback(vol);
+    };
+    window.addEventListener("betterseqta-background-music-updated", uploadedHandler);
+
+    return () => {
+      document.removeEventListener("visibilitychange", visHandler);
+      window.removeEventListener("betterseqta-background-music-updated", uploadedHandler);
+      if (cleanupRegistered && (window as any).__betterseqta_bg_music_cancel__) {
+        (window as any).__betterseqta_bg_music_cancel__();
+        (window as any).__betterseqta_bg_music_cancel__ = undefined;
+      }
+      if (pendingGestureCancel) { pendingGestureCancel(); pendingGestureCancel = null; }
+      if (visibilityResumeTimeout !== null) { clearTimeout(visibilityResumeTimeout); visibilityResumeTimeout = null; }
+      stopAndCleanupAudio();
+    };
+  },
+};
+
+export default backgroundMusicPlugin;
+
+

src/plugins/built-in/backgroundMusic/styles.css

@@ -0,0 +1,2 @@
+.background-music-hidden{display:none}
+

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

@@ -0,0 +1,128 @@
+import { defineLazyPlugin } from "../../core/dynamicLoader";
+import {
+  booleanSetting,
+  buttonSetting,
+  defineSettings,
+  hotkeySetting,
+} from "../../core/settingsHelpers";
+import styles from "./src/core/styles.css?inline";
+
+// Platform-aware default hotkey
+const getDefaultHotkey = () => {
+  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  return isMac ? "cmd+k" : "ctrl+k";
+};
+
+const settings = defineSettings({
+  searchHotkey: hotkeySetting({
+    default: getDefaultHotkey(),
+    title: "Search Hotkey",
+    description: "Keyboard shortcut to open the search",
+  }),
+  showRecentFirst: booleanSetting({
+    default: true,
+    title: "Show Recent First",
+    description: "Sort dynamic content by most recent first",
+  }),
+  transparencyEffects: booleanSetting({
+    default: true,
+    title: "Transparency Effects",
+    description: "Enable transparency effects for the search bar",
+  }),
+  runIndexingOnLoad: booleanSetting({
+    default: true,
+    title: "Index on Page Load",
+    description: "Run content indexing when SEQTA loads",
+  }),
+  resetIndex: buttonSetting({
+    title: "Reset Index",
+    description: "Reset the search index and storage",
+    trigger: async () => {
+      const confirmed = confirm("Are you sure you want to reset the search index and storage?");
+
+      if (confirmed) {
+        try {
+          // Dynamically import modules to avoid loading heavy dependencies
+          const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
+          const { resetDatabase } = await import("./src/indexing/db");
+          
+          // Reset vector worker first
+          try {
+            const workerManager = VectorWorkerManager.getInstance();
+            await workerManager.resetWorker();
+            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();
+            console.log("betterseqta-index database closed and reset");
+          } catch (e) {
+            console.warn("Failed to reset betterseqta-index database:", e);
+          }
+
+          // Wait a bit for connections to fully close
+          await new Promise(resolve => setTimeout(resolve, 100));
+
+          // Delete embeddiaDB (vector search database)
+          const deleteDb = (dbName: string) => {
+            return new Promise<void>((resolve, reject) => {
+              const req = indexedDB.deleteDatabase(dbName);
+              req.onsuccess = () => {
+                console.log(`Successfully deleted database: ${dbName}`);
+                resolve();
+              };
+              req.onerror = () => {
+                console.error(`Error deleting database ${dbName}:`, req.error);
+                reject(req.error);
+              };
+              req.onblocked = () => {
+                console.warn(`Database ${dbName} deletion blocked - connections still open`);
+                // Wait and retry once
+                setTimeout(() => {
+                  const retryReq = indexedDB.deleteDatabase(dbName);
+                  retryReq.onsuccess = () => {
+                    console.log(`Successfully deleted database on retry: ${dbName}`);
+                    resolve();
+                  };
+                  retryReq.onerror = () => reject(retryReq.error);
+                  retryReq.onblocked = () => {
+                    reject(new Error(`One database is open, failed to remove: ${dbName}. Please close other tabs and try again.`));
+                  };
+                }, 500);
+              };
+            });
+          };
+          
+          try {
+            await deleteDb("embeddiaDB");
+            await deleteDb("betterseqta-index");
+            alert("Search index and storage have been reset successfully.");
+          } catch (e) {
+            alert("Failed to reset one or more databases: " + String(e) + "\n\nTry closing other browser tabs and try again.");
+          }
+        } catch (e) {
+          alert("Failed to reset index: " + String(e));
+        }
+      }
+    },
+  }),
+});
+
+// Create the lazy plugin definition - this loads immediately but doesn't import heavy dependencies
+export default defineLazyPlugin({
+  id: "global-search",
+  name: "Global Search",
+  description: "Quick search for everything in SEQTA",
+  version: "1.0.0",
+  settings,
+  disableToggle: true,
+  defaultEnabled: false,
+  beta: true,
+  styles: styles,
+  
+  // Lazy loader - only imports the heavy plugin when actually needed
+  loader: () => import("./src/core/index")
+});

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

@@ -24,7 +24,6 @@
     searchHotkey: string
   }>();
 
-  // Make searchHotkey reactive to setting changes
   let currentSearchHotkey = $state(initialSearchHotkey);
 
   let commandsFuse = $state<Fuse<StaticCommandItem>>();
@@ -36,6 +35,8 @@
   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('');
@@ -111,10 +112,12 @@
 
   onMount(() => {
     const progressHandler = (event: CustomEvent) => {
-      const { completed, total, indexing } = event.detail;
+      const { completed, total, indexing, status, detail } = event.detail;
       completedJobs = completed;
       totalJobs = total;
       isIndexing = indexing;
+      indexingStatus = status || null;
+      indexingDetail = detail || null;
     };
 
     window.addEventListener('indexing-progress', progressHandler as EventListener);
@@ -169,6 +172,9 @@
         term, 
         commandsFuse, 
         commandIdToItemMap,
+        dynamicContentFuse,
+        dynamicIdToItemMap,
+        true, // sortByRecent
       );
     } else {
       combinedResults = [];
@@ -177,13 +183,19 @@
     isLoading = false;
   };
 
-  const debouncedPerformSearch = debounce(performSearch, 10);
+  // Optimized debounce: shorter delay for better responsiveness
+  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()); 
@@ -390,19 +402,6 @@
                 {@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>

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

@@ -4,8 +4,8 @@ import {
   booleanSetting,
   buttonSetting,
   defineSettings,
-  Setting,
   hotkeySetting,
+  Setting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import { waitForElm } from "@/seqta/utils/waitForElm";
@@ -14,6 +14,7 @@ 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";
 
 // Platform-aware default hotkey
 const getDefaultHotkey = () => {
@@ -50,7 +51,11 @@ const settings = defineSettings({
 
       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();
             await workerManager.resetWorker();
             console.log("Vector worker reset successfully");
@@ -58,23 +63,55 @@ const settings = defineSettings({
             console.warn("Failed to reset vector worker:", e);
           }
 
-        // Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
+          // 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 = () => resolve();
-            req.onerror = () => reject(req.error);
+              req.onsuccess = () => {
+                console.log(`Successfully deleted database: ${dbName}`);
+                resolve();
+              };
+              req.onerror = () => {
+                console.error(`Error deleting database ${dbName}:`, req.error);
+                reject(req.error);
+              };
               req.onblocked = () => {
-              reject(new Error(`One database is open, failed to remove: ${dbName}`));
+                console.warn(`Database ${dbName} deletion blocked - connections still open`);
+                // Wait and retry once
+                setTimeout(() => {
+                  const retryReq = indexedDB.deleteDatabase(dbName);
+                  retryReq.onsuccess = () => {
+                    console.log(`Successfully deleted database on retry: ${dbName}`);
+                    resolve();
+                  };
+                  retryReq.onerror = () => reject(retryReq.error);
+                  retryReq.onblocked = () => {
+                    reject(new Error(`One database is open, failed to remove: ${dbName}. Please close other tabs and try again.`));
+                  };
+                }, 500);
               };
             });
           };
+          
           try {
             await deleteDb("embeddiaDB");
             await deleteDb("betterseqta-index");
-          alert("Search index and storage have been reset.");
+            alert("Search index and storage have been reset successfully.");
           } catch (e) {
-          alert("Failed to reset one or more databases: " + String(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));
         }
       }
     },
@@ -114,6 +151,27 @@ const globalSearchPlugin: Plugin<typeof settings> = {
   run: async (api) => {
     const appRef = { current: null };
 
+    // Check for extension updates and clear caches if needed
+    // Use a timeout to avoid blocking initialization
+    setTimeout(async () => {
+      try {
+        const wasUpdated = await checkAndHandleUpdate();
+        if (wasUpdated) {
+          console.log("[Global Search] Extension updated - caches cleared");
+        }
+      } catch (error: any) {
+        // Handle CSS preload errors and other failures gracefully
+        // These can happen in Firefox or when assets aren't available
+        if (error?.message?.includes("preload CSS") || 
+            error?.message?.includes("MIME type") || 
+            error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")) {
+          console.debug("[Global Search] Version check skipped due to asset loading restrictions:", error.message);
+        } else {
+          console.warn("[Global Search] Failed to check for updates:", error);
+        }
+      }
+    }, 100);
+
     try {
       await IndexedDbManager.create("embeddiaDB", "embeddiaObjectStore", {
         primaryKey: "id",
@@ -126,6 +184,21 @@ const globalSearchPlugin: Plugin<typeof settings> = {
 
     initVectorSearch();
 
+    // Warm up vector worker in background to improve initial response time (skip in Firefox)
+    setTimeout(async () => {
+      try {
+        // Only initialize worker if vector search is supported
+        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);
+      }
+    }, 1000);
+
     // Add debug helpers to window for troubleshooting
     // @ts-ignore
     window.globalSearchDebug = {

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

@@ -8,7 +8,7 @@ import browser from "webextension-polyfill";
 export function mountSearchBar(
   titleElement: Element,
   api: any,
-  appRef: { current: any },
+  appRef: { current: any; storageChangeHandler?: any; progressHandler?: any },
 ) {
   if (titleElement.querySelector(".search-trigger")) {
     return;
@@ -21,6 +21,72 @@ export function mountSearchBar(
   const searchButton = document.createElement("div");
   searchButton.className = "search-trigger";
   
+  // Create progress indicator container
+  const progressContainer = document.createElement("div");
+  progressContainer.className = "search-progress-container";
+  progressContainer.style.cssText = "display: flex; align-items: center; gap: 8px; margin-left: 8px; min-width: 120px;";
+  
+  // Create progress bar
+  const progressBarWrapper = document.createElement("div");
+  progressBarWrapper.className = "search-progress-bar-wrapper";
+  progressBarWrapper.style.cssText = "flex: 1; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; display: none;";
+  
+  const progressBar = document.createElement("div");
+  progressBar.className = "search-progress-bar";
+  progressBar.style.cssText = "height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6); transition: width 0.3s ease-out; width: 0%; position: relative;";
+  
+  // Add shimmer effect
+  const shimmer = document.createElement("div");
+  shimmer.style.cssText = "position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite;";
+  progressBar.appendChild(shimmer);
+  progressBarWrapper.appendChild(progressBar);
+  
+  // Create progress text
+  const progressText = document.createElement("span");
+  progressText.className = "search-progress-text";
+  progressText.style.cssText = "font-size: 11px; color: #666; white-space: nowrap; display: none;";
+  
+  progressContainer.appendChild(progressBarWrapper);
+  progressContainer.appendChild(progressText);
+  
+  // Indexing state
+  let isIndexing = false;
+  let completedJobs = 0;
+  let totalJobs = 0;
+  let indexingStatus: string | null = null;
+  
+  const updateProgressDisplay = () => {
+    if (isIndexing && totalJobs > 0) {
+      const percentage = Math.round((completedJobs / totalJobs) * 100);
+      progressBar.style.width = `${Math.max(2, percentage)}%`;
+      progressBarWrapper.style.display = "block";
+      
+      if (indexingStatus) {
+        progressText.textContent = indexingStatus.length > 20 ? indexingStatus.substring(0, 20) + "..." : indexingStatus;
+        progressText.style.display = "block";
+      } else {
+        progressText.textContent = `${completedJobs}/${totalJobs} (${percentage}%)`;
+        progressText.style.display = "block";
+      }
+    } else {
+      progressBarWrapper.style.display = "none";
+      progressText.style.display = "none";
+    }
+  };
+  
+  // Listen for indexing progress events
+  const progressHandler = (event: CustomEvent) => {
+    const { completed, total, indexing, status } = event.detail;
+    completedJobs = completed || 0;
+    totalJobs = total || 0;
+    isIndexing = indexing || false;
+    indexingStatus = status || null;
+    updateProgressDisplay();
+  };
+  
+  window.addEventListener('indexing-progress', progressHandler as EventListener);
+  appRef.progressHandler = progressHandler;
+  
   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">
@@ -34,6 +100,7 @@ export function mountSearchBar(
 
   updateSearchButtonDisplay();
   titleElement.appendChild(searchButton);
+  titleElement.appendChild(progressContainer);
 
   // Listen for hotkey setting changes
   const handleStorageChange = (changes: any, area: string) => {
@@ -49,6 +116,9 @@ export function mountSearchBar(
 
   browser.storage.onChanged.addListener(handleStorageChange);
 
+  // Store reference to cleanup function for proper removal
+  appRef.storageChangeHandler = handleStorageChange;
+
   const searchRoot = document.createElement("div");
   document.body.appendChild(searchRoot);
   const searchRootShadow = searchRoot.attachShadow({ mode: "open" });
@@ -69,7 +139,7 @@ export function mountSearchBar(
   }
 }
 
-export function cleanupSearchBar(appRef: { current: any }) {
+export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any; progressHandler?: any }) {
   if (appRef.current) {
     try {
       unmount(appRef.current);
@@ -79,12 +149,24 @@ export function cleanupSearchBar(appRef: { current: any }) {
     }
   }
 
+  // Remove progress event listener
+  if (appRef.progressHandler) {
+    window.removeEventListener('indexing-progress', appRef.progressHandler as EventListener);
+    appRef.progressHandler = null;
+  }
+
   // Remove search trigger button
   const searchTrigger = document.querySelector(".search-trigger");
   if (searchTrigger) {
     searchTrigger.remove();
   }
   
+  // Remove progress container
+  const progressContainer = document.querySelector(".search-progress-container");
+  if (progressContainer) {
+    progressContainer.remove();
+  }
+
   // Remove search root
   const searchRoot = document.querySelector("div[data-search-root]");
   if (searchRoot) {
@@ -94,6 +176,8 @@ export function cleanupSearchBar(appRef: { current: any }) {
   // Clean up vector worker
   VectorWorkerManager.getInstance().terminate();
 
-  // Remove storage listener
-  browser.storage.onChanged.removeListener(() => {});
+  if (appRef.storageChangeHandler) {
+    browser.storage.onChanged.removeListener(appRef.storageChangeHandler);
+    appRef.storageChangeHandler = null;
+  }
 }

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

@@ -69,3 +69,71 @@
 .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;
+}
+
+/* Progress indicator next to search trigger */
+.search-progress-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+  min-width: 120px;
+  max-width: 200px;
+  height: 32px;
+}
+
+.search-progress-bar-wrapper {
+  flex: 1;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+  display: none;
+  min-width: 60px;
+}
+
+.dark .search-progress-bar-wrapper {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.search-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6);
+  transition: width 0.3s ease-out;
+  width: 0%;
+  position: relative;
+  border-radius: 2px;
+}
+
+.search-progress-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 2s infinite;
+  border-radius: 2px;
+}
+
+.search-progress-text {
+  font-size: 11px;
+  color: #666;
+  white-space: nowrap;
+  display: none;
+  font-weight: 500;
+}
+
+.dark .search-progress-text {
+  color: #999;
+}

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

@@ -59,17 +59,132 @@ export const actionMap: Record<string, ActionHandler<any>> = {
   }) as ActionHandler<any>,
 
   assessment: (async (item: IndexItem & { metadata: AssessmentMetadata }) => {
-    if (item.metadata.isMessageBased) {
+    // Deep clone the entire item to avoid Firefox XrayWrapper issues
+    // 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
+    const getMetadataValue = (key: string, altKey?: string): any => {
+      try {
+        // Try direct access first
+        const value = metadata[key];
+        if (value !== undefined && value !== null) {
+          return value;
+        }
+        if (altKey) {
+          const altValue = metadata[altKey];
+          if (altValue !== undefined && altValue !== null) {
+            return altValue;
+          }
+        }
+        // Try accessing via Object.keys iteration (works around XrayWrapper)
+        try {
+          const keys = Object.keys(metadata);
+          for (const k of keys) {
+            if (k === key || k === altKey) {
+              const val = metadata[k];
+              if (val !== undefined && val !== null) {
+                return val;
+              }
+            }
+          }
+        } catch (e) {
+          // 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([item.metadata.messageId]),
+        selected: new Set([getMetadataValue('messageId')]),
       });
     } else {
-      window.location.hash = `#?page=/assessments&id=${item.metadata.assessmentId}`;
+      // Extract values - check both camelCase and PascalCase, and try multiple access methods
+      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>,
 

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

@@ -3,19 +3,22 @@ const META_STORE = "meta";
 const VERSION_KEY = "betterseqta-index-version";
 
 let dbPromise: Promise<IDBDatabase> | null = null;
+let cachedDb: IDBDatabase | null = null;
 
-// Get the current version from localStorage or start at 1
 function getCurrentVersion(): number {
   const storedVersion = localStorage.getItem(VERSION_KEY);
   return storedVersion ? parseInt(storedVersion, 10) : 1;
 }
 
-// Update the version in localStorage
 function updateVersion(version: number) {
   localStorage.setItem(VERSION_KEY, version.toString());
 }
 
 function openDB(): Promise<IDBDatabase> {
+  if (cachedDb && cachedDb.version >= getCurrentVersion()) {
+    return Promise.resolve(cachedDb);
+  }
+
   if (dbPromise) return dbPromise;
 
   const currentVersion = getCurrentVersion();
@@ -26,8 +29,11 @@ function openDB(): Promise<IDBDatabase> {
     try {
       request = indexedDB.open(DB_NAME, currentVersion);
     } catch (e) {
-      // If there's a version error, try to delete the database and start fresh
       console.warn("Database version conflict, recreating database...");
+      if (cachedDb) {
+        cachedDb.close();
+        cachedDb = null;
+      }
       indexedDB.deleteDatabase(DB_NAME);
       localStorage.removeItem(VERSION_KEY);
       request = indexedDB.open(DB_NAME, 1);
@@ -38,22 +44,37 @@ function openDB(): Promise<IDBDatabase> {
       const db = request.result;
       const existingStores = Array.from(db.objectStoreNames);
 
-      // Always ensure META_STORE exists
       if (!existingStores.includes(META_STORE)) {
         db.createObjectStore(META_STORE);
       }
 
-      // Update version in localStorage to match the database
       updateVersion(event.newVersion || 1);
     };
 
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => {
+      if (cachedDb && cachedDb !== request.result) {
+        cachedDb.close();
+      }
+      cachedDb = request.result;
+
+      cachedDb.onclose = () => {
+        cachedDb = null;
+        dbPromise = null;
+      };
+
+      resolve(request.result);
+    };
 
     request.onerror = () => {
       console.error("Error opening database:", request.error);
-      // If there's an error, try to recover by deleting and recreating
+
+      if (cachedDb) {
+        cachedDb.close();
+        cachedDb = null;
+      }
       indexedDB.deleteDatabase(DB_NAME);
       localStorage.removeItem(VERSION_KEY);
+      dbPromise = null;
       reject(request.error);
     };
   });
@@ -64,11 +85,12 @@ function openDB(): Promise<IDBDatabase> {
 async function getStore(store: string, mode: IDBTransactionMode = "readonly") {
   const db = await openDB();
 
-  // Create store dynamically if needed
   if (!db.objectStoreNames.contains(store)) {
-    db.close();
     await upgradeDB(store);
-    return getStore(store, mode);
+
+    const upgradedDb = await openDB();
+    const tx = upgradedDb.transaction(store, mode);
+    return tx.objectStore(store);
   }
 
   const tx = db.transaction(store, mode);
@@ -80,11 +102,11 @@ function upgradeDB(newStore: string): Promise<void> {
     const currentVersion = getCurrentVersion();
     const newVersion = currentVersion + 1;
 
-    // Close any existing connections
-    if (dbPromise) {
-      dbPromise.then((db) => db.close());
-      dbPromise = null;
+    if (cachedDb) {
+      cachedDb.close();
+      cachedDb = null;
     }
+    dbPromise = null;
 
     const request = indexedDB.open(DB_NAME, newVersion);
 
@@ -93,11 +115,18 @@ function upgradeDB(newStore: string): Promise<void> {
       if (!db.objectStoreNames.contains(newStore)) {
         db.createObjectStore(newStore);
       }
-      // Update version in localStorage
+
       updateVersion(event.newVersion || newVersion);
     };
 
     request.onsuccess = () => {
+      cachedDb = request.result;
+
+      cachedDb.onclose = () => {
+        cachedDb = null;
+        dbPromise = null;
+      };
+
       dbPromise = Promise.resolve(request.result);
       resolve();
     };
@@ -183,20 +212,55 @@ export async function clear(store: string): Promise<void> {
   }
 }
 
-// Helper function to reset the database if needed
 export async function resetDatabase(): Promise<void> {
+  // Close cached database connection
+  if (cachedDb) {
+    try {
+      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) {
+      // 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 = () => reject(req.error);
+    req.onerror = () => {
+      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);
+    };
   });
 }

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

@@ -1,9 +1,10 @@
-import { clear, getAll, get, put, remove } from "./db";
+import { clear, get, getAll, 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";
 
 const META_STORE = "meta";
 const LOCK_KEY = "bsq-indexer-lock";
@@ -276,19 +277,28 @@ export async function runIndexing(): Promise<void> {
     );
   }
 
-  if (!hasStreamingJobs) {
-    const allItemsInPrimaryStores = await loadAllStoredItems();
+  let allItemsInPrimaryStores = await loadAllStoredItems();
 
   if (allItemsInPrimaryStores.length > 0) {
     console.debug(
-        `%c[Indexer] Sending ${allItemsInPrimaryStores.length} items from primary stores to worker for vectorization check...`,
+      `%c[Indexer] Checking ${allItemsInPrimaryStores.length} items for vectorization...`,
       "color: #4ea1ff",
     );
-      dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization of stored items");
+    
+    // Pre-filter items to avoid initializing worker if nothing new
+    const vectorizedItemIds = await getVectorizedItemIds();
+    const newItemsToVectorize = allItemsInPrimaryStores.filter(item => !vectorizedItemIds.has(item.id));
+    
+    if (newItemsToVectorize.length > 0) {
+      console.debug(
+        `%c[Indexer] Sending ${newItemsToVectorize.length} new items to worker for vectorization (${allItemsInPrimaryStores.length - newItemsToVectorize.length} already vectorized)`,
+        "color: #4ea1ff",
+      );
+      dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization of new items");
 
       try {
         const workerManager = VectorWorkerManager.getInstance();
-        await workerManager.processItems(allItemsInPrimaryStores, (progress) => {
+        await workerManager.processItems(newItemsToVectorize, (progress) => {
         let detailMessage = progress.message || "";
         if (
           progress.status === "processing" &&
@@ -356,6 +366,19 @@ export async function runIndexing(): Promise<void> {
         String(error),
       );
     }
+    } else {
+      console.debug(
+        `%c[Indexer] All ${allItemsInPrimaryStores.length} items are already vectorized, skipping worker initialization.`,
+        "color: gray",
+      );
+      completedJobs++;
+      dispatchProgress(
+        completedJobs,
+        totalSteps,
+        false,
+        "Indexing finished (all items already vectorized)",
+      );
+    }
   } else {
     console.debug(
       "%c[Indexer] No items found in primary stores to send for vectorization.",
@@ -369,35 +392,38 @@ export async function runIndexing(): Promise<void> {
       "Indexing finished (no items for vectorization)",
     );
   }
-  } else {
-    console.debug(
-      "%c[Indexer] Skipping bulk vectorization - streaming jobs will handle vectorization",
-      "color: #4ea1ff",
-    );
-    completedJobs++;
-    dispatchProgress(
-      completedJobs,
-      totalSteps,
-      false,
-      "Indexing finished (streaming vectorization active)",
-    );
-  }
 
   stopHeartbeat();
 
-  const allItemsInPrimaryStores = await loadAllStoredItems();
-  allItemsInPrimaryStores.forEach(item => {
+  allItemsInPrimaryStores = await loadAllStoredItems();
+  // Create new objects to avoid XrayWrapper issues in Firefox
+  const itemsWithComponents = allItemsInPrimaryStores.map(item => {
+    try {
       const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+      let renderComponent = item.renderComponent;
       if (jobDef) {
-        const renderComponent = renderComponentMap[jobDef.renderComponentId];
-        if (renderComponent) {
-          item.renderComponent = renderComponent;
-        }
+        renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
       } else if (renderComponentMap[item.renderComponentId]) {
-        item.renderComponent = renderComponentMap[item.renderComponentId];
+        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(allItemsInPrimaryStores);
+  loadDynamicItems(itemsWithComponents);
   window.dispatchEvent(new Event("dynamic-items-updated"));
 }
 

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

@@ -3,10 +3,12 @@ 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";
 
 export const jobs: Record<string, Job> = {
   messages: messagesJob,
   notifications: notificationsJob,
   forums: forumsJob,
   subjects: subjectsJob,
+  assignments: assignmentsJob,
 };

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

@@ -0,0 +1,369 @@
+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;
+    });
+  },
+};
+

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

@@ -1,4 +1,4 @@
-import type { Job, IndexItem } from "../types";
+import type { IndexItem, Job } from "../types";
 
 const fetchForums = async () => {
   const res = await fetch(`${location.origin}/seqta/student/load/forums`, {

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

@@ -1,4 +1,4 @@
-import type { Job, IndexItem } from "../types";
+import type { IndexItem, Job } from "../types";
 import { htmlToPlainText } from "../utils";
 import { delay } from "@/seqta/utils/delay";
 import { VectorWorkerManager } from "../worker/vectorWorkerManager";
@@ -8,18 +8,20 @@ import { renderComponentMap } from "../renderComponents";
 import { jobs } from "../jobs";
 
 const RATE_LIMIT_CONFIG = {
-  minDelay: 50,
-  maxDelay: 5000,
-  baseDelay: 200,
-  backoffMultiplier: 1.5,
+  minDelay: 30,
+  maxDelay: 3000,
+  baseDelay: 150,
+  backoffMultiplier: 1.3,
   maxRetries: 3,
   adaptiveBatchSize: true,
-  minBatchSize: 10,
-  maxBatchSize: 100,
-  baseBatchSize: 50,
-  vectorBatchSize: 5,
-  parallelRequests: 5,
-  parallelDelay: 100,
+  minBatchSize: 15,
+  maxBatchSize: 150,
+  baseBatchSize: 75,
+  vectorBatchSize: 10,
+  parallelRequests: 8,
+  parallelDelay: 50,
+  circuitBreakerThreshold: 5,
+  circuitBreakerResetTime: 30000,
 };
 
 interface MessagesProgress {
@@ -33,6 +35,9 @@ interface MessagesProgress {
   processedIds: string[];
   streamingStarted: boolean;
   totalEstimated: number;
+  circuitBreakerOpen: boolean;
+  circuitBreakerOpenTime: number;
+  consecutiveFailures: number;
 }
 
 const fetchMessages = async (offset = 0, limit = 100) => {
@@ -99,50 +104,38 @@ function calculateAdaptiveDelay(
   progress: MessagesProgress,
   responseTime: number,
 ): number {
-  const { currentDelay, failedRequests, lastSuccessTime } = progress;
+  const {
+    currentDelay,
+    failedRequests,
+    lastSuccessTime,
+    circuitBreakerOpen,
+    consecutiveFailures,
+  } = progress;
   const timeSinceLastSuccess = Date.now() - lastSuccessTime;
 
-  if (failedRequests > 0 || responseTime > 2000) {
+  if (circuitBreakerOpen) {
+    return RATE_LIMIT_CONFIG.maxDelay;
+  }
+
+  if (consecutiveFailures > 2 || failedRequests > 3 || responseTime > 3000) {
     return Math.min(
-      currentDelay * RATE_LIMIT_CONFIG.backoffMultiplier,
+      currentDelay *
+        (RATE_LIMIT_CONFIG.backoffMultiplier + consecutiveFailures * 0.2),
       RATE_LIMIT_CONFIG.maxDelay,
     );
   }
 
-  if (responseTime < 500 && timeSinceLastSuccess > 10000) {
-    return Math.max(currentDelay * 0.8, RATE_LIMIT_CONFIG.minDelay);
+  if (
+    responseTime < 300 &&
+    timeSinceLastSuccess > 5000 &&
+    consecutiveFailures === 0
+  ) {
+    return Math.max(currentDelay * 0.7, RATE_LIMIT_CONFIG.minDelay);
   }
 
   return currentDelay;
 }
 
-function calculateAdaptiveBatchSize(
-  progress: MessagesProgress,
-  responseTime: number,
-): number {
-  if (!RATE_LIMIT_CONFIG.adaptiveBatchSize) {
-    return progress.currentBatchSize;
-  }
-
-  const { currentBatchSize, failedRequests } = progress;
-
-  if (failedRequests > 2 || responseTime > 3000) {
-    return Math.max(
-      Math.floor(currentBatchSize * 0.7),
-      RATE_LIMIT_CONFIG.minBatchSize,
-    );
-  }
-
-  if (failedRequests === 0 && responseTime < 1000) {
-    return Math.min(
-      Math.floor(currentBatchSize * 1.2),
-      RATE_LIMIT_CONFIG.maxBatchSize,
-    );
-  }
-
-  return currentBatchSize;
-}
-
 async function estimateMessageCount(): Promise<number> {
   try {
     const firstBatch = await fetchMessages(0, 100);
@@ -157,6 +150,73 @@ async function estimateMessageCount(): Promise<number> {
   }
 }
 
+function calculateAdaptiveBatchSize(
+  progress: MessagesProgress,
+  responseTime: number,
+): number {
+  if (!RATE_LIMIT_CONFIG.adaptiveBatchSize) {
+    return progress.currentBatchSize;
+  }
+
+  const {
+    currentBatchSize,
+    failedRequests,
+    circuitBreakerOpen,
+    consecutiveFailures,
+  } = progress;
+
+  if (circuitBreakerOpen) {
+    return RATE_LIMIT_CONFIG.minBatchSize;
+  }
+
+  if (consecutiveFailures > 1 || failedRequests > 2 || responseTime > 2500) {
+    return Math.max(
+      Math.floor(currentBatchSize * 0.6),
+      RATE_LIMIT_CONFIG.minBatchSize,
+    );
+  }
+
+  if (failedRequests === 0 && responseTime < 800 && consecutiveFailures === 0) {
+    return Math.min(
+      Math.floor(currentBatchSize * 1.4),
+      RATE_LIMIT_CONFIG.maxBatchSize,
+    );
+  }
+
+  return currentBatchSize;
+}
+
+function checkCircuitBreaker(progress: MessagesProgress): boolean {
+  const now = Date.now();
+
+  if (
+    !progress.circuitBreakerOpen &&
+    progress.consecutiveFailures >= RATE_LIMIT_CONFIG.circuitBreakerThreshold
+  ) {
+    progress.circuitBreakerOpen = true;
+    progress.circuitBreakerOpenTime = now;
+    console.warn(
+      `[Messages job] Circuit breaker opened due to ${progress.consecutiveFailures} consecutive failures`,
+    );
+    return true;
+  }
+
+  if (
+    progress.circuitBreakerOpen &&
+    now - progress.circuitBreakerOpenTime >
+      RATE_LIMIT_CONFIG.circuitBreakerResetTime
+  ) {
+    progress.circuitBreakerOpen = false;
+    progress.consecutiveFailures = 0;
+    console.info(
+      `[Messages job] Circuit breaker closed after ${RATE_LIMIT_CONFIG.circuitBreakerResetTime}ms`,
+    );
+    return false;
+  }
+
+  return progress.circuitBreakerOpen;
+}
+
 async function processMessagesInParallel(
   messages: any[],
   existingIds: Set<string>,
@@ -173,7 +233,6 @@ async function processMessagesInParallel(
   let consecutiveExisting = 0;
   const updatedProgress = { ...progress };
 
-  // Filter out messages older than 2 years
   const twoYearsAgo = Date.now() - 2 * 365 * 24 * 60 * 60 * 1000;
   let shouldStop = false;
 
@@ -181,9 +240,8 @@ async function processMessagesInParallel(
     const id = msg.id.toString();
     const messageDate = new Date(msg.date).getTime();
 
-    // If we encounter a message older than 2 years, we should stop processing
-    // since messages are sorted by date descending
     if (messageDate < twoYearsAgo) {
+      //! older than 2 years ago
       shouldStop = true;
       return false;
     }
@@ -320,6 +378,9 @@ export const messagesJob: Job = {
       processedIds: [],
       streamingStarted: false,
       totalEstimated: 0,
+      circuitBreakerOpen: false,
+      circuitBreakerOpenTime: 0,
+      consecutiveFailures: 0,
     };
 
     const existingIds = new Set((await ctx.getStoredItems()).map((i) => i.id));
@@ -451,6 +512,14 @@ export const messagesJob: Job = {
     }
 
     while (!progress.done) {
+      if (checkCircuitBreaker(progress)) {
+        console.warn(
+          "[Messages job] Circuit breaker is open, skipping processing",
+        );
+        await delay(RATE_LIMIT_CONFIG.maxDelay);
+        continue;
+      }
+
       await delay(progress.currentDelay);
       requestStartTime = Date.now();
 
@@ -459,6 +528,8 @@ export const messagesJob: Job = {
         list = await fetchMessages(progress.offset, progress.currentBatchSize);
         const responseTime = Date.now() - requestStartTime;
 
+        progress.consecutiveFailures = 0;
+
         progress.currentDelay = calculateAdaptiveDelay(progress, responseTime);
         progress.currentBatchSize = calculateAdaptiveBatchSize(
           progress,
@@ -467,6 +538,7 @@ export const messagesJob: Job = {
       } catch (e) {
         console.error("[Messages job] list fetch failed:", e);
         progress.failedRequests++;
+        progress.consecutiveFailures++;
         progress.currentDelay = Math.min(
           progress.currentDelay * RATE_LIMIT_CONFIG.backoffMultiplier,
           RATE_LIMIT_CONFIG.maxDelay,
@@ -479,6 +551,7 @@ export const messagesJob: Job = {
 
       if (list.status !== "200") {
         progress.failedRequests++;
+        progress.consecutiveFailures++;
 
         progress.processedIds = Array.from(processedIdsSet);
         await ctx.setProgress(progress);
@@ -507,7 +580,6 @@ export const messagesJob: Job = {
 
       itemsToStream.push(...processedItems);
 
-      // Update consecutive existing counter
       consecutiveExisting = newConsecutiveExisting;
       if (consecutiveExisting >= 20) {
         progress.done = true;
@@ -529,27 +601,52 @@ export const messagesJob: Job = {
         }
       }
 
-      // Dispatch incremental search update if we processed new items
       if (processedItems.length > 0) {
         try {
           const currentItems = await loadAllStoredItems();
-          currentItems.forEach(item => {
-            const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+          // Create new objects to avoid XrayWrapper issues in Firefox
+          const itemsWithComponents = currentItems.map((item) => {
+            try {
+              const jobDef =
+                jobs[item.category] ||
+                Object.values(jobs).find((j) => j.id === item.category) ||
+                jobs[item.renderComponentId];
+              let renderComponent = item.renderComponent;
               if (jobDef) {
-              const renderComponent = renderComponentMap[jobDef.renderComponentId];
-              if (renderComponent) {
-                item.renderComponent = renderComponent;
-              }
+                renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
               } else if (renderComponentMap[item.renderComponentId]) {
-              item.renderComponent = renderComponentMap[item.renderComponentId];
+                renderComponent = renderComponentMap[item.renderComponentId];
+              }
+              // Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
+              try {
+                const cloned = JSON.parse(JSON.stringify(item));
+                cloned.renderComponent = renderComponent;
+                return cloned;
+              } catch (e) {
+                // Fallback to shallow copy if deep clone fails
+                return { ...item, renderComponent };
+              }
+            } catch (error) {
+              // Fallback: return item as-is if modification fails (Firefox XrayWrapper)
+              return item;
             }
           });
-          loadDynamicItems(currentItems);
-          window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
-            detail: { incremental: true, jobId: "messages", newItemCount: processedItems.length, streaming: true } 
-          }));
+          loadDynamicItems(itemsWithComponents);
+          window.dispatchEvent(
+            new CustomEvent("dynamic-items-updated", {
+              detail: {
+                incremental: true,
+                jobId: "messages",
+                newItemCount: processedItems.length,
+                streaming: true,
+              },
+            }),
+          );
         } catch (error) {
-          console.warn("[Messages job] Failed to dispatch incremental search update:", error);
+          console.warn(
+            "[Messages job] Failed to dispatch incremental search update:",
+            error,
+          );
         }
       }
 
@@ -596,6 +693,9 @@ export const messagesJob: Job = {
         processedIds: [],
         streamingStarted: false,
         totalEstimated: 0,
+        circuitBreakerOpen: false,
+        circuitBreakerOpenTime: 0,
+        consecutiveFailures: 0,
       });
     } else {
       progress.processedIds = Array.from(processedIdsSet);

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

@@ -1,4 +1,4 @@
-import type { Job, IndexItem } from "../types";
+import type { IndexItem, Job } from "../types";
 import { htmlToPlainText } from "../utils";
 import { fetchMessageContent } from "./messages";
 import { delay } from "@/seqta/utils/delay";
@@ -309,10 +309,7 @@ export const notificationsJob: Job = {
           await delay(NOTIFICATIONS_RATE_LIMIT.batchDelay);
         }
 
-        const { success, item } = await processNotification(
-          notif,
-          ctx,
-        );
+        const { success, item } = await processNotification(notif, ctx);
         if (!success) {
           if (progress.retryQueue.length < 10) {
             progress.retryQueue.push(notif.notificationID);
@@ -375,23 +372,49 @@ export const notificationsJob: Job = {
         if (items.length > 0) {
           try {
             const currentItems = await loadAllStoredItems();
-            currentItems.forEach(item => {
-              const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+            // Create new objects to avoid XrayWrapper issues in Firefox
+            const itemsWithComponents = currentItems.map((item) => {
+              try {
+                const jobDef =
+                  jobs[item.category] ||
+                  Object.values(jobs).find((j) => j.id === item.category) ||
+                  jobs[item.renderComponentId];
+                let renderComponent = item.renderComponent;
                 if (jobDef) {
-                const renderComponent = renderComponentMap[jobDef.renderComponentId];
-                if (renderComponent) {
-                  item.renderComponent = renderComponent;
-                }
+                  renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
                 } else if (renderComponentMap[item.renderComponentId]) {
-                item.renderComponent = renderComponentMap[item.renderComponentId];
+                  renderComponent = renderComponentMap[item.renderComponentId];
+                }
+                // Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
+                try {
+                  const cloned = JSON.parse(JSON.stringify(item));
+                  cloned.renderComponent = renderComponent;
+                  return cloned;
+                } catch (e) {
+                  // Fallback to shallow copy if deep clone fails
+                  return { ...item, renderComponent };
+                }
+              } catch (error) {
+                // Fallback: return item as-is if modification fails (Firefox XrayWrapper)
+                return item;
               }
             });
-            loadDynamicItems(currentItems);
-            window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
-              detail: { incremental: true, jobId: "notifications", newItemCount: items.length, streaming: true } 
-            }));
+            loadDynamicItems(itemsWithComponents);
+            window.dispatchEvent(
+              new CustomEvent("dynamic-items-updated", {
+                detail: {
+                  incremental: true,
+                  jobId: "notifications",
+                  newItemCount: items.length,
+                  streaming: true,
+                },
+              }),
+            );
           } catch (error) {
-            console.warn("[Notifications job] Failed to dispatch incremental search update:", error);
+            console.warn(
+              "[Notifications job] Failed to dispatch incremental search update:",
+              error,
+            );
           }
         }
       }

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

@@ -1,3 +1,58 @@
+/**
+ * Check which items are already vectorized in embeddia's IndexedDB
+ * Returns a Set of item IDs that are already indexed
+ */
+export async function getVectorizedItemIds(): Promise<Set<string>> {
+  return new Promise((resolve) => {
+    const request = indexedDB.open("embeddiaDB");
+    
+    request.onerror = () => {
+      console.debug("Could not open embeddiaDB, assuming no items are vectorized");
+      resolve(new Set());
+    };
+    
+    request.onsuccess = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      
+      if (!db.objectStoreNames.contains("embeddiaObjectStore")) {
+        console.debug("embeddiaObjectStore not found, assuming no items are vectorized");
+        db.close();
+        resolve(new Set());
+        return;
+      }
+      
+      try {
+        const transaction = db.transaction(["embeddiaObjectStore"], "readonly");
+        const store = transaction.objectStore("embeddiaObjectStore");
+        const getAllRequest = store.getAllKeys();
+        
+        getAllRequest.onsuccess = () => {
+          const vectorizedIds = new Set<string>();
+          getAllRequest.result.forEach(key => {
+            if (typeof key === 'string') {
+              vectorizedIds.add(key);
+            }
+          });
+          
+          console.debug(`Found ${vectorizedIds.size} already vectorized items in embeddia DB`);
+          db.close();
+          resolve(vectorizedIds);
+        };
+        
+        getAllRequest.onerror = () => {
+          console.warn("Error reading vectorized item keys, assuming no items are vectorized");
+          db.close();
+          resolve(new Set());
+        };
+      } catch (error) {
+        console.warn("Error accessing embeddia store, assuming no items are vectorized:", error);
+        db.close();
+        resolve(new Set());
+      }
+    };
+  });
+}
+
 export function htmlToPlainText(rawHtml: string): string {
   const parser = new DOMParser();
   const doc = parser.parseFromString(rawHtml, "text/html");

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

@@ -3,8 +3,23 @@ import type { IndexItem } from "../types";
 
 let vectorIndex: EmbeddingIndex | null = null;
 let isInitialized = false;
+let initializationFailed = false;
 let currentAbortController: AbortController | null = null;
-let loadedItemIds = new Set<string>(); // Track loaded items to prevent duplicates
+let loadedItemIds = new Set<string>();
+
+// Detect Firefox in worker context
+function isFirefoxWorker(): boolean {
+  try {
+    // Check for Firefox-specific APIs or user agent
+    if (typeof navigator !== "undefined") {
+      return navigator.userAgent.toLowerCase().includes("firefox");
+    }
+    // In worker context, check for Firefox-specific behavior
+    return false;
+  } catch {
+    return false;
+  }
+}
 
 let streamingSession: {
   isActive: boolean;
@@ -21,20 +36,27 @@ async function initWorker() {
     console.debug("Vector worker already initialized.");
     return;
   }
+  
+  // Skip initialization in Firefox
+  if (isFirefoxWorker()) {
+    console.debug("[Vector Worker] Vector search not supported in Firefox - skipping initialization");
+    isInitialized = true;
+    initializationFailed = true;
+    vectorIndex = null;
+    return;
+  }
+  
   console.debug("Initializing vector worker...");
   try {
     await initializeModel();
     vectorIndex = new EmbeddingIndex([]);
 
-    // Load existing items but track them to prevent duplicates
     const stored = await vectorIndex.getAllObjectsFromIndexedDB();
     if (stored.length > 0) {
       console.debug(`Found ${stored.length} existing items in IndexedDB`);
 
-      // Clear any existing items from memory first
       loadedItemIds.clear();
 
-      // Add items and track their IDs
       stored.forEach((item) => {
         if (item.id && !loadedItemIds.has(item.id)) {
           vectorIndex!.add(item);
@@ -51,8 +73,9 @@ async function initWorker() {
     isInitialized = true;
     console.debug("Vector worker initialized successfully.");
   } catch (e) {
-    console.error("Failed to initialize vector worker:", e);
+    console.warn("[Vector Worker] Failed to initialize vector worker (will use text search only):", e);
     isInitialized = true;
+    initializationFailed = true;
     vectorIndex = null;
   }
 }
@@ -83,18 +106,29 @@ async function startStreamingSession(
   totalExpected: number,
   batchSize: number = 5,
 ) {
+  if (initializationFailed || isFirefoxWorker()) {
+    self.postMessage({
+      type: "progress",
+      data: {
+        status: "complete",
+        message: "Vector search not available in Firefox - using text search only",
+      },
+    });
+    return;
+  }
+  
   if (!vectorIndex) {
     console.warn(
       "Streaming requested but vector index not ready. Attempting init.",
     );
     await initWorker();
-    if (!vectorIndex) {
+    if (!vectorIndex || initializationFailed) {
       self.postMessage({
         type: "progress",
         data: {
-          status: "error",
+          status: "complete",
           message:
-            "Vector index not available for streaming after init attempt.",
+            "Vector index not available - using text search only",
         },
       });
       return;
@@ -168,7 +202,6 @@ async function processStreamingItems() {
       streamingSession.batchSize,
     );
 
-    // Use our tracking set for more efficient deduplication
     const unprocessedItems = batchToProcess.filter((item) => {
       return item.id && !loadedItemIds.has(item.id);
     });
@@ -190,12 +223,12 @@ async function processStreamingItems() {
       try {
         successfullyVectorized.forEach((item) => {
           vectorIndex!.add(item);
-          loadedItemIds.add(item.id); // Track the added item
+          loadedItemIds.add(item.id);
         });
 
         if (
-          streamingSession.totalProcessed % (streamingSession.batchSize * 15) ===
-          0
+          streamingSession.totalProcessed % 50 === 0 ||
+          loadedItemIds.size % 200 === 0
         ) {
           await vectorIndex!.saveIndex("indexedDB");
           console.debug(
@@ -310,25 +343,35 @@ async function endStreamingSession() {
 async function processItems(items: IndexItem[], signal: AbortSignal) {
   console.debug("Worker received process request.");
 
+  if (initializationFailed || isFirefoxWorker()) {
+    self.postMessage({
+      type: "progress",
+      data: {
+        status: "complete",
+        message: "Vector search not available - using text search only",
+      },
+    });
+    return;
+  }
+
   if (!vectorIndex) {
     console.warn(
       "Processing requested but vector index not ready. Attempting init.",
     );
     await initWorker();
-    if (!vectorIndex) {
+    if (!vectorIndex || initializationFailed) {
       self.postMessage({
         type: "progress",
         data: {
-          status: "error",
+          status: "complete",
           message:
-            "Vector index not available for processing after init attempt.",
+            "Vector index not available - using text search only",
         },
       });
       return;
     }
   }
 
-  // Use our tracking set for more efficient deduplication
   const unprocessedItems = items.filter((item) => {
     if (signal.aborted) return false;
     return item.id && !loadedItemIds.has(item.id);
@@ -347,15 +390,22 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
   }
 
   if (unprocessedItems.length === 0) {
-    console.debug(`No new items to process. ${loadedItemIds.size} items already in index.`);
+    console.debug(
+      `No new items to process. ${loadedItemIds.size} items already in index.`,
+    );
     self.postMessage({
       type: "progress",
-      data: { status: "complete", message: `No new items to process (${loadedItemIds.size} items already indexed)` },
+      data: {
+        status: "complete",
+        message: `No new items to process (${loadedItemIds.size} items already indexed)`,
+      },
     });
     return;
   }
 
-  console.debug(`Starting processing of ${unprocessedItems.length} items (${items.length - unprocessedItems.length} already processed).`);
+  console.debug(
+    `Starting processing of ${unprocessedItems.length} items (${items.length - unprocessedItems.length} already processed).`,
+  );
   self.postMessage({
     type: "progress",
     data: {
@@ -402,7 +452,7 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
       try {
         successfullyVectorized.forEach((item) => {
           vectorIndex!.add(item);
-          loadedItemIds.add(item.id); // Track the added item
+          loadedItemIds.add(item.id);
         });
       } catch (e) {
         console.error("Error adding batch to index:", e);
@@ -425,9 +475,15 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
       return;
     }
 
+    if (
+      (i / BATCH_SIZE + 1) % 3 === 0 ||
+      i + BATCH_SIZE >= unprocessedItems.length
+    ) {
       try {
         await vectorIndex!.saveIndex("indexedDB");
-      console.debug(`Saved index after processing batch ${i / BATCH_SIZE + 1} (${loadedItemIds.size} total unique items)`);
+        console.debug(
+          `Saved index after processing batch ${i / BATCH_SIZE + 1} (${loadedItemIds.size} total unique items)`,
+        );
       } catch (e) {
         console.error("Error saving index batch:", e);
         self.postMessage({
@@ -435,6 +491,7 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
           data: { status: "error", message: `Error saving index batch: ${e}` },
         });
       }
+    }
 
     processedCount += batch.length;
     self.postMessage({
@@ -448,7 +505,9 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
     });
   }
 
-  console.debug(`Processing complete. Total unique items in index: ${loadedItemIds.size}`);
+  console.debug(
+    `Processing complete. Total unique items in index: ${loadedItemIds.size}`,
+  );
   self.postMessage({
     type: "progress",
     data: {
@@ -463,19 +522,15 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
 async function resetWorker() {
   console.debug("Resetting vector worker state...");
 
-  // Clear tracking
   loadedItemIds.clear();
 
-  // Reset streaming session
   if (streamingSession?.isActive) {
     streamingSession.isActive = false;
     streamingSession = null;
   }
 
-  // Reset vector index
   if (vectorIndex) {
     try {
-      // Save current state before reset
       await vectorIndex.saveIndex("indexedDB");
       console.debug("Saved index before reset");
     } catch (e) {
@@ -483,13 +538,14 @@ async function resetWorker() {
     }
   }
 
-  // Reinitialize
   isInitialized = false;
   vectorIndex = null;
 
   await initWorker();
 
-  console.debug(`Vector worker reset complete. Loaded ${loadedItemIds.size} items.`);
+  console.debug(
+    `Vector worker reset complete. Loaded ${loadedItemIds.size} items.`,
+  );
 
   self.postMessage({
     type: "progress",

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

@@ -1,5 +1,6 @@
 import { refreshVectorCache } from "../../search/vector/vectorSearch";
 import type { IndexItem } from "../types";
+import { isVectorSearchSupported } from "../../utils/browserDetection";
 import vectorWorker from "./vectorWorker.ts?inlineWorker";
 
 export type ProgressCallback = (data: {
@@ -15,6 +16,9 @@ export class VectorWorkerManager {
   private isInitialized = false;
   private readyPromise: Promise<void> | null = null;
   private progressCallback: ProgressCallback | null = null;
+  private initializationMutex = false;
+  private idleTimer: NodeJS.Timeout | null = null;
+  private unloadTimer: NodeJS.Timeout | null = null;
 
   private streamingSession: {
     isActive: boolean;
@@ -23,7 +27,9 @@ export class VectorWorkerManager {
     batchBuffer: IndexItem[];
     batchSize: number;
     flushTimer: NodeJS.Timeout | null;
-    jobId?: string; // Track which job owns the session
+    jobId?: string;
+    inactivityTimer: NodeJS.Timeout | null;
+    lastActivityTime: number;
   } | null = null;
 
   private constructor() {}
@@ -37,13 +43,19 @@ export class VectorWorkerManager {
   }
 
   private async initWorker(): Promise<void> {
+    // Skip initialization if vector search is not supported (e.g., Firefox)
+    if (!isVectorSearchSupported()) {
+      console.debug("[VectorWorkerManager] Vector search not supported - skipping worker initialization");
+      this.isInitialized = false;
+      return Promise.resolve();
+    }
+
     if (this.isInitialized) return Promise.resolve();
     if (this.readyPromise) return this.readyPromise;
 
     console.debug("Lazy-loading vector worker...");
 
     return new Promise<void>((resolve, reject) => {
-      // Terminate any existing worker before creating a new one
       if (this.worker) {
         console.debug("Terminating existing worker before creating new one");
         this.worker.terminate();
@@ -62,8 +74,7 @@ export class VectorWorkerManager {
           this.worker = null;
         }
         this.isInitialized = false;
-        // Don't reset readyPromise here to prevent race conditions
-        // It will be reset when a new initialization is attempted
+
         reject(new Error("Worker initialization timed out"));
       }, 10000);
 
@@ -75,6 +86,7 @@ export class VectorWorkerManager {
           case "ready":
             this.isInitialized = true;
             clearTimeout(timeout);
+            this.updateActivity(); // Start idle timer after initialization
             console.debug("Vector worker initialized and ready.");
             resolve();
             break;
@@ -90,10 +102,19 @@ export class VectorWorkerManager {
                   this.endStreamingSession();
                 }
 
-                // Dispatch search update when vectorization completes
-                window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
-                  detail: { incremental: true, jobId: "vectorization", vectorUpdate: true } 
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("dynamic-items-updated", {
+                    detail: {
+                      incremental: true,
+                      jobId: "vectorization",
+                      vectorUpdate: true,
+                    },
+                  }),
+                );
+              }
+
+              if (data.status === "complete" || data.status === "cancelled" || data.status === "error") {
+                this.scheduleUnload();
               }
             }
             break;
@@ -128,35 +149,91 @@ export class VectorWorkerManager {
     this.isInitialized = false;
     this.readyPromise = null;
     this.progressCallback = null;
+    this.initializationMutex = false;
+    this.clearIdleTimer();
+    this.clearUnloadTimer();
     if (this.streamingSession?.isActive) {
       this.endStreamingSession();
     }
   }
 
+  private startIdleTimer() {
+    this.clearIdleTimer();
+    this.idleTimer = setTimeout(() => {
+      if (!this.streamingSession?.isActive && this.isInitialized) {
+        console.debug("[VectorWorker] Auto-shutting down due to 2 minutes of inactivity");
+        this.resetWorkerState();
+      }
+    }, 120000); // 2 minutes
+  }
+
+  private clearIdleTimer() {
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+      this.idleTimer = null;
+    }
+  }
+
+  private clearUnloadTimer() {
+    if (this.unloadTimer) {
+      clearTimeout(this.unloadTimer);
+      this.unloadTimer = null;
+    }
+  }
+
+  private scheduleUnload(delay: number = 10000) {
+    this.clearUnloadTimer();
+    this.unloadTimer = setTimeout(() => {
+      if (!this.streamingSession?.isActive && this.isInitialized) {
+        console.debug("[VectorWorker] Auto-unloading after processing complete");
+        this.resetWorkerState();
+      }
+    }, delay);
+  }
+
+  private updateActivity() {
+    this.clearUnloadTimer();
+    this.startIdleTimer();
+  }
+
   private async ensureReady() {
-    // If we already have a ready promise, wait for it regardless of outcome
+    if (this.initializationMutex) {
+      while (this.initializationMutex) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+
+      if (this.isInitialized && this.worker) {
+        return;
+      }
+    }
+
     if (this.readyPromise) {
       try {
         await this.readyPromise;
       } catch (error) {
-        // If the previous initialization failed, reset state and try again
-        console.warn("Previous worker initialization failed, resetting state and retrying...", error);
+        console.warn(
+          "Previous worker initialization failed, resetting state and retrying...",
+          error,
+        );
         this.resetWorkerState();
       }
     }
 
-    // Double-check if we're actually ready after waiting
     if (this.isInitialized && this.worker) {
       return;
     }
 
-    // If we're not ready and there's no active promise, create one
-    if (!this.readyPromise) {
+    if (!this.readyPromise && !this.initializationMutex) {
       console.warn("Worker not initialized, attempting init...");
+      this.initializationMutex = true;
+      try {
         this.readyPromise = this.initWorker();
+        await this.readyPromise;
+      } finally {
+        this.initializationMutex = false;
+      }
     }
 
-    await this.readyPromise;
     if (!this.isInitialized || !this.worker) {
       throw new Error(
         "Vector Worker is not available after initialization attempt.",
@@ -165,27 +242,72 @@ export class VectorWorkerManager {
   }
 
   async processItems(items: IndexItem[], onProgress?: ProgressCallback) {
+    // Skip if vector search is not supported
+    if (!isVectorSearchSupported()) {
+      if (onProgress) {
+        onProgress({
+          status: "complete",
+          message: "Vector search not available - using text search only"
+        });
+      }
+      return;
+    }
+
+    // Only initialize worker if we actually have items to process
+    if (items.length === 0) {
+      if (onProgress) {
+        onProgress({
+          status: "complete",
+          message: "No items to process"
+        });
+      }
+      return;
+    }
+
+    const uniqueItems = items.filter((item, index, arr) => {
+      return arr.findIndex((i) => i.id === item.id) === index;
+    });
+
+    if (uniqueItems.length !== items.length) {
+      console.debug(
+        `Filtered out ${items.length - uniqueItems.length} duplicate items before processing`,
+      );
+    }
+
+    // If after deduplication we have no items, don't initialize worker
+    if (uniqueItems.length === 0) {
+      if (onProgress) {
+        onProgress({
+          status: "complete",
+          message: "No unique items to process after deduplication"
+        });
+      }
+      return;
+    }
+
     await this.ensureReady();
 
-    // Don't allow regular processing if streaming is active
     if (this.streamingSession?.isActive) {
       console.warn("Cannot process items while streaming session is active");
       if (onProgress) {
         onProgress({
           status: "error",
-          message: "Cannot process items while streaming session is active"
+          message: "Cannot process items while streaming session is active",
         });
       }
       return;
     }
 
     this.progressCallback = onProgress || null;
+    this.updateActivity();
 
-    console.debug(`Sending ${items.length} items to worker for processing.`);
+    console.debug(
+      `Sending ${uniqueItems.length} unique items to worker for processing.`,
+    );
 
     this.worker!.postMessage({
       type: "process",
-      data: { items: items },
+      data: { items: uniqueItems },
     });
   }
 
@@ -195,19 +317,34 @@ export class VectorWorkerManager {
     batchSize: number = 10,
     jobId?: string,
   ): Promise<void> {
-    await this.ensureReady();
-
-    // Check if another job already has an active streaming session
-    if (this.streamingSession?.isActive) {
-      if (this.streamingSession.jobId !== jobId) {
-        console.warn(`Cannot start streaming session for job ${jobId} - job ${this.streamingSession.jobId} already has an active session`);
+    // Skip if vector search is not supported
+    if (!isVectorSearchSupported()) {
+      console.debug("[VectorWorker] Vector search not supported - skipping streaming session");
       if (onProgress) {
         onProgress({
-            status: "error",
-            message: `Another job (${this.streamingSession.jobId}) already has an active streaming session`
+          status: "complete",
+          message: "Vector search not available - using text search only",
         });
       }
       return;
+    }
+
+    // Only initialize if we expect items to process
+    if (totalExpectedItems === 0) {
+      console.debug("[VectorWorker] No items expected, not starting streaming session");
+      return;
+    }
+
+    await this.ensureReady();
+
+    if (this.streamingSession?.isActive) {
+      if (this.streamingSession.jobId !== jobId) {
+        console.warn(
+          `Ending existing streaming session for job ${this.streamingSession.jobId} to start new session for job ${jobId}`,
+        );
+        await this.endStreamingSession();
+
+        await new Promise((resolve) => setTimeout(resolve, 100));
       } else {
         console.debug(`Streaming session for job ${jobId} already active`);
         return;
@@ -215,6 +352,7 @@ export class VectorWorkerManager {
     }
 
     this.progressCallback = onProgress || null;
+    this.updateActivity();
 
     this.streamingSession = {
       isActive: true,
@@ -224,6 +362,8 @@ export class VectorWorkerManager {
       batchSize,
       flushTimer: null,
       jobId,
+      inactivityTimer: null,
+      lastActivityTime: Date.now(),
     };
 
     console.debug(
@@ -252,7 +392,34 @@ export class VectorWorkerManager {
       );
     }
 
-    this.streamingSession.batchBuffer.push(...items);
+    const uniqueItems = items.filter((item, index, arr) => {
+      return arr.findIndex((i) => i.id === item.id) === index;
+    });
+
+    if (uniqueItems.length !== items.length) {
+      console.debug(
+        `[Streaming] Filtered out ${items.length - uniqueItems.length} duplicate items before streaming`,
+      );
+    }
+
+    if (uniqueItems.length > 0) {
+      this.streamingSession.batchBuffer.push(...uniqueItems);
+      this.streamingSession.lastActivityTime = Date.now();
+      this.updateActivity(); // Update worker activity
+
+      if (this.streamingSession.inactivityTimer) {
+        clearTimeout(this.streamingSession.inactivityTimer);
+      }
+
+      this.streamingSession.inactivityTimer = setTimeout(() => {
+        if (this.streamingSession?.isActive) {
+          console.debug(
+            "[VectorWorker] Auto-ending streaming session due to inactivity",
+          );
+          this.endStreamingSession();
+        }
+      }, 30000);
+    }
 
     if (
       this.streamingSession.batchBuffer.length >=
@@ -313,6 +480,10 @@ export class VectorWorkerManager {
       clearTimeout(this.streamingSession.flushTimer);
     }
 
+    if (this.streamingSession.inactivityTimer) {
+      clearTimeout(this.streamingSession.inactivityTimer);
+    }
+
     this.streamingSession.isActive = false;
 
     this.worker!.postMessage({
@@ -331,12 +502,14 @@ export class VectorWorkerManager {
     }
 
     this.streamingSession = null;
+    this.scheduleUnload();
   }
 
   async streamItem(item: IndexItem): Promise<void> {
     return this.streamItems([item]);
   }
 
+
   isStreamingActive(): boolean {
     return this.streamingSession?.isActive ?? false;
   }

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

@@ -0,0 +1,280 @@
+import type { IndexItem } from "../indexing/types";
+import type { CombinedResult } from "../core/types";
+import { searchVectors, type VectorSearchResult } from "./vector/vectorSearch";
+import { jobs } from "../indexing/jobs";
+
+/**
+ * Hybrid Search Implementation
+ * 
+ * Flow:
+ * 1. BM25 (Fuse.js) gets top N results fast
+ * 2. Vector search reranks by semantic similarity
+ * 3. Apply optional boosting (recency, popularity, tags)
+ */
+
+export interface HybridSearchOptions {
+  /** Maximum number of BM25 results to retrieve before reranking */
+  bm25TopK?: number;
+  /** Maximum number of final results to return */
+  finalLimit?: number;
+  /** Whether to apply recency boost */
+  recencyBoost?: boolean;
+  /** Weight for BM25 scores (0-1) */
+  bm25Weight?: number;
+  /** Weight for vector similarity scores (0-1) */
+  vectorWeight?: number;
+  /** Weight for recency boost */
+  recencyWeight?: number;
+}
+
+const DEFAULT_OPTIONS: Required<HybridSearchOptions> = {
+  bm25TopK: 50, // Get top 50 from BM25, then rerank
+  finalLimit: 10,
+  recencyBoost: true,
+  bm25Weight: 0.4, // 40% BM25, 60% vector
+  vectorWeight: 0.6,
+  recencyWeight: 0.1,
+};
+
+/**
+ * Normalizes a score to 0-1 range
+ */
+function normalizeScore(score: number, min: number, max: number): number {
+  if (max === min) return 0.5;
+  return Math.max(0, Math.min(1, (score - min) / (max - min)));
+}
+
+/**
+ * Calculates recency boost based on item age
+ */
+function calculateRecencyBoost(item: IndexItem, now: number): number {
+  const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
+  // Exponential decay: newer items get higher boost
+  // Items from today get boost of 1, items from 30 days ago get ~0.03
+  return 1 / (1 + ageInDays / 7); // Half-life of 7 days
+}
+
+/**
+ * Calculates popularity boost (can be extended with click tracking, etc.)
+ */
+function calculatePopularityBoost(item: IndexItem): number {
+  // For now, boost based on category and metadata
+  let boost = 0;
+  
+  // Boost assignments/assessments
+  if (item.category === "assignments") {
+    boost += 0.1;
+  }
+  
+  // Boost upcoming items
+  if (item.metadata?.isUpcoming) {
+    boost += 0.15;
+  }
+  
+  // Boost items with subject codes (more structured)
+  if (item.metadata?.subjectCode) {
+    boost += 0.05;
+  }
+  
+  return Math.min(boost, 0.3); // Cap at 0.3
+}
+
+/**
+ * Reranks BM25 results using vector search
+ */
+export async function hybridSearch(
+  bm25Results: CombinedResult[],
+  query: string,
+  options: HybridSearchOptions = {},
+): Promise<CombinedResult[]> {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const trimmedQuery = query.trim().toLowerCase();
+  
+  // If no BM25 results, return empty
+  if (bm25Results.length === 0) {
+    return [];
+  }
+  
+  // Limit BM25 results to top K
+  const topBm25Results = bm25Results.slice(0, opts.bm25TopK);
+  
+  // Get vector search results for reranking
+  // We'll search the full index and then filter to our BM25 results
+  let vectorResults: VectorSearchResult[] = [];
+  
+  if (trimmedQuery.length > 2) {
+    try {
+      // Get more vector results than BM25 results to ensure coverage
+      // This allows us to find semantic matches that BM25 might have missed
+      const vectorSearchResults = await searchVectors(trimmedQuery, opts.bm25TopK * 2);
+      
+      // Create a map of item ID to vector similarity
+      const vectorMap = new Map<string, number>();
+      vectorSearchResults.forEach(v => {
+        // Use the highest similarity if item appears multiple times
+        const existing = vectorMap.get(v.object.id);
+        if (!existing || v.similarity > existing) {
+          vectorMap.set(v.object.id, v.similarity);
+        }
+      });
+      
+      // Now rerank BM25 results with vector scores
+      const now = Date.now();
+      
+      const rerankedResults = topBm25Results.map(result => {
+        const item = result.item;
+        
+        // Normalize BM25 score to 0-1
+        // Fuse.js scores: lower is better (0 = perfect match)
+        // We need to invert: higher score = better match
+        // Result.score is typically 0-100, where higher = better
+        // So we normalize it to 0-1
+        const normalizedBm25Score = Math.max(0, Math.min(1, result.score / 100));
+        
+        // Get vector similarity (0-1, already normalized)
+        // If item wasn't in vector results, use a default low score
+        const vectorSimilarity = vectorMap.get(item.id) || 0.3; // Default to 0.3 if not found
+        
+        // Calculate recency boost (0-1 range)
+        const recencyBoost = opts.recencyBoost 
+          ? calculateRecencyBoost(item, now) * opts.recencyWeight
+          : 0;
+        
+        // Calculate popularity boost (0-1 range)
+        const popularityBoost = calculatePopularityBoost(item);
+        
+        // Apply job-specific boost if available
+        const job = jobs[item.category];
+        let jobBoost = 0;
+        if (job && typeof job.boostCriteria === 'function') {
+          const boost = job.boostCriteria(item, trimmedQuery);
+          if (boost) {
+            jobBoost = boost / 100; // Normalize boost to 0-1
+          }
+        }
+        
+        // Combine scores using weighted average
+        // BM25 and vector are weighted, boosts are additive
+        const hybridScore = 
+          (normalizedBm25Score * opts.bm25Weight) +
+          (vectorSimilarity * opts.vectorWeight) +
+          recencyBoost +
+          popularityBoost +
+          jobBoost;
+        
+        return {
+          ...result,
+          score: hybridScore * 100, // Scale back to 0-100 for consistency
+          // Store component scores for debugging (optional, can be removed in production)
+          _hybridScores: {
+            bm25: normalizedBm25Score,
+            vector: vectorSimilarity,
+            recency: recencyBoost,
+            popularity: popularityBoost,
+            jobBoost: jobBoost,
+            final: hybridScore,
+          },
+        };
+      });
+      
+      // Sort by hybrid score descending
+      rerankedResults.sort((a, b) => b.score - a.score);
+      
+      // Return top results
+      return rerankedResults.slice(0, opts.finalLimit);
+      
+    } catch (e) {
+      console.warn("[Hybrid Search] Vector reranking failed, using BM25 only:", e);
+      // Fallback to BM25 only
+      return topBm25Results.slice(0, opts.finalLimit);
+    }
+  }
+  
+  // If query is too short for vector search, just return BM25 results
+  return topBm25Results.slice(0, opts.finalLimit);
+}
+
+/**
+ * Enhanced hybrid search that also includes vector-only results not found by BM25
+ */
+export async function hybridSearchWithExpansion(
+  bm25Results: CombinedResult[],
+  query: string,
+  allItems: IndexItem[],
+  options: HybridSearchOptions = {},
+): Promise<CombinedResult[]> {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const trimmedQuery = query.trim().toLowerCase();
+  
+  // First, rerank BM25 results
+  const rerankedBm25 = await hybridSearch(bm25Results, query, options);
+  
+  // If query is too short, skip vector expansion
+  if (trimmedQuery.length <= 2) {
+    return rerankedBm25;
+  }
+  
+  // Get vector search results
+  let vectorResults: VectorSearchResult[] = [];
+  try {
+    vectorResults = await searchVectors(trimmedQuery, opts.bm25TopK);
+  } catch (e) {
+    console.warn("[Hybrid Search] Vector search failed:", e);
+    return rerankedBm25;
+  }
+  
+  // Find vector results that weren't in BM25 results
+  const bm25Ids = new Set(bm25Results.map(r => r.item.id));
+  const vectorOnlyResults: CombinedResult[] = [];
+  
+  const now = Date.now();
+  
+  vectorResults.forEach(v => {
+    if (!bm25Ids.has(v.object.id)) {
+      // This is a semantic match that BM25 missed
+      const item = v.object;
+      
+      // Calculate boosts
+      const recencyBoost = opts.recencyBoost 
+        ? calculateRecencyBoost(item, now) * opts.recencyWeight
+        : 0;
+      const popularityBoost = calculatePopularityBoost(item);
+      
+      // Vector-only results get lower base score but high vector similarity
+      const vectorScore = v.similarity * opts.vectorWeight + recencyBoost + popularityBoost;
+      
+      // Apply job-specific boost if available
+      const job = jobs[item.category];
+      let jobBoost = 0;
+      if (job && typeof job.boostCriteria === 'function') {
+        const boost = job.boostCriteria(item, trimmedQuery);
+        if (boost) {
+          jobBoost = boost / 100; // Normalize boost
+        }
+      }
+      
+      vectorOnlyResults.push({
+        id: item.id,
+        type: "dynamic" as const,
+        score: (vectorScore + jobBoost) * 100,
+        item,
+        _hybridScores: {
+          bm25: 0,
+          vector: v.similarity,
+          recency: recencyBoost,
+          popularity: popularityBoost,
+          final: vectorScore + jobBoost,
+        },
+      });
+    }
+  });
+  
+  // Combine reranked BM25 results with vector-only results
+  const allResults = [...rerankedBm25, ...vectorOnlyResults];
+  
+  // Sort by score and return top results
+  allResults.sort((a, b) => b.score - a.score);
+  
+  return allResults.slice(0, opts.finalLimit);
+}
+

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

@@ -6,32 +6,79 @@ import type { IndexItem } from "../indexing/types";
 import { searchVectors } from "./vector/vectorSearch";
 import type { VectorSearchResult } from "./vector/vectorTypes";
 import { jobs } from "../indexing/jobs";
+import { hybridSearchWithExpansion } from "./hybridSearch";
+
+// Search result cache for better performance
+const searchCache = new Map<string, { results: CombinedResult[]; timestamp: number }>();
+const CACHE_TTL = 1000 * 60 * 5; // 5 minutes
+const MAX_CACHE_SIZE = 100;
+
+function getCachedResults(query: string): CombinedResult[] | null {
+  const cached = searchCache.get(query);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.results;
+  }
+  return null;
+}
+
+function setCachedResults(query: string, results: CombinedResult[]) {
+  // Limit cache size
+  if (searchCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = searchCache.keys().next().value;
+    searchCache.delete(firstKey);
+  }
+  searchCache.set(query, { results, timestamp: Date.now() });
+}
+
+/**
+ * Clears the search result cache
+ */
+export function clearSearchCache(): void {
+  searchCache.clear();
+  console.debug("[Search] Search result cache cleared");
+}
+
+// Listen for cache clear events (e.g., on extension update)
+if (typeof window !== 'undefined') {
+  window.addEventListener('betterseqta-clear-search-cache', () => {
+    clearSearchCache();
+  });
+}
 
 export function createSearchIndexes() {
   const commands = getStaticCommands();
   const dynamicItems = getDynamicItems();
 
+  // Optimized command search options
   const commandOptions = {
     keys: ["text", "category", "keywords"],
     includeScore: true,
     includeMatches: true,
-    threshold: 0.4,
+    threshold: 0.35, // Slightly more permissive for better recall
     minMatchCharLength: 2,
     useExtendedSearch: false,
+    ignoreLocation: false,
+    findAllMatches: false, // Performance optimization
   };
 
+  // Optimized dynamic content search options
   const dynamicOptions = {
     keys: [
-      { name: "text", weight: 2 },
+      { name: "text", weight: 3 }, // Increased weight for title matches
       { name: "content", weight: 1 },
-      { name: "category", weight: 1 },
+      { name: "category", weight: 0.5 }, // Lower weight for category
+      { name: "metadata.subjectName", weight: 1.5 }, // Boost subject name matches
+      { name: "metadata.subjectCode", weight: 1.5 }, // Boost subject code matches
     ],
     includeScore: true,
     includeMatches: true,
-    threshold: 0.4,
-    minMatchCharLength: 2,
-    distance: 100,
+    threshold: 0.5, // More permissive for better partial word matching (increased from 0.4)
+    minMatchCharLength: 2, // Minimum 2 characters for Fuse.js matches (substring fallback handles shorter queries)
+    distance: 100, // Increased to allow matches across longer strings
     useExtendedSearch: true,
+    ignoreLocation: true, // Allow matches anywhere in the string for better partial word matching
+    findAllMatches: true, // Enable to find all matches for better partial word support
+    shouldSort: true,
   };
 
   return {
@@ -105,18 +152,64 @@ export function searchDynamicItems(
   }
 
   const now = Date.now();
-  const searchResults = dynamicContentFuse.search(query, { limit });
+  const queryLower = query.toLowerCase();
+  const queryTrimmed = query.trim();
   
-  return searchResults.map((result: FuseResult<IndexItem>) => {
+  // For short queries (3 chars or less), use a more permissive approach
+  const isShortQuery = queryTrimmed.length <= 3;
+  const searchLimit = Math.min(limit * 3, 50);
+  
+  // First, try Fuse.js search
+  const searchResults = dynamicContentFuse.search(query, { limit: searchLimit });
+  
+  // For short queries, always do a simple substring match to supplement Fuse.js results
+  // This ensures we catch partial word matches like "SAT" in "SAT 1: Differential Calculus"
+  let additionalMatches: IndexItem[] = [];
+  if (isShortQuery) {
+    // Always do substring search for short queries to catch partial word matches
+    for (const item of dynamicIdToItemMap.values()) {
+      const textLower = item.text.toLowerCase();
+      const contentLower = (item.content || '').toLowerCase();
+      const subjectNameLower = (item.metadata?.subjectName || '').toLowerCase();
+      const subjectCodeLower = (item.metadata?.subjectCode || '').toLowerCase();
+      
+      // Check if query appears anywhere in the text, content, or metadata
+      if (textLower.includes(queryLower) || 
+          contentLower.includes(queryLower) ||
+          subjectNameLower.includes(queryLower) ||
+          subjectCodeLower.includes(queryLower)) {
+        // Only add if not already in Fuse.js results
+        if (!searchResults.find(r => r.item.id === item.id)) {
+          additionalMatches.push(item);
+        }
+      }
+    }
+  }
+
+  const results = searchResults.map((result: FuseResult<IndexItem>) => {
     const item = result.item;
     const fuseScore = 10 * (1 - (result.score || 0.5));
     
     let score = fuseScore;
 
+    // Recency boost
     const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
     const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
     score += recencyBoost;
     
+    // Boost for exact text matches (especially at the start)
+    const textLower = item.text.toLowerCase();
+    if (textLower.startsWith(queryLower)) {
+      score += 5; // Strong boost for prefix matches
+    } else if (textLower.includes(queryLower)) {
+      score += 2; // Boost for substring matches
+    }
+    
+    // Boost for category matches
+    if (item.category.toLowerCase().includes(queryLower)) {
+      score += 1;
+    }
+
     return {
       id: item.id,
       type: "dynamic" as const,
@@ -125,60 +218,124 @@ export function searchDynamicItems(
       matches: result.matches,
     };
   });
+  
+  // Add additional matches from simple substring search
+  additionalMatches.forEach((item) => {
+    // Check if already in results
+    if (!results.find(r => r.id === item.id)) {
+      const textLower = item.text.toLowerCase();
+      let score = 5; // Base score for substring matches
+      
+      // Boost for prefix matches
+      if (textLower.startsWith(queryLower)) {
+        score += 5;
+      }
+      
+      // Recency boost
+      const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
+      const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
+      score += recencyBoost;
+      
+      results.push({
+        id: item.id,
+        type: "dynamic" as const,
+        score,
+        item,
+      });
+    }
+  });
+  
+  // Sort by score and return top results
+  return results.sort((a, b) => b.score - a.score).slice(0, limit);
 }
 
 export async function performSearch(
   query: string,
   commandsFuse: Fuse<StaticCommandItem>,
   commandIdToItemMap: Map<string, StaticCommandItem>,
+  dynamicContentFuse?: Fuse<IndexItem>,
+  dynamicIdToItemMap?: Map<string, IndexItem>,
+  sortByRecent: boolean = true,
 ): Promise<CombinedResult[]> {
-  // Get all results first
+  const trimmedQuery = query.trim().toLowerCase();
+  
+  // Check cache first
+  if (trimmedQuery.length > 2) {
+    const cached = getCachedResults(trimmedQuery);
+    if (cached) {
+      return cached;
+    }
+  }
+
+  // Step 1: Get command results (these don't need hybrid search)
   const commandResults = searchCommands(
     commandsFuse,
-    query,
+    trimmedQuery,
     commandIdToItemMap,
   );
 
-  // Get vector results in parallel
-  let vectorResults: VectorSearchResult[] = [];
+  // Step 2: Get BM25 results for dynamic items
+  let dynamicResults: CombinedResult[] = [];
+  if (dynamicContentFuse && dynamicIdToItemMap) {
+    // Get BM25 results first (fast text-based search)
+    const bm25Results = searchDynamicItems(
+      dynamicContentFuse,
+      trimmedQuery,
+      dynamicIdToItemMap,
+      50, // Get top 50 for reranking
+      sortByRecent,
+    );
+
+    // Step 3: Apply hybrid search (BM25 + Vector reranking + boosting)
+    if (trimmedQuery.length > 2 && bm25Results.length > 0) {
       try {
-    vectorResults = await searchVectors(query);
-  } catch (e) {}
+        // Get all items for expansion
+        const allItems = Array.from(dynamicIdToItemMap.values());
         
-  // Create a map to store our final results, using ID as key to avoid duplicates
-  const resultMap = new Map<string, CombinedResult>();
-
-  // Add command results first (they keep their original scores)
-  commandResults.forEach((r) => resultMap.set(r.id, r));
-
-  // Process dynamic results and vector results together
-  const seenIds = new Set<string>();
-
-  vectorResults.forEach((v) => {
-    const id = v.object.id;
-
-    if (!seenIds.has(id)) {
-      // This is a semantic match that Fuse missed - add it with the vector similarity as score
-      let score = v.similarity * 0.5; // High base score for semantic matches
-      const job = jobs[v.object.category];
-      if (job && typeof job.boostCriteria === 'function') {
-        const boost = job.boostCriteria(v.object, query);
-        if (boost) {
-          score += boost;
+        // Apply hybrid search with expansion
+        dynamicResults = await hybridSearchWithExpansion(
+          bm25Results,
+          trimmedQuery,
+          allItems,
+          {
+            bm25TopK: 50,
+            finalLimit: 20, // Return top 20 after reranking
+            recencyBoost: sortByRecent,
+            bm25Weight: 0.4, // 40% BM25, 60% vector
+            vectorWeight: 0.6,
+            recencyWeight: 0.1,
+          },
+        );
+      } catch (e) {
+        console.warn("[Search] Hybrid search failed, using BM25 only:", e);
+        // Fallback to BM25 only
+        dynamicResults = bm25Results.slice(0, 20);
+      }
+    } else {
+      // For very short queries or no BM25 results, use BM25 only
+      dynamicResults = bm25Results.slice(0, 20);
     }
   }
-      resultMap.set(id, {
-        id,
-        type: "dynamic" as const,
-        score,
-        item: v.object,
-      });
+
+  // Step 4: Combine command and dynamic results
+  const allResults = [...commandResults, ...dynamicResults];
+  
+  // Sort by score (commands typically have higher priority)
+  allResults.sort((a, b) => {
+    // Commands always come first if scores are similar
+    if (a.type === "command" && b.type === "dynamic") {
+      return b.score - a.score - 10; // Commands get +10 boost
     }
+    if (a.type === "dynamic" && b.type === "command") {
+      return b.score - a.score + 10; // Commands get +10 boost
+    }
+    return b.score - a.score;
   });
 
-  // Convert to array and sort by score
-  const results = Array.from(resultMap.values());
-  results.sort((a, b) => b.score - a.score);
-
-  return results;
+  // Cache results for queries longer than 2 chars
+  if (trimmedQuery.length > 2) {
+    setCachedResults(trimmedQuery, allResults);
+  }
+
+  return allResults;
 }

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

@@ -1,16 +1,36 @@
 import { EmbeddingIndex, getEmbedding, initializeModel } from "embeddia";
 import type { IndexItem } from "../../indexing/types";
 import type { SearchResult } from "embeddia";
+import { isVectorSearchSupported } from "../../utils/browserDetection";
 
 let vectorIndex: EmbeddingIndex | null = null;
+let initializationAttempted = false;
+let initializationFailed = false;
 
 export async function initVectorSearch() {
+  // Skip initialization if already attempted and failed, or if not supported
+  if (initializationFailed || !isVectorSearchSupported()) {
+    if (!isVectorSearchSupported()) {
+      console.debug("[Vector Search] Vector search not supported in Firefox - using text search only");
+    }
+    return;
+  }
+
+  if (initializationAttempted) {
+    return;
+  }
+
+  initializationAttempted = true;
+
   try {
     await initializeModel();
     vectorIndex = new EmbeddingIndex([]);
     vectorIndex.preloadIndexedDB();
+    console.debug("[Vector Search] Initialized successfully");
   } catch (e) {
-    console.error("Error initializing vector search", e);
+    console.warn("[Vector Search] Failed to initialize vector search (will use text search only):", e);
+    initializationFailed = true;
+    vectorIndex = null;
   }
 }
 
@@ -18,28 +38,111 @@ export interface VectorSearchResult extends SearchResult {
   object: IndexItem & { embedding: number[] };
 }
 
+// Cache for query embeddings to avoid recomputing
+const embeddingCache = new Map<string, number[]>();
+const EMBEDDING_CACHE_TTL = 1000 * 60 * 30; // 30 minutes
+const MAX_EMBEDDING_CACHE_SIZE = 50;
+
+function getCachedEmbedding(query: string): number[] | null {
+  const cached = embeddingCache.get(query);
+  if (cached) {
+    return cached;
+  }
+  return null;
+}
+
+function setCachedEmbedding(query: string, embedding: number[]) {
+  // Limit cache size
+  if (embeddingCache.size >= MAX_EMBEDDING_CACHE_SIZE) {
+    const firstKey = embeddingCache.keys().next().value;
+    embeddingCache.delete(firstKey);
+  }
+  embeddingCache.set(query, embedding);
+}
+
+/**
+ * Clears the embedding cache
+ */
+export function clearEmbeddingCache(): void {
+  embeddingCache.clear();
+  console.debug("[Vector Search] Embedding cache cleared");
+}
+
+// Listen for cache clear events (e.g., on extension update)
+if (typeof window !== 'undefined') {
+  window.addEventListener('betterseqta-clear-embedding-cache', () => {
+    clearEmbeddingCache();
+  });
+}
+
 export async function searchVectors(
   query: string,
   topK: number = 20,
 ): Promise<VectorSearchResult[]> {
-  if (!vectorIndex) await initVectorSearch();
+  // Return empty array if vector search is not supported or failed to initialize
+  if (!isVectorSearchSupported() || initializationFailed) {
+    return [];
+  }
 
-  const queryEmbedding = await getEmbedding(query.slice(0, 100));
+  if (!vectorIndex) {
+    await initVectorSearch();
+    if (!vectorIndex) {
+      return [];
+    }
+  }
 
+  // Normalize query for caching
+  const normalizedQuery = query.trim().toLowerCase().slice(0, 100);
+  
+  // Check cache first
+  let queryEmbedding = getCachedEmbedding(normalizedQuery);
+  
+  if (!queryEmbedding) {
+    try {
+      queryEmbedding = await getEmbedding(normalizedQuery);
+      setCachedEmbedding(normalizedQuery, queryEmbedding);
+    } catch (e) {
+      console.warn("[Vector Search] Failed to get embedding:", e);
+      return [];
+    }
+  }
+
+  try {
     const results = await vectorIndex!.search(queryEmbedding, {
-    topK,
+      topK: Math.min(topK * 2, 30), // Get more results, filter later
       useStorage: "indexedDB",
       dedupeEntries: true,
     });
 
-  // filter results with a similarity below 0.81
-  const filteredResults = results.filter((r) => r.similarity > 0.81);
+    // Filter results with a similarity below 0.80 (slightly more permissive)
+    // and sort by similarity descending
+    const filteredResults = results
+      .filter((r) => r.similarity > 0.80)
+      .sort((a, b) => b.similarity - a.similarity)
+      .slice(0, topK);
 
     return filteredResults as VectorSearchResult[];
+  } catch (e) {
+    console.warn("[Vector Search] Search failed:", e);
+    return [];
+  }
 }
 
 export async function refreshVectorCache() {
-  if (!vectorIndex) await initVectorSearch();
-  vectorIndex!.clearIndexedDBCache();
-  vectorIndex!.preloadIndexedDB();
+  if (!isVectorSearchSupported() || initializationFailed) {
+    return;
+  }
+  
+  if (!vectorIndex) {
+    await initVectorSearch();
+  }
+  
+  if (vectorIndex) {
+    try {
+      vectorIndex.clearIndexedDBCache();
+      vectorIndex.preloadIndexedDB();
+    } catch (e) {
+      console.warn("[Vector Search] Failed to refresh cache:", e);
+    }
+  }
 }

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

@@ -0,0 +1,30 @@
+import browser from "webextension-polyfill";
+
+/**
+ * Detects if the current browser is Firefox
+ */
+export function isFirefox(): boolean {
+  try {
+    // Firefox-specific API
+    if (typeof (browser.runtime as any).getBrowserInfo === "function") {
+      return true;
+    }
+    // Fallback: check user agent
+    if (typeof navigator !== "undefined") {
+      return navigator.userAgent.toLowerCase().includes("firefox");
+    }
+    return false;
+  } catch {
+    // If we can't detect, assume not Firefox (safer for Chrome/Edge)
+    return false;
+  }
+}
+
+/**
+ * Checks if vector search is supported in the current browser
+ * Currently disabled for Firefox due to security restrictions
+ */
+export function isVectorSearchSupported(): boolean {
+  return !isFirefox();
+}
+

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

@@ -0,0 +1,115 @@
+import browser from "webextension-polyfill";
+
+const VERSION_STORAGE_KEY = "betterseqta-global-search-version";
+const VERSION_CACHE_KEY = "betterseqta-global-search-cache-version";
+
+/**
+ * Gets the current extension version from the manifest
+ */
+export function getCurrentVersion(): string {
+  try {
+    return browser.runtime.getManifest().version;
+  } catch (e) {
+    console.warn("[Version Check] Failed to get manifest version:", e);
+    return "0.0.0";
+  }
+}
+
+/**
+ * Gets the last stored version from localStorage
+ */
+export function getStoredVersion(): string | null {
+  try {
+    return localStorage.getItem(VERSION_STORAGE_KEY);
+  } catch (e) {
+    console.warn("[Version Check] Failed to get stored version:", e);
+    return null;
+  }
+}
+
+/**
+ * Stores the current version in localStorage
+ */
+export function storeVersion(version: string): void {
+  try {
+    localStorage.setItem(VERSION_STORAGE_KEY, version);
+    localStorage.setItem(VERSION_CACHE_KEY, version);
+  } catch (e) {
+    console.warn("[Version Check] Failed to store version:", e);
+  }
+}
+
+/**
+ * Checks if the extension has been updated and clears caches if needed
+ * Returns true if an update was detected
+ */
+export async function checkAndHandleUpdate(): Promise<boolean> {
+  const currentVersion = getCurrentVersion();
+  const storedVersion = getStoredVersion();
+  
+  // If no stored version, this is first run - store current version
+  if (!storedVersion) {
+    console.debug(`[Version Check] First run detected, storing version ${currentVersion}`);
+    storeVersion(currentVersion);
+    return false;
+  }
+  
+  // If versions match, no update
+  if (storedVersion === currentVersion) {
+    return false;
+  }
+  
+  // Version mismatch detected - extension was updated
+  console.log(`[Version Check] Extension updated from ${storedVersion} to ${currentVersion}, clearing caches...`);
+  
+  // Clear all caches
+  await clearAllCaches();
+  
+  // Store new version
+  storeVersion(currentVersion);
+  
+  return true;
+}
+
+/**
+ * Clears all search-related caches
+ */
+export async function clearAllCaches(): Promise<void> {
+  try {
+    // Clear search result cache (in-memory Map)
+    if (typeof window !== 'undefined') {
+      // Dispatch event to clear caches in other modules
+      window.dispatchEvent(new CustomEvent('betterseqta-clear-search-cache'));
+      window.dispatchEvent(new CustomEvent('betterseqta-clear-embedding-cache'));
+    }
+    
+    // Also try to directly clear caches if modules are already loaded
+    // Use setTimeout to avoid blocking and handle CSS preload errors
+    setTimeout(async () => {
+      try {
+        const { clearSearchCache } = await import("../search/searchUtils");
+        clearSearchCache();
+      } catch (e: any) {
+        // Module might not be loaded yet, or CSS preload error - that's okay
+        if (!e?.message?.includes("preload CSS") && !e?.message?.includes("MIME type")) {
+          console.debug("[Version Check] Could not clear search cache:", e);
+        }
+      }
+      
+      try {
+        const { clearEmbeddingCache } = await import("../search/vector/vectorSearch");
+        clearEmbeddingCache();
+      } catch (e: any) {
+        // Module might not be loaded yet, or CSS preload error - that's okay
+        if (!e?.message?.includes("preload CSS") && !e?.message?.includes("MIME type")) {
+          console.debug("[Version Check] Could not clear embedding cache:", e);
+        }
+      }
+    }, 50);
+    
+    console.debug("[Version Check] All caches cleared");
+  } catch (e) {
+    console.error("[Version Check] Error clearing caches:", e);
+  }
+}
+

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

@@ -3,6 +3,7 @@ import type { Plugin } from "../../core/types";
 interface NotificationCollectorStorage {
   lastNotificationCount: number;
   lastCheckedTime: string;
+  consecutiveErrors: number;
 }
 
 const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
@@ -15,19 +16,30 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
 
   run: async (api) => {
     let pollInterval: number | null = null;
+    let isVisible = !document.hidden;
+    let baseInterval = 30000; // 30 seconds
+    const maxInterval = 300000; // 5 minutes max
 
     // Store last notification count in storage
     if (!api.storage.lastNotificationCount) {
       api.storage.lastNotificationCount = 0;
     }
+    if (!api.storage.consecutiveErrors) {
+      api.storage.consecutiveErrors = 0;
+    }
 
     const checkNotifications = async () => {
+      // Skip if tab is not visible to save battery
+      if (!isVisible) {
+        return;
+      }
+
       try {
         const alertDiv = document.querySelector(
           "[class*='notifications__bubble___']",
         ) as HTMLElement;
 
-        if (api.storage.lastNotificationCount !== 0) {
+        if (alertDiv && api.storage.lastNotificationCount !== 0) {
           alertDiv.textContent = api.storage.lastNotificationCount.toString();
         }
 
@@ -52,6 +64,9 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
         api.storage.lastNotificationCount = notificationCount;
         api.storage.lastCheckedTime = new Date().toISOString();
 
+        // Reset error count on success
+        api.storage.consecutiveErrors = 0;
+
         if (alertDiv) {
           alertDiv.textContent = notificationCount.toString();
         } else {
@@ -59,18 +74,42 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
         }
       } catch (error) {
         console.error("[BetterSEQTA+] Error fetching notifications:", error);
+        api.storage.consecutiveErrors =
+          (api.storage.consecutiveErrors || 0) + 1;
       }
     };
 
+    const getNextInterval = () => {
+      // Exponential backoff on errors, max 5 minutes
+      const errorMultiplier = Math.min(
+        Math.pow(2, api.storage.consecutiveErrors || 0),
+        10,
+      );
+      return Math.min(baseInterval * errorMultiplier, maxInterval);
+    };
+
     const startPolling = () => {
       if (pollInterval) return; // Already polling
       checkNotifications();
-      pollInterval = window.setInterval(checkNotifications, 30000);
+
+      const scheduleNext = () => {
+        const interval = getNextInterval();
+        pollInterval = window.setTimeout(() => {
+          checkNotifications().then(() => {
+            if (pollInterval) {
+              // Only continue if not stopped
+              scheduleNext();
+            }
+          });
+        }, interval);
+      };
+
+      scheduleNext();
     };
 
     const stopPolling = () => {
       if (pollInterval) {
-        window.clearInterval(pollInterval);
+        window.clearTimeout(pollInterval);
         pollInterval = null;
         const alertDiv = document.querySelector(
           "[class*='notifications__bubble___']",
@@ -85,12 +124,29 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
       }
     };
 
+    // Listen for visibility changes to pause/resume polling
+    const handleVisibilityChange = () => {
+      isVisible = !document.hidden;
+      if (isVisible && !pollInterval) {
+        // Resume polling when tab becomes visible
+        const alertDiv = document.querySelector(
+          "[class*='notifications__bubble___']",
+        );
+        if (alertDiv) {
+          startPolling();
+        }
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
     api.seqta.onMount("[class*='notifications__bubble___']", (_) => {
       startPolling();
     });
 
     return () => {
       stopPolling();
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   },
 };

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import localforage from 'localforage'
+  let value = $state<string | undefined>(undefined)
+  let fileInput = $state<HTMLInputElement | undefined>(undefined)
+  let dragging = $state(false)
+  let blobUrl = $state<string | undefined>(undefined)
+
+  // Setup localforage instance
+  const store = localforage.createInstance({
+    name: 'profile-picture-store',
+    storeName: 'profilePicture',
+  })
+
+  async function load() {
+    const blob = await store.getItem<Blob>('profile-picture')
+    if (blob && blob instanceof Blob) {
+      // Revoke old blobUrl if any
+      if (blobUrl) URL.revokeObjectURL(blobUrl)
+      blobUrl = URL.createObjectURL(blob)
+      value = blobUrl
+    } else {
+      value = undefined
+    }
+  }
+
+  load()
+
+  function triggerSelect() {
+    fileInput?.click()
+  }
+
+  async function handleFiles(files: FileList | null) {
+    const file = files?.[0]
+    if (!file) return
+
+    // Revoke old blob URL if it exists
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl)
+    }
+
+    // Store the blob in localforage
+    await store.setItem('profile-picture', file)
+    const newBlobUrl = URL.createObjectURL(file)
+    value = newBlobUrl
+    blobUrl = newBlobUrl
+    window.dispatchEvent(new Event('profile-picture-updated'))
+  }
+
+  function onFileChange() {
+    handleFiles(fileInput?.files || null)
+  }
+
+  function onDrop(event: DragEvent) {
+    event.preventDefault()
+    dragging = false
+    handleFiles(event.dataTransfer?.files || null)
+  }
+
+  async function removeImage() {
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl)
+      blobUrl = undefined
+    }
+    value = undefined
+    await store.removeItem('profile-picture')
+    window.dispatchEvent(new Event('profile-picture-updated'))
+  }
+</script>
+
+<div
+  class="flex relative justify-center items-center rounded-lg cursor-pointer select-none border-zinc-300 dark:border-zinc-600 bg-white/20 dark:bg-zinc-800/30"
+  onclick={() => value ? null : triggerSelect()}
+  ondragover={(e) => { e.stopPropagation(); dragging = true }}
+  ondragleave={() => dragging = false}
+  ondrop={onDrop}
+  onkeydown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerSelect()
+    }
+  }}
+  role="button"
+  tabindex="0"
+>
+  {#if value}
+    <img src={value} alt="Profile" class="object-cover rounded-full size-10" />
+    <button
+      class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
+      onclick={(e) => {
+        e.stopPropagation()
+        removeImage()
+      }}
+    >&#215;</button>
+  {:else}
+    <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300">
+      <span class="text-lg font-IconFamily">{'\ued47'}</span>
+      <span>Upload</span>
+    </div>
+  {/if}
+  <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
+  {#if dragging}
+    <div class="absolute inset-0 rounded-full bg-zinc-200/40 dark:bg-zinc-700/40"></div>
+  {/if}
+</div>

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

@@ -0,0 +1,86 @@
+import type { Plugin } from "@/plugins/core/types";
+import { componentSetting, defineSettings } from "@/plugins/core/settingsHelpers";
+import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import styles from "./styles.css?inline";
+import localforage from "localforage";
+
+const settings = defineSettings({
+  picture: componentSetting({
+    title: "Profile Picture",
+    description: "Upload or remove your custom profile image",
+    component: ProfilePictureSetting,
+  }),
+});
+
+
+const profilePicturePlugin: Plugin<typeof settings> = {
+  id: "profile-picture",
+  name: "Custom Profile Picture",
+  description: "Use your own image in place of the profile icon",
+  version: "1.1.0",
+  settings: settings,
+  disableToggle: true,
+  defaultEnabled: false,
+  styles,
+
+  run: async (api) => {
+    await api.storage.loaded;
+    let container: Element;
+    try {
+      container = await waitForElm(".userInfosvgdiv", true, 100, 60);
+    } catch {
+      return () => {};
+    }
+
+    const svg = container.querySelector(".userInfosvg") as HTMLElement | null;
+    let img: HTMLImageElement | null = null;
+    let currentBlobUrl: string | undefined;
+
+    // Setup localforage instance
+    const store = localforage.createInstance({
+      name: "profile-picture-store",
+      storeName: "profilePicture",
+    });
+
+    async function updateImageFromStore() {
+      // Remove old image if present
+      if (img) {
+        img.remove();
+        img = null;
+      }
+      if (currentBlobUrl) {
+        URL.revokeObjectURL(currentBlobUrl);
+        currentBlobUrl = undefined;
+      }
+      const blob = await store.getItem<Blob>("profile-picture");
+      if (blob && blob instanceof Blob) {
+        currentBlobUrl = URL.createObjectURL(blob);
+        img = document.createElement("img");
+        img.className = "userInfoImg";
+        img.src = currentBlobUrl;
+        if (svg) svg.style.display = "none";
+        container.appendChild(img);
+      } else {
+        if (svg) svg.style.display = "";
+      }
+    }
+
+    // Initial load
+    await updateImageFromStore();
+
+    // Listen for profile picture updates
+    const handler = () => { updateImageFromStore(); };
+    window.addEventListener('profile-picture-updated', handler);
+
+    return () => {
+      window.removeEventListener('profile-picture-updated', handler);
+      if (img) img.remove();
+      if (svg) svg.style.display = "";
+      if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);
+    };
+  },
+};
+
+export default profilePicturePlugin;
+

src/plugins/built-in/profilePicture/styles.css

@@ -0,0 +1,23 @@
+.userInfoImg {
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  border-radius: 50%;
+  object-fit: cover;
+  z-index: 4;
+  box-shadow: 0 0 0 3px #000000;
+  transition: box-shadow 0.05s ease-in-out;
+}
+
+.dark .userInfoImg {
+  box-shadow: 0 0 0 3px #ffffff;
+  transition: box-shadow 0.05s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .userInfoImg {
+    transition: none !important;
+  }
+}

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

@@ -147,14 +147,21 @@ export class ThemeManager {
   public async initialize(): Promise<void> {
     console.debug("[ThemeManager] Starting initialization");
     try {
-      // Check if theme creator was open during reload
+      const neumorphicThemeId = "9a9786d1-b5fc-4a91-8c7a-f8bf7f7679ad";
+      const migrationCSS = "#title {\nbackground: transparent !important;\n}";
+      
+      const theme = (await localforage.getItem(neumorphicThemeId)) as CustomTheme | null;
+      if (theme && theme.CustomCSS && !theme.CustomCSS.includes("#title {\nbackground: transparent !important;\n}")) {
+        theme.CustomCSS = theme.CustomCSS + "\n" + migrationCSS;
+        await localforage.setItem(neumorphicThemeId, theme);
+      }
+
       const themeCreatorOpen = localStorage.getItem("themeCreatorOpen");
       if (themeCreatorOpen === "true") {
         console.debug(
           "[ThemeManager] Theme creator was open, clearing preview state",
         );
         this.clearPreview();
-        // Clean up the flag
         localStorage.removeItem("themeCreatorOpen");
       }
 

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

@@ -39,43 +39,14 @@ const zoomHandlers = new WeakMap<
 >();
 
 function resetTimetableStyles(): void {
-  const firstDayColumn = document.querySelector(
-    ".dailycal .content .days td",
-  ) as HTMLElement;
-  if (!firstDayColumn) return;
-
-  const baseContainerHeight =
-    parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight;
-
-  const dayColumns = document.querySelectorAll(".dailycal .content .days td");
-  dayColumns.forEach((td: Element) => {
-    (td as HTMLElement).style.height = `${baseContainerHeight}px`;
-  });
-
-  const timeColumn = document.querySelector(".times");
-  if (timeColumn) {
-    const times = timeColumn.querySelectorAll(".time");
-    const timeHeight = baseContainerHeight / times.length;
-    times.forEach((time: Element) => {
-      (time as HTMLElement).style.height = `${timeHeight}px`;
-    });
-  }
-
-  const lessons = document.querySelectorAll(".dailycal .lesson");
-  lessons.forEach((lesson: Element) => {
-    const lessonEl = lesson as HTMLElement;
-    const originalHeight = lessonEl.getAttribute("data-original-height");
-    if (originalHeight) {
-      lessonEl.style.height = `${originalHeight}px`;
-    }
-  });
-
+  // Reset entry opacity (for assessment hide feature)
   const entries = document.querySelectorAll(".entry");
   entries.forEach((entry: Element) => {
     const entryEl = entry as HTMLElement;
     entryEl.style.opacity = "1";
   });
 
+  // Clean up zoom control event handlers
   const zoomControls = document.querySelector(".timetable-zoom-controls");
   if (zoomControls) {
     const handlers = zoomHandlers.get(zoomControls);
@@ -94,19 +65,9 @@ function resetTimetableStyles(): void {
 async function handleTimetable(): Promise<void> {
   await waitForElm(".time", true, 10);
 
-  // Store original heights when timetable loads
-  const lessons = document.querySelectorAll(".dailycal .lesson");
-  lessons.forEach((lesson: Element) => {
-    const lessonEl = lesson as HTMLElement;
-    lessonEl.setAttribute(
-      "data-original-height",
-      lessonEl.offsetHeight.toString(),
-    );
-  });
-
-  // Existing time format code
+  // Convert time format if needed
   if (settingsState.timeFormat == "12") {
-    const times = document.querySelectorAll(".timetablepage .times .time");
+    const times = document.querySelectorAll(".timetablepage .times .time, .timetablepage .entry.new");
     for (const time of times) {
       if (!time.textContent) continue;
       time.textContent = convertTo12HourFormat(time.textContent, true);
@@ -120,14 +81,6 @@ async function handleTimetable(): Promise<void> {
 function handleTimetableZoom(): void {
   console.log("Initializing timetable zoom controls");
 
-  // Lazy initialize state variables only when function is first called
-  let timetableZoomLevel = 1;
-  let baseContainerHeight: number | null = null;
-  const originalEntryPositions = new Map<
-    Element,
-    { topRatio: number; heightRatio: number }
-  >();
-
   // Create zoom controls
   const zoomControls = document.createElement("div");
   zoomControls.className = "timetable-zoom-controls";
@@ -148,16 +101,16 @@ function handleTimetableZoom(): void {
 
   // Store event listener references
   const zoomInHandler = () => {
-    if (timetableZoomLevel < 2) {
-      timetableZoomLevel += 0.2;
-      updateZoom();
+    const seqtaZoomIn = document.querySelector('.uiButton.zoom.in') as HTMLElement;
+    if (seqtaZoomIn) {
+      seqtaZoomIn.click();
     }
   };
 
   const zoomOutHandler = () => {
-    if (timetableZoomLevel > 0.6) {
-      timetableZoomLevel -= 0.2;
-      updateZoom();
+    const seqtaZoomOut = document.querySelector('.uiButton.zoom.out') as HTMLElement;
+    if (seqtaZoomOut) {
+      seqtaZoomOut.click();
     }
   };
 
@@ -169,84 +122,6 @@ function handleTimetableZoom(): void {
     zoomIn: zoomInHandler,
     zoomOut: zoomOutHandler,
   });
-
-  const initializePositions = () => {
-    // Get the base container height from the first TD
-    const firstDayColumn = document.querySelector(
-      ".dailycal .content .days td",
-    ) as HTMLElement;
-    if (!firstDayColumn) return false;
-
-    baseContainerHeight =
-      parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight;
-
-    // Store original ratios
-    const entries = document.querySelectorAll(".entriesWrapper .entry");
-    entries.forEach((entry: Element) => {
-      const entryEl = entry as HTMLElement;
-
-      // Calculate ratios relative to detected base height
-      if (baseContainerHeight === null) return;
-      const topRatio = parseInt(entryEl.style.top) / baseContainerHeight;
-      const heightRatio = parseInt(entryEl.style.height) / baseContainerHeight;
-
-      originalEntryPositions.set(entry, { topRatio, heightRatio });
-    });
-
-    return true;
-  };
-
-  const updateZoom = () => {
-    // Initialize positions if not already done
-    if (baseContainerHeight === null && !initializePositions()) {
-      console.error("Failed to initialize positions");
-      return;
-    }
-
-    console.debug(`Updating zoom level to: ${timetableZoomLevel}`);
-
-    // Calculate new container height
-    if (baseContainerHeight === null) return;
-    const newContainerHeight = baseContainerHeight * timetableZoomLevel;
-
-    // Update all day columns (TDs)
-    const dayColumns = document.querySelectorAll(".dailycal .content .days td");
-    dayColumns.forEach((td: Element) => {
-      (td as HTMLElement).style.height = `${newContainerHeight}px`;
-    });
-
-    // Update all entries using stored ratios
-    const entries = document.querySelectorAll(".entriesWrapper .entry");
-    entries.forEach((entry: Element) => {
-      const entryEl = entry as HTMLElement;
-      const originalRatios = originalEntryPositions.get(entry);
-
-      if (originalRatios) {
-        // Calculate new positions from original ratios
-        const newTop = originalRatios.topRatio * newContainerHeight;
-        const newHeight = originalRatios.heightRatio * newContainerHeight;
-
-        // Apply new values
-        entryEl.style.top = `${Math.round(newTop)}px`;
-        entryEl.style.height = `${Math.round(newHeight)}px`;
-      }
-    });
-
-    // Update time column to match
-    const timeColumn = document.querySelector(".times");
-    if (timeColumn) {
-      const times = timeColumn.querySelectorAll(".time");
-      const timeHeight = newContainerHeight / times.length;
-      times.forEach((time: Element) => {
-        (time as HTMLElement).style.height = `${timeHeight}px`;
-      });
-    }
-
-    entries[Math.round((entries.length - 1) / 2)].scrollIntoView({
-      behavior: "instant",
-      block: "center",
-    });
-  };
 }
 
 function handleTimetableAssessmentHide(): void {

src/plugins/core/createAPI.ts

@@ -11,6 +11,7 @@ import type {
 import { eventManager } from "@/seqta/utils/listeners/EventManager";
 import ReactFiber from "@/seqta/utils/ReactFiber";
 import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 function createSEQTAAPI(): SEQTAAPI {
   return {
@@ -48,6 +49,40 @@ function createSEQTAAPI(): SEQTAAPI {
   };
 }
 
+/**
+ * Creates a reactive and persistent settings store for a given plugin.
+ * This store is a Svelte-like store, providing reactivity, persistence
+ * via `browser.storage.local`, and default value handling.
+ *
+ * @template T - Represents the structure of the plugin's settings, extending `PluginSettings`.
+ * @param {Plugin<T, any>} plugin The plugin instance for which the settings store is being created.
+ *                                `plugin.id` is used for namespacing the settings in storage,
+ *                                and `plugin.settings` provides the definitions and default values for each setting.
+ * @returns {SettingsAPI<T> & { loaded: Promise<void> }} An object that functions as a Svelte store,
+ *                                                       enhanced with specific methods for settings management.
+ *                                                       The object includes:
+ *    - Reactivity: Changes to settings can be subscribed to using Svelte's store subscription pattern
+ *                  (though not explicitly a Svelte store, it behaves similarly for direct property access and updates).
+ *                  The `onChange` method provides a more direct way to listen for specific key changes.
+ *    - Persistence: Settings are automatically loaded from `browser.storage.local` when the store is created
+ *                   and saved back whenever a setting is changed via the proxy's setter.
+ *    - Default Values: Uses default values from the `plugin.settings` definition if no stored value exists for a setting.
+ *    - `loaded`: A Promise that resolves when the settings have been successfully loaded from storage,
+ *                allowing operations to be deferred until settings are ready.
+ *    - Direct property access for getting values (e.g., `settingsStore.mySettingKey`).
+ *    - Direct property assignment for setting values (e.g., `settingsStore.mySettingKey = newValue`), which also persists the change.
+ *    - `onChange(key, callback)`: Method to listen for changes to a specific setting. (Note: The prompt mentioned `listen`, this is `onChange`).
+ *                                 Returns an object with an `unregister` method.
+ *    - `offChange(key, callback)`: Method to stop listening for changes to a specific setting.
+ *    The following methods are not explicitly present on the returned proxy from `createSettingsAPI` but are typically
+ *    expected in a full "Svelte store" settings manager. The current implementation relies on direct property
+ *    manipulation for get/set, and re-initialization for reset-like behavior or would require external implementation
+ *    of reset logic if needed:
+ *    - `get(key)`: (Achieved by direct property access: `settingsStore.key`)
+ *    - `set(key, value)`: (Achieved by direct property assignment: `settingsStore.key = value`)
+ *    - `reset(key)`: (Would require manual re-application of `plugin.settings[key].default` and then setting it)
+ *    - `resetAll()`: (Would require iterating through all `plugin.settings` and applying defaults, then setting them)
+ */
 function createSettingsAPI<T extends PluginSettings>(
   plugin: Plugin<T>,
 ): SettingsAPI<T> & { loaded: Promise<void> } {
@@ -81,16 +116,16 @@ function createSettingsAPI<T extends PluginSettings>(
 
   // Fill with defaults first
   for (const key in plugin.settings) {
+    if (plugin.settings[key].type !== 'component' && plugin.settings[key].type !== 'button') {
       settingsWithMeta[key] = plugin.settings[key].default;
     }
+  }
 
   // Load stored settings and override defaults
   const loaded = (async () => {
     try {
-      const stored = await browser.storage.local.get(storageKey);
-      const storedSettings = stored[storageKey] as Partial<
-        Record<keyof T, any>
-      >;
+      const allSettings = settingsState.getAll() as unknown as Record<string, unknown>;
+      const storedSettings = allSettings[storageKey] as Partial<Record<keyof T, any>>;
       if (storedSettings) {
         for (const key in storedSettings) {
           if (key in settingsWithMeta) {
@@ -171,7 +206,7 @@ function createStorageAPI<T = any>(
   // Load all existing storage values for this plugin
   const loadStoragePromise = (async () => {
     try {
-      const allStorage = await browser.storage.local.get(null);
+      const allStorage = settingsState.getAll();
 
       // Filter for this plugin's storage keys and populate cache
       Object.entries(allStorage).forEach(([key, value]) => {
@@ -293,6 +328,32 @@ function createEventsAPI(pluginId: string): EventsAPI {
   };
 }
 
+/**
+ * Creates and returns a tailored API object for a specific plugin.
+ * This API object provides the plugin with various functionalities such as
+ * managing settings, accessing namespaced storage, interacting with SEQTA-specific features,
+ * and handling plugin-specific events.
+ *
+ * @template T - The type of the plugin's settings, extending `PluginSettings`.
+ * @template S - The type of the data the plugin will store in its namespaced storage.
+ * @param {Plugin<T, S>} plugin The plugin instance for which the API is being created.
+ *                              The plugin's `id` and `name` are used internally by the API
+ *                              for namespacing and identification but are accessed from the `plugin` object directly.
+ * @returns {PluginAPI<T, S>} An API object containing the following key properties:
+ *    - `seqta`: An API for interacting with SEQTA-specific functionalities, created by `createSEQTAAPI()`.
+ *               This includes methods like `onMount` for DOM element appearance, `getFiber` for React component inspection,
+ *               `getCurrentPage` for getting the current SEQTA page, and `onPageChange` for listening to page navigations.
+ *    - `settings`: An API for managing plugin-specific settings, created by `createSettingsAPI(plugin)`.
+ *                  It allows getting, setting, and listening to changes in the plugin's settings,
+ *                  which are stored persistently and namespaced to the plugin. Includes a `loaded` promise.
+ *    - `storage`: An API for providing namespaced storage for the plugin, created by `createStorageAPI<S>(plugin.id)`.
+ *                 It allows the plugin to store and retrieve arbitrary data, namespaced to prevent conflicts
+ *                 with other plugins or parts of the extension. Includes a `loaded` promise and `onChange` listeners.
+ *    - `events`: An API for allowing the plugin to dispatch and listen for custom events within its own scope,
+ *                created by `createEventsAPI(plugin.id)`. It provides `on(event, callback)` to listen for
+ *                plugin-specific events and `emit(event, ...args)` to dispatch them. These events are namespaced
+ *                to the plugin.
+ */
 export function createPluginAPI<T extends PluginSettings, S = any>(
   plugin: Plugin<T, S>,
 ): PluginAPI<T, S> {

src/plugins/core/dynamicLoader.ts

@@ -0,0 +1,76 @@
+import type { Plugin, PluginSettings } from "./types";
+
+/**
+ * Interface for lazy-loaded plugin definitions
+ */
+export interface LazyPlugin<T extends PluginSettings = PluginSettings, S = any> {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  settings: T;
+  styles?: string;
+  disableToggle?: boolean;
+  defaultEnabled?: boolean;
+  beta?: boolean;
+  
+  // Instead of a run function, we have a loader that imports the actual plugin
+  loader: () => Promise<{ default: Plugin<T, S> }>;
+}
+
+/**
+ * Converts a lazy plugin into a regular plugin by wrapping the run function
+ * with dynamic import logic
+ */
+export function createLazyPlugin<T extends PluginSettings = PluginSettings, S = any>(
+  lazyPlugin: LazyPlugin<T, S>
+): Plugin<T, S> {
+  return {
+    id: lazyPlugin.id,
+    name: lazyPlugin.name,
+    description: lazyPlugin.description,
+    version: lazyPlugin.version,
+    settings: lazyPlugin.settings,
+    styles: lazyPlugin.styles,
+    disableToggle: lazyPlugin.disableToggle,
+    defaultEnabled: lazyPlugin.defaultEnabled,
+    beta: lazyPlugin.beta,
+    
+    run: async (api) => {
+      console.info(`[BetterSEQTA+] Dynamically loading plugin "${lazyPlugin.id}"...`);
+      
+      try {
+        // Dynamically import the actual plugin implementation
+        const { default: actualPlugin } = await lazyPlugin.loader();
+        
+        console.info(`[BetterSEQTA+] Successfully loaded plugin "${lazyPlugin.id}"`);
+        
+        // Execute the actual plugin's run function
+        return await actualPlugin.run(api);
+      } catch (error: any) {
+        // Handle Firefox MIME type errors gracefully
+        if (error?.message?.includes("MIME type") || error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")) {
+          console.error(
+            `[BetterSEQTA+] Failed to load plugin "${lazyPlugin.id}" due to Firefox module loading restrictions. ` +
+            `This may be a build configuration issue. Error:`,
+            error
+          );
+          // Don't throw - allow the extension to continue functioning without this plugin
+          return;
+        }
+        console.error(`[BetterSEQTA+] Failed to dynamically load plugin "${lazyPlugin.id}":`, error);
+        throw error;
+      }
+    }
+  };
+}
+
+/**
+ * Helper function to create a lazy plugin definition
+ */
+export function defineLazyPlugin<T extends PluginSettings = PluginSettings, S = any>(
+  config: LazyPlugin<T, S>
+): Plugin<T, S> {
+  return createLazyPlugin(config);
+}
+

src/plugins/core/manager.ts

@@ -1,15 +1,17 @@
 import type {
   BooleanSetting,
+  ButtonSetting,
+  ComponentSetting,
+  HotkeySetting,
   NumberSetting,
   Plugin,
   PluginSettings,
   SelectSetting,
   StringSetting,
-  ButtonSetting,
-  HotkeySetting,
 } from "./types";
 import { createPluginAPI } from "./createAPI";
 import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 interface PluginSettingsStorage {
   enabled?: boolean;
@@ -21,6 +23,12 @@ interface StorageChange<T = any> {
   newValue?: T;
 }
 
+/**
+ * Singleton class responsible for the entire lifecycle of plugins.
+ * This includes registration, starting, stopping, event dispatching,
+ * managing plugin-specific styles, and listening for plugin setting changes
+ * to automatically start or stop plugins.
+ */
 export class PluginManager {
   private static instance: PluginManager;
   private plugins: Map<string, Plugin<any, any>> = new Map();
@@ -30,10 +38,18 @@ export class PluginManager {
   private listeners: Map<string, Set<(...args: any[]) => void>> = new Map();
   private styleElements: Map<string, HTMLStyleElement> = new Map();
 
+  /**
+   * Private constructor to enforce singleton pattern.
+   * Initializes the listener for plugin state changes from storage.
+   */
   private constructor() {
     this.setupPluginStateListener();
   }
 
+  /**
+   * Gets the singleton instance of the PluginManager.
+   * @returns {PluginManager} The singleton instance.
+   */
   public static getInstance(): PluginManager {
     if (!PluginManager.instance) {
       PluginManager.instance = new PluginManager();
@@ -41,6 +57,15 @@ export class PluginManager {
     return PluginManager.instance;
   }
 
+  /**
+   * Dispatches an event to a specific plugin.
+   * If the plugin is currently running, the event is dispatched immediately via a DOM CustomEvent.
+   * If the plugin is not running, the event is added to a backlog to be processed when the plugin starts.
+   *
+   * @param {string} pluginId The ID of the target plugin.
+   * @param {string} event The name of the event to dispatch (e.g., "update").
+   * @param {any} [args] Optional arguments to pass with the event.
+   */
   public dispatchPluginEvent(pluginId: string, event: string, args?: any) {
     const fullEventName = `plugin.${pluginId}.${event}`;
 
@@ -56,6 +81,14 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Processes and dispatches any events that were backlogged for a plugin.
+   * This is typically called after a plugin has successfully started.
+   *
+   * @private
+   * @param {string} pluginId The ID of the plugin for which to process backlogged events.
+   * @returns {Promise<void>}
+   */
   private async processBackloggedEvents(pluginId: string) {
     for (const [key, argsList] of this.eventBacklog.entries()) {
       const [eventPluginId, event] = key.split(":");
@@ -68,6 +101,15 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Registers a plugin with the manager.
+   * Plugins must have a unique ID.
+   *
+   * @template T - The type of settings the plugin uses.
+   * @template S - The type of storage the plugin uses.
+   * @param {Plugin<T, S>} plugin The plugin object to register.
+   * @throws {Error} If a plugin with the same ID is already registered.
+   */
   public registerPlugin<T extends PluginSettings, S>(
     plugin: Plugin<T, S>,
   ): void {
@@ -77,6 +119,22 @@ export class PluginManager {
     this.plugins.set(plugin.id, plugin);
   }
 
+  /**
+   * Starts a specific plugin by its ID.
+   * This involves:
+   * - Checking if the plugin exists and isn't already running.
+   * - Creating and providing the plugin API (settings, storage, etc.).
+   * - Checking if the plugin is enabled (if `disableToggle` is true), respecting its `defaultEnabled` status.
+   * - Injecting any CSS styles defined by the plugin into the document head.
+   * - Waiting for the plugin's settings and storage to be loaded.
+   * - Executing the plugin's `run` method.
+   * - Storing any cleanup function returned by `run` for later use in `stopPlugin`.
+   * - Marking the plugin as running and processing any backlogged events for it.
+   *
+   * @param {string} pluginId The ID of the plugin to start.
+   * @returns {Promise<void>} A promise that resolves when the plugin has started or is determined not to start (e.g., disabled).
+   * @throws {Error} If the plugin is not found, or if an error occurs during plugin initialization or execution.
+   */
   public async startPlugin(pluginId: string): Promise<void> {
     const plugin = this.plugins.get(pluginId);
     if (!plugin) {
@@ -93,10 +151,8 @@ export class PluginManager {
 
       // Check if plugin is enabled before starting
       if (plugin.disableToggle) {
-        const settings = await browser.storage.local.get(
-          `plugin.${pluginId}.settings`,
-        );
-        const pluginSettings = settings[`plugin.${pluginId}.settings`] as
+        const all = settingsState.getAll() as unknown as Record<string, unknown>;
+        const pluginSettings = all[`plugin.${pluginId}.settings`] as
           | PluginSettingsStorage
           | undefined;
         const enabled =
@@ -138,17 +194,36 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Attempts to start all registered plugins.
+   * Errors during the start of individual plugins are caught and logged,
+   * allowing other plugins to attempt to start.
+   *
+   * @returns {Promise<void>} A promise that resolves when all plugins have attempted to start.
+   *                          It uses `Promise.allSettled` to wait for all start operations.
+   */
   public async startAllPlugins(): Promise<void> {
     const startPromises = Array.from(this.plugins.keys()).map((id) =>
       this.startPlugin(id).catch((error) => {
         console.error(`Failed to start plugin "${id}":`, error);
-        return Promise.reject(error);
+        return Promise.reject(error); // Still reject to indicate failure for this specific plugin if needed by caller
       }),
     );
 
     await Promise.allSettled(startPromises);
   }
 
+  /**
+   * Stops a specific plugin by its ID.
+   * This involves:
+   * - Removing any CSS styles injected by the plugin.
+   * - Executing the cleanup function that was returned by the plugin's `run` method (if any).
+   * - Marking the plugin as not running.
+   * - Emitting a "plugin.stopped" event with the pluginId.
+   *
+   * @param {string} pluginId The ID of the plugin to stop.
+   * @returns {Promise<void>} A promise that resolves when the plugin has been stopped.
+   */
   public async stopPlugin(pluginId: string): Promise<void> {
     // Remove plugin styles
     const styleElement = this.styleElements.get(pluginId);
@@ -167,18 +242,47 @@ export class PluginManager {
     this.emit("plugin.stopped", pluginId);
   }
 
+  /**
+   * Stops all currently running plugins.
+   * Iterates through all registered plugins and calls `stopPlugin` for each.
+   */
   public stopAllPlugins(): void {
     Array.from(this.plugins.keys()).forEach((id) => this.stopPlugin(id));
   }
 
+  /**
+   * Retrieves a registered plugin by its ID.
+   *
+   * @param {string} pluginId The ID of the plugin to retrieve.
+   * @returns {Plugin | undefined} The plugin object if found, otherwise undefined.
+   */
   public getPlugin(pluginId: string): Plugin | undefined {
     return this.plugins.get(pluginId);
   }
 
+  /**
+   * Retrieves an array of all registered plugin objects.
+   *
+   * @returns {Plugin[]} An array containing all registered plugin objects.
+   */
   public getAllPlugins(): Plugin[] {
     return Array.from(this.plugins.values());
   }
 
+  /**
+   * Retrieves a structured list of settings for all registered plugins.
+   * This is primarily used for building user interfaces for plugin configuration.
+   * It processes each plugin's defined settings, adding IDs, titles, descriptions,
+   * and default enabled states. For plugins with `disableToggle`, an "enabled"
+   * boolean setting is automatically included.
+   *
+   * @returns {Array<object>} An array of objects, where each object represents a plugin
+   *                          and contains its ID, name, description, beta status,
+   *                          and a processed `settings` object. The `settings` object
+   *                          maps setting keys to their detailed configuration (type, title, etc.).
+   *                          The specific structure of each setting object within `settings`
+   *                          depends on its type (boolean, string, number, select, button, hotkey).
+   */
   public getAllPluginSettings(): Array<{
     pluginId: string;
     name: string;
@@ -195,16 +299,19 @@ export class PluginManager {
             options: Array<{ value: string; label: string }>;
           })
         | (Omit<ButtonSetting, "type"> & { type: "button"; id: string; trigger?: () => void | Promise<void> })
-        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string });
+        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string })
+        | (Omit<ComponentSetting, "type"> & { type: "component"; id: string; component: any });
     };
+    // Actual type is more complex, see original code, but this gives the gist for the JSDoc.
+    // Array<{ pluginId: string; name: string; description: string; beta?: boolean; settings: Record<string, ProcessedSetting>; disableToggle?: boolean; }>
   }> {
     return Array.from(this.plugins.entries()).map(([id, plugin]) => {
       const settingsEntries = Object.entries(plugin.settings).map(
         ([key, setting]) => {
           const settingObj = setting as any;
           let result: any;
-          if (settingObj.type === "button") {
-            // For button, keep the trigger function
+          if (settingObj.type === "button" || settingObj.type === "component") {
+            // For button or component, keep the functions
             result = { ...settingObj };
           } else {
             // For others, strip functions
@@ -245,10 +352,24 @@ export class PluginManager {
     });
   }
 
+  /**
+   * Checks if a specific plugin is currently running.
+   *
+   * @param {string} pluginId The ID of the plugin to check.
+   * @returns {boolean} True if the plugin is running, false otherwise.
+   */
   public isPluginRunning(pluginId: string): boolean {
     return this.runningPlugins.get(pluginId) || false;
   }
 
+  /**
+   * Emits an event to all registered listeners for that event.
+   * This is an internal event bus for the PluginManager itself.
+   *
+   * @private
+   * @param {string} event The name of the event to emit.
+   * @param {any[]} args Arguments to pass to the event listeners.
+   */
   private emit(event: string, ...args: any[]): void {
     const listeners = this.listeners.get(event);
     if (listeners) {
@@ -256,6 +377,12 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Registers an event listener for PluginManager's internal events.
+   *
+   * @param {string} event The name of the event to listen for (e.g., "plugin.stopped").
+   * @param {(...args: any[]) => void} callback The function to call when the event is emitted.
+   */
   public on(event: string, callback: (...args: any[]) => void): void {
     if (!this.listeners.has(event)) {
       this.listeners.set(event, new Set());
@@ -263,6 +390,12 @@ export class PluginManager {
     this.listeners.get(event)!.add(callback);
   }
 
+  /**
+   * Unregisters an event listener for PluginManager's internal events.
+   *
+   * @param {string} event The name of the event.
+   * @param {(...args: any[]) => void} callback The callback function to remove.
+   */
   public off(event: string, callback: (...args: any[]) => void): void {
     const listeners = this.listeners.get(event);
     if (listeners) {
@@ -270,7 +403,16 @@ export class PluginManager {
     }
   }
 
-  // Add handler for plugin enable/disable state changes
+  /**
+   * Handles the change in a plugin's enabled state.
+   * Starts or stops the plugin based on the new `enabled` value.
+   * This is typically called by `setupPluginStateListener` when a relevant storage change is detected.
+   *
+   * @private
+   * @param {string} pluginId The ID of the plugin whose state has changed.
+   * @param {boolean} enabled The new enabled state of the plugin.
+   * @returns {Promise<void>}
+   */
   private async handlePluginStateChange(
     pluginId: string,
     enabled: boolean,
@@ -282,7 +424,14 @@ export class PluginManager {
     }
   }
 
-  // Add listener for plugin settings changes
+  /**
+   * Sets up a listener for browser storage changes.
+   * This listener monitors changes to plugin settings (specifically the `enabled` property
+   * for plugins with `disableToggle: true`) and calls `handlePluginStateChange`
+   * to automatically start or stop plugins accordingly.
+   *
+   * @private
+   */
   private setupPluginStateListener(): void {
     browser.storage.onChanged.addListener(
       (changes: { [key: string]: StorageChange }, area: string) => {

src/plugins/core/settingsHelpers.ts

@@ -1,12 +1,24 @@
 import type {
   BooleanSetting,
   ButtonSetting,
+  ComponentSetting,
+  HotkeySetting,
   NumberSetting,
+  PluginSettings,
   SelectSetting,
   StringSetting,
-  HotkeySetting,
 } from "./types";
 
+/**
+ * Creates a complete `NumberSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "number".
+ * It's used for defining a numeric setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<NumberSetting, "type">} options The configuration options for the number setting,
+ *                                              excluding the `type` property (e.g., `title`, `default`, `min`, `max`).
+ * @returns {NumberSetting} A complete number setting object with `type: "number"`.
+ */
 export function numberSetting(
   options: Omit<NumberSetting, "type">,
 ): NumberSetting {
@@ -16,6 +28,16 @@ export function numberSetting(
   };
 }
 
+/**
+ * Creates a complete `BooleanSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "boolean".
+ * It's used for defining a boolean (true/false) setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<BooleanSetting, "type">} options The configuration options for the boolean setting,
+ *                                               excluding the `type` property (e.g., `title`, `default`).
+ * @returns {BooleanSetting} A complete boolean setting object with `type: "boolean"`.
+ */
 export function booleanSetting(
   options: Omit<BooleanSetting, "type">,
 ): BooleanSetting {
@@ -25,6 +47,16 @@ export function booleanSetting(
   };
 }
 
+/**
+ * Creates a complete `StringSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "string".
+ * It's used for defining a text-based setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<StringSetting, "type">} options The configuration options for the string setting,
+ *                                              excluding the `type` property (e.g., `title`, `default`, `placeholder`).
+ * @returns {StringSetting} A complete string setting object with `type: "string"`.
+ */
 export function stringSetting(
   options: Omit<StringSetting, "type">,
 ): StringSetting {
@@ -34,15 +66,36 @@ export function stringSetting(
   };
 }
 
-export function selectSetting<T extends string>(
-  options: Omit<SelectSetting<T>, "type">,
-): SelectSetting<T> {
+/**
+ * Creates a complete `SelectSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "select".
+ * It's used for defining a setting where the user can choose from a predefined list of options.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @template TValue - The type of the value for each option in the select list (extends string).
+ * @param {Omit<SelectSetting<TValue>, "type">} options The configuration options for the select setting,
+ *                                                     excluding the `type` property (e.g., `title`, `default`, `options` array).
+ * @returns {SelectSetting<TValue>} A complete select setting object with `type: "select"`.
+ */
+export function selectSetting<TValue extends string>(
+  options: Omit<SelectSetting<TValue>, "type">,
+): SelectSetting<TValue> {
   return {
     type: "select",
     ...options,
   };
 }
 
+/**
+ * Creates a complete `ButtonSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "button".
+ * It's used for defining a button in the plugin's settings UI, which can trigger an action.
+ * This function itself does not handle storage or persistence; it defines the button's structure and action.
+ *
+ * @param {Omit<ButtonSetting, "type">} options The configuration options for the button setting,
+ *                                              excluding the `type` property (e.g., `title`, `label`, `trigger` function).
+ * @returns {ButtonSetting} A complete button setting object with `type: "button"`.
+ */
 export function buttonSetting(
   options: Omit<ButtonSetting, "type">,
 ): ButtonSetting {
@@ -52,6 +105,26 @@ export function buttonSetting(
   };
 }
 
+/**
+ * Creates a complete `HotkeySetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "hotkey".
+ * It's used for defining a setting where the user can configure a keyboard shortcut.
+ * This function itself does not handle storage or persistence; it defines the hotkey setting's structure.
+ *
+ * @param {Omit<HotkeySetting, "type">} options The configuration options for the hotkey setting,
+ *                                              excluding the `type` property (e.g., `title`, `default` hotkey string).
+ * @returns {HotkeySetting} A complete hotkey setting object with `type: "hotkey"`.
+ */
+
+export function componentSetting(
+  options: Omit<ComponentSetting, "type">,
+): ComponentSetting {
+  return {
+    type: "component",
+    ...options,
+  };
+}
+
 export function hotkeySetting(
   options: Omit<HotkeySetting, "type">,
 ): HotkeySetting {
@@ -61,10 +134,42 @@ export function hotkeySetting(
   };
 }
 
-export function defineSettings<T extends Record<string, any>>(settings: T): T {
+/**
+ * Defines a collection of settings for a plugin.
+ * This function currently acts as an identity function, returning the settings object as is.
+ * Its primary purpose is to provide type inference and a structured way to define
+ * the entire settings configuration for a plugin, ensuring it conforms to the expected type.
+ * This function itself does not handle storage or persistence; it's for structural definition.
+ *
+ * @template TSettings - A record type where keys are setting names and values are setting definition objects
+ *                       (e.g., `NumberSetting`, `BooleanSetting`).
+ * @param {TSettings} settings The complete settings configuration object for the plugin.
+ * @returns {TSettings} The same settings configuration object, primarily for type checking/inference.
+ */
+export function defineSettings<TSettings extends Record<string, any>>(settings: TSettings): TSettings {
   return settings;
 }
 
+/**
+ * A property decorator for declaratively defining a plugin setting on a class property.
+ * When a class property is decorated with `@Setting({...})`, this decorator adds the
+ * provided setting definition (`settingDef`) to a static `settings` object on the
+ * class's prototype. This allows settings to be defined alongside their related class logic.
+ * This decorator itself does not handle runtime storage or persistence of setting *values*;
+ * it is for defining the *structure* and *metadata* of a setting.
+ *
+ * Example:
+ * ```typescript
+ * class MyPlugin extends BasePlugin {
+ *   @Setting(numberSetting({ title: "My Number", default: 10 }))
+ *   myNumberSetting: number; // Type annotation for the setting's value
+ * }
+ * ```
+ *
+ * @param {any} settingDef The setting definition object, typically created by one of the
+ *                         helper functions like `numberSetting(...)`, `booleanSetting(...)`, etc.
+ * @returns {PropertyDecorator} A property decorator function.
+ */
 export function Setting(settingDef: any): PropertyDecorator {
   return (target, propertyKey) => {
     const proto = target.constructor.prototype;

src/plugins/core/types.ts

@@ -48,13 +48,21 @@ export interface HotkeySetting {
   description?: string;
 }
 
+export interface ComponentSetting {
+  type: "component";
+  title: string;
+  description?: string;
+  component: any;
+}
+
 export type PluginSetting =
   | BooleanSetting
   | StringSetting
   | NumberSetting
   | SelectSetting<string>
   | ButtonSetting
-  | HotkeySetting;
+  | HotkeySetting
+  | ComponentSetting;
 
 export type PluginSettings = {
   [key: string]: PluginSetting;
@@ -71,6 +79,8 @@ export type SettingValue<T extends PluginSetting> = T extends BooleanSetting
         ? O
         : T extends HotkeySetting
           ? string
+          : T extends ComponentSetting
+            ? never
             : never;
 
 export type SettingsAPI<T extends PluginSettings> = {

src/plugins/index.ts

@@ -1,14 +1,19 @@
 import { PluginManager } from "./core/manager";
 
-// plugins
+// Lightweight plugins (load immediately)
 import timetablePlugin from "./built-in/timetable";
 import notificationCollectorPlugin from "./built-in/notificationCollector";
 import themesPlugin from "./built-in/themes";
 import animatedBackgroundPlugin from "./built-in/animatedBackground";
 import assessmentsAveragePlugin from "./built-in/assessmentsAverage";
-import globalSearchPlugin from "./built-in/globalSearch/src/core";
+import profilePicturePlugin from "./built-in/profilePicture";
+import assessmentsOverviewPlugin from "./built-in/assessmentsOverview";
+import backgroundMusicPlugin from "./built-in/backgroundMusic";
 //import testPlugin from './built-in/test';
 
+// Heavy plugins (lazy-loaded only when enabled)
+import globalSearchPluginLazy from "./built-in/globalSearch/lazy";
+
 // Initialize plugin manager
 const pluginManager = PluginManager.getInstance();
 
@@ -18,9 +23,14 @@ pluginManager.registerPlugin(animatedBackgroundPlugin);
 pluginManager.registerPlugin(assessmentsAveragePlugin);
 pluginManager.registerPlugin(notificationCollectorPlugin);
 pluginManager.registerPlugin(timetablePlugin);
-pluginManager.registerPlugin(globalSearchPlugin);
+pluginManager.registerPlugin(profilePicturePlugin);
+pluginManager.registerPlugin(assessmentsOverviewPlugin);
+pluginManager.registerPlugin(backgroundMusicPlugin);
 //pluginManager.registerPlugin(testPlugin);
 
+// Register heavy plugins with lazy loading
+pluginManager.registerPlugin(globalSearchPluginLazy);
+
 export { init as Monofile } from "./monofile";
 
 export async function initializePlugins(): Promise<void> {

src/plugins/monofile.ts

@@ -23,7 +23,10 @@ import { updateAllColors } from "@/seqta/ui/colors/Manager";
 import loading from "@/seqta/ui/Loading";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
-import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
+import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
+import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification";
+
+import { updateTimetableTimes } from "@/seqta/utils/updateTimetableTimes";
 
 // JSON content
 import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
@@ -91,7 +94,12 @@ export async function finishLoad() {
     console.error("Error during loading cleanup:", err);
   }
 
-  if (settingsState.justupdated && !document.getElementById("whatsnewbk")) {
+  // Check and show privacy statement notification (before what's new)
+  if (!document.getElementById("privacy-notification")) {
+    await showPrivacyNotification();
+  }
+
+  if (settingsState.justupdated && !document.getElementById("whatsnewbk") && !document.getElementById("privacy-notification")) {
     OpenWhatsNewPopup();
   }
 }
@@ -241,14 +249,16 @@ async function LoadPageElements(): Promise<void> {
     handleReports,
   );
 
-  /* eventManager.register(
+  eventManager.register(
     "timetableAdded",
     {
       elementType: "div",
       className: "timetablepage",
     },
-    handleTimetable,
-  ) */
+    async () => {
+      await updateTimetableTimes();
+    },
+  );
 
   eventManager.register(
     "noticesAdded",
@@ -503,7 +513,7 @@ export async function ObserveMenuItemPosition() {
         return;
       }
 
-      if (!node?.dataset?.checked && !MenuOptionsOpen) {
+      if (!MenuOptionsOpen) {
         const key =
           MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey];
         if (key) {
@@ -626,6 +636,7 @@ export function init() {
     }, 1000);
   } else {
     handleDisabled();
+    InjectCustomIcons();
     window.addEventListener("load", handleDisabled);
   }
 }

src/seqta/main.ts

@@ -16,9 +16,9 @@ export async function main() {
       if (settingsState.onoff) {
         injectPageState();
 
-        // TEMP FIX for bug! -> this is a hack to get the injected.css file to have HMR in development mode as this import system is currently broken with crxjs
+        // Rather permanent FIX for bug! -> this is a hack to get the injected.css file to have HMR in development mode as this import system is currently broken with crxjs
         if (import.meta.env.MODE === "development") {
-          import("../css/injected.scss");
+          import("@/css/injected.scss");
         } else {
           const injectedStyle = document.createElement("style");
           injectedStyle.textContent = injectedCSS;