feat: integrate OverlayScrollbars with theme-aware styling

Replaces static course table with TanStack Table featuring sortable
columns, column visibility management, and server-side sort handling.
Adds reusable data-table primitives adapted for Svelte 5 runes.

.cargo/config.toml

@@ -0,0 +1,2 @@
+[env]
+TS_RS_EXPORT_DIR = { value = "web/src/lib/bindings/", relative = true }

.gitignore

@@ -1,5 +1,6 @@
 .env
 /target
-/go/
-.cargo/config.toml
-src/scraper/README.md
+
+# ts-rs bindings
+web/src/lib/bindings/*.ts
+!web/src/lib/bindings/index.ts

Cargo.lock

@@ -235,6 +235,7 @@ dependencies = [
  "fundu",
  "futures",
  "governor",
+ "html-escape",
  "http 1.3.1",
  "mime_guess",
  "num-format",
@@ -257,6 +258,7 @@ dependencies = [
  "tower-http",
  "tracing",
  "tracing-subscriber",
+ "ts-rs",
  "url",
  "yansi",
 ]
@@ -1227,6 +1229,15 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
+[[package]]
+name = "html-escape"
+version = "0.2.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d1ad449764d627e22bfd7cd5e8868264fc9236e07c752972b4080cd351cb476"
+dependencies = [
+ "utf8-width",
+]
+
 [[package]]
 name = "http"
 version = "0.2.12"
@@ -3256,6 +3267,15 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "termcolor"
+version = "1.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "06794f8f6c5c898b3275aebefa6b8a1cb24cd2c6c79397ab15774837a0bc5755"
+dependencies = [
+ "winapi-util",
+]
+
 [[package]]
 name = "thiserror"
 version = "1.0.69"
@@ -3648,6 +3668,29 @@ version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
+[[package]]
+name = "ts-rs"
+version = "11.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4994acea2522cd2b3b85c1d9529a55991e3ad5e25cdcd3de9d505972c4379424"
+dependencies = [
+ "serde_json",
+ "thiserror 2.0.16",
+ "ts-rs-macros",
+]
+
+[[package]]
+name = "ts-rs-macros"
+version = "11.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee6ff59666c9cbaec3533964505d39154dc4e0a56151fdea30a09ed0301f62e2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+ "termcolor",
+]
+
 [[package]]
 name = "tungstenite"
 version = "0.21.0"
@@ -3776,6 +3819,12 @@ version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"
 
+[[package]]
+name = "utf8-width"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1292c0d970b54115d14f2492fe0170adf21d68a1de108eebc51c1df4f346a091"
+
 [[package]]
 name = "utf8_iter"
 version = "1.0.4"

Cargo.toml

@@ -55,6 +55,8 @@ 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"] }
+html-escape = "0.2.13"
 
 [dev-dependencies]
 

Justfile

@@ -8,27 +8,30 @@ default:
 check:
     cargo fmt --all -- --check
     cargo clippy --all-features -- --deny warnings
-    cargo nextest run
-    bun run --cwd web typecheck
-    bun run --cwd web lint
-    bun run --cwd web test --run
+    cargo nextest run -E 'not test(export_bindings)'
+    bun run --cwd web check
+    bun run --cwd web test
+
+# Generate TypeScript bindings from Rust types (ts-rs)
+bindings:
+    cargo test export_bindings
 
 # Run all tests (Rust + frontend)
 test: test-rust test-web
 
-# Run only Rust tests
+# Run only Rust tests (excludes ts-rs bindings generation)
 test-rust *ARGS:
-    cargo nextest run {{ARGS}}
+    cargo nextest run -E 'not test(export_bindings)' {{ARGS}}
 
 # Run only frontend tests
 test-web:
-    bun run --cwd web test --run
+    bun run --cwd web test
 
-# Quick check: clippy + tests only (skips formatting)
+# Quick check: clippy + tests + typecheck (skips formatting)
 check-quick:
     cargo clippy --all-features -- --deny warnings
-    cargo nextest run
-    bun run --cwd web typecheck
+    cargo nextest run -E 'not test(export_bindings)'
+    bun run --cwd web check
 
 # Run the Banner API search demo (hits live UTSA API, ~20s)
 search *ARGS:

docs/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-01
+
+### Added
+
+- Live service status tracking on web dashboard with auto-refresh and health indicators.
+- DB operation extraction for improved testability.
+- Unit test suite foundation covering core functionality.
+- Docker support for PostgreSQL development environment.
+- ICS calendar export with comprehensive holiday exclusion coverage.
+- Google Calendar link generation with recurrence rules and meeting details.
+- Job queue with priority-based scheduling for background scraping.
+- Rate limiting with burst allowance for Banner API requests.
+- Session management and caching for Banner API interactions.
+- Discord bot commands: search, terms, ics, gcal.
+- Intelligent scraping system with priority queues and retry tracking.
+
+### Changed
+
+- Type consolidation and dead code removal across the codebase.

docs/FEATURES.md

@@ -1,58 +0,0 @@
-# Features
-
-## Current Features
-
-### Discord Bot Commands
-
-- **search** - Search for courses with various filters (title, course code, keywords)
-- **terms** - List available terms or search for a specific term
-- **time** - Get meeting times for a specific course (CRN)
-- **ics** - Generate ICS calendar file for a course with holiday exclusions
-- **gcal** - Generate Google Calendar link for a course
-
-### Data Pipeline
-
-- Intelligent scraping system with priority queues
-- Rate limiting and burst handling
-- Background data synchronization
-
-## Feature Wishlist
-
-### Commands
-
-- ICS Download (get a ICS download of your classes with location & timing perfectly - set for every class you're in)
-- Classes Now (find classes happening)
-- Autocomplete
-  - Class Title
-  - Course Number
-  - Term/Part of Term
-  - Professor
-  - Attribute
-- Component Pagination
-- RateMyProfessor Integration (Linked/Embedded)
-- Smart term selection (i.e. Summer 2024 will be selected automatically when opened)
-- Rate Limiting (bursting with global/user limits)
-- DMs Integration (allow usage of the bot in DMs)
-- Class Change Notifications (get notified when details about a class change)
-- Multi-term Querying (currently the backend for searching is kinda weird)
-- Full Autocomplete for Every Search Option
-- Metrics, Log Query, Privileged Error Feedback
-- Search for Classes
-  - Major, Professor, Location, Name, Time of Day
-- Subscribe to Classes
-  - Availability (seat, pre-seat)
-  - Waitlist Movement
-  - Detail Changes (meta, time, location, seats, professor)
-    - `time` Start, End, Days of Week
-    - `seats` Any change in seat/waitlist data
-    - `meta`
-- Lookup via Course Reference Number (CRN)
-- Smart Time of Day Handling
-  - "2 PM" -> Start within 2:00 PM to 2:59 PM
-  - "2-3 PM" -> Start within 2:00 PM to 3:59 PM
-  - "ends by 2 PM" -> Ends within 12:00 AM to 2:00 PM
-  - "after 2 PM" -> Start within 2:01 PM to 11:59 PM
-  - "before 2 PM" -> Ends within 12:00 AM to 1:59 PM
-- Get By Section Command
-  - CS 4393 001 =>
-  - Will require SQL to be able to search for a class by its section number

docs/ROADMAP.md

@@ -0,0 +1,31 @@
+# Roadmap
+
+## 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.
+
+## Soon
+
+- **Smart time-of-day search parsing** - Support natural queries like "2 PM", "2-3 PM", "ends by 2 PM", "after 2 PM", "before 2 PM" mapped to time ranges.
+- **Section-based lookup** - Search by full section identifier, e.g. "CS 4393 001".
+- **Search result pagination** - Paginated embeds for large result sets in Discord.
+- **Multi-term querying** - Query across multiple terms in a single search instead of one at a time.
+- **Historical analytics** - Track seat availability over time and visualize fill-rate trends per course or professor.
+- **Schedule builder** - Visual weekly schedule tool for assembling a conflict-free course lineup.
+- **Professor stats** - Aggregate data views: average class size, typical waitlist length, schedule patterns across semesters.
+
+## Eventually
+
+- **Degree audit helper** - Map available courses to degree requirements and suggest what to take next.
+- **Dynamic scraper scheduling** - Adjust scrape intervals based on change frequency and course count (e.g. 2 hours per 500 courses, shorter intervals when changes are detected).
+- **DM support** - Allow the Discord bot to respond in direct messages, not just guild channels.
+- **"Classes Now" command** - Find classes currently in session based on the current day and time.
+- **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.

migrations/20260128000000_expand_course_schema.sql

@@ -0,0 +1,83 @@
+-- ============================================================
+-- Expand courses table with rich Banner API fields
+-- ============================================================
+
+-- Section identifiers
+ALTER TABLE courses ADD COLUMN sequence_number VARCHAR;
+ALTER TABLE courses ADD COLUMN part_of_term VARCHAR;
+
+-- Schedule & delivery (store codes, descriptions come from reference_data)
+ALTER TABLE courses ADD COLUMN instructional_method VARCHAR;
+ALTER TABLE courses ADD COLUMN campus VARCHAR;
+
+-- Credit hours
+ALTER TABLE courses ADD COLUMN credit_hours INTEGER;
+ALTER TABLE courses ADD COLUMN credit_hour_low INTEGER;
+ALTER TABLE courses ADD COLUMN credit_hour_high INTEGER;
+
+-- Cross-listing
+ALTER TABLE courses ADD COLUMN cross_list VARCHAR;
+ALTER TABLE courses ADD COLUMN cross_list_capacity INTEGER;
+ALTER TABLE courses ADD COLUMN cross_list_count INTEGER;
+
+-- Section linking
+ALTER TABLE courses ADD COLUMN link_identifier VARCHAR;
+ALTER TABLE courses ADD COLUMN is_section_linked BOOLEAN;
+
+-- JSONB columns for 1-to-many data
+ALTER TABLE courses ADD COLUMN meeting_times JSONB NOT NULL DEFAULT '[]'::jsonb;
+ALTER TABLE courses ADD COLUMN attributes JSONB NOT NULL DEFAULT '[]'::jsonb;
+
+-- ============================================================
+-- Full-text search support
+-- ============================================================
+
+-- Generated tsvector for word-based search on title
+ALTER TABLE courses ADD COLUMN title_search tsvector
+    GENERATED ALWAYS AS (to_tsvector('simple', coalesce(title, ''))) STORED;
+
+CREATE INDEX idx_courses_title_search ON courses USING GIN (title_search);
+
+-- Trigram index for substring/ILIKE search on title
+CREATE EXTENSION IF NOT EXISTS pg_trgm;
+CREATE INDEX idx_courses_title_trgm ON courses USING GIN (title gin_trgm_ops);
+
+-- ============================================================
+-- New filter indexes
+-- ============================================================
+
+CREATE INDEX idx_courses_instructional_method ON courses(instructional_method);
+CREATE INDEX idx_courses_campus ON courses(campus);
+
+-- Composite for "open CS courses in Fall 2024" pattern
+CREATE INDEX idx_courses_term_subject_avail ON courses(term_code, subject, max_enrollment, enrollment);
+
+-- ============================================================
+-- Instructors table (normalized, deduplicated)
+-- ============================================================
+
+CREATE TABLE instructors (
+    banner_id VARCHAR PRIMARY KEY,
+    display_name VARCHAR NOT NULL,
+    email VARCHAR
+);
+
+CREATE TABLE course_instructors (
+    course_id INTEGER NOT NULL REFERENCES courses(id) ON DELETE CASCADE,
+    instructor_id VARCHAR NOT NULL REFERENCES instructors(banner_id) ON DELETE CASCADE,
+    is_primary BOOLEAN NOT NULL DEFAULT false,
+    PRIMARY KEY (course_id, instructor_id)
+);
+
+CREATE INDEX idx_course_instructors_instructor ON course_instructors(instructor_id);
+
+-- ============================================================
+-- Reference data table (all code→description lookups)
+-- ============================================================
+
+CREATE TABLE reference_data (
+    category VARCHAR NOT NULL,
+    code VARCHAR NOT NULL,
+    description VARCHAR NOT NULL,
+    PRIMARY KEY (category, code)
+);

migrations/20260128100000_add_rmp_professors.sql

@@ -0,0 +1,17 @@
+-- RMP professor data (bulk synced from RateMyProfessors)
+CREATE TABLE rmp_professors (
+    legacy_id INTEGER PRIMARY KEY,
+    graphql_id VARCHAR NOT NULL,
+    first_name VARCHAR NOT NULL,
+    last_name VARCHAR NOT NULL,
+    department VARCHAR,
+    avg_rating REAL,
+    avg_difficulty REAL,
+    num_ratings INTEGER NOT NULL DEFAULT 0,
+    would_take_again_pct REAL,
+    last_synced_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- Link Banner instructors to RMP professors
+ALTER TABLE instructors ADD COLUMN rmp_legacy_id INTEGER REFERENCES rmp_professors(legacy_id);
+ALTER TABLE instructors ADD COLUMN rmp_match_status VARCHAR NOT NULL DEFAULT 'pending';

src/app.rs

@@ -6,13 +6,13 @@ use crate::services::bot::BotService;
 use crate::services::manager::ServiceManager;
 use crate::services::web::WebService;
 use crate::state::AppState;
+use anyhow::Context;
 use figment::value::UncasedStr;
 use figment::{Figment, providers::Env};
 use sqlx::postgres::PgPoolOptions;
 use std::process::ExitCode;
 use std::sync::Arc;
 use std::time::Duration;
-use anyhow::Context;
 use tracing::{error, info};
 
 /// Main application struct containing all necessary components
@@ -79,6 +79,11 @@ impl App {
         let banner_api_arc = Arc::new(banner_api);
         let app_state = AppState::new(banner_api_arc.clone(), db_pool.clone());
 
+        // Load reference data cache from DB (may be empty on first run)
+        if let Err(e) = app_state.load_reference_cache().await {
+            info!(error = ?e, "Could not load reference cache on startup (may be empty)");
+        }
+
         Ok(App {
             config,
             db_pool,
@@ -101,6 +106,7 @@ impl App {
             let scraper_service = Box::new(ScraperService::new(
                 self.db_pool.clone(),
                 self.banner_api.clone(),
+                self.app_state.reference_cache.clone(),
                 self.app_state.service_statuses.clone(),
             ));
             self.service_manager

src/banner/api.rs

@@ -228,6 +228,29 @@ impl BannerApi {
             .await
     }
 
+    /// Retrieves campus codes and descriptions.
+    pub async fn get_campuses(&self, term: &str) -> Result<Vec<Pair>> {
+        self.get_list_endpoint("get_campus", "", term, 1, 500).await
+    }
+
+    /// Retrieves instructional method codes and descriptions.
+    pub async fn get_instructional_methods(&self, term: &str) -> Result<Vec<Pair>> {
+        self.get_list_endpoint("get_instructionalMethod", "", term, 1, 500)
+            .await
+    }
+
+    /// Retrieves part-of-term codes and descriptions.
+    pub async fn get_parts_of_term(&self, term: &str) -> Result<Vec<Pair>> {
+        self.get_list_endpoint("get_partOfTerm", "", term, 1, 500)
+            .await
+    }
+
+    /// Retrieves section attribute codes and descriptions.
+    pub async fn get_attributes(&self, term: &str) -> Result<Vec<Pair>> {
+        self.get_list_endpoint("get_attribute", "", term, 1, 500)
+            .await
+    }
+
     /// Retrieves meeting time information for a course.
     pub async fn get_course_meeting_time(
         &self,

src/banner/models/meetings.rs

@@ -1,4 +1,4 @@
-use bitflags::{bitflags, Flags};
+use bitflags::{Flags, bitflags};
 use chrono::{DateTime, NaiveDate, NaiveTime, Timelike, Utc, Weekday};
 use extension_traits::extension;
 use serde::{Deserialize, Deserializer, Serialize};

src/banner/session.rs

@@ -452,7 +452,11 @@ impl SessionPool {
         self.select_term(&term.to_string(), &unique_session_id, &cookie_header)
             .await?;
 
-        Ok(BannerSession::new(&unique_session_id, jsessionid, ssb_cookie))
+        Ok(BannerSession::new(
+            &unique_session_id,
+            jsessionid,
+            ssb_cookie,
+        ))
     }
 
     /// Retrieves a list of terms from the Banner API.

src/bot/commands/ics.rs

@@ -18,7 +18,9 @@ fn nth_weekday_of_month(year: i32, month: u32, weekday: Weekday, n: u32) -> Opti
 
 /// Compute a consecutive range of dates starting from `start` for `count` days.
 fn date_range(start: NaiveDate, count: i64) -> Vec<NaiveDate> {
-    (0..count).filter_map(|i| start.checked_add_signed(Duration::days(i))).collect()
+    (0..count)
+        .filter_map(|i| start.checked_add_signed(Duration::days(i)))
+        .collect()
 }
 
 /// Compute university holidays for a given year.

src/data/batch.rs

@@ -1,43 +1,73 @@
 //! Batch database operations for improved performance.
 
 use crate::banner::Course;
+use crate::data::models::DbMeetingTime;
 use crate::error::Result;
 use sqlx::PgPool;
+use std::collections::HashSet;
 use std::time::Instant;
 use tracing::info;
 
+/// Convert a Banner API course's meeting times to the DB JSONB shape.
+fn to_db_meeting_times(course: &Course) -> serde_json::Value {
+    let meetings: Vec<DbMeetingTime> = course
+        .meetings_faculty
+        .iter()
+        .map(|mf| {
+            let mt = &mf.meeting_time;
+            DbMeetingTime {
+                begin_time: mt.begin_time.clone(),
+                end_time: mt.end_time.clone(),
+                start_date: mt.start_date.clone(),
+                end_date: mt.end_date.clone(),
+                monday: mt.monday,
+                tuesday: mt.tuesday,
+                wednesday: mt.wednesday,
+                thursday: mt.thursday,
+                friday: mt.friday,
+                saturday: mt.saturday,
+                sunday: mt.sunday,
+                building: mt.building.clone(),
+                building_description: mt.building_description.clone(),
+                room: mt.room.clone(),
+                campus: mt.campus.clone(),
+                meeting_type: mt.meeting_type.clone(),
+                meeting_schedule_type: mt.meeting_schedule_type.clone(),
+            }
+        })
+        .collect();
+    serde_json::to_value(meetings).unwrap_or_default()
+}
+
+/// Convert a Banner API course's section attributes to a JSONB array of code strings.
+fn to_db_attributes(course: &Course) -> serde_json::Value {
+    let codes: Vec<&str> = course
+        .section_attributes
+        .iter()
+        .map(|a| a.code.as_str())
+        .collect();
+    serde_json::to_value(codes).unwrap_or_default()
+}
+
+/// Extract the campus code from the first meeting time (Banner doesn't put it on the course directly).
+fn extract_campus_code(course: &Course) -> Option<String> {
+    course
+        .meetings_faculty
+        .first()
+        .and_then(|mf| mf.meeting_time.campus.clone())
+}
+
 /// Batch upsert courses in a single database query.
 ///
-/// This function performs a bulk INSERT...ON CONFLICT DO UPDATE for all courses
-/// in a single round-trip to the database, significantly reducing overhead compared
-/// to individual inserts.
+/// Performs a bulk INSERT...ON CONFLICT DO UPDATE for all courses, including
+/// new fields (meeting times, attributes, instructor data). Returns the
+/// database IDs for all upserted courses (in input order) so instructors
+/// can be linked.
 ///
 /// # Performance
-/// - Reduces N database round-trips to 1
+/// - Reduces N database round-trips to 3 (courses, instructors, junction)
 /// - Typical usage: 50-200 courses per batch
-/// - PostgreSQL parameter limit: 65,535 (we use ~10 per course)
-///
-/// # Arguments
-/// * `courses` - Slice of Course structs from the Banner API
-/// * `db_pool` - PostgreSQL connection pool
-///
-/// # Returns
-/// * `Ok(())` on success
-/// * `Err(_)` if the database operation fails
-///
-/// # Example
-/// ```no_run
-/// use banner::data::batch::batch_upsert_courses;
-/// use banner::banner::Course;
-/// use sqlx::PgPool;
-///
-/// async fn example(courses: &[Course], pool: &PgPool) -> anyhow::Result<()> {
-///     batch_upsert_courses(courses, pool).await?;
-///     Ok(())
-/// }
-/// ```
 pub async fn batch_upsert_courses(courses: &[Course], db_pool: &PgPool) -> Result<()> {
-    // Early return for empty batches
     if courses.is_empty() {
         info!("No courses to upsert, skipping batch operation");
         return Ok(());
@@ -46,42 +76,108 @@ pub async fn batch_upsert_courses(courses: &[Course], db_pool: &PgPool) -> Resul
     let start = Instant::now();
     let course_count = courses.len();
 
-    // Extract course fields into vectors for UNNEST
+    // Step 1: Upsert courses with all fields, returning IDs
+    let course_ids = upsert_courses(courses, db_pool).await?;
+
+    // Step 2: Upsert instructors (deduplicated across batch)
+    upsert_instructors(courses, db_pool).await?;
+
+    // Step 3: Link courses to instructors via junction table
+    upsert_course_instructors(courses, &course_ids, db_pool).await?;
+
+    let duration = start.elapsed();
+    info!(
+        courses_count = course_count,
+        duration_ms = duration.as_millis(),
+        "Batch upserted courses with instructors"
+    );
+
+    Ok(())
+}
+
+/// Upsert all courses and return their database IDs in input order.
+async fn upsert_courses(courses: &[Course], db_pool: &PgPool) -> Result<Vec<i32>> {
     let crns: Vec<&str> = courses
         .iter()
         .map(|c| c.course_reference_number.as_str())
         .collect();
-
     let subjects: Vec<&str> = courses.iter().map(|c| c.subject.as_str()).collect();
-
     let course_numbers: Vec<&str> = courses.iter().map(|c| c.course_number.as_str()).collect();
-
     let titles: Vec<&str> = courses.iter().map(|c| c.course_title.as_str()).collect();
-
     let term_codes: Vec<&str> = courses.iter().map(|c| c.term.as_str()).collect();
-
     let enrollments: Vec<i32> = courses.iter().map(|c| c.enrollment).collect();
-
     let max_enrollments: Vec<i32> = courses.iter().map(|c| c.maximum_enrollment).collect();
-
     let wait_counts: Vec<i32> = courses.iter().map(|c| c.wait_count).collect();
-
     let wait_capacities: Vec<i32> = courses.iter().map(|c| c.wait_capacity).collect();
 
-    // Perform batch upsert using UNNEST for efficient bulk insertion
-    let result = sqlx::query(
+    // New scalar fields
+    let sequence_numbers: Vec<Option<&str>> = courses
+        .iter()
+        .map(|c| Some(c.sequence_number.as_str()))
+        .collect();
+    let parts_of_term: Vec<Option<&str>> = courses
+        .iter()
+        .map(|c| Some(c.part_of_term.as_str()))
+        .collect();
+    let instructional_methods: Vec<Option<&str>> = courses
+        .iter()
+        .map(|c| Some(c.instructional_method.as_str()))
+        .collect();
+    let campuses: Vec<Option<String>> = courses.iter().map(extract_campus_code).collect();
+    let credit_hours: Vec<Option<i32>> = courses.iter().map(|c| c.credit_hours).collect();
+    let credit_hour_lows: Vec<Option<i32>> = courses.iter().map(|c| c.credit_hour_low).collect();
+    let credit_hour_highs: Vec<Option<i32>> = courses.iter().map(|c| c.credit_hour_high).collect();
+    let cross_lists: Vec<Option<&str>> = courses.iter().map(|c| c.cross_list.as_deref()).collect();
+    let cross_list_capacities: Vec<Option<i32>> =
+        courses.iter().map(|c| c.cross_list_capacity).collect();
+    let cross_list_counts: Vec<Option<i32>> = courses.iter().map(|c| c.cross_list_count).collect();
+    let link_identifiers: Vec<Option<&str>> = courses
+        .iter()
+        .map(|c| c.link_identifier.as_deref())
+        .collect();
+    let is_section_linkeds: Vec<Option<bool>> =
+        courses.iter().map(|c| Some(c.is_section_linked)).collect();
+
+    // JSONB fields
+    let meeting_times_json: Vec<serde_json::Value> =
+        courses.iter().map(to_db_meeting_times).collect();
+    let attributes_json: Vec<serde_json::Value> = courses.iter().map(to_db_attributes).collect();
+
+    let rows = sqlx::query_scalar::<_, i32>(
         r#"
         INSERT INTO courses (
             crn, subject, course_number, title, term_code,
-            enrollment, max_enrollment, wait_count, wait_capacity, last_scraped_at
+            enrollment, max_enrollment, wait_count, wait_capacity, last_scraped_at,
+            sequence_number, part_of_term, instructional_method, campus,
+            credit_hours, credit_hour_low, credit_hour_high,
+            cross_list, cross_list_capacity, cross_list_count,
+            link_identifier, is_section_linked,
+            meeting_times, attributes
         )
-        SELECT * FROM UNNEST(
+        SELECT
+            v.crn, v.subject, v.course_number, v.title, v.term_code,
+            v.enrollment, v.max_enrollment, v.wait_count, v.wait_capacity, NOW(),
+            v.sequence_number, v.part_of_term, v.instructional_method, v.campus,
+            v.credit_hours, v.credit_hour_low, v.credit_hour_high,
+            v.cross_list, v.cross_list_capacity, v.cross_list_count,
+            v.link_identifier, v.is_section_linked,
+            v.meeting_times, v.attributes
+        FROM UNNEST(
             $1::text[], $2::text[], $3::text[], $4::text[], $5::text[],
             $6::int4[], $7::int4[], $8::int4[], $9::int4[],
-            array_fill(NOW()::timestamptz, ARRAY[$10])
-        ) AS t(
+            $10::text[], $11::text[], $12::text[], $13::text[],
+            $14::int4[], $15::int4[], $16::int4[],
+            $17::text[], $18::int4[], $19::int4[],
+            $20::text[], $21::bool[],
+            $22::jsonb[], $23::jsonb[]
+        ) AS v(
             crn, subject, course_number, title, term_code,
-            enrollment, max_enrollment, wait_count, wait_capacity, last_scraped_at
+            enrollment, max_enrollment, wait_count, wait_capacity,
+            sequence_number, part_of_term, instructional_method, campus,
+            credit_hours, credit_hour_low, credit_hour_high,
+            cross_list, cross_list_capacity, cross_list_count,
+            link_identifier, is_section_linked,
+            meeting_times, attributes
         )
         ON CONFLICT (crn, term_code)
         DO UPDATE SET
@@ -92,7 +188,22 @@ pub async fn batch_upsert_courses(courses: &[Course], db_pool: &PgPool) -> Resul
             max_enrollment = EXCLUDED.max_enrollment,
             wait_count = EXCLUDED.wait_count,
             wait_capacity = EXCLUDED.wait_capacity,
-            last_scraped_at = EXCLUDED.last_scraped_at
+            last_scraped_at = EXCLUDED.last_scraped_at,
+            sequence_number = EXCLUDED.sequence_number,
+            part_of_term = EXCLUDED.part_of_term,
+            instructional_method = EXCLUDED.instructional_method,
+            campus = EXCLUDED.campus,
+            credit_hours = EXCLUDED.credit_hours,
+            credit_hour_low = EXCLUDED.credit_hour_low,
+            credit_hour_high = EXCLUDED.credit_hour_high,
+            cross_list = EXCLUDED.cross_list,
+            cross_list_capacity = EXCLUDED.cross_list_capacity,
+            cross_list_count = EXCLUDED.cross_list_count,
+            link_identifier = EXCLUDED.link_identifier,
+            is_section_linked = EXCLUDED.is_section_linked,
+            meeting_times = EXCLUDED.meeting_times,
+            attributes = EXCLUDED.attributes
+        RETURNING id
         "#,
     )
     .bind(&crns)
@@ -104,19 +215,111 @@ pub async fn batch_upsert_courses(courses: &[Course], db_pool: &PgPool) -> Resul
     .bind(&max_enrollments)
     .bind(&wait_counts)
     .bind(&wait_capacities)
-    .bind(course_count as i32)
-    .execute(db_pool)
+    .bind(&sequence_numbers)
+    .bind(&parts_of_term)
+    .bind(&instructional_methods)
+    .bind(&campuses)
+    .bind(&credit_hours)
+    .bind(&credit_hour_lows)
+    .bind(&credit_hour_highs)
+    .bind(&cross_lists)
+    .bind(&cross_list_capacities)
+    .bind(&cross_list_counts)
+    .bind(&link_identifiers)
+    .bind(&is_section_linkeds)
+    .bind(&meeting_times_json)
+    .bind(&attributes_json)
+    .fetch_all(db_pool)
     .await
     .map_err(|e| anyhow::anyhow!("Failed to batch upsert courses: {}", e))?;
 
-    let duration = start.elapsed();
+    Ok(rows)
+}
 
-    info!(
-        courses_count = course_count,
-        rows_affected = result.rows_affected(),
-        duration_ms = duration.as_millis(),
-        "Batch upserted courses"
-    );
+/// Deduplicate and upsert all instructors from the batch.
+async fn upsert_instructors(courses: &[Course], db_pool: &PgPool) -> Result<()> {
+    let mut seen = HashSet::new();
+    let mut banner_ids = Vec::new();
+    let mut display_names = Vec::new();
+    let mut emails: Vec<Option<&str>> = Vec::new();
+
+    for course in courses {
+        for faculty in &course.faculty {
+            if seen.insert(faculty.banner_id.as_str()) {
+                banner_ids.push(faculty.banner_id.as_str());
+                display_names.push(faculty.display_name.as_str());
+                emails.push(faculty.email_address.as_deref());
+            }
+        }
+    }
+
+    if banner_ids.is_empty() {
+        return Ok(());
+    }
+
+    sqlx::query(
+        r#"
+        INSERT INTO instructors (banner_id, display_name, email)
+        SELECT * FROM UNNEST($1::text[], $2::text[], $3::text[])
+        ON CONFLICT (banner_id)
+        DO UPDATE SET
+            display_name = EXCLUDED.display_name,
+            email = COALESCE(EXCLUDED.email, instructors.email)
+        "#,
+    )
+    .bind(&banner_ids)
+    .bind(&display_names)
+    .bind(&emails)
+    .execute(db_pool)
+    .await
+    .map_err(|e| anyhow::anyhow!("Failed to batch upsert instructors: {}", e))?;
+
+    Ok(())
+}
+
+/// Link courses to their instructors via the junction table.
+async fn upsert_course_instructors(
+    courses: &[Course],
+    course_ids: &[i32],
+    db_pool: &PgPool,
+) -> Result<()> {
+    let mut cids = Vec::new();
+    let mut iids = Vec::new();
+    let mut primaries = Vec::new();
+
+    for (course, &course_id) in courses.iter().zip(course_ids) {
+        for faculty in &course.faculty {
+            cids.push(course_id);
+            iids.push(faculty.banner_id.as_str());
+            primaries.push(faculty.primary_indicator);
+        }
+    }
+
+    if cids.is_empty() {
+        return Ok(());
+    }
+
+    // Delete existing links for these courses then re-insert.
+    // This handles instructor changes cleanly.
+    sqlx::query("DELETE FROM course_instructors WHERE course_id = ANY($1)")
+        .bind(&cids)
+        .execute(db_pool)
+        .await?;
+
+    sqlx::query(
+        r#"
+        INSERT INTO course_instructors (course_id, instructor_id, is_primary)
+        SELECT * FROM UNNEST($1::int4[], $2::text[], $3::bool[])
+        ON CONFLICT (course_id, instructor_id)
+        DO UPDATE SET is_primary = EXCLUDED.is_primary
+        "#,
+    )
+    .bind(&cids)
+    .bind(&iids)
+    .bind(&primaries)
+    .execute(db_pool)
+    .await
+    .map_err(|e| anyhow::anyhow!("Failed to batch upsert course_instructors: {}", e))?;
 
     Ok(())
 }

src/data/courses.rs

@@ -0,0 +1,153 @@
+//! Database query functions for courses, used by the web API.
+
+use crate::data::models::Course;
+use crate::error::Result;
+use sqlx::PgPool;
+
+/// Search courses by term with optional filters.
+///
+/// Returns `(courses, total_count)` for pagination. Uses FTS tsvector for word
+/// search and falls back to trigram ILIKE for substring matching.
+#[allow(clippy::too_many_arguments)]
+pub async fn search_courses(
+    db_pool: &PgPool,
+    term_code: &str,
+    subject: Option<&str>,
+    title_query: Option<&str>,
+    course_number_low: Option<i32>,
+    course_number_high: Option<i32>,
+    open_only: bool,
+    instructional_method: Option<&str>,
+    campus: Option<&str>,
+    limit: i32,
+    offset: i32,
+    order_by: &str,
+) -> 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 courses = sqlx::query_as::<_, Course>(&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)
+        .bind(limit)
+        .bind(offset)
+        .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?;
+
+    Ok((courses, total.0))
+}
+
+/// Get a single course by CRN and term.
+pub async fn get_course_by_crn(
+    db_pool: &PgPool,
+    crn: &str,
+    term_code: &str,
+) -> Result<Option<Course>> {
+    let course =
+        sqlx::query_as::<_, Course>("SELECT * FROM courses WHERE crn = $1 AND term_code = $2")
+            .bind(crn)
+            .bind(term_code)
+            .fetch_optional(db_pool)
+            .await?;
+    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.
+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(
+        r#"
+        SELECT i.banner_id, i.display_name, i.email, ci.is_primary,
+               rp.avg_rating, rp.num_ratings
+        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 = $1
+        ORDER BY ci.is_primary DESC, i.display_name
+        "#,
+    )
+    .bind(course_id)
+    .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,)> =
+        sqlx::query_as("SELECT DISTINCT term_code FROM courses ORDER BY term_code DESC")
+            .fetch_all(db_pool)
+            .await?;
+    Ok(rows.into_iter().map(|(tc,)| tc).collect())
+}

src/data/mod.rs

@@ -1,5 +1,8 @@
 //! Database models and schema.
 
 pub mod batch;
+pub mod courses;
 pub mod models;
+pub mod reference;
+pub mod rmp;
 pub mod scrape_jobs;

src/data/models.rs

@@ -1,7 +1,32 @@
 //! `sqlx` models for the database schema.
 
 use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
 use serde_json::Value;
+use ts_rs::TS;
+
+/// Represents a meeting time stored as JSONB in the courses table.
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[ts(export)]
+pub struct DbMeetingTime {
+    pub begin_time: Option<String>,
+    pub end_time: Option<String>,
+    pub start_date: String,
+    pub end_date: String,
+    pub monday: bool,
+    pub tuesday: bool,
+    pub wednesday: bool,
+    pub thursday: bool,
+    pub friday: bool,
+    pub saturday: bool,
+    pub sunday: bool,
+    pub building: Option<String>,
+    pub building_description: Option<String>,
+    pub room: Option<String>,
+    pub campus: Option<String>,
+    pub meeting_type: String,
+    pub meeting_schedule_type: String,
+}
 
 #[allow(dead_code)]
 #[derive(sqlx::FromRow, Debug, Clone)]
@@ -17,6 +42,46 @@ pub struct Course {
     pub wait_count: i32,
     pub wait_capacity: i32,
     pub last_scraped_at: DateTime<Utc>,
+    // New scalar fields
+    pub sequence_number: Option<String>,
+    pub part_of_term: Option<String>,
+    pub instructional_method: Option<String>,
+    pub campus: Option<String>,
+    pub credit_hours: Option<i32>,
+    pub credit_hour_low: Option<i32>,
+    pub credit_hour_high: Option<i32>,
+    pub cross_list: Option<String>,
+    pub cross_list_capacity: Option<i32>,
+    pub cross_list_count: Option<i32>,
+    pub link_identifier: Option<String>,
+    pub is_section_linked: Option<bool>,
+    // JSONB fields
+    pub meeting_times: Value,
+    pub attributes: Value,
+}
+
+#[allow(dead_code)]
+#[derive(sqlx::FromRow, Debug, Clone)]
+pub struct Instructor {
+    pub banner_id: String,
+    pub display_name: String,
+    pub email: Option<String>,
+}
+
+#[allow(dead_code)]
+#[derive(sqlx::FromRow, Debug, Clone)]
+pub struct CourseInstructor {
+    pub course_id: i32,
+    pub instructor_id: String,
+    pub is_primary: bool,
+}
+
+#[allow(dead_code)]
+#[derive(sqlx::FromRow, Debug, Clone)]
+pub struct ReferenceData {
+    pub category: String,
+    pub code: String,
+    pub description: String,
 }
 
 #[allow(dead_code)]

src/data/reference.rs

@@ -0,0 +1,57 @@
+//! Database operations for the `reference_data` table (code→description lookups).
+
+use crate::data::models::ReferenceData;
+use crate::error::Result;
+use html_escape::decode_html_entities;
+use sqlx::PgPool;
+
+/// Batch upsert reference data entries.
+pub async fn batch_upsert(entries: &[ReferenceData], db_pool: &PgPool) -> Result<()> {
+    if entries.is_empty() {
+        return Ok(());
+    }
+
+    let categories: Vec<&str> = entries.iter().map(|e| e.category.as_str()).collect();
+    let codes: Vec<&str> = entries.iter().map(|e| e.code.as_str()).collect();
+    let descriptions: Vec<String> = entries
+        .iter()
+        .map(|e| decode_html_entities(&e.description).into_owned())
+        .collect();
+
+    sqlx::query(
+        r#"
+        INSERT INTO reference_data (category, code, description)
+        SELECT * FROM UNNEST($1::text[], $2::text[], $3::text[])
+        ON CONFLICT (category, code)
+        DO UPDATE SET description = EXCLUDED.description
+        "#,
+    )
+    .bind(&categories)
+    .bind(&codes)
+    .bind(&descriptions)
+    .execute(db_pool)
+    .await?;
+
+    Ok(())
+}
+
+/// Get all reference data entries for a category.
+pub async fn get_by_category(category: &str, db_pool: &PgPool) -> Result<Vec<ReferenceData>> {
+    let rows = sqlx::query_as::<_, ReferenceData>(
+        "SELECT category, code, description FROM reference_data WHERE category = $1 ORDER BY description",
+    )
+    .bind(category)
+    .fetch_all(db_pool)
+    .await?;
+    Ok(rows)
+}
+
+/// Get all reference data entries (for cache initialization).
+pub async fn get_all(db_pool: &PgPool) -> Result<Vec<ReferenceData>> {
+    let rows = sqlx::query_as::<_, ReferenceData>(
+        "SELECT category, code, description FROM reference_data ORDER BY category, description",
+    )
+    .fetch_all(db_pool)
+    .await?;
+    Ok(rows)
+}

src/data/rmp.rs

@@ -0,0 +1,311 @@
+//! Database operations for RateMyProfessors data.
+
+use crate::error::Result;
+use crate::rmp::RmpProfessor;
+use sqlx::PgPool;
+use std::collections::{HashMap, HashSet};
+use tracing::{debug, info, warn};
+
+/// Bulk upsert RMP professors using the UNNEST pattern.
+///
+/// Deduplicates by `legacy_id` before inserting — the RMP API can return
+/// the same professor on multiple pages.
+pub async fn batch_upsert_rmp_professors(
+    professors: &[RmpProfessor],
+    db_pool: &PgPool,
+) -> Result<()> {
+    if professors.is_empty() {
+        return Ok(());
+    }
+
+    // Deduplicate: keep last occurrence per legacy_id (latest page wins)
+    let mut seen = HashSet::new();
+    let deduped: Vec<&RmpProfessor> = professors
+        .iter()
+        .rev()
+        .filter(|p| seen.insert(p.legacy_id))
+        .collect();
+
+    let legacy_ids: Vec<i32> = deduped.iter().map(|p| p.legacy_id).collect();
+    let graphql_ids: Vec<&str> = deduped.iter().map(|p| p.graphql_id.as_str()).collect();
+    let first_names: Vec<String> = deduped
+        .iter()
+        .map(|p| p.first_name.trim().to_string())
+        .collect();
+    let first_name_refs: Vec<&str> = first_names.iter().map(|s| s.as_str()).collect();
+    let last_names: Vec<String> = deduped
+        .iter()
+        .map(|p| p.last_name.trim().to_string())
+        .collect();
+    let last_name_refs: Vec<&str> = last_names.iter().map(|s| s.as_str()).collect();
+    let departments: Vec<Option<&str>> = deduped.iter().map(|p| p.department.as_deref()).collect();
+    let avg_ratings: Vec<Option<f32>> = deduped.iter().map(|p| p.avg_rating).collect();
+    let avg_difficulties: Vec<Option<f32>> = deduped.iter().map(|p| p.avg_difficulty).collect();
+    let num_ratings: Vec<i32> = deduped.iter().map(|p| p.num_ratings).collect();
+    let would_take_again_pcts: Vec<Option<f32>> =
+        deduped.iter().map(|p| p.would_take_again_pct).collect();
+
+    sqlx::query(
+        r#"
+        INSERT INTO rmp_professors (
+            legacy_id, graphql_id, first_name, last_name, department,
+            avg_rating, avg_difficulty, num_ratings, would_take_again_pct,
+            last_synced_at
+        )
+        SELECT
+            v.legacy_id, v.graphql_id, v.first_name, v.last_name, v.department,
+            v.avg_rating, v.avg_difficulty, v.num_ratings, v.would_take_again_pct,
+            NOW()
+        FROM UNNEST(
+            $1::int4[], $2::text[], $3::text[], $4::text[], $5::text[],
+            $6::real[], $7::real[], $8::int4[], $9::real[]
+        ) AS v(
+            legacy_id, graphql_id, first_name, last_name, department,
+            avg_rating, avg_difficulty, num_ratings, would_take_again_pct
+        )
+        ON CONFLICT (legacy_id)
+        DO UPDATE SET
+            graphql_id = EXCLUDED.graphql_id,
+            first_name = EXCLUDED.first_name,
+            last_name = EXCLUDED.last_name,
+            department = EXCLUDED.department,
+            avg_rating = EXCLUDED.avg_rating,
+            avg_difficulty = EXCLUDED.avg_difficulty,
+            num_ratings = EXCLUDED.num_ratings,
+            would_take_again_pct = EXCLUDED.would_take_again_pct,
+            last_synced_at = EXCLUDED.last_synced_at
+        "#,
+    )
+    .bind(&legacy_ids)
+    .bind(&graphql_ids)
+    .bind(&first_name_refs)
+    .bind(&last_name_refs)
+    .bind(&departments)
+    .bind(&avg_ratings)
+    .bind(&avg_difficulties)
+    .bind(&num_ratings)
+    .bind(&would_take_again_pcts)
+    .execute(db_pool)
+    .await
+    .map_err(|e| anyhow::anyhow!("Failed to batch upsert RMP professors: {}", e))?;
+
+    Ok(())
+}
+
+/// Normalize a name for matching: lowercase, trim, strip trailing periods.
+fn normalize(s: &str) -> String {
+    s.trim().to_lowercase().trim_end_matches('.').to_string()
+}
+
+/// Parse Banner's "Last, First Middle" display name into (last, first) tokens.
+///
+/// Returns `None` if the format is unparseable (no comma, empty parts).
+fn parse_display_name(display_name: &str) -> Option<(String, String)> {
+    let (last_part, first_part) = display_name.split_once(',')?;
+    let last = normalize(last_part);
+    // Take only the first token of the first-name portion to drop middle names/initials.
+    let first = normalize(first_part.split_whitespace().next()?);
+    if last.is_empty() || first.is_empty() {
+        return None;
+    }
+    Some((last, first))
+}
+
+/// Auto-match instructors to RMP professors by normalized name.
+///
+/// Loads all pending instructors and all RMP professors, then matches in Rust
+/// using normalized name comparison. Only assigns a match when exactly one RMP
+/// professor matches a given instructor.
+pub async fn auto_match_instructors(db_pool: &PgPool) -> Result<u64> {
+    // Load pending instructors
+    let instructors: Vec<(String, String)> = sqlx::query_as(
+        "SELECT banner_id, display_name FROM instructors WHERE rmp_match_status = 'pending'",
+    )
+    .fetch_all(db_pool)
+    .await?;
+
+    if instructors.is_empty() {
+        info!(matched = 0, "No pending instructors to match");
+        return Ok(0);
+    }
+
+    // Load all RMP professors
+    let professors: Vec<(i32, String, String)> =
+        sqlx::query_as("SELECT legacy_id, first_name, last_name FROM rmp_professors")
+            .fetch_all(db_pool)
+            .await?;
+
+    // Build a lookup: (normalized_last, normalized_first) -> list of legacy_ids
+    let mut rmp_index: HashMap<(String, String), Vec<i32>> = HashMap::new();
+    for (legacy_id, first, last) in &professors {
+        let key = (normalize(last), normalize(first));
+        rmp_index.entry(key).or_default().push(*legacy_id);
+    }
+
+    // Match each instructor
+    let mut matches: Vec<(i32, String)> = Vec::new(); // (legacy_id, banner_id)
+    let mut no_comma = 0u64;
+    let mut no_match = 0u64;
+    let mut ambiguous = 0u64;
+
+    for (banner_id, display_name) in &instructors {
+        let Some((last, first)) = parse_display_name(display_name) else {
+            no_comma += 1;
+            continue;
+        };
+
+        let key = (last, first);
+        match rmp_index.get(&key) {
+            Some(ids) if ids.len() == 1 => {
+                matches.push((ids[0], banner_id.clone()));
+            }
+            Some(ids) => {
+                ambiguous += 1;
+                debug!(
+                    banner_id,
+                    display_name,
+                    candidates = ids.len(),
+                    "Ambiguous RMP match, skipping"
+                );
+            }
+            None => {
+                no_match += 1;
+            }
+        }
+    }
+
+    if no_comma > 0 || ambiguous > 0 {
+        warn!(
+            total_pending = instructors.len(),
+            no_comma,
+            no_match,
+            ambiguous,
+            matched = matches.len(),
+            "RMP matching diagnostics"
+        );
+    }
+
+    // Batch update matches
+    if matches.is_empty() {
+        info!(matched = 0, "Auto-matched instructors to RMP professors");
+        return Ok(0);
+    }
+
+    let legacy_ids: Vec<i32> = matches.iter().map(|(id, _)| *id).collect();
+    let banner_ids: Vec<&str> = matches.iter().map(|(_, bid)| bid.as_str()).collect();
+
+    let result = sqlx::query(
+        r#"
+        UPDATE instructors i
+        SET
+            rmp_legacy_id = m.legacy_id,
+            rmp_match_status = 'auto'
+        FROM UNNEST($1::int4[], $2::text[]) AS m(legacy_id, banner_id)
+        WHERE i.banner_id = m.banner_id
+        "#,
+    )
+    .bind(&legacy_ids)
+    .bind(&banner_ids)
+    .execute(db_pool)
+    .await
+    .map_err(|e| anyhow::anyhow!("Failed to update instructor RMP matches: {}", e))?;
+
+    let matched = result.rows_affected();
+    info!(matched, "Auto-matched instructors to RMP professors");
+    Ok(matched)
+}
+
+/// Retrieve RMP rating data for an instructor by banner_id.
+///
+/// Returns `(avg_rating, num_ratings)` if the instructor has an RMP match.
+#[allow(dead_code)]
+pub async fn get_instructor_rmp_data(
+    db_pool: &PgPool,
+    banner_id: &str,
+) -> Result<Option<(f32, i32)>> {
+    let row: Option<(f32, i32)> = sqlx::query_as(
+        r#"
+        SELECT rp.avg_rating, rp.num_ratings
+        FROM instructors i
+        JOIN rmp_professors rp ON rp.legacy_id = i.rmp_legacy_id
+        WHERE i.banner_id = $1
+          AND rp.avg_rating IS NOT NULL
+        "#,
+    )
+    .bind(banner_id)
+    .fetch_optional(db_pool)
+    .await?;
+    Ok(row)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parse_standard_name() {
+        assert_eq!(
+            parse_display_name("Smith, John"),
+            Some(("smith".into(), "john".into()))
+        );
+    }
+
+    #[test]
+    fn parse_name_with_middle() {
+        assert_eq!(
+            parse_display_name("Smith, John David"),
+            Some(("smith".into(), "john".into()))
+        );
+    }
+
+    #[test]
+    fn parse_name_with_middle_initial() {
+        assert_eq!(
+            parse_display_name("Garcia, Maria L."),
+            Some(("garcia".into(), "maria".into()))
+        );
+    }
+
+    #[test]
+    fn parse_name_with_suffix_in_last() {
+        // Banner may encode "Jr." as part of the last name.
+        // normalize() strips trailing periods so "Jr." becomes "jr".
+        assert_eq!(
+            parse_display_name("Smith Jr., James"),
+            Some(("smith jr".into(), "james".into()))
+        );
+    }
+
+    #[test]
+    fn parse_no_comma_returns_none() {
+        assert_eq!(parse_display_name("SingleName"), None);
+    }
+
+    #[test]
+    fn parse_empty_first_returns_none() {
+        assert_eq!(parse_display_name("Smith,"), None);
+    }
+
+    #[test]
+    fn parse_empty_last_returns_none() {
+        assert_eq!(parse_display_name(", John"), None);
+    }
+
+    #[test]
+    fn parse_extra_whitespace() {
+        assert_eq!(
+            parse_display_name("  Doe ,  Jane   Marie  "),
+            Some(("doe".into(), "jane".into()))
+        );
+    }
+
+    #[test]
+    fn normalize_trims_and_lowercases() {
+        assert_eq!(normalize("  FOO  "), "foo");
+    }
+
+    #[test]
+    fn normalize_strips_trailing_period() {
+        assert_eq!(normalize("Jr."), "jr");
+    }
+}

src/lib.rs

@@ -7,6 +7,7 @@ pub mod data;
 pub mod error;
 pub mod formatter;
 pub mod logging;
+pub mod rmp;
 pub mod scraper;
 pub mod services;
 pub mod signals;

src/main.rs

@@ -14,6 +14,7 @@ mod data;
 mod error;
 mod formatter;
 mod logging;
+mod rmp;
 mod scraper;
 mod services;
 mod signals;

src/rmp/mod.rs

@@ -0,0 +1,150 @@
+//! RateMyProfessors GraphQL client for bulk professor data sync.
+
+use anyhow::Result;
+use serde::{Deserialize, Serialize};
+use tracing::{debug, info};
+
+/// UTSA's school ID on RateMyProfessors (base64 of "School-1516").
+const UTSA_SCHOOL_ID: &str = "U2Nob29sLTE1MTY=";
+
+/// Basic auth header value (base64 of "test:test").
+const AUTH_HEADER: &str = "Basic dGVzdDp0ZXN0";
+
+/// GraphQL endpoint.
+const GRAPHQL_URL: &str = "https://www.ratemyprofessors.com/graphql";
+
+/// Page size for paginated fetches.
+const PAGE_SIZE: u32 = 100;
+
+/// A professor record from RateMyProfessors.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RmpProfessor {
+    pub legacy_id: i32,
+    pub graphql_id: String,
+    pub first_name: String,
+    pub last_name: String,
+    pub department: Option<String>,
+    pub avg_rating: Option<f32>,
+    pub avg_difficulty: Option<f32>,
+    pub num_ratings: i32,
+    pub would_take_again_pct: Option<f32>,
+}
+
+/// Client for fetching professor data from RateMyProfessors.
+pub struct RmpClient {
+    http: reqwest::Client,
+}
+
+impl RmpClient {
+    pub fn new() -> Self {
+        Self {
+            http: reqwest::Client::new(),
+        }
+    }
+
+    /// Fetch all professors for UTSA via paginated GraphQL queries.
+    pub async fn fetch_all_professors(&self) -> Result<Vec<RmpProfessor>> {
+        let mut all = Vec::new();
+        let mut cursor: Option<String> = None;
+
+        loop {
+            let after_clause = match &cursor {
+                Some(c) => format!(r#", after: "{}""#, c),
+                None => String::new(),
+            };
+
+            let query = format!(
+                r#"query {{
+  newSearch {{
+    teachers(query: {{ text: "", schoolID: "{school_id}" }}, first: {page_size}{after}) {{
+      edges {{
+        cursor
+        node {{
+          id
+          legacyId
+          firstName
+          lastName
+          department
+          avgRating
+          avgDifficulty
+          numRatings
+          wouldTakeAgainPercent
+        }}
+      }}
+      pageInfo {{
+        hasNextPage
+        endCursor
+      }}
+    }}
+  }}
+}}"#,
+                school_id = UTSA_SCHOOL_ID,
+                page_size = PAGE_SIZE,
+                after = after_clause,
+            );
+
+            let body = serde_json::json!({ "query": query });
+
+            let resp = self
+                .http
+                .post(GRAPHQL_URL)
+                .header("Authorization", AUTH_HEADER)
+                .json(&body)
+                .send()
+                .await?;
+
+            let status = resp.status();
+            if !status.is_success() {
+                let text = resp.text().await.unwrap_or_default();
+                anyhow::bail!("RMP GraphQL request failed ({status}): {text}");
+            }
+
+            let json: serde_json::Value = resp.json().await?;
+
+            let teachers = &json["data"]["newSearch"]["teachers"];
+            let edges = teachers["edges"]
+                .as_array()
+                .ok_or_else(|| anyhow::anyhow!("Missing edges in RMP response"))?;
+
+            for edge in edges {
+                let node = &edge["node"];
+                let wta = node["wouldTakeAgainPercent"]
+                    .as_f64()
+                    .map(|v| v as f32)
+                    .filter(|&v| v >= 0.0);
+
+                all.push(RmpProfessor {
+                    legacy_id: node["legacyId"]
+                        .as_i64()
+                        .ok_or_else(|| anyhow::anyhow!("Missing legacyId"))?
+                        as i32,
+                    graphql_id: node["id"]
+                        .as_str()
+                        .ok_or_else(|| anyhow::anyhow!("Missing id"))?
+                        .to_string(),
+                    first_name: node["firstName"].as_str().unwrap_or_default().to_string(),
+                    last_name: node["lastName"].as_str().unwrap_or_default().to_string(),
+                    department: node["department"].as_str().map(|s| s.to_string()),
+                    avg_rating: node["avgRating"].as_f64().map(|v| v as f32),
+                    avg_difficulty: node["avgDifficulty"].as_f64().map(|v| v as f32),
+                    num_ratings: node["numRatings"].as_i64().unwrap_or(0) as i32,
+                    would_take_again_pct: wta,
+                });
+            }
+
+            let page_info = &teachers["pageInfo"];
+            let has_next = page_info["hasNextPage"].as_bool().unwrap_or(false);
+
+            if !has_next {
+                break;
+            }
+
+            cursor = page_info["endCursor"].as_str().map(|s| s.to_string());
+
+            debug!(fetched = all.len(), "RMP pagination: fetching next page");
+        }
+
+        info!(total = all.len(), "Fetched all RMP professors");
+        Ok(all)
+    }
+}

src/scraper/mod.rs

@@ -4,10 +4,11 @@ pub mod worker;
 
 use crate::banner::BannerApi;
 use crate::services::Service;
+use crate::state::ReferenceCache;
 use crate::status::{ServiceStatus, ServiceStatusRegistry};
 use sqlx::PgPool;
 use std::sync::Arc;
-use tokio::sync::broadcast;
+use tokio::sync::{RwLock, broadcast};
 use tokio::task::JoinHandle;
 use tracing::{info, warn};
 
@@ -21,6 +22,7 @@ use self::worker::Worker;
 pub struct ScraperService {
     db_pool: PgPool,
     banner_api: Arc<BannerApi>,
+    reference_cache: Arc<RwLock<ReferenceCache>>,
     service_statuses: ServiceStatusRegistry,
     scheduler_handle: Option<JoinHandle<()>>,
     worker_handles: Vec<JoinHandle<()>>,
@@ -29,10 +31,16 @@ pub struct ScraperService {
 
 impl ScraperService {
     /// Creates a new `ScraperService`.
-    pub fn new(db_pool: PgPool, banner_api: Arc<BannerApi>, service_statuses: ServiceStatusRegistry) -> Self {
+    pub fn new(
+        db_pool: PgPool,
+        banner_api: Arc<BannerApi>,
+        reference_cache: Arc<RwLock<ReferenceCache>>,
+        service_statuses: ServiceStatusRegistry,
+    ) -> Self {
         Self {
             db_pool,
             banner_api,
+            reference_cache,
             service_statuses,
             scheduler_handle: None,
             worker_handles: Vec::new(),
@@ -48,7 +56,11 @@ impl ScraperService {
         let (shutdown_tx, _) = broadcast::channel(1);
         self.shutdown_tx = Some(shutdown_tx.clone());
 
-        let scheduler = Scheduler::new(self.db_pool.clone(), self.banner_api.clone());
+        let scheduler = Scheduler::new(
+            self.db_pool.clone(),
+            self.banner_api.clone(),
+            self.reference_cache.clone(),
+        );
         let shutdown_rx = shutdown_tx.subscribe();
         let scheduler_handle = tokio::spawn(async move {
             scheduler.run(shutdown_rx).await;
@@ -86,7 +98,8 @@ impl Service for ScraperService {
     }
 
     async fn shutdown(&mut self) -> Result<(), anyhow::Error> {
-        self.service_statuses.set("scraper", ServiceStatus::Disabled);
+        self.service_statuses
+            .set("scraper", ServiceStatus::Disabled);
         info!("Shutting down scraper service");
 
         // Send shutdown signal to all tasks

src/scraper/scheduler.rs

@@ -1,28 +1,42 @@
 use crate::banner::{BannerApi, Term};
-use crate::data::models::{ScrapePriority, TargetType};
+use crate::data::models::{ReferenceData, ScrapePriority, TargetType};
 use crate::data::scrape_jobs;
 use crate::error::Result;
+use crate::rmp::RmpClient;
 use crate::scraper::jobs::subject::SubjectJob;
+use crate::state::ReferenceCache;
 use serde_json::json;
 use sqlx::PgPool;
 use std::sync::Arc;
-use std::time::Duration;
-use tokio::sync::broadcast;
+use std::time::{Duration, Instant};
+use tokio::sync::{RwLock, broadcast};
 use tokio::time;
 use tokio_util::sync::CancellationToken;
 use tracing::{debug, error, info, warn};
 
+/// How often reference data is re-scraped (6 hours).
+const REFERENCE_DATA_INTERVAL: Duration = Duration::from_secs(6 * 60 * 60);
+
+/// How often RMP data is synced (24 hours).
+const RMP_SYNC_INTERVAL: Duration = Duration::from_secs(24 * 60 * 60);
+
 /// Periodically analyzes data and enqueues prioritized scrape jobs.
 pub struct Scheduler {
     db_pool: PgPool,
     banner_api: Arc<BannerApi>,
+    reference_cache: Arc<RwLock<ReferenceCache>>,
 }
 
 impl Scheduler {
-    pub fn new(db_pool: PgPool, banner_api: Arc<BannerApi>) -> Self {
+    pub fn new(
+        db_pool: PgPool,
+        banner_api: Arc<BannerApi>,
+        reference_cache: Arc<RwLock<ReferenceCache>>,
+    ) -> Self {
         Self {
             db_pool,
             banner_api,
+            reference_cache,
         }
     }
 
@@ -41,33 +55,68 @@ impl Scheduler {
         let work_interval = Duration::from_secs(60);
         let mut next_run = time::Instant::now();
         let mut current_work: Option<(tokio::task::JoinHandle<()>, CancellationToken)> = None;
+        // Scrape reference data immediately on first cycle
+        let mut last_ref_scrape = Instant::now() - REFERENCE_DATA_INTERVAL;
+        // Sync RMP data immediately on first cycle
+        let mut last_rmp_sync = Instant::now() - RMP_SYNC_INTERVAL;
 
         loop {
             tokio::select! {
                 _ = time::sleep_until(next_run) => {
                     let cancel_token = CancellationToken::new();
 
+                    let should_scrape_ref = last_ref_scrape.elapsed() >= REFERENCE_DATA_INTERVAL;
+                    let should_sync_rmp = last_rmp_sync.elapsed() >= RMP_SYNC_INTERVAL;
+
                     // Spawn work in separate task to allow graceful cancellation during shutdown.
-                    // Without this, shutdown would have to wait for the full scheduling cycle.
                     let work_handle = tokio::spawn({
                         let db_pool = self.db_pool.clone();
                         let banner_api = self.banner_api.clone();
                         let cancel_token = cancel_token.clone();
+                        let reference_cache = self.reference_cache.clone();
 
-                        async move {
-                            tokio::select! {
-                                result = Self::schedule_jobs_impl(&db_pool, &banner_api) => {
-                                    if let Err(e) = result {
-                                        error!(error = ?e, "Failed to schedule jobs");
+                                async move {
+                                    tokio::select! {
+                                        _ = async {
+                                            // RMP sync is independent of Banner API — run it
+                                            // concurrently with reference data scraping so it
+                                            // doesn't wait behind rate-limited Banner calls.
+                                            let rmp_fut = async {
+                                                if should_sync_rmp
+                                                    && let Err(e) = Self::sync_rmp_data(&db_pool).await
+                                                {
+                                                    error!(error = ?e, "Failed to sync RMP data");
+                                                }
+                                            };
+
+                                            let ref_fut = async {
+                                                if should_scrape_ref
+                                                    && let Err(e) = Self::scrape_reference_data(&db_pool, &banner_api, &reference_cache).await
+                                                {
+                                                    error!(error = ?e, "Failed to scrape reference data");
+                                                }
+                                            };
+
+                                            tokio::join!(rmp_fut, ref_fut);
+
+                                            if let Err(e) = Self::schedule_jobs_impl(&db_pool, &banner_api).await {
+                                                error!(error = ?e, "Failed to schedule jobs");
+                                            }
+                                        } => {}
+                                        _ = cancel_token.cancelled() => {
+                                            debug!("Scheduling work cancelled gracefully");
+                                        }
                                     }
                                 }
-                                _ = cancel_token.cancelled() => {
-                                    debug!("Scheduling work cancelled gracefully");
-                                }
-                            }
-                        }
                     });
 
+                    if should_scrape_ref {
+                        last_ref_scrape = Instant::now();
+                    }
+                    if should_sync_rmp {
+                        last_rmp_sync = Instant::now();
+                    }
+
                     current_work = Some((work_handle, cancel_token));
                     next_run = time::Instant::now() + work_interval;
                 }
@@ -170,4 +219,126 @@ impl Scheduler {
         debug!("Job scheduling complete");
         Ok(())
     }
+
+    /// Fetch all RMP professors, upsert to DB, and auto-match against Banner instructors.
+    #[tracing::instrument(skip_all)]
+    async fn sync_rmp_data(db_pool: &PgPool) -> Result<()> {
+        info!("Starting RMP data sync");
+
+        let client = RmpClient::new();
+        let professors = client.fetch_all_professors().await?;
+        let total = professors.len();
+
+        crate::data::rmp::batch_upsert_rmp_professors(&professors, db_pool).await?;
+        info!(total, "RMP professors upserted");
+
+        let matched = crate::data::rmp::auto_match_instructors(db_pool).await?;
+        info!(total, matched, "RMP sync complete");
+
+        Ok(())
+    }
+
+    /// Scrape all reference data categories from Banner and upsert to DB, then refresh cache.
+    #[tracing::instrument(skip_all)]
+    async fn scrape_reference_data(
+        db_pool: &PgPool,
+        banner_api: &BannerApi,
+        reference_cache: &Arc<RwLock<ReferenceCache>>,
+    ) -> Result<()> {
+        let term = Term::get_current().inner().to_string();
+        info!(term = %term, "Scraping reference data");
+
+        let mut all_entries = Vec::new();
+
+        // Terms (fetched via session pool, no active session needed)
+        match banner_api.sessions.get_terms("", 1, 500).await {
+            Ok(terms) => {
+                debug!(count = terms.len(), "Fetched terms");
+                all_entries.extend(terms.into_iter().map(|t| ReferenceData {
+                    category: "term".to_string(),
+                    code: t.code,
+                    description: t.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch terms"),
+        }
+
+        // Subjects
+        match banner_api.get_subjects("", &term, 1, 500).await {
+            Ok(pairs) => {
+                debug!(count = pairs.len(), "Fetched subjects");
+                all_entries.extend(pairs.into_iter().map(|p| ReferenceData {
+                    category: "subject".to_string(),
+                    code: p.code,
+                    description: p.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch subjects"),
+        }
+
+        // Campuses
+        match banner_api.get_campuses(&term).await {
+            Ok(pairs) => {
+                debug!(count = pairs.len(), "Fetched campuses");
+                all_entries.extend(pairs.into_iter().map(|p| ReferenceData {
+                    category: "campus".to_string(),
+                    code: p.code,
+                    description: p.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch campuses"),
+        }
+
+        // Instructional methods
+        match banner_api.get_instructional_methods(&term).await {
+            Ok(pairs) => {
+                debug!(count = pairs.len(), "Fetched instructional methods");
+                all_entries.extend(pairs.into_iter().map(|p| ReferenceData {
+                    category: "instructional_method".to_string(),
+                    code: p.code,
+                    description: p.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch instructional methods"),
+        }
+
+        // Parts of term
+        match banner_api.get_parts_of_term(&term).await {
+            Ok(pairs) => {
+                debug!(count = pairs.len(), "Fetched parts of term");
+                all_entries.extend(pairs.into_iter().map(|p| ReferenceData {
+                    category: "part_of_term".to_string(),
+                    code: p.code,
+                    description: p.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch parts of term"),
+        }
+
+        // Attributes
+        match banner_api.get_attributes(&term).await {
+            Ok(pairs) => {
+                debug!(count = pairs.len(), "Fetched attributes");
+                all_entries.extend(pairs.into_iter().map(|p| ReferenceData {
+                    category: "attribute".to_string(),
+                    code: p.code,
+                    description: p.description,
+                }));
+            }
+            Err(e) => warn!(error = ?e, "Failed to fetch attributes"),
+        }
+
+        // Batch upsert all entries
+        let total = all_entries.len();
+        crate::data::reference::batch_upsert(&all_entries, db_pool).await?;
+        info!(total_entries = total, "Reference data upserted to DB");
+
+        // Refresh in-memory cache
+        let all = crate::data::reference::get_all(db_pool).await?;
+        let count = all.len();
+        *reference_cache.write().await = ReferenceCache::from_entries(all);
+        info!(entries = count, "Reference cache refreshed");
+
+        Ok(())
+    }
 }

src/services/web.rs

@@ -23,10 +23,7 @@ impl WebService {
         }
     }
     /// Periodically pings the database and updates the "database" service status.
-    async fn db_health_check_loop(
-        state: AppState,
-        mut shutdown_rx: broadcast::Receiver<()>,
-    ) {
+    async fn db_health_check_loop(state: AppState, mut shutdown_rx: broadcast::Receiver<()>) {
         use std::time::Duration;
         let mut interval = tokio::time::interval(Duration::from_secs(30));
 
@@ -66,7 +63,9 @@ impl Service for WebService {
         let addr = SocketAddr::from(([0, 0, 0, 0], self.port));
 
         let listener = TcpListener::bind(addr).await?;
-        self.app_state.service_statuses.set("web", ServiceStatus::Active);
+        self.app_state
+            .service_statuses
+            .set("web", ServiceStatus::Active);
         info!(
             service = "web",
             address = %addr,

src/state.rs

@@ -2,16 +2,71 @@
 
 use crate::banner::BannerApi;
 use crate::banner::Course;
+use crate::data::models::ReferenceData;
 use crate::status::ServiceStatusRegistry;
 use anyhow::Result;
 use sqlx::PgPool;
+use std::collections::HashMap;
 use std::sync::Arc;
+use tokio::sync::RwLock;
+
+/// In-memory cache for reference data (code→description lookups).
+///
+/// Loaded from the `reference_data` table on startup and refreshed periodically.
+pub struct ReferenceCache {
+    /// `(category, code)` → `description`
+    data: HashMap<(String, String), String>,
+}
+
+impl Default for ReferenceCache {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl ReferenceCache {
+    /// Create an empty cache.
+    pub fn new() -> Self {
+        Self {
+            data: HashMap::new(),
+        }
+    }
+
+    /// 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();
+        Self { data }
+    }
+
+    /// Look up a description by category and code.
+    pub fn lookup(&self, category: &str, code: &str) -> Option<&str> {
+        self.data
+            .get(&(category.to_string(), code.to_string()))
+            .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
+            .iter()
+            .filter(|((cat, _), _)| cat == category)
+            .map(|((_, code), desc)| (code.as_str(), desc.as_str()))
+            .collect();
+        entries.sort_by(|a, b| a.1.cmp(b.1));
+        entries
+    }
+}
 
 #[derive(Clone)]
 pub struct AppState {
     pub banner_api: Arc<BannerApi>,
     pub db_pool: PgPool,
     pub service_statuses: ServiceStatusRegistry,
+    pub reference_cache: Arc<RwLock<ReferenceCache>>,
 }
 
 impl AppState {
@@ -20,9 +75,20 @@ impl AppState {
             banner_api,
             db_pool,
             service_statuses: ServiceStatusRegistry::new(),
+            reference_cache: Arc::new(RwLock::new(ReferenceCache::new())),
         }
     }
 
+    /// Initialize the reference cache from the database.
+    pub async fn load_reference_cache(&self) -> Result<()> {
+        let entries = crate::data::reference::get_all(&self.db_pool).await?;
+        let count = entries.len();
+        let cache = ReferenceCache::from_entries(entries);
+        *self.reference_cache.write().await = cache;
+        tracing::info!(entries = count, "Reference cache loaded");
+        Ok(())
+    }
+
     /// Get a course by CRN directly from Banner API
     pub async fn get_course_or_fetch(&self, term: &str, crn: &str) -> Result<Course> {
         self.banner_api

src/status.rs

@@ -3,10 +3,12 @@ use std::time::Instant;
 
 use dashmap::DashMap;
 use serde::Serialize;
+use ts_rs::TS;
 
 /// Health status of a service.
-#[derive(Debug, Clone, Serialize, PartialEq)]
+#[derive(Debug, Clone, Serialize, PartialEq, TS)]
 #[serde(rename_all = "lowercase")]
+#[ts(export)]
 pub enum ServiceStatus {
     Starting,
     Active,

src/web/routes.rs

@@ -3,7 +3,8 @@
 use axum::{
     Router,
     body::Body,
-    extract::{Request, State},
+    extract::{Path, Query, Request, State},
+    http::StatusCode as AxumStatusCode,
     response::{Json, Response},
     routing::get,
 };
@@ -14,9 +15,10 @@ use axum::{
 };
 #[cfg(feature = "embed-assets")]
 use http::header;
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};
 use std::{collections::BTreeMap, time::Duration};
+use ts_rs::TS;
 
 use crate::state::AppState;
 use crate::status::ServiceStatus;
@@ -71,6 +73,11 @@ pub fn create_router(app_state: AppState) -> Router {
         .route("/health", get(health))
         .route("/status", get(status))
         .route("/metrics", get(metrics))
+        .route("/courses/search", get(search_courses))
+        .route("/courses/{term}/{crn}", get(get_course))
+        .route("/terms", get(get_terms))
+        .route("/subjects", get(get_subjects))
+        .route("/reference/{category}", get(get_reference))
         .with_state(app_state);
 
     let mut router = Router::new().nest("/api", api_router);
@@ -221,14 +228,16 @@ async fn health() -> Json<Value> {
     }))
 }
 
-#[derive(Serialize)]
-struct ServiceInfo {
+#[derive(Serialize, TS)]
+#[ts(export)]
+pub struct ServiceInfo {
     name: String,
     status: ServiceStatus,
 }
 
-#[derive(Serialize)]
-struct StatusResponse {
+#[derive(Serialize, TS)]
+#[ts(export)]
+pub struct StatusResponse {
     status: ServiceStatus,
     version: String,
     commit: String,
@@ -249,7 +258,10 @@ async fn status(State(state): State<AppState>) -> Json<StatusResponse> {
         );
     }
 
-    let overall_status = if services.values().any(|s| matches!(s.status, ServiceStatus::Error)) {
+    let overall_status = if services
+        .values()
+        .any(|s| matches!(s.status, ServiceStatus::Error))
+    {
         ServiceStatus::Error
     } else if !services.is_empty()
         && services
@@ -281,3 +293,344 @@ async fn metrics() -> Json<Value> {
         "timestamp": chrono::Utc::now().to_rfc3339()
     }))
 }
+
+// ============================================================
+// Course search & detail API
+// ============================================================
+
+#[derive(Deserialize)]
+struct SearchParams {
+    term: String,
+    subject: Option<String>,
+    q: Option<String>,
+    course_number_low: Option<i32>,
+    course_number_high: Option<i32>,
+    #[serde(default)]
+    open_only: bool,
+    instructional_method: Option<String>,
+    campus: Option<String>,
+    #[serde(default = "default_limit")]
+    limit: i32,
+    #[serde(default)]
+    offset: i32,
+    sort_by: Option<SortColumn>,
+    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,
+}
+
+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)]
+pub struct CourseResponse {
+    crn: String,
+    subject: String,
+    course_number: String,
+    title: String,
+    term_code: String,
+    sequence_number: Option<String>,
+    instructional_method: Option<String>,
+    campus: Option<String>,
+    enrollment: i32,
+    max_enrollment: i32,
+    wait_count: i32,
+    wait_capacity: i32,
+    credit_hours: Option<i32>,
+    credit_hour_low: Option<i32>,
+    credit_hour_high: Option<i32>,
+    cross_list: Option<String>,
+    cross_list_capacity: Option<i32>,
+    cross_list_count: Option<i32>,
+    link_identifier: Option<String>,
+    is_section_linked: Option<bool>,
+    part_of_term: Option<String>,
+    meeting_times: Vec<crate::data::models::DbMeetingTime>,
+    attributes: Vec<String>,
+    instructors: Vec<InstructorResponse>,
+}
+
+#[derive(Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct InstructorResponse {
+    banner_id: String,
+    display_name: String,
+    email: Option<String>,
+    is_primary: bool,
+    rmp_rating: Option<f32>,
+    rmp_num_ratings: Option<i32>,
+}
+
+#[derive(Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct SearchResponse {
+    courses: Vec<CourseResponse>,
+    total_count: i32,
+    offset: i32,
+    limit: i32,
+}
+
+#[derive(Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct CodeDescription {
+    code: String,
+    description: String,
+}
+
+/// Build a `CourseResponse` from a DB course, fetching its instructors.
+async fn build_course_response(
+    course: &crate::data::models::Course,
+    db_pool: &sqlx::PgPool,
+) -> CourseResponse {
+    let instructors = crate::data::courses::get_course_instructors(db_pool, course.id)
+        .await
+        .unwrap_or_default()
+        .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,
+                }
+            },
+        )
+        .collect();
+
+    CourseResponse {
+        crn: course.crn.clone(),
+        subject: course.subject.clone(),
+        course_number: course.course_number.clone(),
+        title: course.title.clone(),
+        term_code: course.term_code.clone(),
+        sequence_number: course.sequence_number.clone(),
+        instructional_method: course.instructional_method.clone(),
+        campus: course.campus.clone(),
+        enrollment: course.enrollment,
+        max_enrollment: course.max_enrollment,
+        wait_count: course.wait_count,
+        wait_capacity: course.wait_capacity,
+        credit_hours: course.credit_hours,
+        credit_hour_low: course.credit_hour_low,
+        credit_hour_high: course.credit_hour_high,
+        cross_list: course.cross_list.clone(),
+        cross_list_capacity: course.cross_list_capacity,
+        cross_list_count: course.cross_list_count,
+        link_identifier: course.link_identifier.clone(),
+        is_section_linked: course.is_section_linked,
+        part_of_term: course.part_of_term.clone(),
+        meeting_times: serde_json::from_value(course.meeting_times.clone()).unwrap_or_default(),
+        attributes: serde_json::from_value(course.attributes.clone()).unwrap_or_default(),
+        instructors,
+    }
+}
+
+/// `GET /api/courses/search`
+async fn search_courses(
+    State(state): State<AppState>,
+    Query(params): 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(),
+        params.q.as_deref(),
+        params.course_number_low,
+        params.course_number_high,
+        params.open_only,
+        params.instructional_method.as_deref(),
+        params.campus.as_deref(),
+        limit,
+        offset,
+        &order_by,
+    )
+    .await
+    .map_err(|e| {
+        tracing::error!(error = %e, "Course search failed");
+        (
+            AxumStatusCode::INTERNAL_SERVER_ERROR,
+            "Search failed".to_string(),
+        )
+    })?;
+
+    let mut course_responses = Vec::with_capacity(courses.len());
+    for course in &courses {
+        course_responses.push(build_course_response(course, &state.db_pool).await);
+    }
+
+    Ok(Json(SearchResponse {
+        courses: course_responses,
+        total_count: total_count as i32,
+        offset,
+        limit,
+    }))
+}
+
+/// `GET /api/courses/:term/:crn`
+async fn get_course(
+    State(state): State<AppState>,
+    Path((term, crn)): Path<(String, String)>,
+) -> Result<Json<CourseResponse>, (AxumStatusCode, String)> {
+    let course = crate::data::courses::get_course_by_crn(&state.db_pool, &crn, &term)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "Course lookup failed");
+            (
+                AxumStatusCode::INTERNAL_SERVER_ERROR,
+                "Lookup failed".to_string(),
+            )
+        })?
+        .ok_or_else(|| (AxumStatusCode::NOT_FOUND, "Course not found".to_string()))?;
+
+    Ok(Json(build_course_response(&course, &state.db_pool).await))
+}
+
+/// `GET /api/terms`
+async fn get_terms(
+    State(state): State<AppState>,
+) -> Result<Json<Vec<CodeDescription>>, (AxumStatusCode, String)> {
+    let cache = state.reference_cache.read().await;
+    let term_codes = crate::data::courses::get_available_terms(&state.db_pool)
+        .await
+        .map_err(|e| {
+            tracing::error!(error = %e, "Failed to get terms");
+            (
+                AxumStatusCode::INTERNAL_SERVER_ERROR,
+                "Failed to get terms".to_string(),
+            )
+        })?;
+
+    let terms: Vec<CodeDescription> = term_codes
+        .into_iter()
+        .map(|code| {
+            let description = cache
+                .lookup("term", &code)
+                .unwrap_or("Unknown Term")
+                .to_string();
+            CodeDescription { code, description }
+        })
+        .collect();
+
+    Ok(Json(terms))
+}
+
+/// `GET /api/subjects?term=202420`
+async fn get_subjects(
+    State(state): State<AppState>,
+) -> Result<Json<Vec<CodeDescription>>, (AxumStatusCode, String)> {
+    let cache = state.reference_cache.read().await;
+    let entries = cache.entries_for_category("subject");
+
+    let subjects: Vec<CodeDescription> = entries
+        .into_iter()
+        .map(|(code, description)| CodeDescription {
+            code: code.to_string(),
+            description: description.to_string(),
+        })
+        .collect();
+
+    Ok(Json(subjects))
+}
+
+/// `GET /api/reference/:category`
+async fn get_reference(
+    State(state): State<AppState>,
+    Path(category): Path<String>,
+) -> Result<Json<Vec<CodeDescription>>, (AxumStatusCode, String)> {
+    let cache = state.reference_cache.read().await;
+    let entries = cache.entries_for_category(&category);
+
+    if entries.is_empty() {
+        // Fall back to DB query in case cache doesn't have this category
+        drop(cache);
+        let rows = crate::data::reference::get_by_category(&category, &state.db_pool)
+            .await
+            .map_err(|e| {
+                tracing::error!(error = %e, category = %category, "Reference lookup failed");
+                (
+                    AxumStatusCode::INTERNAL_SERVER_ERROR,
+                    "Lookup failed".to_string(),
+                )
+            })?;
+
+        return Ok(Json(
+            rows.into_iter()
+                .map(|r| CodeDescription {
+                    code: r.code,
+                    description: r.description,
+                })
+                .collect(),
+        ));
+    }
+
+    Ok(Json(
+        entries
+            .into_iter()
+            .map(|(code, desc)| CodeDescription {
+                code: code.to_string(),
+                description: desc.to_string(),
+            })
+            .collect(),
+    ))
+}

web/.gitignore

@@ -5,5 +5,4 @@ dist-ssr
 *.local
 count.txt
 .env
-.nitro
-.tanstack
+.svelte-kit

web/biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist/", "node_modules/", ".tanstack/"]
+    "ignore": ["dist/", "node_modules/", ".svelte-kit/"]
   },
   "formatter": {
     "enabled": true,

web/eslint.config.js

@@ -1,60 +0,0 @@
-import js from "@eslint/js";
-import tseslint from "typescript-eslint";
-import react from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-
-export default tseslint.config(
-  // Ignore generated files and build outputs
-  {
-    ignores: ["dist", "node_modules", "src/routeTree.gen.ts", "*.config.js"],
-  },
-  // Base configs
-  js.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  // React plugin configuration
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      react,
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    languageOptions: {
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname,
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    settings: {
-      react: {
-        version: "19.0",
-      },
-    },
-    rules: {
-      // React rules
-      ...react.configs.recommended.rules,
-      ...react.configs["jsx-runtime"].rules,
-      ...reactHooks.configs.recommended.rules,
-
-      // React Refresh
-      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
-
-      // TypeScript overrides
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-        },
-      ],
-      "@typescript-eslint/no-explicit-any": "warn",
-
-      // Disable prop-types since we're using TypeScript
-      "react/prop-types": "off",
-    },
-  }
-);

web/index.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Banner, a Discord bot and web interface for UTSA Course Monitoring"
-    />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <title>Banner</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

web/package.json

@@ -3,48 +3,37 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
-    "start": "vite --port 3000",
-    "build": "vite build && tsc",
-    "serve": "vite preview",
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
-    "lint": "tsc && eslint . --ext .ts,.tsx",
-    "typecheck": "tsc --noEmit",
     "format": "biome format --write .",
     "format:check": "biome format ."
   },
-  "dependencies": {
-    "@radix-ui/themes": "^3.2.1",
-    "@tanstack/react-devtools": "^0.2.2",
-    "@tanstack/react-router": "^1.157.16",
-    "@tanstack/react-router-devtools": "^1.157.16",
-    "@tanstack/router-plugin": "^1.157.16",
-    "lucide-react": "^0.544.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-timeago": "^8.3.0",
-    "recharts": "^3.7.0"
-  },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@eslint/js": "^9.39.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.10.9",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.3.4",
-    "baseline-browser-mapping": "^2.9.19",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
+    "@fontsource-variable/inter": "^5.2.5",
+    "@lucide/svelte": "^0.563.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/table-core": "^8.21.3",
+    "@types/node": "^25.1.0",
+    "bits-ui": "^1.3.7",
+    "clsx": "^2.1.1",
     "jsdom": "^26.0.0",
+    "svelte": "^5.19.0",
+    "svelte-check": "^4.1.4",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.54.0",
     "vite": "^6.3.5",
-    "vitest": "^3.0.5",
-    "web-vitals": "^4.2.4"
+    "vitest": "^3.0.5"
+  },
+  "dependencies": {
+    "overlayscrollbars": "^2.14.0",
+    "overlayscrollbars-svelte": "^0.5.5"
   }
 }

web/src/App.css

@@ -1,54 +0,0 @@
-.App {
-  min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.2;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-.animate-pulse {
-  animation: pulse 2s ease-in-out infinite;
-}
-
-/* Theme toggle button */
-.theme-toggle {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  margin: 4px;
-  padding: 7px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gray-11);
-  transition: background-color 0.2s, color 0.2s;
-  transform: scale(1.25);
-}
-
-.theme-toggle:hover {
-  background-color: var(--gray-4);
-}
-
-/* Screen reader only text */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

