fix: make version retrieval search current dir, add basic logs, existence check

Cargo.lock

@@ -218,7 +218,7 @@ dependencies = [
 
 [[package]]
 name = "banner"
-version = "0.2.3"
+version = "0.3.3"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -258,6 +258,7 @@ dependencies = [
  "tracing",
  "tracing-subscriber",
  "url",
+ "yansi",
 ]
 
 [[package]]

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "banner"
-version = "0.2.3"
+version = "0.3.3"
 edition = "2024"
 default-run = "banner"
 
@@ -49,6 +49,7 @@ rust-embed = { version = "8.0", features = ["debug-embed", "include-exclude"] }
 mime_guess = "2.0"
 clap = { version = "4.5", features = ["derive"] }
 rapidhash = "4.1.0"
+yansi = "1.0.1"
 
 [dev-dependencies]
 

Dockerfile

@@ -1,5 +1,6 @@
 # Build arguments
 ARG RUST_VERSION=1.89.0
+ARG RAILWAY_GIT_COMMIT_SHA
 
 # Frontend Build Stage
 FROM node:22-bookworm-slim AS frontend-builder
@@ -9,6 +10,9 @@ RUN npm install -g pnpm
 
 WORKDIR /app
 
+# Copy backend Cargo.toml for build-time version retrieval
+COPY ./Cargo.toml ./
+
 # Copy frontend package files
 COPY ./web/package.json ./web/pnpm-lock.yaml ./
 
@@ -24,10 +28,14 @@ RUN pnpm run build
 # Rust Build Stage
 FROM rust:${RUST_VERSION}-bookworm AS builder
 
+# Set build-time environment variable for Railway Git commit SHA
+ENV RAILWAY_GIT_COMMIT_SHA=${RAILWAY_GIT_COMMIT_SHA}
+
 # Install build dependencies
 RUN apt-get update && apt-get install -y \
     pkg-config \
     libssl-dev \
+    git \
     && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /usr/src
@@ -37,12 +45,20 @@ WORKDIR /usr/src/banner
 # Copy dependency files for better layer caching
 COPY ./Cargo.toml ./Cargo.lock* ./
 
+# Copy .git directory for build.rs to access Git information (if available)
+# This will copy .git (and .gitignore) if it exists, but won't fail if it doesn't
+# While normally a COPY requires at least one file, .gitignore should still be available, so this wildcard should always work
+COPY ./.git* ./
+
+# Copy build.rs early so it can run during the first build
+COPY ./build.rs ./
+
 # Build empty app with downloaded dependencies to produce a stable image layer for next build
 RUN cargo build --release
 
 # Copy source code
 RUN rm src/*.rs
-COPY ./src ./src
+COPY ./src ./src/
 
 # Copy built frontend assets
 COPY --from=frontend-builder /app/dist ./web/dist

Justfile

@@ -9,8 +9,8 @@ build-frontend:
     pnpm run -C web build
 
 # Auto-reloading backend server
-backend services=default_services:
-    bacon --headless run -- -- --services "{{services}}"
+backend *ARGS:
+    bacon --headless run -- -- {{ARGS}}
 
 # Production build
 build:
@@ -19,10 +19,10 @@ build:
 
 # Run auto-reloading development build with release characteristics (frontend is embedded, non-auto-reloading)
 # This is useful for testing backend release-mode details.
-dev-build services=default_services: build-frontend
-    bacon --headless run -- --profile dev-release -- --services "{{services}}" --tracing pretty
+dev-build *ARGS='--services web --tracing pretty': build-frontend
+    bacon --headless run -- --profile dev-release -- {{ARGS}}
 
 # Auto-reloading development build for both frontend and backend
 # Will not notice if either the frontend/backend crashes, but will generally be resistant to stopping on their own.
 [parallel]
-dev services=default_services: frontend (backend services)
+dev *ARGS='--services web,bot': frontend (backend ARGS)

README.md

@@ -30,7 +30,7 @@ pnpm install -C web  # Install frontend dependencies
 cargo build  # Build the backend
 
 just dev # Runs auto-reloading dev build
-just dev bot,web # Runs auto-reloading dev build, running only the bot and web services
+just dev --services bot,web # Runs auto-reloading dev build, running only the bot and web services
 just dev-build # Development build with release characteristics (frontend is embedded, non-auto-reloading)
 
 just build # Production build that embeds assets

build.rs

@@ -0,0 +1,36 @@
+use std::process::Command;
+
+fn main() {
+    // Try to get Git commit hash from Railway environment variable first
+    let git_hash = std::env::var("RAILWAY_GIT_COMMIT_SHA").unwrap_or_else(|_| {
+        // Fallback to git command if not on Railway
+        let output = Command::new("git").args(["rev-parse", "HEAD"]).output();
+        match output {
+            Ok(output) => {
+                if output.status.success() {
+                    String::from_utf8_lossy(&output.stdout).trim().to_string()
+                } else {
+                    "unknown".to_string()
+                }
+            }
+            Err(_) => "unknown".to_string(),
+        }
+    });
+
+    // Get the short hash (first 7 characters)
+    let short_hash = if git_hash != "unknown" && git_hash.len() >= 7 {
+        git_hash[..7].to_string()
+    } else {
+        git_hash.clone()
+    };
+
+    // Set the environment variables that will be available at compile time
+    println!("cargo:rustc-env=GIT_COMMIT_HASH={}", git_hash);
+    println!("cargo:rustc-env=GIT_COMMIT_SHORT={}", short_hash);
+
+    // Rebuild if the Git commit changes (only works when .git directory is available)
+    if std::path::Path::new(".git/HEAD").exists() {
+        println!("cargo:rerun-if-changed=.git/HEAD");
+        println!("cargo:rerun-if-changed=.git/refs/heads");
+    }
+}

src/formatter.rs

@@ -10,6 +10,7 @@ use tracing::{Event, Level, Subscriber};
 use tracing_subscriber::fmt::format::Writer;
 use tracing_subscriber::fmt::{FmtContext, FormatEvent, FormatFields, FormattedFields};
 use tracing_subscriber::registry::LookupSpan;
+use yansi::Paint;
 
 /// Cached format description for timestamps
 /// Uses 3 subsecond digits on Emscripten, 5 otherwise for better performance
@@ -26,11 +27,6 @@ const TIMESTAMP_FORMAT: &[FormatItem<'static>] =
 /// Re-implementation of the Full formatter with improved timestamp display.
 pub struct CustomPrettyFormatter;
 
-/// A custom JSON formatter that flattens fields to root level
-///
-/// Outputs logs in the format: { "message": "...", "level": "...", "customAttribute": "..." }
-pub struct CustomJsonFormatter;
-
 impl<S, N> FormatEvent<S, N> for CustomPrettyFormatter
 where
     S: Subscriber + for<'a> LookupSpan<'a>,
@@ -63,20 +59,20 @@ where
             for span in scope.from_root() {
                 write_bold(&mut writer, span.metadata().name())?;
                 saw_any = true;
+
+                write_dimmed(&mut writer, ":")?;
+
                 let ext = span.extensions();
-                if let Some(fields) = &ext.get::<FormattedFields<N>>() {
-                    if !fields.is_empty() {
-                        write_bold(&mut writer, "{")?;
-                        write!(writer, "{}", fields)?;
-                        write_bold(&mut writer, "}")?;
-                    }
-                }
-                if writer.has_ansi_escapes() {
-                    write!(writer, "\x1b[2m:\x1b[0m")?;
-                } else {
-                    writer.write_char(':')?;
+                if let Some(fields) = &ext.get::<FormattedFields<N>>()
+                    && !fields.fields.is_empty()
+                {
+                    write_bold(&mut writer, "{")?;
+                    writer.write_str(fields.fields.as_str())?;
+                    write_bold(&mut writer, "}")?;
                 }
+                write_dimmed(&mut writer, ":")?;
             }
+
             if saw_any {
                 writer.write_char(' ')?;
             }
@@ -84,7 +80,7 @@ where
 
         // 4) Target (dimmed), then a space
         if writer.has_ansi_escapes() {
-            write!(writer, "\x1b[2m{}\x1b[0m\x1b[2m:\x1b[0m ", meta.target())?;
+            write!(writer, "{}: ", Paint::new(meta.target()).dim())?;
         } else {
             write!(writer, "{}: ", meta.target())?;
         }
@@ -97,6 +93,11 @@ where
     }
 }
 
+/// A custom JSON formatter that flattens fields to root level
+///
+/// Outputs logs in the format: { "message": "...", "level": "...", "customAttribute": "..." }
+pub struct CustomJsonFormatter;
+
 impl<S, N> FormatEvent<S, N> for CustomJsonFormatter
 where
     S: Subscriber + for<'a> LookupSpan<'a>,
@@ -104,7 +105,7 @@ where
 {
     fn format_event(
         &self,
-        _ctx: &FmtContext<'_, S, N>,
+        ctx: &FmtContext<'_, S, N>,
         mut writer: Writer<'_>,
         event: &Event<'_>,
     ) -> fmt::Result {
@@ -116,12 +117,15 @@ where
             level: String,
             target: String,
             #[serde(flatten)]
+            spans: Map<String, Value>,
+            #[serde(flatten)]
             fields: Map<String, Value>,
         }
 
-        let (message, fields) = {
+        let (message, fields, spans) = {
             let mut message: Option<String> = None;
             let mut fields: Map<String, Value> = Map::new();
+            let mut spans: Map<String, Value> = Map::new();
 
             struct FieldVisitor<'a> {
                 message: &'a mut Option<String>,
@@ -184,13 +188,42 @@ where
             };
             event.record(&mut visitor);
 
-            (message, fields)
+            // Collect span information from the span hierarchy
+            if let Some(scope) = ctx.event_scope() {
+                for span in scope.from_root() {
+                    let span_name = span.metadata().name().to_string();
+                    let mut span_fields: Map<String, Value> = Map::new();
+
+                    // Try to extract fields from FormattedFields
+                    let ext = span.extensions();
+                    if let Some(formatted_fields) = ext.get::<FormattedFields<N>>() {
+                        // Try to parse as JSON first
+                        if let Ok(json_fields) = serde_json::from_str::<Map<String, Value>>(
+                            formatted_fields.fields.as_str(),
+                        ) {
+                            span_fields.extend(json_fields);
+                        } else {
+                            // If not valid JSON, treat the entire field string as a single field
+                            span_fields.insert(
+                                "raw".to_string(),
+                                Value::String(formatted_fields.fields.as_str().to_string()),
+                            );
+                        }
+                    }
+
+                    // Insert span as a nested object directly into the spans map
+                    spans.insert(span_name, Value::Object(span_fields));
+                }
+            }
+
+            (message, fields, spans)
         };
 
         let json = EventFields {
             message: message.unwrap_or_default(),
             level: meta.level().to_string(),
             target: meta.target().to_string(),
+            spans,
             fields,
         };
 
@@ -205,15 +238,14 @@ where
 /// Write the verbosity level with the same coloring/alignment as the Full formatter.
 fn write_colored_level(writer: &mut Writer<'_>, level: &Level) -> fmt::Result {
     if writer.has_ansi_escapes() {
-        // Basic ANSI color sequences; reset with \x1b[0m
-        let (color, text) = match *level {
-            Level::TRACE => ("\x1b[35m", "TRACE"), // purple
-            Level::DEBUG => ("\x1b[34m", "DEBUG"), // blue
-            Level::INFO => ("\x1b[32m", " INFO"),  // green, note leading space
-            Level::WARN => ("\x1b[33m", " WARN"),  // yellow, note leading space
-            Level::ERROR => ("\x1b[31m", "ERROR"), // red
+        let paint = match *level {
+            Level::TRACE => Paint::new("TRACE").magenta(),
+            Level::DEBUG => Paint::new("DEBUG").blue(),
+            Level::INFO => Paint::new(" INFO").green(),
+            Level::WARN => Paint::new(" WARN").yellow(),
+            Level::ERROR => Paint::new("ERROR").red(),
         };
-        write!(writer, "{}{}\x1b[0m", color, text)
+        write!(writer, "{}", paint)
     } else {
         // Right-pad to width 5 like Full's non-ANSI mode
         match *level {
@@ -228,7 +260,7 @@ fn write_colored_level(writer: &mut Writer<'_>, level: &Level) -> fmt::Result {
 
 fn write_dimmed(writer: &mut Writer<'_>, s: impl fmt::Display) -> fmt::Result {
     if writer.has_ansi_escapes() {
-        write!(writer, "\x1b[2m{}\x1b[0m", s)
+        write!(writer, "{}", Paint::new(s).dim())
     } else {
         write!(writer, "{}", s)
     }
@@ -236,7 +268,7 @@ fn write_dimmed(writer: &mut Writer<'_>, s: impl fmt::Display) -> fmt::Result {
 
 fn write_bold(writer: &mut Writer<'_>, s: impl fmt::Display) -> fmt::Result {
     if writer.has_ansi_escapes() {
-        write!(writer, "\x1b[1m{}\x1b[0m", s)
+        write!(writer, "{}", Paint::new(s).bold())
     } else {
         write!(writer, "{}", s)
     }

src/main.rs

@@ -1,9 +1,10 @@
 use clap::Parser;
 use figment::value::UncasedStr;
 use num_format::{Locale, ToFormattedString};
-use serenity::all::{ActivityData, ClientBuilder, Context, GatewayIntents};
+use serenity::all::{ActivityData, ClientBuilder, GatewayIntents};
 use tokio::signal;
-use tracing::{error, info, warn};
+use tracing::{debug, error, info, warn};
+use tracing_subscriber::fmt::format::JsonFields;
 use tracing_subscriber::{EnvFilter, FmtSubscriber};
 
 use crate::banner::BannerApi;
@@ -17,6 +18,7 @@ use crate::web::routes::BannerState;
 use figment::{Figment, providers::Env};
 use sqlx::postgres::PgPoolOptions;
 use std::sync::Arc;
+use std::time::Duration;
 
 mod banner;
 mod bot;
@@ -128,18 +130,6 @@ fn determine_enabled_services(args: &Args) -> Result<Vec<ServiceName>, anyhow::E
     }
 }
 
-async fn update_bot_status(ctx: &Context, app_state: &AppState) -> Result<(), anyhow::Error> {
-    let course_count = app_state.get_course_count().await?;
-
-    ctx.set_activity(Some(ActivityData::playing(format!(
-        "Querying {:} classes",
-        course_count.to_formatted_string(&Locale::en)
-    ))));
-
-    tracing::info!(course_count = course_count, "Updated bot status");
-    Ok(())
-}
-
 #[tokio::main]
 async fn main() {
     dotenvy::dotenv().ok();
@@ -196,6 +186,7 @@ async fn main() {
             FmtSubscriber::builder()
                 .with_target(true)
                 .event_format(formatter::CustomJsonFormatter)
+                .fmt_fields(JsonFields::new())
                 .with_env_filter(filter)
                 .finish(),
         )
@@ -311,19 +302,59 @@ async fn main() {
                 let status_app_state = app_state.clone();
                 let status_ctx = ctx.clone();
                 tokio::spawn(async move {
-                    let mut interval = tokio::time::interval(std::time::Duration::from_secs(30));
-
-                    // Update status immediately on startup
-                    if let Err(e) = update_bot_status(&status_ctx, &status_app_state).await {
-                        tracing::error!(error = %e, "Failed to update status on startup");
-                    }
+                    let max_interval = Duration::from_secs(300); // 5 minutes
+                    let base_interval = Duration::from_secs(30);
+                    let mut interval = tokio::time::interval(base_interval);
+                    let mut previous_course_count: Option<i64> = None;
 
+                    // This runs once immediately on startup, then with adaptive intervals
                     loop {
                         interval.tick().await;
 
-                        if let Err(e) = update_bot_status(&status_ctx, &status_app_state).await {
-                            tracing::error!(error = %e, "Failed to update bot status");
+                        // Get the course count, update the activity if it has changed/hasn't been set this session
+                        let course_count = status_app_state.get_course_count().await.unwrap();
+                        if previous_course_count.is_none()
+                            || previous_course_count != Some(course_count)
+                        {
+                            status_ctx.set_activity(Some(ActivityData::playing(format!(
+                                "Querying {:} classes",
+                                course_count.to_formatted_string(&Locale::en)
+                            ))));
                         }
+
+                        // Increase or reset the interval
+                        interval = tokio::time::interval(
+                            // Avoid logging the first 'change'
+                            if course_count != previous_course_count.unwrap_or(0) {
+                                if previous_course_count.is_some() {
+                                    debug!(
+                                        new_course_count = course_count,
+                                        last_interval = interval.period().as_secs(),
+                                        "Course count changed, resetting interval"
+                                    );
+                                }
+
+                                // Record the new course count
+                                previous_course_count = Some(course_count);
+
+                                // Reset to base interval
+                                base_interval
+                            } else {
+                                // Increase interval by 10% (up to maximum)
+                                let new_interval = interval.period().mul_f32(1.1).min(max_interval);
+                                debug!(
+                                    current_course_count = course_count,
+                                    last_interval = interval.period().as_secs(),
+                                    new_interval = new_interval.as_secs(),
+                                    "Course count unchanged, increasing interval"
+                                );
+
+                                new_interval
+                            },
+                        );
+
+                        // Reset the interval, otherwise it will tick again immediately
+                        interval.reset();
                     }
                 });
 

src/web/routes.rs

@@ -2,19 +2,22 @@
 
 use axum::{
     Router,
+    body::Body,
     extract::{Request, State},
     http::{HeaderMap, HeaderValue, StatusCode, Uri},
     response::{Html, IntoResponse, Json, Response},
     routing::get,
 };
 use http::header;
+use serde::Serialize;
 use serde_json::{Value, json};
-use std::sync::Arc;
+use std::{collections::BTreeMap, sync::Arc, time::Duration};
 use tower_http::{
+    classify::ServerErrorsFailureClass,
     cors::{Any, CorsLayer},
     trace::TraceLayer,
 };
-use tracing::info;
+use tracing::{Span, debug, info, warn};
 
 use crate::web::assets::{WebAssets, get_asset_metadata_cached};
 
@@ -70,47 +73,63 @@ pub fn create_router(state: BannerState) -> Router {
         .route("/metrics", get(metrics))
         .with_state(state);
 
-    if cfg!(debug_assertions) {
-        // Development mode: API routes only, frontend served by Vite dev server
-        Router::new()
-            .route("/", get(root))
-            .nest("/api", api_router)
-            .layer(
-                CorsLayer::new()
-                    .allow_origin(Any)
-                    .allow_methods(Any)
-                    .allow_headers(Any),
-            )
-            .layer(TraceLayer::new_for_http())
-    } else {
-        // Production mode: serve embedded assets and handle SPA routing
-        Router::new()
-            .route("/", get(root))
-            .nest("/api", api_router)
-            .fallback(fallback)
-            .layer(TraceLayer::new_for_http())
-    }
-}
+    let mut router = Router::new().nest("/api", api_router);
 
-async fn root() -> Response {
     if cfg!(debug_assertions) {
-        // Development mode: return API info
-        Json(json!({
-            "message": "Banner Discord Bot API",
-            "version": "0.2.1",
-            "mode": "development",
-            "frontend": "http://localhost:3000",
-            "endpoints": {
-                "health": "/api/health",
-                "status": "/api/status",
-                "metrics": "/api/metrics"
-            }
-        }))
-        .into_response()
+        router = router.layer(
+            CorsLayer::new()
+                .allow_origin(Any)
+                .allow_methods(Any)
+                .allow_headers(Any),
+        )
     } else {
-        // Production mode: serve the SPA index.html
-        handle_spa_fallback_with_headers(Uri::from_static("/"), HeaderMap::new()).await
+        router = router.fallback(fallback);
     }
+
+    router.layer(
+        TraceLayer::new_for_http()
+            .make_span_with(|request: &Request<Body>| {
+                tracing::debug_span!("request", path = request.uri().path())
+            })
+            .on_request(())
+            .on_body_chunk(())
+            .on_eos(())
+            .on_response(
+                |response: &Response<Body>, latency: Duration, _span: &Span| {
+                    let latency_threshold = if cfg!(debug_assertions) {
+                        Duration::from_millis(100)
+                    } else {
+                        Duration::from_millis(1000)
+                    };
+
+                    // Format latency, status, and code
+                    let (latency_str, status) = (
+                        format!("{latency:.2?}"),
+                        format!(
+                            "{} {}",
+                            response.status().as_u16(),
+                            response.status().canonical_reason().unwrap_or("??")
+                        ),
+                    );
+
+                    // Log in warn if latency is above threshold, otherwise debug
+                    if latency > latency_threshold {
+                        warn!(latency = latency_str, status = status, "Response");
+                    } else {
+                        debug!(latency = latency_str, status = status, "Response");
+                    }
+                },
+            )
+            .on_failure(
+                |error: ServerErrorsFailureClass, latency: Duration, _span: &Span| {
+                    warn!(
+                        error = ?error,
+                        latency = format!("{latency:.2?}"),
+                        "Request failed"
+                    );
+                },
+            ),
+    )
 }
 
 /// Handler that extracts request information for caching
@@ -193,25 +212,78 @@ async fn health() -> Json<Value> {
     }))
 }
 
+#[derive(Serialize)]
+enum Status {
+    Disabled,
+    Connected,
+    Active,
+    Healthy,
+    Error,
+}
+
+#[derive(Serialize)]
+struct ServiceInfo {
+    name: String,
+    status: Status,
+}
+
+#[derive(Serialize)]
+struct StatusResponse {
+    status: Status,
+    version: String,
+    commit: String,
+    services: BTreeMap<String, ServiceInfo>,
+}
+
 /// Status endpoint showing bot and system status
-async fn status(State(_state): State<BannerState>) -> Json<Value> {
-    // For now, return basic status without accessing private fields
-    Json(json!({
-        "status": "operational",
-        "bot": {
-            "status": "running",
-            "uptime": "TODO: implement uptime tracking"
+async fn status(State(_state): State<BannerState>) -> Json<StatusResponse> {
+    let mut services = BTreeMap::new();
+
+    // Bot service status - hardcoded as disabled for now
+    services.insert(
+        "bot".to_string(),
+        ServiceInfo {
+            name: "Bot".to_string(),
+            status: Status::Disabled,
         },
-        "cache": {
-            "status": "connected",
-            "courses": "TODO: implement course counting",
-            "subjects": "TODO: implement subject counting"
+    );
+
+    // Banner API status - always connected for now
+    services.insert(
+        "banner".to_string(),
+        ServiceInfo {
+            name: "Banner".to_string(),
+            status: Status::Connected,
         },
-        "banner_api": {
-            "status": "connected"
+    );
+
+    // Discord status - hardcoded as disabled for now
+    services.insert(
+        "discord".to_string(),
+        ServiceInfo {
+            name: "Discord".to_string(),
+            status: Status::Disabled,
         },
-        "timestamp": chrono::Utc::now().to_rfc3339()
-    }))
+    );
+
+    let overall_status = if services.values().any(|s| matches!(s.status, Status::Error)) {
+        Status::Error
+    } else if services
+        .values()
+        .all(|s| matches!(s.status, Status::Active | Status::Connected))
+    {
+        Status::Active
+    } else {
+        // If we have any Disabled services but no errors, show as Healthy
+        Status::Healthy
+    };
+
+    Json(StatusResponse {
+        status: overall_status,
+        version: env!("CARGO_PKG_VERSION").to_string(),
+        commit: env!("GIT_COMMIT_HASH").to_string(),
+        services,
+    })
 }
 
 /// Metrics endpoint for monitoring

web/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,11 +7,11 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-tsrouter-app"
+      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>Create TanStack App - web-template</title>
+    <title>Banner</title>
   </head>
   <body>
     <div id="app"></div>

web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "web-template",
+  "name": "banner-web",
   "private": true,
   "type": "module",
   "scripts": {
@@ -16,8 +16,10 @@
     "@tanstack/react-router-devtools": "^1.131.5",
     "@tanstack/router-plugin": "^1.121.2",
     "lucide-react": "^0.544.0",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-timeago": "^8.3.0",
     "recharts": "^3.2.0"
   },
   "devDependencies": {
@@ -33,4 +35,4 @@
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   }
-}
+}

web/pnpm-lock.yaml

@@ -26,12 +26,18 @@ importers:
       lucide-react:
         specifier: ^0.544.0
         version: 0.544.0(react@19.1.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
         specifier: ^19.0.0
         version: 19.1.1
       react-dom:
         specifier: ^19.0.0
         version: 19.1.1(react@19.1.1)
+      react-timeago:
+        specifier: ^8.3.0
+        version: 8.3.0(react@19.1.1)
       recharts:
         specifier: ^3.2.0
         version: 3.2.0(@types/react@19.1.13)(react-dom@19.1.1(react@19.1.1))(react-is@17.0.2)(react@19.1.1)(redux@5.0.1)
@@ -1862,6 +1868,12 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-releases@2.0.21:
     resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
 
@@ -1977,6 +1989,11 @@ packages:
       '@types/react':
         optional: true
 
+  react-timeago@8.3.0:
+    resolution: {integrity: sha512-BeR0hj/5qqTc2+zxzBSQZMky6MmqwOtKseU3CSmcjKR5uXerej2QY34v2d+cdz11PoeVfAdWLX+qjM/UdZkUUg==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react@19.1.1:
     resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
@@ -4125,6 +4142,11 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   node-releases@2.0.21: {}
 
   normalize-path@3.0.0: {}
@@ -4269,6 +4291,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.13
 
+  react-timeago@8.3.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   react@19.1.1: {}
 
   readdirp@3.6.0:

web/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "TanStack App",
-  "name": "Create TanStack App Sample",
+  "short_name": "Banner",
+  "name": "Banner, a Discord bot and web interface for UTSA Course Monitoring",
   "icons": [
     {
       "src": "favicon.ico",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#ffffff",
   "background_color": "#ffffff"
 }

web/src/App.css

@@ -1,38 +1,35 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  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);
 }
 
-.App-link {
-  color: #61dafb;
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* 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/components/ThemeToggle.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from "next-themes";
+import { Button } from "@radix-ui/themes";
+import { Sun, Moon, Monitor } from "lucide-react";
+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)}
+      style={{
+        cursor: "pointer",
+        backgroundColor: "transparent",
+        border: "none",
+        margin: "4px",
+        padding: "7px",
+        borderRadius: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "var(--gray-11)",
+        transition: "background-color 0.2s, color 0.2s",
+        transform: "scale(1.25)",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = "var(--gray-4)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      }}
+    >
+      {icon}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

web/src/lib/api.ts

@@ -6,21 +6,18 @@ export interface HealthResponse {
   timestamp: string;
 }
 
+export type Status = "Disabled" | "Connected" | "Active" | "Healthy" | "Error";
+
+export interface ServiceInfo {
+  name: string;
+  status: Status;
+}
+
 export interface StatusResponse {
-  status: string;
-  bot: {
-    status: string;
-    uptime: string;
-  };
-  cache: {
-    status: string;
-    courses: string;
-    subjects: string;
-  };
-  banner_api: {
-    status: string;
-  };
-  timestamp: string;
+  status: Status;
+  version: string;
+  commit: string;
+  services: Record<string, ServiceInfo>;
 }
 
 export interface MetricsResponse {
@@ -63,4 +60,4 @@ export class BannerApiClient {
 }
 
 // Export a default instance
-export const apiClient = new BannerApiClient();
+export const client = new BannerApiClient();

web/src/main.tsx

@@ -1,42 +1,53 @@
-import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { ThemeProvider } from "next-themes";
+import { Theme } from "@radix-ui/themes";
 
 // Import the generated route tree
-import { routeTree } from './routeTree.gen'
+import { routeTree } from "./routeTree.gen";
 
-import './styles.css'
-import reportWebVitals from './reportWebVitals.ts'
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.ts";
 
 // Create a new router instance
 const router = createRouter({
   routeTree,
   context: {},
-  defaultPreload: 'intent',
+  defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
   defaultPreloadStaleTime: 0,
-})
+});
 
 // Register the router instance for type safety
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
-    router: typeof router
+    router: typeof router;
   }
 }
 
 // Render the app
-const rootElement = document.getElementById('app')
+const rootElement = document.getElementById("app");
 if (rootElement && !rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement)
+  const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
-    </StrictMode>,
-  )
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange={false}
+      >
+        <Theme>
+          <RouterProvider router={router} />
+        </Theme>
+      </ThemeProvider>
+    </StrictMode>
+  );
 }
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals();

web/src/routes/__root.tsx

@@ -1,22 +1,34 @@
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanstackDevtools } from '@tanstack/react-devtools'
+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: () => (
-    <>
-      <Outlet />
-      <TanstackDevtools
-        config={{
-          position: 'bottom-left',
-        }}
-        plugins={[
-          {
-            name: 'Tanstack Router',
-            render: <TanStackRouterDevtoolsPanel />,
-          },
-        ]}
-      />
-    </>
+    <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/index.tsx

@@ -1,87 +1,423 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState, useEffect } from "react";
+import { client, type StatusResponse, type Status } from "../lib/api";
+import { Card, Flex, Text, Tooltip, Skeleton } from "@radix-ui/themes";
 import {
-  apiClient,
-  type HealthResponse,
-  type StatusResponse,
-} from "../lib/api";
-import logo from "../logo.svg";
+  CheckCircle,
+  XCircle,
+  Clock,
+  Bot,
+  Globe,
+  Hourglass,
+  Activity,
+  MessageCircle,
+  Circle,
+  WifiOff,
+} from "lucide-react";
+import TimeAgo from "react-timeago";
+import { ThemeToggle } from "../components/ThemeToggle";
 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,
+};
+
+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" },
+    Healthy: { icon: CheckCircle, color: "green" },
+    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;
+
+    const fetchData = async () => {
+      try {
+        const startTime = Date.now();
+
+        // Create a timeout promise
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          setTimeout(
+            () => reject(new Error("Request timeout")),
+            REQUEST_TIMEOUT
+          );
+        });
+
+        // Race between the API call and timeout
+        const statusData = await Promise.race([
+          client.getStatus(),
+          timeoutPromise,
+        ]);
+
+        const endTime = Date.now();
+        const responseTime = endTime - startTime;
+
+        setState({
+          mode: "response",
+          status: statusData,
+          timing: { health: responseTime, status: responseTime },
+          lastFetch: new Date(),
+        });
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to fetch data";
+
+        // Check if it's a timeout error
+        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(fetchData, REFRESH_INTERVAL);
+    };
+
+    // Start the first request immediately
+    fetchData();
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  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,
 });
-
-function App() {
-  const [health, setHealth] = useState<HealthResponse | null>(null);
-  const [status, setStatus] = useState<StatusResponse | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        const [healthData, statusData] = await Promise.all([
-          apiClient.getHealth(),
-          apiClient.getStatus(),
-        ]);
-        setHealth(healthData);
-        setStatus(statusData);
-        setError(null);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to fetch data");
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h1>Banner Discord Bot Dashboard</h1>
-
-        {loading && <p>Loading...</p>}
-
-        {error && (
-          <div style={{ color: "red", margin: "20px 0" }}>
-            <p>Error: {error}</p>
-          </div>
-        )}
-
-        {health && (
-          <div style={{ margin: "20px 0", textAlign: "left" }}>
-            <h3>Health Status</h3>
-            <p>Status: {health.status}</p>
-            <p>Timestamp: {new Date(health.timestamp).toLocaleString()}</p>
-          </div>
-        )}
-
-        {status && (
-          <div style={{ margin: "20px 0", textAlign: "left" }}>
-            <h3>System Status</h3>
-            <p>Overall: {status.status}</p>
-            <p>Bot: {status.bot.status}</p>
-            <p>Cache: {status.cache.status}</p>
-            <p>Banner API: {status.banner_api.status}</p>
-          </div>
-        )}
-
-        <div style={{ marginTop: "40px" }}>
-          <a
-            className="App-link"
-            href="https://tanstack.com"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn TanStack Router
-          </a>
-        </div>
-      </header>
-    </div>
-  );
-}

web/src/styles.css

@@ -1,14 +1,15 @@
+@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;
+  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;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }

web/src/vite-env.d.ts

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

web/vite.config.ts

@@ -2,6 +2,41 @@ 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);
+      // 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({
@@ -29,4 +64,7 @@ export default defineConfig({
     outDir: "dist",
     sourcemap: true,
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(version),
+  },
 });