feat: optimize asset delivery with build-time compression and encoding negotiation

feat: show search duration and result count feedback
fix: remove out:fade transition from CourseTable
2026-01-31 08:23:35 -06:00 · 2026-01-29 13:56:10 -06:00 · 2026-01-29 13:15:25 -06:00 · 2026-01-29 13:08:45 -06:00 · 2026-01-29 12:56:51 -06:00 · 2026-01-29 12:27:46 -06:00
64 changed files with 4509 additions and 941 deletions
@@ -26,6 +26,21 @@ dependencies = [
 "memchr",
 ]

+[[package]]
+name = "alloc-no-stdlib"
+version = "2.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc7bb162ec39d46ab1ca8c77bf72e890535becd1751bb45f64c597edb4c8c6b3"
+
+[[package]]
+name = "alloc-stdlib"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94fb8275041c72129eb51b7d0322c29b8387a0386127718b096429201a5d6ece"
+dependencies = [
+ "alloc-no-stdlib",
+]
+
 [[package]]
 name = "allocator-api2"
 version = "0.2.21"
@@ -106,6 +121,19 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "async-compression"
+version = "0.4.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93c1f86859c1af3d514fa19e8323147ff10ea98684e6c7b307912509f50e67b2"
+dependencies = [
+ "compression-codecs",
+ "compression-core",
+ "futures-core",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "async-trait"
 version = "0.1.89"
@@ -149,9 +177,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"

 [[package]]
 name = "axum"
-version = "0.8.4"
+version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "021e862c184ae977658b36c4500f7feac3221ca5da43e3f25bd04ab6c79a29b5"
+checksum = "8b52af3cb4058c895d37317bb27508dccc8e5f2d39454016b297bf4a400597b8"
 dependencies = [
 "axum-core",
 "bytes",
@@ -168,8 +196,7 @@ dependencies = [
 "mime",
 "percent-encoding",
 "pin-project-lite",
- "rustversion",
- "serde",
+ "serde_core",
 "serde_json",
 "serde_path_to_error",
 "serde_urlencoded",
@@ -183,9 +210,9 @@ dependencies = [

 [[package]]
 name = "axum-core"
-version = "0.5.2"
+version = "0.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68464cd0412f486726fb3373129ef5d2993f90c34bc2bc1c1e9943b2f4fc7ca6"
+checksum = "08c78f31d7b1291f7ee735c1c6780ccde7785daae9a9206026862dab7d8792d1"
 dependencies = [
 "bytes",
 "futures-core",
@@ -194,13 +221,37 @@ dependencies = [
 "http-body-util",
 "mime",
 "pin-project-lite",
- "rustversion",
 "sync_wrapper 1.0.2",
 "tower-layer",
 "tower-service",
 "tracing",
 ]

+[[package]]
+name = "axum-extra"
+version = "0.12.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fef252edff26ddba56bbcdf2ee3307b8129acb86f5749b68990c168a6fcc9c76"
+dependencies = [
+ "axum",
+ "axum-core",
+ "bytes",
+ "form_urlencoded",
+ "futures-core",
+ "futures-util",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "serde_core",
+ "serde_html_form",
+ "serde_path_to_error",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.75"
@@ -218,11 +269,12 @@ dependencies = [

 [[package]]
 name = "banner"
-version = "0.3.4"
+version = "0.5.0"
 dependencies = [
 "anyhow",
 "async-trait",
 "axum",
+ "axum-extra",
 "bitflags 2.9.4",
 "chrono",
 "clap",
@@ -260,6 +312,7 @@ dependencies = [
 "tracing-subscriber",
 "ts-rs",
 "url",
+ "urlencoding",
 "yansi",
 ]

@@ -305,6 +358,27 @@ dependencies = [
 "generic-array",
 ]

+[[package]]
+name = "brotli"
+version = "8.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4bd8b9603c7aa97359dbd97ecf258968c95f3adddd6db2f7e7a5bef101c84560"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+ "brotli-decompressor",
+]
+
+[[package]]
+name = "brotli-decompressor"
+version = "5.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "874bb8112abecc98cbd6d81ea4fa7e94fb9449648c93cc89aa40c81c24d7de03"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+]
+
 [[package]]
 name = "bstr"
 version = "1.12.0"
@@ -382,6 +456,8 @@ version = "1.2.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42bc4aea80032b7bf409b0bc7ccad88853858911b7713a8062fdc0623867bedc"
 dependencies = [
+ "jobserver",
+ "libc",
 "shlex",
 ]

@@ -476,6 +552,26 @@ dependencies = [
 "time",
 ]

+[[package]]
+name = "compression-codecs"
+version = "0.4.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "680dc087785c5230f8e8843e2e57ac7c1c90488b6a91b88caa265410568f441b"
+dependencies = [
+ "brotli",
+ "compression-core",
+ "flate2",
+ "memchr",
+ "zstd",
+ "zstd-safe",
+]
+
+[[package]]
+name = "compression-core"
+version = "0.4.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75984efb6ed102a0d42db99afb6c1948f0380d1d91808d5529916e6c08b49d8d"
+
 [[package]]
 name = "concurrent-queue"
 version = "2.5.0"
@@ -1617,6 +1713,16 @@ version = "1.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c"

+[[package]]
+name = "jobserver"
+version = "0.1.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9afb3de4395d6b3e67a780b6de64b51c978ecf11cb9a462c66be7d4ca9039d33"
+dependencies = [
+ "getrandom 0.3.3",
+ "libc",
+]
+
 [[package]]
 name = "js-sys"
 version = "0.3.77"
@@ -2688,9 +2794,19 @@ dependencies = [

 [[package]]
 name = "serde"
-version = "1.0.219"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5f0e2c6ed6606019b4e29e69dbaba95b11854410e5347d525002456dbbb786b6"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
 dependencies = [
 "serde_derive",
 ]
@@ -2706,15 +2822,28 @@ dependencies = [

 [[package]]
 name = "serde_derive"
-version = "1.0.219"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b0276cf7f2c73365f7157c8123c21cd9a50fbbd844757af28ca1f5925fc2a00"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
 "proc-macro2",
 "quote",
 "syn 2.0.106",
 ]

+[[package]]
+name = "serde_html_form"
+version = "0.2.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2f2d7ff8a2140333718bb329f5c40fc5f0865b84c426183ce14c97d2ab8154f"
+dependencies = [
+ "form_urlencoded",
+ "indexmap",
+ "itoa",
+ "ryu",
+ "serde_core",
+]
+
 [[package]]
 name = "serde_json"
 version = "1.0.143"
@@ -3555,14 +3684,17 @@ version = "0.6.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "adc82fd73de2a9722ac5da747f12383d2bfdb93591ee6c58486e0097890f05f2"
 dependencies = [
+ "async-compression",
 "bitflags 2.9.4",
 "bytes",
+ "futures-core",
 "futures-util",
 "http 1.3.1",
 "http-body 1.0.1",
 "iri-string",
 "pin-project-lite",
 "tokio",
+ "tokio-util",
 "tower",
 "tower-layer",
 "tower-service",
@@ -3674,6 +3806,7 @@ version = "11.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4994acea2522cd2b3b85c1d9529a55991e3ad5e25cdcd3de9d505972c4379424"
 dependencies = [
+ "chrono",
 "serde_json",
 "thiserror 2.0.16",
 "ts-rs-macros",
@@ -3813,6 +3946,12 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
 [[package]]
 name = "utf-8"
 version = "0.7.6"
@@ -4508,3 +4647,31 @@ dependencies = [
 "quote",
 "syn 2.0.106",
 ]
+
+[[package]]
+name = "zstd"
+version = "0.13.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e91ee311a569c327171651566e07972200e76fcfe2242a4fa446149a3881c08a"
+dependencies = [
+ "zstd-safe",
+]
+
+[[package]]
+name = "zstd-safe"
+version = "7.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f49c4d5f0abb602a93fb8736af2a4f4dd9512e36f7f570d66e65ff867ed3b9d"
+dependencies = [
+ "zstd-sys",
+]
+
+[[package]]
+name = "zstd-sys"
+version = "2.0.16+zstd.1.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91e19ebc2adc8f83e43039e79776e3fda8ca919132d68a1fed6a5faca2683748"
+dependencies = [
+ "cc",
+ "pkg-config",
+]
@@ -1,6 +1,6 @@
 [package]
 name = "banner"
-version = "0.3.4"
+version = "0.5.0"
 edition = "2024"
 default-run = "banner"

@@ -48,15 +48,17 @@ url = "2.5"
 governor = "0.10.1"
 serde_path_to_error = "0.1.17"
 num-format = "0.4.4"
-tower-http = { version = "0.6.0", features = ["cors", "trace", "timeout"] }
+tower-http = { version = "0.6.0", features = ["cors", "trace", "timeout", "compression-full"] }
 rust-embed = { version = "8.0", features = ["include-exclude"], optional = true }
 mime_guess = { version = "2.0", optional = true }
 clap = { version = "4.5", features = ["derive"] }
 rapidhash = "4.1.0"
 yansi = "1.0.1"
 extension-traits = "2"
-ts-rs = { version = "11.1.0", features = ["serde-compat", "serde-json-impl"] }
+ts-rs = { version = "11.1.0", features = ["chrono-impl", "serde-compat", "serde-json-impl"] }
 html-escape = "0.2.13"
+axum-extra = { version = "0.12.5", features = ["query"] }
+urlencoding = "2.1.3"

 [dev-dependencies]

@@ -7,6 +7,9 @@ FROM oven/bun:1 AS frontend-builder

 WORKDIR /app

+# Install zstd for pre-compression
+RUN apt-get update && apt-get install -y --no-install-recommends zstd && rm -rf /var/lib/apt/lists/*
+
 # Copy backend Cargo.toml for build-time version retrieval
 COPY ./Cargo.toml ./

@@ -19,8 +22,8 @@ RUN bun install --frozen-lockfile
 # Copy frontend source code
 COPY ./web ./

-# Build frontend
-RUN bun run build
+# Build frontend, then pre-compress static assets (gzip, brotli, zstd)
+RUN bun run build && bun run scripts/compress-assets.ts

 # --- Chef Base Stage ---
 FROM lukemathwalker/cargo-chef:latest-rust-${RUST_VERSION} AS chef
@@ -4,10 +4,33 @@

 The Banner project is built as a multi-service application with the following components:

- **Discord Bot Service**: Handles Discord interactions and commands
- **Web Service**: Serves the React frontend and provides API endpoints
- **Scraper Service**: Background data collection and synchronization
- **Database Layer**: PostgreSQL for persistent storage
+- **Discord Bot Service**: Handles Discord interactions and commands (Serenity/Poise)
+- **Web Service**: Axum HTTP server serving the SvelteKit frontend and REST API endpoints
+- **Scraper Service**: Background data collection and synchronization with job queue
+- **Database Layer**: PostgreSQL 17 for persistent storage (SQLx with compile-time verification)
+- **RateMyProfessors Client**: GraphQL-based bulk sync of professor ratings
+
+### Frontend Stack
+
+- **SvelteKit** with Svelte 5 runes (`$state`, `$derived`, `$effect`)
+- **Tailwind CSS v4** via `@tailwindcss/vite`
+- **bits-ui** for headless UI primitives (comboboxes, tooltips, dropdowns)
+- **TanStack Table** for interactive data tables with sorting and column control
+- **OverlayScrollbars** for styled, theme-aware scrollable areas
+- **ts-rs** generates TypeScript type bindings from Rust structs
+
+### API Endpoints
+
+| Endpoint | Description |
+|---|---|
+| `GET /api/health` | Health check |
+| `GET /api/status` | Service status, version, and commit hash |
+| `GET /api/metrics` | Basic metrics |
+| `GET /api/courses/search` | Paginated course search with filters (term, subject, query, open-only, sort) |
+| `GET /api/courses/:term/:crn` | Single course detail with instructors and RMP ratings |
+| `GET /api/terms` | Available terms from reference cache |
+| `GET /api/subjects?term=` | Subjects for a term, ordered by enrollment |
+| `GET /api/reference/:category` | Reference data lookups (campuses, instructional methods, etc.) |

 ## Technical Analysis

@@ -6,7 +6,41 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).

 ## [Unreleased]

-## [0.1.0] - 2026-01
+## [0.5.0] - 2026-01-29
+
+### Added
+
+- Multi-select subject filtering with searchable comboboxes.
+- Smart instructor name abbreviation for compact table display.
+- Delivery mode indicators and tooltips in location column.
+- Page selector dropdown with animated pagination controls.
+- FLIP animations for smooth table row transitions during pagination.
+- Time tooltip with detailed meeting schedule and day abbreviations.
+- Reusable SimpleTooltip component for consistent UI hints.
+
+### Changed
+
+- Consolidated query logic and eliminated N+1 instructor loads via batch fetching.
+- Consolidated menu snippets and strengthened component type safety.
+- Enhanced table scrolling with OverlayScrollbars and theme-aware styling.
+- Eliminated initial theme flash on page load.
+
+## [0.4.0] - 2026-01-28
+
+### Added
+
+- Web-based course search UI with interactive data table, multi-column sorting, and column visibility controls.
+- TypeScript type bindings generated from Rust types via ts-rs.
+- RateMyProfessors integration: bulk professor sync via GraphQL and inline rating display in search results.
+- Course detail expansion panel with enrollment, meeting times, and instructor info.
+- OverlayScrollbars integration for styled, theme-aware scrollable areas.
+- Pagination component for navigating large search result sets.
+- Footer component with version display.
+- API endpoints: `/api/courses/search`, `/api/courses/:term/:crn`, `/api/terms`, `/api/subjects`, `/api/reference/:category`.
+- Frontend API client with typed request/response handling and test coverage.
+- Course formatting utilities with comprehensive unit tests.
+
+## [0.3.4] - 2026-01

 ### Added

@@ -4,7 +4,8 @@ This folder contains detailed documentation for the Banner project. This file ac

 ## Files

- [`FEATURES.md`](FEATURES.md) - Current features, implemented functionality, and future roadmap
+- [`CHANGELOG.md`](CHANGELOG.md) - Notable changes by version
+- [`ROADMAP.md`](ROADMAP.md) - Planned features and priorities
 - [`BANNER.md`](BANNER.md) - General API documentation on the Banner system
 - [`ARCHITECTURE.md`](ARCHITECTURE.md) - Technical implementation details, system design, and analysis

@@ -3,12 +3,9 @@
 ## Now

 - **Notification and subscription system** - Subscribe to courses and get alerts on seat availability, waitlist movement, and detail changes (time, location, professor, seats). DB schema exists.
- **RateMyProfessor integration** - Show professor ratings inline with search results and course details.
 - **Professor name search filter** - Filter search results by instructor. Backend code exists but is commented out.
- **Subject/major search filter** - Search by department code (e.g. CS, MAT). Also partially implemented.
 - **Autocomplete for search fields** - Typeahead for course titles, course numbers, professors, and terms.
- **Test coverage expansion** - Broaden coverage with pure function tests (term parsing, search parsing, job types), session/rate-limiter tests, and more DB integration tests.
- **Web course search UI** - Add a browser-based course search interface to the dashboard, supplementing the Discord bot.
+- **Test coverage expansion** - Broaden coverage with session/rate-limiter tests and more DB integration tests.

 ## Soon

@@ -29,3 +26,10 @@
 - **CRN direct lookup** - Look up a course by its CRN without going through search.
 - **Metrics dashboard** - Surface scraper and service metrics visually on the web dashboard.
 - **Privileged error feedback** - Detailed error information surfaced to bot admins when commands fail.
+
+## Done
+
+- **Web course search UI** - Browser-based course search with interactive data table, sorting, pagination, and column controls. *(0.4.0)*
+- **RateMyProfessor integration** - Bulk professor sync via GraphQL with inline ratings in search results. *(0.4.0)*
+- **Subject/major search filter** - Multi-select subject filtering with searchable comboboxes. *(0.5.0)*
+- **Test coverage expansion** - Unit tests for course formatting, API client, query builder, CLI args, and config parsing. *(0.3.4–0.4.0)*
@@ -0,0 +1,19 @@
+CREATE TABLE users (
+    discord_id BIGINT PRIMARY KEY,
+    discord_username TEXT NOT NULL,
+    discord_avatar_hash TEXT,
+    is_admin BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE user_sessions (
+    id TEXT PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(discord_id) ON DELETE CASCADE,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+    expires_at TIMESTAMPTZ NOT NULL,
+    last_active_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE INDEX idx_user_sessions_user_id ON user_sessions(user_id);
+CREATE INDEX idx_user_sessions_expires_at ON user_sessions(expires_at);
@@ -6,6 +6,7 @@ use crate::services::bot::BotService;
 use crate::services::manager::ServiceManager;
 use crate::services::web::WebService;
 use crate::state::AppState;
+use crate::web::auth::AuthConfig;
 use anyhow::Context;
 use figment::value::UncasedStr;
 use figment::{Figment, providers::Env};
@@ -84,6 +85,14 @@ impl App {
            info!(error = ?e, "Could not load reference cache on startup (may be empty)");
        }

+        // Seed the initial admin user if configured
+        if let Some(admin_id) = config.admin_discord_id {
+            let user = crate::data::users::ensure_seed_admin(&db_pool, admin_id as i64)
+                .await
+                .context("Failed to seed admin user")?;
+            info!(discord_id = admin_id, username = %user.discord_username, "Seed admin ensured");
+        }
+
        Ok(App {
            config,
            db_pool,
@@ -97,7 +106,16 @@ impl App {
    pub fn setup_services(&mut self, services: &[ServiceName]) -> Result<(), anyhow::Error> {
        // Register enabled services with the manager
        if services.contains(&ServiceName::Web) {
-            let web_service = Box::new(WebService::new(self.config.port, self.app_state.clone()));
+            let auth_config = AuthConfig {
+                client_id: self.config.discord_client_id.clone(),
+                client_secret: self.config.discord_client_secret.clone(),
+                redirect_base: self.config.discord_redirect_uri.clone(),
+            };
+            let web_service = Box::new(WebService::new(
+                self.config.port,
+                self.app_state.clone(),
+                auth_config,
+            ));
            self.service_manager
                .register_service(ServiceName::Web.as_str(), web_service);
        }
@@ -320,10 +320,11 @@ pub enum MeetingType {
    Unknown(String),
 }

-impl MeetingType {
-    /// Parse from the meeting type string
-    pub fn from_string(s: &str) -> Self {
-        match s {
+impl std::str::FromStr for MeetingType {
+    type Err = std::convert::Infallible;
+
+    fn from_str(s: &str) -> std::result::Result<Self, Self::Err> {
+        Ok(match s {
            "HB" | "H2" | "H1" => MeetingType::HybridBlended,
            "OS" => MeetingType::OnlineSynchronous,
            "OA" => MeetingType::OnlineAsynchronous,
@@ -331,9 +332,11 @@ impl MeetingType {
            "ID" => MeetingType::IndependentStudy,
            "FF" => MeetingType::FaceToFace,
            other => MeetingType::Unknown(other.to_string()),
-        }
+        })
    }
+}

+impl MeetingType {
    /// Get description for the meeting type
    pub fn description(&self) -> &'static str {
        match self {
@@ -424,7 +427,7 @@ impl MeetingScheduleInfo {
                        end: now,
                    }
                });
-        let meeting_type = MeetingType::from_string(&meeting_time.meeting_type);
+        let meeting_type: MeetingType = meeting_time.meeting_type.parse().unwrap();
        let location = MeetingLocation::from_meeting_time(meeting_time);
        let duration_weeks = date_range.weeks_duration();

@@ -10,8 +10,9 @@ pub struct Range {
    pub high: i32,
 }

-/// Builder for constructing Banner API search queries
+/// Builder for constructing Banner API search queries.
 #[derive(Debug, Clone, Default)]
+#[allow(dead_code)]
 pub struct SearchQuery {
    subject: Option<String>,
    title: Option<String>,
@@ -32,6 +33,7 @@ pub struct SearchQuery {
    course_number_range: Option<Range>,
 }

+#[allow(dead_code)]
 impl SearchQuery {
    /// Creates a new SearchQuery with default values
    pub fn new() -> Self {
@@ -67,7 +69,6 @@ impl SearchQuery {
    }

    /// Adds a keyword to the query
-    #[allow(dead_code)]
    pub fn keyword<S: Into<String>>(mut self, keyword: S) -> Self {
        match &mut self.keywords {
            Some(keywords) => keywords.push(keyword.into()),
@@ -77,63 +78,54 @@ impl SearchQuery {
    }

    /// Sets whether to search for open courses only
-    #[allow(dead_code)]
    pub fn open_only(mut self, open_only: bool) -> Self {
        self.open_only = Some(open_only);
        self
    }

    /// Sets the term part for the query
-    #[allow(dead_code)]
    pub fn term_part(mut self, term_part: Vec<String>) -> Self {
        self.term_part = Some(term_part);
        self
    }

    /// Sets the campuses for the query
-    #[allow(dead_code)]
    pub fn campus(mut self, campus: Vec<String>) -> Self {
        self.campus = Some(campus);
        self
    }

    /// Sets the instructional methods for the query
-    #[allow(dead_code)]
    pub fn instructional_method(mut self, instructional_method: Vec<String>) -> Self {
        self.instructional_method = Some(instructional_method);
        self
    }

    /// Sets the attributes for the query
-    #[allow(dead_code)]
    pub fn attributes(mut self, attributes: Vec<String>) -> Self {
        self.attributes = Some(attributes);
        self
    }

    /// Sets the instructors for the query
-    #[allow(dead_code)]
    pub fn instructor(mut self, instructor: Vec<u64>) -> Self {
        self.instructor = Some(instructor);
        self
    }

    /// Sets the start time for the query
-    #[allow(dead_code)]
    pub fn start_time(mut self, start_time: Duration) -> Self {
        self.start_time = Some(start_time);
        self
    }

    /// Sets the end time for the query
-    #[allow(dead_code)]
    pub fn end_time(mut self, end_time: Duration) -> Self {
        self.end_time = Some(end_time);
        self
    }

    /// Sets the credit range for the query
-    #[allow(dead_code)]
    pub fn credits(mut self, low: i32, high: i32) -> Self {
        self.min_credits = Some(low);
        self.max_credits = Some(high);
@@ -141,14 +133,12 @@ impl SearchQuery {
    }

    /// Sets the minimum credits for the query
-    #[allow(dead_code)]
    pub fn min_credits(mut self, value: i32) -> Self {
        self.min_credits = Some(value);
        self
    }

    /// Sets the maximum credits for the query
-    #[allow(dead_code)]
    pub fn max_credits(mut self, value: i32) -> Self {
        self.max_credits = Some(value);
        self
@@ -161,7 +151,6 @@ impl SearchQuery {
    }

    /// Sets the offset for pagination
-    #[allow(dead_code)]
    pub fn offset(mut self, offset: i32) -> Self {
        self.offset = offset;
        self
@@ -47,6 +47,19 @@ pub struct Config {
    /// Rate limiting configuration for Banner API requests
    #[serde(default = "default_rate_limiting")]
    pub rate_limiting: RateLimitingConfig,
+
+    /// Discord OAuth2 client ID for web authentication
+    #[serde(deserialize_with = "deserialize_string_or_uint")]
+    pub discord_client_id: String,
+    /// Discord OAuth2 client secret for web authentication
+    pub discord_client_secret: String,
+    /// Optional base URL override for OAuth2 redirect (e.g. "https://banner.xevion.dev").
+    /// When unset, the redirect URI is derived from the incoming request's Origin/Host.
+    #[serde(default)]
+    pub discord_redirect_uri: Option<String>,
+    /// Discord user ID to seed as initial admin on startup (optional)
+    #[serde(default)]
+    pub admin_discord_id: Option<u64>,
 }

 /// Default log level of "info"
@@ -216,6 +229,43 @@ where
    deserializer.deserialize_any(DurationVisitor)
 }

+/// Deserializes a value that may arrive as either a string or unsigned integer.
+///
+/// Figment's env provider infers types from raw values, so numeric-looking strings
+/// like Discord client IDs get parsed as integers. This accepts both forms.
+fn deserialize_string_or_uint<'de, D>(deserializer: D) -> Result<String, D::Error>
+where
+    D: Deserializer<'de>,
+{
+    use serde::de::Visitor;
+
+    struct StringOrUintVisitor;
+
+    impl<'de> Visitor<'de> for StringOrUintVisitor {
+        type Value = String;
+
+        fn expecting(&self, formatter: &mut std::fmt::Formatter) -> std::fmt::Result {
+            formatter.write_str("a string or unsigned integer")
+        }
+
+        fn visit_str<E>(self, value: &str) -> Result<Self::Value, E>
+        where
+            E: serde::de::Error,
+        {
+            Ok(value.to_owned())
+        }
+
+        fn visit_u64<E>(self, value: u64) -> Result<Self::Value, E>
+        where
+            E: serde::de::Error,
+        {
+            Ok(value.to_string())
+        }
+    }
+
+    deserializer.deserialize_any(StringOrUintVisitor)
+}
+
 #[cfg(test)]
 mod tests {
    use super::*;
@@ -1,8 +1,74 @@
 //! Database query functions for courses, used by the web API.

-use crate::data::models::Course;
+use crate::data::models::{Course, CourseInstructorDetail};
 use crate::error::Result;
 use sqlx::PgPool;
+use std::collections::HashMap;
+
+/// Column to sort search results by.
+#[derive(Debug, Clone, Copy, serde::Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum SortColumn {
+    CourseCode,
+    Title,
+    Instructor,
+    Time,
+    Seats,
+}
+
+/// Sort direction.
+#[derive(Debug, Clone, Copy, serde::Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum SortDirection {
+    Asc,
+    Desc,
+}
+
+/// Shared WHERE clause for course search filters.
+///
+/// Parameters $1-$8 match the bind order in `search_courses`.
+const SEARCH_WHERE: &str = r#"
+    WHERE term_code = $1
+      AND ($2::text[] IS NULL OR subject = ANY($2))
+      AND ($3::text IS NULL OR title_search @@ plainto_tsquery('simple', $3) OR title ILIKE '%' || $3 || '%')
+      AND ($4::int IS NULL OR course_number::int >= $4)
+      AND ($5::int IS NULL OR course_number::int <= $5)
+      AND ($6::bool = false OR max_enrollment > enrollment)
+      AND ($7::text IS NULL OR instructional_method = $7)
+      AND ($8::text IS NULL OR campus = $8)
+"#;
+
+/// Build a safe ORDER BY clause from typed sort parameters.
+///
+/// All column names are hardcoded string literals — no caller input is interpolated.
+fn sort_clause(column: Option<SortColumn>, direction: Option<SortDirection>) -> String {
+    let dir = match direction.unwrap_or(SortDirection::Asc) {
+        SortDirection::Asc => "ASC",
+        SortDirection::Desc => "DESC",
+    };
+
+    match column {
+        Some(SortColumn::CourseCode) => {
+            format!("subject {dir}, course_number {dir}, sequence_number {dir}")
+        }
+        Some(SortColumn::Title) => format!("title {dir}"),
+        Some(SortColumn::Instructor) => {
+            format!(
+                "(SELECT i.display_name FROM course_instructors ci \
+                 JOIN instructors i ON i.banner_id = ci.instructor_id \
+                 WHERE ci.course_id = courses.id AND ci.is_primary = true \
+                 LIMIT 1) {dir} NULLS LAST"
+            )
+        }
+        Some(SortColumn::Time) => {
+            format!("(meeting_times->0->>'begin_time') {dir} NULLS LAST")
+        }
+        Some(SortColumn::Seats) => {
+            format!("(max_enrollment - enrollment) {dir}")
+        }
+        None => "subject ASC, course_number ASC, sequence_number ASC".to_string(),
+    }
+}

 /// Search courses by term with optional filters.
 ///
@@ -12,7 +78,7 @@ use sqlx::PgPool;
 pub async fn search_courses(
    db_pool: &PgPool,
    term_code: &str,
-    subject: Option<&str>,
+    subject: Option<&[String]>,
    title_query: Option<&str>,
    course_number_low: Option<i32>,
    course_number_high: Option<i32>,
@@ -21,32 +87,16 @@ pub async fn search_courses(
    campus: Option<&str>,
    limit: i32,
    offset: i32,
-    order_by: &str,
+    sort_by: Option<SortColumn>,
+    sort_dir: Option<SortDirection>,
 ) -> Result<(Vec<Course>, i64)> {
-    // Build WHERE clauses dynamically via parameter binding + COALESCE trick:
-    // each optional filter uses ($N IS NULL OR column = $N) so NULL means "no filter".
-    //
-    // ORDER BY is interpolated as a string since column names can't be bound as
-    // parameters. The caller must provide a safe, pre-validated clause (see
-    // `sort_clause` in routes.rs).
-    let query = format!(
-        r#"
-        SELECT *
-        FROM courses
-        WHERE term_code = $1
-          AND ($2::text IS NULL OR subject = $2)
-          AND ($3::text IS NULL OR title_search @@ plainto_tsquery('simple', $3) OR title ILIKE '%' || $3 || '%')
-          AND ($4::int IS NULL OR course_number::int >= $4)
-          AND ($5::int IS NULL OR course_number::int <= $5)
-          AND ($6::bool = false OR max_enrollment > enrollment)
-          AND ($7::text IS NULL OR instructional_method = $7)
-          AND ($8::text IS NULL OR campus = $8)
-        ORDER BY {order_by}
-        LIMIT $9 OFFSET $10
-        "#
-    );
+    let order_by = sort_clause(sort_by, sort_dir);

-    let courses = sqlx::query_as::<_, Course>(&query)
+    let data_query =
+        format!("SELECT * FROM courses {SEARCH_WHERE} ORDER BY {order_by} LIMIT $9 OFFSET $10");
+    let count_query = format!("SELECT COUNT(*) FROM courses {SEARCH_WHERE}");
+
+    let courses = sqlx::query_as::<_, Course>(&data_query)
        .bind(term_code)
        .bind(subject)
        .bind(title_query)
@@ -60,30 +110,17 @@ pub async fn search_courses(
        .fetch_all(db_pool)
        .await?;

-    let total: (i64,) = sqlx::query_as(
-        r#"
-        SELECT COUNT(*)
-        FROM courses
-        WHERE term_code = $1
-          AND ($2::text IS NULL OR subject = $2)
-          AND ($3::text IS NULL OR title_search @@ plainto_tsquery('simple', $3) OR title ILIKE '%' || $3 || '%')
-          AND ($4::int IS NULL OR course_number::int >= $4)
-          AND ($5::int IS NULL OR course_number::int <= $5)
-          AND ($6::bool = false OR max_enrollment > enrollment)
-          AND ($7::text IS NULL OR instructional_method = $7)
-          AND ($8::text IS NULL OR campus = $8)
-        "#,
-    )
-    .bind(term_code)
-    .bind(subject)
-    .bind(title_query)
-    .bind(course_number_low)
-    .bind(course_number_high)
-    .bind(open_only)
-    .bind(instructional_method)
-    .bind(campus)
-    .fetch_one(db_pool)
-    .await?;
+    let total: (i64,) = sqlx::query_as(&count_query)
+        .bind(term_code)
+        .bind(subject)
+        .bind(title_query)
+        .bind(course_number_low)
+        .bind(course_number_high)
+        .bind(open_only)
+        .bind(instructional_method)
+        .bind(campus)
+        .fetch_one(db_pool)
+        .await?;

    Ok((courses, total.0))
 }
@@ -103,33 +140,16 @@ pub async fn get_course_by_crn(
    Ok(course)
 }

-/// Get instructors for a course by course ID.
-///
-/// Returns `(banner_id, display_name, email, is_primary, rmp_avg_rating, rmp_num_ratings)` tuples.
+/// Get instructors for a single course by course ID.
 pub async fn get_course_instructors(
    db_pool: &PgPool,
    course_id: i32,
-) -> Result<
-    Vec<(
-        String,
-        String,
-        Option<String>,
-        bool,
-        Option<f32>,
-        Option<i32>,
-    )>,
-> {
-    let rows: Vec<(
-        String,
-        String,
-        Option<String>,
-        bool,
-        Option<f32>,
-        Option<i32>,
-    )> = sqlx::query_as(
+) -> Result<Vec<CourseInstructorDetail>> {
+    let rows = sqlx::query_as::<_, CourseInstructorDetail>(
        r#"
        SELECT i.banner_id, i.display_name, i.email, ci.is_primary,
-               rp.avg_rating, rp.num_ratings
+               rp.avg_rating, rp.num_ratings,
+               ci.course_id
        FROM course_instructors ci
        JOIN instructors i ON i.banner_id = ci.instructor_id
        LEFT JOIN rmp_professors rp ON rp.legacy_id = i.rmp_legacy_id
@@ -143,6 +163,68 @@ pub async fn get_course_instructors(
    Ok(rows)
 }

+/// Batch-fetch instructors for multiple courses in a single query.
+///
+/// Returns a map of `course_id → Vec<CourseInstructorDetail>`.
+pub async fn get_instructors_for_courses(
+    db_pool: &PgPool,
+    course_ids: &[i32],
+) -> Result<HashMap<i32, Vec<CourseInstructorDetail>>> {
+    if course_ids.is_empty() {
+        return Ok(HashMap::new());
+    }
+
+    let rows = sqlx::query_as::<_, CourseInstructorDetail>(
+        r#"
+        SELECT i.banner_id, i.display_name, i.email, ci.is_primary,
+               rp.avg_rating, rp.num_ratings,
+               ci.course_id
+        FROM course_instructors ci
+        JOIN instructors i ON i.banner_id = ci.instructor_id
+        LEFT JOIN rmp_professors rp ON rp.legacy_id = i.rmp_legacy_id
+        WHERE ci.course_id = ANY($1)
+        ORDER BY ci.course_id, ci.is_primary DESC, i.display_name
+        "#,
+    )
+    .bind(course_ids)
+    .fetch_all(db_pool)
+    .await?;
+
+    let mut map: HashMap<i32, Vec<CourseInstructorDetail>> = HashMap::new();
+    for row in rows {
+        // course_id is always present in the batch query
+        let cid = row.course_id.unwrap_or_default();
+        map.entry(cid).or_default().push(row);
+    }
+    Ok(map)
+}
+
+/// Get subjects for a term, sorted by total enrollment (descending).
+///
+/// Returns only subjects that have courses in the given term, with their
+/// descriptions from reference_data and enrollment totals for ranking.
+pub async fn get_subjects_by_enrollment(
+    db_pool: &PgPool,
+    term_code: &str,
+) -> Result<Vec<(String, String, i64)>> {
+    let rows: Vec<(String, String, i64)> = sqlx::query_as(
+        r#"
+        SELECT c.subject,
+               COALESCE(rd.description, c.subject),
+               COALESCE(SUM(c.enrollment), 0) as total_enrollment
+        FROM courses c
+        LEFT JOIN reference_data rd ON rd.category = 'subject' AND rd.code = c.subject
+        WHERE c.term_code = $1
+        GROUP BY c.subject, rd.description
+        ORDER BY total_enrollment DESC
+        "#,
+    )
+    .bind(term_code)
+    .fetch_all(db_pool)
+    .await?;
+    Ok(rows)
+}
+
 /// Get all distinct term codes that have courses in the DB.
 pub async fn get_available_terms(db_pool: &PgPool) -> Result<Vec<String>> {
    let rows: Vec<(String,)> =
@@ -6,3 +6,5 @@ pub mod models;
 pub mod reference;
 pub mod rmp;
 pub mod scrape_jobs;
+pub mod sessions;
+pub mod users;
@@ -76,6 +76,19 @@ pub struct CourseInstructor {
    pub is_primary: bool,
 }

+/// Joined instructor data for a course (from course_instructors + instructors + rmp_professors).
+#[derive(sqlx::FromRow, Debug, Clone)]
+pub struct CourseInstructorDetail {
+    pub banner_id: String,
+    pub display_name: String,
+    pub email: Option<String>,
+    pub is_primary: bool,
+    pub avg_rating: Option<f32>,
+    pub num_ratings: Option<i32>,
+    /// Present when fetched via batch query; `None` for single-course queries.
+    pub course_id: Option<i32>,
+}
+
 #[allow(dead_code)]
 #[derive(sqlx::FromRow, Debug, Clone)]
 pub struct ReferenceData {
@@ -142,3 +155,27 @@ pub struct ScrapeJob {
    /// Maximum number of retry attempts allowed (non-negative, enforced by CHECK constraint)
    pub max_retries: i32,
 }
+
+/// A user authenticated via Discord OAuth.
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct User {
+    pub discord_id: i64,
+    pub discord_username: String,
+    pub discord_avatar_hash: Option<String>,
+    pub is_admin: bool,
+    pub created_at: DateTime<Utc>,
+    pub updated_at: DateTime<Utc>,
+}
+
+/// A server-side session for an authenticated user.
+#[allow(dead_code)] // Fields read via sqlx::FromRow; some only used in DB queries
+#[derive(sqlx::FromRow, Debug, Clone)]
+pub struct UserSession {
+    pub id: String,
+    pub user_id: i64,
+    pub created_at: DateTime<Utc>,
+    pub expires_at: DateTime<Utc>,
+    pub last_active_at: DateTime<Utc>,
+}
@@ -134,7 +134,7 @@ pub async fn find_existing_job_payloads(
    Ok(existing_payloads)
 }

-/// Batch insert scrape jobs in a single transaction.
+/// Batch insert scrape jobs using UNNEST for a single round-trip.
 ///
 /// All jobs are inserted with `execute_at` set to the current time.
 ///
@@ -149,22 +149,29 @@ pub async fn batch_insert_jobs(
        return Ok(());
    }

-    let now = chrono::Utc::now();
-    let mut tx = db_pool.begin().await?;
+    let mut target_types: Vec<String> = Vec::with_capacity(jobs.len());
+    let mut payloads: Vec<serde_json::Value> = Vec::with_capacity(jobs.len());
+    let mut priorities: Vec<String> = Vec::with_capacity(jobs.len());

    for (payload, target_type, priority) in jobs {
-        sqlx::query(
-            "INSERT INTO scrape_jobs (target_type, target_payload, priority, execute_at) VALUES ($1, $2, $3, $4)"
-        )
-        .bind(target_type)
-        .bind(payload)
-        .bind(priority)
-        .bind(now)
-        .execute(&mut *tx)
-        .await?;
+        target_types.push(format!("{target_type:?}"));
+        payloads.push(payload.clone());
+        priorities.push(format!("{priority:?}"));
    }

-    tx.commit().await?;
+    sqlx::query(
+        r#"
+        INSERT INTO scrape_jobs (target_type, target_payload, priority, execute_at)
+        SELECT v.target_type::target_type, v.payload, v.priority::scrape_priority, NOW()
+        FROM UNNEST($1::text[], $2::jsonb[], $3::text[])
+            AS v(target_type, payload, priority)
+        "#,
+    )
+    .bind(&target_types)
+    .bind(&payloads)
+    .bind(&priorities)
+    .execute(db_pool)
+    .await?;

    Ok(())
 }
@@ -0,0 +1,90 @@
+//! Database query functions for user sessions.
+
+use anyhow::Context;
+use rand::Rng;
+use sqlx::PgPool;
+
+use super::models::UserSession;
+use crate::error::Result;
+
+/// Generate a cryptographically random 32-byte hex token.
+fn generate_token() -> String {
+    let bytes: [u8; 32] = rand::rng().random();
+    bytes.iter().map(|b| format!("{b:02x}")).collect()
+}
+
+/// Create a new session for a user with the given duration.
+pub async fn create_session(
+    pool: &PgPool,
+    user_id: i64,
+    duration: std::time::Duration,
+) -> Result<UserSession> {
+    let token = generate_token();
+    let duration_secs = duration.as_secs() as i64;
+
+    sqlx::query_as::<_, UserSession>(
+        r#"
+        INSERT INTO user_sessions (id, user_id, expires_at)
+        VALUES ($1, $2, now() + make_interval(secs => $3::double precision))
+        RETURNING *
+        "#,
+    )
+    .bind(&token)
+    .bind(user_id)
+    .bind(duration_secs as f64)
+    .fetch_one(pool)
+    .await
+    .context("failed to create session")
+}
+
+/// Fetch a session by token, only if it has not expired.
+pub async fn get_session(pool: &PgPool, token: &str) -> Result<Option<UserSession>> {
+    sqlx::query_as::<_, UserSession>(
+        "SELECT * FROM user_sessions WHERE id = $1 AND expires_at > now()",
+    )
+    .bind(token)
+    .fetch_optional(pool)
+    .await
+    .context("failed to get session")
+}
+
+/// Update the last-active timestamp for a session.
+pub async fn touch_session(pool: &PgPool, token: &str) -> Result<()> {
+    sqlx::query("UPDATE user_sessions SET last_active_at = now() WHERE id = $1")
+        .bind(token)
+        .execute(pool)
+        .await
+        .context("failed to touch session")?;
+    Ok(())
+}
+
+/// Delete a session by token.
+pub async fn delete_session(pool: &PgPool, token: &str) -> Result<()> {
+    sqlx::query("DELETE FROM user_sessions WHERE id = $1")
+        .bind(token)
+        .execute(pool)
+        .await
+        .context("failed to delete session")?;
+    Ok(())
+}
+
+/// Delete all sessions for a user. Returns the number of sessions deleted.
+#[allow(dead_code)] // Available for admin user-deletion flow
+pub async fn delete_user_sessions(pool: &PgPool, user_id: i64) -> Result<u64> {
+    let result = sqlx::query("DELETE FROM user_sessions WHERE user_id = $1")
+        .bind(user_id)
+        .execute(pool)
+        .await
+        .context("failed to delete user sessions")?;
+    Ok(result.rows_affected())
+}
+
+/// Delete all expired sessions. Returns the number of sessions cleaned up.
+#[allow(dead_code)] // Called by SessionCache::cleanup_expired (not yet wired to periodic task)
+pub async fn cleanup_expired(pool: &PgPool) -> Result<u64> {
+    let result = sqlx::query("DELETE FROM user_sessions WHERE expires_at <= now()")
+        .execute(pool)
+        .await
+        .context("failed to cleanup expired sessions")?;
+    Ok(result.rows_affected())
+}
@@ -0,0 +1,86 @@
+//! Database query functions for users.
+
+use anyhow::Context;
+use sqlx::PgPool;
+
+use super::models::User;
+use crate::error::Result;
+
+/// Insert a new user or update username/avatar on conflict.
+pub async fn upsert_user(
+    pool: &PgPool,
+    discord_id: i64,
+    username: &str,
+    avatar_hash: Option<&str>,
+) -> Result<User> {
+    sqlx::query_as::<_, User>(
+        r#"
+        INSERT INTO users (discord_id, discord_username, discord_avatar_hash)
+        VALUES ($1, $2, $3)
+        ON CONFLICT (discord_id) DO UPDATE
+            SET discord_username = EXCLUDED.discord_username,
+                discord_avatar_hash = EXCLUDED.discord_avatar_hash,
+                updated_at = now()
+        RETURNING *
+        "#,
+    )
+    .bind(discord_id)
+    .bind(username)
+    .bind(avatar_hash)
+    .fetch_one(pool)
+    .await
+    .context("failed to upsert user")
+}
+
+/// Fetch a user by Discord ID.
+pub async fn get_user(pool: &PgPool, discord_id: i64) -> Result<Option<User>> {
+    sqlx::query_as::<_, User>("SELECT * FROM users WHERE discord_id = $1")
+        .bind(discord_id)
+        .fetch_optional(pool)
+        .await
+        .context("failed to get user")
+}
+
+/// List all users ordered by creation date (newest first).
+pub async fn list_users(pool: &PgPool) -> Result<Vec<User>> {
+    sqlx::query_as::<_, User>("SELECT * FROM users ORDER BY created_at DESC")
+        .fetch_all(pool)
+        .await
+        .context("failed to list users")
+}
+
+/// Set the admin flag for a user, returning the updated user if found.
+pub async fn set_admin(pool: &PgPool, discord_id: i64, is_admin: bool) -> Result<Option<User>> {
+    sqlx::query_as::<_, User>(
+        r#"
+        UPDATE users
+        SET is_admin = $2, updated_at = now()
+        WHERE discord_id = $1
+        RETURNING *
+        "#,
+    )
+    .bind(discord_id)
+    .bind(is_admin)
+    .fetch_optional(pool)
+    .await
+    .context("failed to set admin status")
+}
+
+/// Ensure a seed admin exists. Upserts with `is_admin = true` and a placeholder
+/// username that will be replaced on first OAuth login.
+pub async fn ensure_seed_admin(pool: &PgPool, discord_id: i64) -> Result<User> {
+    sqlx::query_as::<_, User>(
+        r#"
+        INSERT INTO users (discord_id, discord_username, is_admin)
+        VALUES ($1, 'seed-admin', true)
+        ON CONFLICT (discord_id) DO UPDATE
+            SET is_admin = true,
+                updated_at = now()
+        RETURNING *
+        "#,
+    )
+    .bind(discord_id)
+    .fetch_one(pool)
+    .await
+    .context("failed to ensure seed admin")
+}
@@ -19,7 +19,6 @@ mod scraper;
 mod services;
 mod signals;
 mod state;
-#[allow(dead_code)]
 mod status;
 mod web;

@@ -35,6 +35,12 @@ pub struct RmpClient {
    http: reqwest::Client,
 }

+impl Default for RmpClient {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 impl RmpClient {
    pub fn new() -> Self {
        Self {
@@ -1,6 +1,7 @@
 use super::Service;
 use crate::state::AppState;
 use crate::status::ServiceStatus;
+use crate::web::auth::AuthConfig;
 use crate::web::create_router;
 use std::net::SocketAddr;
 use tokio::net::TcpListener;
@@ -11,14 +12,16 @@ use tracing::{info, trace, warn};
 pub struct WebService {
    port: u16,
    app_state: AppState,
+    auth_config: AuthConfig,
    shutdown_tx: Option<broadcast::Sender<()>>,
 }

 impl WebService {
-    pub fn new(port: u16, app_state: AppState) -> Self {
+    pub fn new(port: u16, app_state: AppState, auth_config: AuthConfig) -> Self {
        Self {
            port,
            app_state,
+            auth_config,
            shutdown_tx: None,
        }
    }
@@ -58,7 +61,7 @@ impl Service for WebService {

    async fn run(&mut self) -> Result<(), anyhow::Error> {
        // Create the main router with Banner API routes
-        let app = create_router(self.app_state.clone());
+        let app = create_router(self.app_state.clone(), self.auth_config.clone());

        let addr = SocketAddr::from(([0, 0, 0, 0], self.port));

@@ -4,6 +4,7 @@ use crate::banner::BannerApi;
 use crate::banner::Course;
 use crate::data::models::ReferenceData;
 use crate::status::ServiceStatusRegistry;
+use crate::web::session_cache::{OAuthStateStore, SessionCache};
 use anyhow::Result;
 use sqlx::PgPool;
 use std::collections::HashMap;
@@ -13,9 +14,10 @@ use tokio::sync::RwLock;
 /// In-memory cache for reference data (code→description lookups).
 ///
 /// Loaded from the `reference_data` table on startup and refreshed periodically.
+/// Uses a two-level HashMap so lookups take `&str` without allocating.
 pub struct ReferenceCache {
-    /// `(category, code)` → `description`
-    data: HashMap<(String, String), String>,
+    /// category → (code → description)
+    data: HashMap<String, HashMap<String, String>>,
 }

 impl Default for ReferenceCache {
@@ -34,27 +36,31 @@ impl ReferenceCache {

    /// Build cache from a list of reference data entries.
    pub fn from_entries(entries: Vec<ReferenceData>) -> Self {
-        let data = entries
-            .into_iter()
-            .map(|e| ((e.category, e.code), e.description))
-            .collect();
+        let mut data: HashMap<String, HashMap<String, String>> = HashMap::new();
+        for e in entries {
+            data.entry(e.category)
+                .or_default()
+                .insert(e.code, e.description);
+        }
        Self { data }
    }

-    /// Look up a description by category and code.
+    /// Look up a description by category and code. Zero allocations.
    pub fn lookup(&self, category: &str, code: &str) -> Option<&str> {
        self.data
-            .get(&(category.to_string(), code.to_string()))
+            .get(category)
+            .and_then(|codes| codes.get(code))
            .map(|s| s.as_str())
    }

    /// Get all `(code, description)` pairs for a category, sorted by description.
    pub fn entries_for_category(&self, category: &str) -> Vec<(&str, &str)> {
-        let mut entries: Vec<(&str, &str)> = self
-            .data
+        let Some(codes) = self.data.get(category) else {
+            return Vec::new();
+        };
+        let mut entries: Vec<(&str, &str)> = codes
            .iter()
-            .filter(|((cat, _), _)| cat == category)
-            .map(|((_, code), desc)| (code.as_str(), desc.as_str()))
+            .map(|(code, desc)| (code.as_str(), desc.as_str()))
            .collect();
        entries.sort_by(|a, b| a.1.cmp(b.1));
        entries
@@ -67,11 +73,15 @@ pub struct AppState {
    pub db_pool: PgPool,
    pub service_statuses: ServiceStatusRegistry,
    pub reference_cache: Arc<RwLock<ReferenceCache>>,
+    pub session_cache: SessionCache,
+    pub oauth_state_store: OAuthStateStore,
 }

 impl AppState {
    pub fn new(banner_api: Arc<BannerApi>, db_pool: PgPool) -> Self {
        Self {
+            session_cache: SessionCache::new(db_pool.clone()),
+            oauth_state_store: OAuthStateStore::new(),
            banner_api,
            db_pool,
            service_statuses: ServiceStatusRegistry::new(),
@@ -10,6 +10,7 @@ use ts_rs::TS;
 #[serde(rename_all = "lowercase")]
 #[ts(export)]
 pub enum ServiceStatus {
+    #[allow(dead_code)]
    Starting,
    Active,
    Connected,
@@ -21,6 +22,7 @@ pub enum ServiceStatus {
 #[derive(Debug, Clone)]
 pub struct StatusEntry {
    pub status: ServiceStatus,
+    #[allow(dead_code)]
    pub updated_at: Instant,
 }

@@ -48,6 +50,7 @@ impl ServiceStatusRegistry {
    }

    /// Returns the current status of a named service, if present.
+    #[allow(dead_code)]
    pub fn get(&self, name: &str) -> Option<ServiceStatus> {
        self.inner.get(name).map(|entry| entry.status.clone())
    }
@@ -0,0 +1,205 @@
+//! Admin API handlers.
+//!
+//! All endpoints require the `AdminUser` extractor, returning 401/403 as needed.
+
+use axum::extract::{Path, State};
+use axum::http::StatusCode;
+use axum::response::Json;
+use serde::Deserialize;
+use serde_json::{Value, json};
+
+use crate::data::models::User;
+use crate::state::AppState;
+use crate::web::extractors::AdminUser;
+
+/// `GET /api/admin/status` — Enhanced system status for admins.
+pub async fn admin_status(
+    AdminUser(_user): AdminUser,
+    State(state): State<AppState>,
+) -> Result<Json<Value>, (StatusCode, Json<Value>)> {
+    let (user_count,): (i64,) = sqlx::query_as("SELECT COUNT(*) FROM users")
+        .fetch_one(&state.db_pool)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "failed to count users");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "failed to count users"})),
+            )
+        })?;
+
+    let (session_count,): (i64,) =
+        sqlx::query_as("SELECT COUNT(*) FROM user_sessions WHERE expires_at > now()")
+            .fetch_one(&state.db_pool)
+            .await
+            .map_err(|e| {
+                tracing::error!(error = %e, "failed to count sessions");
+                (
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    Json(json!({"error": "failed to count sessions"})),
+                )
+            })?;
+
+    let course_count = state.get_course_count().await.map_err(|e| {
+        tracing::error!(error = %e, "failed to count courses");
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({"error": "failed to count courses"})),
+        )
+    })?;
+
+    let (scrape_job_count,): (i64,) = sqlx::query_as("SELECT COUNT(*) FROM scrape_jobs")
+        .fetch_one(&state.db_pool)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "failed to count scrape jobs");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "failed to count scrape jobs"})),
+            )
+        })?;
+
+    let services: Vec<Value> = state
+        .service_statuses
+        .all()
+        .into_iter()
+        .map(|(name, status)| {
+            json!({
+                "name": name,
+                "status": status,
+            })
+        })
+        .collect();
+
+    Ok(Json(json!({
+        "userCount": user_count,
+        "sessionCount": session_count,
+        "courseCount": course_count,
+        "scrapeJobCount": scrape_job_count,
+        "services": services,
+    })))
+}
+
+/// `GET /api/admin/users` — List all users.
+pub async fn list_users(
+    AdminUser(_user): AdminUser,
+    State(state): State<AppState>,
+) -> Result<Json<Vec<User>>, (StatusCode, Json<Value>)> {
+    let users = crate::data::users::list_users(&state.db_pool)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "failed to list users");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "failed to list users"})),
+            )
+        })?;
+
+    Ok(Json(users))
+}
+
+#[derive(Deserialize)]
+pub struct SetAdminBody {
+    is_admin: bool,
+}
+
+/// `PUT /api/admin/users/{discord_id}/admin` — Set admin status for a user.
+pub async fn set_user_admin(
+    AdminUser(_user): AdminUser,
+    State(state): State<AppState>,
+    Path(discord_id): Path<i64>,
+    Json(body): Json<SetAdminBody>,
+) -> Result<Json<User>, (StatusCode, Json<Value>)> {
+    let user = crate::data::users::set_admin(&state.db_pool, discord_id, body.is_admin)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "failed to set admin status");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "failed to set admin status"})),
+            )
+        })?
+        .ok_or_else(|| {
+            (
+                StatusCode::NOT_FOUND,
+                Json(json!({"error": "user not found"})),
+            )
+        })?;
+
+    state.session_cache.evict_user(discord_id);
+
+    Ok(Json(user))
+}
+
+/// `GET /api/admin/scrape-jobs` — List scrape jobs.
+pub async fn list_scrape_jobs(
+    AdminUser(_user): AdminUser,
+    State(state): State<AppState>,
+) -> Result<Json<Value>, (StatusCode, Json<Value>)> {
+    let rows = sqlx::query_as::<_, crate::data::models::ScrapeJob>(
+        "SELECT * FROM scrape_jobs ORDER BY priority DESC, execute_at ASC LIMIT 100",
+    )
+    .fetch_all(&state.db_pool)
+    .await
+    .map_err(|e| {
+        tracing::error!(error = %e, "failed to list scrape jobs");
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({"error": "failed to list scrape jobs"})),
+        )
+    })?;
+
+    let jobs: Vec<Value> = rows
+        .iter()
+        .map(|j| {
+            json!({
+                "id": j.id,
+                "targetType": format!("{:?}", j.target_type),
+                "targetPayload": j.target_payload,
+                "priority": format!("{:?}", j.priority),
+                "executeAt": j.execute_at.to_rfc3339(),
+                "createdAt": j.created_at.to_rfc3339(),
+                "lockedAt": j.locked_at.map(|t| t.to_rfc3339()),
+                "retryCount": j.retry_count,
+                "maxRetries": j.max_retries,
+            })
+        })
+        .collect();
+
+    Ok(Json(json!({ "jobs": jobs })))
+}
+
+/// `GET /api/admin/audit-log` — List recent audit entries.
+pub async fn list_audit_log(
+    AdminUser(_user): AdminUser,
+    State(state): State<AppState>,
+) -> Result<Json<Value>, (StatusCode, Json<Value>)> {
+    let rows = sqlx::query_as::<_, crate::data::models::CourseAudit>(
+        "SELECT * FROM course_audits ORDER BY timestamp DESC LIMIT 200",
+    )
+    .fetch_all(&state.db_pool)
+    .await
+    .map_err(|e| {
+        tracing::error!(error = %e, "failed to list audit log");
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({"error": "failed to list audit log"})),
+        )
+    })?;
+
+    let entries: Vec<Value> = rows
+        .iter()
+        .map(|a| {
+            json!({
+                "id": a.id,
+                "courseId": a.course_id,
+                "timestamp": a.timestamp.to_rfc3339(),
+                "fieldChanged": a.field_changed,
+                "oldValue": a.old_value,
+                "newValue": a.new_value,
+            })
+        })
+        .collect();
+
+    Ok(Json(json!({ "entries": entries })))
+}
@@ -1,14 +1,18 @@
-//! Embedded assets for the web frontend
+//! Embedded assets for the web frontend.
 //!
-//! This module handles serving static assets that are embedded into the binary
-//! at compile time using rust-embed.
+//! Serves static assets embedded into the binary at compile time using rust-embed.
+//! Supports content negotiation for pre-compressed variants (.br, .gz, .zst)
+//! generated at build time by `web/scripts/compress-assets.ts`.

+use axum::http::{HeaderMap, HeaderValue, header};
 use dashmap::DashMap;
 use rapidhash::v3::rapidhash_v3;
 use rust_embed::RustEmbed;
 use std::fmt;
 use std::sync::LazyLock;

+use super::encoding::{COMPRESSION_MIN_SIZE, ContentEncoding, parse_accepted_encodings};
+
 /// Embedded web assets from the dist directory
 #[derive(RustEmbed)]
 #[folder = "web/dist/"]
@@ -21,17 +25,15 @@ pub struct WebAssets;
 pub struct AssetHash(u64);

 impl AssetHash {
-    /// Create a new AssetHash from u64 value
    pub fn new(hash: u64) -> Self {
        Self(hash)
    }

-    /// Get the hash as a hex string
    pub fn to_hex(&self) -> String {
        format!("{:016x}", self.0)
    }

-    /// Get the hash as a quoted hex string
+    /// Get the hash as a quoted hex string (for ETag headers)
    pub fn quoted(&self) -> String {
        format!("\"{}\"", self.to_hex())
    }
@@ -51,12 +53,8 @@ pub struct AssetMetadata {
 }

 impl AssetMetadata {
-    /// Check if the etag matches the asset hash
    pub fn etag_matches(&self, etag: &str) -> bool {
-        // Remove quotes if present (ETags are typically quoted)
        let etag = etag.trim_matches('"');
-
-        // ETags generated from u64 hex should be 16 characters
        etag.len() == 16
            && u64::from_str_radix(etag, 16)
                .map(|parsed| parsed == self.hash.0)
@@ -68,28 +66,125 @@ impl AssetMetadata {
 static ASSET_CACHE: LazyLock<DashMap<String, AssetMetadata>> = LazyLock::new(DashMap::new);

 /// Get cached asset metadata for a file path, caching on-demand
-/// Returns AssetMetadata containing MIME type and RapidHash hash
 pub fn get_asset_metadata_cached(path: &str, content: &[u8]) -> AssetMetadata {
-    // Check cache first
    if let Some(cached) = ASSET_CACHE.get(path) {
        return cached.value().clone();
    }

-    // Calculate MIME type
    let mime_type = mime_guess::from_path(path)
        .first()
        .map(|mime| mime.to_string());
-
-    // Calculate RapidHash hash (using u64 native output size)
-    let hash_value = rapidhash_v3(content);
-    let hash = AssetHash::new(hash_value);
-
+    let hash = AssetHash::new(rapidhash_v3(content));
    let metadata = AssetMetadata { mime_type, hash };

-    // Only cache if we haven't exceeded the limit
    if ASSET_CACHE.len() < 1000 {
        ASSET_CACHE.insert(path.to_string(), metadata.clone());
    }

    metadata
 }
+
+/// Set appropriate `Cache-Control` header based on the asset path.
+///
+/// SvelteKit outputs fingerprinted assets under `_app/immutable/` which are
+/// safe to cache indefinitely. Other assets get shorter cache durations.
+fn set_cache_control(headers: &mut HeaderMap, path: &str) {
+    let cache_control = if path.contains("immutable/") {
+        // SvelteKit fingerprinted assets — cache forever
+        "public, max-age=31536000, immutable"
+    } else if path == "index.html" || path.ends_with(".html") {
+        "public, max-age=300"
+    } else {
+        match path.rsplit_once('.').map(|(_, ext)| ext) {
+            Some("css" | "js") => "public, max-age=86400",
+            Some("png" | "jpg" | "jpeg" | "gif" | "svg" | "ico") => "public, max-age=2592000",
+            _ => "public, max-age=3600",
+        }
+    };
+
+    if let Ok(value) = HeaderValue::from_str(cache_control) {
+        headers.insert(header::CACHE_CONTROL, value);
+    }
+}
+
+/// Serve an embedded asset with content encoding negotiation.
+///
+/// Tries pre-compressed variants (.br, .gz, .zst) in the order preferred by
+/// the client's `Accept-Encoding` header, falling back to the uncompressed
+/// original. Returns `None` if the asset doesn't exist at all.
+pub fn try_serve_asset_with_encoding(
+    path: &str,
+    request_headers: &HeaderMap,
+) -> Option<axum::response::Response> {
+    use axum::response::IntoResponse;
+
+    let asset_path = path.strip_prefix('/').unwrap_or(path);
+
+    // Get the uncompressed original first (for metadata: MIME type, ETag)
+    let original = WebAssets::get(asset_path)?;
+    let metadata = get_asset_metadata_cached(asset_path, &original.data);
+
+    // Check ETag for conditional requests (304 Not Modified)
+    if let Some(etag) = request_headers.get(header::IF_NONE_MATCH)
+        && etag.to_str().is_ok_and(|s| metadata.etag_matches(s))
+    {
+        return Some(axum::http::StatusCode::NOT_MODIFIED.into_response());
+    }
+
+    let mime_type = metadata
+        .mime_type
+        .unwrap_or_else(|| "application/octet-stream".to_string());
+
+    // Only attempt pre-compressed variants for files above the compression
+    // threshold — the build script skips smaller files too.
+    let accepted_encodings = if original.data.len() >= COMPRESSION_MIN_SIZE {
+        parse_accepted_encodings(request_headers)
+    } else {
+        vec![ContentEncoding::Identity]
+    };
+
+    for encoding in &accepted_encodings {
+        if *encoding == ContentEncoding::Identity {
+            continue;
+        }
+
+        let compressed_path = format!("{}{}", asset_path, encoding.extension());
+        if let Some(compressed) = WebAssets::get(&compressed_path) {
+            let mut response_headers = HeaderMap::new();
+
+            if let Ok(ct) = HeaderValue::from_str(&mime_type) {
+                response_headers.insert(header::CONTENT_TYPE, ct);
+            }
+            if let Some(ce) = encoding.header_value() {
+                response_headers.insert(header::CONTENT_ENCODING, ce);
+            }
+            if let Ok(etag_val) = HeaderValue::from_str(&metadata.hash.quoted()) {
+                response_headers.insert(header::ETAG, etag_val);
+            }
+            // Vary so caches distinguish by encoding
+            response_headers.insert(header::VARY, HeaderValue::from_static("Accept-Encoding"));
+            set_cache_control(&mut response_headers, asset_path);
+
+            return Some(
+                (
+                    axum::http::StatusCode::OK,
+                    response_headers,
+                    compressed.data,
+                )
+                    .into_response(),
+            );
+        }
+    }
+
+    // No compressed variant found — serve uncompressed original
+    let mut response_headers = HeaderMap::new();
+    if let Ok(ct) = HeaderValue::from_str(&mime_type) {
+        response_headers.insert(header::CONTENT_TYPE, ct);
+    }
+    if let Ok(etag_val) = HeaderValue::from_str(&metadata.hash.quoted()) {
+        response_headers.insert(header::ETAG, etag_val);
+    }
+    set_cache_control(&mut response_headers, asset_path);
+
+    Some((axum::http::StatusCode::OK, response_headers, original.data).into_response())
+}
@@ -0,0 +1,300 @@
+//! Discord OAuth2 authentication handlers.
+//!
+//! Provides login, callback, logout, and session introspection endpoints
+//! for Discord OAuth2 authentication flow.
+
+use axum::extract::{Extension, Query, State};
+use axum::http::{HeaderMap, StatusCode, header};
+use axum::response::{IntoResponse, Json, Redirect, Response};
+use serde::Deserialize;
+use serde_json::{Value, json};
+use std::time::Duration;
+use tracing::{error, info, warn};
+
+use crate::state::AppState;
+
+/// OAuth configuration passed as an Axum Extension.
+#[derive(Clone)]
+pub struct AuthConfig {
+    pub client_id: String,
+    pub client_secret: String,
+    /// Optional base URL override (e.g. "https://banner.xevion.dev").
+    /// When `None`, the redirect URI is derived from the request's Origin/Host header.
+    pub redirect_base: Option<String>,
+}
+
+const CALLBACK_PATH: &str = "/api/auth/callback";
+
+/// Derive the origin (scheme + host + port) the user's browser is actually on.
+///
+/// Priority:
+/// 1. Configured `redirect_base` (production override)
+/// 2. `Referer` header — preserves the real browser origin even through
+///    reverse proxies that rewrite `Host` (e.g. Vite dev proxy with
+///    `changeOrigin: true`)
+/// 3. `Origin` header (present on POST / CORS requests)
+/// 4. `Host` header (last resort, may be rewritten by proxies)
+fn resolve_origin(auth_config: &AuthConfig, headers: &HeaderMap) -> String {
+    if let Some(base) = &auth_config.redirect_base {
+        return base.trim_end_matches('/').to_owned();
+    }
+
+    // Referer carries the full browser URL; extract just the origin.
+    if let Some(referer) = headers.get(header::REFERER).and_then(|v| v.to_str().ok())
+        && let Ok(parsed) = url::Url::parse(referer)
+    {
+        let origin = parsed.origin().unicode_serialization();
+        if origin != "null" {
+            return origin;
+        }
+    }
+
+    if let Some(origin) = headers.get("origin").and_then(|v| v.to_str().ok()) {
+        return origin.trim_end_matches('/').to_owned();
+    }
+
+    if let Some(host) = headers.get(header::HOST).and_then(|v| v.to_str().ok()) {
+        return format!("http://{host}");
+    }
+
+    "http://localhost:8080".to_owned()
+}
+
+#[derive(Deserialize)]
+pub struct CallbackParams {
+    code: String,
+    state: String,
+}
+
+#[derive(Deserialize)]
+struct TokenResponse {
+    access_token: String,
+}
+
+#[derive(Deserialize)]
+struct DiscordUser {
+    id: String,
+    username: String,
+    avatar: Option<String>,
+}
+
+/// Extract the `session` cookie value from request headers.
+fn extract_session_token(headers: &HeaderMap) -> Option<String> {
+    headers
+        .get(header::COOKIE)?
+        .to_str()
+        .ok()?
+        .split(';')
+        .find_map(|cookie| {
+            let cookie = cookie.trim();
+            cookie.strip_prefix("session=").map(|v| v.to_owned())
+        })
+}
+
+/// Build a `Set-Cookie` header value for the session cookie.
+fn session_cookie(token: &str, max_age: i64, secure: bool) -> String {
+    let mut cookie = format!("session={token}; HttpOnly; SameSite=Lax; Path=/; Max-Age={max_age}");
+    if secure {
+        cookie.push_str("; Secure");
+    }
+    cookie
+}
+
+/// `GET /api/auth/login` — Redirect to Discord OAuth2 authorization page.
+pub async fn auth_login(
+    State(state): State<AppState>,
+    Extension(auth_config): Extension<AuthConfig>,
+    headers: HeaderMap,
+) -> Redirect {
+    let origin = resolve_origin(&auth_config, &headers);
+    let redirect_uri = format!("{origin}{CALLBACK_PATH}");
+    let csrf_state = state.oauth_state_store.generate(origin);
+    let redirect_uri_encoded = urlencoding::encode(&redirect_uri);
+
+    let url = format!(
+        "https://discord.com/oauth2/authorize\
+         ?client_id={}\
+         &redirect_uri={redirect_uri_encoded}\
+         &response_type=code\
+         &scope=identify\
+         &state={csrf_state}",
+        auth_config.client_id,
+    );
+
+    Redirect::temporary(&url)
+}
+
+/// `GET /api/auth/callback` — Handle Discord OAuth2 callback.
+pub async fn auth_callback(
+    State(state): State<AppState>,
+    Extension(auth_config): Extension<AuthConfig>,
+    Query(params): Query<CallbackParams>,
+) -> Result<Response, (StatusCode, Json<Value>)> {
+    // 1. Validate CSRF state and recover the origin used during login
+    let origin = state
+        .oauth_state_store
+        .validate(&params.state)
+        .ok_or_else(|| {
+            warn!("OAuth callback with invalid CSRF state");
+            (
+                StatusCode::BAD_REQUEST,
+                Json(json!({ "error": "Invalid OAuth state" })),
+            )
+        })?;
+
+    // 2. Exchange authorization code for access token
+    let redirect_uri = format!("{origin}{CALLBACK_PATH}");
+    let client = reqwest::Client::new();
+    let token_response = client
+        .post("https://discord.com/api/oauth2/token")
+        .form(&[
+            ("client_id", auth_config.client_id.as_str()),
+            ("client_secret", auth_config.client_secret.as_str()),
+            ("grant_type", "authorization_code"),
+            ("code", params.code.as_str()),
+            ("redirect_uri", redirect_uri.as_str()),
+        ])
+        .send()
+        .await
+        .map_err(|e| {
+            error!(error = %e, "failed to exchange OAuth code for token");
+            (
+                StatusCode::BAD_GATEWAY,
+                Json(json!({ "error": "Failed to exchange code with Discord" })),
+            )
+        })?;
+
+    if !token_response.status().is_success() {
+        let status = token_response.status();
+        let body = token_response.text().await.unwrap_or_default();
+        error!(%status, %body, "Discord token exchange returned error");
+        return Err((
+            StatusCode::BAD_GATEWAY,
+            Json(json!({ "error": "Discord token exchange failed" })),
+        ));
+    }
+
+    let token_data: TokenResponse = token_response.json().await.map_err(|e| {
+        error!(error = %e, "failed to parse Discord token response");
+        (
+            StatusCode::BAD_GATEWAY,
+            Json(json!({ "error": "Invalid token response from Discord" })),
+        )
+    })?;
+
+    // 3. Fetch Discord user profile
+    let discord_user: DiscordUser = client
+        .get("https://discord.com/api/users/@me")
+        .bearer_auth(&token_data.access_token)
+        .send()
+        .await
+        .map_err(|e| {
+            error!(error = %e, "failed to fetch Discord user profile");
+            (
+                StatusCode::BAD_GATEWAY,
+                Json(json!({ "error": "Failed to fetch Discord profile" })),
+            )
+        })?
+        .json()
+        .await
+        .map_err(|e| {
+            error!(error = %e, "failed to parse Discord user profile");
+            (
+                StatusCode::BAD_GATEWAY,
+                Json(json!({ "error": "Invalid user profile from Discord" })),
+            )
+        })?;
+
+    let discord_id: i64 = discord_user.id.parse().map_err(|_| {
+        error!(id = %discord_user.id, "Discord user ID is not a valid i64");
+        (
+            StatusCode::BAD_GATEWAY,
+            Json(json!({ "error": "Invalid Discord user ID" })),
+        )
+    })?;
+
+    // 4. Upsert user
+    let user = crate::data::users::upsert_user(
+        &state.db_pool,
+        discord_id,
+        &discord_user.username,
+        discord_user.avatar.as_deref(),
+    )
+    .await
+    .map_err(|e| {
+        error!(error = %e, "failed to upsert user");
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({ "error": "Database error" })),
+        )
+    })?;
+
+    info!(discord_id, username = %user.discord_username, "user authenticated via OAuth");
+
+    // 5. Create session
+    let session = crate::data::sessions::create_session(
+        &state.db_pool,
+        discord_id,
+        Duration::from_secs(7 * 24 * 3600),
+    )
+    .await
+    .map_err(|e| {
+        error!(error = %e, "failed to create session");
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({ "error": "Failed to create session" })),
+        )
+    })?;
+
+    // 6. Build response with session cookie
+    let secure = redirect_uri.starts_with("https://");
+    let cookie = session_cookie(&session.id, 604800, secure);
+
+    let redirect_to = if user.is_admin { "/admin" } else { "/" };
+
+    Ok((
+        [(header::SET_COOKIE, cookie)],
+        Redirect::temporary(redirect_to),
+    )
+        .into_response())
+}
+
+/// `POST /api/auth/logout` — Destroy the current session.
+pub async fn auth_logout(State(state): State<AppState>, headers: HeaderMap) -> Response {
+    if let Some(token) = extract_session_token(&headers) {
+        if let Err(e) = crate::data::sessions::delete_session(&state.db_pool, &token).await {
+            warn!(error = %e, "failed to delete session from database");
+        }
+        state.session_cache.evict(&token);
+    }
+
+    let cookie = session_cookie("", 0, false);
+
+    (
+        StatusCode::OK,
+        [(header::SET_COOKIE, cookie)],
+        Json(json!({ "ok": true })),
+    )
+        .into_response()
+}
+
+/// `GET /api/auth/me` — Return the current authenticated user's info.
+pub async fn auth_me(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> Result<Json<Value>, StatusCode> {
+    let token = extract_session_token(&headers).ok_or(StatusCode::UNAUTHORIZED)?;
+
+    let user = state
+        .session_cache
+        .get_user(&token)
+        .await
+        .ok_or(StatusCode::UNAUTHORIZED)?;
+
+    Ok(Json(json!({
+        "discordId": user.discord_id.to_string(),
+        "username": user.discord_username,
+        "avatarHash": user.discord_avatar_hash,
+        "isAdmin": user.is_admin,
+    })))
+}
@@ -0,0 +1,196 @@
+//! Content encoding negotiation for pre-compressed asset serving.
+//!
+//! Parses Accept-Encoding headers with quality values and returns
+//! supported encodings in priority order for content negotiation.
+
+use axum::http::{HeaderMap, HeaderValue, header};
+
+/// Minimum size threshold for compression (bytes).
+///
+/// Must match `MIN_SIZE` in `web/scripts/compress-assets.ts`.
+pub const COMPRESSION_MIN_SIZE: usize = 512;
+
+/// Supported content encodings in priority order (best compression first).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub enum ContentEncoding {
+    Zstd,
+    Brotli,
+    Gzip,
+    Identity,
+}
+
+impl ContentEncoding {
+    /// File extension suffix for pre-compressed variant lookup.
+    #[inline]
+    pub fn extension(&self) -> &'static str {
+        match self {
+            Self::Zstd => ".zst",
+            Self::Brotli => ".br",
+            Self::Gzip => ".gz",
+            Self::Identity => "",
+        }
+    }
+
+    /// `Content-Encoding` header value, or `None` for identity.
+    #[inline]
+    pub fn header_value(&self) -> Option<HeaderValue> {
+        match self {
+            Self::Zstd => Some(HeaderValue::from_static("zstd")),
+            Self::Brotli => Some(HeaderValue::from_static("br")),
+            Self::Gzip => Some(HeaderValue::from_static("gzip")),
+            Self::Identity => None,
+        }
+    }
+
+    /// Default priority when quality values are equal (higher = better).
+    #[inline]
+    fn default_priority(&self) -> u8 {
+        match self {
+            Self::Zstd => 4,
+            Self::Brotli => 3,
+            Self::Gzip => 2,
+            Self::Identity => 1,
+        }
+    }
+}
+
+/// Parse `Accept-Encoding` header and return supported encodings in priority order.
+///
+/// Supports quality values: `Accept-Encoding: gzip;q=0.8, br;q=1.0, zstd`
+/// When quality values are equal: zstd > brotli > gzip > identity.
+/// Encodings with `q=0` are excluded.
+pub fn parse_accepted_encodings(headers: &HeaderMap) -> Vec<ContentEncoding> {
+    let Some(accept) = headers
+        .get(header::ACCEPT_ENCODING)
+        .and_then(|v| v.to_str().ok())
+    else {
+        return vec![ContentEncoding::Identity];
+    };
+
+    let mut encodings: Vec<(ContentEncoding, f32)> = Vec::new();
+
+    for part in accept.split(',') {
+        let part = part.trim();
+        if part.is_empty() {
+            continue;
+        }
+
+        let (encoding_str, quality) = if let Some((enc, params)) = part.split_once(';') {
+            let q = params
+                .split(';')
+                .find_map(|p| p.trim().strip_prefix("q="))
+                .and_then(|q| q.parse::<f32>().ok())
+                .unwrap_or(1.0);
+            (enc.trim(), q)
+        } else {
+            (part, 1.0)
+        };
+
+        if quality == 0.0 {
+            continue;
+        }
+
+        let encoding = match encoding_str.to_lowercase().as_str() {
+            "zstd" => ContentEncoding::Zstd,
+            "br" | "brotli" => ContentEncoding::Brotli,
+            "gzip" | "x-gzip" => ContentEncoding::Gzip,
+            "*" => ContentEncoding::Gzip,
+            "identity" => ContentEncoding::Identity,
+            _ => continue,
+        };
+
+        encodings.push((encoding, quality));
+    }
+
+    // Sort by quality (desc), then default priority (desc)
+    encodings.sort_by(|a, b| {
+        b.1.partial_cmp(&a.1)
+            .unwrap_or(std::cmp::Ordering::Equal)
+            .then_with(|| b.0.default_priority().cmp(&a.0.default_priority()))
+    });
+
+    if encodings.is_empty() {
+        vec![ContentEncoding::Identity]
+    } else {
+        encodings.into_iter().map(|(e, _)| e).collect()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_parse_all_encodings() {
+        let mut headers = HeaderMap::new();
+        headers.insert(header::ACCEPT_ENCODING, "gzip, br, zstd".parse().unwrap());
+        let encodings = parse_accepted_encodings(&headers);
+        assert_eq!(encodings[0], ContentEncoding::Zstd);
+        assert_eq!(encodings[1], ContentEncoding::Brotli);
+        assert_eq!(encodings[2], ContentEncoding::Gzip);
+    }
+
+    #[test]
+    fn test_parse_with_quality_values() {
+        let mut headers = HeaderMap::new();
+        headers.insert(
+            header::ACCEPT_ENCODING,
+            "gzip;q=1.0, br;q=0.5, zstd;q=0.8".parse().unwrap(),
+        );
+        let encodings = parse_accepted_encodings(&headers);
+        assert_eq!(encodings[0], ContentEncoding::Gzip);
+        assert_eq!(encodings[1], ContentEncoding::Zstd);
+        assert_eq!(encodings[2], ContentEncoding::Brotli);
+    }
+
+    #[test]
+    fn test_no_header_returns_identity() {
+        let headers = HeaderMap::new();
+        let encodings = parse_accepted_encodings(&headers);
+        assert_eq!(encodings, vec![ContentEncoding::Identity]);
+    }
+
+    #[test]
+    fn test_disabled_encoding_excluded() {
+        let mut headers = HeaderMap::new();
+        headers.insert(
+            header::ACCEPT_ENCODING,
+            "zstd;q=0, br, gzip".parse().unwrap(),
+        );
+        let encodings = parse_accepted_encodings(&headers);
+        assert_eq!(encodings[0], ContentEncoding::Brotli);
+        assert_eq!(encodings[1], ContentEncoding::Gzip);
+        assert!(!encodings.contains(&ContentEncoding::Zstd));
+    }
+
+    #[test]
+    fn test_real_chrome_header() {
+        let mut headers = HeaderMap::new();
+        headers.insert(
+            header::ACCEPT_ENCODING,
+            "gzip, deflate, br, zstd".parse().unwrap(),
+        );
+        assert_eq!(parse_accepted_encodings(&headers)[0], ContentEncoding::Zstd);
+    }
+
+    #[test]
+    fn test_extensions() {
+        assert_eq!(ContentEncoding::Zstd.extension(), ".zst");
+        assert_eq!(ContentEncoding::Brotli.extension(), ".br");
+        assert_eq!(ContentEncoding::Gzip.extension(), ".gz");
+        assert_eq!(ContentEncoding::Identity.extension(), "");
+    }
+
+    #[test]
+    fn test_header_values() {
+        assert_eq!(
+            ContentEncoding::Zstd.header_value().unwrap(),
+            HeaderValue::from_static("zstd")
+        );
+        assert_eq!(
+            ContentEncoding::Brotli.header_value().unwrap(),
+            HeaderValue::from_static("br")
+        );
+        assert!(ContentEncoding::Identity.header_value().is_none());
+    }
+}
@@ -0,0 +1,74 @@
+//! Axum extractors for authentication and authorization.
+
+use axum::extract::FromRequestParts;
+use axum::http::{StatusCode, header};
+use axum::response::Json;
+use http::request::Parts;
+use serde_json::json;
+
+use crate::data::models::User;
+use crate::state::AppState;
+
+/// Extractor that resolves the session cookie to an authenticated [`User`].
+///
+/// Returns 401 if no valid session cookie is present.
+pub struct AuthUser(pub User);
+
+impl FromRequestParts<AppState> for AuthUser {
+    type Rejection = (StatusCode, Json<serde_json::Value>);
+
+    async fn from_request_parts(
+        parts: &mut Parts,
+        state: &AppState,
+    ) -> Result<Self, Self::Rejection> {
+        let token = parts
+            .headers
+            .get(header::COOKIE)
+            .and_then(|v| v.to_str().ok())
+            .and_then(|cookies| {
+                cookies
+                    .split(';')
+                    .find_map(|c| c.trim().strip_prefix("session=").map(|v| v.to_owned()))
+            })
+            .ok_or_else(|| {
+                (
+                    StatusCode::UNAUTHORIZED,
+                    Json(json!({"error": "unauthorized", "message": "No session cookie"})),
+                )
+            })?;
+
+        let user = state.session_cache.get_user(&token).await.ok_or_else(|| {
+            (
+                StatusCode::UNAUTHORIZED,
+                Json(json!({"error": "unauthorized", "message": "Invalid or expired session"})),
+            )
+        })?;
+
+        Ok(AuthUser(user))
+    }
+}
+
+/// Extractor that requires an authenticated admin user.
+///
+/// Returns 401 if not authenticated, 403 if not admin.
+pub struct AdminUser(pub User);
+
+impl FromRequestParts<AppState> for AdminUser {
+    type Rejection = (StatusCode, Json<serde_json::Value>);
+
+    async fn from_request_parts(
+        parts: &mut Parts,
+        state: &AppState,
+    ) -> Result<Self, Self::Rejection> {
+        let AuthUser(user) = AuthUser::from_request_parts(parts, state).await?;
+
+        if !user.is_admin {
+            return Err((
+                StatusCode::FORBIDDEN,
+                Json(json!({"error": "forbidden", "message": "Admin access required"})),
+            ));
+        }
+
+        Ok(AdminUser(user))
+    }
+}
@@ -1,7 +1,13 @@
 //! Web API module for the banner application.

+pub mod admin;
 #[cfg(feature = "embed-assets")]
 pub mod assets;
+pub mod auth;
+#[cfg(feature = "embed-assets")]
+pub mod encoding;
+pub mod extractors;
 pub mod routes;
+pub mod session_cache;

 pub use routes::*;
@@ -1,20 +1,21 @@
 //! Web API endpoints for Banner bot monitoring and metrics.

 use axum::{
-    Router,
+    Extension, Router,
    body::Body,
    extract::{Path, Query, Request, State},
    http::StatusCode as AxumStatusCode,
    response::{Json, Response},
-    routing::get,
+    routing::{get, post, put},
 };
+
+use crate::web::admin;
+use crate::web::auth::{self, AuthConfig};
 #[cfg(feature = "embed-assets")]
 use axum::{
-    http::{HeaderMap, HeaderValue, StatusCode, Uri},
-    response::{Html, IntoResponse},
+    http::{HeaderMap, StatusCode, Uri},
+    response::IntoResponse,
 };
-#[cfg(feature = "embed-assets")]
-use http::header;
 use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};
 use std::{collections::BTreeMap, time::Duration};
@@ -24,51 +25,17 @@ use crate::state::AppState;
 use crate::status::ServiceStatus;
 #[cfg(not(feature = "embed-assets"))]
 use tower_http::cors::{Any, CorsLayer};
-use tower_http::{classify::ServerErrorsFailureClass, timeout::TimeoutLayer, trace::TraceLayer};
+use tower_http::{
+    classify::ServerErrorsFailureClass, compression::CompressionLayer, timeout::TimeoutLayer,
+    trace::TraceLayer,
+};
 use tracing::{Span, debug, trace, warn};

 #[cfg(feature = "embed-assets")]
-use crate::web::assets::{WebAssets, get_asset_metadata_cached};
-
-/// Set appropriate caching headers based on asset type
-#[cfg(feature = "embed-assets")]
-fn set_caching_headers(response: &mut Response, path: &str, etag: &str) {
-    let headers = response.headers_mut();
-
-    // Set ETag
-    if let Ok(etag_value) = HeaderValue::from_str(etag) {
-        headers.insert(header::ETAG, etag_value);
-    }
-
-    // Set Cache-Control based on asset type
-    let cache_control = if path.starts_with("assets/") {
-        // Static assets with hashed filenames - long-term cache
-        "public, max-age=31536000, immutable"
-    } else if path == "index.html" {
-        // HTML files - short-term cache
-        "public, max-age=300"
-    } else {
-        match path.split_once('.').map(|(_, extension)| extension) {
-            Some(ext) => match ext {
-                // CSS/JS files - medium-term cache
-                "css" | "js" => "public, max-age=86400",
-                // Images - long-term cache
-                "png" | "jpg" | "jpeg" | "gif" | "svg" | "ico" => "public, max-age=2592000",
-                // Default for other files
-                _ => "public, max-age=3600",
-            },
-            // Default for files without an extension
-            None => "public, max-age=3600",
-        }
-    };
-
-    if let Ok(cache_control_value) = HeaderValue::from_str(cache_control) {
-        headers.insert(header::CACHE_CONTROL, cache_control_value);
-    }
-}
+use crate::web::assets::try_serve_asset_with_encoding;

 /// Creates the web server router
-pub fn create_router(app_state: AppState) -> Router {
+pub fn create_router(app_state: AppState, auth_config: AuthConfig) -> Router {
    let api_router = Router::new()
        .route("/health", get(health))
        .route("/status", get(status))
@@ -78,9 +45,31 @@ pub fn create_router(app_state: AppState) -> Router {
        .route("/terms", get(get_terms))
        .route("/subjects", get(get_subjects))
        .route("/reference/{category}", get(get_reference))
+        .with_state(app_state.clone());
+
+    let auth_router = Router::new()
+        .route("/auth/login", get(auth::auth_login))
+        .route("/auth/callback", get(auth::auth_callback))
+        .route("/auth/logout", post(auth::auth_logout))
+        .route("/auth/me", get(auth::auth_me))
+        .layer(Extension(auth_config))
+        .with_state(app_state.clone());
+
+    let admin_router = Router::new()
+        .route("/admin/status", get(admin::admin_status))
+        .route("/admin/users", get(admin::list_users))
+        .route(
+            "/admin/users/{discord_id}/admin",
+            put(admin::set_user_admin),
+        )
+        .route("/admin/scrape-jobs", get(admin::list_scrape_jobs))
+        .route("/admin/audit-log", get(admin::list_audit_log))
        .with_state(app_state);

-    let mut router = Router::new().nest("/api", api_router);
+    let mut router = Router::new()
+        .nest("/api", api_router)
+        .nest("/api", auth_router)
+        .nest("/api", admin_router);

    // When embed-assets feature is enabled, serve embedded static assets
    #[cfg(feature = "embed-assets")]
@@ -100,6 +89,13 @@ pub fn create_router(app_state: AppState) -> Router {
    }

    router.layer((
+        // Compress API responses (gzip/brotli/zstd). Pre-compressed static
+        // assets already have Content-Encoding set, so tower-http skips them.
+        CompressionLayer::new()
+            .zstd(true)
+            .br(true)
+            .gzip(true)
+            .quality(tower_http::CompressionLevel::Fastest),
        TraceLayer::new_for_http()
            .make_span_with(|request: &Request<Body>| {
                tracing::debug_span!("request", path = request.uri().path())
@@ -146,71 +142,35 @@ pub fn create_router(app_state: AppState) -> Router {
    ))
 }

-/// Handler that extracts request information for caching
+/// SPA fallback handler with content encoding negotiation.
+///
+/// Serves embedded static assets with pre-compressed variants when available,
+/// falling back to `index.html` for SPA client-side routing.
 #[cfg(feature = "embed-assets")]
-async fn fallback(request: Request) -> Response {
+async fn fallback(request: Request) -> axum::response::Response {
    let uri = request.uri().clone();
    let headers = request.headers().clone();
-    handle_spa_fallback_with_headers(uri, headers).await
+    handle_spa_fallback(uri, headers).await
 }

-/// Handles SPA routing by serving index.html for non-API, non-asset requests
-/// This version includes HTTP caching headers and ETag support
 #[cfg(feature = "embed-assets")]
-async fn handle_spa_fallback_with_headers(uri: Uri, request_headers: HeaderMap) -> Response {
-    let path = uri.path().trim_start_matches('/');
-
-    if let Some(content) = WebAssets::get(path) {
-        // Get asset metadata (MIME type and hash) with caching
-        let metadata = get_asset_metadata_cached(path, &content.data);
-
-        // Check if client has a matching ETag (conditional request)
-        if let Some(etag) = request_headers.get(header::IF_NONE_MATCH)
-            && etag.to_str().is_ok_and(|s| metadata.etag_matches(s))
-        {
-            return StatusCode::NOT_MODIFIED.into_response();
-        }
-
-        // Use cached MIME type, only set Content-Type if we have a valid MIME type
-        let mut response = (
-            [(
-                header::CONTENT_TYPE,
-                // For unknown types, set to application/octet-stream
-                metadata
-                    .mime_type
-                    .unwrap_or("application/octet-stream".to_string()),
-            )],
-            content.data,
-        )
-            .into_response();
-
-        // Set caching headers
-        set_caching_headers(&mut response, path, &metadata.hash.quoted());
+async fn handle_spa_fallback(uri: Uri, request_headers: HeaderMap) -> axum::response::Response {
+    let path = uri.path();

+    // Try serving the exact asset (with encoding negotiation)
+    if let Some(response) = try_serve_asset_with_encoding(path, &request_headers) {
        return response;
-    } else {
-        // Any assets that are not found should be treated as a 404, not falling back to the SPA index.html
-        if path.starts_with("assets/") {
-            return (StatusCode::NOT_FOUND, "Asset not found").into_response();
-        }
    }

-    // Fall back to the SPA index.html
-    match WebAssets::get("index.html") {
-        Some(content) => {
-            let metadata = get_asset_metadata_cached("index.html", &content.data);
+    // SvelteKit assets under _app/ that don't exist are a hard 404
+    let trimmed = path.trim_start_matches('/');
+    if trimmed.starts_with("_app/") || trimmed.starts_with("assets/") {
+        return (StatusCode::NOT_FOUND, "Asset not found").into_response();
+    }

-            // Check if client has a matching ETag for index.html
-            if let Some(etag) = request_headers.get(header::IF_NONE_MATCH)
-                && etag.to_str().is_ok_and(|s| metadata.etag_matches(s))
-            {
-                return StatusCode::NOT_MODIFIED.into_response();
-            }
-
-            let mut response = Html(content.data).into_response();
-            set_caching_headers(&mut response, "index.html", &metadata.hash.quoted());
-            response
-        }
+    // SPA fallback: serve index.html with encoding negotiation
+    match try_serve_asset_with_encoding("/index.html", &request_headers) {
+        Some(response) => response,
        None => (
            StatusCode::INTERNAL_SERVER_ERROR,
            "Failed to load index.html",
@@ -298,10 +258,16 @@ async fn metrics() -> Json<Value> {
 // Course search & detail API
 // ============================================================

+#[derive(Deserialize)]
+struct SubjectsParams {
+    term: String,
+}
+
 #[derive(Deserialize)]
 struct SearchParams {
    term: String,
-    subject: Option<String>,
+    #[serde(default)]
+    subject: Vec<String>,
    q: Option<String>,
    course_number_low: Option<i32>,
    course_number_high: Option<i32>,
@@ -317,59 +283,12 @@ struct SearchParams {
    sort_dir: Option<SortDirection>,
 }

-#[derive(Debug, Clone, Copy, Deserialize)]
-#[serde(rename_all = "snake_case")]
-enum SortColumn {
-    CourseCode,
-    Title,
-    Instructor,
-    Time,
-    Seats,
-}
-
-#[derive(Debug, Clone, Copy, Deserialize)]
-#[serde(rename_all = "snake_case")]
-enum SortDirection {
-    Asc,
-    Desc,
-}
+use crate::data::courses::{SortColumn, SortDirection};

 fn default_limit() -> i32 {
    25
 }

-/// Build a safe ORDER BY clause from the validated sort column and direction.
-fn sort_clause(column: Option<SortColumn>, direction: Option<SortDirection>) -> String {
-    let dir = match direction.unwrap_or(SortDirection::Asc) {
-        SortDirection::Asc => "ASC",
-        SortDirection::Desc => "DESC",
-    };
-
-    match column {
-        Some(SortColumn::CourseCode) => {
-            format!("subject {dir}, course_number {dir}, sequence_number {dir}")
-        }
-        Some(SortColumn::Title) => format!("title {dir}"),
-        Some(SortColumn::Instructor) => {
-            // Sort by primary instructor display name via a subquery
-            format!(
-                "(SELECT i.display_name FROM course_instructors ci \
-                 JOIN instructors i ON i.banner_id = ci.instructor_id \
-                 WHERE ci.course_id = courses.id AND ci.is_primary = true \
-                 LIMIT 1) {dir} NULLS LAST"
-            )
-        }
-        Some(SortColumn::Time) => {
-            // Sort by first meeting time's begin_time via JSONB
-            format!("(meeting_times->0->>'begin_time') {dir} NULLS LAST")
-        }
-        Some(SortColumn::Seats) => {
-            format!("(max_enrollment - enrollment) {dir}")
-        }
-        None => "subject ASC, course_number ASC, sequence_number ASC".to_string(),
-    }
-}
-
 #[derive(Serialize, TS)]
 #[serde(rename_all = "camelCase")]
 #[ts(export)]
@@ -430,27 +349,21 @@ pub struct CodeDescription {
    description: String,
 }

-/// Build a `CourseResponse` from a DB course, fetching its instructors.
-async fn build_course_response(
+/// Build a `CourseResponse` from a DB course with pre-fetched instructor details.
+fn build_course_response(
    course: &crate::data::models::Course,
-    db_pool: &sqlx::PgPool,
+    instructors: Vec<crate::data::models::CourseInstructorDetail>,
 ) -> CourseResponse {
-    let instructors = crate::data::courses::get_course_instructors(db_pool, course.id)
-        .await
-        .unwrap_or_default()
+    let instructors = instructors
        .into_iter()
-        .map(
-            |(banner_id, display_name, email, is_primary, rmp_rating, rmp_num_ratings)| {
-                InstructorResponse {
-                    banner_id,
-                    display_name,
-                    email,
-                    is_primary,
-                    rmp_rating,
-                    rmp_num_ratings,
-                }
-            },
-        )
+        .map(|i| InstructorResponse {
+            banner_id: i.banner_id,
+            display_name: i.display_name,
+            email: i.email,
+            is_primary: i.is_primary,
+            rmp_rating: i.avg_rating,
+            rmp_num_ratings: i.num_ratings,
+        })
        .collect();

    CourseResponse {
@@ -484,17 +397,19 @@ async fn build_course_response(
 /// `GET /api/courses/search`
 async fn search_courses(
    State(state): State<AppState>,
-    Query(params): Query<SearchParams>,
+    axum_extra::extract::Query(params): axum_extra::extract::Query<SearchParams>,
 ) -> Result<Json<SearchResponse>, (AxumStatusCode, String)> {
    let limit = params.limit.clamp(1, 100);
    let offset = params.offset.max(0);

-    let order_by = sort_clause(params.sort_by, params.sort_dir);
-
    let (courses, total_count) = crate::data::courses::search_courses(
        &state.db_pool,
        &params.term,
-        params.subject.as_deref(),
+        if params.subject.is_empty() {
+            None
+        } else {
+            Some(&params.subject)
+        },
        params.q.as_deref(),
        params.course_number_low,
        params.course_number_high,
@@ -503,7 +418,8 @@ async fn search_courses(
        params.campus.as_deref(),
        limit,
        offset,
-        &order_by,
+        params.sort_by,
+        params.sort_dir,
    )
    .await
    .map_err(|e| {
@@ -514,10 +430,20 @@ async fn search_courses(
        )
    })?;

-    let mut course_responses = Vec::with_capacity(courses.len());
-    for course in &courses {
-        course_responses.push(build_course_response(course, &state.db_pool).await);
-    }
+    // Batch-fetch all instructors in a single query instead of N+1
+    let course_ids: Vec<i32> = courses.iter().map(|c| c.id).collect();
+    let mut instructor_map =
+        crate::data::courses::get_instructors_for_courses(&state.db_pool, &course_ids)
+            .await
+            .unwrap_or_default();
+
+    let course_responses: Vec<CourseResponse> = courses
+        .iter()
+        .map(|course| {
+            let instructors = instructor_map.remove(&course.id).unwrap_or_default();
+            build_course_response(course, instructors)
+        })
+        .collect();

    Ok(Json(SearchResponse {
        courses: course_responses,
@@ -543,7 +469,10 @@ async fn get_course(
        })?
        .ok_or_else(|| (AxumStatusCode::NOT_FOUND, "Course not found".to_string()))?;

-    Ok(Json(build_course_response(&course, &state.db_pool).await))
+    let instructors = crate::data::courses::get_course_instructors(&state.db_pool, course.id)
+        .await
+        .unwrap_or_default();
+    Ok(Json(build_course_response(&course, instructors)))
 }

 /// `GET /api/terms`
@@ -575,19 +504,24 @@ async fn get_terms(
    Ok(Json(terms))
 }

-/// `GET /api/subjects?term=202420`
+/// `GET /api/subjects?term=202620`
 async fn get_subjects(
    State(state): State<AppState>,
+    Query(params): Query<SubjectsParams>,
 ) -> Result<Json<Vec<CodeDescription>>, (AxumStatusCode, String)> {
-    let cache = state.reference_cache.read().await;
-    let entries = cache.entries_for_category("subject");
+    let rows = crate::data::courses::get_subjects_by_enrollment(&state.db_pool, &params.term)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "Failed to get subjects");
+            (
+                AxumStatusCode::INTERNAL_SERVER_ERROR,
+                "Failed to get subjects".to_string(),
+            )
+        })?;

-    let subjects: Vec<CodeDescription> = entries
+    let subjects: Vec<CodeDescription> = rows
        .into_iter()
-        .map(|(code, description)| CodeDescription {
-            code: code.to_string(),
-            description: description.to_string(),
-        })
+        .map(|(code, description, _enrollment)| CodeDescription { code, description })
        .collect();

    Ok(Json(subjects))
@@ -0,0 +1,188 @@
+//! In-memory caches for session resolution and OAuth CSRF state.
+
+use chrono::{DateTime, Utc};
+use dashmap::DashMap;
+use rand::Rng;
+use sqlx::PgPool;
+use std::sync::Arc;
+use std::time::{Duration, Instant};
+
+use crate::data::models::User;
+
+/// Cached session entry with TTL.
+#[derive(Debug, Clone)]
+struct CachedSession {
+    user: User,
+    session_expires_at: DateTime<Utc>,
+    cached_at: Instant,
+}
+
+/// In-memory session cache backed by PostgreSQL.
+///
+/// Provides fast session resolution without a DB round-trip on every request.
+/// Cache entries expire after a configurable TTL (default 5 minutes).
+#[derive(Clone)]
+pub struct SessionCache {
+    cache: Arc<DashMap<String, CachedSession>>,
+    db_pool: PgPool,
+    cache_ttl: Duration,
+}
+
+impl SessionCache {
+    /// Create a new session cache with a 5-minute default TTL.
+    pub fn new(db_pool: PgPool) -> Self {
+        Self {
+            cache: Arc::new(DashMap::new()),
+            db_pool,
+            cache_ttl: Duration::from_secs(5 * 60),
+        }
+    }
+
+    /// Resolve a session token to a [`User`], using the cache when possible.
+    ///
+    /// On cache hit (entry present, not stale, session not expired), returns the
+    /// cached user immediately. On miss or stale entry, queries the database for
+    /// the session and user, populates the cache, and fire-and-forgets a
+    /// `touch_session` call to update `last_active_at`.
+    pub async fn get_user(&self, token: &str) -> Option<User> {
+        // Check cache first
+        if let Some(entry) = self.cache.get(token) {
+            let now_instant = Instant::now();
+            let now_utc = Utc::now();
+
+            let cache_fresh = entry.cached_at + self.cache_ttl > now_instant;
+            let session_valid = entry.session_expires_at > now_utc;
+
+            if cache_fresh && session_valid {
+                return Some(entry.user.clone());
+            }
+
+            // Stale or expired — drop the ref before removing
+            drop(entry);
+            self.cache.remove(token);
+        }
+
+        // Cache miss — query DB
+        let session = crate::data::sessions::get_session(&self.db_pool, token)
+            .await
+            .ok()
+            .flatten()?;
+
+        let user = crate::data::users::get_user(&self.db_pool, session.user_id)
+            .await
+            .ok()
+            .flatten()?;
+
+        self.cache.insert(
+            token.to_owned(),
+            CachedSession {
+                user: user.clone(),
+                session_expires_at: session.expires_at,
+                cached_at: Instant::now(),
+            },
+        );
+
+        // Fire-and-forget touch to update last_active_at
+        let pool = self.db_pool.clone();
+        let token_owned = token.to_owned();
+        tokio::spawn(async move {
+            if let Err(e) = crate::data::sessions::touch_session(&pool, &token_owned).await {
+                tracing::warn!(error = %e, "failed to touch session");
+            }
+        });
+
+        Some(user)
+    }
+
+    /// Remove a single session from the cache (e.g. on logout).
+    pub fn evict(&self, token: &str) {
+        self.cache.remove(token);
+    }
+
+    /// Remove all cached sessions belonging to a user.
+    pub fn evict_user(&self, discord_id: i64) {
+        self.cache
+            .retain(|_, entry| entry.user.discord_id != discord_id);
+    }
+
+    /// Delete expired sessions from the database and sweep the in-memory cache.
+    ///
+    /// Returns the number of sessions deleted from the database.
+    #[allow(dead_code)] // Intended for periodic cleanup task (not yet wired)
+    pub async fn cleanup_expired(&self) -> anyhow::Result<u64> {
+        let deleted = crate::data::sessions::cleanup_expired(&self.db_pool).await?;
+
+        let now = Utc::now();
+        self.cache.retain(|_, entry| entry.session_expires_at > now);
+
+        Ok(deleted)
+    }
+}
+
+/// Data stored alongside each OAuth CSRF state token.
+struct OAuthStateEntry {
+    created_at: Instant,
+    /// The browser origin that initiated the login flow, so the callback
+    /// can reconstruct the exact redirect_uri Discord expects.
+    origin: String,
+}
+
+/// Ephemeral store for OAuth CSRF state tokens.
+///
+/// Tokens are stored with creation time and expire after a configurable TTL.
+/// Each token is single-use: validation consumes it.
+#[derive(Clone)]
+pub struct OAuthStateStore {
+    states: Arc<DashMap<String, OAuthStateEntry>>,
+    ttl: Duration,
+}
+
+impl Default for OAuthStateStore {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl OAuthStateStore {
+    /// Create a new store with a 10-minute TTL.
+    pub fn new() -> Self {
+        Self {
+            states: Arc::new(DashMap::new()),
+            ttl: Duration::from_secs(10 * 60),
+        }
+    }
+
+    /// Generate a random 16-byte hex CSRF token, store it with the given
+    /// origin, and return the token.
+    pub fn generate(&self, origin: String) -> String {
+        let bytes: [u8; 16] = rand::rng().random();
+        let token: String = bytes.iter().map(|b| format!("{b:02x}")).collect();
+        self.states.insert(
+            token.clone(),
+            OAuthStateEntry {
+                created_at: Instant::now(),
+                origin,
+            },
+        );
+        token
+    }
+
+    /// Validate and consume a CSRF token. Returns the stored origin if the
+    /// token was present and not expired.
+    pub fn validate(&self, state: &str) -> Option<String> {
+        let (_, entry) = self.states.remove(state)?;
+        if entry.created_at.elapsed() < self.ttl {
+            Some(entry.origin)
+        } else {
+            None
+        }
+    }
+
+    /// Remove all expired entries from the store.
+    #[allow(dead_code)] // Intended for periodic cleanup task (not yet wired)
+    pub fn cleanup(&self) {
+        let ttl = self.ttl;
+        self.states
+            .retain(|_, entry| entry.created_at.elapsed() < ttl);
+    }
+}
@@ -7,7 +7,7 @@
  },
  "files": {
    "ignoreUnknown": false,
-    "ignore": ["dist/", "node_modules/", ".svelte-kit/"]
+    "ignore": ["dist/", "node_modules/", ".svelte-kit/", "src/lib/bindings/"]
  },
  "formatter": {
    "enabled": true,
@@ -0,0 +1,148 @@
+#!/usr/bin/env bun
+/**
+ * Pre-compress static assets with maximum compression levels.
+ * Run after `bun run build`.
+ *
+ * Generates .gz, .br, .zst variants for compressible files ≥ MIN_SIZE bytes.
+ * These are embedded alongside originals by rust-embed and served via
+ * content negotiation in src/web/assets.rs.
+ */
+import { readdir, stat, readFile, writeFile } from "fs/promises";
+import { join, extname } from "path";
+import { gzipSync, brotliCompressSync, constants } from "zlib";
+import { $ } from "bun";
+
+// Must match COMPRESSION_MIN_SIZE in src/web/encoding.rs
+const MIN_SIZE = 512;
+
+const COMPRESSIBLE_EXTENSIONS = new Set([
+  ".js",
+  ".css",
+  ".html",
+  ".json",
+  ".svg",
+  ".txt",
+  ".xml",
+  ".map",
+]);
+
+// Check if zstd CLI is available
+let hasZstd = false;
+try {
+  await $`which zstd`.quiet();
+  hasZstd = true;
+} catch {
+  console.warn("Warning: zstd not found, skipping .zst generation");
+}
+
+async function* walkDir(dir: string): AsyncGenerator<string> {
+  try {
+    const entries = await readdir(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const path = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        yield* walkDir(path);
+      } else if (entry.isFile()) {
+        yield path;
+      }
+    }
+  } catch {
+    // Directory doesn't exist, skip
+  }
+}
+
+async function compressFile(path: string): Promise<void> {
+  const ext = extname(path);
+
+  if (!COMPRESSIBLE_EXTENSIONS.has(ext)) return;
+  if (path.endsWith(".br") || path.endsWith(".gz") || path.endsWith(".zst")) return;
+
+  const stats = await stat(path);
+  if (stats.size < MIN_SIZE) return;
+
+  // Skip if all compressed variants already exist
+  const variantsExist = await Promise.all([
+    stat(`${path}.br`).then(
+      () => true,
+      () => false
+    ),
+    stat(`${path}.gz`).then(
+      () => true,
+      () => false
+    ),
+    hasZstd
+      ? stat(`${path}.zst`).then(
+          () => true,
+          () => false
+        )
+      : Promise.resolve(false),
+  ]);
+
+  if (variantsExist.every((exists) => exists || !hasZstd)) {
+    return;
+  }
+
+  const content = await readFile(path);
+  const originalSize = content.length;
+
+  // Brotli (maximum quality = 11)
+  const brContent = brotliCompressSync(content, {
+    params: {
+      [constants.BROTLI_PARAM_QUALITY]: 11,
+    },
+  });
+  await writeFile(`${path}.br`, brContent);
+
+  // Gzip (level 9)
+  const gzContent = gzipSync(content, { level: 9 });
+  await writeFile(`${path}.gz`, gzContent);
+
+  // Zstd (level 19 - maximum)
+  if (hasZstd) {
+    try {
+      await $`zstd -19 -q -f -o ${path}.zst ${path}`.quiet();
+    } catch (e) {
+      console.warn(`Warning: Failed to compress ${path} with zstd: ${e}`);
+    }
+  }
+
+  const brRatio = ((brContent.length / originalSize) * 100).toFixed(1);
+  const gzRatio = ((gzContent.length / originalSize) * 100).toFixed(1);
+  console.log(`Compressed: ${path} (br: ${brRatio}%, gz: ${gzRatio}%, ${originalSize} bytes)`);
+}
+
+async function main() {
+  console.log("Pre-compressing static assets...");
+
+  // Banner uses adapter-static with output in dist/
+  const dirs = ["dist"];
+  let scannedFiles = 0;
+  let compressedFiles = 0;
+
+  for (const dir of dirs) {
+    for await (const file of walkDir(dir)) {
+      const ext = extname(file);
+      scannedFiles++;
+
+      if (
+        COMPRESSIBLE_EXTENSIONS.has(ext) &&
+        !file.endsWith(".br") &&
+        !file.endsWith(".gz") &&
+        !file.endsWith(".zst")
+      ) {
+        const stats = await stat(file);
+        if (stats.size >= MIN_SIZE) {
+          await compressFile(file);
+          compressedFiles++;
+        }
+      }
+    }
+  }
+
+  console.log(`Done! Scanned ${scannedFiles} files, compressed ${compressedFiles} files.`);
+}
+
+main().catch((e) => {
+  console.error("Compression failed:", e);
+  process.exit(1);
+});
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="no-transition">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,23 +11,6 @@ describe("BannerApiClient", () => {
    vi.clearAllMocks();
  });

-  it("should fetch health data", async () => {
-    const mockHealth = {
-      status: "healthy",
-      timestamp: "2024-01-01T00:00:00Z",
-    };
-
-    vi.mocked(fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockHealth),
-    } as Response);
-
-    const result = await apiClient.getHealth();
-
-    expect(fetch).toHaveBeenCalledWith("/api/health");
-    expect(result).toEqual(mockHealth);
-  });
-
  it("should fetch status data", async () => {
    const mockStatus = {
      status: "active" as const,
@@ -57,7 +40,7 @@ describe("BannerApiClient", () => {
      statusText: "Internal Server Error",
    } as Response);

-    await expect(apiClient.getHealth()).rejects.toThrow(
+    await expect(apiClient.getStatus()).rejects.toThrow(
      "API request failed: 500 Internal Server Error"
    );
  });
@@ -77,7 +60,7 @@ describe("BannerApiClient", () => {

    const result = await apiClient.searchCourses({
      term: "202420",
-      subject: "CS",
+      subjects: ["CS"],
      q: "data",
      open_only: true,
      limit: 25,
@@ -7,6 +7,7 @@ import type {
  ServiceInfo,
  ServiceStatus,
  StatusResponse,
+  User,
 } from "$lib/bindings";

 const API_BASE_URL = "/api";
@@ -30,26 +31,50 @@ export type ReferenceEntry = CodeDescription;
 // SearchResponse re-exported (aliased to strip the "Generated" suffix)
 export type SearchResponse = SearchResponseGenerated;

-// Health/metrics endpoints return ad-hoc JSON — keep manual types
-export interface HealthResponse {
-  status: string;
-  timestamp: string;
-}
-
-export interface MetricsResponse {
-  banner_api: {
-    status: string;
-  };
-  timestamp: string;
-}
-
 // Client-side only — not generated from Rust
 export type SortColumn = "course_code" | "title" | "instructor" | "time" | "seats";
 export type SortDirection = "asc" | "desc";

+export interface AdminStatus {
+  userCount: number;
+  sessionCount: number;
+  courseCount: number;
+  scrapeJobCount: number;
+  services: { name: string; status: string }[];
+}
+
+export interface ScrapeJob {
+  id: number;
+  targetType: string;
+  targetPayload: unknown;
+  priority: string;
+  executeAt: string;
+  createdAt: string;
+  lockedAt: string | null;
+  retryCount: number;
+  maxRetries: number;
+}
+
+export interface ScrapeJobsResponse {
+  jobs: ScrapeJob[];
+}
+
+export interface AuditLogEntry {
+  id: number;
+  courseId: number;
+  timestamp: string;
+  fieldChanged: string;
+  oldValue: string;
+  newValue: string;
+}
+
+export interface AuditLogResponse {
+  entries: AuditLogEntry[];
+}
+
 export interface SearchParams {
  term: string;
-  subject?: string;
+  subjects?: string[];
  q?: string;
  open_only?: boolean;
  limit?: number;
@@ -77,22 +102,18 @@ export class BannerApiClient {
    return (await response.json()) as T;
  }

-  async getHealth(): Promise<HealthResponse> {
-    return this.request<HealthResponse>("/health");
-  }
-
  async getStatus(): Promise<StatusResponse> {
    return this.request<StatusResponse>("/status");
  }

-  async getMetrics(): Promise<MetricsResponse> {
-    return this.request<MetricsResponse>("/metrics");
-  }
-
  async searchCourses(params: SearchParams): Promise<SearchResponse> {
    const query = new URLSearchParams();
    query.set("term", params.term);
-    if (params.subject) query.set("subject", params.subject);
+    if (params.subjects) {
+      for (const s of params.subjects) {
+        query.append("subject", s);
+      }
+    }
    if (params.q) query.set("q", params.q);
    if (params.open_only) query.set("open_only", "true");
    if (params.limit !== undefined) query.set("limit", String(params.limit));
@@ -113,6 +134,33 @@ export class BannerApiClient {
  async getReference(category: string): Promise<ReferenceEntry[]> {
    return this.request<ReferenceEntry[]>(`/reference/${encodeURIComponent(category)}`);
  }
+
+  // Admin endpoints
+  async getAdminStatus(): Promise<AdminStatus> {
+    return this.request<AdminStatus>("/admin/status");
+  }
+
+  async getAdminUsers(): Promise<User[]> {
+    return this.request<User[]>("/admin/users");
+  }
+
+  async setUserAdmin(discordId: bigint, isAdmin: boolean): Promise<User> {
+    const response = await this.fetchFn(`${this.baseUrl}/admin/users/${discordId}/admin`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ is_admin: isAdmin }),
+    });
+    if (!response.ok) throw new Error(`API request failed: ${response.status}`);
+    return (await response.json()) as User;
+  }
+
+  async getAdminScrapeJobs(): Promise<ScrapeJobsResponse> {
+    return this.request<ScrapeJobsResponse>("/admin/scrape-jobs");
+  }
+
+  async getAdminAuditLog(): Promise<AuditLogResponse> {
+    return this.request<AuditLogResponse>("/admin/audit-log");
+  }
 }

 export const client = new BannerApiClient();
@@ -0,0 +1,55 @@
+import type { User } from "$lib/bindings";
+
+type AuthState =
+  | { mode: "loading" }
+  | { mode: "authenticated"; user: User }
+  | { mode: "unauthenticated" };
+
+class AuthStore {
+  state = $state<AuthState>({ mode: "loading" });
+
+  get user(): User | null {
+    return this.state.mode === "authenticated" ? this.state.user : null;
+  }
+
+  get isAdmin(): boolean {
+    return this.user?.isAdmin ?? false;
+  }
+
+  get isLoading(): boolean {
+    return this.state.mode === "loading";
+  }
+
+  get isAuthenticated(): boolean {
+    return this.state.mode === "authenticated";
+  }
+
+  async init() {
+    try {
+      const response = await fetch("/api/auth/me");
+      if (response.ok) {
+        const user: User = await response.json();
+        this.state = { mode: "authenticated", user };
+      } else {
+        this.state = { mode: "unauthenticated" };
+      }
+    } catch {
+      this.state = { mode: "unauthenticated" };
+    }
+  }
+
+  login() {
+    window.location.href = "/api/auth/login";
+  }
+
+  async logout() {
+    try {
+      await fetch("/api/auth/logout", { method: "POST" });
+    } finally {
+      this.state = { mode: "unauthenticated" };
+      window.location.href = "/";
+    }
+  }
+}
+
+export const authStore = new AuthStore();
@@ -0,0 +1,9 @@
+export type { CodeDescription } from "./CodeDescription";
+export type { CourseResponse } from "./CourseResponse";
+export type { DbMeetingTime } from "./DbMeetingTime";
+export type { InstructorResponse } from "./InstructorResponse";
+export type { SearchResponse } from "./SearchResponse";
+export type { ServiceInfo } from "./ServiceInfo";
+export type { ServiceStatus } from "./ServiceStatus";
+export type { StatusResponse } from "./StatusResponse";
+export type { User } from "./User";
@@ -7,22 +7,17 @@ import {
  formatMeetingDaysLong,
  isMeetingTimeTBA,
  isTimeTBA,
+  ratingColor,
 } from "$lib/course";
+import { useClipboard } from "$lib/composables/useClipboard.svelte";
+import { cn, tooltipContentClass } from "$lib/utils";
 import { Tooltip } from "bits-ui";
+import SimpleTooltip from "./SimpleTooltip.svelte";
 import { Info, Copy, Check } from "@lucide/svelte";

 let { course }: { course: CourseResponse } = $props();

-let copiedEmail: string | null = $state(null);
-
-async function copyEmail(email: string, event: MouseEvent) {
-  event.stopPropagation();
-  await navigator.clipboard.writeText(email);
-  copiedEmail = email;
-  setTimeout(() => {
-    copiedEmail = null;
-  }, 2000);
-}
+const clipboard = useClipboard();
 </script>

 <div class="bg-muted/60 p-5 text-sm border-b border-border">
@@ -41,33 +36,34 @@ async function copyEmail(email: string, event: MouseEvent) {
                  class="inline-flex items-center gap-1.5 text-sm font-medium bg-card border border-border rounded-md px-2.5 py-1 text-foreground hover:border-foreground/20 hover:bg-card/80 transition-colors"
                >
                  {instructor.displayName}
-                  {#if 'rmpRating' in instructor && instructor.rmpRating}
-                    {@const rating = instructor.rmpRating as number}
+                  {#if instructor.rmpRating != null}
+                    {@const rating = instructor.rmpRating}
                    <span
-                      class="text-[10px] font-semibold {rating >= 4.0 ? 'text-status-green' : rating >= 3.0 ? 'text-yellow-500' : 'text-status-red'}"
+                      class="text-[10px] font-semibold {ratingColor(rating)}"
                    >{rating.toFixed(1)}★</span>
                  {/if}
                </span>
              </Tooltip.Trigger>
              <Tooltip.Content
-                class="bg-card text-card-foreground text-xs border border-border rounded-md px-3 py-2 shadow-md max-w-72"
+                sideOffset={6}
+                class={cn(tooltipContentClass, "px-3 py-2")}
              >
                <div class="space-y-1.5">
                  <div class="font-medium">{instructor.displayName}</div>
                  {#if instructor.isPrimary}
                    <div class="text-muted-foreground">Primary instructor</div>
                  {/if}
-                  {#if 'rmpRating' in instructor && instructor.rmpRating}
+                  {#if instructor.rmpRating != null}
                    <div class="text-muted-foreground">
-                      {(instructor.rmpRating as number).toFixed(1)}/5 ({(instructor as any).rmpNumRatings ?? 0} ratings)
+                      {instructor.rmpRating.toFixed(1)}/5 ({instructor.rmpNumRatings ?? 0} ratings)
                    </div>
                  {/if}
                  {#if instructor.email}
                    <button
-                      onclick={(e) => copyEmail(instructor.email!, e)}
+                      onclick={(e) => clipboard.copy(instructor.email!, e)}
                      class="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
                    >
-                      {#if copiedEmail === instructor.email}
+                      {#if clipboard.copiedValue === instructor.email}
                        <Check class="size-3" />
                        <span>Copied!</span>
                      {:else}
@@ -134,16 +130,9 @@ async function copyEmail(email: string, event: MouseEvent) {
      <h4 class="text-sm text-foreground mb-2">
        <span class="inline-flex items-center gap-1">
          Delivery
-          <Tooltip.Root delayDuration={100}>
-            <Tooltip.Trigger>
-              <Info class="size-3 text-muted-foreground/50" />
-            </Tooltip.Trigger>
-            <Tooltip.Content
-              class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72"
-            >
-              How the course is taught: in-person, online, hybrid, etc.
-            </Tooltip.Content>
-          </Tooltip.Root>
+          <SimpleTooltip text="How the course is taught: in-person, online, hybrid, etc." delay={150} passthrough>
+            <Info class="size-3 text-muted-foreground/50" />
+          </SimpleTooltip>
        </span>
      </h4>
      <span class="text-foreground">
@@ -168,34 +157,20 @@ async function copyEmail(email: string, event: MouseEvent) {
        <h4 class="text-sm text-foreground mb-2">
          <span class="inline-flex items-center gap-1">
            Attributes
-            <Tooltip.Root delayDuration={100}>
-              <Tooltip.Trigger>
-                <Info class="size-3 text-muted-foreground/50" />
-              </Tooltip.Trigger>
-              <Tooltip.Content
-                class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72"
-              >
-                Course flags for degree requirements, core curriculum, or special designations
-              </Tooltip.Content>
-            </Tooltip.Root>
+            <SimpleTooltip text="Course flags for degree requirements, core curriculum, or special designations" delay={150} passthrough>
+              <Info class="size-3 text-muted-foreground/50" />
+            </SimpleTooltip>
          </span>
        </h4>
        <div class="flex flex-wrap gap-1.5">
          {#each course.attributes as attr}
-            <Tooltip.Root delayDuration={100}>
-              <Tooltip.Trigger>
-                <span
-                  class="inline-flex text-xs font-medium bg-card border border-border rounded-md px-2 py-0.5 text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
-                >
-                  {attr}
-                </span>
-              </Tooltip.Trigger>
-              <Tooltip.Content
-                class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-64"
+            <SimpleTooltip text="Course attribute code" delay={150} passthrough>
+              <span
+                class="inline-flex text-xs font-medium bg-card border border-border rounded-md px-2 py-0.5 text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
              >
-                Course attribute code
-              </Tooltip.Content>
-            </Tooltip.Root>
+                {attr}
+              </span>
+            </SimpleTooltip>
          {/each}
        </div>
      </div>
@@ -207,19 +182,12 @@ async function copyEmail(email: string, event: MouseEvent) {
        <h4 class="text-sm text-foreground mb-2">
          <span class="inline-flex items-center gap-1">
            Cross-list
-            <Tooltip.Root delayDuration={100}>
-              <Tooltip.Trigger>
-                <Info class="size-3 text-muted-foreground/50" />
-              </Tooltip.Trigger>
-              <Tooltip.Content
-                class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72"
-              >
-                Cross-listed sections share enrollment across multiple course numbers. Students in any linked section attend the same class.
-              </Tooltip.Content>
-            </Tooltip.Root>
+            <SimpleTooltip text="Cross-listed sections share enrollment across multiple course numbers. Students in any linked section attend the same class." delay={150} passthrough>
+              <Info class="size-3 text-muted-foreground/50" />
+            </SimpleTooltip>
          </span>
        </h4>
-        <Tooltip.Root delayDuration={100}>
+        <Tooltip.Root delayDuration={150} disableHoverableContent>
          <Tooltip.Trigger>
            <span class="inline-flex items-center gap-1.5 text-foreground font-mono">
              <span class="bg-card border border-border rounded-md px-2 py-0.5 text-xs font-medium">
@@ -233,7 +201,8 @@ async function copyEmail(email: string, event: MouseEvent) {
            </span>
          </Tooltip.Trigger>
          <Tooltip.Content
-            class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72"
+            sideOffset={6}
+            class={tooltipContentClass}
          >
            Group <span class="font-mono font-medium">{course.crossList}</span>
            {#if course.crossListCount != null && course.crossListCapacity != null}
@@ -2,14 +2,26 @@
 import type { CourseResponse } from "$lib/api";
 import {
  abbreviateInstructor,
-  formatTime,
+  concernAccentColor,
+  formatLocationDisplay,
+  formatLocationTooltip,
  formatMeetingDays,
-  formatLocation,
+  formatMeetingTimesTooltip,
+  formatTimeRange,
+  getDeliveryConcern,
  getPrimaryInstructor,
  isMeetingTimeTBA,
  isTimeTBA,
+  openSeats,
+  seatsColor,
+  seatsDotColor,
+  ratingColor,
 } from "$lib/course";
+import { useClipboard } from "$lib/composables/useClipboard.svelte";
+import { useOverlayScrollbars } from "$lib/composables/useOverlayScrollbars.svelte";
 import CourseDetail from "./CourseDetail.svelte";
+import { fade, fly, slide } from "svelte/transition";
+import { flip } from "svelte/animate";
 import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
 import {
  getCoreRowModel,
@@ -21,7 +33,7 @@ import {
 } from "@tanstack/table-core";
 import { ArrowUp, ArrowDown, ArrowUpDown, Columns3, Check, RotateCcw } from "@lucide/svelte";
 import { DropdownMenu, ContextMenu } from "bits-ui";
-import { fade, fly } from "svelte/transition";
+import SimpleTooltip from "./SimpleTooltip.svelte";

 let {
  courses,
@@ -29,23 +41,37 @@ let {
  sorting = [],
  onSortingChange,
  manualSorting = false,
+  subjectMap = {},
 }: {
  courses: CourseResponse[];
  loading: boolean;
  sorting?: SortingState;
  onSortingChange?: (sorting: SortingState) => void;
  manualSorting?: boolean;
+  subjectMap?: Record<string, string>;
 } = $props();

 let expandedCrn: string | null = $state(null);
+let tableWrapper: HTMLDivElement = undefined!;
+const clipboard = useClipboard(1000);
+
+// Collapse expanded row when the dataset changes to avoid stale detail rows
+// and FLIP position calculation glitches from lingering expanded content
+$effect(() => {
+  courses; // track dependency
+  expandedCrn = null;
+});
+
+useOverlayScrollbars(() => tableWrapper, {
+  overflow: { x: "scroll", y: "hidden" },
+  scrollbars: { autoHide: "never" },
+});

 // Column visibility state
 let columnVisibility: VisibilityState = $state({});

-const DEFAULT_VISIBILITY: VisibilityState = {};
-
 function resetColumnVisibility() {
-  columnVisibility = { ...DEFAULT_VISIBILITY };
+  columnVisibility = {};
 }

 function handleVisibilityChange(updater: Updater<VisibilityState>) {
@@ -59,36 +85,12 @@ function toggleRow(crn: string) {
  expandedCrn = expandedCrn === crn ? null : crn;
 }

-function openSeats(course: CourseResponse): number {
-  return Math.max(0, course.maxEnrollment - course.enrollment);
-}
-
-function seatsColor(course: CourseResponse): string {
-  const open = openSeats(course);
-  if (open === 0) return "text-status-red";
-  if (open <= 5) return "text-yellow-500";
-  return "text-status-green";
-}
-
-function seatsDotColor(course: CourseResponse): string {
-  const open = openSeats(course);
-  if (open === 0) return "bg-red-500";
-  if (open <= 5) return "bg-yellow-500";
-  return "bg-green-500";
-}
-
 function primaryInstructorDisplay(course: CourseResponse): string {
  const primary = getPrimaryInstructor(course.instructors);
  if (!primary) return "Staff";
  return abbreviateInstructor(primary.displayName);
 }

-function ratingColor(rating: number): string {
-  if (rating >= 4.0) return "text-status-green";
-  if (rating >= 3.0) return "text-yellow-500";
-  return "text-status-red";
-}
-
 function primaryRating(course: CourseResponse): { rating: number; count: number } | null {
  const primary = getPrimaryInstructor(course.instructors);
  if (!primary?.rmpRating) return null;
@@ -132,14 +134,14 @@ const columns: ColumnDef<CourseResponse, unknown>[] = [
    accessorFn: (row) => {
      if (row.meetingTimes.length === 0) return "";
      const mt = row.meetingTimes[0];
-      return `${formatMeetingDays(mt)} ${formatTime(mt.begin_time)}`;
+      return `${formatMeetingDays(mt)} ${formatTimeRange(mt.begin_time, mt.end_time)}`;
    },
    header: "Time",
    enableSorting: true,
  },
  {
    id: "location",
-    accessorFn: (row) => formatLocation(row) ?? "",
+    accessorFn: (row) => formatLocationDisplay(row) ?? "",
    header: "Location",
    enableSorting: false,
  },
@@ -167,6 +169,7 @@ const table = createSvelteTable({
  get data() {
    return courses;
  },
+  getRowId: (row) => String(row.crn),
  columns,
  state: {
    get sorting() {
@@ -189,264 +192,493 @@ const table = createSvelteTable({
 });
 </script>

-{#snippet columnVisibilityItems(variant: "dropdown" | "context")}
-  {#if variant === "dropdown"}
-    <DropdownMenu.Group>
-      <DropdownMenu.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-        Toggle columns
-      </DropdownMenu.GroupHeading>
-      {#each columns as col}
-        {@const id = col.id!}
-        {@const label = typeof col.header === "string" ? col.header : id}
-        <DropdownMenu.CheckboxItem
-          checked={columnVisibility[id] !== false}
-          closeOnSelect={false}
-          onCheckedChange={(checked) => {
-            columnVisibility = { ...columnVisibility, [id]: checked };
-          }}
-          class="relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+{#snippet columnVisibilityGroup(
+    Group: typeof DropdownMenu.Group,
+    GroupHeading: typeof DropdownMenu.GroupHeading,
+    CheckboxItem: typeof DropdownMenu.CheckboxItem,
+    Separator: typeof DropdownMenu.Separator,
+    Item: typeof DropdownMenu.Item,
+)}
+    <Group>
+        <GroupHeading
+            class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
        >
-          {#snippet children({ checked })}
-            <span class="flex size-4 items-center justify-center rounded-sm border border-border">
-              {#if checked}
-                <Check class="size-3" />
-              {/if}
-            </span>
-            {label}
-          {/snippet}
-        </DropdownMenu.CheckboxItem>
-      {/each}
-    </DropdownMenu.Group>
+            Toggle columns
+        </GroupHeading>
+        {#each columns as col}
+            {@const id = col.id!}
+            {@const label =
+                typeof col.header === "string" ? col.header : id}
+            <CheckboxItem
+                checked={columnVisibility[id] !== false}
+                closeOnSelect={false}
+                onCheckedChange={(checked) => {
+                    columnVisibility = {
+                        ...columnVisibility,
+                        [id]: checked,
+                    };
+                }}
+                class="relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+            >
+                {#snippet children({ checked })}
+                    <span
+                        class="flex size-4 items-center justify-center rounded-sm border border-border"
+                    >
+                        {#if checked}
+                            <Check class="size-3" />
+                        {/if}
+                    </span>
+                    {label}
+                {/snippet}
+            </CheckboxItem>
+        {/each}
+    </Group>
    {#if hasCustomVisibility}
-      <DropdownMenu.Separator class="mx-1 my-1 h-px bg-border" />
-      <DropdownMenu.Item
-        class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
-        onSelect={resetColumnVisibility}
-      >
-        <RotateCcw class="size-3.5" />
-        Reset to default
-      </DropdownMenu.Item>
-    {/if}
-  {:else}
-    <ContextMenu.Group>
-      <ContextMenu.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-        Toggle columns
-      </ContextMenu.GroupHeading>
-      {#each columns as col}
-        {@const id = col.id!}
-        {@const label = typeof col.header === "string" ? col.header : id}
-        <ContextMenu.CheckboxItem
-          checked={columnVisibility[id] !== false}
-          closeOnSelect={false}
-          onCheckedChange={(checked) => {
-            columnVisibility = { ...columnVisibility, [id]: checked };
-          }}
-          class="relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+        <Separator class="mx-1 my-1 h-px bg-border" />
+        <Item
+            class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+            onSelect={resetColumnVisibility}
        >
-          {#snippet children({ checked })}
-            <span class="flex size-4 items-center justify-center rounded-sm border border-border">
-              {#if checked}
-                <Check class="size-3" />
-              {/if}
-            </span>
-            {label}
-          {/snippet}
-        </ContextMenu.CheckboxItem>
-      {/each}
-    </ContextMenu.Group>
-    {#if hasCustomVisibility}
-      <ContextMenu.Separator class="mx-1 my-1 h-px bg-border" />
-      <ContextMenu.Item
-        class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer select-none outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
-        onSelect={resetColumnVisibility}
-      >
-        <RotateCcw class="size-3.5" />
-        Reset to default
-      </ContextMenu.Item>
+            <RotateCcw class="size-3.5" />
+            Reset to default
+        </Item>
    {/if}
-  {/if}
 {/snippet}

 <!-- Toolbar: View columns button -->
 <div class="flex items-center justify-end pb-2">
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger
-      class="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
-    >
-      <Columns3 class="size-3.5" />
-      View
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        class="z-50 min-w-[160px] rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg"
-        align="end"
-        sideOffset={4}
-        forceMount
-      >
-        {#snippet child({ wrapperProps, props, open })}
-          {#if open}
-            <div {...wrapperProps}>
-              <div {...props} transition:fly={{ duration: 150, y: -10 }}>
-                {@render columnVisibilityItems("dropdown")}
-              </div>
-            </div>
-          {/if}
-        {/snippet}
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+            class="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+        >
+            <Columns3 class="size-3.5" />
+            View
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+            <DropdownMenu.Content
+                class="z-50 min-w-40 rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg"
+                align="end"
+                sideOffset={4}
+                forceMount
+            >
+                {#snippet child({ wrapperProps, props, open })}
+                    {#if open}
+                        <div {...wrapperProps}>
+                            <div
+                                {...props}
+                                transition:fly={{ duration: 150, y: -10 }}
+                            >
+                                {@render columnVisibilityGroup(
+                    DropdownMenu.Group,
+                    DropdownMenu.GroupHeading,
+                    DropdownMenu.CheckboxItem,
+                    DropdownMenu.Separator,
+                    DropdownMenu.Item,
+                )}
+                            </div>
+                        </div>
+                    {/if}
+                {/snippet}
+            </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+    </DropdownMenu.Root>
 </div>

 <!-- Table with context menu on header -->
-<div class="overflow-x-auto">
-  <ContextMenu.Root>
-    <ContextMenu.Trigger class="contents">
-      <table class="w-full border-collapse text-sm">
-        <thead>
-          {#each table.getHeaderGroups() as headerGroup}
-            <tr class="border-b border-border text-left text-muted-foreground">
-              {#each headerGroup.headers as header}
-                {#if header.column.getIsVisible()}
-                  <th
-                    class="py-2 px-2 font-medium {header.id === 'seats' ? 'text-right' : ''}"
-                    class:cursor-pointer={header.column.getCanSort()}
-                    class:select-none={header.column.getCanSort()}
-                    onclick={header.column.getToggleSortingHandler()}
-                  >
-                    {#if header.column.getCanSort()}
-                      <span class="inline-flex items-center gap-1">
-                        {#if typeof header.column.columnDef.header === "string"}
-                          {header.column.columnDef.header}
-                        {:else}
-                          <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
-                        {/if}
-                        {#if header.column.getIsSorted() === "asc"}
-                          <ArrowUp class="size-3.5" />
-                        {:else if header.column.getIsSorted() === "desc"}
-                          <ArrowDown class="size-3.5" />
-                        {:else}
-                          <ArrowUpDown class="size-3.5 text-muted-foreground/40" />
-                        {/if}
-                      </span>
-                    {:else if typeof header.column.columnDef.header === "string"}
-                      {header.column.columnDef.header}
-                    {:else}
-                      <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
-                    {/if}
-                  </th>
+<div bind:this={tableWrapper} class="overflow-x-auto">
+    <ContextMenu.Root>
+        <ContextMenu.Trigger class="contents">
+            <table class="w-full min-w-160 border-collapse text-sm">
+                <thead>
+                    {#each table.getHeaderGroups() as headerGroup}
+                        <tr
+                            class="border-b border-border text-left text-muted-foreground"
+                        >
+                            {#each headerGroup.headers as header}
+                                {#if header.column.getIsVisible()}
+                                    <th
+                                        class="py-2 px-2 font-medium {header.id ===
+                                        'seats'
+                                            ? 'text-right'
+                                            : ''}"
+                                        class:cursor-pointer={header.column.getCanSort()}
+                                        class:select-none={header.column.getCanSort()}
+                                        onclick={header.column.getToggleSortingHandler()}
+                                    >
+                                        {#if header.column.getCanSort()}
+                                            <span
+                                                class="inline-flex items-center gap-1"
+                                            >
+                                                {#if typeof header.column.columnDef.header === "string"}
+                                                    {header.column.columnDef
+                                                        .header}
+                                                {:else}
+                                                    <FlexRender
+                                                        content={header.column
+                                                            .columnDef.header}
+                                                        context={header.getContext()}
+                                                    />
+                                                {/if}
+                                                {#if header.column.getIsSorted() === "asc"}
+                                                    <ArrowUp class="size-3.5" />
+                                                {:else if header.column.getIsSorted() === "desc"}
+                                                    <ArrowDown
+                                                        class="size-3.5"
+                                                    />
+                                                {:else}
+                                                    <ArrowUpDown
+                                                        class="size-3.5 text-muted-foreground/40"
+                                                    />
+                                                {/if}
+                                            </span>
+                                        {:else if typeof header.column.columnDef.header === "string"}
+                                            {header.column.columnDef.header}
+                                        {:else}
+                                            <FlexRender
+                                                content={header.column.columnDef
+                                                    .header}
+                                                context={header.getContext()}
+                                            />
+                                        {/if}
+                                    </th>
+                                {/if}
+                            {/each}
+                        </tr>
+                    {/each}
+                </thead>
+                {#if loading && courses.length === 0}
+                    <tbody>
+                        {#each Array(5) as _}
+                            <tr class="border-b border-border">
+                                {#each table.getVisibleLeafColumns() as col}
+                                    <td class="py-2.5 px-2">
+                                        <div
+                                            class="h-4 bg-muted rounded animate-pulse {col.id ===
+                                            'seats'
+                                                ? 'w-14 ml-auto'
+                                                : col.id === 'title'
+                                                  ? 'w-40'
+                                                  : col.id === 'crn'
+                                                    ? 'w-10'
+                                                    : 'w-20'}"
+                                        ></div>
+                                    </td>
+                                {/each}
+                            </tr>
+                        {/each}
+                    </tbody>
+                {:else if courses.length === 0}
+                    <tbody>
+                        <tr>
+                            <td
+                                colspan={visibleColumnIds.length}
+                                class="py-12 text-center text-muted-foreground"
+                            >
+                                No courses found. Try adjusting your filters.
+                            </td>
+                        </tr>
+                    </tbody>
+                {:else}
+                    <!-- No out: transition — Svelte outros break table layout (tbody loses positioning and overlaps) -->
+                    {#each table.getRowModel().rows as row, i (row.id)}
+                        {@const course = row.original}
+                        <tbody
+                            animate:flip={{ duration: 300 }}
+                            in:fade={{ duration: 200, delay: Math.min(i * 20, 400) }}
+                        >
+                            <tr
+                                class="border-b border-border cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap {expandedCrn ===
+                                course.crn
+                                    ? 'bg-muted/30'
+                                    : ''}"
+                                onclick={() => toggleRow(course.crn)}
+                            >
+                                {#each row.getVisibleCells() as cell (cell.id)}
+                                    {@const colId = cell.column.id}
+                                    {#if colId === "crn"}
+                                        <td class="py-2 px-2 relative">
+                                            <button
+                                                class="relative inline-flex items-center rounded-full px-2 py-0.5 border border-border/50 bg-muted/20 hover:bg-muted/40 hover:border-foreground/30 transition-colors duration-150 cursor-copy focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring font-mono text-xs text-muted-foreground/70"
+                                                onclick={(e) =>
+                                                    clipboard.copy(
+                                                        course.crn,
+                                                        e,
+                                                    )}
+                                                onkeydown={(e) => {
+                                                    if (e.key === "Enter" || e.key === " ") {
+                                                        e.preventDefault();
+                                                        clipboard.copy(course.crn, e);
+                                                    }
+                                                }}
+                                                aria-label="Copy CRN {course.crn} to clipboard"
+                                            >
+                                                {course.crn}
+                                                {#if clipboard.copiedValue === course.crn}
+                                                    <span
+                                                        class="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs px-2 py-1 rounded-md bg-green-500/10 border border-green-500/20 text-green-700 dark:text-green-300 pointer-events-none z-10"
+                                                        in:fade={{
+                                                            duration: 100,
+                                                        }}
+                                                        out:fade={{
+                                                            duration: 200,
+                                                        }}
+                                                    >
+                                                        Copied!
+                                                    </span>
+                                                {/if}
+                                            </button>
+                                        </td>
+                                    {:else if colId === "course_code"}
+                                        {@const subjectDesc =
+                                            subjectMap[course.subject]}
+                                        <td class="py-2 px-2 whitespace-nowrap">
+                                            <SimpleTooltip
+                                                text={subjectDesc
+                                                    ? `${subjectDesc} ${course.courseNumber}`
+                                                    : `${course.subject} ${course.courseNumber}`}
+                                                delay={200}
+                                                side="bottom"
+                                                passthrough
+                                            >
+                                                <span class="font-semibold"
+                                                    >{course.subject}
+                                                    {course.courseNumber}</span
+                                                >{#if course.sequenceNumber}<span
+                                                        class="text-muted-foreground"
+                                                        >-{course.sequenceNumber}</span
+                                                    >{/if}
+                                            </SimpleTooltip>
+                                        </td>
+                                    {:else if colId === "title"}
+                                        <td
+                                            class="py-2 px-2 font-medium max-w-50 truncate"
+                                        >
+                                            <SimpleTooltip
+                                                text={course.title}
+                                                delay={200}
+                                                side="bottom"
+                                                passthrough
+                                            >
+                                                <span class="block truncate"
+                                                    >{course.title}</span
+                                                >
+                                            </SimpleTooltip>
+                                        </td>
+                                    {:else if colId === "instructor"}
+                                        {@const primary = getPrimaryInstructor(
+                                            course.instructors,
+                                        )}
+                                        {@const display = primaryInstructorDisplay(course)}
+                                        {@const commaIdx = display.indexOf(", ")}
+                                        {@const ratingData = primaryRating(course)}
+                                        <td class="py-2 px-2 whitespace-nowrap">
+                                            {#if display === "Staff"}
+                                                <span
+                                                    class="text-xs text-muted-foreground/60 uppercase"
+                                                    >Staff</span
+                                                >
+                                            {:else}
+                                                <SimpleTooltip
+                                                    text={primary?.displayName ??
+                                                        "Staff"}
+                                                    delay={200}
+                                                    side="bottom"
+                                                    passthrough
+                                                >
+                                                    {#if commaIdx !== -1}
+                                                        <span>{display.slice(0, commaIdx)},
+                                                            <span class="text-muted-foreground">{display.slice(commaIdx + 1)}</span
+                                                        ></span>
+                                                    {:else}
+                                                        <span>{display}</span>
+                                                    {/if}
+                                                </SimpleTooltip>
+                                            {/if}
+                                            {#if ratingData}
+                                                <SimpleTooltip
+                                                    text="{ratingData.rating.toFixed(
+                                                        1,
+                                                    )}/5 ({ratingData.count} ratings on RateMyProfessors)"
+                                                    delay={150}
+                                                    side="bottom"
+                                                    passthrough
+                                                >
+                                                    <span
+                                                        class="ml-1 text-xs font-medium {ratingColor(
+                                                            ratingData.rating,
+                                                        )}"
+                                                        >{ratingData.rating.toFixed(
+                                                            1,
+                                                        )}★</span
+                                                    >
+                                                </SimpleTooltip>
+                                            {/if}
+                                        </td>
+                                    {:else if colId === "time"}
+                                        <td class="py-2 px-2 whitespace-nowrap">
+                                            <SimpleTooltip
+                                                text={formatMeetingTimesTooltip(course.meetingTimes)}
+                                                passthrough
+                                            >
+                                                {#if timeIsTBA(course)}
+                                                    <span
+                                                        class="text-xs text-muted-foreground/60"
+                                                        >TBA</span
+                                                    >
+                                                {:else}
+                                                    {@const mt =
+                                                        course.meetingTimes[0]}
+                                                    <span>
+                                                        {#if !isMeetingTimeTBA(mt)}
+                                                            <span
+                                                                class="font-mono font-medium"
+                                                                >{formatMeetingDays(
+                                                                    mt,
+                                                                )}</span
+                                                            >
+                                                            {" "}
+                                                        {/if}
+                                                        {#if !isTimeTBA(mt)}
+                                                            <span
+                                                                class="text-muted-foreground"
+                                                                >{formatTimeRange(
+                                                                    mt.begin_time,
+                                                                    mt.end_time,
+                                                                )}</span
+                                                            >
+                                                        {:else}
+                                                            <span
+                                                                class="text-xs text-muted-foreground/60"
+                                                                >TBA</span
+                                                            >
+                                                        {/if}
+                                                        {#if course.meetingTimes.length > 1}
+                                                            <span
+                                                                class="ml-1 text-xs text-muted-foreground/70 font-medium"
+                                                                >+{course
+                                                                    .meetingTimes
+                                                                    .length -
+                                                                    1}</span
+                                                            >
+                                                        {/if}
+                                                    </span>
+                                                {/if}
+                                            </SimpleTooltip>
+                                        </td>
+                                    {:else if colId === "location"}
+                                        {@const concern = getDeliveryConcern(course)}
+                                        {@const accentColor = concernAccentColor(concern)}
+                                        {@const locTooltip = formatLocationTooltip(course)}
+                                        {@const locDisplay = formatLocationDisplay(course)}
+                                        <td class="py-2 px-2 whitespace-nowrap">
+                                            {#if locTooltip}
+                                                <SimpleTooltip
+                                                    text={locTooltip}
+                                                    delay={200}
+                                                    passthrough
+                                                >
+                                                    <span
+                                                        class="text-muted-foreground"
+                                                        class:pl-2={accentColor !== null}
+                                                        style:border-left={accentColor ? `2px solid ${accentColor}` : undefined}
+                                                    >
+                                                        {locDisplay ?? "—"}
+                                                    </span>
+                                                </SimpleTooltip>
+                                            {:else if locDisplay}
+                                                <span class="text-muted-foreground">
+                                                    {locDisplay}
+                                                </span>
+                                            {:else}
+                                                <span class="text-xs text-muted-foreground/50">—</span>
+                                            {/if}
+                                        </td>
+                                    {:else if colId === "seats"}
+                                        <td
+                                            class="py-2 px-2 text-right whitespace-nowrap"
+                                        >
+                                            <SimpleTooltip
+                                                text="{openSeats(
+                                                    course,
+                                                )} of {course.maxEnrollment} seats open, {course.enrollment} enrolled{course.waitCount >
+                                                0
+                                                    ? `, ${course.waitCount} waitlisted`
+                                                    : ''}"
+                                                delay={200}
+                                                side="left"
+                                                passthrough
+                                            >
+                                                <span
+                                                    class="inline-flex items-center gap-1.5"
+                                                >
+                                                    <span
+                                                        class="size-1.5 rounded-full {seatsDotColor(
+                                                            course,
+                                                        )} shrink-0"
+                                                    ></span>
+                                                    <span
+                                                        class="{seatsColor(
+                                                            course,
+                                                        )} font-medium tabular-nums"
+                                                        >{#if openSeats(course) === 0}Full{:else}{openSeats(
+                                                                course,
+                                                            )} open{/if}</span
+                                                    >
+                                                    <span
+                                                        class="text-muted-foreground/60 tabular-nums"
+                                                        >{course.enrollment}/{course.maxEnrollment}{#if course.waitCount > 0}
+                                                            · WL {course.waitCount}/{course.waitCapacity}{/if}</span
+                                                    >
+                                                </span>
+                                            </SimpleTooltip>
+                                        </td>
+                                    {/if}
+                                {/each}
+                            </tr>
+                            {#if expandedCrn === course.crn}
+                                <tr>
+                                    <td
+                                        colspan={visibleColumnIds.length}
+                                        class="p-0"
+                                    >
+                                        <div
+                                            transition:slide={{ duration: 200 }}
+                                        >
+                                            <CourseDetail {course} />
+                                        </div>
+                                    </td>
+                                </tr>
+                            {/if}
+                        </tbody>
+                    {/each}
                {/if}
-              {/each}
-            </tr>
-          {/each}
-        </thead>
-        <tbody>
-          {#if loading && courses.length === 0}
-            {#each Array(5) as _}
-              <tr class="border-b border-border">
-                {#each table.getVisibleLeafColumns() as col}
-                  <td class="py-2.5 px-2">
-                    <div class="h-4 bg-muted rounded animate-pulse {col.id === 'seats' ? 'w-14 ml-auto' : col.id === 'title' ? 'w-40' : col.id === 'crn' ? 'w-10' : 'w-20'}"></div>
-                  </td>
-                {/each}
-              </tr>
-            {/each}
-          {:else if courses.length === 0}
-            <tr>
-              <td colspan={visibleColumnIds.length} class="py-12 text-center text-muted-foreground">
-                No courses found. Try adjusting your filters.
-              </td>
-            </tr>
-          {:else}
-            {#each table.getRowModel().rows as row (row.id)}
-              {@const course = row.original}
-              <tr
-                class="border-b border-border cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap {expandedCrn === course.crn ? 'bg-muted/30' : ''}"
-                onclick={() => toggleRow(course.crn)}
-              >
-                {#each row.getVisibleCells() as cell (cell.id)}
-                  {@const colId = cell.column.id}
-                  {#if colId === "crn"}
-                    <td class="py-2 px-2 font-mono text-xs text-muted-foreground/70">{course.crn}</td>
-                  {:else if colId === "course_code"}
-                    <td class="py-2 px-2 whitespace-nowrap">
-                      <span class="font-semibold">{course.subject} {course.courseNumber}</span>{#if course.sequenceNumber}<span class="text-muted-foreground">-{course.sequenceNumber}</span>{/if}
-                    </td>
-                  {:else if colId === "title"}
-                    <td class="py-2 px-2 font-medium">{course.title}</td>
-                  {:else if colId === "instructor"}
-                    <td class="py-2 px-2 whitespace-nowrap">
-                      {primaryInstructorDisplay(course)}
-                      {#if primaryRating(course)}
-                        {@const r = primaryRating(course)!}
-                        <span
-                          class="ml-1 text-xs font-medium {ratingColor(r.rating)}"
-                          title="{r.rating.toFixed(1)}/5 ({r.count} ratings)"
-                        >{r.rating.toFixed(1)}★</span>
-                      {/if}
-                    </td>
-                  {:else if colId === "time"}
-                    <td class="py-2 px-2 whitespace-nowrap">
-                      {#if timeIsTBA(course)}
-                        <span class="text-xs text-muted-foreground/60">TBA</span>
-                      {:else}
-                        {@const mt = course.meetingTimes[0]}
-                        {#if !isMeetingTimeTBA(mt)}
-                          <span class="font-mono font-medium">{formatMeetingDays(mt)}</span>
-                          {" "}
-                        {/if}
-                        {#if !isTimeTBA(mt)}
-                          <span class="text-muted-foreground">{formatTime(mt.begin_time)}&ndash;{formatTime(mt.end_time)}</span>
-                        {:else}
-                          <span class="text-xs text-muted-foreground/60">TBA</span>
-                        {/if}
-                      {/if}
-                    </td>
-                  {:else if colId === "location"}
-                    <td class="py-2 px-2 whitespace-nowrap">
-                      {#if formatLocation(course)}
-                        <span class="text-muted-foreground">{formatLocation(course)}</span>
-                      {:else}
-                        <span class="text-xs text-muted-foreground/50">—</span>
-                      {/if}
-                    </td>
-                  {:else if colId === "seats"}
-                    <td class="py-2 px-2 text-right whitespace-nowrap">
-                      <span class="inline-flex items-center gap-1.5">
-                        <span class="size-1.5 rounded-full {seatsDotColor(course)} shrink-0"></span>
-                        <span class="{seatsColor(course)} font-medium tabular-nums">{#if openSeats(course) === 0}Full{:else}{openSeats(course)} open{/if}</span>
-                        <span class="text-muted-foreground/60 tabular-nums">{course.enrollment}/{course.maxEnrollment}{#if course.waitCount > 0} · WL {course.waitCount}/{course.waitCapacity}{/if}</span>
-                      </span>
-                    </td>
-                  {/if}
-                {/each}
-              </tr>
-              {#if expandedCrn === course.crn}
-                <tr>
-                  <td colspan={visibleColumnIds.length} class="p-0">
-                    <CourseDetail {course} />
-                  </td>
-                </tr>
-              {/if}
-            {/each}
-          {/if}
-        </tbody>
-      </table>
-    </ContextMenu.Trigger>
-    <ContextMenu.Portal>
-      <ContextMenu.Content
-        class="z-50 min-w-[160px] rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg"
-        forceMount
-      >
-        {#snippet child({ wrapperProps, props, open })}
-          {#if open}
-            <div {...wrapperProps}>
-              <div {...props} in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
-                {@render columnVisibilityItems("context")}
-              </div>
-            </div>
-          {/if}
-        {/snippet}
-      </ContextMenu.Content>
-    </ContextMenu.Portal>
-  </ContextMenu.Root>
+            </table>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+            <ContextMenu.Content
+                class="z-50 min-w-40 rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg"
+                forceMount
+            >
+                {#snippet child({ wrapperProps, props, open })}
+                    {#if open}
+                        <div {...wrapperProps}>
+                            <div
+                                {...props}
+                                in:fade={{ duration: 100 }}
+                                out:fade={{ duration: 100 }}
+                            >
+                                {@render columnVisibilityGroup(
+                    ContextMenu.Group,
+                    ContextMenu.GroupHeading,
+                    ContextMenu.CheckboxItem,
+                    ContextMenu.Separator,
+                    ContextMenu.Item,
+                )}
+                            </div>
+                        </div>
+                    {/if}
+                {/snippet}
+            </ContextMenu.Content>
+        </ContextMenu.Portal>
+    </ContextMenu.Root>
 </div>
@@ -0,0 +1,36 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+
+let {
+  commitHash,
+  showStatusLink = true,
+  class: className,
+}: {
+  commitHash?: string | null;
+  showStatusLink?: boolean;
+  class?: string;
+} = $props();
+</script>
+
+<div class={cn("flex justify-center items-center gap-2 mt-auto pt-6 pb-4", className)}>
+  {#if __APP_VERSION__}
+    <span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
+    <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
+  {/if}
+  <a
+    href={commitHash
+      ? `https://github.com/Xevion/banner/commit/${commitHash}`
+      : "https://github.com/Xevion/banner"}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="text-xs text-muted-foreground no-underline hover:underline"
+  >
+    GitHub
+  </a>
+  {#if showStatusLink}
+    <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
+    <a href="/health" class="text-xs text-muted-foreground no-underline hover:underline">
+      Status
+    </a>
+  {/if}
+</div>
@@ -1,4 +1,8 @@
 <script lang="ts">
+import { Select } from "bits-ui";
+import { ChevronUp, ChevronDown } from "@lucide/svelte";
+import { fly } from "svelte/transition";
+
 let {
  totalCount,
  offset,
@@ -11,32 +15,148 @@ let {
  onPageChange: (newOffset: number) => void;
 } = $props();

+const currentPage = $derived(Math.floor(offset / limit) + 1);
+const totalPages = $derived(Math.ceil(totalCount / limit));
 const start = $derived(offset + 1);
 const end = $derived(Math.min(offset + limit, totalCount));
-const hasPrev = $derived(offset > 0);
-const hasNext = $derived(offset + limit < totalCount);
+
+// Track direction for slide animation
+let prevPage = $state(1);
+let direction = $state(0);
+
+$effect(() => {
+  const page = currentPage;
+  if (page !== prevPage) {
+    direction = page > prevPage ? 1 : -1;
+    prevPage = page;
+  }
+});
+
+// 5 page slots: current-2, current-1, current, current+1, current+2
+const pageSlots = $derived([-2, -1, 0, 1, 2].map((delta) => currentPage + delta));
+
+function isSlotVisible(page: number): boolean {
+  return page >= 1 && page <= totalPages;
+}
+
+function goToPage(page: number) {
+  onPageChange((page - 1) * limit);
+}
+
+// Build items array for the Select dropdown
+const pageItems = $derived(
+  Array.from({ length: totalPages }, (_, i) => ({
+    value: String(i + 1),
+    label: String(i + 1),
+  }))
+);
+
+const selectValue = $derived(String(currentPage));
 </script>

-{#if totalCount > 0}
-  <div class="flex items-center justify-between text-sm">
-    <span class="text-muted-foreground">
-      Showing {start}–{end} of {totalCount} courses
-    </span>
-    <div class="flex gap-2">
-      <button
-        disabled={!hasPrev}
-        onclick={() => onPageChange(offset - limit)}
-        class="border border-border bg-card text-foreground rounded-md px-3 py-1.5 text-sm disabled:opacity-40 disabled:cursor-not-allowed hover:bg-muted/50 transition-colors"
-      >
-        Previous
-      </button>
-      <button
-        disabled={!hasNext}
-        onclick={() => onPageChange(offset + limit)}
-        class="border border-border bg-card text-foreground rounded-md px-3 py-1.5 text-sm disabled:opacity-40 disabled:cursor-not-allowed hover:bg-muted/50 transition-colors"
-      >
-        Next
-      </button>
+{#if totalCount > 0 && totalPages > 1}
+  <div class="flex items-center text-sm">
+    <!-- Left zone: result count -->
+    <div class="flex-1">
+      <span class="text-muted-foreground">
+        Showing {start}&ndash;{end} of {totalCount} courses
+      </span>
    </div>
+
+    <!-- Center zone: page buttons -->
+    <div class="flex items-center gap-1">
+      {#key currentPage}
+        {#each pageSlots as page, i (i)}
+          {#if i === 2}
+            <!-- Center slot: current page with dropdown trigger -->
+            <Select.Root
+              type="single"
+              value={selectValue}
+              onValueChange={(v) => {
+                if (v) goToPage(Number(v));
+              }}
+              items={pageItems}
+            >
+              <Select.Trigger
+                class="inline-flex items-center justify-center gap-1 w-auto min-w-9 h-9 px-2.5
+                       rounded-md text-sm font-medium tabular-nums
+                       border border-border bg-card text-foreground
+                       hover:bg-muted/50 active:bg-muted transition-colors
+                       cursor-pointer select-none outline-none
+                       focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                aria-label="Page {currentPage} of {totalPages}, click to select page"
+              >
+                <span in:fly={{ x: direction * 20, duration: 200 }}>{currentPage}</span>
+                <ChevronUp class="size-3 text-muted-foreground" />
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Content
+                  class="border border-border bg-card shadow-md outline-hidden z-50
+                         max-h-72 min-w-16 w-auto
+                         select-none rounded-md p-1
+                         data-[state=open]:animate-in data-[state=closed]:animate-out
+                         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+                         data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+                         data-[side=top]:slide-in-from-bottom-2
+                         data-[side=bottom]:slide-in-from-top-2"
+                  side="top"
+                  sideOffset={6}
+                >
+                  <Select.ScrollUpButton class="flex w-full items-center justify-center py-0.5">
+                    <ChevronUp class="size-3.5 text-muted-foreground" />
+                  </Select.ScrollUpButton>
+                  <Select.Viewport class="p-0.5">
+                    {#each pageItems as item (item.value)}
+                      <Select.Item
+                        class="rounded-sm outline-hidden flex h-8 w-full select-none items-center
+                               justify-center px-3 text-sm tabular-nums
+                               data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
+                               data-[selected]:font-semibold"
+                        value={item.value}
+                        label={item.label}
+                      >
+                        {item.label}
+                      </Select.Item>
+                    {/each}
+                  </Select.Viewport>
+                  <Select.ScrollDownButton class="flex w-full items-center justify-center py-0.5">
+                    <ChevronDown class="size-3.5 text-muted-foreground" />
+                  </Select.ScrollDownButton>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          {:else}
+            <!-- Side slot: navigable page button or invisible placeholder -->
+            <button
+              class="inline-flex items-center justify-center w-9 h-9
+                     rounded-md text-sm tabular-nums
+                     text-muted-foreground
+                     hover:bg-muted/50 hover:text-foreground active:bg-muted transition-colors
+                     cursor-pointer select-none
+                     focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+                     {isSlotVisible(page) ? '' : 'invisible pointer-events-none'}"
+              onclick={() => goToPage(page)}
+              aria-label="Go to page {page}"
+              aria-hidden={!isSlotVisible(page)}
+              tabindex={isSlotVisible(page) ? 0 : -1}
+              disabled={!isSlotVisible(page)}
+              in:fly={{ x: direction * 20, duration: 200 }}
+            >
+              {page}
+            </button>
+          {/if}
+        {/each}
+      {/key}
+    </div>
+
+    <!-- Right zone: spacer for centering -->
+    <div class="flex-1"></div>
+  </div>
+{:else if totalCount > 0}
+  <!-- Single page: just show the count, no pagination controls -->
+  <div class="flex items-center text-sm">
+    <span class="text-muted-foreground">
+      Showing {start}&ndash;{end} of {totalCount} courses
+    </span>
  </div>
 {/if}
@@ -1,52 +1,45 @@
 <script lang="ts">
 import type { Term, Subject } from "$lib/api";
+import SimpleTooltip from "./SimpleTooltip.svelte";
+import TermCombobox from "./TermCombobox.svelte";
+import SubjectCombobox from "./SubjectCombobox.svelte";

 let {
  terms,
  subjects,
  selectedTerm = $bindable(),
-  selectedSubject = $bindable(),
+  selectedSubjects = $bindable(),
  query = $bindable(),
  openOnly = $bindable(),
 }: {
  terms: Term[];
  subjects: Subject[];
  selectedTerm: string;
-  selectedSubject: string;
+  selectedSubjects: string[];
  query: string;
  openOnly: boolean;
 } = $props();
 </script>

-<div class="flex flex-wrap gap-3 items-center">
-  <select
-    bind:value={selectedTerm}
-    class="border border-border bg-card text-foreground rounded-md px-3 py-1.5 text-sm"
-  >
-    {#each terms as term (term.code)}
-      <option value={term.code}>{term.description}</option>
-    {/each}
-  </select>
+<div class="flex flex-wrap gap-3 items-start">
+  <TermCombobox {terms} bind:value={selectedTerm} />

-  <select
-    bind:value={selectedSubject}
-    class="border border-border bg-card text-foreground rounded-md px-3 py-1.5 text-sm"
-  >
-    <option value="">All Subjects</option>
-    {#each subjects as subject (subject.code)}
-      <option value={subject.code}>{subject.description}</option>
-    {/each}
-  </select>
+  <SubjectCombobox {subjects} bind:value={selectedSubjects} />

  <input
    type="text"
    placeholder="Search courses..."
+    aria-label="Search courses"
    bind:value={query}
-    class="border border-border bg-card text-foreground rounded-md px-3 py-1.5 text-sm flex-1 min-w-[200px]"
+    class="h-9 border border-border bg-card text-foreground rounded-md px-3 text-sm flex-1 min-w-[200px]
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+           transition-colors"
  />

-  <label class="flex items-center gap-1.5 text-sm text-muted-foreground cursor-pointer">
-    <input type="checkbox" bind:checked={openOnly} />
-    Open only
-  </label>
+  <SimpleTooltip text="Show only courses with available seats" delay={200} passthrough>
+    <label class="flex items-center gap-1.5 h-9 text-sm text-muted-foreground cursor-pointer">
+      <input type="checkbox" bind:checked={openOnly} />
+      Open only
+    </label>
+  </SimpleTooltip>
 </div>
@@ -0,0 +1,34 @@
+<script lang="ts">
+export interface SearchMeta {
+  totalCount: number;
+  durationMs: number;
+  timestamp: Date;
+}
+
+let { meta }: { meta: SearchMeta | null } = $props();
+
+let formattedTime = $derived(
+  meta
+    ? meta.timestamp.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+    : ""
+);
+
+let countLabel = $derived(meta ? meta.totalCount.toLocaleString() : "");
+let resultNoun = $derived(meta ? (meta.totalCount !== 1 ? "results" : "result") : "");
+let durationLabel = $derived(meta ? `${Math.round(meta.durationMs)}ms` : "");
+</script>
+
+{#if meta}
+  <p
+    class="pl-1 text-xs"
+    title="Last searched at {formattedTime}"
+  >
+    <span class="text-muted-foreground/70">{countLabel}</span>
+    <span class="text-muted-foreground/35">{resultNoun} in</span>
+    <span class="text-muted-foreground/70">{durationLabel}</span>
+  </p>
+{/if}
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { Tooltip } from "bits-ui";
+import type { Snippet } from "svelte";
+
+let {
+  text,
+  delay = 150,
+  side = "top",
+  passthrough = false,
+  children,
+}: {
+  text: string;
+  delay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  passthrough?: boolean;
+  children: Snippet;
+} = $props();
+</script>
+
+<Tooltip.Root delayDuration={delay} disableHoverableContent={passthrough}>
+  <Tooltip.Trigger>
+    {@render children()}
+  </Tooltip.Trigger>
+  <Tooltip.Content
+    {side}
+    sideOffset={6}
+    class="z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md whitespace-pre-line max-w-max"
+  >
+    {text}
+  </Tooltip.Content>
+</Tooltip.Root>
@@ -0,0 +1,161 @@
+<script lang="ts">
+import { Combobox } from "bits-ui";
+import { Check, ChevronsUpDown } from "@lucide/svelte";
+import { fly } from "svelte/transition";
+import type { Subject } from "$lib/api";
+
+let {
+  subjects,
+  value = $bindable(),
+}: {
+  subjects: Subject[];
+  value: string[];
+} = $props();
+
+let open = $state(false);
+let searchValue = $state("");
+let containerEl = $state<HTMLDivElement>(null!);
+
+const filteredSubjects = $derived.by(() => {
+  const query = searchValue.toLowerCase().trim();
+  if (query === "") return subjects;
+
+  const exactCode: Subject[] = [];
+  const codeStartsWith: Subject[] = [];
+  const descriptionMatch: Subject[] = [];
+
+  for (const s of subjects) {
+    const codeLower = s.code.toLowerCase();
+    const descLower = s.description.toLowerCase();
+
+    if (codeLower === query) {
+      exactCode.push(s);
+    } else if (codeLower.startsWith(query)) {
+      codeStartsWith.push(s);
+    } else if (descLower.includes(query) || codeLower.includes(query)) {
+      descriptionMatch.push(s);
+    }
+  }
+
+  return [...exactCode, ...codeStartsWith, ...descriptionMatch];
+});
+
+const MAX_VISIBLE_CHIPS = 3;
+const visibleChips = $derived(value.slice(0, MAX_VISIBLE_CHIPS));
+const overflowCount = $derived(Math.max(0, value.length - MAX_VISIBLE_CHIPS));
+
+function removeSubject(code: string) {
+  value = value.filter((v) => v !== code);
+}
+
+// bits-ui sets the input text to the last selected item's label — clear it
+$effect(() => {
+  value;
+  const input = containerEl?.querySelector("input");
+  if (input) {
+    input.value = "";
+    searchValue = "";
+  }
+});
+</script>
+
+<Combobox.Root
+  type="multiple"
+  bind:value
+  bind:open
+  onOpenChange={(o: boolean) => {
+    if (!o) searchValue = "";
+  }}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="relative h-9 rounded-md border border-border bg-card
+           flex flex-nowrap items-center gap-1 w-56 pr-9 overflow-hidden cursor-pointer
+           has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-background"
+    bind:this={containerEl}
+    onclick={() => { containerEl?.querySelector('input')?.focus(); }}
+  >
+    {#if value.length > 0}
+      {#each (open ? value : visibleChips) as code (code)}
+        <span
+          role="button"
+          tabindex="-1"
+          onmousedown={(e) => { e.preventDefault(); e.stopPropagation(); }}
+          onclick={(e) => { e.stopPropagation(); removeSubject(code); }}
+          onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.stopPropagation(); removeSubject(code); } }}
+          class="inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-xs font-mono shrink-0
+                 text-muted-foreground hover:outline hover:outline-1 hover:outline-ring
+                 cursor-pointer transition-[outline] duration-100 first:ml-2"
+        >
+          {code}
+        </span>
+      {/each}
+      {#if !open && overflowCount > 0}
+        <span class="text-xs text-muted-foreground shrink-0">+{overflowCount}</span>
+      {/if}
+    {/if}
+    <Combobox.Input
+      
+      oninput={(e) => (searchValue = e.currentTarget.value)}
+      onfocus={() => { open = true; }}
+      class="h-full min-w-0 flex-1 bg-transparent text-muted-foreground text-sm
+             placeholder:text-muted-foreground outline-none border-none
+             {value.length > 0 ? 'pl-1' : 'pl-3'}"
+      placeholder={value.length > 0 ? "Filter..." : "All Subjects"}
+      aria-label="Search subjects"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck={false}
+    />
+    <span class="absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
+      <ChevronsUpDown class="size-4" />
+    </span>
+  </div>
+  <Combobox.Portal>
+    <Combobox.Content
+      customAnchor={containerEl}
+      class="border border-border bg-card shadow-md
+             outline-hidden z-50
+             max-h-72 min-w-[var(--bits-combobox-anchor-width)] w-max max-w-96
+             select-none rounded-md p-1
+             data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"
+      sideOffset={4}
+      forceMount
+    >
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps}>
+            <div {...props} transition:fly={{ duration: 150, y: -4 }}>
+              <Combobox.Viewport class="p-0.5">
+                {#each filteredSubjects as subject (subject.code)}
+                  <Combobox.Item
+                    class="rounded-sm outline-hidden flex h-8 w-full select-none items-center gap-2 px-2 text-sm whitespace-nowrap
+                           data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+                    value={subject.code}
+                    label={subject.description}
+                  >
+                    {#snippet children({ selected })}
+                      <span class="inline-flex items-center justify-center rounded bg-muted px-1 py-0.5
+                                   text-xs font-mono text-muted-foreground w-10 shrink-0 text-center">
+                        {subject.code}
+                      </span>
+                      <span class="flex-1">{subject.description}</span>
+                      {#if selected}
+                        <Check class="ml-auto size-4 shrink-0" />
+                      {/if}
+                    {/snippet}
+                  </Combobox.Item>
+                {:else}
+                  <span class="block px-2 py-2 text-sm text-muted-foreground">
+                    No subjects found.
+                  </span>
+                {/each}
+              </Combobox.Viewport>
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </Combobox.Content>
+  </Combobox.Portal>
+</Combobox.Root>
@@ -0,0 +1,139 @@
+<script lang="ts">
+import { Combobox } from "bits-ui";
+import { Check, ChevronsUpDown } from "@lucide/svelte";
+import { fly } from "svelte/transition";
+import type { Term } from "$lib/api";
+
+let {
+  terms,
+  value = $bindable(),
+}: {
+  terms: Term[];
+  value: string;
+} = $props();
+
+let open = $state(false);
+let searchValue = $state("");
+let containerEl = $state<HTMLDivElement>(null!);
+
+const currentTermCode = $derived(
+  terms.find((t) => !t.description.includes("(View Only)"))?.code ?? ""
+);
+
+const selectedLabel = $derived(
+  terms.find((t) => t.code === value)?.description ?? "Select term..."
+);
+
+const filteredTerms = $derived.by(() => {
+  const query = searchValue.toLowerCase();
+  const matched =
+    query === "" ? terms : terms.filter((t) => t.description.toLowerCase().includes(query));
+
+  const current = matched.find((t) => t.code === currentTermCode);
+  const rest = matched.filter((t) => t.code !== currentTermCode);
+  return current ? [current, ...rest] : rest;
+});
+
+// Manage DOM input text: clear when open for searching, restore label when closed
+$effect(() => {
+  const _open = open;
+  void value; // track selection changes
+  const _label = selectedLabel;
+  const input = containerEl?.querySelector("input");
+  if (!input) return;
+  if (_open) {
+    input.value = "";
+    searchValue = "";
+  } else {
+    input.value = _label;
+  }
+});
+</script>
+
+<Combobox.Root
+  type="single"
+  bind:value={() => value, (v) => { if (v) value = v; }}
+  bind:open
+  onOpenChange={(o: boolean) => {
+    if (!o) searchValue = "";
+  }}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="relative h-9 rounded-md border border-border bg-card
+           flex items-center w-40 cursor-pointer
+           has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-background"
+    role="presentation"
+    bind:this={containerEl}
+    onclick={() => { containerEl?.querySelector('input')?.focus(); }}
+    onkeydown={() => { containerEl?.querySelector('input')?.focus(); }}
+  >
+    <Combobox.Input
+      oninput={(e) => (searchValue = e.currentTarget.value)}
+      onfocus={() => { open = true; }}
+      class="h-full w-full bg-transparent text-muted-foreground text-sm
+             placeholder:text-muted-foreground outline-none border-none
+             pl-3 pr-9 truncate"
+      placeholder="Select term..."
+      aria-label="Select term"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck={false}
+    />
+    <span class="absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
+      <ChevronsUpDown class="size-4" />
+    </span>
+  </div>
+  <Combobox.Portal>
+    <Combobox.Content
+      customAnchor={containerEl}
+      class="border border-border bg-card shadow-md
+             outline-hidden z-50
+             max-h-72 min-w-[var(--bits-combobox-anchor-width)]
+             select-none rounded-md p-1
+             data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"
+      sideOffset={4}
+      forceMount
+    >
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps}>
+            <div {...props} transition:fly={{ duration: 150, y: -4 }}>
+              <Combobox.Viewport class="p-0.5">
+                {#each filteredTerms as term, i (term.code)}
+                  {#if i === 1 && term.code !== currentTermCode && filteredTerms[0]?.code === currentTermCode}
+                    <div class="mx-2 my-1 h-px bg-border"></div>
+                  {/if}
+                  <Combobox.Item
+                    class="rounded-sm outline-hidden flex h-8 w-full select-none items-center px-2 text-sm
+                           data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
+                           {term.code === value ? 'cursor-default' : 'cursor-pointer'}
+                           {term.code === currentTermCode ? 'font-medium text-foreground' : 'text-foreground'}"
+                    value={term.code}
+                    label={term.description}
+                  >
+                    {#snippet children({ selected })}
+                      <span class="flex-1 truncate">
+                        {term.description}
+                        {#if term.code === currentTermCode}
+                          <span class="ml-1.5 text-xs text-muted-foreground font-normal">current</span>
+                        {/if}
+                      </span>
+                      {#if selected}
+                        <Check class="ml-2 size-4 shrink-0" />
+                      {/if}
+                    {/snippet}
+                  </Combobox.Item>
+                {:else}
+                  <span class="block px-2 py-2 text-sm text-muted-foreground">
+                    No terms found.
+                  </span>
+                {/each}
+              </Combobox.Viewport>
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </Combobox.Content>
+  </Combobox.Portal>
+</Combobox.Root>
@@ -2,6 +2,7 @@
 import { tick } from "svelte";
 import { Moon, Sun } from "@lucide/svelte";
 import { themeStore } from "$lib/stores/theme.svelte";
+import SimpleTooltip from "./SimpleTooltip.svelte";

 /**
 * Theme toggle with View Transitions API circular reveal animation.
@@ -42,25 +43,27 @@ async function handleToggle(event: MouseEvent) {
 }
 </script>

-<button
-  type="button"
-  onclick={(e) => handleToggle(e)}
-  aria-label={themeStore.isDark ? "Switch to light mode" : "Switch to dark mode"}
-  class="cursor-pointer border-none rounded-md flex items-center justify-center p-2 scale-125
-    text-muted-foreground hover:bg-muted bg-transparent transition-colors"
->
-  <div class="relative size-[18px]">
-    <Sun
-      size={18}
-      class="absolute inset-0 transition-all duration-300 {themeStore.isDark
-        ? 'rotate-90 scale-0 opacity-0'
-        : 'rotate-0 scale-100 opacity-100'}"
-    />
-    <Moon
-      size={18}
-      class="absolute inset-0 transition-all duration-300 {themeStore.isDark
-        ? 'rotate-0 scale-100 opacity-100'
-        : '-rotate-90 scale-0 opacity-0'}"
-    />
-  </div>
-</button>
+<SimpleTooltip text={themeStore.isDark ? "Switch to light mode" : "Switch to dark mode"} delay={200} side="bottom" passthrough>
+  <button
+    type="button"
+    onclick={(e) => handleToggle(e)}
+    aria-label={themeStore.isDark ? "Switch to light mode" : "Switch to dark mode"}
+    class="cursor-pointer border-none rounded-md flex items-center justify-center p-2 scale-125
+      text-muted-foreground hover:bg-muted bg-transparent transition-colors"
+  >
+    <div class="relative size-[18px]">
+      <Sun
+        size={18}
+        class="absolute inset-0 transition-all duration-300 {themeStore.isDark
+          ? 'rotate-90 scale-0 opacity-0'
+          : 'rotate-0 scale-100 opacity-100'}"
+      />
+      <Moon
+        size={18}
+        class="absolute inset-0 transition-all duration-300 {themeStore.isDark
+          ? 'rotate-0 scale-100 opacity-100'
+          : '-rotate-90 scale-0 opacity-0'}"
+      />
+    </div>
+  </button>
+</SimpleTooltip>
@@ -0,0 +1,32 @@
+/**
+ * Reactive clipboard copy with automatic "copied" state reset.
+ *
+ * Returns a `copiedValue` that is non-null while the copied feedback
+ * should be displayed, and a `copy()` function to trigger a copy.
+ */
+export function useClipboard(resetMs = 2000) {
+  let copiedValue = $state<string | null>(null);
+  let timeoutId: number | undefined;
+
+  async function copy(text: string, event?: MouseEvent | KeyboardEvent) {
+    event?.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(text);
+      clearTimeout(timeoutId);
+      copiedValue = text;
+      timeoutId = window.setTimeout(() => {
+        copiedValue = null;
+        timeoutId = undefined;
+      }, resetMs);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  }
+
+  return {
+    get copiedValue() {
+      return copiedValue;
+    },
+    copy,
+  };
+}
@@ -0,0 +1,37 @@
+import { onMount } from "svelte";
+import { OverlayScrollbars, type PartialOptions } from "overlayscrollbars";
+import { themeStore } from "$lib/stores/theme.svelte";
+
+/**
+ * Set up OverlayScrollbars on an element with automatic theme reactivity.
+ *
+ * Must be called during component initialization (uses `onMount` internally).
+ * The scrollbar theme automatically syncs with `themeStore.isDark`.
+ */
+export function useOverlayScrollbars(getElement: () => HTMLElement, options: PartialOptions = {}) {
+  onMount(() => {
+    const element = getElement();
+    const osInstance = OverlayScrollbars(element, {
+      ...options,
+      scrollbars: {
+        ...options.scrollbars,
+        theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
+      },
+    });
+
+    const unwatch = $effect.root(() => {
+      $effect(() => {
+        osInstance.options({
+          scrollbars: {
+            theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
+          },
+        });
+      });
+    });
+
+    return () => {
+      unwatch();
+      osInstance.destroy();
+    };
+  });
+}
@@ -1,14 +1,19 @@
 import { describe, it, expect } from "vitest";
 import {
  formatTime,
+  formatTimeRange,
  formatMeetingDays,
+  formatMeetingDaysVerbose,
  formatMeetingTime,
+  formatMeetingTimeTooltip,
+  formatMeetingTimesTooltip,
  abbreviateInstructor,
  formatCreditHours,
  getPrimaryInstructor,
  isMeetingTimeTBA,
  isTimeTBA,
  formatDate,
+  formatDateShort,
  formatMeetingDaysLong,
 } from "$lib/course";
 import type { DbMeetingTime, CourseResponse, InstructorResponse } from "$lib/api";
@@ -53,13 +58,13 @@ describe("formatMeetingDays", () => {
      formatMeetingDays(makeMeetingTime({ monday: true, wednesday: true, friday: true }))
    ).toBe("MWF");
  });
-  it("returns TR for tue/thu", () => {
-    expect(formatMeetingDays(makeMeetingTime({ tuesday: true, thursday: true }))).toBe("TR");
+  it("returns TTh for tue/thu", () => {
+    expect(formatMeetingDays(makeMeetingTime({ tuesday: true, thursday: true }))).toBe("TTh");
  });
-  it("returns empty string when no days", () => {
-    expect(formatMeetingDays(makeMeetingTime())).toBe("");
+  it("returns MW for mon/wed", () => {
+    expect(formatMeetingDays(makeMeetingTime({ monday: true, wednesday: true }))).toBe("MW");
  });
-  it("returns all days", () => {
+  it("returns MTWThF for all weekdays", () => {
    expect(
      formatMeetingDays(
        makeMeetingTime({
@@ -68,16 +73,56 @@ describe("formatMeetingDays", () => {
          wednesday: true,
          thursday: true,
          friday: true,
-          saturday: true,
-          sunday: true,
        })
      )
-    ).toBe("MTWRFSU");
+    ).toBe("MTWThF");
+  });
+  it("returns partial abbreviation for single day", () => {
+    expect(formatMeetingDays(makeMeetingTime({ monday: true }))).toBe("Mon");
+    expect(formatMeetingDays(makeMeetingTime({ thursday: true }))).toBe("Thu");
+    expect(formatMeetingDays(makeMeetingTime({ saturday: true }))).toBe("Sat");
+  });
+  it("concatenates codes for other multi-day combos", () => {
+    expect(formatMeetingDays(makeMeetingTime({ monday: true, friday: true }))).toBe("MF");
+    expect(formatMeetingDays(makeMeetingTime({ tuesday: true, saturday: true }))).toBe("TSa");
+    expect(
+      formatMeetingDays(makeMeetingTime({ wednesday: true, friday: true, sunday: true }))
+    ).toBe("WFSu");
+    expect(
+      formatMeetingDays(
+        makeMeetingTime({ monday: true, tuesday: true, wednesday: true, thursday: true })
+      )
+    ).toBe("MTWTh");
+  });
+  it("returns empty string when no days", () => {
+    expect(formatMeetingDays(makeMeetingTime())).toBe("");
+  });
+});
+
+describe("formatTimeRange", () => {
+  it("elides AM when both times are AM", () => {
+    expect(formatTimeRange("0900", "0950")).toBe("9:00–9:50 AM");
+  });
+  it("elides PM when both times are PM", () => {
+    expect(formatTimeRange("1315", "1430")).toBe("1:15–2:30 PM");
+  });
+  it("keeps both markers when crossing noon", () => {
+    expect(formatTimeRange("1130", "1220")).toBe("11:30 AM–12:20 PM");
+  });
+  it("returns TBA for null begin", () => {
+    expect(formatTimeRange(null, "0950")).toBe("TBA");
+  });
+  it("returns TBA for null end", () => {
+    expect(formatTimeRange("0900", null)).toBe("TBA");
+  });
+  it("handles midnight and noon", () => {
+    expect(formatTimeRange("0000", "0050")).toBe("12:00–12:50 AM");
+    expect(formatTimeRange("1200", "1250")).toBe("12:00–12:50 PM");
  });
 });

 describe("formatMeetingTime", () => {
-  it("formats a standard meeting time", () => {
+  it("formats a standard meeting time with elided AM/PM", () => {
    expect(
      formatMeetingTime(
        makeMeetingTime({
@@ -88,7 +133,19 @@ describe("formatMeetingTime", () => {
          end_time: "0950",
        })
      )
-    ).toBe("MWF 9:00 AM–9:50 AM");
+    ).toBe("MWF 9:00–9:50 AM");
+  });
+  it("keeps both markers when crossing noon", () => {
+    expect(
+      formatMeetingTime(
+        makeMeetingTime({
+          tuesday: true,
+          thursday: true,
+          begin_time: "1130",
+          end_time: "1220",
+        })
+      )
+    ).toBe("TTh 11:30 AM–12:20 PM");
  });
  it("returns TBA when no days", () => {
    expect(formatMeetingTime(makeMeetingTime({ begin_time: "0900", end_time: "0950" }))).toBe(
@@ -96,29 +153,68 @@ describe("formatMeetingTime", () => {
    );
  });
  it("returns days + TBA when no times", () => {
-    expect(formatMeetingTime(makeMeetingTime({ monday: true }))).toBe("M TBA");
+    expect(formatMeetingTime(makeMeetingTime({ monday: true }))).toBe("Mon TBA");
  });
 });

 describe("abbreviateInstructor", () => {
-  it("abbreviates standard name", () =>
-    expect(abbreviateInstructor("Heaps, John")).toBe("Heaps, J."));
+  it("returns short names unabbreviated", () =>
+    expect(abbreviateInstructor("Li, Bo")).toBe("Li, Bo"));
+  it("returns names within budget unabbreviated", () =>
+    expect(abbreviateInstructor("Heaps, John")).toBe("Heaps, John"));
  it("handles no comma", () => expect(abbreviateInstructor("Staff")).toBe("Staff"));
-  it("handles multiple first names", () =>
-    expect(abbreviateInstructor("Smith, Mary Jane")).toBe("Smith, M."));
+
+  // Progressive abbreviation with multiple given names
+  it("abbreviates trailing given names first", () =>
+    expect(abbreviateInstructor("Ramirez, Maria Elena")).toBe("Ramirez, Maria E."));
+  it("abbreviates all given names when needed", () =>
+    expect(abbreviateInstructor("Ramirez, Maria Elena", 16)).toBe("Ramirez, M. E."));
+  it("falls back to first initial only", () =>
+    expect(abbreviateInstructor("Ramirez, Maria Elena", 12)).toBe("Ramirez, M."));
+
+  // Single given name that exceeds budget
+  it("abbreviates single given name when over budget", () =>
+    expect(abbreviateInstructor("Bartholomew, Christopher", 18)).toBe("Bartholomew, C."));
+
+  // Respects custom maxLen
+  it("keeps full name when within custom budget", () =>
+    expect(abbreviateInstructor("Ramirez, Maria Elena", 30)).toBe("Ramirez, Maria Elena"));
+  it("always abbreviates when budget is tiny", () =>
+    expect(abbreviateInstructor("Heaps, John", 5)).toBe("Heaps, J."));
 });

 describe("getPrimaryInstructor", () => {
  it("returns primary instructor", () => {
    const instructors: InstructorResponse[] = [
-      { bannerId: "1", displayName: "A", email: null, isPrimary: false },
-      { bannerId: "2", displayName: "B", email: null, isPrimary: true },
+      {
+        bannerId: "1",
+        displayName: "A",
+        email: null,
+        isPrimary: false,
+        rmpRating: null,
+        rmpNumRatings: null,
+      },
+      {
+        bannerId: "2",
+        displayName: "B",
+        email: null,
+        isPrimary: true,
+        rmpRating: null,
+        rmpNumRatings: null,
+      },
    ];
    expect(getPrimaryInstructor(instructors)?.displayName).toBe("B");
  });
  it("returns first instructor when no primary", () => {
    const instructors: InstructorResponse[] = [
-      { bannerId: "1", displayName: "A", email: null, isPrimary: false },
+      {
+        bannerId: "1",
+        displayName: "A",
+        email: null,
+        isPrimary: false,
+        rmpRating: null,
+        rmpNumRatings: null,
+      },
    ];
    expect(getPrimaryInstructor(instructors)?.displayName).toBe("A");
  });
@@ -226,3 +322,86 @@ describe("formatMeetingDaysLong", () => {
    expect(formatMeetingDaysLong(makeMeetingTime())).toBe("");
  });
 });
+
+describe("formatDateShort", () => {
+  it("formats YYYY-MM-DD to short", () => {
+    expect(formatDateShort("2024-08-26")).toBe("Aug 26, 2024");
+  });
+  it("formats MM/DD/YYYY to short", () => {
+    expect(formatDateShort("12/12/2024")).toBe("Dec 12, 2024");
+  });
+  it("returns original for invalid", () => {
+    expect(formatDateShort("bad")).toBe("bad");
+  });
+});
+
+describe("formatMeetingDaysVerbose", () => {
+  it("returns plural for single day", () => {
+    expect(formatMeetingDaysVerbose(makeMeetingTime({ thursday: true }))).toBe("Thursdays");
+  });
+  it("joins two days with ampersand", () => {
+    expect(formatMeetingDaysVerbose(makeMeetingTime({ tuesday: true, thursday: true }))).toBe(
+      "Tuesdays & Thursdays"
+    );
+  });
+  it("uses Oxford-style ampersand for 3+ days", () => {
+    expect(
+      formatMeetingDaysVerbose(makeMeetingTime({ monday: true, wednesday: true, friday: true }))
+    ).toBe("Mondays, Wednesdays & Fridays");
+  });
+  it("returns empty string when no days", () => {
+    expect(formatMeetingDaysVerbose(makeMeetingTime())).toBe("");
+  });
+});
+
+describe("formatMeetingTimeTooltip", () => {
+  it("formats full tooltip with location and dates", () => {
+    const mt = makeMeetingTime({
+      tuesday: true,
+      thursday: true,
+      begin_time: "1615",
+      end_time: "1730",
+      building_description: "Main Hall",
+      room: "2.206",
+    });
+    expect(formatMeetingTimeTooltip(mt)).toBe(
+      "Tuesdays & Thursdays, 4:15–5:30 PM\nMain Hall 2.206, Aug 26, 2024 – Dec 12, 2024"
+    );
+  });
+  it("handles TBA days and times", () => {
+    expect(formatMeetingTimeTooltip(makeMeetingTime())).toBe("TBA\nAug 26, 2024 – Dec 12, 2024");
+  });
+  it("handles days with TBA times", () => {
+    expect(formatMeetingTimeTooltip(makeMeetingTime({ monday: true }))).toBe(
+      "Mondays, TBA\nAug 26, 2024 – Dec 12, 2024"
+    );
+  });
+});
+
+describe("formatMeetingTimesTooltip", () => {
+  it("returns TBA for empty array", () => {
+    expect(formatMeetingTimesTooltip([])).toBe("TBA");
+  });
+  it("joins multiple meetings with blank line", () => {
+    const mts = [
+      makeMeetingTime({
+        monday: true,
+        wednesday: true,
+        friday: true,
+        begin_time: "0900",
+        end_time: "0950",
+      }),
+      makeMeetingTime({
+        thursday: true,
+        begin_time: "1300",
+        end_time: "1400",
+        building_description: "Lab",
+        room: "101",
+      }),
+    ];
+    const result = formatMeetingTimesTooltip(mts);
+    expect(result).toContain("Mondays, Wednesdays & Fridays, 9:00–9:50 AM");
+    expect(result).toContain("Thursdays, 1:00–2:00 PM\nLab 101");
+    expect(result).toContain("\n\n");
+  });
+});
@@ -10,21 +10,29 @@ export function formatTime(time: string | null): string {
  return `${display}:${minutes} ${period}`;
 }

-/** Get day abbreviation string like "MWF" from a meeting time */
+/**
+ * Compact day abbreviation for table cells.
+ *
+ * Single day → 3-letter: "Mon", "Thu"
+ * Multi-day  → concatenated codes: "MWF", "TTh", "MTWTh", "TSa"
+ *
+ * Codes use single letters where unambiguous (M/T/W/F) and
+ * two letters where needed (Th/Sa/Su).
+ */
 export function formatMeetingDays(mt: DbMeetingTime): string {
-  const days: [boolean, string][] = [
-    [mt.monday, "M"],
-    [mt.tuesday, "T"],
-    [mt.wednesday, "W"],
-    [mt.thursday, "R"],
-    [mt.friday, "F"],
-    [mt.saturday, "S"],
-    [mt.sunday, "U"],
+  const dayDefs: [boolean, string, string][] = [
+    [mt.monday, "M", "Mon"],
+    [mt.tuesday, "T", "Tue"],
+    [mt.wednesday, "W", "Wed"],
+    [mt.thursday, "Th", "Thu"],
+    [mt.friday, "F", "Fri"],
+    [mt.saturday, "Sa", "Sat"],
+    [mt.sunday, "Su", "Sun"],
  ];
-  return days
-    .filter(([active]) => active)
-    .map(([, abbr]) => abbr)
-    .join("");
+  const active = dayDefs.filter(([a]) => a);
+  if (active.length === 0) return "";
+  if (active.length === 1) return active[0][2];
+  return active.map(([, code]) => code).join("");
 }

 /** Longer day names for detail view: single day → "Thursdays", multiple → "Mon, Wed, Fri" */
@@ -44,23 +52,79 @@ export function formatMeetingDaysLong(mt: DbMeetingTime): string {
  return active.map(([, short]) => short).join(", ");
 }

-/** Condensed meeting time: "MWF 9:00 AM–9:50 AM" */
+/**
+ * Format a time range with smart AM/PM elision.
+ *
+ * Same period:  "9:00–9:50 AM"
+ * Cross-period: "11:30 AM–12:20 PM"
+ * Missing:      "TBA"
+ */
+export function formatTimeRange(begin: string | null, end: string | null): string {
+  if (!begin || begin.length !== 4 || !end || end.length !== 4) return "TBA";
+
+  const bHours = parseInt(begin.slice(0, 2), 10);
+  const eHours = parseInt(end.slice(0, 2), 10);
+  const bPeriod = bHours >= 12 ? "PM" : "AM";
+  const ePeriod = eHours >= 12 ? "PM" : "AM";
+
+  const bDisplay = bHours > 12 ? bHours - 12 : bHours === 0 ? 12 : bHours;
+  const eDisplay = eHours > 12 ? eHours - 12 : eHours === 0 ? 12 : eHours;
+
+  const endStr = `${eDisplay}:${end.slice(2)} ${ePeriod}`;
+  if (bPeriod === ePeriod) {
+    return `${bDisplay}:${begin.slice(2)}–${endStr}`;
+  }
+  return `${bDisplay}:${begin.slice(2)} ${bPeriod}–${endStr}`;
+}
+
+/** Condensed meeting time: "MWF 9:00–9:50 AM" */
 export function formatMeetingTime(mt: DbMeetingTime): string {
  const days = formatMeetingDays(mt);
  if (!days) return "TBA";
-  const begin = formatTime(mt.begin_time);
-  const end = formatTime(mt.end_time);
-  if (begin === "TBA") return `${days} TBA`;
-  return `${days} ${begin}–${end}`;
+  const range = formatTimeRange(mt.begin_time, mt.end_time);
+  if (range === "TBA") return `${days} TBA`;
+  return `${days} ${range}`;
 }

-/** Abbreviate instructor name: "Heaps, John" → "Heaps, J." */
-export function abbreviateInstructor(name: string): string {
+/**
+ * Progressively abbreviate an instructor name to fit within a character budget.
+ *
+ * Tries each level until the result fits `maxLen`:
+ *   1. Full name: "Ramirez, Maria Elena"
+ *   2. Abbreviate trailing given names: "Ramirez, Maria E."
+ *   3. Abbreviate all given names: "Ramirez, M. E."
+ *   4. First initial only: "Ramirez, M."
+ *
+ * Names without a comma (e.g. "Staff") are returned as-is.
+ */
+export function abbreviateInstructor(name: string, maxLen: number = 18): string {
+  if (name.length <= maxLen) return name;
+
  const commaIdx = name.indexOf(", ");
  if (commaIdx === -1) return name;
+
  const last = name.slice(0, commaIdx);
-  const first = name.slice(commaIdx + 2);
-  return `${last}, ${first.charAt(0)}.`;
+  const parts = name.slice(commaIdx + 2).split(" ");
+
+  // Level 2: abbreviate trailing given names, keep first given name intact
+  // "Maria Elena" → "Maria E."
+  if (parts.length > 1) {
+    const abbreviated = [parts[0], ...parts.slice(1).map((p) => `${p[0]}.`)].join(" ");
+    const result = `${last}, ${abbreviated}`;
+    if (result.length <= maxLen) return result;
+  }
+
+  // Level 3: abbreviate all given names
+  // "Maria Elena" → "M. E."
+  if (parts.length > 1) {
+    const allInitials = parts.map((p) => `${p[0]}.`).join(" ");
+    const result = `${last}, ${allInitials}`;
+    if (result.length <= maxLen) return result;
+  }
+
+  // Level 4: first initial only
+  // "Maria Elena" → "M."  or  "John" → "J."
+  return `${last}, ${parts[0][0]}.`;
 }

 /** Get primary instructor from a course, or first instructor */
@@ -119,6 +183,192 @@ export function formatLocationLong(mt: DbMeetingTime): string | null {
  return mt.room ? `${name} ${mt.room}` : name;
 }

+/** Format a date as "Aug 26, 2024". Accepts YYYY-MM-DD or MM/DD/YYYY. */
+export function formatDateShort(dateStr: string): string {
+  let year: number, month: number, day: number;
+  if (dateStr.includes("-")) {
+    [year, month, day] = dateStr.split("-").map(Number);
+  } else if (dateStr.includes("/")) {
+    [month, day, year] = dateStr.split("/").map(Number);
+  } else {
+    return dateStr;
+  }
+  if (!year || !month || !day) return dateStr;
+  const date = new Date(year, month - 1, day);
+  return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+/**
+ * Verbose day names for tooltips: "Tuesdays & Thursdays", "Mondays, Wednesdays & Fridays".
+ * Single day → plural: "Thursdays".
+ */
+export function formatMeetingDaysVerbose(mt: DbMeetingTime): string {
+  const dayDefs: [boolean, string][] = [
+    [mt.monday, "Mondays"],
+    [mt.tuesday, "Tuesdays"],
+    [mt.wednesday, "Wednesdays"],
+    [mt.thursday, "Thursdays"],
+    [mt.friday, "Fridays"],
+    [mt.saturday, "Saturdays"],
+    [mt.sunday, "Sundays"],
+  ];
+  const active = dayDefs.filter(([a]) => a).map(([, name]) => name);
+  if (active.length === 0) return "";
+  if (active.length === 1) return active[0];
+  return active.slice(0, -1).join(", ") + " & " + active[active.length - 1];
+}
+
+/**
+ * Full verbose tooltip for a single meeting time:
+ * "Tuesdays & Thursdays, 4:15–5:30 PM\nMain Hall 2.206 · Aug 26 – Dec 12, 2024"
+ */
+export function formatMeetingTimeTooltip(mt: DbMeetingTime): string {
+  const days = formatMeetingDaysVerbose(mt);
+  const range = formatTimeRange(mt.begin_time, mt.end_time);
+  let line1: string;
+  if (!days && range === "TBA") {
+    line1 = "TBA";
+  } else if (!days) {
+    line1 = range;
+  } else if (range === "TBA") {
+    line1 = `${days}, TBA`;
+  } else {
+    line1 = `${days}, ${range}`;
+  }
+
+  const parts = [line1];
+
+  const loc = formatLocationLong(mt);
+  const dateRange =
+    mt.start_date && mt.end_date
+      ? `${formatDateShort(mt.start_date)} – ${formatDateShort(mt.end_date)}`
+      : null;
+
+  if (loc && dateRange) {
+    parts.push(`${loc}, ${dateRange}`);
+  } else if (loc) {
+    parts.push(loc);
+  } else if (dateRange) {
+    parts.push(dateRange);
+  }
+
+  return parts.join("\n");
+}
+
+/** Full verbose tooltip for all meeting times on a course, newline-separated. */
+export function formatMeetingTimesTooltip(meetingTimes: DbMeetingTime[]): string {
+  if (meetingTimes.length === 0) return "TBA";
+  return meetingTimes.map(formatMeetingTimeTooltip).join("\n\n");
+}
+
+/**
+ * Delivery concern category for visual accent on location cells.
+ * - "online": fully online with no physical location (OA, OS, OH without INT building)
+ * - "internet": internet campus with INT building code
+ * - "hybrid": mix of online and in-person (HB, H1, H2)
+ * - "off-campus": in-person but not on Main Campus
+ * - null: normal in-person on main campus (no accent)
+ */
+export type DeliveryConcern = "online" | "internet" | "hybrid" | "off-campus" | null;
+
+const ONLINE_METHODS = new Set(["OA", "OS", "OH"]);
+const HYBRID_METHODS = new Set(["HB", "H1", "H2"]);
+const MAIN_CAMPUS = "11";
+const ONLINE_CAMPUSES = new Set(["9", "ONL"]);
+
+export function getDeliveryConcern(course: CourseResponse): DeliveryConcern {
+  const method = course.instructionalMethod;
+  if (method && ONLINE_METHODS.has(method)) {
+    const hasIntBuilding = course.meetingTimes.some((mt: DbMeetingTime) => mt.building === "INT");
+    return hasIntBuilding ? "internet" : "online";
+  }
+  if (method && HYBRID_METHODS.has(method)) return "hybrid";
+  if (course.campus && course.campus !== MAIN_CAMPUS && !ONLINE_CAMPUSES.has(course.campus)) {
+    return "off-campus";
+  }
+  return null;
+}
+
+/** Border accent color for each delivery concern type. */
+export function concernAccentColor(concern: DeliveryConcern): string | null {
+  switch (concern) {
+    case "online":
+      return "#3b82f6"; // blue-500
+    case "internet":
+      return "#06b6d4"; // cyan-500
+    case "hybrid":
+      return "#a855f7"; // purple-500
+    case "off-campus":
+      return "#f59e0b"; // amber-500
+    default:
+      return null;
+  }
+}
+
+/**
+ * Location display text for the table cell.
+ * Falls back to "Online" for online courses instead of showing a dash.
+ */
+export function formatLocationDisplay(course: CourseResponse): string | null {
+  const loc = formatLocation(course);
+  if (loc) return loc;
+  const concern = getDeliveryConcern(course);
+  if (concern === "online") return "Online";
+  return null;
+}
+
+/** Tooltip text for the location column: long-form location + delivery note */
+export function formatLocationTooltip(course: CourseResponse): string | null {
+  const parts: string[] = [];
+
+  for (const mt of course.meetingTimes) {
+    const loc = formatLocationLong(mt);
+    if (loc && !parts.includes(loc)) parts.push(loc);
+  }
+
+  const locationLine = parts.length > 0 ? parts.join(", ") : null;
+
+  const concern = getDeliveryConcern(course);
+  let deliveryNote: string | null = null;
+  if (concern === "online") deliveryNote = "Online";
+  else if (concern === "internet") deliveryNote = "Internet";
+  else if (concern === "hybrid") deliveryNote = "Hybrid";
+  else if (concern === "off-campus") deliveryNote = "Off-campus";
+
+  if (locationLine && deliveryNote) return `${locationLine}\n${deliveryNote}`;
+  if (locationLine) return locationLine;
+  if (deliveryNote) return deliveryNote;
+  return null;
+}
+
+/** Number of open seats in a course section */
+export function openSeats(course: CourseResponse): number {
+  return Math.max(0, course.maxEnrollment - course.enrollment);
+}
+
+/** Text color class for seat availability: red (full), yellow (low), green (open) */
+export function seatsColor(course: CourseResponse): string {
+  const open = openSeats(course);
+  if (open === 0) return "text-status-red";
+  if (open <= 5) return "text-yellow-500";
+  return "text-status-green";
+}
+
+/** Background dot color class for seat availability */
+export function seatsDotColor(course: CourseResponse): string {
+  const open = openSeats(course);
+  if (open === 0) return "bg-red-500";
+  if (open <= 5) return "bg-yellow-500";
+  return "bg-green-500";
+}
+
+/** Text color class for a RateMyProfessors rating */
+export function ratingColor(rating: number): string {
+  if (rating >= 4.0) return "text-status-green";
+  if (rating >= 3.0) return "text-yellow-500";
+  return "text-status-red";
+}
+
 /** Format credit hours display */
 export function formatCreditHours(course: CourseResponse): string {
  if (course.creditHours != null) return String(course.creditHours);
@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }
+
+/** Shared tooltip content styling for bits-ui Tooltip.Content */
+export const tooltipContentClass =
+  "z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72";
@@ -2,27 +2,26 @@
 import "overlayscrollbars/overlayscrollbars.css";
 import "./layout.css";
 import { onMount } from "svelte";
-import { OverlayScrollbars } from "overlayscrollbars";
 import { Tooltip } from "bits-ui";
 import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 import { themeStore } from "$lib/stores/theme.svelte";
+import { useOverlayScrollbars } from "$lib/composables/useOverlayScrollbars.svelte";

 let { children } = $props();

+useOverlayScrollbars(() => document.body, {
+  scrollbars: {
+    autoHide: "leave",
+    autoHideDelay: 800,
+  },
+});
+
 onMount(() => {
  themeStore.init();

-  const osInstance = OverlayScrollbars(document.body, {
-    scrollbars: {
-      autoHide: "leave",
-      autoHideDelay: 800,
-      theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
-    },
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("no-transition");
  });
-
-  return () => {
-    osInstance?.destroy();
-  };
 });
 </script>

@@ -10,8 +10,10 @@ import {
 } from "$lib/api";
 import type { SortingState } from "@tanstack/table-core";
 import SearchFilters from "$lib/components/SearchFilters.svelte";
+import SearchStatus, { type SearchMeta } from "$lib/components/SearchStatus.svelte";
 import CourseTable from "$lib/components/CourseTable.svelte";
 import Pagination from "$lib/components/Pagination.svelte";
+import Footer from "$lib/components/Footer.svelte";

 let { data } = $props();

@@ -20,7 +22,7 @@ const initialParams = untrack(() => new URLSearchParams(data.url.search));

 // Filter state
 let selectedTerm = $state(untrack(() => initialParams.get("term") ?? data.terms[0]?.code ?? ""));
-let selectedSubject = $state(initialParams.get("subject") ?? "");
+let selectedSubjects: string[] = $state(untrack(() => initialParams.getAll("subject")));
 let query = $state(initialParams.get("q") ?? "");
 let openOnly = $state(initialParams.get("open") === "true");
 let offset = $state(Number(initialParams.get("offset")) || 0);
@@ -51,7 +53,11 @@ function handleSortingChange(newSorting: SortingState) {

 // Data state
 let subjects: Subject[] = $state([]);
+let subjectMap: Record<string, string> = $derived(
+  Object.fromEntries(subjects.map((s) => [s.code, s.description]))
+);
 let searchResult: SearchResponse | null = $state(null);
+let searchMeta: SearchMeta | null = $state(null);
 let loading = $state(false);
 let error = $state<string | null>(null);

@@ -59,36 +65,78 @@ let error = $state<string | null>(null);
 $effect(() => {
  const term = selectedTerm;
  if (!term) return;
-  client.getSubjects(term).then((s) => {
-    subjects = s;
-    if (selectedSubject && !s.some((sub) => sub.code === selectedSubject)) {
-      selectedSubject = "";
-    }
-  });
+  client
+    .getSubjects(term)
+    .then((s) => {
+      subjects = s;
+      const validCodes = new Set(s.map((sub) => sub.code));
+      selectedSubjects = selectedSubjects.filter((code) => validCodes.has(code));
+    })
+    .catch((e) => {
+      console.error("Failed to fetch subjects:", e);
+    });
 });

-// Debounced search
-let searchTimeout: ReturnType<typeof setTimeout> | undefined;
-$effect(() => {
-  const term = selectedTerm;
-  const subject = selectedSubject;
-  const q = query;
-  const open = openOnly;
-  const off = offset;
-  const sort = sorting;
+// Centralized throttle configuration - maps trigger source to throttle delay (ms)
+const THROTTLE_MS = {
+  term: 0, // Immediate
+  subjects: 100, // Short delay for combobox selection
+  query: 300, // Standard input debounce
+  openOnly: 0, // Immediate
+  offset: 0, // Immediate (pagination)
+  sorting: 0, // Immediate (column sort)
+} as const;

+let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+
+function scheduleSearch(source: keyof typeof THROTTLE_MS) {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
-    performSearch(term, subject, q, open, off, sort);
-  }, 300);
+    performSearch(selectedTerm, selectedSubjects, query, openOnly, offset, sorting);
+  }, THROTTLE_MS[source]);
+}

+// Separate effects for each trigger source with appropriate throttling
+$effect(() => {
+  selectedTerm;
+  scheduleSearch("term");
+  return () => clearTimeout(searchTimeout);
+});
+
+$effect(() => {
+  selectedSubjects;
+  scheduleSearch("subjects");
+  return () => clearTimeout(searchTimeout);
+});
+
+$effect(() => {
+  query;
+  scheduleSearch("query");
+  return () => clearTimeout(searchTimeout);
+});
+
+$effect(() => {
+  openOnly;
+  scheduleSearch("openOnly");
+  return () => clearTimeout(searchTimeout);
+});
+
+$effect(() => {
+  offset;
+  scheduleSearch("offset");
+  return () => clearTimeout(searchTimeout);
+});
+
+$effect(() => {
+  sorting;
+  scheduleSearch("sorting");
  return () => clearTimeout(searchTimeout);
 });

 // Reset offset when filters change (not offset itself)
 let prevFilters = $state("");
 $effect(() => {
-  const key = `${selectedTerm}|${selectedSubject}|${query}|${openOnly}`;
+  const key = `${selectedTerm}|${selectedSubjects.join(",")}|${query}|${openOnly}`;
  if (prevFilters && key !== prevFilters) {
    offset = 0;
  }
@@ -97,7 +145,7 @@ $effect(() => {

 async function performSearch(
  term: string,
-  subject: string,
+  subjects: string[],
  q: string,
  open: boolean,
  off: number,
@@ -107,15 +155,15 @@ async function performSearch(
  loading = true;
  error = null;

-  // Derive server sort params from TanStack sorting state
  const sortBy = sort.length > 0 ? SORT_COLUMN_MAP[sort[0].id] : undefined;
  const sortDir: SortDirection | undefined =
    sort.length > 0 ? (sort[0].desc ? "desc" : "asc") : undefined;

-  // Sync URL
  const params = new URLSearchParams();
  params.set("term", term);
-  if (subject) params.set("subject", subject);
+  for (const s of subjects) {
+    params.append("subject", s);
+  }
  if (q) params.set("q", q);
  if (open) params.set("open", "true");
  if (off > 0) params.set("offset", String(off));
@@ -123,10 +171,11 @@ async function performSearch(
  if (sortDir && sortBy) params.set("sort_dir", sortDir);
  goto(`?${params.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });

+  const t0 = performance.now();
  try {
    searchResult = await client.searchCourses({
      term,
-      subject: subject || undefined,
+      subjects: subjects.length > 0 ? subjects : undefined,
      q: q || undefined,
      open_only: open || undefined,
      limit,
@@ -134,6 +183,11 @@ async function performSearch(
      sort_by: sortBy,
      sort_dir: sortDir,
    });
+    searchMeta = {
+      totalCount: searchResult.totalCount,
+      durationMs: performance.now() - t0,
+      timestamp: new Date(),
+    };
  } catch (e) {
    error = e instanceof Error ? e.message : "Search failed";
  } finally {
@@ -147,28 +201,32 @@ function handlePageChange(newOffset: number) {
 </script>

 <div class="min-h-screen flex flex-col items-center p-5">
-  <div class="w-full max-w-4xl flex flex-col gap-6">
+  <div class="w-full max-w-6xl flex flex-col gap-6">
    <!-- Title -->
    <div class="text-center pt-8 pb-2">
      <h1 class="text-2xl font-semibold text-foreground">UTSA Course Search</h1>
    </div>

-    <!-- Filters -->
+    <!-- Search status + Filters -->
+    <div class="flex flex-col gap-1.5">
+      <SearchStatus meta={searchMeta} />
+      <!-- Filters -->
    <SearchFilters
      terms={data.terms}
      {subjects}
      bind:selectedTerm
-      bind:selectedSubject
+      bind:selectedSubjects
      bind:query
      bind:openOnly
    />
+    </div>

    <!-- Results -->
    {#if error}
      <div class="text-center py-8">
        <p class="text-status-red">{error}</p>
        <button
-          onclick={() => performSearch(selectedTerm, selectedSubject, query, openOnly, offset, sorting)}
+          onclick={() => performSearch(selectedTerm, selectedSubjects, query, openOnly, offset, sorting)}
          class="mt-2 text-sm text-muted-foreground hover:underline"
        >
          Retry
@@ -181,6 +239,7 @@ function handlePageChange(newOffset: number) {
        {sorting}
        onSortingChange={handleSortingChange}
        manualSorting={true}
+        {subjectMap}
      />

      {#if searchResult}
@@ -194,23 +253,6 @@ function handlePageChange(newOffset: number) {
    {/if}

    <!-- Footer -->
-    <div class="flex justify-center items-center gap-2 mt-auto pt-6 pb-4">
-      {#if __APP_VERSION__}
-        <span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
-        <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-      {/if}
-      <a
-        href="https://github.com/Xevion/banner"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-xs text-muted-foreground no-underline hover:underline"
-      >
-        GitHub
-      </a>
-      <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-      <a href="/health" class="text-xs text-muted-foreground no-underline hover:underline">
-        Status
-      </a>
-    </div>
+    <Footer />
  </div>
 </div>
@@ -3,6 +3,11 @@ import { BannerApiClient } from "$lib/api";

 export const load: PageLoad = async ({ url, fetch }) => {
  const client = new BannerApiClient(undefined, fetch);
-  const terms = await client.getTerms();
-  return { terms, url };
+  try {
+    const terms = await client.getTerms();
+    return { terms, url };
+  } catch (e) {
+    console.error("Failed to load terms:", e);
+    return { terms: [], url };
+  }
 };
@@ -0,0 +1,74 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { goto } from "$app/navigation";
+import { authStore } from "$lib/auth.svelte";
+import { LayoutDashboard, Users, ClipboardList, FileText, LogOut } from "@lucide/svelte";
+
+let { children } = $props();
+
+onMount(async () => {
+  if (authStore.isLoading) {
+    await authStore.init();
+  }
+});
+
+$effect(() => {
+  if (authStore.state.mode === "unauthenticated") {
+    goto("/login");
+  }
+});
+
+const navItems = [
+  { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/admin/scrape-jobs", label: "Scrape Jobs", icon: ClipboardList },
+  { href: "/admin/audit-log", label: "Audit Log", icon: FileText },
+  { href: "/admin/users", label: "Users", icon: Users },
+];
+</script>
+
+{#if authStore.isLoading}
+  <div class="flex min-h-screen items-center justify-center">
+    <p class="text-muted-foreground">Loading...</p>
+  </div>
+{:else if !authStore.isAdmin}
+  <div class="flex min-h-screen items-center justify-center">
+    <div class="text-center">
+      <h1 class="text-2xl font-bold">Access Denied</h1>
+      <p class="text-muted-foreground mt-2">You do not have admin access.</p>
+    </div>
+  </div>
+{:else}
+  <div class="flex min-h-screen">
+    <aside class="border-border bg-card flex w-64 flex-col border-r">
+      <div class="border-border border-b p-4">
+        <h2 class="text-lg font-semibold">Admin</h2>
+        {#if authStore.user}
+          <p class="text-muted-foreground text-sm">{authStore.user.discordUsername}</p>
+        {/if}
+      </div>
+      <nav class="flex-1 space-y-1 p-2">
+        {#each navItems as item}
+          <a
+            href={item.href}
+            class="hover:bg-accent flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+          >
+            <item.icon size={18} />
+            {item.label}
+          </a>
+        {/each}
+      </nav>
+      <div class="border-border border-t p-2">
+        <button
+          onclick={() => authStore.logout()}
+          class="hover:bg-destructive/10 text-destructive flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+        >
+          <LogOut size={18} />
+          Sign Out
+        </button>
+      </div>
+    </aside>
+    <main class="flex-1 overflow-auto p-6">
+      {@render children()}
+    </main>
+  </div>
+{/if}
@@ -0,0 +1,54 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { client, type AdminStatus } from "$lib/api";
+
+let status = $state<AdminStatus | null>(null);
+let error = $state<string | null>(null);
+
+onMount(async () => {
+  try {
+    status = await client.getAdminStatus();
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to load status";
+  }
+});
+</script>
+
+<h1 class="mb-6 text-2xl font-bold">Dashboard</h1>
+
+{#if error}
+  <p class="text-destructive">{error}</p>
+{:else if !status}
+  <p class="text-muted-foreground">Loading...</p>
+{:else}
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div class="bg-card border-border rounded-lg border p-4">
+      <p class="text-muted-foreground text-sm">Users</p>
+      <p class="text-3xl font-bold">{status.userCount}</p>
+    </div>
+    <div class="bg-card border-border rounded-lg border p-4">
+      <p class="text-muted-foreground text-sm">Active Sessions</p>
+      <p class="text-3xl font-bold">{status.sessionCount}</p>
+    </div>
+    <div class="bg-card border-border rounded-lg border p-4">
+      <p class="text-muted-foreground text-sm">Courses</p>
+      <p class="text-3xl font-bold">{status.courseCount}</p>
+    </div>
+    <div class="bg-card border-border rounded-lg border p-4">
+      <p class="text-muted-foreground text-sm">Scrape Jobs</p>
+      <p class="text-3xl font-bold">{status.scrapeJobCount}</p>
+    </div>
+  </div>
+
+  <h2 class="mt-8 mb-4 text-lg font-semibold">Services</h2>
+  <div class="bg-card border-border rounded-lg border">
+    {#each status.services as service}
+      <div class="border-border flex items-center justify-between border-b px-4 py-3 last:border-b-0">
+        <span class="font-medium">{service.name}</span>
+        <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
+          {service.status}
+        </span>
+      </div>
+    {/each}
+  </div>
+{/if}
@@ -0,0 +1,50 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { client, type AuditLogResponse } from "$lib/api";
+
+let data = $state<AuditLogResponse | null>(null);
+let error = $state<string | null>(null);
+
+onMount(async () => {
+  try {
+    data = await client.getAdminAuditLog();
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to load audit log";
+  }
+});
+</script>
+
+<h1 class="mb-6 text-2xl font-bold">Audit Log</h1>
+
+{#if error}
+  <p class="text-destructive">{error}</p>
+{:else if !data}
+  <p class="text-muted-foreground">Loading...</p>
+{:else if data.entries.length === 0}
+  <p class="text-muted-foreground">No audit log entries found.</p>
+{:else}
+  <div class="bg-card border-border overflow-hidden rounded-lg border">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-border border-b">
+          <th class="px-4 py-3 text-left font-medium">Time</th>
+          <th class="px-4 py-3 text-left font-medium">Course ID</th>
+          <th class="px-4 py-3 text-left font-medium">Field</th>
+          <th class="px-4 py-3 text-left font-medium">Old Value</th>
+          <th class="px-4 py-3 text-left font-medium">New Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each data.entries as entry}
+          <tr class="border-border border-b last:border-b-0">
+            <td class="px-4 py-3">{new Date(entry.timestamp).toLocaleString()}</td>
+            <td class="px-4 py-3">{entry.courseId}</td>
+            <td class="px-4 py-3 font-mono text-xs">{entry.fieldChanged}</td>
+            <td class="px-4 py-3">{entry.oldValue}</td>
+            <td class="px-4 py-3">{entry.newValue}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
@@ -0,0 +1,52 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { client, type ScrapeJobsResponse } from "$lib/api";
+
+let data = $state<ScrapeJobsResponse | null>(null);
+let error = $state<string | null>(null);
+
+onMount(async () => {
+  try {
+    data = await client.getAdminScrapeJobs();
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to load scrape jobs";
+  }
+});
+</script>
+
+<h1 class="mb-6 text-2xl font-bold">Scrape Jobs</h1>
+
+{#if error}
+  <p class="text-destructive">{error}</p>
+{:else if !data}
+  <p class="text-muted-foreground">Loading...</p>
+{:else if data.jobs.length === 0}
+  <p class="text-muted-foreground">No scrape jobs found.</p>
+{:else}
+  <div class="bg-card border-border overflow-hidden rounded-lg border">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-border border-b">
+          <th class="px-4 py-3 text-left font-medium">ID</th>
+          <th class="px-4 py-3 text-left font-medium">Type</th>
+          <th class="px-4 py-3 text-left font-medium">Priority</th>
+          <th class="px-4 py-3 text-left font-medium">Execute At</th>
+          <th class="px-4 py-3 text-left font-medium">Retries</th>
+          <th class="px-4 py-3 text-left font-medium">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each data.jobs as job}
+          <tr class="border-border border-b last:border-b-0">
+            <td class="px-4 py-3">{job.id}</td>
+            <td class="px-4 py-3">{job.targetType}</td>
+            <td class="px-4 py-3">{job.priority}</td>
+            <td class="px-4 py-3">{new Date(job.executeAt).toLocaleString()}</td>
+            <td class="px-4 py-3">{job.retryCount}/{job.maxRetries}</td>
+            <td class="px-4 py-3">{job.lockedAt ? "Locked" : "Pending"}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
@@ -0,0 +1,92 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { client } from "$lib/api";
+import type { User } from "$lib/bindings";
+import { Shield, ShieldOff } from "@lucide/svelte";
+
+let users = $state<User[]>([]);
+let error = $state<string | null>(null);
+let updating = $state<bigint | null>(null);
+
+onMount(async () => {
+  try {
+    users = await client.getAdminUsers();
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to load users";
+  }
+});
+
+async function toggleAdmin(user: User) {
+  updating = user.discordId;
+  try {
+    const updated = await client.setUserAdmin(user.discordId, !user.isAdmin);
+    users = users.map((u) => (u.discordId === updated.discordId ? updated : u));
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to update user";
+  } finally {
+    updating = null;
+  }
+}
+</script>
+
+<h1 class="mb-6 text-2xl font-bold">Users</h1>
+
+{#if error}
+  <p class="text-destructive mb-4">{error}</p>
+{/if}
+
+{#if users.length === 0 && !error}
+  <p class="text-muted-foreground">Loading...</p>
+{:else}
+  <div class="bg-card border-border overflow-hidden rounded-lg border">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-border border-b">
+          <th class="px-4 py-3 text-left font-medium">Username</th>
+          <th class="px-4 py-3 text-left font-medium">Discord ID</th>
+          <th class="px-4 py-3 text-left font-medium">Admin</th>
+          <th class="px-4 py-3 text-left font-medium">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each users as user}
+          <tr class="border-border border-b last:border-b-0">
+            <td class="flex items-center gap-2 px-4 py-3">
+              {#if user.discordAvatarHash}
+                <img
+                  src="https://cdn.discordapp.com/avatars/{user.discordId}/{user.discordAvatarHash}.png?size=32"
+                  alt=""
+                  class="h-6 w-6 rounded-full"
+                />
+              {/if}
+              {user.discordUsername}
+            </td>
+            <td class="text-muted-foreground px-4 py-3 font-mono text-xs">{user.discordId}</td>
+            <td class="px-4 py-3">
+              {#if user.isAdmin}
+                <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">Admin</span>
+              {:else}
+                <span class="text-muted-foreground text-xs">User</span>
+              {/if}
+            </td>
+            <td class="px-4 py-3">
+              <button
+                onclick={() => toggleAdmin(user)}
+                disabled={updating === user.discordId}
+                class="hover:bg-accent inline-flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors disabled:opacity-50"
+              >
+                {#if user.isAdmin}
+                  <ShieldOff size={14} />
+                  Remove Admin
+                {:else}
+                  <Shield size={14} />
+                  Make Admin
+                {/if}
+              </button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
@@ -12,7 +12,8 @@ import {
  WifiOff,
  XCircle,
 } from "@lucide/svelte";
-import { Tooltip } from "bits-ui";
+import SimpleTooltip from "$lib/components/SimpleTooltip.svelte";
+import Footer from "$lib/components/Footer.svelte";
 import { type ServiceStatus, type ServiceInfo, type StatusResponse, client } from "$lib/api";
 import { relativeTime } from "$lib/time";

@@ -61,7 +62,6 @@ let statusState = $state({ mode: "loading" } as StatusState);
 let now = $state(new Date());

 const isLoading = $derived(statusState.mode === "loading");
-const hasResponse = $derived(statusState.mode === "response");
 const shouldShowSkeleton = $derived(statusState.mode === "loading" || statusState.mode === "error");

 const overallHealth: ServiceStatus | "Unreachable" = $derived(
@@ -290,20 +290,13 @@ onMount(() => {
              <Clock size={13} />
              <span class="text-sm text-muted-foreground">Last Updated</span>
            </div>
-            <Tooltip.Root>
-              <Tooltip.Trigger>
-                <abbr
-                  class="cursor-pointer underline decoration-dotted decoration-border underline-offset-[6px]"
-                >
-                  <span class="text-sm text-muted-foreground">{relativeLastFetch}</span>
-                </abbr>
-              </Tooltip.Trigger>
-              <Tooltip.Content
-                class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md"
+            <SimpleTooltip text="as of {lastFetch.toLocaleTimeString()}" delay={150} passthrough>
+              <abbr
+                class="cursor-pointer underline decoration-dotted decoration-border underline-offset-[6px]"
              >
-                as of {lastFetch.toLocaleTimeString()}
-              </Tooltip.Content>
-            </Tooltip.Root>
+                <span class="text-sm text-muted-foreground">{relativeLastFetch}</span>
+              </abbr>
+            </SimpleTooltip>
          </div>
        {/if}
      </div>
@@ -311,20 +304,9 @@ onMount(() => {
  </div>

  <!-- Footer -->
-  <div class="flex justify-center items-center gap-2 mt-3">
-    {#if __APP_VERSION__}
-      <span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
-      <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-    {/if}
-    <a
-      href={hasResponse && statusState.mode === "response" && statusState.status.commit
-        ? `https://github.com/Xevion/banner/commit/${statusState.status.commit}`
-        : "https://github.com/Xevion/banner"}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-xs text-muted-foreground no-underline hover:underline"
-    >
-      GitHub
-    </a>
-  </div>
+  <Footer
+    commitHash={statusState.mode === "response" ? statusState.status.commit : undefined}
+    showStatusLink={false}
+    class="mt-3 pt-0 pb-0"
+  />
 </div>
@@ -12,6 +12,8 @@
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
+  --accent: oklch(0.96 0 0);
+  --accent-foreground: oklch(0.145 0 0);

  --status-green: oklch(0.65 0.2 145);
  --status-red: oklch(0.63 0.2 25);
@@ -28,6 +30,8 @@
  --muted-foreground: oklch(0.708 0 0);
  --border: oklch(0.269 0 0);
  --ring: oklch(0.556 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);

  --status-green: oklch(0.72 0.19 145);
  --status-red: oklch(0.7 0.19 25);
@@ -44,6 +48,8 @@
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
  --color-status-green: var(--status-green);
  --color-status-red: var(--status-red);
  --color-status-orange: var(--status-orange);
@@ -64,8 +70,67 @@ body {
  margin: 0;
 }

-body,
-body * {
+/* Focus styling - only visible on keyboard navigation */
+*:focus {
+  outline: none;
+}
+
+/* Form inputs get outline-based focus directly on border */
+input[type="text"]:focus-visible,
+input[type="search"]:focus-visible,
+input[type="email"]:focus-visible,
+input[type="password"]:focus-visible,
+input[type="number"]:focus-visible,
+input[type="url"]:focus-visible,
+input[type="tel"]:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 0;
+}
+
+/* Buttons get rounded box-shadow focus (outline doesn't support border-radius) */
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+}
+
+/* Checkboxes get direct outline focus */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* Checkbox styling - theme-aware appearance */
+input[type="checkbox"] {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1.5px solid var(--border);
+  border-radius: 0.25rem;
+  background-color: var(--card);
+  cursor: pointer;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--foreground);
+  border-color: var(--foreground);
+}
+
+input[type="checkbox"]:checked::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--background);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+html:not(.no-transition) body,
+html:not(.no-transition) body * {
  transition: background-color 300ms, color 300ms, border-color 300ms, fill 300ms;
 }

@@ -105,6 +170,42 @@ body::-webkit-scrollbar {
  display: none;
 }

+/* Native scrollbars — theme-aware styling for inner scrollable elements */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+}
+
+.dark * {
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
@keyframes pulse {
  0%,
  100% {
@@ -0,0 +1,18 @@
+<script lang="ts">
+import { authStore } from "$lib/auth.svelte";
+import { LogIn } from "@lucide/svelte";
+</script>
+
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-sm space-y-6 text-center">
+    <h1 class="text-3xl font-bold">Sign In</h1>
+    <p class="text-muted-foreground">Sign in with your Discord account to continue.</p>
+    <button
+      onclick={() => authStore.login()}
+      class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#5865F2] px-6 py-3 text-lg font-semibold text-white transition-colors hover:bg-[#4752C4]"
+    >
+      <LogIn size={20} />
+      Sign in with Discord
+    </button>
+  </div>
+</div>
Author	SHA1	Message	Date
Xevion	4deeef2f00	feat: optimize asset delivery with build-time compression and encoding negotiation	2026-01-29 13:56:10 -06:00
Xevion	e008ee5a12	feat: show search duration and result count feedback	2026-01-29 13:15:25 -06:00
Xevion	a007ccb6a2	fix: remove out:fade transition from CourseTable	2026-01-29 13:08:45 -06:00
Xevion	527cbebc6a	feat: implement user authentication system with admin dashboard	2026-01-29 12:56:51 -06:00
Xevion	4207783cdd	docs: add changelog entries and roadmap completion tracking	2026-01-29 12:27:46 -06:00
Xevion	c90bd740de	refactor: consolidate query logic and eliminate N+1 instructor loads	2026-01-29 12:03:06 -06:00
Xevion	61f8bd9de7	refactor: consolidate menu snippets and strengthen type safety Replaces duplicated dropdown/context menu code with parameterized snippet, eliminates unsafe type casts, adds error handling for clipboard and API calls, and improves accessibility annotations.	2026-01-29 11:40:55 -06:00
Xevion	b5eaedc9bc	feat: add delivery mode indicators and tooltips to location column	2026-01-29 11:32:35 -06:00
Xevion	58475c8673	feat: add page selector dropdown with animated pagination controls Replace Previous/Next buttons with 5-slot page navigation centered in pagination bar. Current page becomes a dropdown trigger allowing direct page jumps. Side slots animate on page transitions.	2026-01-29 11:31:55 -06:00
Xevion	78159707e2	feat: table FLIP animations, improved time tooltip details & day abbreviations	2026-01-29 03:40:40 -06:00
Xevion	779144a4d5	feat: implement smart name abbreviation for instructor display	2026-01-29 03:14:55 -06:00
Xevion	0da2e810fe	feat: add multi-select subject filtering with searchable comboboxes	2026-01-29 03:03:21 -06:00
Xevion	ed72ac6bff	refactor: extract reusable SimpleTooltip component and enhance UI hints	2026-01-29 01:37:04 -06:00
Xevion	57b5cafb27	feat: enhance table scrolling and eliminate initial theme flash	2026-01-29 01:18:02 -06:00