web/src/app.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+declare const __APP_VERSION__: string;
+
+declare namespace App {
+  // interface Error {}
+  // interface Locals {}
+  // interface PageData {}
+  // interface PageState {}
+  // interface Platform {}
+}

web/src/app.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Banner, a Discord bot and web interface for UTSA Course Monitoring"
+    />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/logo192.png" />
+    <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+    <title>Banner</title>
+    <script>
+      (function () {
+        var stored = localStorage.getItem("theme");
+        var isDark =
+          stored === "dark" ||
+          (stored !== "light" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (isDark) {
+          document.documentElement.classList.add("dark");
+        }
+      })();
+    </script>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

web/src/components/ThemeToggle.tsx

@@ -1,36 +0,0 @@
-import { Button } from "@radix-ui/themes";
-import { Monitor, Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useMemo } from "react";
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-
-  const nextTheme = useMemo(() => {
-    switch (theme) {
-      case "light":
-        return "dark";
-      case "dark":
-        return "system";
-      case "system":
-        return "light";
-      default:
-        console.error(`Invalid theme: ${theme}`);
-        return "system";
-    }
-  }, [theme]);
-
-  const icon = useMemo(() => {
-    if (nextTheme === "system") {
-      return <Monitor size={18} />;
-    }
-    return nextTheme === "dark" ? <Moon size={18} /> : <Sun size={18} />;
-  }, [nextTheme]);
-
-  return (
-    <Button variant="ghost" size="3" onClick={() => setTheme(nextTheme)} className="theme-toggle">
-      {icon}
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  );
-}

web/src/lib/api.test.ts

@@ -1,7 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { BannerApiClient } from "./api";
 
-// Mock fetch
 global.fetch = vi.fn();
 
 describe("BannerApiClient", () => {
@@ -62,4 +61,101 @@ describe("BannerApiClient", () => {
       "API request failed: 500 Internal Server Error"
     );
   });
+
+  it("should search courses with all params", async () => {
+    const mockResponse = {
+      courses: [],
+      totalCount: 0,
+      offset: 0,
+      limit: 25,
+    };
+
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockResponse),
+    } as Response);
+
+    const result = await apiClient.searchCourses({
+      term: "202420",
+      subject: "CS",
+      q: "data",
+      open_only: true,
+      limit: 25,
+      offset: 50,
+    });
+
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/courses/search?term=202420&subject=CS&q=data&open_only=true&limit=25&offset=50"
+    );
+    expect(result).toEqual(mockResponse);
+  });
+
+  it("should search courses with minimal params", async () => {
+    const mockResponse = {
+      courses: [],
+      totalCount: 0,
+      offset: 0,
+      limit: 25,
+    };
+
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockResponse),
+    } as Response);
+
+    await apiClient.searchCourses({ term: "202420" });
+
+    expect(fetch).toHaveBeenCalledWith("/api/courses/search?term=202420");
+  });
+
+  it("should fetch terms", async () => {
+    const mockTerms = [
+      { code: "202420", description: "Fall 2024" },
+      { code: "202510", description: "Spring 2025" },
+    ];
+
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockTerms),
+    } as Response);
+
+    const result = await apiClient.getTerms();
+
+    expect(fetch).toHaveBeenCalledWith("/api/terms");
+    expect(result).toEqual(mockTerms);
+  });
+
+  it("should fetch subjects for a term", async () => {
+    const mockSubjects = [
+      { code: "CS", description: "Computer Science" },
+      { code: "MAT", description: "Mathematics" },
+    ];
+
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockSubjects),
+    } as Response);
+
+    const result = await apiClient.getSubjects("202420");
+
+    expect(fetch).toHaveBeenCalledWith("/api/subjects?term=202420");
+    expect(result).toEqual(mockSubjects);
+  });
+
+  it("should fetch reference data", async () => {
+    const mockRef = [
+      { code: "F", description: "Face to Face" },
+      { code: "OL", description: "Online" },
+    ];
+
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockRef),
+    } as Response);
+
+    const result = await apiClient.getReference("instructional_methods");
+
+    expect(fetch).toHaveBeenCalledWith("/api/reference/instructional_methods");
+    expect(result).toEqual(mockRef);
+  });
 });

web/src/lib/api.ts

@@ -1,25 +1,41 @@
-// API client for Banner backend
+import type {
+  CodeDescription,
+  CourseResponse,
+  DbMeetingTime,
+  InstructorResponse,
+  SearchResponse as SearchResponseGenerated,
+  ServiceInfo,
+  ServiceStatus,
+  StatusResponse,
+} from "$lib/bindings";
+
 const API_BASE_URL = "/api";
 
+// Re-export generated types under their canonical names
+export type {
+  CodeDescription,
+  CourseResponse,
+  DbMeetingTime,
+  InstructorResponse,
+  ServiceInfo,
+  ServiceStatus,
+  StatusResponse,
+};
+
+// Semantic aliases — these all share the CodeDescription shape
+export type Term = CodeDescription;
+export type Subject = CodeDescription;
+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 type Status = "starting" | "active" | "connected" | "disabled" | "error";
-
-export interface ServiceInfo {
-  name: string;
-  status: Status;
-}
-
-export interface StatusResponse {
-  status: Status;
-  version: string;
-  commit: string;
-  services: Record<string, ServiceInfo>;
-}
-
 export interface MetricsResponse {
   banner_api: {
     status: string;
@@ -27,15 +43,32 @@ export interface MetricsResponse {
   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 SearchParams {
+  term: string;
+  subject?: string;
+  q?: string;
+  open_only?: boolean;
+  limit?: number;
+  offset?: number;
+  sort_by?: SortColumn;
+  sort_dir?: SortDirection;
+}
+
 export class BannerApiClient {
   private baseUrl: string;
+  private fetchFn: typeof fetch;
 
-  constructor(baseUrl: string = API_BASE_URL) {
+  constructor(baseUrl: string = API_BASE_URL, fetchFn: typeof fetch = fetch) {
     this.baseUrl = baseUrl;
+    this.fetchFn = fetchFn;
   }
 
   private async request<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.baseUrl}${endpoint}`);
+    const response = await this.fetchFn(`${this.baseUrl}${endpoint}`);
 
     if (!response.ok) {
       throw new Error(`API request failed: ${response.status} ${response.statusText}`);
@@ -55,7 +88,31 @@ export class BannerApiClient {
   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.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));
+    if (params.offset !== undefined) query.set("offset", String(params.offset));
+    if (params.sort_by) query.set("sort_by", params.sort_by);
+    if (params.sort_dir) query.set("sort_dir", params.sort_dir);
+    return this.request<SearchResponse>(`/courses/search?${query.toString()}`);
+  }
+
+  async getTerms(): Promise<Term[]> {
+    return this.request<Term[]>("/terms");
+  }
+
+  async getSubjects(termCode: string): Promise<Subject[]> {
+    return this.request<Subject[]>(`/subjects?term=${encodeURIComponent(termCode)}`);
+  }
+
+  async getReference(category: string): Promise<ReferenceEntry[]> {
+    return this.request<ReferenceEntry[]>(`/reference/${encodeURIComponent(category)}`);
+  }
 }
 
-// Export a default instance
 export const client = new BannerApiClient();

web/src/lib/components/CourseDetail.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+import type { CourseResponse } from "$lib/api";
+import {
+  formatTime,
+  formatCreditHours,
+  formatDate,
+  formatMeetingDaysLong,
+  isMeetingTimeTBA,
+  isTimeTBA,
+} from "$lib/course";
+import { Tooltip } from "bits-ui";
+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);
+}
+</script>
+
+<div class="bg-muted/60 p-5 text-sm border-b border-border">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+    <!-- Instructors -->
+    <div>
+      <h4 class="text-sm text-foreground mb-2">
+        Instructors
+      </h4>
+      {#if course.instructors.length > 0}
+        <div class="flex flex-wrap gap-1.5">
+          {#each course.instructors as instructor}
+            <Tooltip.Root delayDuration={200}>
+              <Tooltip.Trigger>
+                <span
+                  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}
+                    <span
+                      class="text-[10px] font-semibold {rating >= 4.0 ? 'text-status-green' : rating >= 3.0 ? 'text-yellow-500' : 'text-status-red'}"
+                    >{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"
+              >
+                <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}
+                    <div class="text-muted-foreground">
+                      {(instructor.rmpRating as number).toFixed(1)}/5 ({(instructor as any).rmpNumRatings ?? 0} ratings)
+                    </div>
+                  {/if}
+                  {#if instructor.email}
+                    <button
+                      onclick={(e) => copyEmail(instructor.email!, e)}
+                      class="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                    >
+                      {#if copiedEmail === instructor.email}
+                        <Check class="size-3" />
+                        <span>Copied!</span>
+                      {:else}
+                        <Copy class="size-3" />
+                        <span>{instructor.email}</span>
+                      {/if}
+                    </button>
+                  {/if}
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {/each}
+        </div>
+      {:else}
+        <span class="text-muted-foreground italic">Staff</span>
+      {/if}
+    </div>
+
+    <!-- Meeting Times -->
+    <div>
+      <h4 class="text-sm text-foreground mb-2">
+        Meeting Times
+      </h4>
+      {#if course.meetingTimes.length > 0}
+        <ul class="space-y-2">
+          {#each course.meetingTimes as mt}
+            <li>
+              {#if isMeetingTimeTBA(mt) && isTimeTBA(mt)}
+                <span class="italic text-muted-foreground">TBA</span>
+              {:else}
+                <div class="flex items-baseline gap-1.5">
+                  {#if !isMeetingTimeTBA(mt)}
+                    <span class="font-medium text-foreground">
+                      {formatMeetingDaysLong(mt)}
+                    </span>
+                  {/if}
+                  {#if !isTimeTBA(mt)}
+                    <span class="text-muted-foreground">
+                      {formatTime(mt.begin_time)}&ndash;{formatTime(mt.end_time)}
+                    </span>
+                  {:else}
+                    <span class="italic text-muted-foreground">Time TBA</span>
+                  {/if}
+                </div>
+              {/if}
+              {#if mt.building || mt.room}
+                <div class="text-xs text-muted-foreground mt-0.5">
+                  {mt.building_description ?? mt.building}{mt.room ? ` ${mt.room}` : ""}
+                </div>
+              {/if}
+              <div class="text-xs text-muted-foreground/70 mt-0.5">
+                {formatDate(mt.start_date)} &ndash; {formatDate(mt.end_date)}
+              </div>
+            </li>
+          {/each}
+        </ul>
+      {:else}
+        <span class="italic text-muted-foreground">TBA</span>
+      {/if}
+    </div>
+
+    <!-- Delivery -->
+    <div>
+      <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>
+        </span>
+      </h4>
+      <span class="text-foreground">
+        {course.instructionalMethod ?? "—"}
+        {#if course.campus}
+          <span class="text-muted-foreground"> · {course.campus}</span>
+        {/if}
+      </span>
+    </div>
+
+    <!-- Credits -->
+    <div>
+      <h4 class="text-sm text-foreground mb-2">
+        Credits
+      </h4>
+      <span class="text-foreground">{formatCreditHours(course)}</span>
+    </div>
+
+    <!-- Attributes -->
+    {#if course.attributes.length > 0}
+      <div>
+        <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>
+          </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"
+              >
+                Course attribute code
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Cross-list -->
+    {#if course.crossList}
+      <div>
+        <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>
+          </span>
+        </h4>
+        <Tooltip.Root delayDuration={100}>
+          <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">
+                {course.crossList}
+              </span>
+              {#if course.crossListCount != null && course.crossListCapacity != null}
+                <span class="text-muted-foreground text-xs">
+                  {course.crossListCount}/{course.crossListCapacity}
+                </span>
+              {/if}
+            </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"
+          >
+            Group <span class="font-mono font-medium">{course.crossList}</span>
+            {#if course.crossListCount != null && course.crossListCapacity != null}
+              — {course.crossListCount} enrolled across {course.crossListCapacity} shared seats
+            {/if}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    {/if}
+
+    <!-- Waitlist -->
+    {#if course.waitCapacity > 0}
+      <div>
+        <h4 class="text-sm text-foreground mb-2">
+          Waitlist
+        </h4>
+        <span class="text-foreground">{course.waitCount} / {course.waitCapacity}</span>
+      </div>
+    {/if}
+  </div>
+</div>

web/src/lib/components/CourseTable.svelte

@@ -0,0 +1,452 @@
+<script lang="ts">
+import type { CourseResponse } from "$lib/api";
+import {
+  abbreviateInstructor,
+  formatTime,
+  formatMeetingDays,
+  formatLocation,
+  getPrimaryInstructor,
+  isMeetingTimeTBA,
+  isTimeTBA,
+} from "$lib/course";
+import CourseDetail from "./CourseDetail.svelte";
+import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
+import {
+  getCoreRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+  type SortingState,
+  type VisibilityState,
+  type Updater,
+} 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";
+
+let {
+  courses,
+  loading,
+  sorting = [],
+  onSortingChange,
+  manualSorting = false,
+}: {
+  courses: CourseResponse[];
+  loading: boolean;
+  sorting?: SortingState;
+  onSortingChange?: (sorting: SortingState) => void;
+  manualSorting?: boolean;
+} = $props();
+
+let expandedCrn: string | null = $state(null);
+
+// Column visibility state
+let columnVisibility: VisibilityState = $state({});
+
+const DEFAULT_VISIBILITY: VisibilityState = {};
+
+function resetColumnVisibility() {
+  columnVisibility = { ...DEFAULT_VISIBILITY };
+}
+
+function handleVisibilityChange(updater: Updater<VisibilityState>) {
+  const newVisibility = typeof updater === "function" ? updater(columnVisibility) : updater;
+  columnVisibility = newVisibility;
+}
+
+// visibleColumnIds and hasCustomVisibility derived after column definitions below
+
+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;
+  return { rating: primary.rmpRating, count: primary.rmpNumRatings ?? 0 };
+}
+
+function timeIsTBA(course: CourseResponse): boolean {
+  if (course.meetingTimes.length === 0) return true;
+  const mt = course.meetingTimes[0];
+  return isMeetingTimeTBA(mt) && isTimeTBA(mt);
+}
+
+// Column definitions
+const columns: ColumnDef<CourseResponse, unknown>[] = [
+  {
+    id: "crn",
+    accessorKey: "crn",
+    header: "CRN",
+    enableSorting: false,
+  },
+  {
+    id: "course_code",
+    accessorFn: (row) => `${row.subject} ${row.courseNumber}`,
+    header: "Course",
+    enableSorting: true,
+  },
+  {
+    id: "title",
+    accessorKey: "title",
+    header: "Title",
+    enableSorting: true,
+  },
+  {
+    id: "instructor",
+    accessorFn: (row) => primaryInstructorDisplay(row),
+    header: "Instructor",
+    enableSorting: true,
+  },
+  {
+    id: "time",
+    accessorFn: (row) => {
+      if (row.meetingTimes.length === 0) return "";
+      const mt = row.meetingTimes[0];
+      return `${formatMeetingDays(mt)} ${formatTime(mt.begin_time)}`;
+    },
+    header: "Time",
+    enableSorting: true,
+  },
+  {
+    id: "location",
+    accessorFn: (row) => formatLocation(row) ?? "",
+    header: "Location",
+    enableSorting: false,
+  },
+  {
+    id: "seats",
+    accessorFn: (row) => openSeats(row),
+    header: "Seats",
+    enableSorting: true,
+  },
+];
+
+/** Column IDs that are currently visible */
+let visibleColumnIds = $derived(
+  columns.map((c) => c.id!).filter((id) => columnVisibility[id] !== false)
+);
+
+let hasCustomVisibility = $derived(Object.values(columnVisibility).some((v) => v === false));
+
+function handleSortingChange(updater: Updater<SortingState>) {
+  const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+  onSortingChange?.(newSorting);
+}
+
+const table = createSvelteTable({
+  get data() {
+    return courses;
+  },
+  columns,
+  state: {
+    get sorting() {
+      return sorting;
+    },
+    get columnVisibility() {
+      return columnVisibility;
+    },
+  },
+  onSortingChange: handleSortingChange,
+  onColumnVisibilityChange: handleVisibilityChange,
+  getCoreRowModel: getCoreRowModel(),
+  get getSortedRowModel() {
+    return manualSorting ? undefined : getSortedRowModel<CourseResponse>();
+  },
+  get manualSorting() {
+    return manualSorting;
+  },
+  enableSortingRemoval: true,
+});
+</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 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>
+    {#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"
+        >
+          {#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>
+    {/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>
+</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>
+                {/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>
+</div>

web/src/lib/components/Pagination.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+let {
+  totalCount,
+  offset,
+  limit,
+  onPageChange,
+}: {
+  totalCount: number;
+  offset: number;
+  limit: number;
+  onPageChange: (newOffset: number) => void;
+} = $props();
+
+const start = $derived(offset + 1);
+const end = $derived(Math.min(offset + limit, totalCount));
+const hasPrev = $derived(offset > 0);
+const hasNext = $derived(offset + limit < totalCount);
+</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>
+    </div>
+  </div>
+{/if}

web/src/lib/components/SearchFilters.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { Term, Subject } from "$lib/api";
+
+let {
+  terms,
+  subjects,
+  selectedTerm = $bindable(),
+  selectedSubject = $bindable(),
+  query = $bindable(),
+  openOnly = $bindable(),
+}: {
+  terms: Term[];
+  subjects: Subject[];
+  selectedTerm: string;
+  selectedSubject: 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>
+
+  <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>
+
+  <input
+    type="text"
+    placeholder="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]"
+  />
+
+  <label class="flex items-center gap-1.5 text-sm text-muted-foreground cursor-pointer">
+    <input type="checkbox" bind:checked={openOnly} />
+    Open only
+  </label>
+</div>

web/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { tick } from "svelte";
+import { Moon, Sun } from "@lucide/svelte";
+import { themeStore } from "$lib/stores/theme.svelte";
+
+/**
+ * Theme toggle with View Transitions API circular reveal animation.
+ * The clip-path circle expands from the click point to cover the viewport.
+ */
+async function handleToggle(event: MouseEvent) {
+  const supportsViewTransition =
+    typeof document !== "undefined" &&
+    "startViewTransition" in document &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  if (!supportsViewTransition) {
+    themeStore.toggle();
+    return;
+  }
+
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+
+  const transition = document.startViewTransition(async () => {
+    themeStore.toggle();
+    await tick();
+  });
+
+  transition.ready.then(() => {
+    document.documentElement.animate(
+      {
+        clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`],
+      },
+      {
+        duration: 500,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+        pseudoElement: "::view-transition-new(root)",
+      }
+    );
+  });
+}
+</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>

web/src/lib/components/ui/data-table/data-table.svelte.ts

@@ -0,0 +1,118 @@
+import {
+  type RowData,
+  type TableOptions,
+  type TableOptionsResolved,
+  type TableState,
+  createTable,
+} from "@tanstack/table-core";
+
+/**
+ * Creates a reactive TanStack table for Svelte 5 using runes.
+ *
+ * Adapted from shadcn-svelte's data-table wrapper — uses `$state` and
+ * `$effect.pre` instead of Svelte stores for reactivity.
+ */
+export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
+  const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+    {
+      state: {},
+      onStateChange() {},
+      renderFallbackValue: null,
+      mergeOptions: (
+        defaultOptions: TableOptions<TData>,
+        options: Partial<TableOptions<TData>>
+      ) => {
+        return mergeObjects(defaultOptions, options);
+      },
+    },
+    options
+  );
+
+  const table = createTable(resolvedOptions);
+  let state = $state<Partial<TableState>>(table.initialState);
+
+  function updateOptions() {
+    table.setOptions((prev) => {
+      return mergeObjects(prev, options, {
+        state: mergeObjects(state, options.state || {}),
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onStateChange: (updater: any) => {
+          if (updater instanceof Function) state = updater(state);
+          else state = mergeObjects(state, updater as Partial<TableState>);
+
+          options.onStateChange?.(updater);
+        },
+      });
+    });
+  }
+
+  updateOptions();
+
+  $effect.pre(() => {
+    updateOptions();
+  });
+
+  return table;
+}
+
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R]
+  ? H & Intersection<R>
+  : unknown) & {};
+
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source. Proxy-based.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
+  ...sources: Sources
+): Intersection<{ [K in keyof Sources]: Sources[K] }> {
+  const resolve = <T extends object>(src: MaybeThunk<T>): T | undefined =>
+    typeof src === "function" ? (src() ?? undefined) : src;
+
+  const findSourceWithKey = (key: PropertyKey) => {
+    for (let i = sources.length - 1; i >= 0; i--) {
+      const obj = resolve(sources[i]);
+      if (obj && key in obj) return obj;
+    }
+    return undefined;
+  };
+
+  return new Proxy(Object.create(null), {
+    get(_, key) {
+      const src = findSourceWithKey(key);
+      return src?.[key as never];
+    },
+
+    has(_, key) {
+      return !!findSourceWithKey(key);
+    },
+
+    ownKeys(): (string | symbol)[] {
+      const all = new Set<string | symbol>();
+      for (const s of sources) {
+        const obj = resolve(s);
+        if (obj) {
+          for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) {
+            all.add(k);
+          }
+        }
+      }
+      return [...all];
+    },
+
+    getOwnPropertyDescriptor(_, key) {
+      const src = findSourceWithKey(key);
+      if (!src) return undefined;
+      return {
+        configurable: true,
+        enumerable: true,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        value: (src as any)[key],
+        writable: true,
+      };
+    },
+  }) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
+}

web/src/lib/components/ui/data-table/flex-render.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type FlexRenderProps<TProps = any> = {
+  content: unknown;
+  context: TProps;
+};
+</script>
+
+<script lang="ts">
+  import { isRenderComponentConfig, isRenderSnippetConfig, mountComponent } from "./render-helpers.js";
+
+  let { content, context }: FlexRenderProps = $props();
+
+  function renderAction(node: HTMLElement, contentVal: typeof content) {
+    let cleanup: (() => void) | undefined;
+
+    function render(c: typeof content) {
+      cleanup?.();
+      node.textContent = "";
+
+      if (isRenderComponentConfig(c)) {
+        cleanup = mountComponent(c.component, node, c.props as Record<string, unknown>);
+      }
+    }
+
+    render(contentVal);
+
+    return {
+      update(newContent: typeof content) {
+        render(newContent);
+      },
+      destroy() {
+        cleanup?.();
+      },
+    };
+  }
+</script>
+
+{#if isRenderSnippetConfig(content)}
+  {@render content.snippet(content.props)}
+{:else if isRenderComponentConfig(content)}
+  <div use:renderAction={content}></div>
+{:else if typeof content === "function"}
+  {@const result = content(context)}
+  {#if isRenderComponentConfig(result)}
+    <div use:renderAction={result}></div>
+  {:else if isRenderSnippetConfig(result)}
+    {@render result.snippet(result.props)}
+  {:else if typeof result === "string" || typeof result === "number"}
+    {result}
+  {/if}
+{:else if typeof content === "string" || typeof content === "number"}
+  {content}
+{/if}

web/src/lib/components/ui/data-table/index.ts

@@ -0,0 +1,3 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";

web/src/lib/components/ui/data-table/render-helpers.ts

@@ -0,0 +1,67 @@
+import { type Component, type Snippet, mount, unmount } from "svelte";
+
+/**
+ * Wraps a Svelte component so TanStack Table can render it as a column
+ * header or cell. Returns a `RenderComponentConfig` that `FlexRender`
+ * picks up.
+ */
+export function renderComponent<
+  TProps extends Record<string, unknown>,
+  TComp extends Component<TProps>,
+>(component: TComp, props: TProps) {
+  return {
+    component,
+    props,
+    [RENDER_COMPONENT_SYMBOL]: true,
+  } as const;
+}
+
+/**
+ * Wraps a Svelte 5 raw snippet for use in TanStack Table column defs.
+ */
+export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, props: TProps) {
+  return {
+    snippet,
+    props,
+    [RENDER_SNIPPET_SYMBOL]: true,
+  } as const;
+}
+
+// Symbols for FlexRender to detect render types
+export const RENDER_COMPONENT_SYMBOL = Symbol("renderComponent");
+export const RENDER_SNIPPET_SYMBOL = Symbol("renderSnippet");
+
+export type RenderComponentConfig<
+  TProps extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  component: Component<TProps>;
+  props: TProps;
+  [RENDER_COMPONENT_SYMBOL]: true;
+};
+
+export type RenderSnippetConfig<TProps = unknown> = {
+  snippet: Snippet<[TProps]>;
+  props: TProps;
+  [RENDER_SNIPPET_SYMBOL]: true;
+};
+
+export function isRenderComponentConfig(value: unknown): value is RenderComponentConfig {
+  return typeof value === "object" && value !== null && RENDER_COMPONENT_SYMBOL in value;
+}
+
+export function isRenderSnippetConfig(value: unknown): value is RenderSnippetConfig {
+  return typeof value === "object" && value !== null && RENDER_SNIPPET_SYMBOL in value;
+}
+
+/**
+ * Mount a Svelte component imperatively into a target element.
+ * Used by FlexRender for component-type cells.
+ */
+export function mountComponent<TProps extends Record<string, unknown>>(
+  component: Component<TProps>,
+  target: HTMLElement,
+  props: TProps
+) {
+  const instance = mount(component, { target, props });
+  return () => unmount(instance);
+}

web/src/lib/course.test.ts

@@ -0,0 +1,228 @@
+import { describe, it, expect } from "vitest";
+import {
+  formatTime,
+  formatMeetingDays,
+  formatMeetingTime,
+  abbreviateInstructor,
+  formatCreditHours,
+  getPrimaryInstructor,
+  isMeetingTimeTBA,
+  isTimeTBA,
+  formatDate,
+  formatMeetingDaysLong,
+} from "$lib/course";
+import type { DbMeetingTime, CourseResponse, InstructorResponse } from "$lib/api";
+
+function makeMeetingTime(overrides: Partial<DbMeetingTime> = {}): DbMeetingTime {
+  return {
+    begin_time: null,
+    end_time: null,
+    start_date: "2024-08-26",
+    end_date: "2024-12-12",
+    monday: false,
+    tuesday: false,
+    wednesday: false,
+    thursday: false,
+    friday: false,
+    saturday: false,
+    sunday: false,
+    building: null,
+    building_description: null,
+    room: null,
+    campus: null,
+    meeting_type: "CLAS",
+    meeting_schedule_type: "LEC",
+    ...overrides,
+  };
+}
+
+describe("formatTime", () => {
+  it("converts 0900 to 9:00 AM", () => expect(formatTime("0900")).toBe("9:00 AM"));
+  it("converts 1330 to 1:30 PM", () => expect(formatTime("1330")).toBe("1:30 PM"));
+  it("converts 0000 to 12:00 AM", () => expect(formatTime("0000")).toBe("12:00 AM"));
+  it("converts 1200 to 12:00 PM", () => expect(formatTime("1200")).toBe("12:00 PM"));
+  it("converts 2359 to 11:59 PM", () => expect(formatTime("2359")).toBe("11:59 PM"));
+  it("returns TBA for null", () => expect(formatTime(null)).toBe("TBA"));
+  it("returns TBA for empty string", () => expect(formatTime("")).toBe("TBA"));
+  it("returns TBA for short string", () => expect(formatTime("09")).toBe("TBA"));
+});
+
+describe("formatMeetingDays", () => {
+  it("returns MWF for mon/wed/fri", () => {
+    expect(
+      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 empty string when no days", () => {
+    expect(formatMeetingDays(makeMeetingTime())).toBe("");
+  });
+  it("returns all days", () => {
+    expect(
+      formatMeetingDays(
+        makeMeetingTime({
+          monday: true,
+          tuesday: true,
+          wednesday: true,
+          thursday: true,
+          friday: true,
+          saturday: true,
+          sunday: true,
+        })
+      )
+    ).toBe("MTWRFSU");
+  });
+});
+
+describe("formatMeetingTime", () => {
+  it("formats a standard meeting time", () => {
+    expect(
+      formatMeetingTime(
+        makeMeetingTime({
+          monday: true,
+          wednesday: true,
+          friday: true,
+          begin_time: "0900",
+          end_time: "0950",
+        })
+      )
+    ).toBe("MWF 9:00 AM–9:50 AM");
+  });
+  it("returns TBA when no days", () => {
+    expect(formatMeetingTime(makeMeetingTime({ begin_time: "0900", end_time: "0950" }))).toBe(
+      "TBA"
+    );
+  });
+  it("returns days + TBA when no times", () => {
+    expect(formatMeetingTime(makeMeetingTime({ monday: true }))).toBe("M TBA");
+  });
+});
+
+describe("abbreviateInstructor", () => {
+  it("abbreviates standard name", () =>
+    expect(abbreviateInstructor("Heaps, John")).toBe("Heaps, J."));
+  it("handles no comma", () => expect(abbreviateInstructor("Staff")).toBe("Staff"));
+  it("handles multiple first names", () =>
+    expect(abbreviateInstructor("Smith, Mary Jane")).toBe("Smith, M."));
+});
+
+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 },
+    ];
+    expect(getPrimaryInstructor(instructors)?.displayName).toBe("B");
+  });
+  it("returns first instructor when no primary", () => {
+    const instructors: InstructorResponse[] = [
+      { bannerId: "1", displayName: "A", email: null, isPrimary: false },
+    ];
+    expect(getPrimaryInstructor(instructors)?.displayName).toBe("A");
+  });
+  it("returns undefined for empty array", () => {
+    expect(getPrimaryInstructor([])).toBeUndefined();
+  });
+});
+
+describe("formatCreditHours", () => {
+  it("returns creditHours when set", () => {
+    expect(
+      formatCreditHours({
+        creditHours: 3,
+        creditHourLow: null,
+        creditHourHigh: null,
+      } as CourseResponse)
+    ).toBe("3");
+  });
+  it("returns range when variable", () => {
+    expect(
+      formatCreditHours({
+        creditHours: null,
+        creditHourLow: 1,
+        creditHourHigh: 3,
+      } as CourseResponse)
+    ).toBe("1–3");
+  });
+  it("returns dash when no credit info", () => {
+    expect(
+      formatCreditHours({
+        creditHours: null,
+        creditHourLow: null,
+        creditHourHigh: null,
+      } as CourseResponse)
+    ).toBe("—");
+  });
+});
+
+describe("isMeetingTimeTBA", () => {
+  it("returns true when no days set", () => {
+    expect(isMeetingTimeTBA(makeMeetingTime())).toBe(true);
+  });
+  it("returns false when any day is set", () => {
+    expect(isMeetingTimeTBA(makeMeetingTime({ monday: true }))).toBe(false);
+  });
+  it("returns false when multiple days set", () => {
+    expect(isMeetingTimeTBA(makeMeetingTime({ tuesday: true, thursday: true }))).toBe(false);
+  });
+});
+
+describe("isTimeTBA", () => {
+  it("returns true when begin_time is null", () => {
+    expect(isTimeTBA(makeMeetingTime())).toBe(true);
+  });
+  it("returns true when begin_time is empty", () => {
+    expect(isTimeTBA(makeMeetingTime({ begin_time: "" }))).toBe(true);
+  });
+  it("returns true when begin_time is short", () => {
+    expect(isTimeTBA(makeMeetingTime({ begin_time: "09" }))).toBe(true);
+  });
+  it("returns false when begin_time is valid", () => {
+    expect(isTimeTBA(makeMeetingTime({ begin_time: "0900" }))).toBe(false);
+  });
+});
+
+describe("formatDate", () => {
+  it("formats standard date", () => {
+    expect(formatDate("2024-08-26")).toBe("August 26, 2024");
+  });
+  it("formats December date", () => {
+    expect(formatDate("2024-12-12")).toBe("December 12, 2024");
+  });
+  it("formats January 1st", () => {
+    expect(formatDate("2026-01-01")).toBe("January 1, 2026");
+  });
+  it("formats MM/DD/YYYY date", () => {
+    expect(formatDate("01/20/2026")).toBe("January 20, 2026");
+  });
+  it("formats MM/DD/YYYY with May", () => {
+    expect(formatDate("05/13/2026")).toBe("May 13, 2026");
+  });
+  it("returns original string for invalid input", () => {
+    expect(formatDate("bad-date")).toBe("bad-date");
+  });
+});
+
+describe("formatMeetingDaysLong", () => {
+  it("returns full plural for single day", () => {
+    expect(formatMeetingDaysLong(makeMeetingTime({ thursday: true }))).toBe("Thursdays");
+  });
+  it("returns full plural for Monday only", () => {
+    expect(formatMeetingDaysLong(makeMeetingTime({ monday: true }))).toBe("Mondays");
+  });
+  it("returns semi-abbreviated for multiple days", () => {
+    expect(
+      formatMeetingDaysLong(makeMeetingTime({ monday: true, wednesday: true, friday: true }))
+    ).toBe("Mon, Wed, Fri");
+  });
+  it("returns semi-abbreviated for TR", () => {
+    expect(formatMeetingDaysLong(makeMeetingTime({ tuesday: true, thursday: true }))).toBe(
+      "Tue, Thur"
+    );
+  });
+  it("returns empty string when no days", () => {
+    expect(formatMeetingDaysLong(makeMeetingTime())).toBe("");
+  });
+});

web/src/lib/course.ts

@@ -0,0 +1,129 @@
+import type { DbMeetingTime, CourseResponse, InstructorResponse } from "$lib/api";
+
+/** Convert "0900" to "9:00 AM" */
+export function formatTime(time: string | null): string {
+  if (!time || time.length !== 4) return "TBA";
+  const hours = parseInt(time.slice(0, 2), 10);
+  const minutes = time.slice(2);
+  const period = hours >= 12 ? "PM" : "AM";
+  const display = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+  return `${display}:${minutes} ${period}`;
+}
+
+/** Get day abbreviation string like "MWF" from a meeting time */
+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"],
+  ];
+  return days
+    .filter(([active]) => active)
+    .map(([, abbr]) => abbr)
+    .join("");
+}
+
+/** Longer day names for detail view: single day → "Thursdays", multiple → "Mon, Wed, Fri" */
+export function formatMeetingDaysLong(mt: DbMeetingTime): string {
+  const days: [boolean, string, string][] = [
+    [mt.monday, "Mon", "Mondays"],
+    [mt.tuesday, "Tue", "Tuesdays"],
+    [mt.wednesday, "Wed", "Wednesdays"],
+    [mt.thursday, "Thur", "Thursdays"],
+    [mt.friday, "Fri", "Fridays"],
+    [mt.saturday, "Sat", "Saturdays"],
+    [mt.sunday, "Sun", "Sundays"],
+  ];
+  const active = days.filter(([a]) => a);
+  if (active.length === 0) return "";
+  if (active.length === 1) return active[0][2];
+  return active.map(([, short]) => short).join(", ");
+}
+
+/** Condensed meeting time: "MWF 9:00 AM–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}`;
+}
+
+/** Abbreviate instructor name: "Heaps, John" → "Heaps, J." */
+export function abbreviateInstructor(name: string): string {
+  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)}.`;
+}
+
+/** Get primary instructor from a course, or first instructor */
+export function getPrimaryInstructor(
+  instructors: InstructorResponse[]
+): InstructorResponse | undefined {
+  return instructors.find((i) => i.isPrimary) ?? instructors[0];
+}
+
+/** Check if a meeting time has no scheduled days */
+export function isMeetingTimeTBA(mt: DbMeetingTime): boolean {
+  return (
+    !mt.monday &&
+    !mt.tuesday &&
+    !mt.wednesday &&
+    !mt.thursday &&
+    !mt.friday &&
+    !mt.saturday &&
+    !mt.sunday
+  );
+}
+
+/** Check if a meeting time has no begin/end times */
+export function isTimeTBA(mt: DbMeetingTime): boolean {
+  return !mt.begin_time || mt.begin_time.length !== 4;
+}
+
+/** Format a date string to "January 20, 2026". Accepts YYYY-MM-DD or MM/DD/YYYY. */
+export function formatDate(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: "long", day: "numeric" });
+}
+
+/** Short location string from first meeting time: "MH 2.206" or campus fallback */
+export function formatLocation(course: CourseResponse): string | null {
+  for (const mt of course.meetingTimes) {
+    if (mt.building && mt.room) return `${mt.building} ${mt.room}`;
+    if (mt.building) return mt.building;
+  }
+  return course.campus ?? null;
+}
+
+/** Longer location string using building description: "Main Hall 2.206" */
+export function formatLocationLong(mt: DbMeetingTime): string | null {
+  const name = mt.building_description ?? mt.building;
+  if (!name) return null;
+  return mt.room ? `${name} ${mt.room}` : name;
+}
+
+/** Format credit hours display */
+export function formatCreditHours(course: CourseResponse): string {
+  if (course.creditHours != null) return String(course.creditHours);
+  if (course.creditHourLow != null && course.creditHourHigh != null) {
+    return `${course.creditHourLow}–${course.creditHourHigh}`;
+  }
+  return "—";
+}

web/src/lib/stores/theme.svelte.ts

@@ -0,0 +1,36 @@
+class ThemeStore {
+  isDark = $state<boolean>(false);
+  private initialized = false;
+
+  init() {
+    if (this.initialized || typeof window === "undefined") return;
+    this.initialized = true;
+
+    const stored = localStorage.getItem("theme");
+    if (stored === "light" || stored === "dark") {
+      this.isDark = stored === "dark";
+    } else {
+      this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+
+    this.updateDOMClass();
+  }
+
+  toggle() {
+    this.isDark = !this.isDark;
+    localStorage.setItem("theme", this.isDark ? "dark" : "light");
+    this.updateDOMClass();
+  }
+
+  private updateDOMClass() {
+    if (typeof document === "undefined") return;
+
+    if (this.isDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }
+}
+
+export const themeStore = new ThemeStore();

web/src/lib/time.ts

@@ -0,0 +1,69 @@
+/**
+ * Relative time formatting with adaptive refresh intervals.
+ *
+ * The key insight: a timestamp showing "3 seconds ago" needs to update every second,
+ * but "2 hours ago" only needs to update every minute. This module provides both
+ * the formatted string and the optimal interval until the next meaningful change.
+ */
+
+interface RelativeTimeResult {
+  /** The human-readable relative time string (e.g. "3 seconds ago") */
+  text: string;
+  /** Milliseconds until the displayed text would change */
+  nextUpdateMs: number;
+}
+
+/**
+ * Compute a relative time string and the interval until it next changes.
+ *
+ * Granularity tiers:
+ * - < 60s: per-second ("1 second ago", "45 seconds ago")
+ * - < 60m: per-minute ("1 minute ago", "12 minutes ago")
+ * - < 24h: per-hour ("1 hour ago", "5 hours ago")
+ * - >= 24h: per-day ("1 day ago", "3 days ago")
+ */
+export function relativeTime(date: Date, ref: Date): RelativeTimeResult {
+  const diffMs = ref.getTime() - date.getTime();
+  const seconds = Math.round(diffMs / 1000);
+
+  if (seconds < 1) {
+    return { text: "just now", nextUpdateMs: 1000 - (diffMs % 1000) || 1000 };
+  }
+
+  if (seconds < 60) {
+    const remainder = 1000 - (diffMs % 1000);
+    return {
+      text: seconds === 1 ? "1 second ago" : `${seconds} seconds ago`,
+      nextUpdateMs: remainder || 1000,
+    };
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    // Update when the next minute boundary is crossed
+    const msIntoCurrentMinute = diffMs % 60_000;
+    const msUntilNextMinute = 60_000 - msIntoCurrentMinute;
+    return {
+      text: minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`,
+      nextUpdateMs: msUntilNextMinute || 60_000,
+    };
+  }
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    const msIntoCurrentHour = diffMs % 3_600_000;
+    const msUntilNextHour = 3_600_000 - msIntoCurrentHour;
+    return {
+      text: hours === 1 ? "1 hour ago" : `${hours} hours ago`,
+      nextUpdateMs: msUntilNextHour || 3_600_000,
+    };
+  }
+
+  const days = Math.floor(hours / 24);
+  const msIntoCurrentDay = diffMs % 86_400_000;
+  const msUntilNextDay = 86_400_000 - msIntoCurrentDay;
+  return {
+    text: days === 1 ? "1 day ago" : `${days} days ago`,
+    nextUpdateMs: msUntilNextDay || 86_400_000,
+  };
+}

web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

web/src/logo.svg

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 841.9 595.3">
-  <!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146)  -->
-  <defs>
-    <style>
-      .st0 {
-        fill: #9ae7fc;
-      }
-
-      .st1 {
-        fill: #61dafb;
-      }
-    </style>
-  </defs>
-  <g>
-    <path class="st1" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4,14.4-63.6,8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6,0,8.3.9,11.4,2.6,13.6,7.8,19.5,37.5,14.9,75.7-1.1,9.4-2.9,19.3-5.1,29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50,32.6-30.3,63.2-46.9,84-46.9v-22.3c-27.5,0-63.5,19.6-99.9,53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6-14,14.7-28,31.4-41.3,49.9-22.6,2.4-44,6.1-63.6,11-2.3-10-4-19.7-5.2-29-4.7-38.2,1.1-67.9,14.6-75.8,3-1.8,6.9-2.6,11.5-2.6v-22.3c-8.4,0-16,1.8-22.6,5.6-28.1,16.2-34.4,66.7-19.9,130.1-62.2,19.2-102.7,49.9-102.7,82.3s40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4,6.5,3.8,14.1,5.6,22.5,5.6,27.5,0,63.5-19.6,99.9-53.6,36.4,33.8,72.4,53.2,99.9,53.2,8.4,0,16-1.8,22.6-5.6,28.1-16.2,34.4-66.7,19.9-130.1,62-19.1,102.5-49.9,102.5-82.3zm-130.2-66.7c-3.7,12.9-8.3,26.2-13.5,39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4,14.2,2.1,27.9,4.7,41,7.9zm-45.8,106.5c-7.8,13.5-15.8,26.3-24.1,38.2-14.9,1.3-30,2-45.2,2s-30.2-.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8,6.2-13.4,13.2-26.8,20.7-39.9,7.8-13.5,15.8-26.3,24.1-38.2,14.9-1.3,30-2,45.2-2s30.2.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38,7.6,13.1,14.5,26.4,20.8,39.8-6.3,13.4-13.2,26.8-20.7,39.9zm32.3-13c5.4,13.4,10,26.8,13.8,39.8-13.1,3.2-26.9,5.9-41.2,8,4.9-7.7,9.8-15.6,14.4-23.7,4.6-8,8.9-16.1,13-24.1zm-101.4,106.7c-9.3-9.6-18.6-20.3-27.8-32,9,.4,18.2.7,27.5.7s18.7-.2,27.8-.7c-9,11.7-18.3,22.4-27.5,32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9,3.7-12.9,8.3-26.2,13.5-39.5,4.1,8,8.4,16,13.1,24s9.5,15.8,14.4,23.4zm73.9-208.1c9.3,9.6,18.6,20.3,27.8,32-9-.4-18.2-.7-27.5-.7s-18.7.2-27.8.7c9-11.7,18.3-22.4,27.5-32zm-74,58.9c-4.9,7.7-9.8,15.6-14.4,23.7-4.6,8-8.9,16-13,24-5.4-13.4-10-26.8-13.8-39.8,13.1-3.1,26.9-5.8,41.2-7.9zm-90.5,125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1,5.7,19.6,13.2,40,22.5,60.9-9.2,20.8-16.6,41.1-22.2,60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8,142.9c-13.6-7.8-19.5-37.5-14.9-75.7,1.1-9.4,2.9-19.3,5.1-29.4,19.6,4.8,41,8.5,63.5,10.9,13.5,18.5,27.5,35.3,41.6,50-32.6,30.3-63.2,46.9-84,46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7,38.2-1.1,67.9-14.6,75.8-3,1.8-6.9,2.6-11.5,2.6-20.7,0-51.4-16.5-84-46.6,14-14.7,28-31.4,41.3-49.9,22.6-2.4,44-6.1,63.6-11,2.3,10.1,4.1,19.8,5.2,29.1zm38.5-66.7c-8.6,3.7-18,7-27.7,10.1-5.7-19.6-13.2-40-22.5-60.9,9.2-20.8,16.6-41.1,22.2-60.6,9.9,3.1,19.3,6.5,28.1,10.2,35.4,15.1,58.3,34.9,58.3,50.6,0,15.7-23,35.6-58.4,50.6zm-264.9-268.7z"/>
-    <circle class="st1" cx="420.9" cy="296.5" r="45.7"/>
-    <path class="st1" d="M520.5,78.1"/>
-  </g>
-  <circle class="st0" cx="420.8" cy="296.6" r="43"/>
-  <path class="st1" d="M466.1,296.6c0,25-20.2,45.2-45.2,45.2s-45.2-20.2-45.2-45.2,20.2-45.2,45.2-45.2,45.2,20.2,45.2,45.2ZM386,295.6v-6.3c0-1.1,1.2-5.1,1.8-6.2,1-1.9,2.9-3.5,4.6-4.7l-3.4-3.4c4-3.6,9.4-3.7,13.7-.7,1.9-4.7,6.6-7.1,11.6-6.7l-.8,4.2c5.9.2,13.1,4.1,13.1,10.8s0,.5-.7.7c-1.7.3-3.4-.4-5-.6s-1.2-.4-1.2.3,2.5,4.1,3,5.5,1,3.5.8,5.3c-5.6-.8-10.5-3.2-14.8-6.7.3,2.6,4.1,21.7,5.3,21.9s.8-.6,1-1.1,1.3-6.3,1.3-6.7c0-1-1.7-1.8-2.2-2.8-1.2-2.7,1.3-4.7,3.7-3.3s5.2,6.2,7.5,7.3,13,1.4,14.8,3.3-2.9,4.6-1.5,7.6c6.7-2.6,13.5-3.3,20.6-2.5,3.1-9.7,3.1-20.3-.9-29.8-7.3,0-14.7-3.6-17.2-10.8-2.5-7.2-.7-8.6-1.3-9.3-.8-1-6.3.6-7.4-1.5s.3-1.1-.2-1.4-1.9-.6-2.6-.8c-26-6.4-51.3,15.7-49.7,42.1,0,1.6,1.6,10.3,2.4,11.1s4.8,0,6.3,0,3.7.3,5,.5c2.9.4,7.2,2.4,9.4,2.5s2.4-.8,2.7-2.4c.4-2.6.5-7.4.5-10.1s-1-7.8-1.3-11.6c-.9-.2-.7,0-.9.5-.7,1.3-1.1,3.2-1.9,4.8s-5.2,8.7-5.7,9-.7-.5-.8-.8c-1.6-3.5-2-7.9-1.9-11.8-.9-1-5.4,4.9-6.7,5.3l-.8-.4v-.3h-.2ZM455.6,276.4c1.1-1.2-6-8.9-7.2-10-3-2.7-5.4-4.5-3.5,1.4s5.7,7.8,10.6,8.5h.1ZM410.9,270.1c-.4-.5-6.1,2.9-5.5,4.6,1.9-1.3,5.9-1.7,5.5-4.6ZM400.4,276.4c-.3-2.4-6.3-2.7-7.2-1s1.6,1.4,1.9,1.4c1.8.3,3.5-.6,5.2-.4h.1ZM411.3,276.8c3.8,1.3,6.6,3.6,10.9,3.7s0-3-1.2-3.9c-2.2-1.7-5.1-2.4-7.8-2.4s-1.6-.3-1.4.4c2.8.6,7.3.7,8.4,3.8-2.3-.3-3.9-1.6-6.2-2s-2.5-.5-2.6.3h0ZM420.6,290.3c-.8-5.1-5.7-10.8-10.9-11.6s-1.3-.4-.8.5,4.7,3.2,5.7,4,4.5,4.2,2.1,3.8-8.4-7.8-9.4-6.7c.2.9,1.1,1.9,1.7,2.7,3,3.8,6.9,6.8,11.8,7.4h-.2ZM395.3,279.8c-5,1.1-6.9,6.3-6.7,11,.7.8,5-3.8,5.4-4.5s2.7-4.6,1.1-4-2.9,4.4-4.2,4.6.2-2.1.4-2.5c1.1-1.6,2.9-3.1,4-4.6h0ZM400.4,281.5c-.4-.5-2,1.3-2.3,1.7-2.9,3.9-2.6,10.2-1.5,14.8.8.2.8-.3,1.2-.7,3-3.8,5.5-10.5,4.5-15.4-2.1,3.1-3.1,7.3-3.6,11h-1.3c0-4,1.9-7.7,3-11.4h0ZM426.9,305.9c0-1.7-1.7-1.4-2.5-1.9s-1.3-1.9-3-1.4c1.3,2.1,3,3.2,5.5,3.4h0ZM417.2,308.5c7.6.7,5.5-1.9,1.4-5.5-1.3-.3-1.5,4.5-1.4,5.5ZM437,309.7c-3.5-.3-7.8-2-11.2-2.1s-1.3,0-1.9.7c4,1.3,8.4,1.7,12.1,4l1-2.5h0ZM420.5,312.8c-7.3,0-15.1,3.7-20.4,8.8s-4.8,5.3-4.8,6.2c0,1.8,8.6,6.2,10.5,6.8,12.1,4.8,27.5,3.5,38.2-4.2s3.1-2.7,0-6.2c-5.7-6.6-14.7-11.4-23.4-11.3h-.1ZM398.7,316.9c-1.4-1.4-5-1.9-7-2.1s-5.3-.3-6.9.6l13.9,1.4h0ZM456.9,314.8h-7.4c-.9,0-4.9,1.1-6,1.6s-.8.6,0,.5c2.4,0,5.1-1,7.6-1.3s3.5.2,5.1,0,1.3-.3.6-.8h0Z"/>
-  <path class="st0" d="M386,295.6l.8.4c1.3-.3,5.8-6.2,6.7-5.3,0,3.9.3,8.3,1.9,11.8s0,1.2.8.8,5.1-7.8,5.7-9,1.3-3.5,1.9-4.8,0-.7.9-.5c.3,3.8,1.2,7.8,1.3,11.6s0,7.5-.5,10.1-1.1,2.4-2.7,2.4-6.5-2.1-9.4-2.5-3.7-.5-5-.5-5.4,1.1-6.3,0-2.2-9.5-2.4-11.1c-1.5-26.4,23.7-48.5,49.7-42.1s2.2.4,2.6.8,0,1,.2,1.4c1.1,2,6.5.5,7.4,1.5s.4,6.9,1.3,9.3c2.5,7.2,10,10.9,17.2,10.8,4,9.4,4,20.1.9,29.8-7.2-.7-13.9,0-20.6,2.5-1.3-3.1,4.1-5.1,1.5-7.6s-11.8-1.9-14.8-3.3-5.4-6.1-7.5-7.3-4.9.6-3.7,3.3,2.1,1.8,2.2,2.8-1,6.2-1.3,6.7-.3,1.3-1,1.1c-1.1-.3-5-19.3-5.3-21.9,4.3,3.5,9.2,5.9,14.8,6.7.2-1.9-.3-3.5-.8-5.3s-3-5.1-3-5.5c0-.8.9-.3,1.2-.3,1.6,0,3.3.8,5,.6s.7.3.7-.7c0-6.6-7.2-10.6-13.1-10.8l.8-4.2c-5.1-.3-9.6,2-11.6,6.7-4.3-3-9.8-3-13.7.7l3.4,3.4c-1.8,1.3-3.5,2.8-4.6,4.7s-1.8,5.1-1.8,6.2v6.6h.2ZM431.6,265c7.8,2.1,8.7-3.5.2-1.3l-.2,1.3ZM432.4,270.9c.3.6,6.4-.4,5.8-2.3s-4.6.6-5.7.6l-.2,1.7h.1ZM434.5,276c.8,1.2,5.7-1.8,5.5-2.7-.4-1.9-6.6,1.2-5.5,2.7ZM442.9,276.4c-.9-.9-5,2.8-4.6,4,.6,2.4,5.7-3,4.6-4ZM445.1,279.9c-.3.2-3.1,4.6-1.5,5s3.5-3.4,3.5-4-1.3-1.3-2-.9h0ZM448.9,287.4c2.1.8,3.8-5.1,2.3-5.5-1.9-.6-2.6,5.1-2.3,5.5ZM457.3,288.6c.5-1.7,1.1-4.7-1-5.5-1,.3-.6,3.9-.6,4.8l.3.5,1.3.2h0Z"/>
-  <path class="st0" d="M455.6,276.4c-5-.8-9.1-3.6-10.6-8.5s.5-4,3.5-1.4,8.3,8.7,7.2,10h-.1Z"/>
-  <path class="st0" d="M420.6,290.3c-4.9-.6-8.9-3.6-11.8-7.4s-1.5-1.8-1.7-2.7c1-1,8.5,6.6,9.4,6.7,2.4.4-1.8-3.5-2.1-3.8-1-.8-5.4-3.5-5.7-4-.4-.8.5-.5.8-.5,5.2.8,10.1,6.6,10.9,11.6h.2Z"/>
-  <path class="st0" d="M400.4,281.5c-1.1,3.7-3,7.3-3,11.4h1.3c.5-3.7,1.5-7.8,3.6-11,1,4.8-1.5,11.6-4.5,15.4s-.4.8-1.2.7c-1.1-4.5-1.3-10.8,1.5-14.8s1.9-2.2,2.3-1.7h0Z"/>
-  <path class="st0" d="M411.3,276.8c0-.8,2.1-.4,2.6-.3,2.4.4,4,1.7,6.2,2-1.2-3.1-5.7-3.2-8.4-3.8,0-.8.9-.4,1.4-.4,2.8,0,5.6.7,7.8,2.4,2.2,1.7,4,4,1.2,3.9-4.3,0-7.1-2.4-10.9-3.7h0Z"/>
-  <path class="st0" d="M395.3,279.8c-1.1,1.6-3,3-4,4.6s-1.9,2.8-.4,2.5,2.8-4,4.2-4.6-.9,3.6-1.1,4c-.4.7-4.7,5.2-5.4,4.5-.2-4.6,1.8-9.9,6.7-11h0Z"/>
-  <path class="st0" d="M437,309.7l-1,2.5c-3.6-2.3-8-2.8-12.1-4,.5-.7,1.1-.7,1.9-.7,3.4,0,7.8,1.8,11.2,2.1h0Z"/>
-  <path class="st0" d="M417.2,308.5c0-1,0-5.8,1.4-5.5,4,3.5,6.1,6.2-1.4,5.5Z"/>
-  <path class="st0" d="M400.4,276.4c-1.8-.3-3.5.7-5.2.4s-2.3-.8-1.9-1.4c.8-1.6,6.9-1.4,7.2,1h-.1Z"/>
-  <path class="st0" d="M410.9,270.1c.4,3-3.6,3.3-5.5,4.6-.6-1.8,5-5.1,5.5-4.6Z"/>
-  <path class="st0" d="M426.9,305.9c-2.5-.2-4.1-1.3-5.5-3.4,1.7-.4,2,.8,3,1.4s2.6.3,2.5,1.9h0Z"/>
-  <path class="st1" d="M432.4,270.9l.2-1.7c1.1,0,5.1-2.2,5.7-.6s-5.5,2.9-5.8,2.3h-.1Z"/>
-  <path class="st1" d="M431.6,265l.2-1.3c8.4-2.1,7.7,3.4-.2,1.3Z"/>
-  <path class="st1" d="M434.5,276c-1.1-1.5,5.1-4.6,5.5-2.7s-4.6,4-5.5,2.7Z"/>
-  <path class="st1" d="M442.9,276.4c1.1,1.1-4,6.4-4.6,4s3.7-4.9,4.6-4Z"/>
-  <path class="st1" d="M445.1,279.9c.7-.4,2.1,0,2,.9s-2.4,4.4-3.5,4,1.3-4.8,1.5-5h0Z"/>
-  <path class="st1" d="M448.9,287.4c-.3-.3.4-6.1,2.3-5.5,1.4.4-.2,6.2-2.3,5.5Z"/>
-  <path class="st1" d="M457.3,288.6l-1.3-.2-.3-.5c0-.9-.4-4.6.6-4.8,2.1.8,1.5,3.8,1,5.5h0Z"/>
-  <path class="st0" d="M420.5,312.8c8.9,0,17.9,4.7,23.4,11.3,5.6,6.6,3.8,3.5,0,6.2-10.7,7.7-26.1,9-38.2,4.2-1.9-.8-10.5-5.1-10.5-6.8s4-5.3,4.8-6.2c5.3-5,13.1-8.6,20.4-8.8h.1Z"/>
-  <path class="st0" d="M398.7,316.9l-13.9-1.4c1.7-1,5-.8,6.9-.6s5.6.7,7,2.1h0Z"/>
-  <path class="st0" d="M456.9,314.8c.7.5,0,.8-.6.8-1.6.2-3.5-.2-5.1,0-2.4.3-5.2,1.2-7.6,1.3s-1.1,0,0-.5,5.1-1.6,6-1.6h7.4,0Z"/>
-</svg>

web/src/main.tsx

@@ -1,36 +0,0 @@
-import { StrictMode } from "react";
-import ReactDOM from "react-dom/client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-
-// Import the generated route tree
-import { routeTree } from "./routeTree.gen";
-
-import "./styles.css";
-
-// Create a new router instance
-const router = createRouter({
-  routeTree,
-  context: {},
-  defaultPreload: "intent",
-  scrollRestoration: true,
-  defaultStructuralSharing: true,
-  defaultPreloadStaleTime: 0,
-});
-
-// Register the router instance for type safety
-declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router;
-  }
-}
-
-// Render the app
-const rootElement = document.getElementById("app");
-if (rootElement && !rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(
-    <StrictMode>
-      <RouterProvider router={router} />
-    </StrictMode>
-  );
-}

web/src/routeTree.gen.ts

@@ -1,59 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as IndexRouteImport } from './routes/index'
-
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-  }
-}
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()

web/src/routes/+layout.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+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";
+
+let { children } = $props();
+
+onMount(() => {
+  themeStore.init();
+
+  const osInstance = OverlayScrollbars(document.body, {
+    scrollbars: {
+      autoHide: "leave",
+      autoHideDelay: 800,
+      theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
+    },
+  });
+
+  return () => {
+    osInstance?.destroy();
+  };
+});
+</script>
+
+<Tooltip.Provider>
+  <div class="fixed top-5 right-5 z-50">
+    <ThemeToggle />
+  </div>
+
+  {@render children()}
+</Tooltip.Provider>

web/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;

web/src/routes/+page.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+import { untrack } from "svelte";
+import { goto } from "$app/navigation";
+import {
+  type Subject,
+  type SearchResponse,
+  type SortColumn,
+  type SortDirection,
+  client,
+} from "$lib/api";
+import type { SortingState } from "@tanstack/table-core";
+import SearchFilters from "$lib/components/SearchFilters.svelte";
+import CourseTable from "$lib/components/CourseTable.svelte";
+import Pagination from "$lib/components/Pagination.svelte";
+
+let { data } = $props();
+
+// Read initial state from URL params (intentionally captured once)
+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 query = $state(initialParams.get("q") ?? "");
+let openOnly = $state(initialParams.get("open") === "true");
+let offset = $state(Number(initialParams.get("offset")) || 0);
+const limit = 25;
+
+// Sorting state — maps TanStack column IDs to server sort params
+const SORT_COLUMN_MAP: Record<string, SortColumn> = {
+  course_code: "course_code",
+  title: "title",
+  instructor: "instructor",
+  time: "time",
+  seats: "seats",
+};
+
+let sorting: SortingState = $state(
+  (() => {
+    const sortBy = initialParams.get("sort_by");
+    const sortDir = initialParams.get("sort_dir");
+    if (!sortBy) return [];
+    return [{ id: sortBy, desc: sortDir === "desc" }];
+  })()
+);
+
+function handleSortingChange(newSorting: SortingState) {
+  sorting = newSorting;
+  offset = 0;
+}
+
+// Data state
+let subjects: Subject[] = $state([]);
+let searchResult: SearchResponse | null = $state(null);
+let loading = $state(false);
+let error = $state<string | null>(null);
+
+// Fetch subjects when term changes
+$effect(() => {
+  const term = selectedTerm;
+  if (!term) return;
+  client.getSubjects(term).then((s) => {
+    subjects = s;
+    if (selectedSubject && !s.some((sub) => sub.code === selectedSubject)) {
+      selectedSubject = "";
+    }
+  });
+});
+
+// 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;
+
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    performSearch(term, subject, q, open, off, sort);
+  }, 300);
+
+  return () => clearTimeout(searchTimeout);
+});
+
+// Reset offset when filters change (not offset itself)
+let prevFilters = $state("");
+$effect(() => {
+  const key = `${selectedTerm}|${selectedSubject}|${query}|${openOnly}`;
+  if (prevFilters && key !== prevFilters) {
+    offset = 0;
+  }
+  prevFilters = key;
+});
+
+async function performSearch(
+  term: string,
+  subject: string,
+  q: string,
+  open: boolean,
+  off: number,
+  sort: SortingState
+) {
+  if (!term) return;
+  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);
+  if (q) params.set("q", q);
+  if (open) params.set("open", "true");
+  if (off > 0) params.set("offset", String(off));
+  if (sortBy) params.set("sort_by", sortBy);
+  if (sortDir && sortBy) params.set("sort_dir", sortDir);
+  goto(`?${params.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });
+
+  try {
+    searchResult = await client.searchCourses({
+      term,
+      subject: subject || undefined,
+      q: q || undefined,
+      open_only: open || undefined,
+      limit,
+      offset: off,
+      sort_by: sortBy,
+      sort_dir: sortDir,
+    });
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Search failed";
+  } finally {
+    loading = false;
+  }
+}
+
+function handlePageChange(newOffset: number) {
+  offset = newOffset;
+}
+</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">
+    <!-- Title -->
+    <div class="text-center pt-8 pb-2">
+      <h1 class="text-2xl font-semibold text-foreground">UTSA Course Search</h1>
+    </div>
+
+    <!-- Filters -->
+    <SearchFilters
+      terms={data.terms}
+      {subjects}
+      bind:selectedTerm
+      bind:selectedSubject
+      bind:query
+      bind:openOnly
+    />
+
+    <!-- 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)}
+          class="mt-2 text-sm text-muted-foreground hover:underline"
+        >
+          Retry
+        </button>
+      </div>
+    {:else}
+      <CourseTable
+        courses={searchResult?.courses ?? []}
+        {loading}
+        {sorting}
+        onSortingChange={handleSortingChange}
+        manualSorting={true}
+      />
+
+      {#if searchResult}
+        <Pagination
+          totalCount={searchResult.totalCount}
+          offset={searchResult.offset}
+          {limit}
+          onPageChange={handlePageChange}
+        />
+      {/if}
+    {/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>
+  </div>
+</div>

web/src/routes/+page.ts

@@ -0,0 +1,8 @@
+import type { PageLoad } from "./$types";
+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 };
+};

web/src/routes/__root.tsx

@@ -1,34 +0,0 @@
-import { Outlet, createRootRoute } from "@tanstack/react-router";
-import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import { TanstackDevtools } from "@tanstack/react-devtools";
-import { Theme } from "@radix-ui/themes";
-import "@radix-ui/themes/styles.css";
-import { ThemeProvider } from "next-themes";
-
-export const Route = createRootRoute({
-  component: () => (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange={false}
-    >
-      <Theme accentColor="blue" grayColor="gray">
-        <Outlet />
-        {import.meta.env.DEV ? (
-          <TanstackDevtools
-            config={{
-              position: "bottom-left",
-            }}
-            plugins={[
-              {
-                name: "Tanstack Router",
-                render: <TanStackRouterDevtoolsPanel />,
-              },
-            ]}
-          />
-        ) : null}
-      </Theme>
-    </ThemeProvider>
-  ),
-});

web/src/routes/health/+page.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import {
+  Activity,
+  Bot,
+  CheckCircle,
+  Circle,
+  Clock,
+  Globe,
+  Hourglass,
+  MessageCircle,
+  WifiOff,
+  XCircle,
+} from "@lucide/svelte";
+import { Tooltip } from "bits-ui";
+import { type ServiceStatus, type ServiceInfo, type StatusResponse, client } from "$lib/api";
+import { relativeTime } from "$lib/time";
+
+const REFRESH_INTERVAL = import.meta.env.DEV ? 3000 : 30000;
+const REQUEST_TIMEOUT = 10000;
+
+const SERVICE_ICONS: Record<string, typeof Bot> = {
+  bot: Bot,
+  banner: Globe,
+  discord: MessageCircle,
+  database: Activity,
+  web: Globe,
+  scraper: Clock,
+};
+
+interface ResponseTiming {
+  health: number | null;
+  status: number | null;
+}
+
+interface Service {
+  name: string;
+  status: ServiceStatus;
+  icon: typeof Bot;
+}
+
+type StatusState =
+  | { mode: "loading" }
+  | { mode: "response"; timing: ResponseTiming; lastFetch: Date; status: StatusResponse }
+  | { mode: "error"; lastFetch: Date }
+  | { mode: "timeout"; lastFetch: Date };
+
+const STATUS_ICONS: Record<
+  ServiceStatus | "Unreachable",
+  { icon: typeof CheckCircle; color: string }
+> = {
+  active: { icon: CheckCircle, color: "var(--status-green)" },
+  connected: { icon: CheckCircle, color: "var(--status-green)" },
+  starting: { icon: Hourglass, color: "var(--status-orange)" },
+  disabled: { icon: Circle, color: "var(--status-gray)" },
+  error: { icon: XCircle, color: "var(--status-red)" },
+  Unreachable: { icon: WifiOff, color: "var(--status-red)" },
+};
+
+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(
+  statusState.mode === "timeout"
+    ? "Unreachable"
+    : statusState.mode === "error"
+      ? "error"
+      : statusState.mode === "response"
+        ? statusState.status.status
+        : "error"
+);
+
+const overallIcon = $derived(STATUS_ICONS[overallHealth]);
+
+const services: Service[] = $derived(
+  statusState.mode === "response"
+    ? (Object.entries(statusState.status.services) as [string, ServiceInfo][]).map(
+        ([id, info]) => ({
+          name: info.name,
+          status: info.status,
+          icon: SERVICE_ICONS[id] ?? Bot,
+        })
+      )
+    : []
+);
+
+const shouldShowTiming = $derived(
+  statusState.mode === "response" && statusState.timing.health !== null
+);
+
+const shouldShowLastFetch = $derived(
+  statusState.mode === "response" || statusState.mode === "error" || statusState.mode === "timeout"
+);
+
+const lastFetch = $derived(
+  statusState.mode === "response" || statusState.mode === "error" || statusState.mode === "timeout"
+    ? statusState.lastFetch
+    : null
+);
+
+const relativeLastFetchResult = $derived(lastFetch ? relativeTime(lastFetch, now) : null);
+const relativeLastFetch = $derived(relativeLastFetchResult?.text ?? "");
+
+function formatNumber(num: number): string {
+  return num.toLocaleString();
+}
+
+onMount(() => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let requestTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let nowTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  // Adaptive tick: schedules the next `now` update based on when the
+  // relative time text would actually change (every ~1s for recent
+  // timestamps, every ~1m for minute-level, etc.)
+  function scheduleNowTick() {
+    const delay = relativeLastFetchResult?.nextUpdateMs ?? 1000;
+    nowTimeoutId = setTimeout(() => {
+      now = new Date();
+      scheduleNowTick();
+    }, delay);
+  }
+  scheduleNowTick();
+
+  const fetchData = async () => {
+    try {
+      const startTime = Date.now();
+
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        requestTimeoutId = setTimeout(() => {
+          reject(new Error("Request timeout"));
+        }, REQUEST_TIMEOUT);
+      });
+
+      const statusData = await Promise.race([client.getStatus(), timeoutPromise]);
+
+      if (requestTimeoutId) {
+        clearTimeout(requestTimeoutId);
+        requestTimeoutId = null;
+      }
+
+      const responseTime = Date.now() - startTime;
+
+      statusState = {
+        mode: "response",
+        status: statusData,
+        timing: { health: responseTime, status: responseTime },
+        lastFetch: new Date(),
+      };
+    } catch (err) {
+      if (requestTimeoutId) {
+        clearTimeout(requestTimeoutId);
+        requestTimeoutId = null;
+      }
+
+      const message = err instanceof Error ? err.message : "";
+
+      if (message === "Request timeout") {
+        statusState = { mode: "timeout", lastFetch: new Date() };
+      } else {
+        statusState = { mode: "error", lastFetch: new Date() };
+      }
+    }
+
+    timeoutId = setTimeout(() => void fetchData(), REFRESH_INTERVAL);
+  };
+
+  void fetchData();
+
+  return () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    if (requestTimeoutId) clearTimeout(requestTimeoutId);
+    if (nowTimeoutId) clearTimeout(nowTimeoutId);
+  };
+});
+</script>
+
+<div class="min-h-screen flex flex-col items-center justify-center p-5">
+  <div
+    class="bg-card text-card-foreground rounded-xl border border-border p-6 w-full max-w-[400px] shadow-sm"
+  >
+    <div class="flex flex-col gap-4">
+      <!-- Overall Status -->
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <Activity
+            size={18}
+            color={isLoading ? undefined : overallIcon.color}
+            class={isLoading ? "animate-pulse" : ""}
+            style="opacity: {isLoading ? 0.3 : 1}; transition: opacity 2s ease-in-out, color 2s ease-in-out;"
+          />
+          <span class="text-base font-medium text-foreground">System Status</span>
+        </div>
+        {#if isLoading}
+          <div class="h-5 w-20 bg-muted rounded animate-pulse"></div>
+        {:else}
+          {#if overallIcon}
+            {@const OverallIconComponent = overallIcon.icon}
+            <div class="flex items-center gap-1.5">
+              <span
+                class="text-sm"
+                class:text-muted-foreground={overallHealth === "disabled"}
+                class:opacity-70={overallHealth === "disabled"}
+              >
+                {overallHealth}
+              </span>
+              <OverallIconComponent size={16} color={overallIcon.color} />
+            </div>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- Services -->
+      <div class="flex flex-col gap-3 mt-4">
+        {#if shouldShowSkeleton}
+          {#each Array(3) as _}
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <div class="h-6 w-[18px] bg-muted rounded animate-pulse"></div>
+                <div class="h-6 w-[60px] bg-muted rounded animate-pulse"></div>
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="h-5 w-[50px] bg-muted rounded animate-pulse"></div>
+                <div class="h-5 w-4 bg-muted rounded animate-pulse"></div>
+              </div>
+            </div>
+          {/each}
+        {:else}
+          {#each services as service (service.name)}
+            {@const statusInfo = STATUS_ICONS[service.status]}
+            {@const ServiceIcon = service.icon}
+            {@const StatusIconComponent = statusInfo.icon}
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <ServiceIcon size={18} />
+                <span class="text-muted-foreground">{service.name}</span>
+              </div>
+              <div class="flex items-center gap-1.5">
+                <span
+                  class="text-sm"
+                  class:text-muted-foreground={service.status === "disabled"}
+                  class:opacity-70={service.status === "disabled"}
+                >
+                  {service.status}
+                </span>
+                <StatusIconComponent size={16} color={statusInfo.color} />
+              </div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+
+      <!-- Timing & Last Updated -->
+      <div class="flex flex-col gap-2 mt-4 pt-4 border-t border-border">
+        {#if isLoading}
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <Hourglass size={13} />
+              <span class="text-sm text-muted-foreground">Response Time</span>
+            </div>
+            <div class="h-[18px] w-[50px] bg-muted rounded animate-pulse"></div>
+          </div>
+        {:else if shouldShowTiming && statusState.mode === "response"}
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <Hourglass size={13} />
+              <span class="text-sm text-muted-foreground">Response Time</span>
+            </div>
+            <span class="text-sm text-muted-foreground">
+              {formatNumber(statusState.timing.health!)}ms
+            </span>
+          </div>
+        {/if}
+
+        {#if isLoading}
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <Clock size={13} />
+              <span class="text-sm text-muted-foreground">Last Updated</span>
+            </div>
+            <span class="text-sm text-muted-foreground pb-0.5">Loading...</span>
+          </div>
+        {:else if shouldShowLastFetch && lastFetch}
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <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"
+              >
+                as of {lastFetch.toLocaleTimeString()}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </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>
+</div>

web/src/routes/index.tsx

@@ -1,419 +0,0 @@
-import { Card, Flex, Skeleton, Text, Tooltip } from "@radix-ui/themes";
-import { createFileRoute } from "@tanstack/react-router";
-import {
-  Activity,
-  Bot,
-  CheckCircle,
-  Circle,
-  Clock,
-  Globe,
-  Hourglass,
-  MessageCircle,
-  WifiOff,
-  XCircle,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import TimeAgo from "react-timeago";
-import { ThemeToggle } from "../components/ThemeToggle";
-import { type Status, type StatusResponse, client } from "../lib/api";
-import "../App.css";
-
-const REFRESH_INTERVAL = import.meta.env.DEV ? 3000 : 30000;
-const REQUEST_TIMEOUT = 10000; // 10 seconds
-
-const CARD_STYLES = {
-  padding: "24px",
-  maxWidth: "400px",
-  width: "100%",
-} as const;
-
-const BORDER_STYLES = {
-  marginTop: "16px",
-  paddingTop: "16px",
-  borderTop: "1px solid var(--gray-7)",
-} as const;
-
-const SERVICE_ICONS: Record<string, typeof Bot> = {
-  bot: Bot,
-  banner: Globe,
-  discord: MessageCircle,
-  database: Activity,
-  web: Globe,
-  scraper: Clock,
-};
-
-interface ResponseTiming {
-  health: number | null;
-  status: number | null;
-}
-
-interface StatusIcon {
-  icon: typeof CheckCircle;
-  color: string;
-}
-
-interface Service {
-  name: string;
-  status: Status;
-  icon: typeof Bot;
-}
-
-type StatusState =
-  | {
-      mode: "loading";
-    }
-  | {
-      mode: "response";
-      timing: ResponseTiming;
-      lastFetch: Date;
-      status: StatusResponse;
-    }
-  | {
-      mode: "error";
-      lastFetch: Date;
-    }
-  | {
-      mode: "timeout";
-      lastFetch: Date;
-    };
-
-const formatNumber = (num: number): string => {
-  return num.toLocaleString();
-};
-
-const getStatusIcon = (status: Status | "Unreachable"): StatusIcon => {
-  const statusMap: Record<Status | "Unreachable", StatusIcon> = {
-    active: { icon: CheckCircle, color: "green" },
-    connected: { icon: CheckCircle, color: "green" },
-    starting: { icon: Hourglass, color: "orange" },
-    disabled: { icon: Circle, color: "gray" },
-    error: { icon: XCircle, color: "red" },
-    Unreachable: { icon: WifiOff, color: "red" },
-  };
-
-  return statusMap[status];
-};
-
-const getOverallHealth = (state: StatusState): Status | "Unreachable" => {
-  if (state.mode === "timeout") return "Unreachable";
-  if (state.mode === "error") return "error";
-  if (state.mode === "response") return state.status.status;
-  return "error";
-};
-
-const getServices = (state: StatusState): Service[] => {
-  if (state.mode !== "response") return [];
-
-  return Object.entries(state.status.services).map(([serviceId, serviceInfo]) => ({
-    name: serviceInfo.name,
-    status: serviceInfo.status,
-    icon: SERVICE_ICONS[serviceId] || SERVICE_ICONS.default,
-  }));
-};
-
-const StatusDisplay = ({ status }: { status: Status | "Unreachable" }) => {
-  const { icon: Icon, color } = getStatusIcon(status);
-
-  return (
-    <Flex align="center" gap="2">
-      <Text
-        size="2"
-        style={{
-          color: status === "disabled" ? "var(--gray-11)" : undefined,
-          opacity: status === "disabled" ? 0.7 : undefined,
-        }}
-      >
-        {status}
-      </Text>
-      <Icon color={color} size={16} />
-    </Flex>
-  );
-};
-
-const ServiceStatus = ({ service }: { service: Service }) => {
-  return (
-    <Flex align="center" justify="between">
-      <Flex align="center" gap="2">
-        <service.icon size={18} />
-        <Text style={{ color: "var(--gray-11)" }}>{service.name}</Text>
-      </Flex>
-      <StatusDisplay status={service.status} />
-    </Flex>
-  );
-};
-
-const SkeletonService = () => {
-  return (
-    <Flex align="center" justify="between">
-      <Flex align="center" gap="2">
-        <Skeleton height="24px" width="18px" />
-        <Skeleton height="24px" width="60px" />
-      </Flex>
-      <Flex align="center" gap="2">
-        <Skeleton height="20px" width="50px" />
-        <Skeleton height="20px" width="16px" />
-      </Flex>
-    </Flex>
-  );
-};
-
-const TimingRow = ({
-  icon: Icon,
-  name,
-  children,
-}: {
-  icon: React.ComponentType<{ size?: number }>;
-  name: string;
-  children: React.ReactNode;
-}) => (
-  <Flex align="center" justify="between">
-    <Flex align="center" gap="2">
-      <Icon size={13} />
-      <Text size="2" color="gray">
-        {name}
-      </Text>
-    </Flex>
-    {children}
-  </Flex>
-);
-
-function App() {
-  const [state, setState] = useState<StatusState>({ mode: "loading" });
-
-  // State helpers
-  const isLoading = state.mode === "loading";
-  const hasError = state.mode === "error";
-  const hasTimeout = state.mode === "timeout";
-  const hasResponse = state.mode === "response";
-  const shouldShowSkeleton = isLoading || hasError;
-  const shouldShowTiming = hasResponse && state.timing.health !== null;
-  const shouldShowLastFetch = hasResponse || hasError || hasTimeout;
-
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout | null = null;
-    let requestTimeoutId: NodeJS.Timeout | null = null;
-
-    const fetchData = async () => {
-      try {
-        const startTime = Date.now();
-
-        // Create a timeout promise with cleanup tracking
-        const timeoutPromise = new Promise<never>((_, reject) => {
-          requestTimeoutId = setTimeout(() => {
-            reject(new Error("Request timeout"));
-          }, REQUEST_TIMEOUT);
-        });
-
-        // Race between the API call and timeout
-        const statusData = await Promise.race([client.getStatus(), timeoutPromise]);
-
-        // Clear the timeout if the request succeeded
-        if (requestTimeoutId) {
-          clearTimeout(requestTimeoutId);
-          requestTimeoutId = null;
-        }
-
-        const endTime = Date.now();
-        const responseTime = endTime - startTime;
-
-        setState({
-          mode: "response",
-          status: statusData,
-          timing: { health: responseTime, status: responseTime },
-          lastFetch: new Date(),
-        });
-      } catch (err) {
-        // Clear the timeout on error as well
-        if (requestTimeoutId) {
-          clearTimeout(requestTimeoutId);
-          requestTimeoutId = null;
-        }
-
-        const errorMessage = err instanceof Error ? err.message : "Failed to fetch data";
-
-        if (errorMessage === "Request timeout") {
-          setState({
-            mode: "timeout",
-            lastFetch: new Date(),
-          });
-        } else {
-          setState({
-            mode: "error",
-            lastFetch: new Date(),
-          });
-        }
-      }
-
-      // Schedule the next request after the current one completes
-      timeoutId = setTimeout(() => void fetchData(), REFRESH_INTERVAL);
-    };
-
-    // Start the first request immediately
-    void fetchData();
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      if (requestTimeoutId) {
-        clearTimeout(requestTimeoutId);
-      }
-    };
-  }, []);
-
-  const overallHealth = getOverallHealth(state);
-  const { color: overallColor } = getStatusIcon(overallHealth);
-  const services = getServices(state);
-
-  return (
-    <div className="App">
-      <div
-        style={{
-          position: "fixed",
-          top: "20px",
-          right: "20px",
-          zIndex: 1000,
-        }}
-      >
-        <ThemeToggle />
-      </div>
-
-      <Flex
-        direction="column"
-        align="center"
-        justify="center"
-        style={{ minHeight: "100vh", padding: "20px" }}
-      >
-        <Card style={CARD_STYLES}>
-          <Flex direction="column" gap="4">
-            {/* Overall Status */}
-            <Flex align="center" justify="between">
-              <Flex align="center" gap="2">
-                <Activity
-                  color={isLoading ? undefined : overallColor}
-                  size={18}
-                  className={isLoading ? "animate-pulse" : ""}
-                  style={{
-                    opacity: isLoading ? 0.3 : 1,
-                    transition: "opacity 2s ease-in-out, color 2s ease-in-out",
-                  }}
-                />
-                <Text size="4" style={{ color: "var(--gray-12)" }}>
-                  System Status
-                </Text>
-              </Flex>
-              {isLoading ? (
-                <Skeleton height="20px" width="80px" />
-              ) : (
-                <StatusDisplay status={overallHealth} />
-              )}
-            </Flex>
-
-            {/* Individual Services */}
-            <Flex direction="column" gap="3" style={{ marginTop: "16px" }}>
-              {shouldShowSkeleton
-                ? // Show skeleton for 3 services during initial loading only
-                  Array.from({ length: 3 }).map((_, index) => <SkeletonService key={index} />)
-                : services.map((service) => <ServiceStatus key={service.name} service={service} />)}
-            </Flex>
-
-            <Flex direction="column" gap="2" style={BORDER_STYLES}>
-              {isLoading ? (
-                <TimingRow icon={Hourglass} name="Response Time">
-                  <Skeleton height="18px" width="50px" />
-                </TimingRow>
-              ) : shouldShowTiming ? (
-                <TimingRow icon={Hourglass} name="Response Time">
-                  <Text size="2" style={{ color: "var(--gray-11)" }}>
-                    {formatNumber(state.timing.health!)}ms
-                  </Text>
-                </TimingRow>
-              ) : null}
-
-              {shouldShowLastFetch ? (
-                <TimingRow icon={Clock} name="Last Updated">
-                  {isLoading ? (
-                    <Text size="2" style={{ paddingBottom: "2px" }} color="gray">
-                      Loading...
-                    </Text>
-                  ) : (
-                    <Tooltip content={`as of ${state.lastFetch.toLocaleTimeString()}`}>
-                      <abbr
-                        style={{
-                          cursor: "pointer",
-                          textDecoration: "underline",
-                          textDecorationStyle: "dotted",
-                          textDecorationColor: "var(--gray-6)",
-                          textUnderlineOffset: "6px",
-                        }}
-                      >
-                        <Text size="2" style={{ color: "var(--gray-11)" }}>
-                          <TimeAgo date={state.lastFetch} />
-                        </Text>
-                      </abbr>
-                    </Tooltip>
-                  )}
-                </TimingRow>
-              ) : isLoading ? (
-                <TimingRow icon={Clock} name="Last Updated">
-                  <Text size="2" color="gray">
-                    Loading...
-                  </Text>
-                </TimingRow>
-              ) : null}
-            </Flex>
-          </Flex>
-        </Card>
-        <Flex justify="center" style={{ marginTop: "12px" }} gap="2" align="center">
-          {__APP_VERSION__ && (
-            <Text
-              size="1"
-              style={{
-                color: "var(--gray-11)",
-              }}
-            >
-              v{__APP_VERSION__}
-            </Text>
-          )}
-          {__APP_VERSION__ && (
-            <div
-              style={{
-                width: "1px",
-                height: "12px",
-                backgroundColor: "var(--gray-10)",
-                opacity: 0.3,
-              }}
-            />
-          )}
-          <Text
-            size="1"
-            style={{
-              color: "var(--gray-11)",
-              textDecoration: "none",
-            }}
-          >
-            <a
-              href={
-                hasResponse && state.status.commit
-                  ? `https://github.com/Xevion/banner/commit/${state.status.commit}`
-                  : "https://github.com/Xevion/banner"
-              }
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                color: "inherit",
-                textDecoration: "none",
-              }}
-            >
-              GitHub
-            </a>
-          </Text>
-        </Flex>
-      </Flex>
-    </div>
-  );
-}
-
-export const Route = createFileRoute("/")({
-  component: App,
-});

web/src/routes/layout.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "@fontsource-variable/inter";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --border: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --status-green: oklch(0.65 0.2 145);
+  --status-red: oklch(0.63 0.2 25);
+  --status-orange: oklch(0.75 0.18 70);
+  --status-gray: oklch(0.556 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --border: oklch(0.269 0 0);
+  --ring: oklch(0.556 0 0);
+
+  --status-green: oklch(0.72 0.19 145);
+  --status-red: oklch(0.7 0.19 25);
+  --status-orange: oklch(0.8 0.16 70);
+  --status-gray: oklch(0.708 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-status-green: var(--status-green);
+  --color-status-red: var(--status-red);
+  --color-status-orange: var(--status-orange);
+  --color-status-gray: var(--status-gray);
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+* {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+}
+
+body,
+body * {
+  transition: background-color 300ms, color 300ms, border-color 300ms, fill 300ms;
+}
+
+/* View Transitions API - disable default cross-fade so JS can animate clip-path */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* OverlayScrollbars — custom handle colors per theme */
+:root .os-scrollbar {
+  --os-handle-bg: rgba(0, 0, 0, 0.25);
+  --os-handle-bg-hover: rgba(0, 0, 0, 0.35);
+  --os-handle-bg-active: rgba(0, 0, 0, 0.45);
+}
+
+.dark .os-scrollbar {
+  --os-handle-bg: rgba(255, 255, 255, 0.35);
+  --os-handle-bg-hover: rgba(255, 255, 255, 0.45);
+  --os-handle-bg-active: rgba(255, 255, 255, 0.55);
+}
+
+.os-scrollbar-handle {
+  border-radius: 4px;
+}
+
+/* Hide native scrollbars on body — OverlayScrollbars takes over */
+html,
+body {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}

web/src/styles.css

@@ -1,13 +0,0 @@
-@import "@radix-ui/themes/styles.css";
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}

web/src/vite-env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const __APP_VERSION__: string;

web/svelte.config.js

@@ -0,0 +1,17 @@
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      pages: "dist",
+      assets: "dist",
+      fallback: "index.html",
+      precompress: false,
+    }),
+  },
+};
+
+export default config;

web/tsconfig.json

@@ -1,29 +1,10 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noEmit": true,
-
-    /* Linting */
-    "skipLibCheck": true,
     "strict": true,
+    "skipLibCheck": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "noFallthroughCasesInSwitch": true
   }
 }

web/vite.config.ts

@@ -1,51 +1,35 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
-import viteReact from "@vitejs/plugin-react";
-import tanstackRouter from "@tanstack/router-plugin/vite";
 import { resolve } from "node:path";
 import { readFileSync, existsSync } from "node:fs";
 
-// Extract version from Cargo.toml
 function getVersion() {
   const filename = "Cargo.toml";
   const paths = [resolve(__dirname, filename), resolve(__dirname, "..", filename)];
 
   for (const path of paths) {
     try {
-      // Check if file exists before reading
-      if (!existsSync(path)) {
-        console.log("Skipping ", path, " because it does not exist");
-        continue;
-      }
-
-      const cargoTomlContent = readFileSync(path, "utf8");
-      const versionMatch = cargoTomlContent.match(/^version\s*=\s*"([^"]+)"/m);
-      if (versionMatch) {
-        console.log("Found version in ", path, ": ", versionMatch[1]);
-        return versionMatch[1];
-      }
-    } catch (error) {
-      console.warn("Failed to read Cargo.toml at path: ", path, error);
+      if (!existsSync(path)) continue;
+      const content = readFileSync(path, "utf8");
+      const match = content.match(/^version\s*=\s*"([^"]+)"/m);
+      if (match) return match[1];
+    } catch {
       // Continue to next path
     }
   }
 
-  console.warn("Could not read version from Cargo.toml in any location");
   return "unknown";
 }
 
 const version = getVersion();
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [tanstackRouter({ autoCodeSplitting: true }), viteReact()],
+  plugins: [tailwindcss(), sveltekit()],
   test: {
     globals: true,
     environment: "jsdom",
-  },
-  resolve: {
-    alias: {
-      "@": resolve(__dirname, "./src"),
-    },
+    include: ["src/**/*.test.ts"],
   },
   server: {
     port: 3000,
@@ -58,7 +42,6 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: "dist",
     sourcemap: true,
   },
   define: {