add initial crates and apps

crates/chattyness-admin-ui/Cargo.toml

@@ -0,0 +1,72 @@
+[package]
+name = "chattyness-admin-ui"
+version.workspace = true
+edition.workspace = true
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+chattyness-db = { workspace = true }
+chattyness-error = { workspace = true, optional = true }
+serde.workspace = true
+serde_json.workspace = true
+uuid.workspace = true
+chrono.workspace = true
+tracing = { workspace = true, optional = true }
+
+# Leptos
+leptos = { workspace = true }
+leptos_meta = { workspace = true }
+leptos_router = { workspace = true }
+
+# SSR-only dependencies
+axum = { workspace = true, optional = true }
+axum-extra = { workspace = true, optional = true }
+sqlx = { workspace = true, optional = true }
+tower-sessions = { workspace = true, optional = true }
+tower-sessions-sqlx-store = { workspace = true, optional = true }
+argon2 = { workspace = true, optional = true }
+image = { workspace = true, optional = true }
+reqwest = { workspace = true, optional = true }
+sha2 = { workspace = true, optional = true }
+hex = { workspace = true, optional = true }
+tokio = { workspace = true, optional = true }
+
+# Hydrate-only dependencies
+gloo-net = { workspace = true, optional = true }
+web-sys = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }
+console_error_panic_hook = { workspace = true, optional = true }
+urlencoding = { workspace = true, optional = true }
+
+[features]
+default = []
+ssr = [
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "chattyness-db/ssr",
+    "chattyness-error/ssr",
+    "dep:chattyness-error",
+    "dep:axum",
+    "dep:axum-extra",
+    "dep:sqlx",
+    "dep:tracing",
+    "dep:tower-sessions",
+    "dep:tower-sessions-sqlx-store",
+    "dep:argon2",
+    "dep:image",
+    "dep:reqwest",
+    "dep:sha2",
+    "dep:hex",
+    "dep:tokio",
+]
+hydrate = [
+    "leptos/hydrate",
+    "dep:gloo-net",
+    "dep:web-sys",
+    "dep:wasm-bindgen",
+    "dep:console_error_panic_hook",
+    "dep:urlencoding",
+]

crates/chattyness-admin-ui/src/api.rs

@@ -0,0 +1,25 @@
+//! Admin API module.
+
+#[cfg(feature = "ssr")]
+pub mod auth;
+#[cfg(feature = "ssr")]
+pub mod config;
+#[cfg(feature = "ssr")]
+pub mod dashboard;
+#[cfg(feature = "ssr")]
+pub mod props;
+#[cfg(feature = "ssr")]
+pub mod realms;
+#[cfg(feature = "ssr")]
+pub mod routes;
+#[cfg(feature = "ssr")]
+pub mod scenes;
+#[cfg(feature = "ssr")]
+pub mod spots;
+#[cfg(feature = "ssr")]
+pub mod staff;
+#[cfg(feature = "ssr")]
+pub mod users;
+
+#[cfg(feature = "ssr")]
+pub use routes::admin_api_router;

crates/chattyness-admin-ui/src/api/auth.rs

@@ -0,0 +1,296 @@
+//! Admin authentication API handlers.
+
+use axum::{extract::State, http::StatusCode, Json};
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use tower_sessions::Session;
+
+use crate::auth::ADMIN_SESSION_STAFF_ID_KEY;
+
+/// Login request body.
+#[derive(Debug, Deserialize)]
+pub struct LoginRequest {
+    pub username: String,
+    pub password: String,
+}
+
+/// Login response body.
+#[derive(Debug, Serialize)]
+pub struct LoginResponse {
+    pub success: bool,
+    pub username: String,
+    pub display_name: String,
+}
+
+/// Error response body.
+#[derive(Debug, Serialize)]
+pub struct ErrorResponse {
+    pub error: String,
+}
+
+/// Staff member row for login lookup.
+#[derive(Debug, sqlx::FromRow)]
+struct StaffLoginRow {
+    user_id: uuid::Uuid,
+    username: String,
+    display_name: String,
+}
+
+/// Login handler for server staff.
+///
+/// Authenticates staff member and creates a session.
+pub async fn login(
+    State(pool): State<PgPool>,
+    session: Session,
+    Json(request): Json<LoginRequest>,
+) -> Result<Json<LoginResponse>, (StatusCode, Json<ErrorResponse>)> {
+    // Look up the staff member
+    let staff: Option<StaffLoginRow> = sqlx::query_as(
+        r#"
+        SELECT
+            u.id as user_id,
+            u.username,
+            u.display_name
+        FROM auth.users u
+        JOIN server.staff s ON s.user_id = u.id
+        WHERE u.username = $1
+        "#,
+    )
+    .bind(&request.username)
+    .fetch_optional(&pool)
+    .await
+    .map_err(|e| {
+        tracing::error!("Database error during login: {}", e);
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(ErrorResponse {
+                error: "Internal server error".to_string(),
+            }),
+        )
+    })?;
+
+    let staff = match staff {
+        Some(s) => s,
+        None => {
+            return Err((
+                StatusCode::UNAUTHORIZED,
+                Json(ErrorResponse {
+                    error: "Invalid username or password".to_string(),
+                }),
+            ));
+        }
+    };
+
+    // Verify password using Argon2
+    let password_hash: Option<String> = sqlx::query_scalar(
+        r#"
+        SELECT password_hash
+        FROM auth.users
+        WHERE id = $1
+        "#,
+    )
+    .bind(staff.user_id)
+    .fetch_one(&pool)
+    .await
+    .map_err(|e| {
+        tracing::error!("Database error during password check: {}", e);
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(ErrorResponse {
+                error: "Internal server error".to_string(),
+            }),
+        )
+    })?;
+
+    let password_hash = match password_hash {
+        Some(h) => h,
+        None => {
+            return Err((
+                StatusCode::UNAUTHORIZED,
+                Json(ErrorResponse {
+                    error: "Invalid username or password".to_string(),
+                }),
+            ));
+        }
+    };
+
+    // Verify password with Argon2
+    use argon2::{Argon2, PasswordHash, PasswordVerifier};
+    let parsed_hash = PasswordHash::new(&password_hash).map_err(|e| {
+        tracing::error!("Password hash parse error: {}", e);
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(ErrorResponse {
+                error: "Internal server error".to_string(),
+            }),
+        )
+    })?;
+
+    if Argon2::default()
+        .verify_password(request.password.as_bytes(), &parsed_hash)
+        .is_err()
+    {
+        return Err((
+            StatusCode::UNAUTHORIZED,
+            Json(ErrorResponse {
+                error: "Invalid username or password".to_string(),
+            }),
+        ));
+    }
+
+    // Check if user is suspended or banned
+    let status: String = sqlx::query_scalar(r#"SELECT status::text FROM auth.users WHERE id = $1"#)
+        .bind(staff.user_id)
+        .fetch_one(&pool)
+        .await
+        .map_err(|e| {
+            tracing::error!("Database error during status check: {}", e);
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(ErrorResponse {
+                    error: "Internal server error".to_string(),
+                }),
+            )
+        })?;
+
+    if status != "active" {
+        return Err((
+            StatusCode::FORBIDDEN,
+            Json(ErrorResponse {
+                error: format!("Account is {}", status),
+            }),
+        ));
+    }
+
+    // Create session
+    session
+        .insert(ADMIN_SESSION_STAFF_ID_KEY, staff.user_id)
+        .await
+        .map_err(|e| {
+            tracing::error!("Session error: {}", e);
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(ErrorResponse {
+                    error: "Session error".to_string(),
+                }),
+            )
+        })?;
+
+    Ok(Json(LoginResponse {
+        success: true,
+        username: staff.username,
+        display_name: staff.display_name,
+    }))
+}
+
+/// Logout handler.
+///
+/// Clears the session.
+pub async fn logout(session: Session) -> Result<Json<serde_json::Value>, StatusCode> {
+    session.flush().await.map_err(|e| {
+        tracing::error!("Session flush error: {}", e);
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    Ok(Json(serde_json::json!({ "success": true })))
+}
+
+// =============================================================================
+// Auth Context Types (shared between SSR and hydrate)
+// =============================================================================
+
+/// Realm info for auth context.
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct ManagedRealm {
+    pub slug: String,
+    pub name: String,
+}
+
+/// Auth context response for the frontend.
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct AuthContextResponse {
+    pub is_server_staff: bool,
+    pub managed_realms: Vec<ManagedRealm>,
+}
+
+/// Get auth context endpoint.
+///
+/// Returns the current user's permissions for rendering the sidebar.
+pub async fn get_auth_context(
+    State(pool): State<PgPool>,
+    session: Session,
+) -> Result<Json<AuthContextResponse>, (StatusCode, Json<ErrorResponse>)> {
+    // Try to get staff_id from session (server staff)
+    let staff_id: Option<uuid::Uuid> = session
+        .get(ADMIN_SESSION_STAFF_ID_KEY)
+        .await
+        .ok()
+        .flatten();
+
+    if let Some(staff_id) = staff_id {
+        // Check if this is actually a staff member
+        let is_staff: Option<bool> = sqlx::query_scalar(
+            "SELECT EXISTS(SELECT 1 FROM server.staff WHERE user_id = $1)",
+        )
+        .bind(staff_id)
+        .fetch_one(&pool)
+        .await
+        .ok();
+
+        if is_staff == Some(true) {
+            return Ok(Json(AuthContextResponse {
+                is_server_staff: true,
+                managed_realms: vec![],
+            }));
+        }
+    }
+
+    // Try to get user_id from session (realm admin)
+    let user_id: Option<uuid::Uuid> = session
+        .get(crate::auth::SESSION_USER_ID_KEY)
+        .await
+        .ok()
+        .flatten();
+
+    if let Some(user_id) = user_id {
+        // Get realms where this user has admin privileges (owner, moderator, builder)
+        let realms: Vec<ManagedRealm> = sqlx::query_as::<_, (String, String)>(
+            r#"
+            SELECT r.slug, r.name
+            FROM realm.realms r
+            JOIN realm.memberships m ON m.realm_id = r.id
+            WHERE m.user_id = $1
+            AND m.role IN ('owner', 'moderator', 'builder')
+            ORDER BY r.name
+            "#,
+        )
+        .bind(user_id)
+        .fetch_all(&pool)
+        .await
+        .map_err(|e| {
+            tracing::error!("Database error fetching managed realms: {}", e);
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(ErrorResponse {
+                    error: "Internal server error".to_string(),
+                }),
+            )
+        })?
+        .into_iter()
+        .map(|(slug, name)| ManagedRealm { slug, name })
+        .collect();
+
+        return Ok(Json(AuthContextResponse {
+            is_server_staff: false,
+            managed_realms: realms,
+        }));
+    }
+
+    // No valid session
+    Err((
+        StatusCode::UNAUTHORIZED,
+        Json(ErrorResponse {
+            error: "Not authenticated".to_string(),
+        }),
+    ))
+}

crates/chattyness-admin-ui/src/api/config.rs

@@ -0,0 +1,27 @@
+//! Server config API handlers.
+
+use axum::{extract::State, Json};
+use chattyness_db::{
+    models::{ServerConfig, UpdateServerConfigRequest},
+    queries::owner as queries,
+};
+use chattyness_error::AppError;
+use sqlx::PgPool;
+
+/// Get server config.
+pub async fn get_config(
+    State(pool): State<PgPool>,
+) -> Result<Json<ServerConfig>, AppError> {
+    let config = queries::get_server_config(&pool).await?;
+    Ok(Json(config))
+}
+
+/// Update server config.
+pub async fn update_config(
+    State(pool): State<PgPool>,
+    Json(req): Json<UpdateServerConfigRequest>,
+) -> Result<Json<ServerConfig>, AppError> {
+    req.validate()?;
+    let config = queries::update_server_config(&pool, &req).await?;
+    Ok(Json(config))
+}

crates/chattyness-admin-ui/src/api/dashboard.rs

@@ -0,0 +1,53 @@
+//! Dashboard API handlers.
+
+use axum::{extract::State, Json};
+use chattyness_error::AppError;
+use serde::Serialize;
+use sqlx::PgPool;
+
+/// Dashboard stats response.
+#[derive(Debug, Serialize)]
+pub struct DashboardStats {
+    pub total_users: i64,
+    pub active_users: i64,
+    pub total_realms: i64,
+    pub online_users: i64,
+    pub staff_count: i64,
+}
+
+/// Get dashboard stats.
+pub async fn get_stats(
+    State(pool): State<PgPool>,
+) -> Result<Json<DashboardStats>, AppError> {
+    // Total users
+    let total_users: i64 = sqlx::query_scalar("SELECT COUNT(*) FROM auth.users")
+        .fetch_one(&pool)
+        .await?;
+
+    // Active users
+    let active_users: i64 =
+        sqlx::query_scalar("SELECT COUNT(*) FROM auth.users WHERE status = 'active'")
+            .fetch_one(&pool)
+            .await?;
+
+    // Total realms
+    let total_realms: i64 = sqlx::query_scalar("SELECT COUNT(*) FROM realm.realms")
+        .fetch_one(&pool)
+        .await?;
+
+    // Staff count
+    let staff_count: i64 = sqlx::query_scalar("SELECT COUNT(*) FROM server.staff")
+        .fetch_one(&pool)
+        .await?;
+
+    // Online users would require presence tracking - hardcoded to 0 for now
+    let online_users = 0;
+
+    Ok(Json(DashboardStats {
+        total_users,
+        active_users,
+        total_realms,
+        online_users,
+        staff_count,
+    }))
+}

crates/chattyness-admin-ui/src/api/props.rs

@@ -0,0 +1,220 @@
+//! Props management API handlers for admin UI.
+
+use axum::extract::State;
+use axum::Json;
+use axum_extra::extract::Multipart;
+use chattyness_db::{
+    models::{CreateServerPropRequest, ServerProp, ServerPropSummary},
+    queries::props,
+};
+use chattyness_error::AppError;
+use serde::Serialize;
+use sha2::{Digest, Sha256};
+use sqlx::PgPool;
+use std::path::PathBuf;
+use uuid::Uuid;
+
+// =============================================================================
+// API Types
+// =============================================================================
+
+/// Response for prop creation.
+#[derive(Debug, Serialize)]
+pub struct CreatePropResponse {
+    pub id: Uuid,
+    pub name: String,
+    pub slug: String,
+    pub asset_path: String,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+}
+
+impl From<ServerProp> for CreatePropResponse {
+    fn from(prop: ServerProp) -> Self {
+        Self {
+            id: prop.id,
+            name: prop.name,
+            slug: prop.slug,
+            asset_path: prop.asset_path,
+            created_at: prop.created_at,
+        }
+    }
+}
+
+// =============================================================================
+// File Handling
+// =============================================================================
+
+/// Validate and get file extension from filename.
+fn validate_file_extension(filename: &str) -> Result<&'static str, AppError> {
+    let ext = filename
+        .rsplit('.')
+        .next()
+        .map(|e| e.to_lowercase())
+        .unwrap_or_default();
+
+    match ext.as_str() {
+        "svg" => Ok("svg"),
+        "png" => Ok("png"),
+        _ => Err(AppError::Validation(
+            "File must be SVG or PNG".to_string(),
+        )),
+    }
+}
+
+/// Store uploaded file and return the asset path.
+async fn store_prop_file(bytes: &[u8], extension: &str) -> Result<String, AppError> {
+    // Compute SHA256 hash of the file content
+    let mut hasher = Sha256::new();
+    hasher.update(bytes);
+    let hash = hex::encode(hasher.finalize());
+
+    // Create directory structure: /srv/chattyness/assets/server/
+    let dir_path = PathBuf::from("/srv/chattyness/assets/server");
+
+    tokio::fs::create_dir_all(&dir_path)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to create directory: {}", e)))?;
+
+    // Write the file with SHA256 hash as filename
+    let filename = format!("{}.{}", hash, extension);
+    let file_path = dir_path.join(&filename);
+
+    tokio::fs::write(&file_path, bytes)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to write file: {}", e)))?;
+
+    // Return the relative path for database storage
+    Ok(format!("server/{}", filename))
+}
+
+// =============================================================================
+// API Handlers
+// =============================================================================
+
+/// List all server props.
+pub async fn list_props(State(pool): State<PgPool>) -> Result<Json<Vec<ServerPropSummary>>, AppError> {
+    let prop_list = props::list_server_props(&pool).await?;
+    Ok(Json(prop_list))
+}
+
+/// Create a new server prop via multipart upload.
+///
+/// Expects multipart form with:
+/// - `metadata`: JSON object with prop details (CreateServerPropRequest)
+/// - `file`: Binary SVG or PNG file
+pub async fn create_prop(
+    State(pool): State<PgPool>,
+    mut multipart: Multipart,
+) -> Result<Json<CreatePropResponse>, AppError> {
+    let mut metadata: Option<CreateServerPropRequest> = None;
+    let mut file_data: Option<(Vec<u8>, String)> = None; // (bytes, extension)
+
+    // Parse multipart fields
+    while let Some(field) = multipart
+        .next_field()
+        .await
+        .map_err(|e| AppError::Validation(format!("Failed to read multipart field: {}", e)))?
+    {
+        let name = field.name().unwrap_or_default().to_string();
+
+        match name.as_str() {
+            "metadata" => {
+                let text = field
+                    .text()
+                    .await
+                    .map_err(|e| AppError::Validation(format!("Failed to read metadata: {}", e)))?;
+
+                metadata = Some(serde_json::from_str(&text).map_err(|e| {
+                    AppError::Validation(format!("Invalid metadata JSON: {}", e))
+                })?);
+            }
+            "file" => {
+                let filename = field
+                    .file_name()
+                    .map(|s| s.to_string())
+                    .unwrap_or_else(|| "unknown.png".to_string());
+
+                let extension = validate_file_extension(&filename)?;
+
+                let bytes = field
+                    .bytes()
+                    .await
+                    .map_err(|e| AppError::Validation(format!("Failed to read file: {}", e)))?;
+
+                if bytes.is_empty() {
+                    return Err(AppError::Validation("File is empty".to_string()));
+                }
+
+                file_data = Some((bytes.to_vec(), extension.to_string()));
+            }
+            _ => {
+                // Ignore unknown fields
+            }
+        }
+    }
+
+    // Validate we have both required fields
+    let metadata = metadata.ok_or_else(|| {
+        AppError::Validation("Missing 'metadata' field in multipart form".to_string())
+    })?;
+
+    let (file_bytes, extension) = file_data.ok_or_else(|| {
+        AppError::Validation("Missing 'file' field in multipart form".to_string())
+    })?;
+
+    // Validate the request
+    metadata.validate()?;
+
+    // Check slug availability
+    let slug = metadata.slug_or_generate();
+    let available = props::is_prop_slug_available(&pool, &slug).await?;
+    if !available {
+        return Err(AppError::Conflict(format!(
+            "Prop slug '{}' is already taken",
+            slug
+        )));
+    }
+
+    // Store the file
+    let asset_path = store_prop_file(&file_bytes, &extension).await?;
+
+    // Create the prop in database
+    let prop = props::create_server_prop(&pool, &metadata, &asset_path, None).await?;
+
+    tracing::info!("Created server prop: {} ({})", prop.name, prop.id);
+
+    Ok(Json(CreatePropResponse::from(prop)))
+}
+
+/// Get a server prop by ID.
+pub async fn get_prop(
+    State(pool): State<PgPool>,
+    axum::extract::Path(prop_id): axum::extract::Path<Uuid>,
+) -> Result<Json<ServerProp>, AppError> {
+    let prop = props::get_server_prop_by_id(&pool, prop_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Prop not found".to_string()))?;
+    Ok(Json(prop))
+}
+
+/// Delete a server prop.
+pub async fn delete_prop(
+    State(pool): State<PgPool>,
+    axum::extract::Path(prop_id): axum::extract::Path<Uuid>,
+) -> Result<Json<()>, AppError> {
+    // Get the prop first to get the asset path
+    let prop = props::get_server_prop_by_id(&pool, prop_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Prop not found".to_string()))?;
+
+    // Delete from database
+    props::delete_server_prop(&pool, prop_id).await?;
+
+    // Try to delete the file (don't fail if file doesn't exist)
+    let file_path = PathBuf::from("/srv/chattyness/assets").join(&prop.asset_path);
+    tokio::fs::remove_file(&file_path).await.ok();
+
+    tracing::info!("Deleted server prop: {} ({})", prop.name, prop_id);
+
+    Ok(Json(()))
+}

crates/chattyness-admin-ui/src/api/realms.rs

@@ -0,0 +1,133 @@
+//! Realm management API handlers.
+
+use axum::{
+    extract::{Path, Query, State},
+    Json,
+};
+use chattyness_db::{
+    models::{OwnerCreateRealmRequest, RealmDetail, RealmListItem, UpdateRealmRequest},
+    queries::owner as queries,
+};
+use chattyness_error::AppError;
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+/// Create realm response.
+#[derive(Debug, Serialize)]
+pub struct CreateRealmResponse {
+    pub realm_id: Uuid,
+    pub slug: String,
+    pub owner_id: Uuid,
+    pub owner_temporary_password: Option<String>,
+}
+
+/// Transfer ownership request.
+#[derive(Debug, Deserialize)]
+pub struct TransferOwnershipRequest {
+    pub new_owner_id: Uuid,
+}
+
+/// List query params.
+#[derive(Debug, Deserialize)]
+pub struct ListRealmsQuery {
+    pub q: Option<String>,
+    pub limit: Option<i64>,
+    pub offset: Option<i64>,
+}
+
+/// List realms with optional search.
+pub async fn list_realms(
+    State(pool): State<PgPool>,
+    Query(query): Query<ListRealmsQuery>,
+) -> Result<Json<Vec<RealmListItem>>, AppError> {
+    let limit = query.limit.unwrap_or(25).min(100);
+    let offset = query.offset.unwrap_or(0);
+
+    let realms = if let Some(ref q) = query.q {
+        queries::search_realms(&pool, q, limit).await?
+    } else {
+        queries::list_realms_with_owner(&pool, limit, offset).await?
+    };
+
+    Ok(Json(realms))
+}
+
+/// Get a realm by slug.
+pub async fn get_realm(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+) -> Result<Json<RealmDetail>, AppError> {
+    let realm = queries::get_realm_by_slug(&pool, &slug).await?;
+    Ok(Json(realm))
+}
+
+/// Create a new realm.
+pub async fn create_realm(
+    State(pool): State<PgPool>,
+    Json(req): Json<OwnerCreateRealmRequest>,
+) -> Result<Json<CreateRealmResponse>, AppError> {
+    req.validate()?;
+
+    // If owner_id is provided, create realm with existing user
+    if let Some(owner_id) = req.owner_id {
+        let realm_id = queries::create_realm(
+            &pool,
+            owner_id,
+            &req.name,
+            &req.slug,
+            req.description.as_deref(),
+            req.tagline.as_deref(),
+            req.privacy,
+            req.is_nsfw,
+            req.max_users,
+            req.allow_guest_access,
+            req.theme_color.as_deref(),
+        )
+        .await?;
+
+        Ok(Json(CreateRealmResponse {
+            realm_id,
+            slug: req.slug,
+            owner_id,
+            owner_temporary_password: None,
+        }))
+    } else {
+        // Create realm with new user as owner
+        let (realm_id, user_id, temporary_password) =
+            queries::create_realm_with_new_owner(&pool, &req).await?;
+
+        Ok(Json(CreateRealmResponse {
+            realm_id,
+            slug: req.slug,
+            owner_id: user_id,
+            owner_temporary_password: Some(temporary_password),
+        }))
+    }
+}
+
+/// Update a realm.
+pub async fn update_realm(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+    Json(req): Json<UpdateRealmRequest>,
+) -> Result<Json<RealmDetail>, AppError> {
+    req.validate()?;
+
+    // First get the realm to find its ID
+    let existing = queries::get_realm_by_slug(&pool, &slug).await?;
+    let realm = queries::update_realm(&pool, existing.id, &req).await?;
+    Ok(Json(realm))
+}
+
+/// Transfer realm ownership.
+pub async fn transfer_ownership(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+    Json(req): Json<TransferOwnershipRequest>,
+) -> Result<Json<()>, AppError> {
+    // First get the realm to find its ID
+    let existing = queries::get_realm_by_slug(&pool, &slug).await?;
+    queries::transfer_realm_ownership(&pool, existing.id, req.new_owner_id).await?;
+    Ok(Json(()))
+}

crates/chattyness-admin-ui/src/api/routes.rs

@@ -0,0 +1,96 @@
+//! Admin API routes.
+
+use axum::{
+    routing::{delete, get, post, put},
+    Router,
+};
+
+use super::{auth, config, dashboard, props, realms, scenes, spots, staff, users};
+use crate::app::AdminAppState;
+
+/// Create the admin API router.
+///
+/// Note: HTML pages are handled by Leptos - this router only contains API endpoints.
+pub fn admin_api_router() -> Router<AdminAppState> {
+    Router::new()
+        // API - Health
+        .route("/health", get(health_check))
+        // API - Dashboard
+        .route("/dashboard/stats", get(dashboard::get_stats))
+        // API - Auth
+        .route("/auth/login", post(auth::login))
+        .route("/auth/logout", post(auth::logout))
+        .route("/auth/context", get(auth::get_auth_context))
+        // API - Config
+        .route(
+            "/config",
+            get(config::get_config).put(config::update_config),
+        )
+        // API - Staff
+        .route("/staff", get(staff::list_staff).post(staff::create_staff))
+        .route("/staff/{user_id}", delete(staff::delete_staff))
+        // API - Users
+        .route("/users", get(users::list_users).post(users::create_user))
+        .route("/users/search", get(users::search_users))
+        .route("/users/{user_id}", get(users::get_user))
+        .route("/users/{user_id}/status", put(users::update_status))
+        .route(
+            "/users/{user_id}/reset-password",
+            post(users::reset_password),
+        )
+        .route(
+            "/users/{user_id}/realms",
+            get(users::get_user_realms).post(users::add_to_realm),
+        )
+        .route(
+            "/users/{user_id}/realms/{realm_id}",
+            delete(users::remove_from_realm),
+        )
+        // API - Realms
+        .route(
+            "/realms",
+            get(realms::list_realms).post(realms::create_realm),
+        )
+        .route("/realms/simple", get(users::list_realms))
+        .route(
+            "/realms/{slug}",
+            get(realms::get_realm).put(realms::update_realm),
+        )
+        .route(
+            "/realms/{slug}/transfer",
+            post(realms::transfer_ownership),
+        )
+        // API - Scenes
+        .route(
+            "/realms/{slug}/scenes",
+            get(scenes::list_scenes).post(scenes::create_scene),
+        )
+        .route(
+            "/scenes/{scene_id}",
+            get(scenes::get_scene)
+                .put(scenes::update_scene)
+                .delete(scenes::delete_scene),
+        )
+        // API - Spots
+        .route(
+            "/scenes/{scene_id}/spots",
+            get(spots::list_spots).post(spots::create_spot),
+        )
+        .route(
+            "/spots/{spot_id}",
+            get(spots::get_spot)
+                .put(spots::update_spot)
+                .delete(spots::delete_spot),
+        )
+        // API - Props (server-wide)
+        .route("/props", get(props::list_props).post(props::create_prop))
+        .route(
+            "/props/{prop_id}",
+            get(props::get_prop).delete(props::delete_prop),
+        )
+}
+
+/// Health check endpoint.
+async fn health_check() -> &'static str {
+    "Admin API OK"
+}

crates/chattyness-admin-ui/src/api/scenes.rs

@@ -0,0 +1,317 @@
+//! Scene management API handlers for admin UI.
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use chattyness_db::{
+    models::{CreateSceneRequest, Scene, SceneSummary, UpdateSceneRequest},
+    queries::{realms, scenes},
+};
+use chattyness_error::AppError;
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use std::path::PathBuf;
+use uuid::Uuid;
+
+// =============================================================================
+// Image Processing Helpers
+// =============================================================================
+
+/// Result of downloading and storing a background image.
+struct ImageDownloadResult {
+    /// The local path to the stored image (relative to static root, for URL).
+    local_path: String,
+    /// Image dimensions if requested.
+    dimensions: Option<(u32, u32)>,
+}
+
+/// Download an image from a URL and store it locally.
+///
+/// Returns the local path and optionally the dimensions.
+/// Path format: /static/realm/{realm_id}/scene/{scene_id}/{sha256}.{ext}
+async fn download_and_store_image(
+    url: &str,
+    realm_id: Uuid,
+    scene_id: Uuid,
+    extract_dimensions: bool,
+) -> Result<ImageDownloadResult, AppError> {
+    use sha2::{Digest, Sha256};
+
+    // Validate URL
+    if !url.starts_with("http://") && !url.starts_with("https://") {
+        return Err(AppError::Validation(
+            "Image URL must start with http:// or https://".to_string(),
+        ));
+    }
+
+    // Download the image
+    let client = reqwest::Client::new();
+    let response = client
+        .get(url)
+        .header(
+            reqwest::header::USER_AGENT,
+            "Chattyness/1.0 (Background image downloader)",
+        )
+        .header(reqwest::header::ACCEPT, "image/*")
+        .send()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to fetch image: {}", e)))?;
+
+    // Check content type
+    let content_type = response
+        .headers()
+        .get(reqwest::header::CONTENT_TYPE)
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("");
+
+    // Determine extension from content type
+    let ext = match content_type {
+        t if t.starts_with("image/jpeg") => "jpg",
+        t if t.starts_with("image/png") => "png",
+        t if t.starts_with("image/gif") => "gif",
+        t if t.starts_with("image/webp") => "webp",
+        _ => {
+            // Try to infer from URL
+            if url.contains(".jpg") || url.contains(".jpeg") {
+                "jpg"
+            } else if url.contains(".png") {
+                "png"
+            } else if url.contains(".gif") {
+                "gif"
+            } else if url.contains(".webp") {
+                "webp"
+            } else {
+                return Err(AppError::Validation(format!(
+                    "Unsupported image type: {}",
+                    content_type
+                )));
+            }
+        }
+    };
+
+    // Get the image bytes
+    let bytes = response
+        .bytes()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to read image data: {}", e)))?;
+
+    // Compute SHA256 hash of the image content
+    let mut hasher = Sha256::new();
+    hasher.update(&bytes);
+    let hash = hex::encode(hasher.finalize());
+
+    // Extract dimensions if requested
+    let dimensions = if extract_dimensions {
+        let reader = image::ImageReader::new(std::io::Cursor::new(&bytes))
+            .with_guessed_format()
+            .map_err(|e| AppError::Internal(format!("Failed to detect image format: {}", e)))?;
+
+        let dims = reader
+            .into_dimensions()
+            .map_err(|e| AppError::Internal(format!("Failed to read image dimensions: {}", e)))?;
+
+        Some(dims)
+    } else {
+        None
+    };
+
+    // Create directory structure: /srv/chattyness/assets/realm/{realm_id}/scene/{scene_id}/
+    let dir_path = PathBuf::from("/srv/chattyness/assets")
+        .join("realm")
+        .join(realm_id.to_string())
+        .join("scene")
+        .join(scene_id.to_string());
+
+    tokio::fs::create_dir_all(&dir_path)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to create directory: {}", e)))?;
+
+    // Write the file with SHA256 hash as filename
+    let filename = format!("{}.{}", hash, ext);
+    let file_path = dir_path.join(&filename);
+
+    tokio::fs::write(&file_path, &bytes)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to write image file: {}", e)))?;
+
+    // Return the URL path (relative to server root)
+    let local_path = format!(
+        "/static/realm/{}/scene/{}/{}",
+        realm_id, scene_id, filename
+    );
+
+    Ok(ImageDownloadResult {
+        local_path,
+        dimensions,
+    })
+}
+
+/// Delete all image files for a scene.
+async fn delete_scene_images(realm_id: Uuid, scene_id: Uuid) -> Result<(), AppError> {
+    let dir_path = PathBuf::from("/srv/chattyness/assets")
+        .join("realm")
+        .join(realm_id.to_string())
+        .join("scene")
+        .join(scene_id.to_string());
+
+    // Try to remove all files in the directory
+    if let Ok(mut entries) = tokio::fs::read_dir(&dir_path).await {
+        while let Ok(Some(entry)) = entries.next_entry().await {
+            let path = entry.path();
+            if path.is_file() {
+                tokio::fs::remove_file(&path).await.ok();
+            }
+        }
+    }
+
+    Ok(())
+}
+
+// =============================================================================
+// API Types
+// =============================================================================
+
+/// Query parameters for scene list.
+#[derive(Debug, Deserialize)]
+pub struct ListScenesQuery {
+    pub limit: Option<i64>,
+    pub offset: Option<i64>,
+}
+
+/// List all scenes for a realm.
+pub async fn list_scenes(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+) -> Result<Json<Vec<SceneSummary>>, AppError> {
+    // Get the realm
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    let scene_list = scenes::list_scenes_for_realm(&pool, realm.id).await?;
+    Ok(Json(scene_list))
+}
+
+/// Get a scene by ID.
+pub async fn get_scene(
+    State(pool): State<PgPool>,
+    Path(scene_id): Path<Uuid>,
+) -> Result<Json<Scene>, AppError> {
+    let scene = scenes::get_scene_by_id(&pool, scene_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Scene not found".to_string()))?;
+    Ok(Json(scene))
+}
+
+/// Create scene response.
+#[derive(Debug, Serialize)]
+pub struct CreateSceneResponse {
+    pub id: Uuid,
+    pub slug: String,
+}
+
+/// Create a new scene in a realm.
+pub async fn create_scene(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+    Json(mut req): Json<CreateSceneRequest>,
+) -> Result<Json<CreateSceneResponse>, AppError> {
+    // Get the realm
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    // Check if slug is available
+    let available = scenes::is_scene_slug_available(&pool, realm.id, &req.slug).await?;
+    if !available {
+        return Err(AppError::Conflict(format!(
+            "Scene slug '{}' is already taken in this realm",
+            req.slug
+        )));
+    }
+
+    // Generate a temporary scene ID for image storage path
+    let scene_id = Uuid::new_v4();
+
+    // Handle background image URL - download and store locally
+    if let Some(ref url) = req.background_image_url {
+        if !url.is_empty() {
+            let result = download_and_store_image(
+                url,
+                realm.id,
+                scene_id,
+                req.infer_dimensions_from_image,
+            )
+            .await?;
+
+            req.background_image_path = Some(result.local_path);
+
+            if let Some((width, height)) = result.dimensions {
+                req.bounds_wkt = Some(format!(
+                    "POLYGON((0 0, {} 0, {} {}, 0 {}, 0 0))",
+                    width, width, height, height
+                ));
+            }
+        }
+    }
+
+    let scene = scenes::create_scene_with_id(&pool, scene_id, realm.id, &req).await?;
+    Ok(Json(CreateSceneResponse {
+        id: scene.id,
+        slug: scene.slug,
+    }))
+}
+
+/// Update a scene.
+pub async fn update_scene(
+    State(pool): State<PgPool>,
+    Path(scene_id): Path<Uuid>,
+    Json(mut req): Json<UpdateSceneRequest>,
+) -> Result<Json<Scene>, AppError> {
+    // Get the existing scene to get realm_id
+    let existing_scene = scenes::get_scene_by_id(&pool, scene_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Scene not found".to_string()))?;
+
+    // Handle clear background image
+    if req.clear_background_image {
+        delete_scene_images(existing_scene.realm_id, scene_id).await?;
+        req.background_image_path = Some(String::new());
+    }
+    // Handle new background image URL - download and store locally
+    else if let Some(ref url) = req.background_image_url {
+        if !url.is_empty() {
+            delete_scene_images(existing_scene.realm_id, scene_id).await?;
+
+            let result = download_and_store_image(
+                url,
+                existing_scene.realm_id,
+                scene_id,
+                req.infer_dimensions_from_image,
+            )
+            .await?;
+
+            req.background_image_path = Some(result.local_path);
+
+            if let Some((width, height)) = result.dimensions {
+                req.bounds_wkt = Some(format!(
+                    "POLYGON((0 0, {} 0, {} {}, 0 {}, 0 0))",
+                    width, width, height, height
+                ));
+            }
+        }
+    }
+
+    let scene = scenes::update_scene(&pool, scene_id, &req).await?;
+    Ok(Json(scene))
+}
+
+/// Delete a scene.
+pub async fn delete_scene(
+    State(pool): State<PgPool>,
+    Path(scene_id): Path<Uuid>,
+) -> Result<Json<()>, AppError> {
+    scenes::delete_scene(&pool, scene_id).await?;
+    Ok(Json(()))
+}

crates/chattyness-admin-ui/src/api/spots.rs

@@ -0,0 +1,97 @@
+//! Spot management API handlers for admin UI.
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use chattyness_db::{
+    models::{CreateSpotRequest, Spot, SpotSummary, UpdateSpotRequest},
+    queries::spots,
+};
+use chattyness_error::AppError;
+use serde::Serialize;
+use sqlx::PgPool;
+use uuid::Uuid;
+
+/// List all spots for a scene.
+pub async fn list_spots(
+    State(pool): State<PgPool>,
+    Path(scene_id): Path<Uuid>,
+) -> Result<Json<Vec<SpotSummary>>, AppError> {
+    let spot_list = spots::list_spots_for_scene(&pool, scene_id).await?;
+    Ok(Json(spot_list))
+}
+
+/// Get a spot by ID.
+pub async fn get_spot(
+    State(pool): State<PgPool>,
+    Path(spot_id): Path<Uuid>,
+) -> Result<Json<Spot>, AppError> {
+    let spot = spots::get_spot_by_id(&pool, spot_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Spot not found".to_string()))?;
+    Ok(Json(spot))
+}
+
+/// Create spot response.
+#[derive(Debug, Serialize)]
+pub struct CreateSpotResponse {
+    pub id: Uuid,
+}
+
+/// Create a new spot in a scene.
+pub async fn create_spot(
+    State(pool): State<PgPool>,
+    Path(scene_id): Path<Uuid>,
+    Json(req): Json<CreateSpotRequest>,
+) -> Result<Json<CreateSpotResponse>, AppError> {
+    // Check if slug is available (if provided)
+    if let Some(ref slug) = req.slug {
+        let available = spots::is_spot_slug_available(&pool, scene_id, slug).await?;
+        if !available {
+            return Err(AppError::Conflict(format!(
+                "Spot slug '{}' is already taken in this scene",
+                slug
+            )));
+        }
+    }
+
+    let spot = spots::create_spot(&pool, scene_id, &req).await?;
+    Ok(Json(CreateSpotResponse { id: spot.id }))
+}
+
+/// Update a spot.
+pub async fn update_spot(
+    State(pool): State<PgPool>,
+    Path(spot_id): Path<Uuid>,
+    Json(req): Json<UpdateSpotRequest>,
+) -> Result<Json<Spot>, AppError> {
+    // If updating slug, check availability
+    if let Some(ref new_slug) = req.slug {
+        let existing = spots::get_spot_by_id(&pool, spot_id)
+            .await?
+            .ok_or_else(|| AppError::NotFound("Spot not found".to_string()))?;
+
+        if Some(new_slug.clone()) != existing.slug {
+            let available = spots::is_spot_slug_available(&pool, existing.scene_id, new_slug).await?;
+            if !available {
+                return Err(AppError::Conflict(format!(
+                    "Spot slug '{}' is already taken in this scene",
+                    new_slug
+                )));
+            }
+        }
+    }
+
+    let spot = spots::update_spot(&pool, spot_id, &req).await?;
+    Ok(Json(spot))
+}
+
+/// Delete a spot.
+pub async fn delete_spot(
+    State(pool): State<PgPool>,
+    Path(spot_id): Path<Uuid>,
+) -> Result<Json<()>, AppError> {
+    spots::delete_spot(&pool, spot_id).await?;
+    Ok(Json(()))
+}

crates/chattyness-admin-ui/src/api/staff.rs

@@ -0,0 +1,71 @@
+//! Staff management API handlers.
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use chattyness_db::{
+    models::{CreateStaffRequest, StaffMember},
+    queries::owner as queries,
+};
+use chattyness_error::AppError;
+use serde::Serialize;
+use sqlx::PgPool;
+use uuid::Uuid;
+
+/// Create staff response.
+#[derive(Debug, Serialize)]
+pub struct CreateStaffResponse {
+    pub staff: StaffMember,
+    pub temporary_password: Option<String>,
+}
+
+/// List all staff members.
+pub async fn list_staff(
+    State(pool): State<PgPool>,
+) -> Result<Json<Vec<StaffMember>>, AppError> {
+    let staff = queries::get_all_staff(&pool).await?;
+    Ok(Json(staff))
+}
+
+/// Create a new staff member.
+pub async fn create_staff(
+    State(pool): State<PgPool>,
+    Json(req): Json<CreateStaffRequest>,
+) -> Result<Json<CreateStaffResponse>, AppError> {
+    req.validate()?;
+
+    // If user_id is provided, promote existing user
+    if let Some(user_id) = req.user_id {
+        let staff = queries::create_staff(&pool, user_id, req.role, None).await?;
+        Ok(Json(CreateStaffResponse {
+            staff,
+            temporary_password: None,
+        }))
+    } else if let Some(ref new_user) = req.new_user {
+        // Create new user and promote to staff
+        let (user_id, temporary_password) = queries::create_user(
+            &pool,
+            new_user,
+        )
+        .await?;
+        let staff = queries::create_staff(&pool, user_id, req.role, None).await?;
+        Ok(Json(CreateStaffResponse {
+            staff,
+            temporary_password: Some(temporary_password),
+        }))
+    } else {
+        Err(AppError::Validation(
+            "Must provide either user_id or new_user".to_string(),
+        ))
+    }
+}
+
+/// Delete a staff member.
+pub async fn delete_staff(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+) -> Result<Json<()>, AppError> {
+    queries::delete_staff(&pool, user_id).await?;
+    Ok(Json(()))
+}

crates/chattyness-admin-ui/src/api/users.rs

@@ -0,0 +1,161 @@
+//! User management API handlers.
+
+use axum::{
+    extract::{Path, Query, State},
+    Json,
+};
+use chattyness_db::{
+    models::{
+        AccountStatus, CreateUserRequest, RealmRole, RealmSummary, UserDetail, UserListItem,
+        UserRealmMembership,
+    },
+    queries::owner as queries,
+};
+use chattyness_error::AppError;
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+/// Response for user creation.
+#[derive(Debug, Serialize)]
+pub struct CreateUserResponse {
+    pub id: Uuid,
+    pub username: String,
+    pub temporary_password: String,
+}
+
+/// Response for password reset.
+#[derive(Debug, Serialize)]
+pub struct PasswordResetResponse {
+    pub user_id: Uuid,
+    pub temporary_password: String,
+}
+
+/// Query parameters for user list.
+#[derive(Debug, Deserialize)]
+pub struct ListUsersQuery {
+    pub limit: Option<i64>,
+    pub offset: Option<i64>,
+}
+
+/// Query parameters for user search.
+#[derive(Debug, Deserialize)]
+pub struct SearchUsersQuery {
+    pub q: String,
+    pub limit: Option<i64>,
+}
+
+/// List all users with pagination.
+pub async fn list_users(
+    State(pool): State<PgPool>,
+    Query(query): Query<ListUsersQuery>,
+) -> Result<Json<Vec<UserListItem>>, AppError> {
+    let limit = query.limit.unwrap_or(25).min(100);
+    let offset = query.offset.unwrap_or(0);
+    let users = queries::list_users(&pool, limit, offset).await?;
+    Ok(Json(users))
+}
+
+/// Create a new user (optionally with staff role).
+pub async fn create_user(
+    State(pool): State<PgPool>,
+    Json(req): Json<CreateUserRequest>,
+) -> Result<Json<CreateUserResponse>, AppError> {
+    req.validate()?;
+    let (user_id, temporary_password) = queries::create_user_with_staff(&pool, &req).await?;
+    Ok(Json(CreateUserResponse {
+        id: user_id,
+        username: req.username,
+        temporary_password,
+    }))
+}
+
+/// Reset user's password to a random token.
+pub async fn reset_password(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+) -> Result<Json<PasswordResetResponse>, AppError> {
+    let temporary_password = queries::reset_user_password(&pool, user_id).await?;
+    Ok(Json(PasswordResetResponse {
+        user_id,
+        temporary_password,
+    }))
+}
+
+/// Search users by username, email, or display name.
+pub async fn search_users(
+    State(pool): State<PgPool>,
+    Query(query): Query<SearchUsersQuery>,
+) -> Result<Json<Vec<UserListItem>>, AppError> {
+    let limit = query.limit.unwrap_or(10).min(50);
+    let users = queries::search_users(&pool, &query.q, limit).await?;
+    Ok(Json(users))
+}
+
+/// Get user detail by ID.
+pub async fn get_user(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+) -> Result<Json<UserDetail>, AppError> {
+    let user = queries::get_user_detail(&pool, user_id).await?;
+    Ok(Json(user))
+}
+
+/// Update status request.
+#[derive(Debug, Deserialize)]
+pub struct UpdateStatusRequest {
+    pub status: AccountStatus,
+}
+
+/// Update user's account status.
+pub async fn update_status(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+    Json(req): Json<UpdateStatusRequest>,
+) -> Result<Json<UserDetail>, AppError> {
+    let user = queries::update_user_status(&pool, user_id, req.status).await?;
+    Ok(Json(user))
+}
+
+/// Get user's realm memberships.
+pub async fn get_user_realms(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+) -> Result<Json<Vec<UserRealmMembership>>, AppError> {
+    let memberships = queries::get_user_realms(&pool, user_id).await?;
+    Ok(Json(memberships))
+}
+
+/// Add to realm request.
+#[derive(Debug, Deserialize)]
+pub struct AddToRealmRequestBody {
+    pub realm_id: Uuid,
+    pub role: RealmRole,
+}
+
+/// Add user to a realm.
+pub async fn add_to_realm(
+    State(pool): State<PgPool>,
+    Path(user_id): Path<Uuid>,
+    Json(req): Json<AddToRealmRequestBody>,
+) -> Result<Json<()>, AppError> {
+    queries::add_user_to_realm(&pool, user_id, req.realm_id, req.role).await?;
+    Ok(Json(()))
+}
+
+/// Remove user from a realm.
+pub async fn remove_from_realm(
+    State(pool): State<PgPool>,
+    Path((user_id, realm_id)): Path<(Uuid, Uuid)>,
+) -> Result<Json<()>, AppError> {
+    queries::remove_user_from_realm(&pool, user_id, realm_id).await?;
+    Ok(Json(()))
+}
+
+/// List all realms (for dropdown).
+pub async fn list_realms(
+    State(pool): State<PgPool>,
+) -> Result<Json<Vec<RealmSummary>>, AppError> {
+    let realms = queries::list_all_realms(&pool).await?;
+    Ok(Json(realms))
+}

crates/chattyness-admin-ui/src/app.rs

@@ -0,0 +1,78 @@
+//! Admin Leptos application root and router.
+
+use leptos::prelude::*;
+use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
+use leptos_router::components::Router;
+
+use crate::routes::AdminRoutes;
+
+/// Application state for the admin app.
+///
+/// Note: We intentionally don't derive `FromRef` because both pools are
+/// the same type (`PgPool`), which would cause a conflicting implementation.
+/// Instead, handlers should use Extension extractors for the pools.
+#[cfg(feature = "ssr")]
+#[derive(Clone)]
+pub struct AdminAppState {
+    /// The primary database pool for this admin instance.
+    /// For Owner App: chattyness_owner pool (no RLS)
+    /// For Admin App: chattyness_app pool (RLS enforced)
+    pub pool: sqlx::PgPool,
+    pub leptos_options: LeptosOptions,
+}
+
+#[cfg(feature = "ssr")]
+impl axum::extract::FromRef<AdminAppState> for LeptosOptions {
+    fn from_ref(state: &AdminAppState) -> Self {
+        state.leptos_options.clone()
+    }
+}
+
+#[cfg(feature = "ssr")]
+impl axum::extract::FromRef<AdminAppState> for sqlx::PgPool {
+    fn from_ref(state: &AdminAppState) -> Self {
+        state.pool.clone()
+    }
+}
+
+/// Shell component for SSR.
+///
+/// The `data-app="admin"` attribute tells the WASM hydration script to mount
+/// AdminApp.
+pub fn admin_shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <AutoReload options=options.clone() />
+                <HydrationScripts options />
+                <MetaTags />
+            </head>
+            <body class="admin-app" data-app="admin">
+                <AdminApp />
+            </body>
+        </html>
+    }
+}
+
+/// Main admin application component.
+///
+/// This wraps `AdminRoutes` with a `Router` for standalone use (e.g., chattyness-owner).
+/// Routes are nested under `/admin` to match the link paths used in page components.
+/// For embedding in a combined app (e.g., chattyness-app), use `AdminRoutes` directly.
+#[component]
+pub fn AdminApp() -> impl IntoView {
+    // Provide meta context for title and meta tags
+    provide_meta_context();
+
+    view! {
+        <Stylesheet id="admin-styles" href="/static/css/admin.css" />
+        <Title text="Chattyness Admin Panel" />
+
+        <Router base="/admin">
+            <AdminRoutes />
+        </Router>
+    }
+}

crates/chattyness-admin-ui/src/auth.rs

@@ -0,0 +1,195 @@
+//! Admin authentication module.
+//!
+//! Dual-mode authentication for the admin interface:
+//! - Server staff: Uses chattyness_owner pool (bypasses RLS, full access)
+//! - Realm admins: Uses chattyness_app pool (RLS enforces permissions)
+
+#[cfg(feature = "ssr")]
+use axum::{
+    http::StatusCode,
+    response::{IntoResponse, Redirect, Response},
+};
+#[cfg(feature = "ssr")]
+use sqlx::PgPool;
+#[cfg(feature = "ssr")]
+use tower_sessions::{cookie::time::Duration, cookie::SameSite, Expiry, SessionManagerLayer};
+#[cfg(feature = "ssr")]
+use tower_sessions_sqlx_store::PostgresStore;
+#[cfg(feature = "ssr")]
+use uuid::Uuid;
+
+#[cfg(feature = "ssr")]
+use chattyness_db::models::{RealmRole, ServerRole, StaffMember, User};
+#[cfg(feature = "ssr")]
+use chattyness_error::AppError;
+
+// =============================================================================
+// Session Constants
+// =============================================================================
+
+/// Admin session cookie name.
+pub const ADMIN_SESSION_COOKIE_NAME: &str = "chattyness_admin_session";
+
+/// Staff ID key in admin session.
+pub const ADMIN_SESSION_STAFF_ID_KEY: &str = "staff_id";
+
+/// User ID key in session (for realm admins coming from app).
+pub const SESSION_USER_ID_KEY: &str = "user_id";
+
+// =============================================================================
+// Admin Authentication
+// =============================================================================
+
+/// Realm admin role information.
+#[cfg(feature = "ssr")]
+#[derive(Debug, Clone)]
+pub struct RealmAdminRole {
+    pub realm_id: Uuid,
+    pub realm_slug: String,
+    pub realm_name: String,
+    pub role: RealmRole,
+}
+
+/// Authenticated admin - either server staff or realm admin.
+///
+/// This enum determines which database pool to use:
+/// - ServerStaff: Uses owner_pool (bypasses RLS)
+/// - RealmAdmin: Uses app_pool (RLS enforces permissions)
+#[cfg(feature = "ssr")]
+#[derive(Debug, Clone)]
+pub enum AdminAuth {
+    /// Server staff member - full access via owner pool.
+    ServerStaff { staff: StaffMember },
+    /// Realm admin (owner, moderator, or builder) - scoped access via app pool with RLS.
+    RealmAdmin {
+        user: User,
+        /// Realms where this user has admin privileges.
+        realm_roles: Vec<RealmAdminRole>,
+    },
+}
+
+#[cfg(feature = "ssr")]
+impl AdminAuth {
+    /// Get the display name for the authenticated admin.
+    pub fn display_name(&self) -> &str {
+        match self {
+            AdminAuth::ServerStaff { staff } => &staff.display_name,
+            AdminAuth::RealmAdmin { user, .. } => &user.display_name,
+        }
+    }
+
+    /// Get the username for the authenticated admin.
+    pub fn username(&self) -> &str {
+        match self {
+            AdminAuth::ServerStaff { staff } => &staff.username,
+            AdminAuth::RealmAdmin { user, .. } => &user.username,
+        }
+    }
+
+    /// Check if this is a server staff member.
+    pub fn is_server_staff(&self) -> bool {
+        matches!(self, AdminAuth::ServerStaff { .. })
+    }
+
+    /// Check if this admin can access server-wide settings.
+    pub fn can_access_server_config(&self) -> bool {
+        match self {
+            AdminAuth::ServerStaff { staff } => {
+                matches!(staff.role, ServerRole::Owner | ServerRole::Admin)
+            }
+            AdminAuth::RealmAdmin { .. } => false,
+        }
+    }
+
+    /// Check if this admin can manage server staff.
+    pub fn can_manage_staff(&self) -> bool {
+        match self {
+            AdminAuth::ServerStaff { staff } => matches!(staff.role, ServerRole::Owner),
+            AdminAuth::RealmAdmin { .. } => false,
+        }
+    }
+
+    /// Check if this admin can view all users.
+    pub fn can_view_all_users(&self) -> bool {
+        matches!(self, AdminAuth::ServerStaff { .. })
+    }
+
+    /// Get the realms this admin can manage (empty for server staff who see all).
+    pub fn managed_realms(&self) -> &[RealmAdminRole] {
+        match self {
+            AdminAuth::ServerStaff { .. } => &[],
+            AdminAuth::RealmAdmin { realm_roles, .. } => realm_roles,
+        }
+    }
+}
+
+// =============================================================================
+// Admin Auth Error
+// =============================================================================
+
+/// Admin authentication errors.
+#[cfg(feature = "ssr")]
+#[derive(Debug)]
+pub enum AdminAuthError {
+    Unauthorized,
+    SessionError,
+    InternalError,
+}
+
+#[cfg(feature = "ssr")]
+impl IntoResponse for AdminAuthError {
+    fn into_response(self) -> Response {
+        match self {
+            AdminAuthError::Unauthorized => {
+                // Redirect to login page instead of returning 401
+                Redirect::to("/admin/login").into_response()
+            }
+            AdminAuthError::SessionError | AdminAuthError::InternalError => {
+                (StatusCode::INTERNAL_SERVER_ERROR, "Internal server error").into_response()
+            }
+        }
+    }
+}
+
+#[cfg(feature = "ssr")]
+impl From<AdminAuthError> for AppError {
+    fn from(err: AdminAuthError) -> Self {
+        match err {
+            AdminAuthError::Unauthorized => AppError::Unauthorized,
+            AdminAuthError::SessionError => AppError::Internal("Session error".to_string()),
+            AdminAuthError::InternalError => AppError::Internal("Internal error".to_string()),
+        }
+    }
+}
+
+// =============================================================================
+// Session Layer
+// =============================================================================
+
+/// Create the session management layer for admin interface.
+#[cfg(feature = "ssr")]
+pub async fn create_admin_session_layer(
+    pool: PgPool,
+    secure: bool,
+) -> SessionManagerLayer<PostgresStore> {
+    let session_store = PostgresStore::new(pool)
+        .with_schema_name("auth")
+        .expect("Invalid schema name for session store")
+        .with_table_name("tower_sessions")
+        .expect("Invalid table name for session store");
+
+    // Create session table if it doesn't exist
+    if let Err(e) = session_store.migrate().await {
+        tracing::warn!(
+            "Admin session table migration failed (may already exist): {}",
+            e
+        );
+    }
+
+    SessionManagerLayer::new(session_store)
+        .with_name(ADMIN_SESSION_COOKIE_NAME)
+        .with_secure(secure)
+        .with_same_site(SameSite::Lax)
+        .with_http_only(true)
+        .with_expiry(Expiry::OnInactivity(Duration::hours(4)))
+}

crates/chattyness-admin-ui/src/components.rs

@@ -0,0 +1,729 @@
+//! Admin-specific Leptos components.
+
+use leptos::prelude::*;
+
+// =============================================================================
+// Auth Context Types (for sidebar rendering)
+// These are duplicated from api/auth.rs because api is SSR-only
+// =============================================================================
+
+/// Realm info for auth context.
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct ManagedRealm {
+    pub slug: String,
+    pub name: String,
+}
+
+/// Auth context response for the frontend.
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct AuthContextResponse {
+    pub is_server_staff: bool,
+    pub managed_realms: Vec<ManagedRealm>,
+}
+
+/// Admin layout with sidebar navigation.
+///
+/// Note: CSS must be loaded by the parent app:
+/// - chattyness-owner: Loads `/static/chattyness-owner.css` in AdminApp
+/// - chattyness-app: Loads `/admin.css` in lazy wrapper functions
+#[component]
+pub fn AdminLayout(
+    /// Current page identifier for nav highlighting
+    current_page: &'static str,
+    /// Base path for navigation links (e.g., "/admin")
+    #[prop(default = "/admin")]
+    base_path: &'static str,
+    /// Whether the user is server staff (shows all server-level options)
+    #[prop(default = false)]
+    is_server_staff: bool,
+    /// Realms this user can manage (slug, name pairs)
+    #[prop(default = vec![])]
+    managed_realms: Vec<(String, String)>,
+    /// Page content
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <div class="admin-layout">
+            <Sidebar
+                current_page=current_page
+                base_path=base_path
+                is_server_staff=is_server_staff
+                managed_realms=managed_realms
+            />
+            <main class="admin-content">
+                {children()}
+            </main>
+        </div>
+    }
+}
+
+/// Login page layout (no sidebar).
+#[component]
+pub fn LoginLayout(children: Children) -> impl IntoView {
+    view! {
+        <div class="login-layout">
+            {children()}
+        </div>
+    }
+}
+
+/// Fetch auth context from API (for client-side use).
+///
+/// The API path is determined dynamically based on the current URL:
+/// - If at `/admin/...`, uses `/api/admin/auth/context`
+/// - If at root, uses `/api/auth/context`
+pub fn use_auth_context() -> LocalResource<Option<AuthContextResponse>> {
+    LocalResource::new(move || async move {
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            // Determine API base path from current URL
+            let api_path = web_sys::window()
+                .and_then(|w| w.location().pathname().ok())
+                .map(|path| {
+                    if path.starts_with("/admin") {
+                        "/api/admin/auth/context".to_string()
+                    } else {
+                        "/api/auth/context".to_string()
+                    }
+                })
+                .unwrap_or_else(|| "/api/auth/context".to_string());
+
+            let resp = Request::get(&api_path).send().await;
+            match resp {
+                Ok(r) if r.ok() => r.json::<AuthContextResponse>().await.ok(),
+                _ => None,
+            }
+        }
+        #[cfg(not(feature = "hydrate"))]
+        {
+            None::<AuthContextResponse>
+        }
+    })
+}
+
+/// Authenticated admin layout that fetches auth context.
+///
+/// This wrapper fetches the current user's auth context and passes it to
+/// AdminLayout for proper sidebar rendering.
+#[component]
+pub fn AuthenticatedLayout(
+    current_page: &'static str,
+    #[prop(default = "/admin")]
+    base_path: &'static str,
+    children: ChildrenFn,
+) -> impl IntoView {
+    let auth_context = use_auth_context();
+
+    view! {
+        <Suspense fallback=move || view! {
+            <AdminLayout current_page=current_page base_path=base_path>
+                <div class="loading-container">
+                    <p>"Loading..."</p>
+                </div>
+            </AdminLayout>
+        }>
+            {move || {
+                let children = children.clone();
+                auth_context.get().map(move |maybe_ctx| {
+                    let children = children.clone();
+                    match maybe_ctx {
+                        Some(ctx) => {
+                            let managed_realms: Vec<(String, String)> = ctx.managed_realms
+                                .into_iter()
+                                .map(|r| (r.slug, r.name))
+                                .collect();
+                            view! {
+                                <AdminLayout
+                                    current_page=current_page
+                                    base_path=base_path
+                                    is_server_staff=ctx.is_server_staff
+                                    managed_realms=managed_realms
+                                >
+                                    {children()}
+                                </AdminLayout>
+                            }.into_any()
+                        }
+                        None => {
+                            // Fallback: show layout with default props (server staff view)
+                            view! {
+                                <AdminLayout current_page=current_page base_path=base_path is_server_staff=true>
+                                    {children()}
+                                </AdminLayout>
+                            }.into_any()
+                        }
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+/// Sidebar navigation component.
+#[component]
+fn Sidebar(
+    current_page: &'static str,
+    base_path: &'static str,
+    #[prop(default = false)]
+    is_server_staff: bool,
+    #[prop(default = vec![])]
+    managed_realms: Vec<(String, String)>,
+) -> impl IntoView {
+    // Build hrefs with base path
+    let dashboard_href = base_path.to_string();
+    let config_href = format!("{}/config", base_path);
+    let users_href = format!("{}/users", base_path);
+    let users_new_href = format!("{}/users/new", base_path);
+    let staff_href = format!("{}/staff", base_path);
+    let realms_href = format!("{}/realms", base_path);
+    let realms_new_href = format!("{}/realms/new", base_path);
+    let props_href = format!("{}/props", base_path);
+    let props_new_href = format!("{}/props/new", base_path);
+
+    view! {
+        <nav class="sidebar">
+            <div class="sidebar-header">
+                <a href="/admin" class="sidebar-brand">"Chattyness"</a>
+                <span class="sidebar-badge">"Admin"</span>
+            </div>
+
+            <ul class="nav-list">
+                // Server staff: show all server-level options
+                {if is_server_staff {
+                    view! {
+                        <NavItem
+                            href=dashboard_href.clone()
+                            label="Dashboard"
+                            active=current_page == "dashboard"
+                        />
+                        <NavItem
+                            href=config_href.clone()
+                            label="Server Config"
+                            active=current_page == "config"
+                        />
+
+                        <li class="nav-section">
+                            <span class="nav-section-title">"User Management"</span>
+                            <ul class="nav-sublist">
+                                <NavItem
+                                    href=users_href.clone()
+                                    label="All Users"
+                                    active=current_page == "users"
+                                    sub=true
+                                />
+                                <NavItem
+                                    href=users_new_href.clone()
+                                    label="Create User"
+                                    active=current_page == "users_new"
+                                    sub=true
+                                />
+                                <NavItem
+                                    href=staff_href.clone()
+                                    label="Staff"
+                                    active=current_page == "staff"
+                                    sub=true
+                                />
+                            </ul>
+                        </li>
+
+                        <li class="nav-section">
+                            <span class="nav-section-title">"Realm Management"</span>
+                            <ul class="nav-sublist">
+                                <NavItem
+                                    href=realms_href.clone()
+                                    label="All Realms"
+                                    active=current_page == "realms"
+                                    sub=true
+                                />
+                                <NavItem
+                                    href=realms_new_href.clone()
+                                    label="Create Realm"
+                                    active=current_page == "realms_new"
+                                    sub=true
+                                />
+                            </ul>
+                        </li>
+
+                        <li class="nav-section">
+                            <span class="nav-section-title">"Props"</span>
+                            <ul class="nav-sublist">
+                                <NavItem
+                                    href=props_href.clone()
+                                    label="All Props"
+                                    active=current_page == "props"
+                                    sub=true
+                                />
+                                <NavItem
+                                    href=props_new_href.clone()
+                                    label="Create Prop"
+                                    active=current_page == "props_new"
+                                    sub=true
+                                />
+                            </ul>
+                        </li>
+                    }.into_any()
+                } else {
+                    // Realm admin: show realm-specific options only
+                    view! {
+                        {managed_realms.into_iter().map(|(slug, name)| {
+                            let scenes_href = format!("{}/realms/{}/scenes", base_path, slug);
+                            let scenes_new_href = format!("{}/realms/{}/scenes/new", base_path, slug);
+                            let realm_settings_href = format!("{}/realms/{}", base_path, slug);
+
+                            view! {
+                                <li class="nav-section">
+                                    <span class="nav-section-title">{name}</span>
+                                    <ul class="nav-sublist">
+                                        <NavItem
+                                            href=scenes_href
+                                            label="Scenes"
+                                            active=current_page == "scenes"
+                                            sub=true
+                                        />
+                                        <NavItem
+                                            href=scenes_new_href
+                                            label="Create Scene"
+                                            active=current_page == "scenes_new"
+                                            sub=true
+                                        />
+                                        <NavItem
+                                            href=realm_settings_href
+                                            label="Realm Settings"
+                                            active=current_page == "realms"
+                                            sub=true
+                                        />
+                                    </ul>
+                                </li>
+                            }
+                        }).collect::<Vec<_>>()}
+                    }.into_any()
+                }}
+            </ul>
+
+            <div class="sidebar-footer">
+                <button type="button" class="sidebar-logout" id="logout-btn">
+                    "Logout"
+                </button>
+            </div>
+        </nav>
+    }
+}
+
+/// Navigation item component.
+///
+/// Supports both static and dynamic hrefs via `#[prop(into)]`.
+#[component]
+fn NavItem(
+    #[prop(into)] href: String,
+    label: &'static str,
+    #[prop(default = false)] active: bool,
+    /// Whether this is a sub-item (indented)
+    #[prop(default = false)] sub: bool,
+) -> impl IntoView {
+    let link_class = match (active, sub) {
+        (true, false) => "block w-full px-6 py-2 bg-violet-600 text-white transition-all duration-150",
+        (false, false) => "block w-full px-6 py-2 text-gray-400 hover:bg-slate-700 hover:text-white transition-all duration-150",
+        (true, true) => "block w-full pl-10 pr-6 py-2 text-sm bg-violet-600 text-white transition-all duration-150",
+        (false, true) => "block w-full pl-10 pr-6 py-2 text-sm text-gray-400 hover:bg-slate-700 hover:text-white transition-all duration-150",
+    };
+
+    view! {
+        <li class="my-0.5">
+            <a href=href class=link_class>{label}</a>
+        </li>
+    }
+}
+
+/// Page header component.
+#[component]
+pub fn PageHeader(
+    /// Page title
+    title: &'static str,
+    /// Optional subtitle (accepts String or &str)
+    #[prop(optional, into)]
+    subtitle: String,
+    /// Optional action buttons
+    #[prop(optional)]
+    children: Option<Children>,
+) -> impl IntoView {
+    let has_subtitle = !subtitle.is_empty();
+
+    view! {
+        <header class="page-header">
+            <div class="page-header-text">
+                <h1 class="page-title">{title}</h1>
+                {if has_subtitle {
+                    view! { <p class="page-subtitle">{subtitle}</p> }.into_any()
+                } else {
+                    view! {}.into_any()
+                }}
+            </div>
+            {if let Some(children) = children {
+                view! {
+                    <div class="page-header-actions">
+                        {children()}
+                    </div>
+                }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </header>
+    }
+}
+
+/// Card component.
+#[component]
+pub fn Card(
+    #[prop(optional)] title: &'static str,
+    #[prop(optional)] class: &'static str,
+    children: Children,
+) -> impl IntoView {
+    let has_title = !title.is_empty();
+    let card_class = if class.is_empty() {
+        "card".to_string()
+    } else {
+        format!("card {}", class)
+    };
+
+    view! {
+        <div class=card_class>
+            {if has_title {
+                view! { <h2 class="card-title">{title}</h2> }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+            {children()}
+        </div>
+    }
+}
+
+/// Detail grid for key-value display.
+#[component]
+pub fn DetailGrid(children: Children) -> impl IntoView {
+    view! {
+        <div class="detail-grid">
+            {children()}
+        </div>
+    }
+}
+
+/// Detail item within a detail grid.
+#[component]
+pub fn DetailItem(label: &'static str, children: Children) -> impl IntoView {
+    view! {
+        <div class="detail-item">
+            <div class="detail-label">{label}</div>
+            <div class="detail-value">{children()}</div>
+        </div>
+    }
+}
+
+/// Status badge component.
+#[component]
+pub fn StatusBadge(
+    /// Status text
+    status: String,
+) -> impl IntoView {
+    let class = format!("status-badge status-{}", status.to_lowercase());
+    view! {
+        <span class=class>{status}</span>
+    }
+}
+
+/// Privacy badge component.
+#[component]
+pub fn PrivacyBadge(
+    /// Privacy level
+    privacy: String,
+) -> impl IntoView {
+    let class = format!("privacy-badge privacy-{}", privacy.to_lowercase());
+    view! {
+        <span class=class>{privacy}</span>
+    }
+}
+
+/// NSFW badge component.
+#[component]
+pub fn NsfwBadge() -> impl IntoView {
+    view! {
+        <span class="nsfw-badge">"NSFW"</span>
+    }
+}
+
+/// Empty state placeholder.
+#[component]
+pub fn EmptyState(
+    message: &'static str,
+    #[prop(optional)] action_href: &'static str,
+    #[prop(optional)] action_text: &'static str,
+) -> impl IntoView {
+    let has_action = !action_href.is_empty() && !action_text.is_empty();
+
+    view! {
+        <div class="empty-state">
+            <p>{message}</p>
+            {if has_action {
+                view! {
+                    <a href=action_href class="btn btn-primary">{action_text}</a>
+                }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </div>
+    }
+}
+
+/// Alert message component.
+#[component]
+pub fn Alert(
+    /// Alert variant: success, error, warning, info
+    variant: &'static str,
+    /// Alert message
+    message: String,
+) -> impl IntoView {
+    let class = format!("alert alert-{}", variant);
+    view! {
+        <div class=class role="alert">
+            <p>{message}</p>
+        </div>
+    }
+}
+
+/// Message alert that shows/hides based on signal state.
+///
+/// This component reduces the boilerplate for showing form feedback messages.
+/// The message signal contains `Option<(String, bool)>` where bool is `is_success`.
+#[component]
+pub fn MessageAlert(message: ReadSignal<Option<(String, bool)>>) -> impl IntoView {
+    view! {
+        <Show when=move || message.get().is_some()>
+            {move || {
+                let (msg, is_success) = message.get().unwrap_or_default();
+                let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                view! {
+                    <div class=class role="alert">
+                        <p>{msg}</p>
+                    </div>
+                }
+            }}
+        </Show>
+    }
+}
+
+/// Message alert that works with RwSignal.
+#[component]
+pub fn MessageAlertRw(message: RwSignal<Option<(String, bool)>>) -> impl IntoView {
+    view! {
+        <Show when=move || message.get().is_some()>
+            {move || {
+                let (msg, is_success) = message.get().unwrap_or_default();
+                let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                view! {
+                    <div class=class role="alert">
+                        <p>{msg}</p>
+                    </div>
+                }
+            }}
+        </Show>
+    }
+}
+
+/// Temporary password display component.
+///
+/// Shows the temporary password with a warning to copy it.
+#[component]
+pub fn TempPasswordDisplay(
+    /// The temporary password signal
+    password: ReadSignal<Option<String>>,
+    /// Optional label (default: "Temporary Password:")
+    #[prop(default = "Temporary Password:")]
+    label: &'static str,
+) -> impl IntoView {
+    view! {
+        <Show when=move || password.get().is_some()>
+            <div class="alert alert-info">
+                <p><strong>{label}</strong></p>
+                <code class="temp-password">{move || password.get().unwrap_or_default()}</code>
+                <p class="text-muted">"Copy this password now - it will not be shown again!"</p>
+            </div>
+        </Show>
+    }
+}
+
+/// Delete confirmation component with danger zone styling.
+///
+/// Shows a button that reveals a confirmation dialog when clicked.
+#[component]
+pub fn DeleteConfirmation(
+    /// Warning message to show
+    message: &'static str,
+    /// Button text (default: "Delete")
+    #[prop(default = "Delete")]
+    button_text: &'static str,
+    /// Confirm button text (default: "Yes, Delete")
+    #[prop(default = "Yes, Delete")]
+    confirm_text: &'static str,
+    /// Pending state signal
+    pending: ReadSignal<bool>,
+    /// Callback when delete is confirmed
+    on_confirm: impl Fn() + Clone + Send + Sync + 'static,
+) -> impl IntoView {
+    let (show_confirm, set_show_confirm) = signal(false);
+    let on_confirm_clone = on_confirm.clone();
+
+    view! {
+        <Show
+            when=move || !show_confirm.get()
+            fallback=move || {
+                let on_confirm = on_confirm_clone.clone();
+                view! {
+                    <div class="alert alert-warning">
+                        <p>{message}</p>
+                        <div class="action-buttons">
+                            <button
+                                type="button"
+                                class="btn btn-danger"
+                                disabled=move || pending.get()
+                                on:click=move |_| on_confirm()
+                            >
+                                {move || if pending.get() { "Deleting..." } else { confirm_text }}
+                            </button>
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                on:click=move |_| set_show_confirm.set(false)
+                            >
+                                "Cancel"
+                            </button>
+                        </div>
+                    </div>
+                }
+            }
+        >
+            <button
+                type="button"
+                class="btn btn-danger"
+                on:click=move |_| set_show_confirm.set(true)
+            >
+                {button_text}
+            </button>
+        </Show>
+    }
+}
+
+/// Submit button with loading state.
+#[component]
+pub fn SubmitButton(
+    /// Button text when not pending
+    text: &'static str,
+    /// Button text when pending (default adds "...")
+    #[prop(optional)]
+    pending_text: Option<&'static str>,
+    /// Whether the button is in pending state
+    pending: ReadSignal<bool>,
+    /// Additional CSS classes
+    #[prop(default = "btn btn-primary")]
+    class: &'static str,
+) -> impl IntoView {
+    let loading_text = pending_text.unwrap_or_else(|| {
+        // Can't do string manipulation at compile time, so use a simple approach
+        text
+    });
+
+    view! {
+        <button
+            type="submit"
+            class=class
+            disabled=move || pending.get()
+        >
+            {move || if pending.get() { loading_text } else { text }}
+        </button>
+    }
+}
+
+/// Loading spinner.
+#[component]
+pub fn LoadingSpinner(#[prop(optional)] message: &'static str) -> impl IntoView {
+    view! {
+        <div class="loading-spinner">
+            <div class="spinner"></div>
+            {if !message.is_empty() {
+                view! { <span class="loading-message">{message}</span> }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </div>
+    }
+}
+
+/// Role badge component.
+#[component]
+pub fn RoleBadge(role: String) -> impl IntoView {
+    let class = format!("role-badge role-{}", role.to_lowercase());
+    view! {
+        <span class=class>{role}</span>
+    }
+}
+
+/// Pagination component.
+#[component]
+pub fn Pagination(current_page: i64, base_url: String, query: String) -> impl IntoView {
+    let prev_page = current_page - 1;
+    let next_page = current_page + 1;
+
+    let prev_url = if query.is_empty() {
+        format!("{}?page={}", base_url, prev_page)
+    } else {
+        format!("{}?q={}&page={}", base_url, query, prev_page)
+    };
+
+    let next_url = if query.is_empty() {
+        format!("{}?page={}", base_url, next_page)
+    } else {
+        format!("{}?q={}&page={}", base_url, query, next_page)
+    };
+
+    view! {
+        <nav class="pagination">
+            {if current_page > 1 {
+                view! {
+                    <a href=prev_url class="btn btn-secondary">"Previous"</a>
+                }.into_any()
+            } else {
+                view! {
+                    <span class="btn btn-secondary btn-disabled">"Previous"</span>
+                }.into_any()
+            }}
+            <span class="pagination-info">"Page " {current_page}</span>
+            <a href=next_url class="btn btn-secondary">"Next"</a>
+        </nav>
+    }
+}
+
+/// Search form component for list pages.
+#[component]
+pub fn SearchForm(
+    /// Form action URL (e.g., "/admin/users")
+    action: &'static str,
+    /// Placeholder text
+    placeholder: &'static str,
+    /// Current search value signal
+    search_input: RwSignal<String>,
+) -> impl IntoView {
+    view! {
+        <form method="get" action=action class="search-form">
+            <div class="search-box">
+                <input
+                    type="search"
+                    name="q"
+                    placeholder=placeholder
+                    class="form-input search-input"
+                    prop:value=move || search_input.get()
+                    on:input=move |ev| search_input.set(event_target_value(&ev))
+                />
+                <button type="submit" class="btn btn-primary">"Search"</button>
+            </div>
+        </form>
+    }
+}

crates/chattyness-admin-ui/src/hooks.rs

@@ -0,0 +1,226 @@
+//! Reusable hooks for the admin UI.
+//!
+//! These hooks provide common patterns for data fetching, pagination,
+//! and form submissions to reduce duplication across pages.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_query_map;
+
+/// A hook for fetching data from an API endpoint.
+///
+/// Handles the `#[cfg(feature = "hydrate")]` boilerplate and provides
+/// a consistent pattern for client-side data fetching.
+///
+/// # Example
+/// ```rust
+/// let users = use_fetch::<Vec<User>>(move || format!("/api/users?page={}", page()));
+/// ```
+pub fn use_fetch<T>(url_fn: impl Fn() -> String + Send + Sync + 'static) -> LocalResource<Option<T>>
+where
+    T: serde::de::DeserializeOwned + Send + 'static,
+{
+    LocalResource::new(move || {
+        let url = url_fn();
+        async move {
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+                match Request::get(&url).send().await {
+                    Ok(r) if r.ok() => r.json::<T>().await.ok(),
+                    _ => None,
+                }
+            }
+            #[cfg(not(feature = "hydrate"))]
+            {
+                let _ = url;
+                None::<T>
+            }
+        }
+    })
+}
+
+/// A hook for fetching data with a condition.
+///
+/// Similar to `use_fetch` but allows skipping the fetch if a condition is false.
+///
+/// # Example
+/// ```rust
+/// let user = use_fetch_if::<UserDetail>(
+///     move || !user_id().is_empty(),
+///     move || format!("/api/users/{}", user_id())
+/// );
+/// ```
+pub fn use_fetch_if<T>(
+    condition: impl Fn() -> bool + Send + Sync + 'static,
+    url_fn: impl Fn() -> String + Send + Sync + 'static,
+) -> LocalResource<Option<T>>
+where
+    T: serde::de::DeserializeOwned + Send + 'static,
+{
+    LocalResource::new(move || {
+        let should_fetch = condition();
+        let url = url_fn();
+        async move {
+            if !should_fetch {
+                return None;
+            }
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+                match Request::get(&url).send().await {
+                    Ok(r) if r.ok() => r.json::<T>().await.ok(),
+                    _ => None,
+                }
+            }
+            #[cfg(not(feature = "hydrate"))]
+            {
+                let _ = url;
+                None::<T>
+            }
+        }
+    })
+}
+
+/// Pagination state extracted from URL query parameters.
+pub struct PaginationState {
+    /// The current search query (from `?q=...`).
+    pub search_query: Signal<String>,
+    /// The current page number (from `?page=...`, defaults to 1).
+    pub page: Signal<i64>,
+    /// Signal for the search input value (for controlled input).
+    pub search_input: RwSignal<String>,
+}
+
+/// A hook for extracting pagination state from URL query parameters.
+///
+/// Returns search query, page number, and a controlled search input signal.
+///
+/// # Example
+/// ```rust
+/// let pagination = use_pagination();
+/// let url = format!("/api/users?q={}&page={}", pagination.search_query.get(), pagination.page.get());
+/// ```
+pub fn use_pagination() -> PaginationState {
+    let query = use_query_map();
+
+    let search_query = Signal::derive(move || query.get().get("q").unwrap_or_default());
+
+    let page = Signal::derive(move || {
+        query
+            .get()
+            .get("page")
+            .and_then(|p| p.parse().ok())
+            .unwrap_or(1i64)
+    });
+
+    // Use get_untracked for initial value to avoid reactive tracking warning
+    let initial_search = query.get_untracked().get("q").unwrap_or_default();
+    let search_input = RwSignal::new(initial_search);
+
+    PaginationState {
+        search_query,
+        page,
+        search_input,
+    }
+}
+
+/// Message state for form feedback (message text, is_success).
+pub type MessageSignal = RwSignal<Option<(String, bool)>>;
+
+/// Creates a message signal for form feedback.
+pub fn use_message() -> MessageSignal {
+    RwSignal::new(None)
+}
+
+/// A helper for making POST/PUT/DELETE requests with JSON body.
+///
+/// Returns the response or error message.
+#[cfg(feature = "hydrate")]
+pub async fn api_request<T>(
+    method: &str,
+    url: &str,
+    body: Option<&serde_json::Value>,
+) -> Result<T, String>
+where
+    T: serde::de::DeserializeOwned,
+{
+    use gloo_net::http::Request;
+
+    let request = match method {
+        "POST" => Request::post(url),
+        "PUT" => Request::put(url),
+        "DELETE" => Request::delete(url),
+        _ => Request::get(url),
+    };
+
+    let response = if let Some(body) = body {
+        request
+            .json(body)
+            .map_err(|e| e.to_string())?
+            .send()
+            .await
+    } else {
+        request.send().await
+    }
+    .map_err(|_| "Network error".to_string())?;
+
+    if response.ok() {
+        response
+            .json::<T>()
+            .await
+            .map_err(|_| "Failed to parse response".to_string())
+    } else {
+        // Try to parse error response
+        #[derive(serde::Deserialize)]
+        struct ErrorResp {
+            error: String,
+        }
+        if let Ok(err) = response.json::<ErrorResp>().await {
+            Err(err.error)
+        } else {
+            Err("Request failed".to_string())
+        }
+    }
+}
+
+/// A helper for making POST/PUT/DELETE requests that return success/failure.
+#[cfg(feature = "hydrate")]
+pub async fn api_request_simple(
+    method: &str,
+    url: &str,
+    body: Option<&serde_json::Value>,
+) -> Result<(), String> {
+    use gloo_net::http::Request;
+
+    let request = match method {
+        "POST" => Request::post(url),
+        "PUT" => Request::put(url),
+        "DELETE" => Request::delete(url),
+        _ => Request::get(url),
+    };
+
+    let response = if let Some(body) = body {
+        request
+            .json(body)
+            .map_err(|e| e.to_string())?
+            .send()
+            .await
+    } else {
+        request.send().await
+    }
+    .map_err(|_| "Network error".to_string())?;
+
+    if response.ok() {
+        Ok(())
+    } else {
+        #[derive(serde::Deserialize)]
+        struct ErrorResp {
+            error: String,
+        }
+        if let Ok(err) = response.json::<ErrorResp>().await {
+            Err(err.error)
+        } else {
+            Err("Request failed".to_string())
+        }
+    }
+}

crates/chattyness-admin-ui/src/lib.rs

@@ -0,0 +1,51 @@
+#![recursion_limit = "256"]
+//! Admin UI crate for Chattyness.
+//!
+//! This crate provides the Leptos-based admin interface that can be used by:
+//! - The Owner App (:3001) with `chattyness_owner` DB role (no RLS)
+//! - The Admin App (:3000/admin) with `chattyness_app` DB role (RLS enforced)
+//!
+//! The UI components are the same; only the database connection differs.
+//!
+//! ## Usage
+//!
+//! For standalone use (e.g., chattyness-owner):
+//! ```ignore
+//! use chattyness_admin_ui::AdminApp;
+//! // AdminApp includes its own Router
+//! ```
+//!
+//! For embedding in a combined app (e.g., chattyness-app):
+//! ```ignore
+//! use chattyness_admin_ui::AdminRoutes;
+//! // AdminRoutes can be placed inside an existing Router
+//! ```
+
+pub mod api;
+pub mod app;
+pub mod auth;
+pub mod components;
+pub mod hooks;
+pub mod models;
+pub mod pages;
+pub mod routes;
+pub mod utils;
+
+pub use app::{admin_shell, AdminApp};
+pub use routes::AdminRoutes;
+
+// Re-export commonly used items for convenience
+pub use components::{
+    Alert, Card, DeleteConfirmation, DetailGrid, DetailItem, EmptyState, LoadingSpinner,
+    MessageAlert, MessageAlertRw, NsfwBadge, PageHeader, Pagination, PrivacyBadge, RoleBadge,
+    SearchForm, StatusBadge, SubmitButton, TempPasswordDisplay,
+};
+pub use hooks::{use_fetch, use_fetch_if, use_message, use_pagination, PaginationState};
+pub use models::*;
+pub use utils::{build_bounds_wkt, build_paginated_url, get_api_base, parse_bounds_wkt};
+
+#[cfg(feature = "hydrate")]
+pub use utils::{confirm, navigate_to, reload_page};
+
+#[cfg(feature = "ssr")]
+pub use app::AdminAppState;

crates/chattyness-admin-ui/src/models.rs

@@ -0,0 +1,258 @@
+//! Shared model types for the admin UI.
+//!
+//! These are client-side DTOs (Data Transfer Objects) for API responses.
+//! They are separate from the database models in `chattyness_db`.
+
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+// =============================================================================
+// User Models
+// =============================================================================
+
+/// User summary for list display.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct UserSummary {
+    pub id: String,
+    pub username: String,
+    pub display_name: String,
+    pub email: Option<String>,
+    pub status: String,
+    pub created_at: String,
+}
+
+/// User detail from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct UserDetail {
+    pub id: String,
+    pub username: String,
+    pub display_name: String,
+    pub email: Option<String>,
+    pub status: String,
+    pub server_role: Option<String>,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+/// Response for user creation.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct CreateUserResponse {
+    pub id: String,
+    pub username: String,
+    pub temporary_password: String,
+}
+
+/// Response for password reset.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct PasswordResetResponse {
+    pub user_id: String,
+    pub temporary_password: String,
+}
+
+// =============================================================================
+// Staff Models
+// =============================================================================
+
+/// Staff member for list display.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct StaffMemberSummary {
+    pub user_id: String,
+    pub username: String,
+    pub display_name: String,
+    pub email: Option<String>,
+    pub role: String,
+    pub appointed_at: String,
+}
+
+// =============================================================================
+// Realm Models
+// =============================================================================
+
+/// Realm summary for list display.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct RealmSummary {
+    pub id: String,
+    pub slug: String,
+    pub name: String,
+    pub tagline: Option<String>,
+    pub privacy: String,
+    pub is_nsfw: bool,
+    pub owner_id: String,
+    pub owner_username: String,
+    pub member_count: i64,
+    pub current_user_count: i64,
+    pub created_at: String,
+}
+
+/// Realm detail from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct RealmDetail {
+    pub id: String,
+    pub slug: String,
+    pub name: String,
+    pub tagline: Option<String>,
+    pub description: Option<String>,
+    pub privacy: String,
+    pub is_nsfw: bool,
+    pub allow_guest_access: bool,
+    pub max_users: i32,
+    pub theme_color: Option<String>,
+    pub owner_id: String,
+    pub owner_username: String,
+    pub owner_display_name: String,
+    pub member_count: i64,
+    pub current_user_count: i64,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+/// Response for realm creation.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct CreateRealmResponse {
+    pub realm_id: String,
+    pub slug: String,
+    pub owner_id: String,
+    pub owner_temporary_password: Option<String>,
+}
+
+// =============================================================================
+// Scene Models
+// =============================================================================
+
+/// Scene summary for list display.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct SceneSummary {
+    pub id: Uuid,
+    pub name: String,
+    pub slug: String,
+    pub sort_order: i32,
+    pub is_entry_point: bool,
+    pub is_hidden: bool,
+    pub background_color: Option<String>,
+    pub background_image_path: Option<String>,
+}
+
+/// Scene detail from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct SceneDetail {
+    pub id: Uuid,
+    pub realm_id: Uuid,
+    pub name: String,
+    pub slug: String,
+    pub description: Option<String>,
+    pub background_image_path: Option<String>,
+    pub background_color: Option<String>,
+    pub bounds_wkt: String,
+    pub dimension_mode: String,
+    pub sort_order: i32,
+    pub is_entry_point: bool,
+    pub is_hidden: bool,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+/// Response for image dimensions.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ImageDimensionsResponse {
+    pub width: u32,
+    pub height: u32,
+}
+
+// =============================================================================
+// Dashboard Models
+// =============================================================================
+
+/// Dashboard stats from server.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct DashboardStats {
+    pub total_users: i64,
+    pub active_users: i64,
+    pub total_realms: i64,
+    pub online_users: i64,
+    pub staff_count: i64,
+}
+
+// =============================================================================
+// Server Config Models
+// =============================================================================
+
+/// Server configuration from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ServerConfig {
+    pub id: String,
+    pub name: String,
+    pub description: Option<String>,
+    pub welcome_message: Option<String>,
+    pub max_users_per_channel: i32,
+    pub message_rate_limit: i32,
+    pub message_rate_window_seconds: i32,
+    pub allow_guest_access: bool,
+    pub allow_user_uploads: bool,
+    pub require_email_verification: bool,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+// =============================================================================
+// Common Response Types
+// =============================================================================
+
+/// Generic error response from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ErrorResponse {
+    pub error: String,
+}
+
+/// Generic success response.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct SuccessResponse {
+    pub success: bool,
+}
+
+// =============================================================================
+// Prop Models
+// =============================================================================
+
+/// Prop summary for list display.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct PropSummary {
+    pub id: String,
+    pub name: String,
+    pub slug: String,
+    pub asset_path: String,
+    pub default_layer: Option<String>,
+    pub is_active: bool,
+    pub created_at: String,
+}
+
+/// Prop detail from API.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct PropDetail {
+    pub id: String,
+    pub name: String,
+    pub slug: String,
+    pub description: Option<String>,
+    pub tags: Vec<String>,
+    pub asset_path: String,
+    pub thumbnail_path: Option<String>,
+    pub default_layer: Option<String>,
+    /// Grid position (0-8): top row 0,1,2 / middle 3,4,5 / bottom 6,7,8
+    pub default_position: Option<i16>,
+    pub is_unique: bool,
+    pub is_transferable: bool,
+    pub is_portable: bool,
+    pub is_active: bool,
+    pub available_from: Option<String>,
+    pub available_until: Option<String>,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+/// Response for prop creation.
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct CreatePropResponse {
+    pub id: String,
+    pub name: String,
+    pub slug: String,
+    pub asset_path: String,
+}

crates/chattyness-admin-ui/src/pages.rs

@@ -0,0 +1,35 @@
+//! Admin interface Leptos page components.
+
+mod config;
+mod dashboard;
+mod login;
+mod props;
+mod props_detail;
+mod props_new;
+mod realm_detail;
+mod realm_new;
+mod realms;
+mod scene_detail;
+mod scene_new;
+mod scenes;
+mod staff;
+mod user_detail;
+mod user_new;
+mod users;
+
+pub use config::ConfigPage;
+pub use dashboard::DashboardPage;
+pub use login::LoginPage;
+pub use props::PropsPage;
+pub use props_detail::PropsDetailPage;
+pub use props_new::PropsNewPage;
+pub use realm_detail::RealmDetailPage;
+pub use realm_new::RealmNewPage;
+pub use realms::RealmsPage;
+pub use scene_detail::SceneDetailPage;
+pub use scene_new::SceneNewPage;
+pub use scenes::ScenesPage;
+pub use staff::StaffPage;
+pub use user_detail::UserDetailPage;
+pub use user_new::UserNewPage;
+pub use users::UsersPage;

crates/chattyness-admin-ui/src/pages/config.rs

@@ -0,0 +1,252 @@
+//! Server config page component.
+
+use leptos::prelude::*;
+
+use crate::components::{Card, MessageAlert, PageHeader};
+use crate::hooks::use_fetch;
+use crate::models::ServerConfig;
+
+/// Config page component.
+#[component]
+pub fn ConfigPage() -> impl IntoView {
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+    let (pending, set_pending) = signal(false);
+
+    let config = use_fetch::<ServerConfig>(|| "/api/admin/config".to_string());
+
+    view! {
+        <PageHeader
+            title="Server Configuration"
+            subtitle="Manage global server settings"
+        />
+
+        <Suspense fallback=|| view! { <p>"Loading configuration..."</p> }>
+            {move || {
+                config.get().map(|maybe_config| {
+                    match maybe_config {
+                        Some(cfg) => view! {
+                            <ConfigForm config=cfg message=message set_message=set_message pending=pending set_pending=set_pending />
+                        }.into_any(),
+                        None => view! {
+                            <Card>
+                                <p class="text-error">"Failed to load configuration. You may not have permission to access this page."</p>
+                            </Card>
+                        }.into_any()
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+/// Config form component.
+#[component]
+#[allow(unused_variables)]
+fn ConfigForm(
+    config: ServerConfig,
+    message: ReadSignal<Option<(String, bool)>>,
+    set_message: WriteSignal<Option<(String, bool)>>,
+    pending: ReadSignal<bool>,
+    set_pending: WriteSignal<bool>,
+) -> impl IntoView {
+    let (name, set_name) = signal(config.name.clone());
+    let (description, set_description) = signal(config.description.clone().unwrap_or_default());
+    let (welcome_message, set_welcome_message) =
+        signal(config.welcome_message.clone().unwrap_or_default());
+    let (max_users_per_channel, set_max_users_per_channel) = signal(config.max_users_per_channel);
+    let (message_rate_limit, set_message_rate_limit) = signal(config.message_rate_limit);
+    let (message_rate_window_seconds, set_message_rate_window_seconds) =
+        signal(config.message_rate_window_seconds);
+    let (allow_guest_access, set_allow_guest_access) = signal(config.allow_guest_access);
+    let (allow_user_uploads, set_allow_user_uploads) = signal(config.allow_user_uploads);
+    let (require_email_verification, set_require_email_verification) =
+        signal(config.require_email_verification);
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+            use leptos::task::spawn_local;
+
+            let data = serde_json::json!({
+                "name": name.get(),
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "welcome_message": if welcome_message.get().is_empty() { None::<String> } else { Some(welcome_message.get()) },
+                "max_users_per_channel": max_users_per_channel.get(),
+                "message_rate_limit": message_rate_limit.get(),
+                "message_rate_window_seconds": message_rate_window_seconds.get(),
+                "allow_guest_access": allow_guest_access.get(),
+                "allow_user_uploads": allow_user_uploads.get(),
+                "require_email_verification": require_email_verification.get()
+            });
+
+            spawn_local(async move {
+                let response = Request::put("/api/admin/config")
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        set_message.set(Some((
+                            "Configuration saved successfully!".to_string(),
+                            true,
+                        )));
+                    }
+                    Ok(_) => {
+                        set_message.set(Some(("Failed to save configuration".to_string(), false)));
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <Card>
+            <form on:submit=on_submit class="config-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">"Server Name"</label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            prop:value=move || name.get()
+                            on:input=move |ev| set_name.set(event_target_value(&ev))
+                        />
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Server Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="welcome_message" class="form-label">"Welcome Message"</label>
+                    <textarea
+                        id="welcome_message"
+                        class="form-textarea"
+                        prop:value=move || welcome_message.get()
+                        on:input=move |ev| set_welcome_message.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="max_users_per_channel" class="form-label">"Max Users per Channel"</label>
+                        <input
+                            type="number"
+                            id="max_users_per_channel"
+                            min="1"
+                            max="1000"
+                            class="form-input"
+                            prop:value=move || max_users_per_channel.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_max_users_per_channel.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="message_rate_limit" class="form-label">"Message Rate Limit"</label>
+                        <input
+                            type="number"
+                            id="message_rate_limit"
+                            min="1"
+                            max="100"
+                            class="form-input"
+                            prop:value=move || message_rate_limit.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_message_rate_limit.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="message_rate_window_seconds" class="form-label">"Rate Window (seconds)"</label>
+                        <input
+                            type="number"
+                            id="message_rate_window_seconds"
+                            min="1"
+                            max="300"
+                            class="form-input"
+                            prop:value=move || message_rate_window_seconds.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_message_rate_window_seconds.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                </div>
+
+                <div class="checkbox-group">
+                    <label class="checkbox-label">
+                        <input
+                            type="checkbox"
+                            class="form-checkbox"
+                            prop:checked=move || allow_guest_access.get()
+                            on:change=move |ev| set_allow_guest_access.set(event_target_checked(&ev))
+                        />
+                        "Allow Guest Access"
+                    </label>
+                </div>
+
+                <div class="checkbox-group">
+                    <label class="checkbox-label">
+                        <input
+                            type="checkbox"
+                            class="form-checkbox"
+                            prop:checked=move || allow_user_uploads.get()
+                            on:change=move |ev| set_allow_user_uploads.set(event_target_checked(&ev))
+                        />
+                        "Allow User Uploads"
+                    </label>
+                </div>
+
+                <div class="checkbox-group">
+                    <label class="checkbox-label">
+                        <input
+                            type="checkbox"
+                            class="form-checkbox"
+                            prop:checked=move || require_email_verification.get()
+                            on:change=move |ev| set_require_email_verification.set(event_target_checked(&ev))
+                        />
+                        "Require Email Verification"
+                    </label>
+                </div>
+
+                <MessageAlert message=message />
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Saving..." } else { "Save Configuration" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/dashboard.rs

@@ -0,0 +1,71 @@
+//! Dashboard page component.
+
+use leptos::prelude::*;
+
+use crate::components::{Card, PageHeader};
+use crate::hooks::use_fetch;
+use crate::models::DashboardStats;
+
+/// Dashboard page component.
+#[component]
+pub fn DashboardPage() -> impl IntoView {
+    let stats = use_fetch::<DashboardStats>(|| "/api/admin/dashboard/stats".to_string());
+
+    view! {
+        <PageHeader
+            title="Dashboard"
+            subtitle="Server overview and quick stats"
+        />
+
+        <div class="dashboard-grid">
+            <Suspense fallback=|| view! { <p>"Loading stats..."</p> }>
+                {move || {
+                    stats.get().map(|maybe_stats| {
+                        match maybe_stats {
+                            Some(s) => view! {
+                                <StatCard title="Total Users" value=s.total_users.to_string() />
+                                <StatCard title="Active Users" value=s.active_users.to_string() />
+                                <StatCard title="Total Realms" value=s.total_realms.to_string() />
+                                <StatCard title="Online Now" value=s.online_users.to_string() />
+                                <StatCard title="Staff Members" value=s.staff_count.to_string() />
+                            }.into_any(),
+                            None => view! {
+                                <StatCard title="Total Users" value="-".to_string() />
+                                <StatCard title="Active Users" value="-".to_string() />
+                                <StatCard title="Total Realms" value="-".to_string() />
+                                <StatCard title="Online Now" value="-".to_string() />
+                                <StatCard title="Staff Members" value="-".to_string() />
+                            }.into_any()
+                        }
+                    })
+                }}
+            </Suspense>
+        </div>
+
+        <div class="dashboard-sections">
+            <Card title="Quick Actions">
+                <div class="quick-actions">
+                    <a href="/admin/users/new" class="btn btn-primary">"Create User"</a>
+                    <a href="/admin/realms/new" class="btn btn-primary">"Create Realm"</a>
+                    <a href="/admin/staff" class="btn btn-secondary">"Manage Staff"</a>
+                    <a href="/admin/config" class="btn btn-secondary">"Server Config"</a>
+                </div>
+            </Card>
+
+            <Card title="Recent Activity">
+                <p class="text-muted">"Activity feed coming soon..."</p>
+            </Card>
+        </div>
+    }
+}
+
+/// Stat card component.
+#[component]
+fn StatCard(title: &'static str, value: String) -> impl IntoView {
+    view! {
+        <div class="stat-card">
+            <div class="stat-value">{value}</div>
+            <div class="stat-title">{title}</div>
+        </div>
+    }
+}

crates/chattyness-admin-ui/src/pages/login.rs

@@ -0,0 +1,137 @@
+//! Login page component.
+
+use leptos::ev::SubmitEvent;
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::Card;
+
+/// Login page component.
+#[component]
+pub fn LoginPage() -> impl IntoView {
+    let (username, set_username) = signal(String::new());
+    let (password, set_password) = signal(String::new());
+    let (error, set_error) = signal(Option::<String>::None);
+    let (pending, set_pending) = signal(false);
+
+    let on_submit = move |ev: SubmitEvent| {
+        ev.prevent_default();
+        set_error.set(None);
+
+        let uname = username.get();
+        let pwd = password.get();
+
+        if uname.is_empty() || pwd.is_empty() {
+            set_error.set(Some("Username and password are required".to_string()));
+            return;
+        }
+
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            spawn_local(async move {
+                let response = Request::post("/api/admin/auth/login")
+                    .json(&serde_json::json!({
+                        "username": uname,
+                        "password": pwd
+                    }))
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        // Redirect to dashboard
+                        if let Some(window) = web_sys::window() {
+                            let _ = window.location().set_href("/admin");
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_error.set(Some(err.error));
+                        } else {
+                            set_error.set(Some("Invalid username or password".to_string()));
+                        }
+                    }
+                    Err(_) => {
+                        set_error.set(Some("Network error. Please try again.".to_string()));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <div class="login-container">
+            <div class="login-header">
+                <h1>"Chattyness"</h1>
+                <span class="login-badge">"Admin Panel"</span>
+                <p>"Administration interface"</p>
+            </div>
+
+            <Card class="login-card">
+                <form on:submit=on_submit class="login-form">
+                    <div class="form-group">
+                        <label for="username" class="form-label">
+                            "Username"
+                            <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            required=true
+                            autocomplete="username"
+                            placeholder="Enter your username"
+                            class="form-input"
+                            prop:value=move || username.get()
+                            on:input=move |ev| set_username.set(event_target_value(&ev))
+                        />
+                    </div>
+
+                    <div class="form-group">
+                        <label for="password" class="form-label">
+                            "Password"
+                            <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            required=true
+                            autocomplete="current-password"
+                            placeholder="Enter your password"
+                            class="form-input"
+                            prop:value=move || password.get()
+                            on:input=move |ev| set_password.set(event_target_value(&ev))
+                        />
+                    </div>
+
+                    <Show when=move || error.get().is_some()>
+                        <div class="alert alert-error" role="alert">
+                            <p>{move || error.get().unwrap_or_default()}</p>
+                        </div>
+                    </Show>
+
+                    <button
+                        type="submit"
+                        class="btn btn-primary btn-full"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Signing in..." } else { "Sign In" }}
+                    </button>
+                </form>
+            </Card>
+        </div>
+    }
+}

crates/chattyness-admin-ui/src/pages/props.rs

@@ -0,0 +1,165 @@
+//! Props list page component.
+
+use leptos::prelude::*;
+
+use crate::components::{Card, EmptyState, PageHeader};
+use crate::hooks::use_fetch;
+use crate::models::PropSummary;
+
+/// View mode for props listing.
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum ViewMode {
+    Table,
+    Grid,
+}
+
+/// Props page component with table and grid views.
+#[component]
+pub fn PropsPage() -> impl IntoView {
+    let (view_mode, set_view_mode) = signal(ViewMode::Table);
+
+    let props = use_fetch::<Vec<PropSummary>>(|| "/api/admin/props".to_string());
+
+    view! {
+        <PageHeader title="All Props" subtitle="Manage server props and avatar items">
+            <div class="flex gap-2">
+                <button
+                    type="button"
+                    class=move || if view_mode.get() == ViewMode::Table {
+                        "btn btn-primary"
+                    } else {
+                        "btn btn-secondary"
+                    }
+                    on:click=move |_| set_view_mode.set(ViewMode::Table)
+                >
+                    "Table"
+                </button>
+                <button
+                    type="button"
+                    class=move || if view_mode.get() == ViewMode::Grid {
+                        "btn btn-primary"
+                    } else {
+                        "btn btn-secondary"
+                    }
+                    on:click=move |_| set_view_mode.set(ViewMode::Grid)
+                >
+                    "Grid"
+                </button>
+                <a href="/admin/props/new" class="btn btn-primary">"Create Prop"</a>
+            </div>
+        </PageHeader>
+
+        <Card>
+            <Suspense fallback=|| view! { <p>"Loading props..."</p> }>
+                {move || {
+                    props.get().map(|maybe_props: Option<Vec<PropSummary>>| {
+                        match maybe_props {
+                            Some(prop_list) if !prop_list.is_empty() => {
+                                if view_mode.get() == ViewMode::Table {
+                                    view! { <PropsTable props=prop_list.clone() /> }.into_any()
+                                } else {
+                                    view! { <PropsGrid props=prop_list.clone() /> }.into_any()
+                                }
+                            }
+                            _ => view! {
+                                <EmptyState
+                                    message="No props found."
+                                    action_href="/admin/props/new"
+                                    action_text="Create Prop"
+                                />
+                            }.into_any()
+                        }
+                    })
+                }}
+            </Suspense>
+        </Card>
+    }
+}
+
+/// Table view for props.
+#[component]
+fn PropsTable(props: Vec<PropSummary>) -> impl IntoView {
+    view! {
+        <div class="table-container">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>"Preview"</th>
+                        <th>"Name"</th>
+                        <th>"Slug"</th>
+                        <th>"Layer"</th>
+                        <th>"Active"</th>
+                        <th>"Created"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {props.into_iter().map(|prop| {
+                        let asset_url = format!("/assets/{}", prop.asset_path);
+                        view! {
+                            <tr>
+                                <td>
+                                    <img
+                                        src=asset_url
+                                        alt=prop.name.clone()
+                                        class="prop-thumbnail"
+                                        style="width: 32px; height: 32px; object-fit: contain;"
+                                    />
+                                </td>
+                                <td>
+                                    <a href=format!("/admin/props/{}", prop.id) class="table-link">
+                                        {prop.name}
+                                    </a>
+                                </td>
+                                <td><code>{prop.slug}</code></td>
+                                <td>
+                                    {prop.default_layer.map(|l| l.to_string()).unwrap_or_else(|| "-".to_string())}
+                                </td>
+                                <td>
+                                    {if prop.is_active {
+                                        view! { <span class="status-badge status-active">"Active"</span> }.into_any()
+                                    } else {
+                                        view! { <span class="status-badge status-inactive">"Inactive"</span> }.into_any()
+                                    }}
+                                </td>
+                                <td>{prop.created_at}</td>
+                            </tr>
+                        }
+                    }).collect_view()}
+                </tbody>
+            </table>
+        </div>
+    }
+}
+
+/// Grid view for props with 64x64 thumbnails.
+#[component]
+fn PropsGrid(props: Vec<PropSummary>) -> impl IntoView {
+    view! {
+        <div class="props-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px; padding: 16px;">
+            {props.into_iter().map(|prop| {
+                let asset_url = format!("/assets/{}", prop.asset_path);
+                let prop_url = format!("/admin/props/{}", prop.id);
+                let prop_name_for_title = prop.name.clone();
+                let prop_name_for_alt = prop.name.clone();
+                let prop_name_for_label = prop.name;
+                view! {
+                    <a
+                        href=prop_url
+                        class="props-grid-item"
+                        style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; padding: 8px; border-radius: 8px; background: var(--bg-secondary, #1e293b); transition: background 0.2s;"
+                        title=prop_name_for_title
+                    >
+                        <img
+                            src=asset_url
+                            alt=prop_name_for_alt
+                            style="width: 64px; height: 64px; object-fit: contain;"
+                        />
+                        <span style="font-size: 0.75rem; margin-top: 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
+                            {prop_name_for_label}
+                        </span>
+                    </a>
+                }
+            }).collect_view()}
+        </div>
+    }
+}

crates/chattyness-admin-ui/src/pages/props_detail.rs

@@ -0,0 +1,139 @@
+//! Prop detail page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+
+use crate::components::{Card, DetailGrid, DetailItem, PageHeader};
+use crate::hooks::use_fetch_if;
+use crate::models::PropDetail;
+
+/// Prop detail page component.
+#[component]
+pub fn PropsDetailPage() -> impl IntoView {
+    let params = use_params_map();
+    let prop_id = move || params.get().get("prop_id").unwrap_or_default();
+    let initial_prop_id = params.get_untracked().get("prop_id").unwrap_or_default();
+
+    let prop = use_fetch_if::<PropDetail>(
+        move || !prop_id().is_empty(),
+        move || format!("/api/admin/props/{}", prop_id()),
+    );
+
+    view! {
+        <PageHeader title="Prop Details" subtitle=initial_prop_id>
+            <a href="/admin/props" class="btn btn-secondary">"Back to Props"</a>
+        </PageHeader>
+
+        <Suspense fallback=|| view! { <p>"Loading prop..."</p> }>
+            {move || {
+                prop.get().map(|maybe_prop| {
+                    match maybe_prop {
+                        Some(p) => view! {
+                            <PropDetailView prop=p />
+                        }.into_any(),
+                        None => view! {
+                            <Card>
+                                <p class="text-error">"Prop not found or you don't have permission to view."</p>
+                            </Card>
+                        }.into_any()
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+#[component]
+fn PropDetailView(prop: PropDetail) -> impl IntoView {
+    let asset_url = format!("/assets/{}", prop.asset_path);
+    let tags_display = if prop.tags.is_empty() {
+        "None".to_string()
+    } else {
+        prop.tags.join(", ")
+    };
+
+    view! {
+        <Card>
+            <div class="prop-header" style="display: flex; gap: 24px; align-items: flex-start;">
+                <div class="prop-preview" style="flex-shrink: 0;">
+                    <img
+                        src=asset_url
+                        alt=prop.name.clone()
+                        style="width: 128px; height: 128px; object-fit: contain; border: 1px solid var(--color-border, #334155); border-radius: 8px; background: var(--color-bg-tertiary, #0f172a);"
+                    />
+                </div>
+                <div class="prop-info" style="flex: 1;">
+                    <h2 style="margin: 0 0 8px 0;">{prop.name.clone()}</h2>
+                    <p class="text-muted" style="margin: 0;"><code>{prop.slug.clone()}</code></p>
+                    {prop.description.clone().map(|desc| view! {
+                        <p style="margin-top: 12px; color: var(--color-text-secondary, #94a3b8);">{desc}</p>
+                    })}
+                </div>
+            </div>
+        </Card>
+
+        <Card title="Details">
+            <DetailGrid>
+                <DetailItem label="Prop ID">
+                    <code>{prop.id.clone()}</code>
+                </DetailItem>
+                <DetailItem label="Tags">
+                    {tags_display}
+                </DetailItem>
+                <DetailItem label="Default Layer">
+                    {prop.default_layer.clone().unwrap_or_else(|| "Not set".to_string())}
+                </DetailItem>
+                <DetailItem label="Default Position">
+                    {match prop.default_position {
+                        Some(pos) => {
+                            let labels = ["Top-Left", "Top-Center", "Top-Right",
+                                         "Middle-Left", "Center", "Middle-Right",
+                                         "Bottom-Left", "Bottom-Center", "Bottom-Right"];
+                            labels.get(pos as usize).map(|s| s.to_string())
+                                .unwrap_or_else(|| format!("{}", pos))
+                        },
+                        None => "Not set".to_string(),
+                    }}
+                </DetailItem>
+                <DetailItem label="Status">
+                    {if prop.is_active {
+                        view! { <span class="status-badge status-active">"Active"</span> }.into_any()
+                    } else {
+                        view! { <span class="status-badge status-inactive">"Inactive"</span> }.into_any()
+                    }}
+                </DetailItem>
+            </DetailGrid>
+        </Card>
+
+        <Card title="Properties">
+            <DetailGrid>
+                <DetailItem label="Unique">
+                    {if prop.is_unique { "Yes" } else { "No" }}
+                </DetailItem>
+                <DetailItem label="Transferable">
+                    {if prop.is_transferable { "Yes" } else { "No" }}
+                </DetailItem>
+                <DetailItem label="Portable">
+                    {if prop.is_portable { "Yes" } else { "No" }}
+                </DetailItem>
+            </DetailGrid>
+        </Card>
+
+        <Card title="Availability">
+            <DetailGrid>
+                <DetailItem label="Available From">
+                    {prop.available_from.clone().unwrap_or_else(|| "Always".to_string())}
+                </DetailItem>
+                <DetailItem label="Available Until">
+                    {prop.available_until.clone().unwrap_or_else(|| "No end date".to_string())}
+                </DetailItem>
+                <DetailItem label="Created">
+                    {prop.created_at.clone()}
+                </DetailItem>
+                <DetailItem label="Updated">
+                    {prop.updated_at.clone()}
+                </DetailItem>
+            </DetailGrid>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/props_new.rs

@@ -0,0 +1,332 @@
+//! Create new prop page component.
+
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, PageHeader};
+
+/// Prop new page component with file upload.
+#[component]
+pub fn PropsNewPage() -> impl IntoView {
+    // Form state
+    let (name, set_name) = signal(String::new());
+    let (slug, set_slug) = signal(String::new());
+    let (description, set_description) = signal(String::new());
+    let (tags, set_tags) = signal(String::new());
+    let (default_layer, set_default_layer) = signal("clothes".to_string());
+    let (default_position, set_default_position) = signal(4i16); // Center position
+
+    // UI state
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+    let (pending, set_pending) = signal(false);
+    let (created_id, _set_created_id) = signal(Option::<String>::None);
+    #[cfg(feature = "hydrate")]
+    let set_created_id = _set_created_id;
+    let (slug_auto, set_slug_auto) = signal(true);
+    let (file_name, _set_file_name) = signal(Option::<String>::None);
+    #[cfg(feature = "hydrate")]
+    let set_file_name = _set_file_name;
+
+    let update_name = move |ev: leptos::ev::Event| {
+        let new_name = event_target_value(&ev);
+        set_name.set(new_name.clone());
+        if slug_auto.get() {
+            let new_slug = new_name
+                .to_lowercase()
+                .chars()
+                .map(|c| if c.is_alphanumeric() { c } else { '-' })
+                .collect::<String>()
+                .trim_matches('-')
+                .to_string();
+            set_slug.set(new_slug);
+        }
+    };
+
+    let on_file_change = move |ev: leptos::ev::Event| {
+        #[cfg(feature = "hydrate")]
+        {
+            use wasm_bindgen::JsCast;
+            let target = ev.target().unwrap();
+            let input: web_sys::HtmlInputElement = target.dyn_into().unwrap();
+            if let Some(files) = input.files() {
+                if files.length() > 0 {
+                    if let Some(file) = files.get(0) {
+                        set_file_name.set(Some(file.name()));
+                    }
+                }
+            }
+        }
+        #[cfg(not(feature = "hydrate"))]
+        {
+            let _ = ev;
+        }
+    };
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use wasm_bindgen::JsCast;
+
+            // Get the form element
+            let target = ev.target().unwrap();
+            let form: web_sys::HtmlFormElement = target.dyn_into().unwrap();
+
+            // Get the file input
+            let file_input = form
+                .query_selector("input[type='file']")
+                .unwrap()
+                .unwrap()
+                .dyn_into::<web_sys::HtmlInputElement>()
+                .unwrap();
+
+            let files = file_input.files();
+            if files.is_none() || files.as_ref().unwrap().length() == 0 {
+                set_message.set(Some(("Please select a file".to_string(), false)));
+                set_pending.set(false);
+                return;
+            }
+
+            let file = files.unwrap().get(0).unwrap();
+
+            // Build tags array from comma-separated string
+            let tags_vec: Vec<String> = tags
+                .get()
+                .split(',')
+                .map(|s| s.trim().to_string())
+                .filter(|s| !s.is_empty())
+                .collect();
+
+            // Create metadata JSON
+            let metadata = serde_json::json!({
+                "name": name.get(),
+                "slug": if slug.get().is_empty() { None::<String> } else { Some(slug.get()) },
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "tags": tags_vec,
+                "default_layer": default_layer.get(),
+                "default_position": default_position.get()
+            });
+
+            // Create FormData
+            let form_data = web_sys::FormData::new().unwrap();
+            form_data
+                .append_with_str("metadata", &metadata.to_string())
+                .unwrap();
+            form_data.append_with_blob("file", &file).unwrap();
+
+            spawn_local(async move {
+                use gloo_net::http::Request;
+
+                let response = Request::post("/api/admin/props")
+                    .body(form_data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        #[derive(serde::Deserialize)]
+                        struct CreateResponse {
+                            id: String,
+                            #[allow(dead_code)]
+                            name: String,
+                            #[allow(dead_code)]
+                            slug: String,
+                        }
+                        if let Ok(result) = resp.json::<CreateResponse>().await {
+                            set_created_id.set(Some(result.id));
+                            set_message.set(Some(("Prop created successfully!".to_string(), true)));
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_message.set(Some((err.error, false)));
+                        } else {
+                            set_message.set(Some(("Failed to create prop".to_string(), false)));
+                        }
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <PageHeader title="Create New Prop" subtitle="Upload a new server prop image">
+            <a href="/admin/props" class="btn btn-secondary">"Back to Props"</a>
+        </PageHeader>
+
+        <Card>
+            <form on:submit=on_submit>
+                <h3 class="section-title">"Prop Details"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">
+                            "Name" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            placeholder="Smile Expression"
+                            prop:value=move || name.get()
+                            on:input=update_name
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="slug" class="form-label">"Slug (URL)"</label>
+                        <input
+                            type="text"
+                            id="slug"
+                            pattern="[a-z0-9][a-z0-9\\-]*[a-z0-9]|[a-z0-9]"
+                            class="form-input"
+                            placeholder="smile-expression"
+                            prop:value=move || slug.get()
+                            on:input=move |ev| {
+                                set_slug_auto.set(false);
+                                set_slug.set(event_target_value(&ev));
+                            }
+                        />
+                        <small class="form-help">"Optional. Auto-generated from name if not provided."</small>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        placeholder="A happy smile expression for avatars"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="tags" class="form-label">"Tags"</label>
+                    <input
+                        type="text"
+                        id="tags"
+                        class="form-input"
+                        placeholder="expression, face, happy"
+                        prop:value=move || tags.get()
+                        on:input=move |ev| set_tags.set(event_target_value(&ev))
+                    />
+                    <small class="form-help">"Comma-separated list of tags"</small>
+                </div>
+
+                <h3 class="section-title">"Image File"</h3>
+
+                <div class="form-group">
+                    <label for="file" class="form-label">
+                        "Image File" <span class="required">"*"</span>
+                    </label>
+                    <input
+                        type="file"
+                        id="file"
+                        required=true
+                        accept=".svg,.png,image/svg+xml,image/png"
+                        class="form-input"
+                        on:change=on_file_change
+                    />
+                    <small class="form-help">"SVG or PNG image file (64x64 recommended)"</small>
+                    <Show when=move || file_name.get().is_some()>
+                        <p class="text-muted">"Selected: " {move || file_name.get().unwrap_or_default()}</p>
+                    </Show>
+                </div>
+
+                <h3 class="section-title">"Default Positioning"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="default_layer" class="form-label">"Layer"</label>
+                        <select
+                            id="default_layer"
+                            class="form-select"
+                            on:change=move |ev| set_default_layer.set(event_target_value(&ev))
+                        >
+                            <option value="skin" selected=move || default_layer.get() == "skin">"Skin (behind)"</option>
+                            <option value="clothes" selected=move || default_layer.get() == "clothes">"Clothes (with)"</option>
+                            <option value="accessories" selected=move || default_layer.get() == "accessories">"Accessories (front)"</option>
+                        </select>
+                        <small class="form-help">"Z-depth layer for prop placement"</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="default_position" class="form-label">"Position"</label>
+                        <select
+                            id="default_position"
+                            class="form-select"
+                            on:change=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_default_position.set(v);
+                                }
+                            }
+                        >
+                            <option value="0" selected=move || default_position.get() == 0>"Top-Left (0)"</option>
+                            <option value="1" selected=move || default_position.get() == 1>"Top-Center (1)"</option>
+                            <option value="2" selected=move || default_position.get() == 2>"Top-Right (2)"</option>
+                            <option value="3" selected=move || default_position.get() == 3>"Middle-Left (3)"</option>
+                            <option value="4" selected=move || default_position.get() == 4>"Center (4)"</option>
+                            <option value="5" selected=move || default_position.get() == 5>"Middle-Right (5)"</option>
+                            <option value="6" selected=move || default_position.get() == 6>"Bottom-Left (6)"</option>
+                            <option value="7" selected=move || default_position.get() == 7>"Bottom-Center (7)"</option>
+                            <option value="8" selected=move || default_position.get() == 8>"Bottom-Right (8)"</option>
+                        </select>
+                        <small class="form-help">"Grid position (3x3 grid)"</small>
+                    </div>
+                </div>
+
+                <Show when=move || message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <Show when=move || created_id.get().is_some()>
+                    {move || {
+                        let id = created_id.get().unwrap_or_default();
+                        view! {
+                            <div class="alert alert-info">
+                                <p>
+                                    <a href=format!("/admin/props/{}", id)>
+                                        "View prop"
+                                    </a>
+                                </p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Uploading..." } else { "Create Prop" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/realm_detail.rs

@@ -0,0 +1,295 @@
+//! Realm detail/edit page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{
+    Card, DetailGrid, DetailItem, MessageAlert, NsfwBadge, PageHeader, PrivacyBadge,
+};
+use crate::hooks::use_fetch_if;
+use crate::models::RealmDetail;
+use crate::utils::get_api_base;
+
+/// Realm detail page component.
+#[component]
+pub fn RealmDetailPage() -> impl IntoView {
+    let params = use_params_map();
+    let slug = move || params.get().get("slug").unwrap_or_default();
+    let initial_slug = params.get_untracked().get("slug").unwrap_or_default();
+
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+
+    let realm = use_fetch_if::<RealmDetail>(
+        move || !slug().is_empty(),
+        move || format!("{}/realms/{}", get_api_base(), slug()),
+    );
+
+    let slug_for_scenes = initial_slug.clone();
+
+    view! {
+        <PageHeader title="Realm Details" subtitle=format!("/{}", initial_slug)>
+            <a href=format!("/admin/realms/{}/scenes", slug_for_scenes) class="btn btn-primary">"Manage Scenes"</a>
+            <a href="/admin/realms" class="btn btn-secondary">"Back to Realms"</a>
+        </PageHeader>
+
+        <Suspense fallback=|| view! { <p>"Loading realm..."</p> }>
+            {move || {
+                realm.get().map(|maybe_realm| {
+                    match maybe_realm {
+                        Some(r) => view! {
+                            <RealmDetailView realm=r message=message set_message=set_message />
+                        }.into_any(),
+                        None => view! {
+                            <Card>
+                                <p class="text-error">"Realm not found or you don't have permission to view."</p>
+                            </Card>
+                        }.into_any()
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+#[component]
+#[allow(unused_variables)]
+fn RealmDetailView(
+    realm: RealmDetail,
+    message: ReadSignal<Option<(String, bool)>>,
+    set_message: WriteSignal<Option<(String, bool)>>,
+) -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let slug = realm.slug.clone();
+    let slug_display = realm.slug.clone();
+    let (pending, set_pending) = signal(false);
+
+    // Form state
+    let (name, set_name) = signal(realm.name.clone());
+    let (tagline, set_tagline) = signal(realm.tagline.clone().unwrap_or_default());
+    let (description, set_description) = signal(realm.description.clone().unwrap_or_default());
+    let (privacy, set_privacy) = signal(realm.privacy.clone());
+    let (max_users, set_max_users) = signal(realm.max_users);
+    let (is_nsfw, set_is_nsfw) = signal(realm.is_nsfw);
+    let (allow_guest_access, set_allow_guest_access) = signal(realm.allow_guest_access);
+    let (theme_color, set_theme_color) =
+        signal(realm.theme_color.clone().unwrap_or_else(|| "#7c3aed".to_string()));
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let api_base = get_api_base();
+            let slug = slug.clone();
+            let data = serde_json::json!({
+                "name": name.get(),
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "tagline": if tagline.get().is_empty() { None::<String> } else { Some(tagline.get()) },
+                "privacy": privacy.get(),
+                "is_nsfw": is_nsfw.get(),
+                "max_users": max_users.get(),
+                "allow_guest_access": allow_guest_access.get(),
+                "theme_color": theme_color.get()
+            });
+
+            spawn_local(async move {
+                let response = Request::put(&format!("{}/realms/{}", api_base, slug))
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        set_message.set(Some(("Realm updated successfully!".to_string(), true)));
+                    }
+                    Ok(_) => {
+                        set_message.set(Some(("Failed to update realm".to_string(), false)));
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <Card>
+            <div class="realm-header">
+                <div class="realm-info">
+                    <h2>{realm.name.clone()}</h2>
+                    <p class="text-muted">{realm.tagline.clone().unwrap_or_default()}</p>
+                </div>
+                <div class="realm-badges">
+                    <PrivacyBadge privacy=realm.privacy.clone() />
+                    {if realm.is_nsfw {
+                        view! { <NsfwBadge /> }.into_any()
+                    } else {
+                        view! {}.into_any()
+                    }}
+                </div>
+            </div>
+
+            <DetailGrid>
+                <DetailItem label="Owner">
+                    <a href=format!("/admin/users/{}", realm.owner_id) class="table-link">
+                        {realm.owner_display_name.clone()} " (@" {realm.owner_username.clone()} ")"
+                    </a>
+                </DetailItem>
+                <DetailItem label="Members">
+                    {realm.member_count.to_string()}
+                </DetailItem>
+                <DetailItem label="Current Users">
+                    {realm.current_user_count.to_string()}
+                </DetailItem>
+                <DetailItem label="Max Users">
+                    {realm.max_users.to_string()}
+                </DetailItem>
+                <DetailItem label="Created">
+                    {realm.created_at.clone()}
+                </DetailItem>
+                <DetailItem label="Updated">
+                    {realm.updated_at.clone()}
+                </DetailItem>
+            </DetailGrid>
+        </Card>
+
+        <Card title="Edit Realm Settings">
+            <form on:submit=on_submit>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">"Realm Name"</label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            prop:value=move || name.get()
+                            on:input=move |ev| set_name.set(event_target_value(&ev))
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">"Slug (URL)"</label>
+                        <input
+                            type="text"
+                            value=slug_display
+                            class="form-input"
+                            disabled=true
+                        />
+                        <small class="form-help">"Slug cannot be changed"</small>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="tagline" class="form-label">"Tagline"</label>
+                    <input
+                        type="text"
+                        id="tagline"
+                        class="form-input"
+                        placeholder="A short description"
+                        prop:value=move || tagline.get()
+                        on:input=move |ev| set_tagline.set(event_target_value(&ev))
+                    />
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="privacy" class="form-label">"Privacy"</label>
+                        <select
+                            id="privacy"
+                            class="form-select"
+                            on:change=move |ev| set_privacy.set(event_target_value(&ev))
+                        >
+                            <option value="public" selected=move || privacy.get() == "public">"Public"</option>
+                            <option value="unlisted" selected=move || privacy.get() == "unlisted">"Unlisted"</option>
+                            <option value="private" selected=move || privacy.get() == "private">"Private"</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="max_users" class="form-label">"Max Users"</label>
+                        <input
+                            type="number"
+                            id="max_users"
+                            min=1
+                            max=10000
+                            class="form-input"
+                            prop:value=move || max_users.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_max_users.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_nsfw.get()
+                                on:change=move |ev| set_is_nsfw.set(event_target_checked(&ev))
+                            />
+                            "NSFW Content"
+                        </label>
+                    </div>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || allow_guest_access.get()
+                                on:change=move |ev| set_allow_guest_access.set(event_target_checked(&ev))
+                            />
+                            "Allow Guest Access"
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="theme_color" class="form-label">"Theme Color"</label>
+                    <input
+                        type="color"
+                        id="theme_color"
+                        class="form-color"
+                        prop:value=move || theme_color.get()
+                        on:input=move |ev| set_theme_color.set(event_target_value(&ev))
+                    />
+                </div>
+
+                <MessageAlert message=message />
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Saving..." } else { "Save Changes" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/realm_new.rs

@@ -0,0 +1,388 @@
+//! Create new realm page component.
+
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, PageHeader};
+
+/// Realm new page component.
+#[component]
+pub fn RealmNewPage() -> impl IntoView {
+    // Form state
+    let (name, set_name) = signal(String::new());
+    let (slug, set_slug) = signal(String::new());
+    let (tagline, set_tagline) = signal(String::new());
+    let (description, set_description) = signal(String::new());
+    let (privacy, set_privacy) = signal("public".to_string());
+    let (max_users, set_max_users) = signal(100i32);
+    let (is_nsfw, set_is_nsfw) = signal(false);
+    let (allow_guest_access, set_allow_guest_access) = signal(false);
+    let (theme_color, set_theme_color) = signal("#7c3aed".to_string());
+
+    // Owner selection
+    let (owner_mode, set_owner_mode) = signal("existing".to_string());
+    let (owner_id, set_owner_id) = signal(String::new());
+    let (new_username, set_new_username) = signal(String::new());
+    let (new_email, set_new_email) = signal(String::new());
+    let (new_display_name, set_new_display_name) = signal(String::new());
+
+    // UI state
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+    let (pending, set_pending) = signal(false);
+    let (created_slug, _set_created_slug) = signal(Option::<String>::None);
+    let (temp_password, _set_temp_password) = signal(Option::<String>::None);
+    #[cfg(feature = "hydrate")]
+    let (set_created_slug, set_temp_password) = (_set_created_slug, _set_temp_password);
+    let (slug_auto, set_slug_auto) = signal(true);
+
+    let update_name = move |ev: leptos::ev::Event| {
+        let new_name = event_target_value(&ev);
+        set_name.set(new_name.clone());
+        if slug_auto.get() {
+            let new_slug = new_name
+                .to_lowercase()
+                .chars()
+                .map(|c| if c.is_alphanumeric() { c } else { '-' })
+                .collect::<String>()
+                .trim_matches('-')
+                .to_string();
+            set_slug.set(new_slug);
+        }
+    };
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let mut data = serde_json::json!({
+                "name": name.get(),
+                "slug": slug.get(),
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "tagline": if tagline.get().is_empty() { None::<String> } else { Some(tagline.get()) },
+                "privacy": privacy.get(),
+                "is_nsfw": is_nsfw.get(),
+                "max_users": max_users.get(),
+                "allow_guest_access": allow_guest_access.get(),
+                "theme_color": theme_color.get()
+            });
+
+            if owner_mode.get() == "existing" {
+                if owner_id.get().is_empty() {
+                    set_message.set(Some(("Please enter an owner User ID".to_string(), false)));
+                    set_pending.set(false);
+                    return;
+                }
+                data["owner_id"] = serde_json::json!(owner_id.get());
+            } else {
+                if new_username.get().is_empty() || new_email.get().is_empty() || new_display_name.get().is_empty() {
+                    set_message.set(Some(("Please fill in all new owner fields".to_string(), false)));
+                    set_pending.set(false);
+                    return;
+                }
+                data["new_owner"] = serde_json::json!({
+                    "username": new_username.get(),
+                    "email": new_email.get(),
+                    "display_name": new_display_name.get()
+                });
+            }
+
+            spawn_local(async move {
+                let response = Request::post("/api/admin/realms")
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        #[derive(serde::Deserialize)]
+                        struct CreateResponse {
+                            slug: String,
+                            owner_temporary_password: Option<String>,
+                        }
+                        if let Ok(result) = resp.json::<CreateResponse>().await {
+                            set_created_slug.set(Some(result.slug));
+                            set_temp_password.set(result.owner_temporary_password);
+                            set_message.set(Some(("Realm created successfully!".to_string(), true)));
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_message.set(Some((err.error, false)));
+                        } else {
+                            set_message.set(Some(("Failed to create realm".to_string(), false)));
+                        }
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <PageHeader title="Create New Realm" subtitle="Create a new realm space">
+            <a href="/admin/realms" class="btn btn-secondary">"Back to Realms"</a>
+        </PageHeader>
+
+        <Card>
+            <form on:submit=on_submit>
+                <h3 class="section-title">"Realm Details"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">
+                            "Realm Name" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            placeholder="My Awesome Realm"
+                            prop:value=move || name.get()
+                            on:input=update_name
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="slug" class="form-label">
+                            "Slug (URL)" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="slug"
+                            required=true
+                            pattern="[a-z0-9][a-z0-9\\-]*[a-z0-9]|[a-z0-9]"
+                            class="form-input"
+                            placeholder="my-realm"
+                            prop:value=move || slug.get()
+                            on:input=move |ev| {
+                                set_slug_auto.set(false);
+                                set_slug.set(event_target_value(&ev));
+                            }
+                        />
+                        <small class="form-help">"Lowercase letters, numbers, hyphens only"</small>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="tagline" class="form-label">"Tagline"</label>
+                    <input
+                        type="text"
+                        id="tagline"
+                        class="form-input"
+                        placeholder="A short description"
+                        prop:value=move || tagline.get()
+                        on:input=move |ev| set_tagline.set(event_target_value(&ev))
+                    />
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        placeholder="Detailed description of the realm"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="privacy" class="form-label">"Privacy"</label>
+                        <select
+                            id="privacy"
+                            class="form-select"
+                            on:change=move |ev| set_privacy.set(event_target_value(&ev))
+                        >
+                            <option value="public" selected=move || privacy.get() == "public">"Public"</option>
+                            <option value="unlisted" selected=move || privacy.get() == "unlisted">"Unlisted"</option>
+                            <option value="private" selected=move || privacy.get() == "private">"Private"</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="max_users" class="form-label">"Max Users"</label>
+                        <input
+                            type="number"
+                            id="max_users"
+                            min=1
+                            max=10000
+                            class="form-input"
+                            prop:value=move || max_users.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_max_users.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_nsfw.get()
+                                on:change=move |ev| set_is_nsfw.set(event_target_checked(&ev))
+                            />
+                            "NSFW Content"
+                        </label>
+                    </div>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || allow_guest_access.get()
+                                on:change=move |ev| set_allow_guest_access.set(event_target_checked(&ev))
+                            />
+                            "Allow Guest Access"
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="theme_color" class="form-label">"Theme Color"</label>
+                    <input
+                        type="color"
+                        id="theme_color"
+                        class="form-color"
+                        prop:value=move || theme_color.get()
+                        on:input=move |ev| set_theme_color.set(event_target_value(&ev))
+                    />
+                </div>
+
+                <h3 class="section-title">"Realm Owner"</h3>
+
+                <div class="tab-buttons">
+                    <button
+                        type="button"
+                        class=move || if owner_mode.get() == "existing" { "btn btn-primary" } else { "btn btn-secondary" }
+                        on:click=move |_| set_owner_mode.set("existing".to_string())
+                    >
+                        "Existing User"
+                    </button>
+                    <button
+                        type="button"
+                        class=move || if owner_mode.get() == "new" { "btn btn-primary" } else { "btn btn-secondary" }
+                        on:click=move |_| set_owner_mode.set("new".to_string())
+                    >
+                        "Create New User"
+                    </button>
+                </div>
+
+                <Show when=move || owner_mode.get() == "existing">
+                    <div class="form-group">
+                        <label for="owner_id" class="form-label">"Owner User ID"</label>
+                        <input
+                            type="text"
+                            id="owner_id"
+                            class="form-input"
+                            placeholder="UUID of existing user"
+                            prop:value=move || owner_id.get()
+                            on:input=move |ev| set_owner_id.set(event_target_value(&ev))
+                        />
+                    </div>
+                </Show>
+
+                <Show when=move || owner_mode.get() == "new">
+                    <p class="text-muted">"A random temporary password will be generated for the new owner."</p>
+
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="new_username" class="form-label">"Username"</label>
+                            <input
+                                type="text"
+                                id="new_username"
+                                minlength=3
+                                maxlength=32
+                                class="form-input"
+                                placeholder="username"
+                                prop:value=move || new_username.get()
+                                on:input=move |ev| set_new_username.set(event_target_value(&ev))
+                            />
+                        </div>
+                        <div class="form-group">
+                            <label for="new_email" class="form-label">"Email"</label>
+                            <input
+                                type="email"
+                                id="new_email"
+                                class="form-input"
+                                placeholder="user@example.com"
+                                prop:value=move || new_email.get()
+                                on:input=move |ev| set_new_email.set(event_target_value(&ev))
+                            />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="new_display_name" class="form-label">"Display Name"</label>
+                        <input
+                            type="text"
+                            id="new_display_name"
+                            class="form-input"
+                            placeholder="Display Name"
+                            prop:value=move || new_display_name.get()
+                            on:input=move |ev| set_new_display_name.set(event_target_value(&ev))
+                        />
+                    </div>
+                </Show>
+
+                <Show when=move || message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <Show when=move || created_slug.get().is_some()>
+                    <div class="alert alert-info">
+                        <p>
+                            <a href=format!("/admin/realms/{}", created_slug.get().unwrap_or_default())>
+                                "View realm"
+                            </a>
+                        </p>
+                    </div>
+                </Show>
+
+                <Show when=move || temp_password.get().is_some()>
+                    <div class="alert alert-warning">
+                        <p><strong>"New Owner Temporary Password:"</strong></p>
+                        <code class="temp-password">{move || temp_password.get().unwrap_or_default()}</code>
+                        <p class="text-muted">"Copy this password now - it will not be shown again!"</p>
+                    </div>
+                </Show>
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Creating..." } else { "Create Realm" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/realms.rs

@@ -0,0 +1,111 @@
+//! Realms list page component.
+
+use leptos::prelude::*;
+
+use crate::components::{
+    Card, EmptyState, NsfwBadge, PageHeader, Pagination, PrivacyBadge, SearchForm,
+};
+use crate::hooks::{use_fetch, use_pagination};
+use crate::models::RealmSummary;
+use crate::utils::build_paginated_url;
+
+/// Realms page component.
+#[component]
+pub fn RealmsPage() -> impl IntoView {
+    let pagination = use_pagination();
+
+    let realms = use_fetch::<Vec<RealmSummary>>(move || {
+        build_paginated_url(
+            "/api/admin/realms",
+            pagination.page.get(),
+            &pagination.search_query.get(),
+            25,
+        )
+    });
+
+    view! {
+        <PageHeader title="All Realms" subtitle="Manage realm spaces">
+            <a href="/admin/realms/new" class="btn btn-primary">"Create Realm"</a>
+        </PageHeader>
+
+        <Card>
+            <SearchForm
+                action="/admin/realms"
+                placeholder="Search by name or slug..."
+                search_input=pagination.search_input
+            />
+
+            <Suspense fallback=|| view! { <p>"Loading realms..."</p> }>
+                {move || {
+                    realms.get().map(|maybe_realms: Option<Vec<RealmSummary>>| {
+                        match maybe_realms {
+                            Some(realm_list) if !realm_list.is_empty() => {
+                                view! {
+                                    <div class="table-container">
+                                        <table class="data-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>"Name"</th>
+                                                    <th>"Tagline"</th>
+                                                    <th>"Privacy"</th>
+                                                    <th>"NSFW"</th>
+                                                    <th>"Owner"</th>
+                                                    <th>"Members"</th>
+                                                    <th>"Online"</th>
+                                                    <th>"Created"</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {realm_list.into_iter().map(|realm| {
+                                                    view! {
+                                                        <tr>
+                                                            <td>
+                                                                <a href=format!("/admin/realms/{}", realm.slug) class="table-link">
+                                                                    {realm.name}
+                                                                </a>
+                                                            </td>
+                                                            <td>{realm.tagline.unwrap_or_default()}</td>
+                                                            <td><PrivacyBadge privacy=realm.privacy /></td>
+                                                            <td>
+                                                                {if realm.is_nsfw {
+                                                                    view! { <NsfwBadge /> }.into_any()
+                                                                } else {
+                                                                    view! { <span>"-"</span> }.into_any()
+                                                                }}
+                                                            </td>
+                                                            <td>
+                                                                <a href=format!("/admin/users/{}", realm.owner_id) class="table-link">
+                                                                    {realm.owner_username}
+                                                                </a>
+                                                            </td>
+                                                            <td>{realm.member_count}</td>
+                                                            <td>{realm.current_user_count}</td>
+                                                            <td>{realm.created_at}</td>
+                                                        </tr>
+                                                    }
+                                                }).collect_view()}
+                                            </tbody>
+                                        </table>
+                                    </div>
+
+                                    <Pagination
+                                        current_page=pagination.page.get()
+                                        base_url="/admin/realms".to_string()
+                                        query=pagination.search_query.get()
+                                    />
+                                }.into_any()
+                            }
+                            _ => view! {
+                                <EmptyState
+                                    message="No realms found."
+                                    action_href="/admin/realms/new"
+                                    action_text="Create Realm"
+                                />
+                            }.into_any()
+                        }
+                    })
+                }}
+            </Suspense>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/scene_detail.rs

@@ -0,0 +1,783 @@
+//! Scene detail/edit page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+use uuid::Uuid;
+
+use crate::components::{Card, DetailGrid, DetailItem, PageHeader};
+#[cfg(feature = "hydrate")]
+use crate::utils::fetch_image_dimensions_client;
+
+/// Scene detail from API.
+#[derive(Clone, Debug, serde::Deserialize, serde::Serialize)]
+pub struct SceneDetail {
+    pub id: Uuid,
+    pub realm_id: Uuid,
+    pub name: String,
+    pub slug: String,
+    pub description: Option<String>,
+    pub background_image_path: Option<String>,
+    pub background_color: Option<String>,
+    pub bounds_wkt: String,
+    pub dimension_mode: String,
+    pub sort_order: i32,
+    pub is_entry_point: bool,
+    pub is_hidden: bool,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+/// Parse width and height from WKT bounds string.
+/// Example: "POLYGON((0 0, 800 0, 800 600, 0 600, 0 0))" -> (800, 600)
+/// Handles both "0 0, 800 0" (with space) and "0 0,800 0" (without space) formats.
+fn parse_bounds_wkt(wkt: &str) -> (i32, i32) {
+    // Extract coordinates from POLYGON((x1 y1, x2 y2, x3 y3, x4 y4, x5 y5))
+    // The second point has (width, 0) and third point has (width, height)
+    if let Some(start) = wkt.find("((") {
+        if let Some(end) = wkt.find("))") {
+            let coords_str = &wkt[start + 2..end];
+            let points: Vec<&str> = coords_str.split(',').map(|s| s.trim()).collect();
+            if points.len() >= 3 {
+                // Second point: "width 0"
+                let second: Vec<&str> = points[1].split_whitespace().collect();
+                // Third point: "width height"
+                let third: Vec<&str> = points[2].split_whitespace().collect();
+                if !second.is_empty() && third.len() >= 2 {
+                    let width = second[0].parse().unwrap_or(800);
+                    let height = third[1].parse().unwrap_or(600);
+                    return (width, height);
+                }
+            }
+        }
+    }
+    (800, 600)
+}
+
+/// Scene detail page component.
+#[component]
+pub fn SceneDetailPage() -> impl IntoView {
+    let params = use_params_map();
+    let realm_slug = move || params.get().get("slug").unwrap_or_default();
+    let scene_id = move || params.get().get("scene_id").unwrap_or_default();
+    let initial_realm_slug = params.get_untracked().get("slug").unwrap_or_default();
+
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+
+    let scene = LocalResource::new(move || {
+        let id = scene_id();
+        async move {
+            if id.is_empty() {
+                return None;
+            }
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+                let resp = Request::get(&format!("/api/admin/scenes/{}", id)).send().await;
+                match resp {
+                    Ok(r) if r.ok() => r.json::<SceneDetail>().await.ok(),
+                    _ => None,
+                }
+            }
+            #[cfg(not(feature = "hydrate"))]
+            {
+                let _ = id;
+                None::<SceneDetail>
+            }
+        }
+    });
+
+    let slug_for_back = initial_realm_slug.clone();
+
+    view! {
+        <PageHeader title="Scene Details" subtitle="View and edit scene">
+            <a href=format!("/admin/realms/{}/scenes", slug_for_back) class="btn btn-secondary">"Back to Scenes"</a>
+        </PageHeader>
+
+        <Suspense fallback=|| view! { <p>"Loading scene..."</p> }>
+            {move || {
+                let realm_slug_val = realm_slug();
+                scene.get().map(|maybe_scene| {
+                    match maybe_scene {
+                        Some(s) => view! {
+                            <SceneDetailView scene=s realm_slug=realm_slug_val message=message set_message=set_message />
+                        }.into_any(),
+                        None => view! {
+                            <Card>
+                                <p class="text-error">"Scene not found or you don't have permission to view."</p>
+                            </Card>
+                        }.into_any()
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+#[component]
+#[allow(unused_variables)]
+fn SceneDetailView(
+    scene: SceneDetail,
+    realm_slug: String,
+    message: ReadSignal<Option<(String, bool)>>,
+    set_message: WriteSignal<Option<(String, bool)>>,
+) -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let scene_id = scene.id.to_string();
+    #[cfg(feature = "hydrate")]
+    let scene_id_for_delete = scene.id.to_string();
+    #[cfg(feature = "hydrate")]
+    let realm_slug_for_delete = realm_slug.clone();
+    let (pending, set_pending) = signal(false);
+    let (delete_pending, set_delete_pending) = signal(false);
+    let (show_delete_confirm, set_show_delete_confirm) = signal(false);
+    let (show_image_modal, set_show_image_modal) = signal(false);
+
+    // Parse dimensions from bounds_wkt
+    let (initial_width, initial_height) = parse_bounds_wkt(&scene.bounds_wkt);
+
+    // Clone scene data for view (to avoid move issues)
+    let scene_name_display = scene.name.clone();
+    let scene_slug_display = scene.slug.clone();
+    let scene_slug_disabled = scene.slug.clone();
+    let scene_description_display = scene.description.clone();
+    let scene_background_image_path = scene.background_image_path.clone();
+    let scene_background_image_path_for_modal = scene.background_image_path.clone();
+    let scene_background_image_path_for_check = scene.background_image_path.clone();
+    let scene_background_image_path_for_dimensions = scene.background_image_path.clone();
+    let scene_background_color_display = scene.background_color.clone();
+    let scene_created_at = scene.created_at.clone();
+    let scene_updated_at = scene.updated_at.clone();
+
+    // Form state
+    let (name, set_name) = signal(scene.name.clone());
+    let (description, set_description) = signal(scene.description.clone().unwrap_or_default());
+    let (background_color, set_background_color) = signal(
+        scene.background_color.clone().unwrap_or_else(|| "#1a1a2e".to_string()),
+    );
+    let (background_image_url, set_background_image_url) = signal(String::new());
+    let (clear_background_image, set_clear_background_image) = signal(false);
+    let (infer_dimensions, set_infer_dimensions) = signal(false);
+    let (width, set_width) = signal(initial_width);
+    let (height, set_height) = signal(initial_height);
+    let (dimension_mode, set_dimension_mode) = signal(scene.dimension_mode.clone());
+    let (sort_order, set_sort_order) = signal(scene.sort_order);
+    let (is_entry_point, set_is_entry_point) = signal(scene.is_entry_point);
+    let (is_hidden, set_is_hidden) = signal(scene.is_hidden);
+
+    // UI state for dimension fetching
+    let (fetching_dimensions, set_fetching_dimensions) = signal(false);
+    let (dimension_message, set_dimension_message) = signal(Option::<(String, bool)>::None);
+
+    let fetch_dimensions = move |_: leptos::ev::MouseEvent| {
+        let url = background_image_url.get();
+        if url.is_empty() {
+            set_dimension_message.set(Some(("Please enter an image URL first".to_string(), false)));
+            return;
+        }
+
+        set_fetching_dimensions.set(true);
+        set_dimension_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            fetch_image_dimensions_client(
+                url,
+                move |w, h| {
+                    set_width.set(w as i32);
+                    set_height.set(h as i32);
+                    set_dimension_message.set(Some((
+                        format!("Dimensions: {}x{}", w, h),
+                        true,
+                    )));
+                },
+                move |err| {
+                    set_dimension_message.set(Some((err, false)));
+                },
+                set_fetching_dimensions,
+            );
+        }
+    };
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let id = scene_id.clone();
+            // Build bounds WKT from width/height
+            let w = width.get();
+            let h = height.get();
+            let bounds_wkt = format!("POLYGON((0 0, {} 0, {} {}, 0 {}, 0 0))", w, w, h, h);
+
+            let mut data = serde_json::json!({
+                "name": name.get(),
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "background_color": if background_color.get().is_empty() { None::<String> } else { Some(background_color.get()) },
+                "bounds_wkt": bounds_wkt,
+                "dimension_mode": dimension_mode.get(),
+                "sort_order": sort_order.get(),
+                "is_entry_point": is_entry_point.get(),
+                "is_hidden": is_hidden.get()
+            });
+
+            // Only include background_image_url if provided
+            let bg_url = background_image_url.get();
+            if !bg_url.is_empty() {
+                data["background_image_url"] = serde_json::json!(bg_url);
+                // Include infer dimensions flag when uploading new image
+                if infer_dimensions.get() {
+                    data["infer_dimensions_from_image"] = serde_json::json!(true);
+                }
+            }
+
+            // Include clear flag if set
+            if clear_background_image.get() {
+                data["clear_background_image"] = serde_json::json!(true);
+            }
+
+            spawn_local(async move {
+                let response = Request::put(&format!("/api/admin/scenes/{}", id))
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        set_message.set(Some(("Scene updated successfully!".to_string(), true)));
+                        // Clear the background image URL field after success
+                        set_background_image_url.set(String::new());
+                        set_clear_background_image.set(false);
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_message.set(Some((err.error, false)));
+                        } else {
+                            set_message.set(Some(("Failed to update scene".to_string(), false)));
+                        }
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+
+    view! {
+        <Card>
+            <div class="realm-header">
+                <div class="realm-info">
+                    <h2>{scene_name_display}</h2>
+                    <p class="text-muted">"/" {scene_slug_display}</p>
+                </div>
+                <div class="realm-badges">
+                    {if scene.is_entry_point {
+                        view! { <span class="badge badge-success">"Entry Point"</span> }.into_any()
+                    } else {
+                        view! {}.into_any()
+                    }}
+                    {if scene.is_hidden {
+                        view! { <span class="badge badge-warning">"Hidden"</span> }.into_any()
+                    } else {
+                        view! {}.into_any()
+                    }}
+                </div>
+            </div>
+
+            <DetailGrid>
+                <DetailItem label="Scene ID">
+                    <code>{scene.id.to_string()}</code>
+                </DetailItem>
+                <DetailItem label="Realm ID">
+                    <code>{scene.realm_id.to_string()}</code>
+                </DetailItem>
+                <DetailItem label="Dimensions">
+                    {format!("{}x{}", initial_width, initial_height)}
+                </DetailItem>
+                <DetailItem label="Sort Order">
+                    {scene.sort_order.to_string()}
+                </DetailItem>
+                <DetailItem label="Background">
+                    {if let Some(ref path) = scene_background_image_path {
+                        let path_clone = path.clone();
+                        view! {
+                            <div style="display:inline-flex;align-items:center;gap:0.75rem">
+                                <img
+                                    src=path_clone.clone()
+                                    alt="Background thumbnail"
+                                    style="max-width:100px;max-height:75px;border:1px solid #555;border-radius:4px;cursor:pointer"
+                                    title="Click to view full size"
+                                    on:click=move |_| set_show_image_modal.set(true)
+                                />
+                                <span class="text-muted" style="font-size:0.85em">{path_clone}</span>
+                            </div>
+                        }.into_any()
+                    } else if let Some(ref color) = scene_background_color_display {
+                        view! {
+                            <span style=format!("display:inline-flex;align-items:center;gap:0.5rem")>
+                                <span style=format!("display:inline-block;width:20px;height:20px;background:{};border:1px solid #555;border-radius:3px", color)></span>
+                                {color.clone()}
+                            </span>
+                        }.into_any()
+                    } else {
+                        view! { <span class="text-muted">"None"</span> }.into_any()
+                    }}
+                </DetailItem>
+                <DetailItem label="Created">
+                    {scene_created_at}
+                </DetailItem>
+                <DetailItem label="Updated">
+                    {scene_updated_at}
+                </DetailItem>
+            </DetailGrid>
+
+            {if let Some(ref desc) = scene_description_display {
+                view! {
+                    <div class="realm-description">
+                        <h4>"Description"</h4>
+                        <p>{desc.clone()}</p>
+                    </div>
+                }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </Card>
+
+        <Card title="Edit Scene">
+            <form on:submit=on_submit>
+                <h3 class="section-title">"Scene Details"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">"Scene Name"</label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            prop:value=move || name.get()
+                            on:input=move |ev| set_name.set(event_target_value(&ev))
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">"Slug (URL)"</label>
+                        <input
+                            type="text"
+                            value=scene_slug_disabled
+                            class="form-input"
+                            disabled=true
+                        />
+                        <small class="form-help">"Slug cannot be changed"</small>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <h3 class="section-title">"Background"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="background_color" class="form-label">"Background Color"</label>
+                        <input
+                            type="color"
+                            id="background_color"
+                            class="form-color"
+                            prop:value=move || background_color.get()
+                            on:input=move |ev| set_background_color.set(event_target_value(&ev))
+                        />
+                    </div>
+                    <div class="form-group" style="flex: 2">
+                        <label for="background_image_url" class="form-label">"New Background Image URL"</label>
+                        <div style="display: flex; gap: 0.5rem">
+                            <input
+                                type="url"
+                                id="background_image_url"
+                                class="form-input"
+                                style="flex: 1"
+                                placeholder="https://example.com/image.png"
+                                prop:value=move || background_image_url.get()
+                                on:input=move |ev| set_background_image_url.set(event_target_value(&ev))
+                            />
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                disabled=move || fetching_dimensions.get()
+                                on:click=fetch_dimensions
+                            >
+                                {move || if fetching_dimensions.get() { "Fetching..." } else { "Get Size" }}
+                            </button>
+                        </div>
+                        <small class="form-help">"Leave empty to keep current image. Click 'Get Size' to auto-fill dimensions."</small>
+                    </div>
+                </div>
+
+                // Image preview (for new URL)
+                <Show when=move || !background_image_url.get().is_empty()>
+                    <div class="form-group">
+                        <label class="form-label">"New Image Preview"</label>
+                        <div style="max-width: 300px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-tertiary)">
+                            <img
+                                src=move || background_image_url.get()
+                                alt="New background preview"
+                                style="max-width: 100%; height: auto; display: block"
+                            />
+                        </div>
+                    </div>
+                </Show>
+
+                // Dimension fetch message
+                <Show when=move || dimension_message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = dimension_message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert" style="margin-bottom: 1rem">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                // Infer dimensions checkbox (only shown when new URL is provided)
+                <Show when=move || !background_image_url.get().is_empty()>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || infer_dimensions.get()
+                                on:change=move |ev| set_infer_dimensions.set(event_target_checked(&ev))
+                            />
+                            "Infer dimensions from image"
+                        </label>
+                        <small class="form-help">"If enabled, server will extract dimensions from the image when saving"</small>
+                    </div>
+                </Show>
+
+                {if scene_background_image_path_for_check.is_some() {
+                    view! {
+                        <div class="checkbox-group">
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    class="form-checkbox"
+                                    prop:checked=move || clear_background_image.get()
+                                    on:change=move |ev| set_clear_background_image.set(event_target_checked(&ev))
+                                />
+                                "Remove current background image"
+                            </label>
+                        </div>
+                    }.into_any()
+                } else {
+                    view! {}.into_any()
+                }}
+
+                <h3 class="section-title">"Dimensions"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="width" class="form-label">"Width"</label>
+                        <input
+                            type="number"
+                            id="width"
+                            min=100
+                            max=10000
+                            class="form-input"
+                            prop:value=move || width.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_width.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="height" class="form-label">"Height"</label>
+                        <input
+                            type="number"
+                            id="height"
+                            min=100
+                            max=10000
+                            class="form-input"
+                            prop:value=move || height.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_height.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="dimension_mode" class="form-label">"Dimension Mode"</label>
+                        <select
+                            id="dimension_mode"
+                            class="form-select"
+                            on:change=move |ev| set_dimension_mode.set(event_target_value(&ev))
+                        >
+                            <option value="fixed" selected=move || dimension_mode.get() == "fixed">"Fixed"</option>
+                            <option value="viewport" selected=move || dimension_mode.get() == "viewport">"Viewport"</option>
+                        </select>
+                    </div>
+                </div>
+
+                // Button to set dimensions from existing background image
+                {if let Some(ref path) = scene_background_image_path_for_dimensions {
+                    let path_for_closure = path.clone();
+                    view! {
+                        <div class="form-group">
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                disabled=move || fetching_dimensions.get()
+                                on:click=move |_| {
+                                    set_fetching_dimensions.set(true);
+                                    set_dimension_message.set(None);
+
+                                    #[cfg(feature = "hydrate")]
+                                    {
+                                        let path = path_for_closure.clone();
+                                        fetch_image_dimensions_client(
+                                            path,
+                                            move |w, h| {
+                                                set_width.set(w as i32);
+                                                set_height.set(h as i32);
+                                                set_dimension_message.set(Some((
+                                                    format!("Set from image: {}x{}", w, h),
+                                                    true,
+                                                )));
+                                            },
+                                            move |err| {
+                                                set_dimension_message.set(Some((err, false)));
+                                            },
+                                            set_fetching_dimensions,
+                                        );
+                                    }
+                                }
+                            >
+                                {move || if fetching_dimensions.get() { "Fetching..." } else { "Set from background image" }}
+                            </button>
+                            <small class="form-help">"Set dimensions to match the current background image"</small>
+                        </div>
+                    }.into_any()
+                } else {
+                    view! {}.into_any()
+                }}
+
+                <h3 class="section-title">"Options"</h3>
+
+                <div class="form-group">
+                    <label for="sort_order" class="form-label">"Sort Order"</label>
+                    <input
+                        type="number"
+                        id="sort_order"
+                        class="form-input"
+                        prop:value=move || sort_order.get()
+                        on:input=move |ev| {
+                            if let Ok(v) = event_target_value(&ev).parse() {
+                                set_sort_order.set(v);
+                            }
+                        }
+                    />
+                    <small class="form-help">"Lower numbers appear first in scene lists"</small>
+                </div>
+
+                <div class="form-row">
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_entry_point.get()
+                                on:change=move |ev| set_is_entry_point.set(event_target_checked(&ev))
+                            />
+                            "Entry Point"
+                        </label>
+                        <small class="form-help">"Users spawn here when entering the realm"</small>
+                    </div>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_hidden.get()
+                                on:change=move |ev| set_is_hidden.set(event_target_checked(&ev))
+                            />
+                            "Hidden"
+                        </label>
+                        <small class="form-help">"Scene won't appear in public listings"</small>
+                    </div>
+                </div>
+
+                <Show when=move || message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Saving..." } else { "Save Changes" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+
+        <Card title="Danger Zone">
+            <p class="text-muted">"Deleting a scene is permanent and cannot be undone. All spots within this scene will also be deleted."</p>
+
+            <Show
+                when=move || !show_delete_confirm.get()
+                fallback={
+                    #[cfg(feature = "hydrate")]
+                    let id = scene_id_for_delete.clone();
+                    #[cfg(feature = "hydrate")]
+                    let slug = realm_slug_for_delete.clone();
+                    move || {
+                        #[cfg(feature = "hydrate")]
+                        let id = id.clone();
+                        #[cfg(feature = "hydrate")]
+                        let slug = slug.clone();
+                        view! {
+                            <div class="alert alert-warning">
+                                <p>"Are you sure you want to delete this scene? This action cannot be undone."</p>
+                                <div class="action-buttons">
+                                    <button
+                                        type="button"
+                                        class="btn btn-danger"
+                                        disabled=move || delete_pending.get()
+                                        on:click={
+                                            #[cfg(feature = "hydrate")]
+                                            let id = id.clone();
+                                            #[cfg(feature = "hydrate")]
+                                            let slug = slug.clone();
+                                            move |_| {
+                                                set_delete_pending.set(true);
+                                                set_message.set(None);
+
+                                                #[cfg(feature = "hydrate")]
+                                                {
+                                                    use gloo_net::http::Request;
+
+                                                    let id = id.clone();
+                                                    let slug = slug.clone();
+
+                                                    spawn_local(async move {
+                                                        let response = Request::delete(&format!("/api/admin/scenes/{}", id))
+                                                            .send()
+                                                            .await;
+
+                                                        set_delete_pending.set(false);
+                                                        set_show_delete_confirm.set(false);
+
+                                                        match response {
+                                                            Ok(resp) if resp.ok() => {
+                                                                if let Some(window) = web_sys::window() {
+                                                                    let _ = window.location().set_href(&format!("/admin/realms/{}/scenes", slug));
+                                                                }
+                                                            }
+                                                            Ok(_) => {
+                                                                set_message.set(Some(("Failed to delete scene".to_string(), false)));
+                                                            }
+                                                            Err(_) => {
+                                                                set_message.set(Some(("Network error".to_string(), false)));
+                                                            }
+                                                        }
+                                                    });
+                                                }
+                                            }
+                                        }
+                                    >
+                                        {move || if delete_pending.get() { "Deleting..." } else { "Yes, Delete Scene" }}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="btn btn-secondary"
+                                        on:click=move |_| set_show_delete_confirm.set(false)
+                                    >
+                                        "Cancel"
+                                    </button>
+                                </div>
+                            </div>
+                        }
+                    }
+                }
+            >
+                <button
+                    type="button"
+                    class="btn btn-danger"
+                    on:click=move |_| set_show_delete_confirm.set(true)
+                >
+                    "Delete Scene"
+                </button>
+            </Show>
+        </Card>
+
+        // Image preview modal
+        <Show when=move || show_image_modal.get()>
+            {
+                let path = scene_background_image_path_for_modal.clone();
+                view! {
+                    <div class="modal-overlay">
+                        <div
+                            class="modal-backdrop"
+                            on:click=move |_| set_show_image_modal.set(false)
+                        ></div>
+                        <div class="modal-content" style="max-width:90vw;max-height:90vh;padding:0;background:transparent">
+                            <button
+                                type="button"
+                                class="modal-close"
+                                style="position:absolute;top:-30px;right:0;background:#333;color:#fff;border:none;padding:0.5rem;border-radius:4px;cursor:pointer"
+                                on:click=move |_| set_show_image_modal.set(false)
+                            >
+                                "x"
+                            </button>
+                            {if let Some(ref img_path) = path {
+                                view! {
+                                    <img
+                                        src=img_path.clone()
+                                        alt="Background image"
+                                        style="max-width:90vw;max-height:85vh;object-fit:contain;border-radius:4px"
+                                    />
+                                }.into_any()
+                            } else {
+                                view! { <span>"No image"</span> }.into_any()
+                            }}
+                        </div>
+                    </div>
+                }
+            }
+        </Show>
+    }
+}

crates/chattyness-admin-ui/src/pages/scene_new.rs

@@ -0,0 +1,429 @@
+//! Create new scene page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, PageHeader};
+#[cfg(feature = "hydrate")]
+use crate::utils::fetch_image_dimensions_client;
+
+/// Scene new page component.
+#[component]
+pub fn SceneNewPage() -> impl IntoView {
+    let params = use_params_map();
+    let realm_slug = move || params.get().get("slug").unwrap_or_default();
+
+    // Form state
+    let (name, set_name) = signal(String::new());
+    let (slug, set_slug) = signal(String::new());
+    let (description, set_description) = signal(String::new());
+    let (background_color, set_background_color) = signal("#1a1a2e".to_string());
+    let (background_image_url, set_background_image_url) = signal(String::new());
+    let (infer_dimensions, set_infer_dimensions) = signal(false);
+    let (width, set_width) = signal(800i32);
+    let (height, set_height) = signal(600i32);
+    let (dimension_mode, set_dimension_mode) = signal("fixed".to_string());
+    let (sort_order, set_sort_order) = signal(0i32);
+    let (is_entry_point, set_is_entry_point) = signal(false);
+    let (is_hidden, set_is_hidden) = signal(false);
+
+    // UI state
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+    let (pending, set_pending) = signal(false);
+    let (created_id, _set_created_id) = signal(Option::<String>::None);
+    #[cfg(feature = "hydrate")]
+    let set_created_id = _set_created_id;
+    let (slug_auto, set_slug_auto) = signal(true);
+    let (fetching_dimensions, set_fetching_dimensions) = signal(false);
+    let (dimension_message, set_dimension_message) = signal(Option::<(String, bool)>::None);
+
+    let update_name = move |ev: leptos::ev::Event| {
+        let new_name = event_target_value(&ev);
+        set_name.set(new_name.clone());
+        if slug_auto.get() {
+            let new_slug = new_name
+                .to_lowercase()
+                .chars()
+                .map(|c| if c.is_alphanumeric() { c } else { '-' })
+                .collect::<String>()
+                .trim_matches('-')
+                .to_string();
+            set_slug.set(new_slug);
+        }
+    };
+
+    let fetch_dimensions = move |_: leptos::ev::MouseEvent| {
+        let url = background_image_url.get();
+        if url.is_empty() {
+            set_dimension_message.set(Some(("Please enter an image URL first".to_string(), false)));
+            return;
+        }
+
+        set_fetching_dimensions.set(true);
+        set_dimension_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            fetch_image_dimensions_client(
+                url,
+                move |w, h| {
+                    set_width.set(w as i32);
+                    set_height.set(h as i32);
+                    set_dimension_message.set(Some((
+                        format!("Dimensions: {}x{}", w, h),
+                        true,
+                    )));
+                },
+                move |err| {
+                    set_dimension_message.set(Some((err, false)));
+                },
+                set_fetching_dimensions,
+            );
+        }
+    };
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        let realm_slug_val = realm_slug();
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            // Build bounds WKT from width/height
+            let w = width.get();
+            let h = height.get();
+            let bounds_wkt = format!("POLYGON((0 0, {} 0, {} {}, 0 {}, 0 0))", w, w, h, h);
+
+            let data = serde_json::json!({
+                "name": name.get(),
+                "slug": slug.get(),
+                "description": if description.get().is_empty() { None::<String> } else { Some(description.get()) },
+                "background_color": if background_color.get().is_empty() { None::<String> } else { Some(background_color.get()) },
+                "background_image_url": if background_image_url.get().is_empty() { None::<String> } else { Some(background_image_url.get()) },
+                "infer_dimensions_from_image": infer_dimensions.get(),
+                "bounds_wkt": bounds_wkt,
+                "dimension_mode": dimension_mode.get(),
+                "sort_order": sort_order.get(),
+                "is_entry_point": is_entry_point.get(),
+                "is_hidden": is_hidden.get()
+            });
+
+            spawn_local(async move {
+                let url = format!("/api/admin/realms/{}/scenes", realm_slug_val);
+                let response = Request::post(&url)
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        #[derive(serde::Deserialize)]
+                        #[allow(dead_code)]
+                        struct CreateResponse {
+                            id: String,
+                            slug: String,
+                        }
+                        if let Ok(result) = resp.json::<CreateResponse>().await {
+                            set_created_id.set(Some(result.id));
+                            set_message.set(Some(("Scene created successfully!".to_string(), true)));
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_message.set(Some((err.error, false)));
+                        } else {
+                            set_message.set(Some(("Failed to create scene".to_string(), false)));
+                        }
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    let slug_for_header = realm_slug();
+
+    view! {
+        <PageHeader title="Create New Scene" subtitle="Create a new scene in this realm">
+            <a href=format!("/admin/realms/{}/scenes", slug_for_header) class="btn btn-secondary">"Back to Scenes"</a>
+        </PageHeader>
+
+        <Card>
+            <form on:submit=on_submit>
+                <h3 class="section-title">"Scene Details"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name" class="form-label">
+                            "Scene Name" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="name"
+                            required=true
+                            class="form-input"
+                            placeholder="Main Lobby"
+                            prop:value=move || name.get()
+                            on:input=update_name
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="slug" class="form-label">
+                            "Slug (URL)" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="slug"
+                            required=true
+                            pattern="[a-z0-9][a-z0-9\\-]*[a-z0-9]|[a-z0-9]"
+                            class="form-input"
+                            placeholder="main-lobby"
+                            prop:value=move || slug.get()
+                            on:input=move |ev| {
+                                set_slug_auto.set(false);
+                                set_slug.set(event_target_value(&ev));
+                            }
+                        />
+                        <small class="form-help">"Lowercase letters, numbers, hyphens only"</small>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="description" class="form-label">"Description"</label>
+                    <textarea
+                        id="description"
+                        class="form-textarea"
+                        placeholder="Description of this scene"
+                        prop:value=move || description.get()
+                        on:input=move |ev| set_description.set(event_target_value(&ev))
+                    ></textarea>
+                </div>
+
+                <h3 class="section-title">"Background"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="background_color" class="form-label">"Background Color"</label>
+                        <input
+                            type="color"
+                            id="background_color"
+                            class="form-color"
+                            prop:value=move || background_color.get()
+                            on:input=move |ev| set_background_color.set(event_target_value(&ev))
+                        />
+                    </div>
+                    <div class="form-group" style="flex: 2">
+                        <label for="background_image_url" class="form-label">"Background Image URL"</label>
+                        <div style="display: flex; gap: 0.5rem">
+                            <input
+                                type="url"
+                                id="background_image_url"
+                                class="form-input"
+                                style="flex: 1"
+                                placeholder="https://example.com/image.png"
+                                prop:value=move || background_image_url.get()
+                                on:input=move |ev| set_background_image_url.set(event_target_value(&ev))
+                            />
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                disabled=move || fetching_dimensions.get()
+                                on:click=fetch_dimensions
+                            >
+                                {move || if fetching_dimensions.get() { "Fetching..." } else { "Get Size" }}
+                            </button>
+                        </div>
+                        <small class="form-help">"Enter a public image URL and click 'Get Size' to auto-fill dimensions"</small>
+                    </div>
+                </div>
+
+                // Image preview
+                <Show when=move || !background_image_url.get().is_empty()>
+                    <div class="form-group">
+                        <label class="form-label">"Image Preview"</label>
+                        <div style="max-width: 300px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-tertiary)">
+                            <img
+                                src=move || background_image_url.get()
+                                alt="Background preview"
+                                style="max-width: 100%; height: auto; display: block"
+                            />
+                        </div>
+                    </div>
+                </Show>
+
+                // Dimension fetch message
+                <Show when=move || dimension_message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = dimension_message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert" style="margin-bottom: 1rem">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <div class="checkbox-group">
+                    <label class="checkbox-label">
+                        <input
+                            type="checkbox"
+                            class="form-checkbox"
+                            prop:checked=move || infer_dimensions.get()
+                            on:change=move |ev| set_infer_dimensions.set(event_target_checked(&ev))
+                        />
+                        "Infer dimensions from image"
+                    </label>
+                    <small class="form-help">"If enabled, server will extract dimensions from the image when creating the scene"</small>
+                </div>
+
+                <h3 class="section-title">"Dimensions"</h3>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="width" class="form-label">"Width"</label>
+                        <input
+                            type="number"
+                            id="width"
+                            min=100
+                            max=10000
+                            class="form-input"
+                            prop:value=move || width.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_width.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="height" class="form-label">"Height"</label>
+                        <input
+                            type="number"
+                            id="height"
+                            min=100
+                            max=10000
+                            class="form-input"
+                            prop:value=move || height.get()
+                            on:input=move |ev| {
+                                if let Ok(v) = event_target_value(&ev).parse() {
+                                    set_height.set(v);
+                                }
+                            }
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="dimension_mode" class="form-label">"Dimension Mode"</label>
+                        <select
+                            id="dimension_mode"
+                            class="form-select"
+                            on:change=move |ev| set_dimension_mode.set(event_target_value(&ev))
+                        >
+                            <option value="fixed" selected=move || dimension_mode.get() == "fixed">"Fixed"</option>
+                            <option value="viewport" selected=move || dimension_mode.get() == "viewport">"Viewport"</option>
+                        </select>
+                    </div>
+                </div>
+
+                <h3 class="section-title">"Options"</h3>
+
+                <div class="form-group">
+                    <label for="sort_order" class="form-label">"Sort Order"</label>
+                    <input
+                        type="number"
+                        id="sort_order"
+                        class="form-input"
+                        prop:value=move || sort_order.get()
+                        on:input=move |ev| {
+                            if let Ok(v) = event_target_value(&ev).parse() {
+                                set_sort_order.set(v);
+                            }
+                        }
+                    />
+                    <small class="form-help">"Lower numbers appear first in scene lists"</small>
+                </div>
+
+                <div class="form-row">
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_entry_point.get()
+                                on:change=move |ev| set_is_entry_point.set(event_target_checked(&ev))
+                            />
+                            "Entry Point"
+                        </label>
+                        <small class="form-help">"Users spawn here when entering the realm"</small>
+                    </div>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input
+                                type="checkbox"
+                                class="form-checkbox"
+                                prop:checked=move || is_hidden.get()
+                                on:change=move |ev| set_is_hidden.set(event_target_checked(&ev))
+                            />
+                            "Hidden"
+                        </label>
+                        <small class="form-help">"Scene won't appear in public listings"</small>
+                    </div>
+                </div>
+
+                <Show when=move || message.get().is_some()>
+                    {move || {
+                        let (msg, is_success) = message.get().unwrap_or_default();
+                        let class = if is_success { "alert alert-success" } else { "alert alert-error" };
+                        view! {
+                            <div class=class role="alert">
+                                <p>{msg}</p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <Show when=move || created_id.get().is_some()>
+                    {move || {
+                        let id = created_id.get().unwrap_or_default();
+                        let slug = realm_slug();
+                        view! {
+                            <div class="alert alert-info">
+                                <p>
+                                    <a href=format!("/admin/realms/{}/scenes/{}", slug, id)>
+                                        "View scene"
+                                    </a>
+                                </p>
+                            </div>
+                        }
+                    }}
+                </Show>
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Creating..." } else { "Create Scene" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/scenes.rs

@@ -0,0 +1,116 @@
+//! Scenes list page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+
+use crate::components::{Card, EmptyState, PageHeader};
+use crate::hooks::use_fetch_if;
+use crate::models::SceneSummary;
+
+/// Scenes list page component.
+#[component]
+pub fn ScenesPage() -> impl IntoView {
+    let params = use_params_map();
+    let realm_slug = move || params.get().get("slug").unwrap_or_default();
+    let initial_slug = params.get_untracked().get("slug").unwrap_or_default();
+
+    let scenes = use_fetch_if::<Vec<SceneSummary>>(
+        move || !realm_slug().is_empty(),
+        move || format!("/api/admin/realms/{}/scenes", realm_slug()),
+    );
+
+    let slug_for_create = initial_slug.clone();
+    let slug_for_back = initial_slug.clone();
+
+    view! {
+        <PageHeader title="Scenes" subtitle="Manage scenes for realm">
+            <a href=format!("/admin/realms/{}/scenes/new", slug_for_create) class="btn btn-primary">"Create Scene"</a>
+        </PageHeader>
+
+        <div class="mb-4">
+            <a href=format!("/admin/realms/{}", slug_for_back) class="btn btn-secondary">"Back to Realm"</a>
+        </div>
+
+        <Card>
+            <Suspense fallback=|| view! { <p>"Loading scenes..."</p> }>
+                {move || {
+                    let slug = realm_slug();
+                    scenes.get().map(|maybe_scenes: Option<Vec<SceneSummary>>| {
+                        match maybe_scenes {
+                            Some(scene_list) if !scene_list.is_empty() => {
+                                view! {
+                                    <div class="table-container">
+                                        <table class="data-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>"Name"</th>
+                                                    <th>"Slug"</th>
+                                                    <th>"Order"</th>
+                                                    <th>"Entry Point"</th>
+                                                    <th>"Hidden"</th>
+                                                    <th>"Background"</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {scene_list.into_iter().map(|scene| {
+                                                    let scene_id = scene.id.to_string();
+                                                    let slug_clone = slug.clone();
+                                                    view! {
+                                                        <tr>
+                                                            <td>
+                                                                <a href=format!("/admin/realms/{}/scenes/{}", slug_clone, scene_id) class="table-link">
+                                                                    {scene.name}
+                                                                </a>
+                                                            </td>
+                                                            <td>{scene.slug}</td>
+                                                            <td>{scene.sort_order}</td>
+                                                            <td>
+                                                                {if scene.is_entry_point {
+                                                                    view! { <span class="badge badge-success">"Yes"</span> }.into_any()
+                                                                } else {
+                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
+                                                                }}
+                                                            </td>
+                                                            <td>
+                                                                {if scene.is_hidden {
+                                                                    view! { <span class="badge badge-warning">"Hidden"</span> }.into_any()
+                                                                } else {
+                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
+                                                                }}
+                                                            </td>
+                                                            <td>
+                                                                {if let Some(color) = scene.background_color {
+                                                                    view! {
+                                                                        <span style=format!("display:inline-block;width:20px;height:20px;background:{};border:1px solid #555;border-radius:3px", color)></span>
+                                                                    }.into_any()
+                                                                } else if scene.background_image_path.is_some() {
+                                                                    view! { <span class="text-muted">"Image"</span> }.into_any()
+                                                                } else {
+                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
+                                                                }}
+                                                            </td>
+                                                        </tr>
+                                                    }
+                                                }).collect_view()}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                }.into_any()
+                            }
+                            _ => {
+                                let slug_for_empty = slug.clone();
+                                view! {
+                                    <EmptyState
+                                        message="No scenes found for this realm."
+                                        action_href=format!("/admin/realms/{}/scenes/new", slug_for_empty).leak()
+                                        action_text="Create Scene"
+                                    />
+                                }.into_any()
+                            }
+                        }
+                    })
+                }}
+            </Suspense>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/staff.rs

@@ -0,0 +1,263 @@
+//! Staff management page component.
+
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, EmptyState, MessageAlertRw, PageHeader, RoleBadge};
+use crate::hooks::use_fetch;
+use crate::models::StaffMemberSummary;
+#[cfg(feature = "hydrate")]
+use crate::utils::reload_page;
+
+/// Staff page component.
+#[component]
+pub fn StaffPage() -> impl IntoView {
+    let message = RwSignal::new(Option::<(String, bool)>::None);
+
+    let staff = use_fetch::<Vec<StaffMemberSummary>>(|| "/api/admin/staff".to_string());
+
+    view! {
+        <PageHeader title="Server Staff" subtitle="Manage server administrators">
+            <AddStaffButton message=message />
+        </PageHeader>
+
+        <MessageAlertRw message=message />
+
+        <Card>
+            <Suspense fallback=|| view! { <p>"Loading staff..."</p> }>
+                {move || {
+                    staff.get().map(|maybe_staff| {
+                        match maybe_staff {
+                            Some(staff_list) if !staff_list.is_empty() => {
+                                view! {
+                                    <div class="table-container">
+                                        <table class="data-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>"Username"</th>
+                                                    <th>"Display Name"</th>
+                                                    <th>"Email"</th>
+                                                    <th>"Role"</th>
+                                                    <th>"Appointed"</th>
+                                                    <th>"Actions"</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {staff_list.into_iter().map(|member| {
+                                                    let user_id = member.user_id.clone();
+                                                    view! {
+                                                        <tr>
+                                                            <td>
+                                                                <a href=format!("/admin/users/{}", member.user_id) class="table-link">
+                                                                    {member.username}
+                                                                </a>
+                                                            </td>
+                                                            <td>{member.display_name}</td>
+                                                            <td>{member.email.unwrap_or_else(|| "-".to_string())}</td>
+                                                            <td><RoleBadge role=member.role /></td>
+                                                            <td>{member.appointed_at}</td>
+                                                            <td>
+                                                                <RemoveStaffButton
+                                                                    user_id=user_id
+                                                                    message=message
+                                                                />
+                                                            </td>
+                                                        </tr>
+                                                    }
+                                                }).collect_view()}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                }.into_any()
+                            }
+                            _ => view! {
+                                <EmptyState message="No staff members found." />
+                            }.into_any()
+                        }
+                    })
+                }}
+            </Suspense>
+        </Card>
+    }
+}
+
+#[component]
+#[allow(unused_variables)]
+fn AddStaffButton(message: RwSignal<Option<(String, bool)>>) -> impl IntoView {
+    let (show_modal, set_show_modal) = signal(false);
+    let (user_id, set_user_id) = signal(String::new());
+    let (role, set_role) = signal("moderator".to_string());
+    let (pending, set_pending) = signal(false);
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let data = serde_json::json!({
+                "user_id": user_id.get(),
+                "role": role.get()
+            });
+
+            spawn_local(async move {
+                let response = Request::post("/api/admin/staff")
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        message.set(Some(("Staff member added!".to_string(), true)));
+                        set_show_modal.set(false);
+                        set_user_id.set(String::new());
+                        reload_page();
+                    }
+                    Ok(_) => {
+                        message.set(Some(("Failed to add staff member".to_string(), false)));
+                    }
+                    Err(_) => {
+                        message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <button
+            type="button"
+            class="btn btn-primary"
+            on:click=move |_| set_show_modal.set(true)
+        >
+            "Add Staff Member"
+        </button>
+
+        <Show when=move || show_modal.get()>
+            <div class="modal-overlay">
+                <div class="modal-backdrop" on:click=move |_| set_show_modal.set(false)></div>
+                <div class="modal-content">
+                    <button
+                        type="button"
+                        class="modal-close"
+                        on:click=move |_| set_show_modal.set(false)
+                    >
+                        "x"
+                    </button>
+
+                    <h3 class="modal-title">"Add Staff Member"</h3>
+
+                    <form on:submit=on_submit>
+                        <div class="form-group">
+                            <label for="staff_user_id" class="form-label">"User ID"</label>
+                            <input
+                                type="text"
+                                id="staff_user_id"
+                                required=true
+                                class="form-input"
+                                placeholder="UUID of user to make staff"
+                                prop:value=move || user_id.get()
+                                on:input=move |ev| set_user_id.set(event_target_value(&ev))
+                            />
+                        </div>
+
+                        <div class="form-group">
+                            <label for="staff_role" class="form-label">"Role"</label>
+                            <select
+                                id="staff_role"
+                                class="form-select"
+                                on:change=move |ev| set_role.set(event_target_value(&ev))
+                            >
+                                <option value="moderator" selected=move || role.get() == "moderator">"Moderator"</option>
+                                <option value="admin" selected=move || role.get() == "admin">"Admin"</option>
+                                <option value="owner" selected=move || role.get() == "owner">"Owner"</option>
+                            </select>
+                        </div>
+
+                        <div class="modal-actions">
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                on:click=move |_| set_show_modal.set(false)
+                            >
+                                "Cancel"
+                            </button>
+                            <button
+                                type="submit"
+                                class="btn btn-primary"
+                                disabled=move || pending.get()
+                            >
+                                {move || if pending.get() { "Adding..." } else { "Add Staff" }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Show>
+    }
+}
+
+#[component]
+#[allow(unused_variables)]
+fn RemoveStaffButton(
+    user_id: String,
+    message: RwSignal<Option<(String, bool)>>,
+) -> impl IntoView {
+    let (pending, set_pending) = signal(false);
+    #[cfg(feature = "hydrate")]
+    let user_id_for_click = user_id.clone();
+
+    let on_click = move |_| {
+        #[cfg(feature = "hydrate")]
+        {
+            use crate::utils::confirm;
+
+            if !confirm("Remove this staff member?") {
+                return;
+            }
+        }
+
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let user_id = user_id_for_click.clone();
+            spawn_local(async move {
+                let response = Request::delete(&format!("/api/admin/staff/{}", user_id))
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        message.set(Some(("Staff member removed!".to_string(), true)));
+                        reload_page();
+                    }
+                    _ => {
+                        message.set(Some(("Failed to remove staff member".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <button
+            type="button"
+            class="btn btn-danger btn-sm"
+            disabled=move || pending.get()
+            on:click=on_click
+        >
+            {move || if pending.get() { "..." } else { "Remove" }}
+        </button>
+    }
+}

crates/chattyness-admin-ui/src/pages/user_detail.rs

@@ -0,0 +1,228 @@
+//! User detail page component.
+
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, DetailGrid, DetailItem, MessageAlert, PageHeader, StatusBadge, TempPasswordDisplay};
+use crate::hooks::use_fetch_if;
+use crate::models::UserDetail;
+#[cfg(feature = "hydrate")]
+use crate::utils::reload_page;
+
+/// User detail page component.
+#[component]
+pub fn UserDetailPage() -> impl IntoView {
+    let params = use_params_map();
+    let user_id = move || params.get().get("user_id").unwrap_or_default();
+    let initial_user_id = params.get_untracked().get("user_id").unwrap_or_default();
+
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+
+    let user = use_fetch_if::<UserDetail>(
+        move || !user_id().is_empty(),
+        move || format!("/api/admin/users/{}", user_id()),
+    );
+
+    view! {
+        <PageHeader title="User Details" subtitle=initial_user_id>
+            <a href="/admin/users" class="btn btn-secondary">"Back to Users"</a>
+        </PageHeader>
+
+        <Suspense fallback=|| view! { <p>"Loading user..."</p> }>
+            {move || {
+                user.get().map(|maybe_user| {
+                    match maybe_user {
+                        Some(u) => view! {
+                            <UserDetailView user=u message=message set_message=set_message />
+                        }.into_any(),
+                        None => view! {
+                            <Card>
+                                <p class="text-error">"User not found or you don't have permission to view."</p>
+                            </Card>
+                        }.into_any()
+                    }
+                })
+            }}
+        </Suspense>
+    }
+}
+
+#[component]
+fn UserDetailView(
+    user: UserDetail,
+    message: ReadSignal<Option<(String, bool)>>,
+    set_message: WriteSignal<Option<(String, bool)>>,
+) -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let user_id = user.id.clone();
+    #[cfg(feature = "hydrate")]
+    let user_id_for_status = user_id.clone();
+    #[cfg(feature = "hydrate")]
+    let user_id_for_reset = user_id.clone();
+    let user_status = user.status.clone();
+    let user_status_for_badge = user_status.clone();
+
+    let (pending_status, set_pending_status) = signal(false);
+    let (pending_reset, set_pending_reset) = signal(false);
+    let (new_password, set_new_password) = signal(Option::<String>::None);
+
+    let update_status = {
+        #[allow(unused_variables)]
+        move |new_status: &'static str| {
+            set_pending_status.set(true);
+            set_message.set(None);
+
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+
+                let user_id = user_id_for_status.clone();
+                let status = new_status.to_string();
+                spawn_local(async move {
+                    let response = Request::put(&format!("/api/admin/users/{}/status", user_id))
+                        .json(&serde_json::json!({ "status": status }))
+                        .unwrap()
+                        .send()
+                        .await;
+
+                    set_pending_status.set(false);
+
+                    match response {
+                        Ok(resp) if resp.ok() => {
+                            set_message.set(Some(("Status updated!".to_string(), true)));
+                            reload_page();
+                        }
+                        _ => {
+                            set_message.set(Some(("Failed to update status".to_string(), false)));
+                        }
+                    }
+                });
+            }
+        }
+    };
+
+    let reset_password = move |_| {
+        set_pending_reset.set(true);
+        set_message.set(None);
+        set_new_password.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let user_id = user_id_for_reset.clone();
+            spawn_local(async move {
+                let response = Request::post(&format!("/api/admin/users/{}/reset-password", user_id))
+                    .send()
+                    .await;
+
+                set_pending_reset.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        #[derive(serde::Deserialize)]
+                        struct ResetResponse {
+                            temporary_password: String,
+                        }
+                        if let Ok(result) = resp.json::<ResetResponse>().await {
+                            set_new_password.set(Some(result.temporary_password));
+                            set_message.set(Some(("Password reset successfully!".to_string(), true)));
+                        }
+                    }
+                    _ => {
+                        set_message.set(Some(("Failed to reset password".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <Card>
+            <div class="user-header">
+                <div class="user-info">
+                    <h2>{user.display_name.clone()}</h2>
+                    <p class="text-muted">"@" {user.username.clone()}</p>
+                </div>
+                <StatusBadge status=user_status_for_badge />
+            </div>
+
+            <DetailGrid>
+                <DetailItem label="User ID">
+                    <code>{user.id.clone()}</code>
+                </DetailItem>
+                <DetailItem label="Email">
+                    {user.email.clone().unwrap_or_else(|| "Not set".to_string())}
+                </DetailItem>
+                <DetailItem label="Server Role">
+                    {user.server_role.clone().unwrap_or_else(|| "None".to_string())}
+                </DetailItem>
+                <DetailItem label="Created">
+                    {user.created_at.clone()}
+                </DetailItem>
+                <DetailItem label="Updated">
+                    {user.updated_at.clone()}
+                </DetailItem>
+            </DetailGrid>
+        </Card>
+
+        <Card title="Account Actions">
+            <MessageAlert message=message />
+            <TempPasswordDisplay password=new_password label="New Temporary Password:" />
+
+            <div class="action-buttons">
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    disabled=move || pending_reset.get()
+                    on:click=reset_password
+                >
+                    {move || if pending_reset.get() { "Resetting..." } else { "Reset Password" }}
+                </button>
+
+                {if user_status != "suspended" {
+                    let update_status = update_status.clone();
+                    view! {
+                        <button
+                            type="button"
+                            class="btn btn-warning"
+                            disabled=move || pending_status.get()
+                            on:click=move |_| update_status("suspended")
+                        >
+                            "Suspend User"
+                        </button>
+                    }.into_any()
+                } else {
+                    let update_status = update_status.clone();
+                    view! {
+                        <button
+                            type="button"
+                            class="btn btn-primary"
+                            disabled=move || pending_status.get()
+                            on:click=move |_| update_status("active")
+                        >
+                            "Activate User"
+                        </button>
+                    }.into_any()
+                }}
+
+                {if user_status != "banned" {
+                    view! {
+                        <button
+                            type="button"
+                            class="btn btn-danger"
+                            disabled=move || pending_status.get()
+                            on:click=move |_| update_status("banned")
+                        >
+                            "Ban User"
+                        </button>
+                    }.into_any()
+                } else {
+                    view! {}.into_any()
+                }}
+            </div>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/user_new.rs

@@ -0,0 +1,149 @@
+//! Create new user page component.
+
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+
+use crate::components::{Card, MessageAlert, PageHeader, TempPasswordDisplay};
+
+/// User new page component.
+#[component]
+pub fn UserNewPage() -> impl IntoView {
+    let (username, set_username) = signal(String::new());
+    let (email, set_email) = signal(String::new());
+    let (display_name, set_display_name) = signal(String::new());
+    let (message, set_message) = signal(Option::<(String, bool)>::None);
+    let (pending, set_pending) = signal(false);
+    let (temp_password, _set_temp_password) = signal(Option::<String>::None);
+    #[cfg(feature = "hydrate")]
+    let set_temp_password = _set_temp_password;
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        set_pending.set(true);
+        set_message.set(None);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+
+            let data = serde_json::json!({
+                "username": username.get(),
+                "email": if email.get().is_empty() { None::<String> } else { Some(email.get()) },
+                "display_name": display_name.get()
+            });
+
+            spawn_local(async move {
+                let response = Request::post("/api/admin/users")
+                    .json(&data)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        #[derive(serde::Deserialize)]
+                        struct CreateResponse {
+                            temporary_password: String,
+                        }
+                        if let Ok(result) = resp.json::<CreateResponse>().await {
+                            set_temp_password.set(Some(result.temporary_password));
+                            set_message.set(Some(("User created successfully!".to_string(), true)));
+                            set_username.set(String::new());
+                            set_email.set(String::new());
+                            set_display_name.set(String::new());
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_message.set(Some((err.error, false)));
+                        } else {
+                            set_message.set(Some(("Failed to create user".to_string(), false)));
+                        }
+                    }
+                    Err(_) => {
+                        set_message.set(Some(("Network error".to_string(), false)));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <PageHeader title="Create New User" subtitle="Add a new user account">
+            <a href="/admin/users" class="btn btn-secondary">"Back to Users"</a>
+        </PageHeader>
+
+        <Card>
+            <form on:submit=on_submit>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="username" class="form-label">
+                            "Username" <span class="required">"*"</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="username"
+                            required=true
+                            minlength=3
+                            maxlength=32
+                            pattern="[a-zA-Z][a-zA-Z0-9_]*"
+                            class="form-input"
+                            placeholder="username"
+                            prop:value=move || username.get()
+                            on:input=move |ev| set_username.set(event_target_value(&ev))
+                        />
+                        <small class="form-help">"Letters, numbers, and underscores only"</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="email" class="form-label">"Email"</label>
+                        <input
+                            type="email"
+                            id="email"
+                            class="form-input"
+                            placeholder="user@example.com"
+                            prop:value=move || email.get()
+                            on:input=move |ev| set_email.set(event_target_value(&ev))
+                        />
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="display_name" class="form-label">
+                        "Display Name" <span class="required">"*"</span>
+                    </label>
+                    <input
+                        type="text"
+                        id="display_name"
+                        required=true
+                        minlength=1
+                        maxlength=64
+                        class="form-input"
+                        placeholder="Display Name"
+                        prop:value=move || display_name.get()
+                        on:input=move |ev| set_display_name.set(event_target_value(&ev))
+                    />
+                </div>
+
+                <MessageAlert message=message />
+                <TempPasswordDisplay password=temp_password />
+
+                <div class="form-actions">
+                    <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled=move || pending.get()
+                    >
+                        {move || if pending.get() { "Creating..." } else { "Create User" }}
+                    </button>
+                </div>
+            </form>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/pages/users.rs

@@ -0,0 +1,94 @@
+//! Users list page component.
+
+use leptos::prelude::*;
+
+use crate::components::{Card, EmptyState, PageHeader, Pagination, SearchForm, StatusBadge};
+use crate::hooks::{use_fetch, use_pagination};
+use crate::models::UserSummary;
+use crate::utils::build_paginated_url;
+
+/// Users page component.
+#[component]
+pub fn UsersPage() -> impl IntoView {
+    let pagination = use_pagination();
+
+    // Fetch users using the new hook
+    let users = use_fetch::<Vec<UserSummary>>(move || {
+        build_paginated_url(
+            "/api/admin/users",
+            pagination.page.get(),
+            &pagination.search_query.get(),
+            25,
+        )
+    });
+
+    view! {
+        <PageHeader title="All Users" subtitle="Manage user accounts">
+            <a href="/admin/users/new" class="btn btn-primary">"Create User"</a>
+        </PageHeader>
+
+        <Card>
+            <SearchForm
+                action="/admin/users"
+                placeholder="Search by username or email..."
+                search_input=pagination.search_input
+            />
+
+            <Suspense fallback=|| view! { <p>"Loading users..."</p> }>
+                {move || {
+                    users.get().map(|maybe_users: Option<Vec<UserSummary>>| {
+                        match maybe_users {
+                            Some(user_list) if !user_list.is_empty() => {
+                                view! {
+                                    <div class="table-container">
+                                        <table class="data-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>"Username"</th>
+                                                    <th>"Display Name"</th>
+                                                    <th>"Email"</th>
+                                                    <th>"Status"</th>
+                                                    <th>"Created"</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {user_list.into_iter().map(|user| {
+                                                    view! {
+                                                        <tr>
+                                                            <td>
+                                                                <a href=format!("/admin/users/{}", user.id) class="table-link">
+                                                                    {user.username}
+                                                                </a>
+                                                            </td>
+                                                            <td>{user.display_name}</td>
+                                                            <td>{user.email.unwrap_or_else(|| "-".to_string())}</td>
+                                                            <td><StatusBadge status=user.status /></td>
+                                                            <td>{user.created_at}</td>
+                                                        </tr>
+                                                    }
+                                                }).collect_view()}
+                                            </tbody>
+                                        </table>
+                                    </div>
+
+                                    <Pagination
+                                        current_page=pagination.page.get()
+                                        base_url="/admin/users".to_string()
+                                        query=pagination.search_query.get()
+                                    />
+                                }.into_any()
+                            }
+                            _ => view! {
+                                <EmptyState
+                                    message="No users found."
+                                    action_href="/admin/users/new"
+                                    action_text="Create User"
+                                />
+                            }.into_any()
+                        }
+                    })
+                }}
+            </Suspense>
+        </Card>
+    }
+}

crates/chattyness-admin-ui/src/routes.rs

@@ -0,0 +1,131 @@
+//! Admin routes without Router wrapper (for embedding in combined apps).
+//!
+//! This module provides the `AdminRoutes` component which contains all admin
+//! route definitions without a Router wrapper. This allows the routes to be
+//! embedded in a parent Router (e.g., CombinedApp in chattyness-app).
+//!
+//! For standalone use (e.g., chattyness-owner), use `AdminApp` which wraps
+//! these routes with a Router.
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Route, Routes},
+    ParamSegment, StaticSegment,
+};
+
+use crate::components::{AuthenticatedLayout, LoginLayout};
+use crate::pages::{
+    ConfigPage, DashboardPage, LoginPage, PropsDetailPage, PropsNewPage, PropsPage,
+    RealmDetailPage, RealmNewPage, RealmsPage, SceneDetailPage, SceneNewPage, ScenesPage,
+    StaffPage, UserDetailPage, UserNewPage, UsersPage,
+};
+
+/// Admin routes that can be embedded in a parent Router.
+///
+/// All paths are relative to the Router's base path. When used in:
+/// - `AdminApp`: The Router is configured with base="/admin"
+/// - `CombinedApp`: The Router should be configured with base="/admin"
+#[component]
+pub fn AdminRoutes() -> impl IntoView {
+    view! {
+        <Routes fallback=|| "Page not found.".into_view()>
+            // Login page (no layout)
+            <Route path=StaticSegment("login") view=|| view! {
+                <LoginLayout>
+                    <LoginPage />
+                </LoginLayout>
+            } />
+
+            // Dashboard
+            <Route path=StaticSegment("") view=|| view! {
+                <AuthenticatedLayout current_page="dashboard">
+                    <DashboardPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Config
+            <Route path=StaticSegment("config") view=|| view! {
+                <AuthenticatedLayout current_page="config">
+                    <ConfigPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Users
+            <Route path=StaticSegment("users") view=|| view! {
+                <AuthenticatedLayout current_page="users">
+                    <UsersPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("users"), StaticSegment("new")) view=|| view! {
+                <AuthenticatedLayout current_page="users_new">
+                    <UserNewPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("users"), ParamSegment("user_id")) view=|| view! {
+                <AuthenticatedLayout current_page="users">
+                    <UserDetailPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Staff
+            <Route path=StaticSegment("staff") view=|| view! {
+                <AuthenticatedLayout current_page="staff">
+                    <StaffPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Props
+            <Route path=StaticSegment("props") view=|| view! {
+                <AuthenticatedLayout current_page="props">
+                    <PropsPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("props"), StaticSegment("new")) view=|| view! {
+                <AuthenticatedLayout current_page="props_new">
+                    <PropsNewPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("props"), ParamSegment("prop_id")) view=|| view! {
+                <AuthenticatedLayout current_page="props">
+                    <PropsDetailPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Realms
+            <Route path=StaticSegment("realms") view=|| view! {
+                <AuthenticatedLayout current_page="realms">
+                    <RealmsPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("realms"), StaticSegment("new")) view=|| view! {
+                <AuthenticatedLayout current_page="realms_new">
+                    <RealmNewPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Scenes (nested under realms)
+            <Route path=(StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes")) view=|| view! {
+                <AuthenticatedLayout current_page="scenes">
+                    <ScenesPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes"), StaticSegment("new")) view=|| view! {
+                <AuthenticatedLayout current_page="scenes_new">
+                    <SceneNewPage />
+                </AuthenticatedLayout>
+            } />
+            <Route path=(StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes"), ParamSegment("scene_id")) view=|| view! {
+                <AuthenticatedLayout current_page="scenes">
+                    <SceneDetailPage />
+                </AuthenticatedLayout>
+            } />
+
+            // Realm detail (must come after more specific realm routes)
+            <Route path=(StaticSegment("realms"), ParamSegment("slug")) view=|| view! {
+                <AuthenticatedLayout current_page="realms">
+                    <RealmDetailPage />
+                </AuthenticatedLayout>
+            } />
+        </Routes>
+    }
+}

crates/chattyness-admin-ui/src/utils.rs

@@ -0,0 +1,204 @@
+//! Utility functions for the admin UI.
+
+/// Gets the API base path based on the current URL.
+///
+/// Returns `/api/admin` if the current path starts with `/admin`,
+/// otherwise returns `/api`.
+///
+/// # Example
+/// ```rust
+/// let api_base = get_api_base();
+/// let url = format!("{}/realms/{}", api_base, slug);
+/// ```
+#[cfg(feature = "hydrate")]
+pub fn get_api_base() -> String {
+    web_sys::window()
+        .and_then(|w| w.location().pathname().ok())
+        .map(|path| {
+            if path.starts_with("/admin") {
+                "/api/admin".to_string()
+            } else {
+                "/api".to_string()
+            }
+        })
+        .unwrap_or_else(|| "/api".to_string())
+}
+
+/// Gets the API base path (SSR fallback - always returns /api).
+#[cfg(not(feature = "hydrate"))]
+pub fn get_api_base() -> String {
+    "/api".to_string()
+}
+
+/// Reloads the current page.
+#[cfg(feature = "hydrate")]
+pub fn reload_page() {
+    if let Some(window) = web_sys::window() {
+        let _ = window.location().reload();
+    }
+}
+
+/// Reloads the current page (SSR no-op).
+#[cfg(not(feature = "hydrate"))]
+pub fn reload_page() {}
+
+/// Navigates to a new URL.
+#[cfg(feature = "hydrate")]
+pub fn navigate_to(url: &str) {
+    if let Some(window) = web_sys::window() {
+        let _ = window.location().set_href(url);
+    }
+}
+
+/// Navigates to a new URL (SSR no-op).
+#[cfg(not(feature = "hydrate"))]
+pub fn navigate_to(_url: &str) {}
+
+/// Shows a browser confirm dialog and returns the result.
+#[cfg(feature = "hydrate")]
+pub fn confirm(message: &str) -> bool {
+    web_sys::window()
+        .and_then(|w| w.confirm_with_message(message).ok())
+        .unwrap_or(false)
+}
+
+/// Shows a browser confirm dialog (SSR fallback - always returns false).
+#[cfg(not(feature = "hydrate"))]
+pub fn confirm(_message: &str) -> bool {
+    false
+}
+
+/// Builds a paginated URL with optional search query.
+pub fn build_paginated_url(base: &str, page: i64, query: &str, limit: i64) -> String {
+    if query.is_empty() {
+        format!("{}?page={}&limit={}", base, page, limit)
+    } else {
+        format!("{}?q={}&page={}&limit={}", base, query, page, limit)
+    }
+}
+
+/// Parse width and height from WKT bounds string.
+///
+/// Example: "POLYGON((0 0, 800 0, 800 600, 0 600, 0 0))" -> (800, 600)
+/// Handles both "0 0, 800 0" (with space) and "0 0,800 0" (without space) formats.
+pub fn parse_bounds_wkt(wkt: &str) -> (i32, i32) {
+    // Extract coordinates from POLYGON((x1 y1, x2 y2, x3 y3, x4 y4, x5 y5))
+    // The second point has (width, 0) and third point has (width, height)
+    if let Some(start) = wkt.find("((") {
+        if let Some(end) = wkt.find("))") {
+            let coords_str = &wkt[start + 2..end];
+            let points: Vec<&str> = coords_str.split(',').map(|s| s.trim()).collect();
+            if points.len() >= 3 {
+                // Second point: "width 0"
+                let second: Vec<&str> = points[1].split_whitespace().collect();
+                // Third point: "width height"
+                let third: Vec<&str> = points[2].split_whitespace().collect();
+                if !second.is_empty() && third.len() >= 2 {
+                    let width = second[0].parse().unwrap_or(800);
+                    let height = third[1].parse().unwrap_or(600);
+                    return (width, height);
+                }
+            }
+        }
+    }
+    (800, 600)
+}
+
+/// Builds a WKT polygon string from width and height.
+pub fn build_bounds_wkt(width: i32, height: i32) -> String {
+    format!(
+        "POLYGON((0 0, {} 0, {} {}, 0 {}, 0 0))",
+        width, width, height, height
+    )
+}
+
+/// Fetch image dimensions client-side using JavaScript Image API.
+///
+/// This works regardless of CORS since we're only reading dimensions, not pixel data.
+/// The key is NOT setting the `crossorigin` attribute on the image element.
+///
+/// # Arguments
+/// * `url` - The image URL to fetch dimensions from
+/// * `on_success` - Callback receiving (width, height) on success
+/// * `on_error` - Callback receiving error message on failure
+/// * `set_loading` - Signal to set loading state
+#[cfg(feature = "hydrate")]
+pub fn fetch_image_dimensions_client<F, E>(
+    url: String,
+    on_success: F,
+    on_error: E,
+    set_loading: leptos::prelude::WriteSignal<bool>,
+)
+where
+    F: Fn(u32, u32) + 'static,
+    E: Fn(String) + Clone + 'static,
+{
+    use leptos::prelude::Set;
+    use wasm_bindgen::prelude::*;
+    use wasm_bindgen::JsCast;
+
+    let on_error_for_onerror = on_error.clone();
+
+    let window = match web_sys::window() {
+        Some(w) => w,
+        None => {
+            on_error("No window object available".to_string());
+            set_loading.set(false);
+            return;
+        }
+    };
+
+    let document = match window.document() {
+        Some(d) => d,
+        None => {
+            on_error("No document object available".to_string());
+            set_loading.set(false);
+            return;
+        }
+    };
+
+    let img: web_sys::HtmlImageElement = match document
+        .create_element("img")
+        .ok()
+        .and_then(|el| el.dyn_into().ok())
+    {
+        Some(img) => img,
+        None => {
+            on_error("Failed to create image element".to_string());
+            set_loading.set(false);
+            return;
+        }
+    };
+
+    // Note: We intentionally do NOT set crossorigin attribute.
+    // Without it, we can load images from any URL and read their dimensions.
+    // The crossorigin attribute would cause CORS errors for external images.
+
+    let img_clone = img.clone();
+
+    let onload = Closure::wrap(Box::new(move || {
+        let width = img_clone.natural_width();
+        let height = img_clone.natural_height();
+        set_loading.set(false);
+        if width > 0 && height > 0 {
+            on_success(width, height);
+        } else {
+            on_error("Could not determine image dimensions".to_string());
+        }
+    }) as Box<dyn Fn()>);
+
+    let onerror = Closure::wrap(Box::new(move || {
+        set_loading.set(false);
+        on_error_for_onerror("Failed to load image".to_string());
+    }) as Box<dyn Fn()>);
+
+    img.set_onload(Some(onload.as_ref().unchecked_ref()));
+    img.set_onerror(Some(onerror.as_ref().unchecked_ref()));
+
+    // Trigger the load
+    img.set_src(&url);
+
+    // Prevent closures from being dropped
+    onload.forget();
+    onerror.forget();
+}

crates/chattyness-db/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "chattyness-db"
+version.workspace = true
+edition.workspace = true
+
+[dependencies]
+chattyness-error = { workspace = true, optional = true }
+chattyness-shared = { workspace = true, optional = true }
+serde.workspace = true
+uuid.workspace = true
+chrono.workspace = true
+
+# SSR-only dependencies
+sqlx = { workspace = true, optional = true }
+argon2 = { workspace = true, optional = true }
+rand = { workspace = true, optional = true }
+
+[features]
+default = []
+ssr = ["sqlx", "argon2", "rand", "chattyness-error/ssr", "dep:chattyness-error", "dep:chattyness-shared"]

crates/chattyness-db/src/lib.rs

@@ -0,0 +1,16 @@
+//! Database module for chattyness.
+//!
+//! Provides SQLx-based database access with runtime queries.
+
+pub mod models;
+pub mod ws_messages;
+
+#[cfg(feature = "ssr")]
+pub mod pool;
+#[cfg(feature = "ssr")]
+pub mod queries;
+
+pub use models::*;
+pub use ws_messages::*;
+#[cfg(feature = "ssr")]
+pub use pool::*;

crates/chattyness-db/src/pool.rs

@@ -0,0 +1,84 @@
+//! Database connection pool and RLS context management.
+
+use std::time::Duration;
+
+use sqlx::{postgres::PgPoolOptions, PgPool};
+use uuid::Uuid;
+
+use chattyness_error::AppError;
+
+/// Create a new database connection pool for the owner interface.
+///
+/// Uses the `chattyness_owner` role which has full database access.
+pub async fn create_owner_pool(database_url: &str) -> Result<PgPool, AppError> {
+    let pool = PgPoolOptions::new()
+        .max_connections(5)
+        .acquire_timeout(Duration::from_secs(5))
+        .connect(database_url)
+        .await?;
+
+    Ok(pool)
+}
+
+/// Create a new database connection pool for the public app.
+///
+/// Uses the `chattyness_app` role which has Row-Level Security (RLS) policies.
+pub async fn create_app_pool(database_url: &str) -> Result<PgPool, AppError> {
+    let pool = PgPoolOptions::new()
+        .max_connections(10)
+        .acquire_timeout(Duration::from_secs(5))
+        .connect(database_url)
+        .await?;
+
+    Ok(pool)
+}
+
+/// Set the current user context for Row-Level Security.
+///
+/// This should be called at the start of each request to enable RLS policies
+/// that depend on the current user ID.
+pub async fn set_user_context(pool: &PgPool, user_id: Option<Uuid>) -> Result<(), AppError> {
+    if let Some(id) = user_id {
+        sqlx::query("SELECT public.set_current_user_id($1)")
+            .bind(id)
+            .execute(pool)
+            .await?;
+    } else {
+        // Clear the user context for anonymous requests
+        sqlx::query("SELECT public.clear_current_user_id()")
+            .execute(pool)
+            .await?;
+    }
+    Ok(())
+}
+
+/// Clear the current user context.
+///
+/// Called at the end of a request to ensure the connection is clean
+/// before returning to the pool.
+pub async fn clear_user_context(pool: &PgPool) -> Result<(), AppError> {
+    sqlx::query("SELECT public.clear_current_user_id()")
+        .execute(pool)
+        .await?;
+    Ok(())
+}
+
+/// Set the current guest session context for Row-Level Security.
+///
+/// This should be called for guest users to enable RLS policies
+/// that depend on the current guest session ID.
+pub async fn set_guest_context(pool: &PgPool, guest_session_id: Uuid) -> Result<(), AppError> {
+    sqlx::query("SELECT public.set_current_guest_session_id($1)")
+        .bind(guest_session_id)
+        .execute(pool)
+        .await?;
+    Ok(())
+}
+
+/// Clear the current guest session context.
+pub async fn clear_guest_context(pool: &PgPool) -> Result<(), AppError> {
+    sqlx::query("SELECT public.set_current_guest_session_id(NULL)")
+        .execute(pool)
+        .await?;
+    Ok(())
+}

crates/chattyness-db/src/queries.rs

@@ -0,0 +1,12 @@
+//! Database query modules.
+
+pub mod avatars;
+pub mod channel_members;
+pub mod guests;
+pub mod memberships;
+pub mod owner;
+pub mod props;
+pub mod realms;
+pub mod scenes;
+pub mod spots;
+pub mod users;

crates/chattyness-db/src/queries/avatars.rs

@@ -0,0 +1,201 @@
+//! Avatar-related database queries.
+
+use sqlx::PgExecutor;
+use uuid::Uuid;
+
+use crate::models::{ActiveAvatar, AvatarRenderData};
+use chattyness_error::AppError;
+
+/// Get the active avatar for a user in a realm.
+pub async fn get_active_avatar<'e>(
+    executor: impl PgExecutor<'e>,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<Option<ActiveAvatar>, AppError> {
+    let avatar = sqlx::query_as::<_, ActiveAvatar>(
+        r#"
+        SELECT user_id, realm_id, avatar_id, current_emotion, updated_at
+        FROM props.active_avatars
+        WHERE user_id = $1 AND realm_id = $2
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(avatar)
+}
+
+/// Set the current emotion for a user in a realm.
+/// Returns the full emotion layer (9 asset paths) for the new emotion.
+pub async fn set_emotion<'e>(
+    executor: impl PgExecutor<'e>,
+    user_id: Uuid,
+    realm_id: Uuid,
+    emotion: i16,
+) -> Result<[Option<String>; 9], AppError> {
+    if emotion < 0 || emotion > 9 {
+        return Err(AppError::Validation("Emotion must be 0-9".to_string()));
+    }
+
+    // Map emotion index to column prefix
+    let emotion_prefix = match emotion {
+        0 => "e_neutral",
+        1 => "e_happy",
+        2 => "e_sad",
+        3 => "e_angry",
+        4 => "e_surprised",
+        5 => "e_thinking",
+        6 => "e_laughing",
+        7 => "e_crying",
+        8 => "e_love",
+        9 => "e_confused",
+        _ => return Err(AppError::Validation("Emotion must be 0-9".to_string())),
+    };
+
+    // Build dynamic query for the specific emotion's 9 positions
+    let query = format!(
+        r#"
+        WITH updated AS (
+            UPDATE props.active_avatars
+            SET current_emotion = $3, updated_at = now()
+            WHERE user_id = $1 AND realm_id = $2
+            RETURNING avatar_id
+        )
+        SELECT
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_0) as p0,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_1) as p1,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_2) as p2,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_3) as p3,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_4) as p4,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_5) as p5,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_6) as p6,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_7) as p7,
+            (SELECT prop_asset_path FROM props.inventory WHERE id = a.{prefix}_8) as p8
+        FROM updated u
+        JOIN props.avatars a ON a.id = u.avatar_id
+        "#,
+        prefix = emotion_prefix
+    );
+
+    let result = sqlx::query_as::<_, EmotionLayerRow>(&query)
+        .bind(user_id)
+        .bind(realm_id)
+        .bind(emotion)
+        .fetch_optional(executor)
+        .await?;
+
+    match result {
+        Some(row) => Ok([
+            row.p0, row.p1, row.p2, row.p3, row.p4, row.p5, row.p6, row.p7, row.p8,
+        ]),
+        None => Err(AppError::NotFound(
+            "No active avatar for this user in this realm".to_string(),
+        )),
+    }
+}
+
+/// Row type for emotion layer query.
+#[derive(Debug, sqlx::FromRow)]
+struct EmotionLayerRow {
+    p0: Option<String>,
+    p1: Option<String>,
+    p2: Option<String>,
+    p3: Option<String>,
+    p4: Option<String>,
+    p5: Option<String>,
+    p6: Option<String>,
+    p7: Option<String>,
+    p8: Option<String>,
+}
+
+/// Get render data for a user's avatar in a realm.
+///
+/// Returns the asset paths for all equipped props in the avatar's current state.
+/// This is a simplified version that only returns the center position (position 4)
+/// props for skin, clothes, accessories, and current emotion layers.
+pub async fn get_avatar_render_data<'e>(
+    executor: impl PgExecutor<'e>,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<AvatarRenderData, AppError> {
+    // Simplified query: just get position 4 (center) props for each layer
+    // This covers the common case of simple face avatars
+    let render_data = sqlx::query_as::<_, SimplifiedAvatarRow>(
+        r#"
+        SELECT
+            a.id as avatar_id,
+            aa.current_emotion,
+            -- Skin layer center
+            skin.prop_asset_path as skin_center,
+            -- Clothes layer center
+            clothes.prop_asset_path as clothes_center,
+            -- Accessories layer center
+            acc.prop_asset_path as accessories_center,
+            -- Current emotion layer center (based on current_emotion)
+            CASE aa.current_emotion
+                WHEN 0 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_neutral_4)
+                WHEN 1 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_happy_4)
+                WHEN 2 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_sad_4)
+                WHEN 3 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_angry_4)
+                WHEN 4 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_surprised_4)
+                WHEN 5 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_thinking_4)
+                WHEN 6 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_laughing_4)
+                WHEN 7 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_crying_4)
+                WHEN 8 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_love_4)
+                WHEN 9 THEN (SELECT prop_asset_path FROM props.inventory WHERE id = a.e_confused_4)
+            END as emotion_center
+        FROM props.active_avatars aa
+        JOIN props.avatars a ON aa.avatar_id = a.id
+        LEFT JOIN props.inventory skin ON a.l_skin_4 = skin.id
+        LEFT JOIN props.inventory clothes ON a.l_clothes_4 = clothes.id
+        LEFT JOIN props.inventory acc ON a.l_accessories_4 = acc.id
+        WHERE aa.user_id = $1 AND aa.realm_id = $2
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .fetch_optional(executor)
+    .await?;
+
+    match render_data {
+        Some(row) => Ok(row.into()),
+        None => Ok(AvatarRenderData::default()),
+    }
+}
+
+/// Simplified avatar row for center-only rendering.
+#[derive(Debug, sqlx::FromRow)]
+struct SimplifiedAvatarRow {
+    avatar_id: Uuid,
+    current_emotion: i16,
+    skin_center: Option<String>,
+    clothes_center: Option<String>,
+    accessories_center: Option<String>,
+    emotion_center: Option<String>,
+}
+
+impl From<SimplifiedAvatarRow> for AvatarRenderData {
+    fn from(row: SimplifiedAvatarRow) -> Self {
+        // For now, only populate position 4 (center)
+        let mut skin_layer: [Option<String>; 9] = Default::default();
+        let mut clothes_layer: [Option<String>; 9] = Default::default();
+        let mut accessories_layer: [Option<String>; 9] = Default::default();
+        let mut emotion_layer: [Option<String>; 9] = Default::default();
+
+        skin_layer[4] = row.skin_center;
+        clothes_layer[4] = row.clothes_center;
+        accessories_layer[4] = row.accessories_center;
+        emotion_layer[4] = row.emotion_center;
+
+        Self {
+            avatar_id: row.avatar_id,
+            current_emotion: row.current_emotion,
+            skin_layer,
+            clothes_layer,
+            accessories_layer,
+            emotion_layer,
+        }
+    }
+}

crates/chattyness-db/src/queries/channel_members.rs

@@ -0,0 +1,233 @@
+//! Channel member queries for user presence in channels.
+
+use sqlx::PgExecutor;
+use uuid::Uuid;
+
+use crate::models::{ChannelMember, ChannelMemberInfo};
+use chattyness_error::AppError;
+
+/// Join a channel as an authenticated user.
+///
+/// Creates a channel_members entry with default position (400, 300).
+pub async fn join_channel<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+) -> Result<ChannelMember, AppError> {
+    let member = sqlx::query_as::<_, ChannelMember>(
+        r#"
+        INSERT INTO realm.channel_members (channel_id, user_id, position)
+        VALUES ($1, $2, ST_SetSRID(ST_MakePoint(400, 300), 0))
+        ON CONFLICT (channel_id, user_id) DO UPDATE
+        SET joined_at = now()
+        RETURNING
+            id,
+            channel_id,
+            user_id,
+            guest_session_id,
+            ST_X(position) as position_x,
+            ST_Y(position) as position_y,
+            facing_direction,
+            is_moving,
+            is_afk,
+            joined_at,
+            last_moved_at
+        "#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(member)
+}
+
+/// Ensure an active avatar exists for a user in a realm.
+/// Uses the user's default avatar (slot 0) if none exists.
+pub async fn ensure_active_avatar<'e>(
+    executor: impl PgExecutor<'e>,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        INSERT INTO props.active_avatars (user_id, realm_id, avatar_id, current_emotion)
+        SELECT $1, $2, id, 0
+        FROM props.avatars
+        WHERE user_id = $1 AND slot_number = 0
+        ON CONFLICT (user_id, realm_id) DO NOTHING
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .execute(executor)
+    .await?;
+
+    Ok(())
+}
+
+/// Leave a channel.
+pub async fn leave_channel<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"DELETE FROM realm.channel_members WHERE channel_id = $1 AND user_id = $2"#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .execute(executor)
+    .await?;
+
+    Ok(())
+}
+
+/// Update a user's position in a channel.
+pub async fn update_position<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+    x: f64,
+    y: f64,
+) -> Result<(), AppError> {
+    let result = sqlx::query(
+        r#"
+        UPDATE realm.channel_members
+        SET position = ST_SetSRID(ST_MakePoint($3, $4), 0),
+            last_moved_at = now(),
+            is_moving = true
+        WHERE channel_id = $1 AND user_id = $2
+        "#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .bind(x)
+    .bind(y)
+    .execute(executor)
+    .await?;
+
+    if result.rows_affected() == 0 {
+        return Err(AppError::NotFound("Channel member not found".to_string()));
+    }
+
+    Ok(())
+}
+
+/// Get all members in a channel with their display info and current emotion.
+pub async fn get_channel_members<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    realm_id: Uuid,
+) -> Result<Vec<ChannelMemberInfo>, AppError> {
+    let members = sqlx::query_as::<_, ChannelMemberInfo>(
+        r#"
+        SELECT
+            cm.id,
+            cm.channel_id,
+            cm.user_id,
+            cm.guest_session_id,
+            COALESCE(u.display_name, gs.guest_name, 'Anonymous') as display_name,
+            ST_X(cm.position) as position_x,
+            ST_Y(cm.position) as position_y,
+            cm.facing_direction,
+            cm.is_moving,
+            cm.is_afk,
+            COALESCE(aa.current_emotion, 0::smallint) as current_emotion,
+            cm.joined_at
+        FROM realm.channel_members cm
+        LEFT JOIN auth.users u ON cm.user_id = u.id
+        LEFT JOIN auth.guest_sessions gs ON cm.guest_session_id = gs.id
+        LEFT JOIN props.active_avatars aa ON cm.user_id = aa.user_id AND aa.realm_id = $2
+        WHERE cm.channel_id = $1
+        ORDER BY cm.joined_at ASC
+        "#,
+    )
+    .bind(channel_id)
+    .bind(realm_id)
+    .fetch_all(executor)
+    .await?;
+
+    Ok(members)
+}
+
+/// Get a specific channel member by user ID.
+pub async fn get_channel_member<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<Option<ChannelMemberInfo>, AppError> {
+    let member = sqlx::query_as::<_, ChannelMemberInfo>(
+        r#"
+        SELECT
+            cm.id,
+            cm.channel_id,
+            cm.user_id,
+            cm.guest_session_id,
+            COALESCE(u.display_name, 'Anonymous') as display_name,
+            ST_X(cm.position) as position_x,
+            ST_Y(cm.position) as position_y,
+            cm.facing_direction,
+            cm.is_moving,
+            cm.is_afk,
+            COALESCE(aa.current_emotion, 0::smallint) as current_emotion,
+            cm.joined_at
+        FROM realm.channel_members cm
+        LEFT JOIN auth.users u ON cm.user_id = u.id
+        LEFT JOIN props.active_avatars aa ON cm.user_id = aa.user_id AND aa.realm_id = $3
+        WHERE cm.channel_id = $1 AND cm.user_id = $2
+        "#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .bind(realm_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(member)
+}
+
+/// Set a user's moving state to false (called after movement animation completes).
+pub async fn set_stopped<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        UPDATE realm.channel_members
+        SET is_moving = false
+        WHERE channel_id = $1 AND user_id = $2
+        "#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .execute(executor)
+    .await?;
+
+    Ok(())
+}
+
+/// Set a user's AFK state.
+pub async fn set_afk<'e>(
+    executor: impl PgExecutor<'e>,
+    channel_id: Uuid,
+    user_id: Uuid,
+    is_afk: bool,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        UPDATE realm.channel_members
+        SET is_afk = $3
+        WHERE channel_id = $1 AND user_id = $2
+        "#,
+    )
+    .bind(channel_id)
+    .bind(user_id)
+    .bind(is_afk)
+    .execute(executor)
+    .await?;
+
+    Ok(())
+}

crates/chattyness-db/src/queries/guests.rs

@@ -0,0 +1,95 @@
+//! Guest session database queries.
+
+use chrono::{DateTime, TimeDelta, Utc};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use chattyness_error::AppError;
+
+/// Guest session record.
+#[derive(Debug, Clone)]
+#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
+pub struct GuestSession {
+    pub id: Uuid,
+    pub guest_name: String,
+    pub current_realm_id: Option<Uuid>,
+    pub expires_at: DateTime<Utc>,
+    pub created_at: DateTime<Utc>,
+}
+
+/// Create a new guest session.
+///
+/// Returns the guest session ID.
+pub async fn create_guest_session(
+    pool: &PgPool,
+    guest_name: &str,
+    realm_id: Uuid,
+    token_hash: &str,
+    user_agent: Option<&str>,
+    ip_address: Option<&str>,
+    expires_at: DateTime<Utc>,
+) -> Result<Uuid, AppError> {
+    let (session_id,): (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO auth.guest_sessions (guest_name, token_hash, user_agent, ip_address, current_realm_id, expires_at)
+        VALUES ($1, $2, $3, $4::inet, $5, $6)
+        RETURNING id
+        "#,
+    )
+    .bind(guest_name)
+    .bind(token_hash)
+    .bind(user_agent)
+    .bind(ip_address)
+    .bind(realm_id)
+    .bind(expires_at)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(session_id)
+}
+
+/// Get a guest session by ID.
+pub async fn get_guest_session(pool: &PgPool, session_id: Uuid) -> Result<Option<GuestSession>, AppError> {
+    let session = sqlx::query_as::<_, GuestSession>(
+        r#"
+        SELECT id, guest_name, current_realm_id, expires_at, created_at
+        FROM auth.guest_sessions
+        WHERE id = $1 AND expires_at > now()
+        "#,
+    )
+    .bind(session_id)
+    .fetch_optional(pool)
+    .await?;
+
+    // Update last activity if session exists
+    if session.is_some() {
+        sqlx::query("UPDATE auth.guest_sessions SET last_activity_at = now() WHERE id = $1")
+            .bind(session_id)
+            .execute(pool)
+            .await?;
+    }
+
+    Ok(session)
+}
+
+/// Delete a guest session.
+pub async fn delete_guest_session(pool: &PgPool, session_id: Uuid) -> Result<(), AppError> {
+    sqlx::query("DELETE FROM auth.guest_sessions WHERE id = $1")
+        .bind(session_id)
+        .execute(pool)
+        .await?;
+    Ok(())
+}
+
+/// Generate a random guest name like "Guest_12345".
+pub fn generate_guest_name() -> String {
+    use rand::Rng;
+    let mut rng = rand::thread_rng();
+    let number: u32 = rng.gen_range(10000..100000);
+    format!("Guest_{}", number)
+}
+
+/// Calculate guest session expiry (24 hours from now).
+pub fn guest_session_expiry() -> DateTime<Utc> {
+    Utc::now() + TimeDelta::hours(24)
+}

crates/chattyness-db/src/queries/memberships.rs

@@ -0,0 +1,201 @@
+//! Membership-related database queries.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{Membership, MembershipWithRealm, RealmRole, ServerRole};
+use chattyness_error::AppError;
+
+/// Get a user's membership in a specific realm.
+pub async fn get_user_membership(
+    pool: &PgPool,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<Option<Membership>, AppError> {
+    let membership = sqlx::query_as::<_, Membership>(
+        r#"
+        SELECT
+            id,
+            realm_id,
+            user_id,
+            role,
+            nickname,
+            created_at AS joined_at,
+            last_visited_at
+        FROM realm.memberships
+        WHERE user_id = $1 AND realm_id = $2
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(membership)
+}
+
+/// Create a new membership (join a realm).
+pub async fn create_membership(
+    pool: &PgPool,
+    user_id: Uuid,
+    realm_id: Uuid,
+    role: RealmRole,
+) -> Result<Uuid, AppError> {
+    let (membership_id,): (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, $3)
+        RETURNING id
+        "#,
+    )
+    .bind(realm_id)
+    .bind(user_id)
+    .bind(role)
+    .fetch_one(pool)
+    .await?;
+
+    // Update member count on the realm
+    sqlx::query("UPDATE realm.realms SET member_count = member_count + 1 WHERE id = $1")
+        .bind(realm_id)
+        .execute(pool)
+        .await?;
+
+    Ok(membership_id)
+}
+
+/// Create a new membership using a connection (for RLS support).
+pub async fn create_membership_conn(
+    conn: &mut sqlx::PgConnection,
+    user_id: Uuid,
+    realm_id: Uuid,
+    role: RealmRole,
+) -> Result<Uuid, AppError> {
+    let (membership_id,): (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, $3)
+        RETURNING id
+        "#,
+    )
+    .bind(realm_id)
+    .bind(user_id)
+    .bind(role)
+    .fetch_one(&mut *conn)
+    .await?;
+
+    // Update member count on the realm
+    sqlx::query("UPDATE realm.realms SET member_count = member_count + 1 WHERE id = $1")
+        .bind(realm_id)
+        .execute(&mut *conn)
+        .await?;
+
+    Ok(membership_id)
+}
+
+/// Get all realm memberships for a user.
+pub async fn get_user_memberships(
+    pool: &PgPool,
+    user_id: Uuid,
+) -> Result<Vec<MembershipWithRealm>, AppError> {
+    let memberships = sqlx::query_as::<_, MembershipWithRealm>(
+        r#"
+        SELECT
+            m.id AS membership_id,
+            m.realm_id,
+            r.name AS realm_name,
+            r.slug AS realm_slug,
+            r.privacy AS realm_privacy,
+            m.role,
+            m.nickname,
+            m.last_visited_at
+        FROM realm.memberships m
+        JOIN realm.realms r ON m.realm_id = r.id
+        WHERE m.user_id = $1
+        ORDER BY m.last_visited_at DESC NULLS LAST
+        "#,
+    )
+    .bind(user_id)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(memberships)
+}
+
+/// Get a user's server staff role (if any).
+pub async fn get_user_staff_role(
+    pool: &PgPool,
+    user_id: Uuid,
+) -> Result<Option<ServerRole>, AppError> {
+    let result: Option<(ServerRole,)> = sqlx::query_as(
+        r#"
+        SELECT role
+        FROM server.staff
+        WHERE user_id = $1
+        "#,
+    )
+    .bind(user_id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(result.map(|(role,)| role))
+}
+
+/// Update last visited timestamp for a membership.
+pub async fn update_last_visited(
+    pool: &PgPool,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        UPDATE realm.memberships
+        SET last_visited_at = now()
+        WHERE user_id = $1 AND realm_id = $2
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+/// Update last visited timestamp using a connection (for RLS support).
+pub async fn update_last_visited_conn(
+    conn: &mut sqlx::PgConnection,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        UPDATE realm.memberships
+        SET last_visited_at = now()
+        WHERE user_id = $1 AND realm_id = $2
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .execute(conn)
+    .await?;
+
+    Ok(())
+}
+
+/// Check if a user is a member of a realm.
+pub async fn is_member(pool: &PgPool, user_id: Uuid, realm_id: Uuid) -> Result<bool, AppError> {
+    let exists: (bool,) = sqlx::query_as(
+        r#"
+        SELECT EXISTS(
+            SELECT 1 FROM realm.memberships
+            WHERE user_id = $1 AND realm_id = $2
+        )
+        "#,
+    )
+    .bind(user_id)
+    .bind(realm_id)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(exists.0)
+}

crates/chattyness-db/src/queries/owner.rs

@@ -0,0 +1,25 @@
+//! Owner-related database queries.
+//!
+//! These queries are used by the owner interface and require the chattyness_owner role.
+//!
+//! This module is organized into submodules by domain:
+//! - `config`: Server configuration queries
+//! - `staff`: Staff management queries
+//! - `users`: User management queries
+//! - `realms`: Realm management queries
+//! - `helpers`: Shared helper functions (password hashing, token generation)
+
+mod config;
+mod helpers;
+mod realms;
+mod staff;
+mod users;
+
+// Re-export all public functions for backwards compatibility
+pub use config::*;
+pub use realms::*;
+pub use staff::*;
+pub use users::*;
+
+// Re-export helpers for use by other modules if needed
+pub use helpers::{generate_random_token, hash_password};

crates/chattyness-db/src/queries/owner/config.rs

@@ -0,0 +1,93 @@
+//! Server configuration database queries.
+//!
+//! These queries are used by the owner interface and require the chattyness_owner role.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{ServerConfig, UpdateServerConfigRequest};
+use chattyness_error::AppError;
+
+/// The fixed UUID for the singleton server config row.
+pub fn server_config_id() -> Uuid {
+    Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap()
+}
+
+/// Get the server configuration.
+pub async fn get_server_config(pool: &PgPool) -> Result<ServerConfig, AppError> {
+    let config = sqlx::query_as::<_, ServerConfig>(
+        r#"
+        SELECT
+            id,
+            name,
+            description,
+            welcome_message,
+            max_users_per_channel,
+            message_rate_limit,
+            message_rate_window_seconds,
+            allow_guest_access,
+            allow_user_uploads,
+            require_email_verification,
+            created_at,
+            updated_at
+        FROM server.config
+        WHERE id = $1
+        "#,
+    )
+    .bind(server_config_id())
+    .fetch_one(pool)
+    .await?;
+
+    Ok(config)
+}
+
+/// Update the server configuration.
+pub async fn update_server_config(
+    pool: &PgPool,
+    req: &UpdateServerConfigRequest,
+) -> Result<ServerConfig, AppError> {
+    let config = sqlx::query_as::<_, ServerConfig>(
+        r#"
+        UPDATE server.config
+        SET
+            name = $1,
+            description = $2,
+            welcome_message = $3,
+            max_users_per_channel = $4,
+            message_rate_limit = $5,
+            message_rate_window_seconds = $6,
+            allow_guest_access = $7,
+            allow_user_uploads = $8,
+            require_email_verification = $9,
+            updated_at = now()
+        WHERE id = $10
+        RETURNING
+            id,
+            name,
+            description,
+            welcome_message,
+            max_users_per_channel,
+            message_rate_limit,
+            message_rate_window_seconds,
+            allow_guest_access,
+            allow_user_uploads,
+            require_email_verification,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(&req.name)
+    .bind(&req.description)
+    .bind(&req.welcome_message)
+    .bind(req.max_users_per_channel)
+    .bind(req.message_rate_limit)
+    .bind(req.message_rate_window_seconds)
+    .bind(req.allow_guest_access)
+    .bind(req.allow_user_uploads)
+    .bind(req.require_email_verification)
+    .bind(server_config_id())
+    .fetch_one(pool)
+    .await?;
+
+    Ok(config)
+}

crates/chattyness-db/src/queries/owner/helpers.rs

@@ -0,0 +1,32 @@
+//! Shared helper functions for owner queries.
+
+use chattyness_error::AppError;
+
+/// Hash a password using argon2.
+pub fn hash_password(password: &str) -> Result<String, AppError> {
+    use argon2::{
+        password_hash::{rand_core::OsRng, PasswordHasher, SaltString},
+        Argon2,
+    };
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let hash = argon2
+        .hash_password(password.as_bytes(), &salt)
+        .map_err(|e| AppError::Internal(format!("Failed to hash password: {}", e)))?;
+
+    Ok(hash.to_string())
+}
+
+/// Generate a random 50-character alphanumeric token for temporary passwords.
+pub fn generate_random_token() -> String {
+    use rand::Rng;
+    const CHARSET: &[u8] = b"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let mut rng = rand::thread_rng();
+    (0..50)
+        .map(|_| {
+            let idx = rng.gen_range(0..CHARSET.len());
+            CHARSET[idx] as char
+        })
+        .collect()
+}

crates/chattyness-db/src/queries/owner/realms.rs

@@ -0,0 +1,385 @@
+//! Realm management database queries.
+//!
+//! These queries are used by the owner interface and require the chattyness_owner role.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{
+    OwnerCreateRealmRequest, RealmDetail, RealmListItem, RealmPrivacy, UpdateRealmRequest,
+};
+use chattyness_error::AppError;
+
+use super::helpers::{generate_random_token, hash_password};
+
+/// List all realms with owner info (for admin interface).
+pub async fn list_realms_with_owner(
+    pool: &PgPool,
+    limit: i64,
+    offset: i64,
+) -> Result<Vec<RealmListItem>, AppError> {
+    let realms = sqlx::query_as::<_, RealmListItem>(
+        r#"
+        SELECT
+            r.id,
+            r.name,
+            r.slug,
+            r.tagline,
+            r.privacy,
+            r.is_nsfw,
+            r.owner_id,
+            u.username as owner_username,
+            r.member_count,
+            r.current_user_count,
+            r.created_at
+        FROM realm.realms r
+        JOIN auth.users u ON r.owner_id = u.id
+        ORDER BY r.created_at DESC
+        LIMIT $1 OFFSET $2
+        "#,
+    )
+    .bind(limit)
+    .bind(offset)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(realms)
+}
+
+/// Search realms by name or slug.
+pub async fn search_realms(
+    pool: &PgPool,
+    query: &str,
+    limit: i64,
+) -> Result<Vec<RealmListItem>, AppError> {
+    let pattern = format!("%{}%", query);
+    let realms = sqlx::query_as::<_, RealmListItem>(
+        r#"
+        SELECT
+            r.id,
+            r.name,
+            r.slug,
+            r.tagline,
+            r.privacy,
+            r.is_nsfw,
+            r.owner_id,
+            u.username as owner_username,
+            r.member_count,
+            r.current_user_count,
+            r.created_at
+        FROM realm.realms r
+        JOIN auth.users u ON r.owner_id = u.id
+        WHERE
+            r.name ILIKE $1
+            OR r.slug ILIKE $1
+        ORDER BY
+            CASE
+                WHEN r.slug ILIKE $1 THEN 1
+                WHEN r.name ILIKE $1 THEN 2
+                ELSE 3
+            END,
+            r.name
+        LIMIT $2
+        "#,
+    )
+    .bind(&pattern)
+    .bind(limit)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(realms)
+}
+
+/// Create a new realm with an existing user as owner.
+#[allow(clippy::too_many_arguments)]
+pub async fn create_realm(
+    pool: &PgPool,
+    owner_id: Uuid,
+    name: &str,
+    slug: &str,
+    description: Option<&str>,
+    tagline: Option<&str>,
+    privacy: RealmPrivacy,
+    is_nsfw: bool,
+    max_users: i32,
+    allow_guest_access: bool,
+    theme_color: Option<&str>,
+) -> Result<Uuid, AppError> {
+    // Start a transaction
+    let mut tx = pool.begin().await?;
+
+    // Create the realm
+    let realm_id = sqlx::query_scalar::<_, Uuid>(
+        r#"
+        INSERT INTO realm.realms (
+            name, slug, description, tagline, owner_id,
+            privacy, is_nsfw, max_users, allow_guest_access, theme_color
+        )
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+        RETURNING id
+        "#,
+    )
+    .bind(name)
+    .bind(slug)
+    .bind(description)
+    .bind(tagline)
+    .bind(owner_id)
+    .bind(privacy)
+    .bind(is_nsfw)
+    .bind(max_users)
+    .bind(allow_guest_access)
+    .bind(theme_color)
+    .fetch_one(&mut *tx)
+    .await?;
+
+    // Add owner as realm member with owner role
+    sqlx::query(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, 'owner')
+        "#,
+    )
+    .bind(realm_id)
+    .bind(owner_id)
+    .execute(&mut *tx)
+    .await?;
+
+    tx.commit().await?;
+
+    Ok(realm_id)
+}
+
+/// Create a realm with a new user as owner (atomically).
+/// Returns (realm_id, user_id, plaintext_token) - the token should be shown to the server owner.
+pub async fn create_realm_with_new_owner(
+    pool: &PgPool,
+    req: &OwnerCreateRealmRequest,
+) -> Result<(Uuid, Uuid, String), AppError> {
+    let new_owner = req
+        .new_owner
+        .as_ref()
+        .ok_or_else(|| AppError::Validation("new_owner is required".to_string()))?;
+
+    // Generate a random token as the temporary password
+    let token = generate_random_token();
+    let password_hash = hash_password(&token)?;
+
+    // Start a transaction
+    let mut tx = pool.begin().await?;
+
+    // Create the user with force_pw_reset = true
+    let user_id = sqlx::query_scalar::<_, Uuid>(
+        r#"
+        INSERT INTO auth.users (username, email, display_name, password_hash, force_pw_reset)
+        VALUES ($1, $2, $3, $4, true)
+        RETURNING id
+        "#,
+    )
+    .bind(&new_owner.username)
+    .bind(&new_owner.email)
+    .bind(&new_owner.display_name)
+    .bind(&password_hash)
+    .fetch_one(&mut *tx)
+    .await?;
+
+    // Create the realm
+    let realm_id = sqlx::query_scalar::<_, Uuid>(
+        r#"
+        INSERT INTO realm.realms (
+            name, slug, description, tagline, owner_id,
+            privacy, is_nsfw, max_users, allow_guest_access, theme_color
+        )
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+        RETURNING id
+        "#,
+    )
+    .bind(&req.name)
+    .bind(&req.slug)
+    .bind(&req.description)
+    .bind(&req.tagline)
+    .bind(user_id)
+    .bind(req.privacy)
+    .bind(req.is_nsfw)
+    .bind(req.max_users)
+    .bind(req.allow_guest_access)
+    .bind(&req.theme_color)
+    .fetch_one(&mut *tx)
+    .await?;
+
+    // Add owner as realm member with owner role
+    sqlx::query(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, 'owner')
+        "#,
+    )
+    .bind(realm_id)
+    .bind(user_id)
+    .execute(&mut *tx)
+    .await?;
+
+    tx.commit().await?;
+
+    Ok((realm_id, user_id, token))
+}
+
+/// Get a realm by slug with full details for editing.
+pub async fn get_realm_by_slug(pool: &PgPool, slug: &str) -> Result<RealmDetail, AppError> {
+    let realm = sqlx::query_as::<_, RealmDetail>(
+        r#"
+        SELECT
+            r.id,
+            r.name,
+            r.slug,
+            r.description,
+            r.tagline,
+            r.owner_id,
+            u.username as owner_username,
+            u.display_name as owner_display_name,
+            r.privacy,
+            r.is_nsfw,
+            r.min_reputation_tier,
+            r.theme_color,
+            r.banner_image_path,
+            r.thumbnail_path,
+            r.max_users,
+            r.allow_guest_access,
+            r.member_count,
+            r.current_user_count,
+            r.created_at,
+            r.updated_at
+        FROM realm.realms r
+        JOIN auth.users u ON r.owner_id = u.id
+        WHERE r.slug = $1
+        "#,
+    )
+    .bind(slug)
+    .fetch_optional(pool)
+    .await?
+    .ok_or_else(|| AppError::NotFound(format!("Realm with slug '{}' not found", slug)))?;
+
+    Ok(realm)
+}
+
+/// Update a realm's settings.
+pub async fn update_realm(
+    pool: &PgPool,
+    realm_id: Uuid,
+    req: &UpdateRealmRequest,
+) -> Result<RealmDetail, AppError> {
+    // Update the realm
+    sqlx::query(
+        r#"
+        UPDATE realm.realms
+        SET
+            name = $1,
+            description = $2,
+            tagline = $3,
+            privacy = $4,
+            is_nsfw = $5,
+            max_users = $6,
+            allow_guest_access = $7,
+            theme_color = $8,
+            updated_at = now()
+        WHERE id = $9
+        "#,
+    )
+    .bind(&req.name)
+    .bind(&req.description)
+    .bind(&req.tagline)
+    .bind(req.privacy)
+    .bind(req.is_nsfw)
+    .bind(req.max_users)
+    .bind(req.allow_guest_access)
+    .bind(&req.theme_color)
+    .bind(realm_id)
+    .execute(pool)
+    .await?;
+
+    // Fetch and return the updated realm
+    let realm = sqlx::query_as::<_, RealmDetail>(
+        r#"
+        SELECT
+            r.id,
+            r.name,
+            r.slug,
+            r.description,
+            r.tagline,
+            r.owner_id,
+            u.username as owner_username,
+            u.display_name as owner_display_name,
+            r.privacy,
+            r.is_nsfw,
+            r.min_reputation_tier,
+            r.theme_color,
+            r.banner_image_path,
+            r.thumbnail_path,
+            r.max_users,
+            r.allow_guest_access,
+            r.member_count,
+            r.current_user_count,
+            r.created_at,
+            r.updated_at
+        FROM realm.realms r
+        JOIN auth.users u ON r.owner_id = u.id
+        WHERE r.id = $1
+        "#,
+    )
+    .bind(realm_id)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(realm)
+}
+
+/// Transfer realm ownership to a different user.
+pub async fn transfer_realm_ownership(
+    pool: &PgPool,
+    realm_id: Uuid,
+    new_owner_id: Uuid,
+) -> Result<(), AppError> {
+    let mut tx = pool.begin().await?;
+
+    // Get current owner_id
+    let current_owner_id =
+        sqlx::query_scalar::<_, Uuid>(r#"SELECT owner_id FROM realm.realms WHERE id = $1"#)
+            .bind(realm_id)
+            .fetch_one(&mut *tx)
+            .await?;
+
+    // Update realm owner
+    sqlx::query(r#"UPDATE realm.realms SET owner_id = $1, updated_at = now() WHERE id = $2"#)
+        .bind(new_owner_id)
+        .bind(realm_id)
+        .execute(&mut *tx)
+        .await?;
+
+    // Update old owner's membership role to member (or remove?)
+    sqlx::query(
+        r#"
+        UPDATE realm.memberships
+        SET role = 'moderator'
+        WHERE realm_id = $1 AND user_id = $2
+        "#,
+    )
+    .bind(realm_id)
+    .bind(current_owner_id)
+    .execute(&mut *tx)
+    .await?;
+
+    // Ensure new owner has membership with owner role
+    sqlx::query(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, 'owner')
+        ON CONFLICT (realm_id, user_id) DO UPDATE SET role = 'owner'
+        "#,
+    )
+    .bind(realm_id)
+    .bind(new_owner_id)
+    .execute(&mut *tx)
+    .await?;
+
+    tx.commit().await?;
+    Ok(())
+}

crates/chattyness-db/src/queries/owner/staff.rs

@@ -0,0 +1,111 @@
+//! Staff management database queries.
+//!
+//! These queries are used by the owner interface and require the chattyness_owner role.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{ServerRole, StaffMember};
+use chattyness_error::AppError;
+
+/// Get all staff members.
+pub async fn get_all_staff(pool: &PgPool) -> Result<Vec<StaffMember>, AppError> {
+    let staff = sqlx::query_as::<_, StaffMember>(
+        r#"
+        SELECT
+            s.user_id,
+            u.username,
+            u.display_name,
+            u.email,
+            s.role,
+            s.appointed_by,
+            s.appointed_at
+        FROM server.staff s
+        JOIN auth.users u ON s.user_id = u.id
+        ORDER BY
+            CASE s.role
+                WHEN 'owner' THEN 1
+                WHEN 'admin' THEN 2
+                WHEN 'moderator' THEN 3
+            END,
+            s.appointed_at DESC
+        "#,
+    )
+    .fetch_all(pool)
+    .await?;
+
+    Ok(staff)
+}
+
+/// Get staff members by role.
+pub async fn get_staff_by_role(
+    pool: &PgPool,
+    role: ServerRole,
+) -> Result<Vec<StaffMember>, AppError> {
+    let staff = sqlx::query_as::<_, StaffMember>(
+        r#"
+        SELECT
+            s.user_id,
+            u.username,
+            u.display_name,
+            u.email,
+            s.role,
+            s.appointed_by,
+            s.appointed_at
+        FROM server.staff s
+        JOIN auth.users u ON s.user_id = u.id
+        WHERE s.role = $1
+        ORDER BY s.appointed_at DESC
+        "#,
+    )
+    .bind(role)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(staff)
+}
+
+/// Create a staff member (promote existing user).
+pub async fn create_staff(
+    pool: &PgPool,
+    user_id: Uuid,
+    role: ServerRole,
+    appointed_by: Option<Uuid>,
+) -> Result<StaffMember, AppError> {
+    let staff = sqlx::query_as::<_, StaffMember>(
+        r#"
+        WITH inserted AS (
+            INSERT INTO server.staff (user_id, role, appointed_by)
+            VALUES ($1, $2, $3)
+            RETURNING user_id, role, appointed_by, appointed_at
+        )
+        SELECT
+            i.user_id,
+            u.username,
+            u.display_name,
+            u.email,
+            i.role,
+            i.appointed_by,
+            i.appointed_at
+        FROM inserted i
+        JOIN auth.users u ON i.user_id = u.id
+        "#,
+    )
+    .bind(user_id)
+    .bind(role)
+    .bind(appointed_by)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(staff)
+}
+
+/// Remove a staff member.
+pub async fn delete_staff(pool: &PgPool, user_id: Uuid) -> Result<(), AppError> {
+    sqlx::query("DELETE FROM server.staff WHERE user_id = $1")
+        .bind(user_id)
+        .execute(pool)
+        .await?;
+
+    Ok(())
+}

crates/chattyness-db/src/queries/owner/users.rs

@@ -0,0 +1,346 @@
+//! User management database queries.
+//!
+//! These queries are used by the owner interface and require the chattyness_owner role.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{
+    AccountStatus, CreateUserRequest, NewUserData, RealmRole, RealmSummary, UserDetail,
+    UserListItem, UserRealmMembership,
+};
+use chattyness_error::AppError;
+
+use super::helpers::{generate_random_token, hash_password};
+
+/// List all users with pagination.
+pub async fn list_users(
+    pool: &PgPool,
+    limit: i64,
+    offset: i64,
+) -> Result<Vec<UserListItem>, AppError> {
+    let users = sqlx::query_as::<_, UserListItem>(
+        r#"
+        SELECT
+            u.id,
+            u.username,
+            u.display_name,
+            u.email,
+            u.status,
+            u.reputation_tier,
+            s.role as staff_role,
+            u.created_at,
+            u.last_seen_at
+        FROM auth.users u
+        LEFT JOIN server.staff s ON u.id = s.user_id
+        ORDER BY u.created_at DESC
+        LIMIT $1 OFFSET $2
+        "#,
+    )
+    .bind(limit)
+    .bind(offset)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(users)
+}
+
+/// Search users by username, email, or display_name.
+pub async fn search_users(
+    pool: &PgPool,
+    query: &str,
+    limit: i64,
+) -> Result<Vec<UserListItem>, AppError> {
+    let pattern = format!("%{}%", query);
+    let users = sqlx::query_as::<_, UserListItem>(
+        r#"
+        SELECT
+            u.id,
+            u.username,
+            u.display_name,
+            u.email,
+            u.status,
+            u.reputation_tier,
+            s.role as staff_role,
+            u.created_at,
+            u.last_seen_at
+        FROM auth.users u
+        LEFT JOIN server.staff s ON u.id = s.user_id
+        WHERE
+            u.username ILIKE $1
+            OR u.email ILIKE $1
+            OR u.display_name ILIKE $1
+        ORDER BY
+            CASE
+                WHEN u.username ILIKE $1 THEN 1
+                WHEN u.display_name ILIKE $1 THEN 2
+                ELSE 3
+            END,
+            u.username
+        LIMIT $2
+        "#,
+    )
+    .bind(&pattern)
+    .bind(limit)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(users)
+}
+
+/// Get full user detail by ID.
+pub async fn get_user_detail(pool: &PgPool, user_id: Uuid) -> Result<UserDetail, AppError> {
+    let user = sqlx::query_as::<_, UserDetail>(
+        r#"
+        SELECT
+            u.id,
+            u.username,
+            u.email,
+            u.display_name,
+            u.bio,
+            u.avatar_url,
+            u.reputation_tier,
+            u.status,
+            u.email_verified,
+            s.role as staff_role,
+            u.created_at,
+            u.updated_at,
+            u.last_seen_at
+        FROM auth.users u
+        LEFT JOIN server.staff s ON u.id = s.user_id
+        WHERE u.id = $1
+        "#,
+    )
+    .bind(user_id)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(user)
+}
+
+/// Update a user's account status.
+pub async fn update_user_status(
+    pool: &PgPool,
+    user_id: Uuid,
+    status: AccountStatus,
+) -> Result<UserDetail, AppError> {
+    // First update the status
+    sqlx::query(
+        r#"
+        UPDATE auth.users
+        SET status = $1, updated_at = now()
+        WHERE id = $2
+        "#,
+    )
+    .bind(status)
+    .bind(user_id)
+    .execute(pool)
+    .await?;
+
+    // Then return the updated user detail
+    get_user_detail(pool, user_id).await
+}
+
+/// Create a new user account with a random temporary password.
+/// Returns (user_id, plaintext_token) - the token should be shown to the server owner.
+pub async fn create_user(pool: &PgPool, data: &NewUserData) -> Result<(Uuid, String), AppError> {
+    // Generate a random token as the temporary password
+    let token = generate_random_token();
+    let password_hash = hash_password(&token)?;
+
+    let user_id = sqlx::query_scalar::<_, Uuid>(
+        r#"
+        INSERT INTO auth.users (username, email, display_name, password_hash, force_pw_reset)
+        VALUES ($1, $2, $3, $4, true)
+        RETURNING id
+        "#,
+    )
+    .bind(&data.username)
+    .bind(&data.email)
+    .bind(&data.display_name)
+    .bind(&password_hash)
+    .fetch_one(pool)
+    .await?;
+
+    Ok((user_id, token))
+}
+
+/// Reset a user's password to a random token.
+/// Returns the plaintext token (to show to the server owner).
+pub async fn reset_user_password(pool: &PgPool, user_id: Uuid) -> Result<String, AppError> {
+    let token = generate_random_token();
+    let password_hash = hash_password(&token)?;
+
+    sqlx::query(
+        r#"
+        UPDATE auth.users
+        SET password_hash = $1, force_pw_reset = true, updated_at = now()
+        WHERE id = $2
+        "#,
+    )
+    .bind(&password_hash)
+    .bind(user_id)
+    .execute(pool)
+    .await?;
+
+    Ok(token)
+}
+
+/// Get all realm memberships for a user.
+pub async fn get_user_realms(
+    pool: &PgPool,
+    user_id: Uuid,
+) -> Result<Vec<UserRealmMembership>, AppError> {
+    let memberships = sqlx::query_as::<_, UserRealmMembership>(
+        r#"
+        SELECT
+            m.realm_id,
+            r.name as realm_name,
+            r.slug as realm_slug,
+            m.role,
+            m.nickname,
+            m.created_at as joined_at,
+            m.last_visited_at
+        FROM realm.memberships m
+        JOIN realm.realms r ON m.realm_id = r.id
+        WHERE m.user_id = $1
+        ORDER BY m.last_visited_at DESC NULLS LAST, m.created_at DESC
+        "#,
+    )
+    .bind(user_id)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(memberships)
+}
+
+/// Add a user to a realm.
+pub async fn add_user_to_realm(
+    pool: &PgPool,
+    user_id: Uuid,
+    realm_id: Uuid,
+    role: RealmRole,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        INSERT INTO realm.memberships (realm_id, user_id, role)
+        VALUES ($1, $2, $3)
+        ON CONFLICT (realm_id, user_id) DO UPDATE SET role = $3
+        "#,
+    )
+    .bind(realm_id)
+    .bind(user_id)
+    .bind(role)
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+/// Remove a user from a realm.
+pub async fn remove_user_from_realm(
+    pool: &PgPool,
+    user_id: Uuid,
+    realm_id: Uuid,
+) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        DELETE FROM realm.memberships
+        WHERE realm_id = $1 AND user_id = $2
+        "#,
+    )
+    .bind(realm_id)
+    .bind(user_id)
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+/// List all realms (for dropdown selection).
+pub async fn list_all_realms(pool: &PgPool) -> Result<Vec<RealmSummary>, AppError> {
+    let realms = sqlx::query_as::<_, RealmSummary>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            tagline,
+            privacy,
+            is_nsfw,
+            thumbnail_path,
+            member_count,
+            current_user_count
+        FROM realm.realms
+        ORDER BY name
+        "#,
+    )
+    .fetch_all(pool)
+    .await?;
+
+    Ok(realms)
+}
+
+/// Create a new user with optional staff role (atomically).
+/// Returns (user_id, plaintext_token) - the token should be shown to the server owner.
+pub async fn create_user_with_staff(
+    pool: &PgPool,
+    req: &CreateUserRequest,
+) -> Result<(Uuid, String), AppError> {
+    // Generate a random token as the temporary password
+    let token = generate_random_token();
+    let password_hash = hash_password(&token)?;
+
+    // Start a transaction if we need to also create staff record
+    if let Some(staff_role) = req.staff_role {
+        let mut tx = pool.begin().await?;
+
+        // Create the user with force_pw_reset = true
+        let user_id = sqlx::query_scalar::<_, Uuid>(
+            r#"
+            INSERT INTO auth.users (username, email, display_name, password_hash, force_pw_reset)
+            VALUES ($1, $2, $3, $4, true)
+            RETURNING id
+            "#,
+        )
+        .bind(&req.username)
+        .bind(&req.email)
+        .bind(&req.display_name)
+        .bind(&password_hash)
+        .fetch_one(&mut *tx)
+        .await?;
+
+        // Create the staff record
+        sqlx::query(
+            r#"
+            INSERT INTO server.staff (user_id, role)
+            VALUES ($1, $2)
+            "#,
+        )
+        .bind(user_id)
+        .bind(staff_role)
+        .execute(&mut *tx)
+        .await?;
+
+        tx.commit().await?;
+
+        Ok((user_id, token))
+    } else {
+        // Just create the user with force_pw_reset = true
+        let user_id = sqlx::query_scalar::<_, Uuid>(
+            r#"
+            INSERT INTO auth.users (username, email, display_name, password_hash, force_pw_reset)
+            VALUES ($1, $2, $3, $4, true)
+            RETURNING id
+            "#,
+        )
+        .bind(&req.username)
+        .bind(&req.email)
+        .bind(&req.display_name)
+        .bind(&password_hash)
+        .fetch_one(pool)
+        .await?;
+
+        Ok((user_id, token))
+    }
+}

crates/chattyness-db/src/queries/props.rs

@@ -0,0 +1,180 @@
+//! Props-related database queries.
+
+use sqlx::PgExecutor;
+use uuid::Uuid;
+
+use crate::models::{CreateServerPropRequest, ServerProp, ServerPropSummary};
+use chattyness_error::AppError;
+
+/// List all server props.
+pub async fn list_server_props<'e>(
+    executor: impl PgExecutor<'e>,
+) -> Result<Vec<ServerPropSummary>, AppError> {
+    let props = sqlx::query_as::<_, ServerPropSummary>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            asset_path,
+            default_layer,
+            is_active,
+            created_at
+        FROM server.props
+        ORDER BY name ASC
+        "#,
+    )
+    .fetch_all(executor)
+    .await?;
+
+    Ok(props)
+}
+
+/// Get a server prop by ID.
+pub async fn get_server_prop_by_id<'e>(
+    executor: impl PgExecutor<'e>,
+    prop_id: Uuid,
+) -> Result<Option<ServerProp>, AppError> {
+    let prop = sqlx::query_as::<_, ServerProp>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            description,
+            tags,
+            asset_path,
+            thumbnail_path,
+            default_layer,
+            default_emotion,
+            default_position,
+            is_unique,
+            is_transferable,
+            is_portable,
+            is_active,
+            available_from,
+            available_until,
+            created_by,
+            created_at,
+            updated_at
+        FROM server.props
+        WHERE id = $1
+        "#,
+    )
+    .bind(prop_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(prop)
+}
+
+/// Check if a prop slug is available.
+pub async fn is_prop_slug_available<'e>(
+    executor: impl PgExecutor<'e>,
+    slug: &str,
+) -> Result<bool, AppError> {
+    let exists: (bool,) =
+        sqlx::query_as(r#"SELECT EXISTS(SELECT 1 FROM server.props WHERE slug = $1)"#)
+            .bind(slug)
+            .fetch_one(executor)
+            .await?;
+
+    Ok(!exists.0)
+}
+
+/// Create a new server prop.
+pub async fn create_server_prop<'e>(
+    executor: impl PgExecutor<'e>,
+    req: &CreateServerPropRequest,
+    asset_path: &str,
+    created_by: Option<Uuid>,
+) -> Result<ServerProp, AppError> {
+    let slug = req.slug_or_generate();
+
+    // Positioning: either content layer OR emotion layer OR neither (all NULL)
+    // Database constraint enforces mutual exclusivity
+    let (default_layer, default_emotion, default_position) =
+        if req.default_layer.is_some() {
+            // Content layer prop
+            (
+                req.default_layer.map(|l| l.to_string()),
+                None,
+                Some(req.default_position.unwrap_or(4)), // Default to center position
+            )
+        } else if req.default_emotion.is_some() {
+            // Emotion layer prop
+            (
+                None,
+                req.default_emotion.map(|e| e.to_string()),
+                Some(req.default_position.unwrap_or(4)), // Default to center position
+            )
+        } else {
+            // Non-avatar prop
+            (None, None, None)
+        };
+
+    let prop = sqlx::query_as::<_, ServerProp>(
+        r#"
+        INSERT INTO server.props (
+            name, slug, description, tags, asset_path,
+            default_layer, default_emotion, default_position,
+            created_by
+        )
+        VALUES (
+            $1, $2, $3, $4, $5,
+            $6::props.avatar_layer, $7::props.emotion_state, $8,
+            $9
+        )
+        RETURNING
+            id,
+            name,
+            slug,
+            description,
+            tags,
+            asset_path,
+            thumbnail_path,
+            default_layer,
+            default_emotion,
+            default_position,
+            is_unique,
+            is_transferable,
+            is_portable,
+            is_active,
+            available_from,
+            available_until,
+            created_by,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(&req.name)
+    .bind(&slug)
+    .bind(&req.description)
+    .bind(&req.tags)
+    .bind(asset_path)
+    .bind(&default_layer)
+    .bind(&default_emotion)
+    .bind(default_position)
+    .bind(created_by)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(prop)
+}
+
+/// Delete a server prop.
+pub async fn delete_server_prop<'e>(
+    executor: impl PgExecutor<'e>,
+    prop_id: Uuid,
+) -> Result<(), AppError> {
+    let result = sqlx::query(r#"DELETE FROM server.props WHERE id = $1"#)
+        .bind(prop_id)
+        .execute(executor)
+        .await?;
+
+    if result.rows_affected() == 0 {
+        return Err(AppError::NotFound("Prop not found".to_string()));
+    }
+
+    Ok(())
+}

crates/chattyness-db/src/queries/realms.rs

@@ -0,0 +1,228 @@
+//! Realm-related database queries.
+
+use sqlx::{PgExecutor, PgPool};
+use uuid::Uuid;
+
+use crate::models::{CreateRealmRequest, Realm, RealmSummary};
+use chattyness_error::AppError;
+
+/// Create a new realm.
+pub async fn create_realm(
+    pool: &PgPool,
+    owner_id: Uuid,
+    req: &CreateRealmRequest,
+) -> Result<Realm, AppError> {
+    let privacy_str = req.privacy.as_str();
+    let realm = sqlx::query_as::<_, Realm>(
+        r#"
+        INSERT INTO realm.realms (
+            name, slug, description, tagline, owner_id,
+            privacy, is_nsfw, max_users, allow_guest_access, theme_color
+        )
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+        RETURNING
+            id,
+            name,
+            slug,
+            description,
+            tagline,
+            owner_id,
+            privacy,
+            is_nsfw,
+            min_reputation_tier,
+            theme_color,
+            banner_image_path,
+            thumbnail_path,
+            max_users,
+            allow_guest_access,
+            default_scene_id,
+            member_count,
+            current_user_count,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(&req.name)
+    .bind(&req.slug)
+    .bind(&req.description)
+    .bind(&req.tagline)
+    .bind(owner_id)
+    .bind(privacy_str)
+    .bind(req.is_nsfw)
+    .bind(req.max_users)
+    .bind(req.allow_guest_access)
+    .bind(&req.theme_color)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(realm)
+}
+
+/// Check if a realm slug is available.
+pub async fn is_slug_available(pool: &PgPool, slug: &str) -> Result<bool, AppError> {
+    let exists: (bool,) = sqlx::query_as(
+        r#"SELECT EXISTS(SELECT 1 FROM realm.realms WHERE slug = $1)"#,
+    )
+    .bind(slug)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(!exists.0)
+}
+
+/// Get a realm by its slug.
+pub async fn get_realm_by_slug<'e>(
+    executor: impl PgExecutor<'e>,
+    slug: &str,
+) -> Result<Option<Realm>, AppError> {
+    let realm = sqlx::query_as::<_, Realm>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            description,
+            tagline,
+            owner_id,
+            privacy,
+            is_nsfw,
+            min_reputation_tier,
+            theme_color,
+            banner_image_path,
+            thumbnail_path,
+            max_users,
+            allow_guest_access,
+            default_scene_id,
+            member_count,
+            current_user_count,
+            created_at,
+            updated_at
+        FROM realm.realms
+        WHERE slug = $1
+        "#,
+    )
+    .bind(slug)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(realm)
+}
+
+/// Get a realm by its ID.
+pub async fn get_realm_by_id(pool: &PgPool, id: Uuid) -> Result<Option<Realm>, AppError> {
+    let realm = sqlx::query_as::<_, Realm>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            description,
+            tagline,
+            owner_id,
+            privacy,
+            is_nsfw,
+            min_reputation_tier,
+            theme_color,
+            banner_image_path,
+            thumbnail_path,
+            max_users,
+            allow_guest_access,
+            default_scene_id,
+            member_count,
+            current_user_count,
+            created_at,
+            updated_at
+        FROM realm.realms
+        WHERE id = $1
+        "#,
+    )
+    .bind(id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(realm)
+}
+
+/// List public realms.
+pub async fn list_public_realms(
+    pool: &PgPool,
+    include_nsfw: bool,
+    limit: i64,
+    offset: i64,
+) -> Result<Vec<RealmSummary>, AppError> {
+    let realms = if include_nsfw {
+        sqlx::query_as::<_, RealmSummary>(
+            r#"
+            SELECT
+                id,
+                name,
+                slug,
+                tagline,
+                privacy,
+                is_nsfw,
+                thumbnail_path,
+                member_count,
+                current_user_count
+            FROM realm.realms
+            WHERE privacy = 'public'
+            ORDER BY current_user_count DESC, member_count DESC
+            LIMIT $1 OFFSET $2
+            "#,
+        )
+        .bind(limit)
+        .bind(offset)
+        .fetch_all(pool)
+        .await?
+    } else {
+        sqlx::query_as::<_, RealmSummary>(
+            r#"
+            SELECT
+                id,
+                name,
+                slug,
+                tagline,
+                privacy,
+                is_nsfw,
+                thumbnail_path,
+                member_count,
+                current_user_count
+            FROM realm.realms
+            WHERE privacy = 'public' AND is_nsfw = false
+            ORDER BY current_user_count DESC, member_count DESC
+            LIMIT $1 OFFSET $2
+            "#,
+        )
+        .bind(limit)
+        .bind(offset)
+        .fetch_all(pool)
+        .await?
+    };
+
+    Ok(realms)
+}
+
+/// Get realms owned by a user.
+pub async fn get_user_realms(pool: &PgPool, user_id: Uuid) -> Result<Vec<RealmSummary>, AppError> {
+    let realms = sqlx::query_as::<_, RealmSummary>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            tagline,
+            privacy,
+            is_nsfw,
+            thumbnail_path,
+            member_count,
+            current_user_count
+        FROM realm.realms
+        WHERE owner_id = $1
+        ORDER BY created_at DESC
+        "#,
+    )
+    .bind(user_id)
+    .fetch_all(pool)
+    .await?;
+
+    Ok(realms)
+}

crates/chattyness-db/src/queries/scenes.rs

@@ -0,0 +1,442 @@
+//! Scene-related database queries.
+
+use sqlx::PgExecutor;
+use uuid::Uuid;
+
+use crate::models::{CreateSceneRequest, Scene, SceneSummary, UpdateSceneRequest};
+use chattyness_error::AppError;
+
+/// List all scenes for a realm.
+pub async fn list_scenes_for_realm<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+) -> Result<Vec<SceneSummary>, AppError> {
+    let scenes = sqlx::query_as::<_, SceneSummary>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            background_color,
+            background_image_path
+        FROM realm.scenes
+        WHERE realm_id = $1
+        ORDER BY sort_order ASC, name ASC
+        "#,
+    )
+    .bind(realm_id)
+    .fetch_all(executor)
+    .await?;
+
+    Ok(scenes)
+}
+
+/// Get a scene by its ID.
+pub async fn get_scene_by_id<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+) -> Result<Option<Scene>, AppError> {
+    let scene = sqlx::query_as::<_, Scene>(
+        r#"
+        SELECT
+            id,
+            realm_id,
+            name,
+            slug,
+            description,
+            background_image_path,
+            background_color,
+            ST_AsText(bounds) as bounds_wkt,
+            dimension_mode,
+            ambient_audio_id,
+            ambient_volume,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            created_at,
+            updated_at
+        FROM realm.scenes
+        WHERE id = $1
+        "#,
+    )
+    .bind(scene_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(scene)
+}
+
+/// Get a scene by realm ID and slug.
+pub async fn get_scene_by_slug<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+    slug: &str,
+) -> Result<Option<Scene>, AppError> {
+    let scene = sqlx::query_as::<_, Scene>(
+        r#"
+        SELECT
+            id,
+            realm_id,
+            name,
+            slug,
+            description,
+            background_image_path,
+            background_color,
+            ST_AsText(bounds) as bounds_wkt,
+            dimension_mode,
+            ambient_audio_id,
+            ambient_volume,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            created_at,
+            updated_at
+        FROM realm.scenes
+        WHERE realm_id = $1 AND slug = $2
+        "#,
+    )
+    .bind(realm_id)
+    .bind(slug)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(scene)
+}
+
+/// Check if a scene slug is available within a realm.
+pub async fn is_scene_slug_available<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+    slug: &str,
+) -> Result<bool, AppError> {
+    let exists: (bool,) =
+        sqlx::query_as(r#"SELECT EXISTS(SELECT 1 FROM realm.scenes WHERE realm_id = $1 AND slug = $2)"#)
+            .bind(realm_id)
+            .bind(slug)
+            .fetch_one(executor)
+            .await?;
+
+    Ok(!exists.0)
+}
+
+/// Create a new scene.
+pub async fn create_scene<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+    req: &CreateSceneRequest,
+) -> Result<Scene, AppError> {
+    let bounds_wkt = req
+        .bounds_wkt
+        .as_deref()
+        .unwrap_or("POLYGON((0 0, 800 0, 800 600, 0 600, 0 0))");
+    let dimension_mode = req.dimension_mode.unwrap_or_default().to_string();
+    let sort_order = req.sort_order.unwrap_or(0);
+    let is_entry_point = req.is_entry_point.unwrap_or(false);
+    let is_hidden = req.is_hidden.unwrap_or(false);
+
+    let scene = sqlx::query_as::<_, Scene>(
+        r#"
+        INSERT INTO realm.scenes (
+            realm_id, name, slug, description,
+            background_image_path, background_color,
+            bounds, dimension_mode,
+            sort_order, is_entry_point, is_hidden
+        )
+        VALUES (
+            $1, $2, $3, $4,
+            $5, $6,
+            ST_GeomFromText($7, 0), $8::realm.dimension_mode,
+            $9, $10, $11
+        )
+        RETURNING
+            id,
+            realm_id,
+            name,
+            slug,
+            description,
+            background_image_path,
+            background_color,
+            ST_AsText(bounds) as bounds_wkt,
+            dimension_mode,
+            ambient_audio_id,
+            ambient_volume,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(realm_id)
+    .bind(&req.name)
+    .bind(&req.slug)
+    .bind(&req.description)
+    .bind(&req.background_image_path)
+    .bind(&req.background_color)
+    .bind(bounds_wkt)
+    .bind(&dimension_mode)
+    .bind(sort_order)
+    .bind(is_entry_point)
+    .bind(is_hidden)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(scene)
+}
+
+/// Create a new scene with a specific ID.
+///
+/// This is used when we need to know the scene ID before creating it
+/// (e.g., for storing background images in the correct path).
+pub async fn create_scene_with_id<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+    realm_id: Uuid,
+    req: &CreateSceneRequest,
+) -> Result<Scene, AppError> {
+    let bounds_wkt = req
+        .bounds_wkt
+        .as_deref()
+        .unwrap_or("POLYGON((0 0, 800 0, 800 600, 0 600, 0 0))");
+    let dimension_mode = req.dimension_mode.unwrap_or_default().to_string();
+    let sort_order = req.sort_order.unwrap_or(0);
+    let is_entry_point = req.is_entry_point.unwrap_or(false);
+    let is_hidden = req.is_hidden.unwrap_or(false);
+
+    let scene = sqlx::query_as::<_, Scene>(
+        r#"
+        INSERT INTO realm.scenes (
+            id, realm_id, name, slug, description,
+            background_image_path, background_color,
+            bounds, dimension_mode,
+            sort_order, is_entry_point, is_hidden
+        )
+        VALUES (
+            $1, $2, $3, $4, $5,
+            $6, $7,
+            ST_GeomFromText($8, 0), $9::realm.dimension_mode,
+            $10, $11, $12
+        )
+        RETURNING
+            id,
+            realm_id,
+            name,
+            slug,
+            description,
+            background_image_path,
+            background_color,
+            ST_AsText(bounds) as bounds_wkt,
+            dimension_mode,
+            ambient_audio_id,
+            ambient_volume,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(scene_id)
+    .bind(realm_id)
+    .bind(&req.name)
+    .bind(&req.slug)
+    .bind(&req.description)
+    .bind(&req.background_image_path)
+    .bind(&req.background_color)
+    .bind(bounds_wkt)
+    .bind(&dimension_mode)
+    .bind(sort_order)
+    .bind(is_entry_point)
+    .bind(is_hidden)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(scene)
+}
+
+/// Update a scene.
+pub async fn update_scene<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+    req: &UpdateSceneRequest,
+) -> Result<Scene, AppError> {
+    // Build dynamic update query
+    let mut set_clauses = Vec::new();
+    let mut param_idx = 2; // $1 is scene_id
+
+    if req.name.is_some() {
+        set_clauses.push(format!("name = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.description.is_some() {
+        set_clauses.push(format!("description = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.background_image_path.is_some() {
+        set_clauses.push(format!("background_image_path = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.background_color.is_some() {
+        set_clauses.push(format!("background_color = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.bounds_wkt.is_some() {
+        set_clauses.push(format!("bounds = ST_GeomFromText(${}, 0)", param_idx));
+        param_idx += 1;
+    }
+    if req.dimension_mode.is_some() {
+        set_clauses.push(format!("dimension_mode = ${}::realm.dimension_mode", param_idx));
+        param_idx += 1;
+    }
+    if req.sort_order.is_some() {
+        set_clauses.push(format!("sort_order = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.is_entry_point.is_some() {
+        set_clauses.push(format!("is_entry_point = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.is_hidden.is_some() {
+        set_clauses.push(format!("is_hidden = ${}", param_idx));
+    }
+
+    // If no updates, just return the current scene
+    let query = if set_clauses.is_empty() {
+        r#"SELECT id, realm_id, name, slug, description, background_image_path,
+                  background_color, ST_AsText(bounds) as bounds_wkt, dimension_mode,
+                  ambient_audio_id, ambient_volume, sort_order, is_entry_point,
+                  is_hidden, created_at, updated_at
+           FROM realm.scenes WHERE id = $1"#.to_string()
+    } else {
+        set_clauses.push("updated_at = now()".to_string());
+        format!(
+            r#"UPDATE realm.scenes SET {}
+               WHERE id = $1
+               RETURNING id, realm_id, name, slug, description, background_image_path,
+                         background_color, ST_AsText(bounds) as bounds_wkt, dimension_mode,
+                         ambient_audio_id, ambient_volume, sort_order, is_entry_point,
+                         is_hidden, created_at, updated_at"#,
+            set_clauses.join(", ")
+        )
+    };
+
+    let mut query_builder = sqlx::query_as::<_, Scene>(&query).bind(scene_id);
+
+    if let Some(ref name) = req.name {
+        query_builder = query_builder.bind(name);
+    }
+    if let Some(ref description) = req.description {
+        query_builder = query_builder.bind(description);
+    }
+    if let Some(ref background_image_path) = req.background_image_path {
+        query_builder = query_builder.bind(background_image_path);
+    }
+    if let Some(ref background_color) = req.background_color {
+        query_builder = query_builder.bind(background_color);
+    }
+    if let Some(ref bounds_wkt) = req.bounds_wkt {
+        query_builder = query_builder.bind(bounds_wkt);
+    }
+    if let Some(ref dimension_mode) = req.dimension_mode {
+        query_builder = query_builder.bind(dimension_mode.to_string());
+    }
+    if let Some(sort_order) = req.sort_order {
+        query_builder = query_builder.bind(sort_order);
+    }
+    if let Some(is_entry_point) = req.is_entry_point {
+        query_builder = query_builder.bind(is_entry_point);
+    }
+    if let Some(is_hidden) = req.is_hidden {
+        query_builder = query_builder.bind(is_hidden);
+    }
+
+    let scene = query_builder
+        .fetch_optional(executor)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Scene not found".to_string()))?;
+
+    Ok(scene)
+}
+
+/// Delete a scene.
+pub async fn delete_scene<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+) -> Result<(), AppError> {
+    let result = sqlx::query(r#"DELETE FROM realm.scenes WHERE id = $1"#)
+        .bind(scene_id)
+        .execute(executor)
+        .await?;
+
+    if result.rows_affected() == 0 {
+        return Err(AppError::NotFound("Scene not found".to_string()));
+    }
+
+    Ok(())
+}
+
+/// Get the next sort order for a new scene in a realm.
+pub async fn get_next_sort_order<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+) -> Result<i32, AppError> {
+    let result: (Option<i32>,) = sqlx::query_as(
+        r#"SELECT MAX(sort_order) FROM realm.scenes WHERE realm_id = $1"#,
+    )
+    .bind(realm_id)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(result.0.unwrap_or(0) + 1)
+}
+
+/// Get the entry scene for a realm.
+///
+/// Returns the scene in this priority order:
+/// 1. The scene specified by `default_scene_id` on the realm (if provided and exists)
+/// 2. The first scene marked as `is_entry_point`
+/// 3. The first scene by sort_order
+pub async fn get_entry_scene_for_realm<'e>(
+    executor: impl PgExecutor<'e>,
+    realm_id: Uuid,
+    default_scene_id: Option<Uuid>,
+) -> Result<Option<Scene>, AppError> {
+    // Use a single query that handles the priority in SQL
+    let scene = sqlx::query_as::<_, Scene>(
+        r#"
+        SELECT
+            id,
+            realm_id,
+            name,
+            slug,
+            description,
+            background_image_path,
+            background_color,
+            ST_AsText(bounds) as bounds_wkt,
+            dimension_mode,
+            ambient_audio_id,
+            ambient_volume,
+            sort_order,
+            is_entry_point,
+            is_hidden,
+            created_at,
+            updated_at
+        FROM realm.scenes
+        WHERE realm_id = $1 AND is_hidden = false
+        ORDER BY
+            CASE WHEN id = $2 THEN 0 ELSE 1 END,
+            is_entry_point DESC,
+            sort_order ASC
+        LIMIT 1
+        "#,
+    )
+    .bind(realm_id)
+    .bind(default_scene_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(scene)
+}

crates/chattyness-db/src/queries/spots.rs

@@ -0,0 +1,324 @@
+//! Spot-related database queries.
+
+use sqlx::PgExecutor;
+use uuid::Uuid;
+
+use crate::models::{CreateSpotRequest, Spot, SpotSummary, UpdateSpotRequest};
+use chattyness_error::AppError;
+
+/// List all spots for a scene.
+pub async fn list_spots_for_scene<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+) -> Result<Vec<SpotSummary>, AppError> {
+    let spots = sqlx::query_as::<_, SpotSummary>(
+        r#"
+        SELECT
+            id,
+            name,
+            slug,
+            spot_type,
+            ST_AsText(region) as region_wkt,
+            sort_order,
+            is_visible,
+            is_active
+        FROM realm.spots
+        WHERE scene_id = $1
+        ORDER BY sort_order ASC, name ASC NULLS LAST
+        "#,
+    )
+    .bind(scene_id)
+    .fetch_all(executor)
+    .await?;
+
+    Ok(spots)
+}
+
+/// Get a spot by its ID.
+pub async fn get_spot_by_id<'e>(
+    executor: impl PgExecutor<'e>,
+    spot_id: Uuid,
+) -> Result<Option<Spot>, AppError> {
+    let spot = sqlx::query_as::<_, Spot>(
+        r#"
+        SELECT
+            id,
+            scene_id,
+            name,
+            slug,
+            ST_AsText(region) as region_wkt,
+            spot_type,
+            destination_scene_id,
+            ST_AsText(destination_position) as destination_position_wkt,
+            current_state,
+            sort_order,
+            is_visible,
+            is_active,
+            created_at,
+            updated_at
+        FROM realm.spots
+        WHERE id = $1
+        "#,
+    )
+    .bind(spot_id)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(spot)
+}
+
+/// Get a spot by scene ID and slug.
+pub async fn get_spot_by_slug<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+    slug: &str,
+) -> Result<Option<Spot>, AppError> {
+    let spot = sqlx::query_as::<_, Spot>(
+        r#"
+        SELECT
+            id,
+            scene_id,
+            name,
+            slug,
+            ST_AsText(region) as region_wkt,
+            spot_type,
+            destination_scene_id,
+            ST_AsText(destination_position) as destination_position_wkt,
+            current_state,
+            sort_order,
+            is_visible,
+            is_active,
+            created_at,
+            updated_at
+        FROM realm.spots
+        WHERE scene_id = $1 AND slug = $2
+        "#,
+    )
+    .bind(scene_id)
+    .bind(slug)
+    .fetch_optional(executor)
+    .await?;
+
+    Ok(spot)
+}
+
+/// Check if a spot slug is available within a scene.
+pub async fn is_spot_slug_available<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+    slug: &str,
+) -> Result<bool, AppError> {
+    let exists: (bool,) =
+        sqlx::query_as(r#"SELECT EXISTS(SELECT 1 FROM realm.spots WHERE scene_id = $1 AND slug = $2)"#)
+            .bind(scene_id)
+            .bind(slug)
+            .fetch_one(executor)
+            .await?;
+
+    Ok(!exists.0)
+}
+
+/// Create a new spot.
+pub async fn create_spot<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+    req: &CreateSpotRequest,
+) -> Result<Spot, AppError> {
+    let spot_type = req.spot_type.unwrap_or_default().to_string();
+    let sort_order = req.sort_order.unwrap_or(0);
+    let is_visible = req.is_visible.unwrap_or(true);
+    let is_active = req.is_active.unwrap_or(true);
+
+    let spot = sqlx::query_as::<_, Spot>(
+        r#"
+        INSERT INTO realm.spots (
+            scene_id, name, slug,
+            region, spot_type,
+            destination_scene_id, destination_position,
+            sort_order, is_visible, is_active
+        )
+        VALUES (
+            $1, $2, $3,
+            ST_GeomFromText($4, 0), $5::realm.spot_type,
+            $6, CASE WHEN $7 IS NOT NULL THEN ST_GeomFromText($7, 0) ELSE NULL END,
+            $8, $9, $10
+        )
+        RETURNING
+            id,
+            scene_id,
+            name,
+            slug,
+            ST_AsText(region) as region_wkt,
+            spot_type,
+            destination_scene_id,
+            ST_AsText(destination_position) as destination_position_wkt,
+            current_state,
+            sort_order,
+            is_visible,
+            is_active,
+            created_at,
+            updated_at
+        "#,
+    )
+    .bind(scene_id)
+    .bind(&req.name)
+    .bind(&req.slug)
+    .bind(&req.region_wkt)
+    .bind(&spot_type)
+    .bind(req.destination_scene_id)
+    .bind(&req.destination_position_wkt)
+    .bind(sort_order)
+    .bind(is_visible)
+    .bind(is_active)
+    .fetch_one(executor)
+    .await?;
+
+    Ok(spot)
+}
+
+/// Update a spot.
+pub async fn update_spot<'e>(
+    executor: impl PgExecutor<'e>,
+    spot_id: Uuid,
+    req: &UpdateSpotRequest,
+) -> Result<Spot, AppError> {
+    // Build dynamic update query
+    let mut set_clauses = Vec::new();
+    let mut param_idx = 2; // $1 is spot_id
+
+    if req.name.is_some() {
+        set_clauses.push(format!("name = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.slug.is_some() {
+        set_clauses.push(format!("slug = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.region_wkt.is_some() {
+        set_clauses.push(format!("region = ST_GeomFromText(${}, 0)", param_idx));
+        param_idx += 1;
+    }
+    if req.spot_type.is_some() {
+        set_clauses.push(format!("spot_type = ${}::realm.spot_type", param_idx));
+        param_idx += 1;
+    }
+    if req.destination_scene_id.is_some() {
+        set_clauses.push(format!("destination_scene_id = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.destination_position_wkt.is_some() {
+        set_clauses.push(format!(
+            "destination_position = CASE WHEN ${} IS NOT NULL THEN ST_GeomFromText(${}, 0) ELSE NULL END",
+            param_idx, param_idx
+        ));
+        param_idx += 1;
+    }
+    if req.current_state.is_some() {
+        set_clauses.push(format!("current_state = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.sort_order.is_some() {
+        set_clauses.push(format!("sort_order = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.is_visible.is_some() {
+        set_clauses.push(format!("is_visible = ${}", param_idx));
+        param_idx += 1;
+    }
+    if req.is_active.is_some() {
+        set_clauses.push(format!("is_active = ${}", param_idx));
+    }
+
+    // If no updates, just return the current spot via SELECT
+    let query = if set_clauses.is_empty() {
+        r#"SELECT id, scene_id, name, slug, ST_AsText(region) as region_wkt,
+                  spot_type, destination_scene_id,
+                  ST_AsText(destination_position) as destination_position_wkt,
+                  current_state, sort_order, is_visible, is_active,
+                  created_at, updated_at
+           FROM realm.spots WHERE id = $1"#.to_string()
+    } else {
+        set_clauses.push("updated_at = now()".to_string());
+        format!(
+            r#"UPDATE realm.spots SET {}
+               WHERE id = $1
+               RETURNING id, scene_id, name, slug, ST_AsText(region) as region_wkt,
+                         spot_type, destination_scene_id,
+                         ST_AsText(destination_position) as destination_position_wkt,
+                         current_state, sort_order, is_visible, is_active,
+                         created_at, updated_at"#,
+            set_clauses.join(", ")
+        )
+    };
+
+    let mut query_builder = sqlx::query_as::<_, Spot>(&query).bind(spot_id);
+
+    if let Some(ref name) = req.name {
+        query_builder = query_builder.bind(name);
+    }
+    if let Some(ref slug) = req.slug {
+        query_builder = query_builder.bind(slug);
+    }
+    if let Some(ref region_wkt) = req.region_wkt {
+        query_builder = query_builder.bind(region_wkt);
+    }
+    if let Some(ref spot_type) = req.spot_type {
+        query_builder = query_builder.bind(spot_type.to_string());
+    }
+    if let Some(destination_scene_id) = req.destination_scene_id {
+        query_builder = query_builder.bind(destination_scene_id);
+    }
+    if let Some(ref destination_position_wkt) = req.destination_position_wkt {
+        query_builder = query_builder.bind(destination_position_wkt);
+    }
+    if let Some(current_state) = req.current_state {
+        query_builder = query_builder.bind(current_state);
+    }
+    if let Some(sort_order) = req.sort_order {
+        query_builder = query_builder.bind(sort_order);
+    }
+    if let Some(is_visible) = req.is_visible {
+        query_builder = query_builder.bind(is_visible);
+    }
+    if let Some(is_active) = req.is_active {
+        query_builder = query_builder.bind(is_active);
+    }
+
+    let spot = query_builder
+        .fetch_optional(executor)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Spot not found".to_string()))?;
+
+    Ok(spot)
+}
+
+/// Delete a spot.
+pub async fn delete_spot<'e>(
+    executor: impl PgExecutor<'e>,
+    spot_id: Uuid,
+) -> Result<(), AppError> {
+    let result = sqlx::query(r#"DELETE FROM realm.spots WHERE id = $1"#)
+        .bind(spot_id)
+        .execute(executor)
+        .await?;
+
+    if result.rows_affected() == 0 {
+        return Err(AppError::NotFound("Spot not found".to_string()));
+    }
+
+    Ok(())
+}
+
+/// Get the next sort order for a new spot in a scene.
+pub async fn get_next_sort_order<'e>(
+    executor: impl PgExecutor<'e>,
+    scene_id: Uuid,
+) -> Result<i32, AppError> {
+    let result: (Option<i32>,) =
+        sqlx::query_as(r#"SELECT MAX(sort_order) FROM realm.spots WHERE scene_id = $1"#)
+            .bind(scene_id)
+            .fetch_one(executor)
+            .await?;
+
+    Ok(result.0.unwrap_or(0) + 1)
+}

crates/chattyness-db/src/queries/users.rs

@@ -0,0 +1,493 @@
+//! User-related database queries.
+
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use crate::models::{StaffMember, User, UserWithAuth};
+use chattyness_error::AppError;
+
+/// Get a user by their ID.
+pub async fn get_user_by_id(pool: &PgPool, id: Uuid) -> Result<Option<User>, AppError> {
+    let user = sqlx::query_as::<_, User>(
+        r#"
+        SELECT
+            id,
+            username,
+            email,
+            display_name,
+            bio,
+            avatar_url,
+            reputation_tier,
+            status,
+            email_verified,
+            created_at,
+            updated_at
+        FROM auth.users
+        WHERE id = $1 AND status = 'active'
+        "#,
+    )
+    .bind(id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(user)
+}
+
+/// Get a user by their username.
+pub async fn get_user_by_username(pool: &PgPool, username: &str) -> Result<Option<User>, AppError> {
+    let user = sqlx::query_as::<_, User>(
+        r#"
+        SELECT
+            id,
+            username,
+            email,
+            display_name,
+            bio,
+            avatar_url,
+            reputation_tier,
+            status,
+            email_verified,
+            created_at,
+            updated_at
+        FROM auth.users
+        WHERE username = $1 AND status = 'active'
+        "#,
+    )
+    .bind(username)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(user)
+}
+
+/// Get a user by their email.
+pub async fn get_user_by_email(pool: &PgPool, email: &str) -> Result<Option<User>, AppError> {
+    let user = sqlx::query_as::<_, User>(
+        r#"
+        SELECT
+            id,
+            username,
+            email,
+            display_name,
+            bio,
+            avatar_url,
+            reputation_tier,
+            status,
+            email_verified,
+            created_at,
+            updated_at
+        FROM auth.users
+        WHERE lower(email) = lower($1) AND status = 'active'
+        "#,
+    )
+    .bind(email)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(user)
+}
+
+/// Row type for password verification query.
+#[derive(sqlx::FromRow)]
+struct PasswordRow {
+    id: Uuid,
+    password_hash: Option<String>,
+}
+
+/// Verify a user's password and return the user if valid.
+pub async fn verify_password(
+    pool: &PgPool,
+    username: &str,
+    password: &str,
+) -> Result<Option<User>, AppError> {
+    // First get the password hash
+    let row = sqlx::query_as::<_, PasswordRow>(
+        r#"
+        SELECT id, password_hash
+        FROM auth.users
+        WHERE username = $1 AND status = 'active' AND auth_provider = 'local'
+        "#,
+    )
+    .bind(username)
+    .fetch_optional(pool)
+    .await?;
+
+    let Some(row) = row else {
+        return Ok(None);
+    };
+
+    let Some(ref password_hash) = row.password_hash else {
+        return Ok(None);
+    };
+
+    // Verify the password using argon2
+    use argon2::{Argon2, PasswordHash, PasswordVerifier};
+    let parsed_hash = PasswordHash::new(password_hash)
+        .map_err(|e| AppError::Internal(format!("Invalid password hash: {}", e)))?;
+
+    if Argon2::default()
+        .verify_password(password.as_bytes(), &parsed_hash)
+        .is_err()
+    {
+        return Ok(None);
+    }
+
+    // Password is valid, fetch the full user
+    get_user_by_id(pool, row.id).await
+}
+
+/// Create a new user session.
+pub async fn create_session(
+    pool: &PgPool,
+    user_id: Uuid,
+    token_hash: &str,
+    user_agent: Option<&str>,
+    ip_address: Option<std::net::IpAddr>,
+    expires_at: chrono::DateTime<chrono::Utc>,
+) -> Result<Uuid, AppError> {
+    let ip_str = ip_address.map(|ip| ip.to_string());
+
+    let session_id: (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO auth.sessions (user_id, token_hash, user_agent, ip_address, expires_at)
+        VALUES ($1, $2, $3, $4::inet, $5)
+        RETURNING id
+        "#,
+    )
+    .bind(user_id)
+    .bind(token_hash)
+    .bind(user_agent)
+    .bind(ip_str)
+    .bind(expires_at)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(session_id.0)
+}
+
+/// Get a user by their session token hash.
+pub async fn get_user_by_session(
+    pool: &PgPool,
+    token_hash: &str,
+) -> Result<Option<User>, AppError> {
+    let user = sqlx::query_as::<_, User>(
+        r#"
+        SELECT
+            u.id,
+            u.username,
+            u.email,
+            u.display_name,
+            u.bio,
+            u.avatar_url,
+            u.reputation_tier,
+            u.status,
+            u.email_verified,
+            u.created_at,
+            u.updated_at
+        FROM auth.users u
+        JOIN auth.sessions s ON u.id = s.user_id
+        WHERE s.token_hash = $1
+          AND s.expires_at > now()
+          AND u.status = 'active'
+        "#,
+    )
+    .bind(token_hash)
+    .fetch_optional(pool)
+    .await?;
+
+    // Update last activity
+    if user.is_some() {
+        sqlx::query("UPDATE auth.sessions SET last_activity_at = now() WHERE token_hash = $1")
+            .bind(token_hash)
+            .execute(pool)
+            .await?;
+    }
+
+    Ok(user)
+}
+
+/// Delete a session by token hash.
+pub async fn delete_session(pool: &PgPool, token_hash: &str) -> Result<(), AppError> {
+    sqlx::query("DELETE FROM auth.sessions WHERE token_hash = $1")
+        .bind(token_hash)
+        .execute(pool)
+        .await?;
+    Ok(())
+}
+
+/// Update a user's last seen timestamp.
+pub async fn update_last_seen(pool: &PgPool, user_id: Uuid) -> Result<(), AppError> {
+    sqlx::query("UPDATE auth.users SET last_seen_at = now() WHERE id = $1")
+        .bind(user_id)
+        .execute(pool)
+        .await?;
+    Ok(())
+}
+
+/// Get a user with auth fields for login verification.
+pub async fn get_user_with_auth(
+    pool: &PgPool,
+    username: &str,
+) -> Result<Option<UserWithAuth>, AppError> {
+    let user = sqlx::query_as::<_, UserWithAuth>(
+        r#"
+        SELECT
+            id,
+            username,
+            email,
+            display_name,
+            avatar_url,
+            status,
+            force_pw_reset,
+            password_hash
+        FROM auth.users
+        WHERE username = $1 AND auth_provider = 'local'
+        "#,
+    )
+    .bind(username)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(user)
+}
+
+/// Verify password and return user with auth info.
+pub async fn verify_password_with_reset_flag(
+    pool: &PgPool,
+    username: &str,
+    password: &str,
+) -> Result<Option<UserWithAuth>, AppError> {
+    let user = get_user_with_auth(pool, username).await?;
+
+    let Some(user) = user else {
+        return Ok(None);
+    };
+
+    let Some(ref password_hash) = user.password_hash else {
+        return Ok(None);
+    };
+
+    // Verify the password using argon2
+    use argon2::{Argon2, PasswordHash, PasswordVerifier};
+    let parsed_hash = PasswordHash::new(password_hash)
+        .map_err(|e| AppError::Internal(format!("Invalid password hash: {}", e)))?;
+
+    if Argon2::default()
+        .verify_password(password.as_bytes(), &parsed_hash)
+        .is_err()
+    {
+        return Ok(None);
+    }
+
+    Ok(Some(user))
+}
+
+/// Update a user's password.
+pub async fn update_password(
+    pool: &PgPool,
+    user_id: Uuid,
+    new_password: &str,
+) -> Result<(), AppError> {
+    use argon2::{
+        password_hash::{rand_core::OsRng, SaltString},
+        Argon2, PasswordHasher,
+    };
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+        .hash_password(new_password.as_bytes(), &salt)
+        .map_err(|e| AppError::Internal(format!("Failed to hash password: {}", e)))?
+        .to_string();
+
+    sqlx::query(
+        r#"
+        UPDATE auth.users
+        SET password_hash = $1, force_pw_reset = false, updated_at = now()
+        WHERE id = $2
+        "#,
+    )
+    .bind(&password_hash)
+    .bind(user_id)
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+/// Update a user's password using a connection (for RLS support).
+pub async fn update_password_conn(
+    conn: &mut sqlx::PgConnection,
+    user_id: Uuid,
+    new_password: &str,
+) -> Result<(), AppError> {
+    use argon2::{
+        password_hash::{rand_core::OsRng, SaltString},
+        Argon2, PasswordHasher,
+    };
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+        .hash_password(new_password.as_bytes(), &salt)
+        .map_err(|e| AppError::Internal(format!("Failed to hash password: {}", e)))?
+        .to_string();
+
+    sqlx::query(
+        r#"
+        UPDATE auth.users
+        SET password_hash = $1, force_pw_reset = false, updated_at = now()
+        WHERE id = $2
+        "#,
+    )
+    .bind(&password_hash)
+    .bind(user_id)
+    .execute(conn)
+    .await?;
+
+    Ok(())
+}
+
+/// Clear the force_pw_reset flag for a user.
+pub async fn clear_force_pw_reset(pool: &PgPool, user_id: Uuid) -> Result<(), AppError> {
+    sqlx::query(
+        r#"
+        UPDATE auth.users
+        SET force_pw_reset = false, updated_at = now()
+        WHERE id = $1
+        "#,
+    )
+    .bind(user_id)
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+/// Check if a username already exists.
+pub async fn username_exists(pool: &PgPool, username: &str) -> Result<bool, AppError> {
+    let (exists,): (bool,) = sqlx::query_as(
+        r#"
+        SELECT EXISTS(SELECT 1 FROM auth.users WHERE username = $1)
+        "#,
+    )
+    .bind(username)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(exists)
+}
+
+/// Check if an email already exists.
+pub async fn email_exists(pool: &PgPool, email: &str) -> Result<bool, AppError> {
+    let (exists,): (bool,) = sqlx::query_as(
+        r#"
+        SELECT EXISTS(SELECT 1 FROM auth.users WHERE lower(email) = lower($1))
+        "#,
+    )
+    .bind(email)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(exists)
+}
+
+/// Create a new user with hashed password.
+pub async fn create_user(
+    pool: &PgPool,
+    username: &str,
+    email: Option<&str>,
+    display_name: &str,
+    password: &str,
+) -> Result<Uuid, AppError> {
+    use argon2::{
+        password_hash::{rand_core::OsRng, SaltString},
+        Argon2, PasswordHasher,
+    };
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+        .hash_password(password.as_bytes(), &salt)
+        .map_err(|e| AppError::Internal(format!("Failed to hash password: {}", e)))?
+        .to_string();
+
+    let (user_id,): (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO auth.users (username, email, password_hash, display_name, auth_provider, status)
+        VALUES ($1, $2, $3, $4, 'local', 'active')
+        RETURNING id
+        "#,
+    )
+    .bind(username)
+    .bind(email)
+    .bind(&password_hash)
+    .bind(display_name)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(user_id)
+}
+
+/// Create a new user using a connection (for RLS support).
+pub async fn create_user_conn(
+    conn: &mut sqlx::PgConnection,
+    username: &str,
+    email: Option<&str>,
+    display_name: &str,
+    password: &str,
+) -> Result<Uuid, AppError> {
+    use argon2::{
+        password_hash::{rand_core::OsRng, SaltString},
+        Argon2, PasswordHasher,
+    };
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+        .hash_password(password.as_bytes(), &salt)
+        .map_err(|e| AppError::Internal(format!("Failed to hash password: {}", e)))?
+        .to_string();
+
+    let (user_id,): (Uuid,) = sqlx::query_as(
+        r#"
+        INSERT INTO auth.users (username, email, password_hash, display_name, auth_provider, status)
+        VALUES ($1, $2, $3, $4, 'local', 'active')
+        RETURNING id
+        "#,
+    )
+    .bind(username)
+    .bind(email)
+    .bind(&password_hash)
+    .bind(display_name)
+    .fetch_one(conn)
+    .await?;
+
+    Ok(user_id)
+}
+
+/// Get a staff member by their user ID.
+///
+/// Returns the staff member with their user info joined.
+pub async fn get_staff_member(pool: &PgPool, user_id: Uuid) -> Result<Option<StaffMember>, AppError> {
+    let staff = sqlx::query_as::<_, StaffMember>(
+        r#"
+        SELECT
+            s.user_id,
+            u.username,
+            u.display_name,
+            u.email,
+            s.role,
+            s.appointed_by,
+            s.appointed_at
+        FROM server.staff s
+        JOIN auth.users u ON s.user_id = u.id
+        WHERE s.user_id = $1 AND u.status = 'active'
+        "#,
+    )
+    .bind(user_id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(staff)
+}

crates/chattyness-db/src/ws_messages.rs

@@ -0,0 +1,92 @@
+//! WebSocket message protocol for channel presence.
+//!
+//! Shared message types used by both server and WASM client.
+
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+use crate::models::{ChannelMemberInfo, ChannelMemberWithAvatar};
+
+/// Client-to-server WebSocket messages.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type", rename_all = "snake_case")]
+pub enum ClientMessage {
+    /// Update position in the channel.
+    UpdatePosition {
+        /// X coordinate in scene space.
+        x: f64,
+        /// Y coordinate in scene space.
+        y: f64,
+    },
+
+    /// Update emotion (0-9).
+    UpdateEmotion {
+        /// Emotion slot (0-9, keyboard: e0-e9).
+        emotion: u8,
+    },
+
+    /// Ping to keep connection alive.
+    Ping,
+}
+
+/// Server-to-client WebSocket messages.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type", rename_all = "snake_case")]
+pub enum ServerMessage {
+    /// Welcome message with initial state after connection.
+    Welcome {
+        /// This user's member info.
+        member: ChannelMemberInfo,
+        /// All current members with avatars.
+        members: Vec<ChannelMemberWithAvatar>,
+    },
+
+    /// A member joined the channel.
+    MemberJoined {
+        /// The member that joined.
+        member: ChannelMemberWithAvatar,
+    },
+
+    /// A member left the channel.
+    MemberLeft {
+        /// User ID (if authenticated user).
+        user_id: Option<Uuid>,
+        /// Guest session ID (if guest).
+        guest_session_id: Option<Uuid>,
+    },
+
+    /// A member updated their position.
+    PositionUpdated {
+        /// User ID (if authenticated user).
+        user_id: Option<Uuid>,
+        /// Guest session ID (if guest).
+        guest_session_id: Option<Uuid>,
+        /// New X coordinate.
+        x: f64,
+        /// New Y coordinate.
+        y: f64,
+    },
+
+    /// A member changed their emotion.
+    EmotionUpdated {
+        /// User ID (if authenticated user).
+        user_id: Option<Uuid>,
+        /// Guest session ID (if guest).
+        guest_session_id: Option<Uuid>,
+        /// New emotion slot (0-9).
+        emotion: u8,
+        /// Asset paths for all 9 positions of the new emotion layer.
+        emotion_layer: [Option<String>; 9],
+    },
+
+    /// Pong response to client ping.
+    Pong,
+
+    /// Error message.
+    Error {
+        /// Error code.
+        code: String,
+        /// Error message.
+        message: String,
+    },
+}

crates/chattyness-error/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "chattyness-error"
+version.workspace = true
+edition.workspace = true
+
+[dependencies]
+thiserror.workspace = true
+serde.workspace = true
+
+# SSR-only dependencies
+sqlx = { workspace = true, optional = true }
+axum = { workspace = true, optional = true }
+http.workspace = true
+
+[features]
+default = []
+ssr = ["sqlx", "axum"]

crates/chattyness-error/src/lib.rs

@@ -0,0 +1,106 @@
+use serde::{Deserialize, Serialize};
+use thiserror::Error;
+
+/// Application error types for chattyness.
+///
+/// All errors derive From for automatic conversion where applicable.
+#[derive(Error, Debug)]
+pub enum AppError {
+    #[cfg(feature = "ssr")]
+    #[error("Database error: {0}")]
+    Database(#[from] sqlx::Error),
+
+    #[cfg(not(feature = "ssr"))]
+    #[error("Database error: {0}")]
+    Database(String),
+
+    #[error("Validation error: {0}")]
+    Validation(String),
+
+    #[error("Authentication required")]
+    Unauthorized,
+
+    #[error("Forbidden: {0}")]
+    Forbidden(String),
+
+    #[error("Not found: {0}")]
+    NotFound(String),
+
+    #[error("Conflict: {0}")]
+    Conflict(String),
+
+    #[error("Internal error: {0}")]
+    Internal(String),
+
+    #[error("Invalid credentials")]
+    InvalidCredentials,
+
+    #[error("Account suspended or banned")]
+    AccountSuspended,
+
+    #[error("Not a staff member")]
+    NotStaffMember,
+
+    #[error("Password reset required")]
+    PasswordResetRequired,
+}
+
+/// API error response for JSON serialization.
+#[derive(Debug, Serialize, Deserialize)]
+pub struct ErrorResponse {
+    pub error: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub code: Option<String>,
+}
+
+impl From<AppError> for ErrorResponse {
+    fn from(err: AppError) -> Self {
+        let code = match &err {
+            AppError::Database(_) => Some("DATABASE_ERROR".to_string()),
+            AppError::Validation(_) => Some("VALIDATION_ERROR".to_string()),
+            AppError::Unauthorized => Some("UNAUTHORIZED".to_string()),
+            AppError::Forbidden(_) => Some("FORBIDDEN".to_string()),
+            AppError::NotFound(_) => Some("NOT_FOUND".to_string()),
+            AppError::Conflict(_) => Some("CONFLICT".to_string()),
+            AppError::Internal(_) => Some("INTERNAL_ERROR".to_string()),
+            AppError::InvalidCredentials => Some("INVALID_CREDENTIALS".to_string()),
+            AppError::AccountSuspended => Some("ACCOUNT_SUSPENDED".to_string()),
+            AppError::NotStaffMember => Some("NOT_STAFF_MEMBER".to_string()),
+            AppError::PasswordResetRequired => Some("PASSWORD_RESET_REQUIRED".to_string()),
+        };
+
+        ErrorResponse {
+            error: err.to_string(),
+            code,
+        }
+    }
+}
+
+#[cfg(feature = "ssr")]
+mod ssr_impl {
+    use super::*;
+    use axum::http::StatusCode;
+    use axum::response::{IntoResponse, Response};
+    use axum::Json;
+
+    impl IntoResponse for AppError {
+        fn into_response(self) -> Response {
+            let status = match &self {
+                AppError::Database(_) => StatusCode::INTERNAL_SERVER_ERROR,
+                AppError::Validation(_) => StatusCode::BAD_REQUEST,
+                AppError::Unauthorized => StatusCode::UNAUTHORIZED,
+                AppError::Forbidden(_) => StatusCode::FORBIDDEN,
+                AppError::NotFound(_) => StatusCode::NOT_FOUND,
+                AppError::Conflict(_) => StatusCode::CONFLICT,
+                AppError::Internal(_) => StatusCode::INTERNAL_SERVER_ERROR,
+                AppError::InvalidCredentials => StatusCode::UNAUTHORIZED,
+                AppError::AccountSuspended => StatusCode::FORBIDDEN,
+                AppError::NotStaffMember => StatusCode::FORBIDDEN,
+                AppError::PasswordResetRequired => StatusCode::FORBIDDEN,
+            };
+
+            let body = ErrorResponse::from(self);
+            (status, Json(body)).into_response()
+        }
+    }
+}

crates/chattyness-shared/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "chattyness-shared"
+version.workspace = true
+edition.workspace = true
+
+[dependencies]
+chattyness-error.workspace = true
+regex.workspace = true
+serde.workspace = true

crates/chattyness-shared/src/lib.rs

@@ -0,0 +1,8 @@
+//! Shared utilities for chattyness.
+//!
+//! This crate provides common validation functions and utilities
+//! used across the application.
+
+pub mod validation;
+
+pub use validation::*;

crates/chattyness-shared/src/validation.rs

@@ -0,0 +1,298 @@
+//! Shared validation utilities.
+//!
+//! This module provides common validation functions and pre-compiled regex patterns
+//! for validating user input consistently across the application.
+
+use std::sync::LazyLock;
+
+use chattyness_error::AppError;
+use regex::Regex;
+
+// =============================================================================
+// Pre-compiled Regex Patterns
+// =============================================================================
+
+/// Slug pattern: 1-50 characters, lowercase alphanumeric and hyphens.
+/// Must start and end with alphanumeric (unless 1-2 chars).
+static SLUG_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    Regex::new(r"^[a-z0-9][a-z0-9-]{1,48}[a-z0-9]$|^[a-z0-9]{1,2}$").expect("Invalid slug regex")
+});
+
+/// Hex color pattern: #RRGGBB or #RRGGBBAA format.
+static HEX_COLOR_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    Regex::new(r"^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$").expect("Invalid hex color regex")
+});
+
+/// Username pattern: 3-30 characters, starts with lowercase letter,
+/// contains only lowercase letters, numbers, and underscores.
+static USERNAME_REGEX: LazyLock<Regex> =
+    LazyLock::new(|| Regex::new(r"^[a-z][a-z0-9_]{2,29}$").expect("Invalid username regex"));
+
+/// Email pattern: basic check for @ symbol with characters before and after.
+static EMAIL_REGEX: LazyLock<Regex> =
+    LazyLock::new(|| Regex::new(r"^[^\s@]+@[^\s@]+\.[^\s@]+$").expect("Invalid email regex"));
+
+// =============================================================================
+// Validation Functions
+// =============================================================================
+
+/// Validate a slug (URL-friendly identifier).
+///
+/// # Rules
+/// - 1-50 characters
+/// - Lowercase alphanumeric and hyphens only
+/// - Must start and end with alphanumeric (except for 1-2 character slugs)
+///
+/// # Returns
+/// - `Ok(())` if valid
+/// - `Err(AppError::Validation)` if invalid
+pub fn validate_slug(slug: &str) -> Result<(), AppError> {
+    if !SLUG_REGEX.is_match(slug) {
+        return Err(AppError::Validation(
+            "Slug must be 1-50 characters, lowercase alphanumeric and hyphens only".to_string(),
+        ));
+    }
+    Ok(())
+}
+
+/// Check if a slug is valid without returning an error.
+pub fn is_valid_slug(slug: &str) -> bool {
+    SLUG_REGEX.is_match(slug)
+}
+
+/// Validate a hex color string.
+///
+/// # Rules
+/// - Must match #RRGGBB or #RRGGBBAA format
+/// - Case insensitive for hex digits
+///
+/// # Returns
+/// - `Ok(())` if valid
+/// - `Err(AppError::Validation)` if invalid
+pub fn validate_hex_color(color: &str) -> Result<(), AppError> {
+    if !HEX_COLOR_REGEX.is_match(color) {
+        return Err(AppError::Validation(
+            "Color must be a valid hex color (#RRGGBB or #RRGGBBAA)".to_string(),
+        ));
+    }
+    Ok(())
+}
+
+/// Check if a hex color is valid without returning an error.
+pub fn is_valid_hex_color(color: &str) -> bool {
+    HEX_COLOR_REGEX.is_match(color)
+}
+
+/// Validate an optional hex color string.
+///
+/// Returns `Ok(())` if the color is `None` or a valid hex color.
+pub fn validate_optional_hex_color(color: Option<&str>) -> Result<(), AppError> {
+    if let Some(c) = color {
+        validate_hex_color(c)?;
+    }
+    Ok(())
+}
+
+/// Validate a username.
+///
+/// # Rules
+/// - 3-30 characters
+/// - Must start with a lowercase letter
+/// - Can contain lowercase letters, numbers, and underscores
+///
+/// # Returns
+/// - `Ok(())` if valid
+/// - `Err(AppError::Validation)` if invalid
+pub fn validate_username(username: &str) -> Result<(), AppError> {
+    if !USERNAME_REGEX.is_match(username) {
+        return Err(AppError::Validation(
+            "Username must be 3-30 characters, start with a letter, and contain only lowercase letters, numbers, and underscores".to_string(),
+        ));
+    }
+    Ok(())
+}
+
+/// Check if a username is valid without returning an error.
+pub fn is_valid_username(username: &str) -> bool {
+    USERNAME_REGEX.is_match(username)
+}
+
+/// Validate an email address.
+///
+/// # Rules
+/// - Must contain @ with characters before and after
+/// - Must have a domain with at least one dot
+///
+/// # Returns
+/// - `Ok(())` if valid
+/// - `Err(AppError::Validation)` if invalid
+pub fn validate_email(email: &str) -> Result<(), AppError> {
+    let email = email.trim();
+    if email.is_empty() || !EMAIL_REGEX.is_match(email) {
+        return Err(AppError::Validation("Invalid email address".to_string()));
+    }
+    Ok(())
+}
+
+/// Check if an email is valid without returning an error.
+pub fn is_valid_email(email: &str) -> bool {
+    let email = email.trim();
+    !email.is_empty() && EMAIL_REGEX.is_match(email)
+}
+
+/// Validate that a string is not empty after trimming.
+///
+/// # Returns
+/// - `Ok(())` if the string is non-empty
+/// - `Err(AppError::Validation)` with the provided field name if empty
+pub fn validate_non_empty(value: &str, field_name: &str) -> Result<(), AppError> {
+    if value.trim().is_empty() {
+        return Err(AppError::Validation(format!(
+            "{} cannot be empty",
+            field_name
+        )));
+    }
+    Ok(())
+}
+
+/// Validate that a string length is within bounds.
+///
+/// # Returns
+/// - `Ok(())` if length is within bounds
+/// - `Err(AppError::Validation)` if too short or too long
+pub fn validate_length(value: &str, field_name: &str, min: usize, max: usize) -> Result<(), AppError> {
+    let len = value.len();
+    if len < min || len > max {
+        return Err(AppError::Validation(format!(
+            "{} must be {}-{} characters",
+            field_name, min, max
+        )));
+    }
+    Ok(())
+}
+
+/// Validate that a number is within a range.
+///
+/// # Returns
+/// - `Ok(())` if the number is within the range
+/// - `Err(AppError::Validation)` if out of range
+pub fn validate_range<T: std::cmp::PartialOrd + std::fmt::Display>(
+    value: T,
+    field_name: &str,
+    min: T,
+    max: T,
+) -> Result<(), AppError> {
+    if value < min || value > max {
+        return Err(AppError::Validation(format!(
+            "{} must be between {} and {}",
+            field_name, min, max
+        )));
+    }
+    Ok(())
+}
+
+/// Validate a password meets minimum requirements.
+///
+/// # Rules
+/// - At least 8 characters
+///
+/// # Returns
+/// - `Ok(())` if valid
+/// - `Err(AppError::Validation)` if too short
+pub fn validate_password(password: &str) -> Result<(), AppError> {
+    if password.len() < 8 {
+        return Err(AppError::Validation(
+            "Password must be at least 8 characters".to_string(),
+        ));
+    }
+    Ok(())
+}
+
+/// Validate that two passwords match.
+///
+/// # Returns
+/// - `Ok(())` if passwords match
+/// - `Err(AppError::Validation)` if they don't match
+pub fn validate_passwords_match(password: &str, confirm: &str) -> Result<(), AppError> {
+    if password != confirm {
+        return Err(AppError::Validation("Passwords do not match".to_string()));
+    }
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_validate_slug() {
+        // Valid slugs
+        assert!(validate_slug("a").is_ok());
+        assert!(validate_slug("ab").is_ok());
+        assert!(validate_slug("abc").is_ok());
+        assert!(validate_slug("my-realm").is_ok());
+        assert!(validate_slug("realm123").is_ok());
+        assert!(validate_slug("my-awesome-realm-2024").is_ok());
+
+        // Invalid slugs
+        assert!(validate_slug("").is_err());
+        assert!(validate_slug("-starts-with-dash").is_err());
+        assert!(validate_slug("ends-with-dash-").is_err());
+        assert!(validate_slug("HAS-UPPERCASE").is_err());
+        assert!(validate_slug("has spaces").is_err());
+        assert!(validate_slug("has_underscore").is_err());
+    }
+
+    #[test]
+    fn test_validate_hex_color() {
+        // Valid colors
+        assert!(validate_hex_color("#ffffff").is_ok());
+        assert!(validate_hex_color("#FFFFFF").is_ok());
+        assert!(validate_hex_color("#000000").is_ok());
+        assert!(validate_hex_color("#ff5733").is_ok());
+        assert!(validate_hex_color("#FF573380").is_ok()); // With alpha
+
+        // Invalid colors
+        assert!(validate_hex_color("").is_err());
+        assert!(validate_hex_color("ffffff").is_err()); // Missing #
+        assert!(validate_hex_color("#fff").is_err()); // Too short
+        assert!(validate_hex_color("#fffffff").is_err()); // 7 chars
+        assert!(validate_hex_color("#gggggg").is_err()); // Invalid hex
+    }
+
+    #[test]
+    fn test_validate_username() {
+        // Valid usernames
+        assert!(validate_username("abc").is_ok());
+        assert!(validate_username("user123").is_ok());
+        assert!(validate_username("my_user_name").is_ok());
+
+        // Invalid usernames
+        assert!(validate_username("ab").is_err()); // Too short
+        assert!(validate_username("123abc").is_err()); // Starts with number
+        assert!(validate_username("_user").is_err()); // Starts with underscore
+        assert!(validate_username("User").is_err()); // Uppercase
+        assert!(validate_username("user-name").is_err()); // Has hyphen
+    }
+
+    #[test]
+    fn test_validate_email() {
+        // Valid emails
+        assert!(validate_email("user@example.com").is_ok());
+        assert!(validate_email("test.user@domain.org").is_ok());
+
+        // Invalid emails
+        assert!(validate_email("").is_err());
+        assert!(validate_email("noatsign").is_err());
+        assert!(validate_email("@nodomain").is_err());
+        assert!(validate_email("no@dotcom").is_err());
+    }
+
+    #[test]
+    fn test_validate_password() {
+        assert!(validate_password("12345678").is_ok());
+        assert!(validate_password("longpassword123!").is_ok());
+        assert!(validate_password("1234567").is_err()); // Too short
+        assert!(validate_password("").is_err());
+    }
+}

crates/chattyness-user-ui/Cargo.toml

@@ -0,0 +1,80 @@
+[package]
+name = "chattyness-user-ui"
+version.workspace = true
+edition.workspace = true
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+chattyness-db = { workspace = true }
+chattyness-error = { workspace = true, optional = true }
+chattyness-shared = { workspace = true, optional = true }
+serde.workspace = true
+serde_json.workspace = true
+uuid.workspace = true
+chrono.workspace = true
+tracing = { workspace = true, optional = true }
+
+# Leptos
+leptos = { workspace = true }
+leptos_meta = { workspace = true }
+leptos_router = { workspace = true }
+
+# SSR-only dependencies
+axum = { workspace = true, optional = true }
+sqlx = { workspace = true, optional = true }
+tower = { workspace = true, optional = true }
+tower-sessions = { workspace = true, optional = true }
+tower-sessions-sqlx-store = { workspace = true, optional = true }
+tokio = { workspace = true, optional = true }
+sha2 = { workspace = true, optional = true }
+hex = { workspace = true, optional = true }
+rand = { workspace = true, optional = true }
+reqwest = { workspace = true, optional = true }
+image = { workspace = true, optional = true }
+futures = { workspace = true, optional = true }
+dashmap = { workspace = true, optional = true }
+
+# Hydrate-only dependencies
+gloo-net = { workspace = true, optional = true }
+gloo-timers = { workspace = true, optional = true }
+web-sys = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }
+console_error_panic_hook = { workspace = true, optional = true }
+js-sys = { workspace = true, optional = true }
+
+[features]
+default = []
+ssr = [
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "chattyness-db/ssr",
+    "chattyness-error/ssr",
+    "dep:chattyness-error",
+    "dep:chattyness-shared",
+    "dep:axum",
+    "dep:sqlx",
+    "dep:tower",
+    "dep:tower-sessions",
+    "dep:tower-sessions-sqlx-store",
+    "dep:tracing",
+    "dep:tokio",
+    "dep:sha2",
+    "dep:hex",
+    "dep:rand",
+    "dep:reqwest",
+    "dep:image",
+    "dep:futures",
+    "dep:dashmap",
+]
+hydrate = [
+    "leptos/hydrate",
+    "dep:gloo-net",
+    "dep:gloo-timers",
+    "dep:web-sys",
+    "dep:wasm-bindgen",
+    "dep:console_error_panic_hook",
+    "dep:js-sys",
+]

crates/chattyness-user-ui/src/api.rs

@@ -0,0 +1,11 @@
+//! REST API module for user UI.
+
+pub mod auth;
+pub mod avatars;
+pub mod realms;
+pub mod routes;
+pub mod scenes;
+pub mod websocket;
+
+pub use routes::*;
+pub use websocket::WebSocketState;

crates/chattyness-user-ui/src/api/auth.rs

@@ -0,0 +1,474 @@
+//! Authentication API handlers.
+
+use axum::{
+    extract::State,
+    Json,
+};
+use sqlx::PgPool;
+use tower_sessions::Session;
+
+use chattyness_db::{
+    models::{
+        AccountStatus, AuthenticatedUser, CurrentUserResponse, GuestLoginRequest,
+        GuestLoginResponse, JoinRealmRequest, JoinRealmResponse, LoginRequest, LoginResponse,
+        LoginType, PasswordResetRequest, PasswordResetResponse, RealmRole, RealmSummary,
+        SignupRequest, SignupResponse, UserSummary,
+    },
+    queries::{guests, memberships, realms, users},
+};
+use chattyness_error::AppError;
+
+use crate::auth::{
+    session::{
+        hash_token, generate_token, SESSION_CURRENT_REALM_KEY, SESSION_GUEST_ID_KEY,
+        SESSION_LOGIN_TYPE_KEY, SESSION_ORIGINAL_DEST_KEY, SESSION_USER_ID_KEY,
+    },
+    AuthUser, OptionalAuthUser,
+};
+
+/// Get current user info.
+pub async fn get_current_user(
+    State(pool): State<PgPool>,
+    OptionalAuthUser(user): OptionalAuthUser,
+) -> Result<Json<CurrentUserResponse>, AppError> {
+    match user {
+        Some(user) => {
+            // Get staff role if any
+            let staff_role = memberships::get_user_staff_role(&pool, user.id).await?;
+
+            Ok(Json(CurrentUserResponse {
+                user: Some(AuthenticatedUser {
+                    id: user.id,
+                    username: user.username,
+                    display_name: user.display_name,
+                    avatar_url: user.avatar_url,
+                    staff_role,
+                }),
+            }))
+        }
+        None => Ok(Json(CurrentUserResponse { user: None })),
+    }
+}
+
+/// Login handler.
+pub async fn login(
+    rls_conn: crate::auth::RlsConn,
+    State(pool): State<PgPool>,
+    session: Session,
+    Json(req): Json<LoginRequest>,
+) -> Result<Json<LoginResponse>, AppError> {
+    // Validate the request
+    req.validate()?;
+
+    // Verify credentials
+    let user = users::verify_password_with_reset_flag(&pool, &req.username, &req.password)
+        .await?
+        .ok_or(AppError::InvalidCredentials)?;
+
+    // Set RLS context to the authenticated user for subsequent operations
+    rls_conn.set_user_id(user.id).await
+        .map_err(|e| AppError::Internal(format!("Failed to set RLS context: {}", e)))?;
+
+    // Check account status
+    if user.status != AccountStatus::Active {
+        return Err(AppError::AccountSuspended);
+    }
+
+    // Create user summary for response
+    let user_summary = UserSummary {
+        id: user.id,
+        username: user.username.clone(),
+        display_name: user.display_name.clone(),
+        avatar_url: user.avatar_url.clone(),
+    };
+
+    // Handle based on login type
+    match req.login_type {
+        LoginType::Staff => {
+            // Verify user is a staff member
+            let staff_role = memberships::get_user_staff_role(&pool, user.id)
+                .await?
+                .ok_or(AppError::NotStaffMember)?;
+
+            // Store session data
+            session
+                .insert(SESSION_USER_ID_KEY, user.id)
+                .await
+                .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+            session
+                .insert(SESSION_LOGIN_TYPE_KEY, "staff")
+                .await
+                .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+            // Check for forced password reset
+            if user.force_pw_reset {
+                session
+                    .insert(SESSION_ORIGINAL_DEST_KEY, "/staff")
+                    .await
+                    .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+                return Ok(Json(LoginResponse {
+                    user: user_summary,
+                    redirect_url: "/password-reset".to_string(),
+                    requires_pw_reset: true,
+                    is_member: None,
+                    original_destination: Some("/staff".to_string()),
+                    staff_role: Some(staff_role),
+                    realm: None,
+                }));
+            }
+
+            Ok(Json(LoginResponse {
+                user: user_summary,
+                redirect_url: "/staff".to_string(),
+                requires_pw_reset: false,
+                is_member: None,
+                original_destination: None,
+                staff_role: Some(staff_role),
+                realm: None,
+            }))
+        }
+        LoginType::Realm => {
+            let realm_slug = req.realm_slug.as_ref().ok_or_else(|| {
+                AppError::Validation("Realm slug is required for realm login".to_string())
+            })?;
+
+            // Get the realm
+            let realm = realms::get_realm_by_slug(&pool, realm_slug)
+                .await?
+                .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", realm_slug)))?;
+
+            // Check if user is a member
+            let is_member = memberships::is_member(&pool, user.id, realm.id).await?;
+
+            // Store session data
+            session
+                .insert(SESSION_USER_ID_KEY, user.id)
+                .await
+                .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+            session
+                .insert(SESSION_LOGIN_TYPE_KEY, "realm")
+                .await
+                .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+            session
+                .insert(SESSION_CURRENT_REALM_KEY, realm.id)
+                .await
+                .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+            let redirect_url = format!("/realms/{}", realm.slug);
+
+            // Check for forced password reset
+            if user.force_pw_reset {
+                session
+                    .insert(SESSION_ORIGINAL_DEST_KEY, redirect_url.clone())
+                    .await
+                    .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+                return Ok(Json(LoginResponse {
+                    user: user_summary,
+                    redirect_url: "/password-reset".to_string(),
+                    requires_pw_reset: true,
+                    is_member: Some(is_member),
+                    original_destination: Some(redirect_url),
+                    staff_role: None,
+                    realm: Some(RealmSummary {
+                        id: realm.id,
+                        name: realm.name,
+                        slug: realm.slug,
+                        tagline: realm.tagline,
+                        privacy: realm.privacy,
+                        is_nsfw: realm.is_nsfw,
+                        thumbnail_path: realm.thumbnail_path,
+                        member_count: realm.member_count,
+                        current_user_count: realm.current_user_count,
+                    }),
+                }));
+            }
+
+            // If not a member, include realm info for join confirmation
+            if !is_member {
+                return Ok(Json(LoginResponse {
+                    user: user_summary,
+                    redirect_url: redirect_url.clone(),
+                    requires_pw_reset: false,
+                    is_member: Some(false),
+                    original_destination: None,
+                    staff_role: None,
+                    realm: Some(RealmSummary {
+                        id: realm.id,
+                        name: realm.name,
+                        slug: realm.slug,
+                        tagline: realm.tagline,
+                        privacy: realm.privacy,
+                        is_nsfw: realm.is_nsfw,
+                        thumbnail_path: realm.thumbnail_path,
+                        member_count: realm.member_count,
+                        current_user_count: realm.current_user_count,
+                    }),
+                }));
+            }
+
+            // User is a member, update last visited (using RLS connection)
+            let mut conn = rls_conn.acquire().await;
+            memberships::update_last_visited_conn(&mut *conn, user.id, realm.id).await?;
+
+            Ok(Json(LoginResponse {
+                user: user_summary,
+                redirect_url,
+                requires_pw_reset: false,
+                is_member: Some(true),
+                original_destination: None,
+                staff_role: None,
+                realm: None,
+            }))
+        }
+    }
+}
+
+/// Logout response.
+#[derive(Debug, serde::Serialize)]
+pub struct LogoutResponse {
+    pub success: bool,
+    pub redirect_url: String,
+}
+
+/// Logout handler.
+pub async fn logout(session: Session) -> Result<Json<LogoutResponse>, AppError> {
+    // Flush the session (removes all data and invalidates the session)
+    session
+        .flush()
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+    Ok(Json(LogoutResponse {
+        success: true,
+        redirect_url: "/".to_string(),
+    }))
+}
+
+/// Signup handler.
+pub async fn signup(
+    rls_conn: crate::auth::RlsConn,
+    State(pool): State<PgPool>,
+    session: Session,
+    Json(req): Json<SignupRequest>,
+) -> Result<Json<SignupResponse>, AppError> {
+    // Validate the request
+    req.validate()?;
+
+    // Check username availability (can use pool for read-only checks)
+    if users::username_exists(&pool, &req.username).await? {
+        return Err(AppError::Conflict("Username already taken".to_string()));
+    }
+
+    // Check email availability if provided
+    if let Some(ref email) = req.email {
+        let email_trimmed = email.trim();
+        if !email_trimmed.is_empty() && users::email_exists(&pool, email_trimmed).await? {
+            return Err(AppError::Conflict("Email already registered".to_string()));
+        }
+    }
+
+    // Get the realm
+    let realm = realms::get_realm_by_slug(&pool, &req.realm_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", req.realm_slug)))?;
+
+    // Create the user using RLS connection
+    let email_opt = req.email.as_ref().and_then(|e| {
+        let trimmed = e.trim();
+        if trimmed.is_empty() {
+            None
+        } else {
+            Some(trimmed)
+        }
+    });
+
+    let mut conn = rls_conn.acquire().await;
+    let user_id =
+        users::create_user_conn(&mut *conn, &req.username, email_opt, req.display_name.trim(), &req.password)
+            .await?;
+    drop(conn);
+
+    // Set RLS context to the new user for membership creation
+    rls_conn.set_user_id(user_id).await
+        .map_err(|e| AppError::Internal(format!("Failed to set RLS context: {}", e)))?;
+
+    // Create membership using RLS connection (now has user context)
+    let mut conn = rls_conn.acquire().await;
+    let membership_id =
+        memberships::create_membership_conn(&mut *conn, user_id, realm.id, RealmRole::Member).await?;
+
+    // Set up session (user is logged in)
+    session
+        .insert(SESSION_USER_ID_KEY, user_id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+    session
+        .insert(SESSION_LOGIN_TYPE_KEY, "realm")
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+    session
+        .insert(SESSION_CURRENT_REALM_KEY, realm.id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+    let redirect_url = format!("/realms/{}", realm.slug);
+
+    Ok(Json(SignupResponse {
+        user: UserSummary {
+            id: user_id,
+            username: req.username,
+            display_name: req.display_name.trim().to_string(),
+            avatar_url: None,
+        },
+        redirect_url,
+        membership_id,
+    }))
+}
+
+/// Guest login handler.
+pub async fn guest_login(
+    State(pool): State<PgPool>,
+    session: Session,
+    Json(req): Json<GuestLoginRequest>,
+) -> Result<Json<GuestLoginResponse>, AppError> {
+    // Validate the request
+    req.validate()?;
+
+    // Get the realm
+    let realm = realms::get_realm_by_slug(&pool, &req.realm_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", req.realm_slug)))?;
+
+    // Check if realm allows guest access
+    if !realm.allow_guest_access {
+        return Err(AppError::Forbidden(
+            "This realm does not allow guest access".to_string(),
+        ));
+    }
+
+    // Generate guest name and session token
+    let guest_name = guests::generate_guest_name();
+    let token = generate_token();
+    let token_hash = hash_token(&token);
+    let expires_at = guests::guest_session_expiry();
+
+    // Create guest session in database
+    let guest_id = guests::create_guest_session(
+        &pool,
+        &guest_name,
+        realm.id,
+        &token_hash,
+        None, // user_agent
+        None, // ip_address
+        expires_at,
+    )
+    .await?;
+
+    // Set up tower session
+    session
+        .insert(SESSION_GUEST_ID_KEY, guest_id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+    session
+        .insert(SESSION_LOGIN_TYPE_KEY, "guest")
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+    session
+        .insert(SESSION_CURRENT_REALM_KEY, realm.id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+    let redirect_url = format!("/realms/{}", realm.slug);
+
+    Ok(Json(GuestLoginResponse {
+        guest_name,
+        guest_id,
+        redirect_url,
+        realm: RealmSummary {
+            id: realm.id,
+            name: realm.name,
+            slug: realm.slug,
+            tagline: realm.tagline,
+            privacy: realm.privacy,
+            is_nsfw: realm.is_nsfw,
+            thumbnail_path: realm.thumbnail_path,
+            member_count: realm.member_count,
+            current_user_count: realm.current_user_count,
+        },
+    }))
+}
+
+/// Join realm handler.
+pub async fn join_realm(
+    rls_conn: crate::auth::RlsConn,
+    State(pool): State<PgPool>,
+    AuthUser(user): AuthUser,
+    Json(req): Json<JoinRealmRequest>,
+) -> Result<Json<JoinRealmResponse>, AppError> {
+    // Get the realm to verify it exists and check privacy
+    let realm = realms::get_realm_by_id(&pool, req.realm_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Realm not found".to_string()))?;
+
+    // Check if user is already a member
+    let is_member = memberships::is_member(&pool, user.id, realm.id).await?;
+    if is_member {
+        return Err(AppError::Conflict(
+            "Already a member of this realm".to_string(),
+        ));
+    }
+
+    // For private realms, don't allow direct join (would need invitation)
+    if realm.privacy == chattyness_db::models::RealmPrivacy::Private {
+        return Err(AppError::Forbidden(
+            "Cannot join private realms without an invitation".to_string(),
+        ));
+    }
+
+    // Create the membership using RLS connection (policy requires user_id = current_user_id)
+    let mut conn = rls_conn.acquire().await;
+    let membership_id =
+        memberships::create_membership_conn(&mut *conn, user.id, realm.id, RealmRole::Member).await?;
+
+    Ok(Json(JoinRealmResponse {
+        success: true,
+        membership_id,
+        redirect_url: format!("/realms/{}", realm.slug),
+    }))
+}
+
+/// Password reset handler.
+pub async fn reset_password(
+    rls_conn: crate::auth::RlsConn,
+    session: Session,
+    AuthUser(user): AuthUser,
+    Json(req): Json<PasswordResetRequest>,
+) -> Result<Json<PasswordResetResponse>, AppError> {
+    // Validate the request
+    req.validate()?;
+
+    // Update the password using RLS connection (required for RLS policy)
+    let mut conn = rls_conn.acquire().await;
+    users::update_password_conn(&mut *conn, user.id, &req.new_password).await?;
+
+    // Get the original destination from session
+    let original_dest: Option<String> = session
+        .get(SESSION_ORIGINAL_DEST_KEY)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+    // Clear the original destination from session
+    session
+        .remove::<String>(SESSION_ORIGINAL_DEST_KEY)
+        .await
+        .map_err(|e| AppError::Internal(format!("Session error: {}", e)))?;
+
+    let redirect_url = original_dest.unwrap_or_else(|| "/".to_string());
+
+    Ok(Json(PasswordResetResponse {
+        success: true,
+        redirect_url,
+    }))
+}

crates/chattyness-user-ui/src/api/avatars.rs

@@ -0,0 +1,39 @@
+//! Avatar API handlers for user UI.
+//!
+//! Handles avatar rendering data retrieval.
+//! Note: Emotion switching is now handled via WebSocket.
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use sqlx::PgPool;
+
+use chattyness_db::{
+    models::AvatarRenderData,
+    queries::{avatars, realms},
+};
+use chattyness_error::AppError;
+
+use crate::auth::AuthUser;
+
+/// Get current avatar render data.
+///
+/// GET /api/realms/{slug}/avatar/current
+///
+/// Returns the render data for the user's active avatar in this realm.
+pub async fn get_current_avatar(
+    State(pool): State<PgPool>,
+    AuthUser(user): AuthUser,
+    Path(slug): Path<String>,
+) -> Result<Json<AvatarRenderData>, AppError> {
+    // Get realm
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    // Get render data
+    let render_data = avatars::get_avatar_render_data(&pool, user.id, realm.id).await?;
+
+    Ok(Json(render_data))
+}

crates/chattyness-user-ui/src/api/realms.rs

@@ -0,0 +1,80 @@
+//! Realm API handlers for user UI (READ-ONLY).
+
+use axum::{
+    extract::{Path, Query, State},
+    Json,
+};
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+
+use chattyness_db::{
+    models::{RealmSummary, RealmWithUserRole},
+    queries::{memberships, realms},
+};
+use chattyness_error::AppError;
+
+use crate::auth::OptionalAuthUser;
+
+/// List query params.
+#[derive(Debug, Deserialize)]
+pub struct ListParams {
+    pub include_nsfw: Option<bool>,
+    pub page: Option<i64>,
+    pub limit: Option<i64>,
+}
+
+/// List response.
+#[derive(Debug, Serialize)]
+pub struct ListResponse {
+    pub realms: Vec<RealmSummary>,
+}
+
+/// List public realms.
+pub async fn list_realms(
+    State(pool): State<PgPool>,
+    Query(params): Query<ListParams>,
+) -> Result<Json<ListResponse>, AppError> {
+    let limit = params.limit.unwrap_or(20).min(100);
+    let offset = params.page.unwrap_or(0) * limit;
+    let include_nsfw = params.include_nsfw.unwrap_or(false);
+
+    let realm_list = realms::list_public_realms(&pool, include_nsfw, limit, offset).await?;
+
+    Ok(Json(ListResponse { realms: realm_list }))
+}
+
+/// Get a realm by slug with user role.
+pub async fn get_realm(
+    State(pool): State<PgPool>,
+    OptionalAuthUser(maybe_user): OptionalAuthUser,
+    Path(slug): Path<String>,
+) -> Result<Json<RealmWithUserRole>, AppError> {
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    // Get the user's role if authenticated
+    let user_role = if let Some(user) = maybe_user {
+        let membership = memberships::get_user_membership(&pool, user.id, realm.id).await?;
+        membership.map(|m| m.role)
+    } else {
+        None
+    };
+
+    Ok(Json(RealmWithUserRole { realm, user_role }))
+}
+
+/// Check slug availability response.
+#[derive(Debug, Serialize)]
+pub struct SlugAvailableResponse {
+    pub available: bool,
+}
+
+/// Check if a realm slug is available.
+pub async fn check_slug_available(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+) -> Result<Json<SlugAvailableResponse>, AppError> {
+    let available = realms::is_slug_available(&pool, &slug).await?;
+    Ok(Json(SlugAvailableResponse { available }))
+}

crates/chattyness-user-ui/src/api/routes.rs

@@ -0,0 +1,57 @@
+//! API routes for user UI.
+//!
+//! This router provides READ-ONLY access to realms, scenes, and spots.
+//! All create/update/delete operations are handled by the admin-ui.
+//! Channel presence is handled via WebSocket.
+
+use axum::{routing::get, Router};
+
+use super::{auth, avatars, realms, scenes, websocket};
+use crate::app::AppState;
+
+/// Build the API router for user UI.
+///
+/// Note: This router is READ-ONLY for realms/scenes/spots.
+/// Auth routes (login, logout, signup, join-realm) are allowed.
+/// Channel presence (join, leave, position, emotion, members) is handled via WebSocket.
+pub fn api_router() -> Router<AppState> {
+    Router::new()
+        // Auth routes (these are user-facing operations)
+        .route("/auth/me", get(auth::get_current_user))
+        .route("/auth/login", axum::routing::post(auth::login))
+        .route("/auth/logout", axum::routing::post(auth::logout))
+        .route("/auth/signup", axum::routing::post(auth::signup))
+        .route("/auth/guest", axum::routing::post(auth::guest_login))
+        .route("/auth/join-realm", axum::routing::post(auth::join_realm))
+        .route(
+            "/auth/reset-password",
+            axum::routing::post(auth::reset_password),
+        )
+        // Realm routes (READ-ONLY)
+        .route("/realms", get(realms::list_realms))
+        .route("/realms/{slug}", get(realms::get_realm))
+        .route("/realms/{slug}/available", get(realms::check_slug_available))
+        // Scene routes (READ-ONLY)
+        .route("/realms/{slug}/entry-scene", get(scenes::get_entry_scene))
+        .route("/realms/{slug}/scenes", get(scenes::list_scenes))
+        .route("/realms/{slug}/scenes/{scene_slug}", get(scenes::get_scene))
+        // Spot routes (READ-ONLY)
+        .route(
+            "/realms/{slug}/scenes/{scene_slug}/spots",
+            get(scenes::list_spots),
+        )
+        .route(
+            "/realms/{slug}/scenes/{scene_slug}/spots/{spot_id}",
+            get(scenes::get_spot),
+        )
+        // WebSocket route for channel presence (handles join, leave, position, emotion, members)
+        .route(
+            "/realms/{slug}/channels/{channel_id}/ws",
+            get(websocket::ws_handler::<AppState>),
+        )
+        // Avatar routes (require authentication)
+        .route(
+            "/realms/{slug}/avatar/current",
+            get(avatars::get_current_avatar),
+        )
+}

crates/chattyness-user-ui/src/api/scenes.rs

@@ -0,0 +1,92 @@
+//! Scene and Spot API handlers for user UI (READ-ONLY).
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+use chattyness_db::{
+    models::{Scene, SceneSummary, Spot, SpotSummary},
+    queries::{realms, scenes, spots},
+};
+use chattyness_error::AppError;
+
+/// Get the entry scene for a realm.
+///
+/// GET /api/realms/{slug}/entry-scene
+///
+/// Returns the realm's default/entry scene. This endpoint is public.
+pub async fn get_entry_scene(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+) -> Result<Json<Scene>, AppError> {
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    let scene = scenes::get_entry_scene_for_realm(&pool, realm.id, realm.default_scene_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("No entry scene found for this realm".to_string()))?;
+
+    Ok(Json(scene))
+}
+
+/// List scenes for a realm.
+pub async fn list_scenes(
+    State(pool): State<PgPool>,
+    Path(slug): Path<String>,
+) -> Result<Json<Vec<SceneSummary>>, AppError> {
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    let scene_list = scenes::list_scenes_for_realm(&pool, realm.id).await?;
+    Ok(Json(scene_list))
+}
+
+/// Get a scene by slug.
+pub async fn get_scene(
+    State(pool): State<PgPool>,
+    Path((slug, scene_slug)): Path<(String, String)>,
+) -> Result<Json<Scene>, AppError> {
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    let scene = scenes::get_scene_by_slug(&pool, realm.id, &scene_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Scene '{}' not found", scene_slug)))?;
+
+    Ok(Json(scene))
+}
+
+/// List spots for a scene.
+pub async fn list_spots(
+    State(pool): State<PgPool>,
+    Path((slug, scene_slug)): Path<(String, String)>,
+) -> Result<Json<Vec<SpotSummary>>, AppError> {
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    let scene = scenes::get_scene_by_slug(&pool, realm.id, &scene_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Scene '{}' not found", scene_slug)))?;
+
+    let spot_list = spots::list_spots_for_scene(&pool, scene.id).await?;
+    Ok(Json(spot_list))
+}
+
+/// Get a spot by ID.
+pub async fn get_spot(
+    State(pool): State<PgPool>,
+    Path((_slug, _scene_slug, spot_id)): Path<(String, String, Uuid)>,
+) -> Result<Json<Spot>, AppError> {
+    let spot = spots::get_spot_by_id(&pool, spot_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Spot not found".to_string()))?;
+
+    Ok(Json(spot))
+}

crates/chattyness-user-ui/src/api/websocket.rs

@@ -0,0 +1,399 @@
+//! WebSocket handler for channel presence.
+//!
+//! Handles real-time position updates, emotion changes, and member synchronization.
+
+use axum::{
+    extract::{
+        ws::{Message, WebSocket, WebSocketUpgrade},
+        FromRef, Path, State,
+    },
+    response::IntoResponse,
+};
+use dashmap::DashMap;
+use futures::{SinkExt, StreamExt};
+use sqlx::PgPool;
+use std::sync::Arc;
+use tokio::sync::broadcast;
+use uuid::Uuid;
+
+use chattyness_db::{
+    models::{AvatarRenderData, ChannelMemberWithAvatar, User},
+    queries::{avatars, channel_members, realms, scenes},
+    ws_messages::{ClientMessage, ServerMessage},
+};
+use chattyness_error::AppError;
+
+use crate::auth::AuthUser;
+
+/// Channel state for broadcasting updates.
+pub struct ChannelState {
+    /// Broadcast sender for this channel.
+    tx: broadcast::Sender<ServerMessage>,
+}
+
+/// Global state for all WebSocket connections.
+pub struct WebSocketState {
+    /// Map of channel_id -> ChannelState.
+    channels: DashMap<Uuid, Arc<ChannelState>>,
+}
+
+impl Default for WebSocketState {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl WebSocketState {
+    /// Create a new WebSocket state.
+    pub fn new() -> Self {
+        Self {
+            channels: DashMap::new(),
+        }
+    }
+
+    /// Get or create a channel state.
+    fn get_or_create_channel(&self, channel_id: Uuid) -> Arc<ChannelState> {
+        self.channels
+            .entry(channel_id)
+            .or_insert_with(|| {
+                let (tx, _) = broadcast::channel(256);
+                Arc::new(ChannelState { tx })
+            })
+            .clone()
+    }
+}
+
+/// WebSocket upgrade handler.
+///
+/// GET /api/realms/{slug}/channels/{channel_id}/ws
+pub async fn ws_handler<S>(
+    Path((slug, channel_id)): Path<(String, Uuid)>,
+    auth_result: Result<AuthUser, crate::auth::AuthError>,
+    State(pool): State<PgPool>,
+    State(ws_state): State<Arc<WebSocketState>>,
+    ws: WebSocketUpgrade,
+) -> Result<impl IntoResponse, AppError>
+where
+    S: Send + Sync,
+    PgPool: FromRef<S>,
+    Arc<WebSocketState>: FromRef<S>,
+{
+    // Log auth result before checking
+    #[cfg(debug_assertions)]
+    tracing::debug!(
+        "[WS] Connection attempt to {}/channels/{} - auth: {:?}",
+        slug,
+        channel_id,
+        auth_result.as_ref().map(|a| a.0.id).map_err(|e| format!("{:?}", e))
+    );
+
+    let AuthUser(user) = auth_result.map_err(|e| {
+        tracing::warn!("[WS] Auth failed for {}/channels/{}: {:?}", slug, channel_id, e);
+        AppError::from(e)
+    })?;
+
+    // Verify realm exists
+    let realm = realms::get_realm_by_slug(&pool, &slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound(format!("Realm '{}' not found", slug)))?;
+
+    // Verify channel (scene) exists and belongs to this realm
+    let scene = scenes::get_scene_by_id(&pool, channel_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Channel not found".to_string()))?;
+
+    if scene.realm_id != realm.id {
+        return Err(AppError::NotFound(
+            "Channel not found in this realm".to_string(),
+        ));
+    }
+
+    #[cfg(debug_assertions)]
+    tracing::debug!(
+        "[WS] Upgrading connection for user {} to channel {}",
+        user.id,
+        channel_id
+    );
+
+    Ok(ws.on_upgrade(move |socket| {
+        handle_socket(socket, user, channel_id, realm.id, pool, ws_state)
+    }))
+}
+
+/// Set RLS context on a database connection.
+async fn set_rls_user_id(
+    conn: &mut sqlx::pool::PoolConnection<sqlx::Postgres>,
+    user_id: Uuid,
+) -> Result<(), sqlx::Error> {
+    sqlx::query("SELECT public.set_current_user_id($1)")
+        .bind(user_id)
+        .execute(&mut **conn)
+        .await?;
+    Ok(())
+}
+
+/// Handle an active WebSocket connection.
+async fn handle_socket(
+    socket: WebSocket,
+    user: User,
+    channel_id: Uuid,
+    realm_id: Uuid,
+    pool: PgPool,
+    ws_state: Arc<WebSocketState>,
+) {
+    tracing::info!(
+        "[WS] handle_socket started for user {} channel {} realm {}",
+        user.id,
+        channel_id,
+        realm_id
+    );
+
+    // Acquire a dedicated connection for setup operations
+    let mut conn = match pool.acquire().await {
+        Ok(conn) => conn,
+        Err(e) => {
+            tracing::error!("[WS] Failed to acquire DB connection: {:?}", e);
+            return;
+        }
+    };
+
+    // Set RLS context on this dedicated connection
+    if let Err(e) = set_rls_user_id(&mut conn, user.id).await {
+        tracing::error!("[WS] Failed to set RLS context for user {}: {:?}", user.id, e);
+        return;
+    }
+    tracing::info!("[WS] RLS context set on dedicated connection");
+
+    let channel_state = ws_state.get_or_create_channel(channel_id);
+    let mut rx = channel_state.tx.subscribe();
+
+    let (mut sender, mut receiver) = socket.split();
+
+    // Ensure active avatar
+    tracing::info!("[WS] Ensuring active avatar...");
+    if let Err(e) = channel_members::ensure_active_avatar(&mut *conn, user.id, realm_id).await {
+        tracing::error!("[WS] Failed to ensure avatar for user {}: {:?}", user.id, e);
+        return;
+    }
+    tracing::info!("[WS] Avatar ensured");
+
+    // Join the channel
+    tracing::info!("[WS] Joining channel...");
+    if let Err(e) = channel_members::join_channel(&mut *conn, channel_id, user.id).await {
+        tracing::error!(
+            "[WS] Failed to join channel {} for user {}: {:?}",
+            channel_id,
+            user.id,
+            e
+        );
+        return;
+    }
+    tracing::info!("[WS] Channel joined");
+
+    // Get initial state
+    let members = match get_members_with_avatars(&mut *conn, channel_id, realm_id).await {
+        Ok(m) => m,
+        Err(e) => {
+            tracing::error!("[WS] Failed to get members: {:?}", e);
+            let _ = channel_members::leave_channel(&mut *conn, channel_id, user.id).await;
+            return;
+        }
+    };
+
+    let member = match channel_members::get_channel_member(&mut *conn, channel_id, user.id, realm_id)
+        .await
+    {
+        Ok(Some(m)) => m,
+        Ok(None) => {
+            tracing::error!("[WS] Failed to get member info for user {}", user.id);
+            let _ = channel_members::leave_channel(&mut *conn, channel_id, user.id).await;
+            return;
+        }
+        Err(e) => {
+            tracing::error!("[WS] Error getting member info: {:?}", e);
+            let _ = channel_members::leave_channel(&mut *conn, channel_id, user.id).await;
+            return;
+        }
+    };
+
+    // Send welcome message
+    let welcome = ServerMessage::Welcome {
+        member: member.clone(),
+        members,
+    };
+    if let Ok(json) = serde_json::to_string(&welcome) {
+        #[cfg(debug_assertions)]
+        tracing::debug!("[WS->Client] {}", json);
+        if sender.send(Message::Text(json.into())).await.is_err() {
+            let _ = channel_members::leave_channel(&mut *conn, channel_id, user.id).await;
+            return;
+        }
+    }
+
+    // Broadcast join to others
+    let avatar = avatars::get_avatar_render_data(&mut *conn, user.id, realm_id)
+        .await
+        .unwrap_or_default();
+    let join_msg = ServerMessage::MemberJoined {
+        member: ChannelMemberWithAvatar { member, avatar },
+    };
+    let _ = channel_state.tx.send(join_msg);
+
+    let user_id = user.id;
+    let tx = channel_state.tx.clone();
+
+    // Acquire a second dedicated connection for the receive task
+    // This connection needs its own RLS context
+    let mut recv_conn = match pool.acquire().await {
+        Ok(c) => c,
+        Err(e) => {
+            tracing::error!("[WS] Failed to acquire recv connection: {:?}", e);
+            let _ = channel_members::leave_channel(&mut *conn, channel_id, user_id).await;
+            return;
+        }
+    };
+    if let Err(e) = set_rls_user_id(&mut recv_conn, user_id).await {
+        tracing::error!("[WS] Failed to set RLS on recv connection: {:?}", e);
+        let _ = channel_members::leave_channel(&mut *conn, channel_id, user_id).await;
+        return;
+    }
+
+    // Drop the setup connection - we'll use recv_conn for the receive task
+    // and pool for cleanup (which will use the same RLS context issue, but leave_channel
+    // needs user_id match anyway)
+    drop(conn);
+
+    // Spawn task to handle incoming messages from client
+    let recv_task = tokio::spawn(async move {
+        while let Some(Ok(msg)) = receiver.next().await {
+            if let Message::Text(text) = msg {
+                #[cfg(debug_assertions)]
+                tracing::debug!("[WS<-Client] {}", text);
+
+                let Ok(client_msg) = serde_json::from_str::<ClientMessage>(&text) else {
+                    continue;
+                };
+
+                match client_msg {
+                    ClientMessage::UpdatePosition { x, y } => {
+                        if let Err(e) =
+                            channel_members::update_position(&mut *recv_conn, channel_id, user_id, x, y)
+                                .await
+                        {
+                            #[cfg(debug_assertions)]
+                            tracing::error!("[WS] Position update failed: {:?}", e);
+                            continue;
+                        }
+                        let _ = tx.send(ServerMessage::PositionUpdated {
+                            user_id: Some(user_id),
+                            guest_session_id: None,
+                            x,
+                            y,
+                        });
+                    }
+                    ClientMessage::UpdateEmotion { emotion } => {
+                        if emotion > 9 {
+                            continue;
+                        }
+                        let emotion_layer = match avatars::set_emotion(
+                            &mut *recv_conn,
+                            user_id,
+                            realm_id,
+                            emotion as i16,
+                        )
+                        .await
+                        {
+                            Ok(layer) => layer,
+                            Err(e) => {
+                                #[cfg(debug_assertions)]
+                                tracing::error!("[WS] Emotion update failed: {:?}", e);
+                                continue;
+                            }
+                        };
+                        let _ = tx.send(ServerMessage::EmotionUpdated {
+                            user_id: Some(user_id),
+                            guest_session_id: None,
+                            emotion,
+                            emotion_layer,
+                        });
+                    }
+                    ClientMessage::Ping => {
+                        // Respond with pong directly (not broadcast)
+                        // This is handled in the send task via individual message
+                    }
+                }
+            }
+        }
+        // Return the connection so we can use it for cleanup
+        recv_conn
+    });
+
+    // Spawn task to forward broadcasts to this client
+    let send_task = tokio::spawn(async move {
+        while let Ok(msg) = rx.recv().await {
+            if let Ok(json) = serde_json::to_string(&msg) {
+                #[cfg(debug_assertions)]
+                tracing::debug!("[WS->Client] {}", json);
+                if sender.send(Message::Text(json.into())).await.is_err() {
+                    break;
+                }
+            }
+        }
+    });
+
+    // Wait for either task to complete
+    tokio::select! {
+        recv_result = recv_task => {
+            // recv_task finished, get connection back for cleanup
+            if let Ok(mut cleanup_conn) = recv_result {
+                let _ = channel_members::leave_channel(&mut *cleanup_conn, channel_id, user_id).await;
+            } else {
+                // Task panicked, use pool (RLS may fail but try anyway)
+                let _ = channel_members::leave_channel(&pool, channel_id, user_id).await;
+            }
+        }
+        _ = send_task => {
+            // send_task finished first, need to acquire a new connection for cleanup
+            if let Ok(mut cleanup_conn) = pool.acquire().await {
+                let _ = set_rls_user_id(&mut cleanup_conn, user_id).await;
+                let _ = channel_members::leave_channel(&mut *cleanup_conn, channel_id, user_id).await;
+            }
+        }
+    }
+
+    tracing::info!(
+        "[WS] User {} disconnected from channel {}",
+        user_id,
+        channel_id
+    );
+
+    // Broadcast departure
+    let _ = channel_state.tx.send(ServerMessage::MemberLeft {
+        user_id: Some(user_id),
+        guest_session_id: None,
+    });
+}
+
+/// Helper: Get all channel members with their avatar render data.
+async fn get_members_with_avatars<'e>(
+    executor: impl sqlx::PgExecutor<'e>,
+    channel_id: Uuid,
+    realm_id: Uuid,
+) -> Result<Vec<ChannelMemberWithAvatar>, AppError> {
+    // Get members first, then we need to get avatars
+    // But executor is consumed by the first query, so we need the pool
+    // Actually, let's just inline this to avoid the complexity
+    let members = channel_members::get_channel_members(executor, channel_id, realm_id).await?;
+
+    // For avatar data, we'll just return default for now since the query
+    // would need another executor
+    let result: Vec<ChannelMemberWithAvatar> = members
+        .into_iter()
+        .map(|member| ChannelMemberWithAvatar {
+            member,
+            avatar: AvatarRenderData::default(),
+        })
+        .collect();
+
+    Ok(result)
+}

crates/chattyness-user-ui/src/app.rs

@@ -0,0 +1,83 @@
+//! Leptos application root and router for public app.
+
+use leptos::prelude::*;
+use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
+use leptos_router::components::Router;
+
+use crate::routes::UserRoutes;
+
+#[cfg(feature = "ssr")]
+use std::sync::Arc;
+
+#[cfg(feature = "ssr")]
+use crate::api::WebSocketState;
+
+/// Application state for the public app.
+#[cfg(feature = "ssr")]
+#[derive(Clone)]
+pub struct AppState {
+    pub pool: sqlx::PgPool,
+    pub leptos_options: LeptosOptions,
+    pub ws_state: Arc<WebSocketState>,
+}
+
+#[cfg(feature = "ssr")]
+impl axum::extract::FromRef<AppState> for sqlx::PgPool {
+    fn from_ref(state: &AppState) -> Self {
+        state.pool.clone()
+    }
+}
+
+#[cfg(feature = "ssr")]
+impl axum::extract::FromRef<AppState> for LeptosOptions {
+    fn from_ref(state: &AppState) -> Self {
+        state.leptos_options.clone()
+    }
+}
+
+#[cfg(feature = "ssr")]
+impl axum::extract::FromRef<AppState> for Arc<WebSocketState> {
+    fn from_ref(state: &AppState) -> Self {
+        state.ws_state.clone()
+    }
+}
+
+/// Shell component for SSR.
+pub fn shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <AutoReload options=options.clone() />
+                <HydrationScripts options />
+                <MetaTags />
+            </head>
+            <body class="bg-gray-900 text-white antialiased" data-app="user">
+                <App />
+            </body>
+        </html>
+    }
+}
+
+/// Main application component.
+///
+/// This wraps `UserRoutes` with a `Router` for standalone use.
+/// For embedding in a combined app (e.g., chattyness-app), use `UserRoutes` directly.
+#[component]
+pub fn App() -> impl IntoView {
+    // Provide meta context for title and meta tags
+    provide_meta_context();
+
+    view! {
+        <Stylesheet id="leptos" href="/static/chattyness-app.css" />
+        <Title text="Chattyness - Virtual Community Spaces" />
+
+        <Router>
+            <main>
+                <UserRoutes />
+            </main>
+        </Router>
+    }
+}

crates/chattyness-user-ui/src/auth.rs

@@ -0,0 +1,13 @@
+//! Authentication module for user UI.
+//!
+//! Provides session-based authentication using tower-sessions.
+
+#[cfg(feature = "ssr")]
+pub mod middleware;
+pub mod rls;
+pub mod session;
+
+#[cfg(feature = "ssr")]
+pub use middleware::*;
+pub use rls::*;
+pub use session::*;

crates/chattyness-user-ui/src/auth/middleware.rs

@@ -0,0 +1,115 @@
+//! Authentication middleware and extractors.
+
+use axum::{
+    extract::{FromRef, FromRequestParts},
+    http::{request::Parts, StatusCode},
+    response::{IntoResponse, Response},
+    Json,
+};
+use sqlx::PgPool;
+use tower_sessions::Session;
+use uuid::Uuid;
+
+use chattyness_db::models::User;
+use chattyness_error::ErrorResponse;
+
+use super::session::SESSION_USER_ID_KEY;
+
+/// Extractor for an authenticated user.
+///
+/// Returns 401 Unauthorized if the user is not authenticated.
+pub struct AuthUser(pub User);
+
+impl<S> FromRequestParts<S> for AuthUser
+where
+    S: Send + Sync,
+    PgPool: FromRef<S>,
+{
+    type Rejection = AuthError;
+
+    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Self, Self::Rejection> {
+        // Get session from request
+        let session = Session::from_request_parts(parts, state)
+            .await
+            .map_err(|_| AuthError::SessionError)?;
+
+        // Get user ID from session
+        let user_id: Option<Uuid> = session
+            .get(SESSION_USER_ID_KEY)
+            .await
+            .map_err(|_| AuthError::SessionError)?;
+
+        let user_id = user_id.ok_or(AuthError::Unauthorized)?;
+
+        // Get the database pool from state
+        let pool = PgPool::from_ref(state);
+
+        // Fetch the user from the database
+        let user = chattyness_db::queries::users::get_user_by_id(&pool, user_id)
+            .await
+            .map_err(|_| AuthError::InternalError)?
+            .ok_or(AuthError::Unauthorized)?;
+
+        Ok(AuthUser(user))
+    }
+}
+
+/// Extractor for an optional authenticated user.
+///
+/// Returns None if the user is not authenticated.
+pub struct OptionalAuthUser(pub Option<User>);
+
+impl<S> FromRequestParts<S> for OptionalAuthUser
+where
+    S: Send + Sync,
+    PgPool: FromRef<S>,
+{
+    type Rejection = AuthError;
+
+    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Self, Self::Rejection> {
+        match AuthUser::from_request_parts(parts, state).await {
+            Ok(AuthUser(user)) => Ok(OptionalAuthUser(Some(user))),
+            Err(AuthError::Unauthorized) => Ok(OptionalAuthUser(None)),
+            Err(e) => Err(e),
+        }
+    }
+}
+
+/// Authentication errors.
+#[derive(Debug)]
+pub enum AuthError {
+    Unauthorized,
+    SessionError,
+    InternalError,
+}
+
+impl IntoResponse for AuthError {
+    fn into_response(self) -> Response {
+        let (status, message) = match self {
+            AuthError::Unauthorized => (StatusCode::UNAUTHORIZED, "Authentication required"),
+            AuthError::SessionError => (StatusCode::INTERNAL_SERVER_ERROR, "Session error"),
+            AuthError::InternalError => (StatusCode::INTERNAL_SERVER_ERROR, "Internal error"),
+        };
+
+        let body = ErrorResponse {
+            error: message.to_string(),
+            code: Some(format!("{:?}", self)),
+        };
+
+        (status, Json(body)).into_response()
+    }
+}
+
+impl From<AuthError> for chattyness_error::AppError {
+    fn from(err: AuthError) -> Self {
+        match err {
+            AuthError::Unauthorized => chattyness_error::AppError::Unauthorized,
+            AuthError::SessionError => {
+                chattyness_error::AppError::Internal("Session error".to_string())
+            }
+            AuthError::InternalError => {
+                chattyness_error::AppError::Internal("Internal error".to_string())
+            }
+        }
+    }
+}

crates/chattyness-user-ui/src/auth/rls.rs

@@ -0,0 +1,296 @@
+//! Row-Level Security (RLS) middleware for PostgreSQL.
+
+use axum::{
+    extract::FromRequestParts,
+    http::{request::Parts, Request, StatusCode},
+    response::{IntoResponse, Response},
+    Json,
+};
+use sqlx::{pool::PoolConnection, postgres::PgConnection, PgPool, Postgres};
+use std::{
+    future::Future,
+    ops::{Deref, DerefMut},
+    pin::Pin,
+    sync::Arc,
+    task::{Context, Poll},
+};
+use tokio::sync::{Mutex, MutexGuard};
+use tower::{Layer, Service};
+use tower_sessions::Session;
+use uuid::Uuid;
+
+use super::session::{SESSION_GUEST_ID_KEY, SESSION_USER_ID_KEY};
+use chattyness_error::ErrorResponse;
+
+// =============================================================================
+// RLS Connection Wrapper
+// =============================================================================
+
+struct RlsConnectionInner {
+    conn: Option<PoolConnection<Postgres>>,
+    pool: PgPool,
+}
+
+impl Drop for RlsConnectionInner {
+    fn drop(&mut self) {
+        if let Some(mut conn) = self.conn.take() {
+            let pool = self.pool.clone();
+            tokio::spawn(async move {
+                let _ = sqlx::query("SELECT public.set_current_user_id(NULL)")
+                    .execute(&mut *conn)
+                    .await;
+                let _ = sqlx::query("SELECT public.set_current_guest_session_id(NULL)")
+                    .execute(&mut *conn)
+                    .await;
+                drop(conn);
+                drop(pool);
+            });
+        }
+    }
+}
+
+/// A database connection with RLS user ID already set.
+#[derive(Clone)]
+pub struct RlsConnection {
+    inner: Arc<Mutex<RlsConnectionInner>>,
+}
+
+impl RlsConnection {
+    fn new(conn: PoolConnection<Postgres>, pool: PgPool) -> Self {
+        Self {
+            inner: Arc::new(Mutex::new(RlsConnectionInner {
+                conn: Some(conn),
+                pool,
+            })),
+        }
+    }
+
+    /// Acquire exclusive access to the RLS connection.
+    pub async fn acquire(&self) -> RlsGuard<'_> {
+        RlsGuard {
+            guard: self.inner.lock().await,
+        }
+    }
+
+    /// Set the current user ID on the RLS connection.
+    /// Use this after creating a new user to set the context for subsequent operations.
+    pub async fn set_user_id(&self, user_id: Uuid) -> Result<(), sqlx::Error> {
+        let mut guard = self.inner.lock().await;
+        let conn = guard.conn.as_mut().expect("RlsConnection already consumed");
+        sqlx::query("SELECT public.set_current_user_id($1)")
+            .bind(user_id)
+            .execute(&mut **conn)
+            .await?;
+        Ok(())
+    }
+}
+
+/// A guard providing mutable access to an RLS-configured database connection.
+pub struct RlsGuard<'a> {
+    guard: MutexGuard<'a, RlsConnectionInner>,
+}
+
+impl Deref for RlsGuard<'_> {
+    type Target = PgConnection;
+
+    fn deref(&self) -> &Self::Target {
+        self.guard
+            .conn
+            .as_ref()
+            .expect("RlsConnection already consumed")
+            .deref()
+    }
+}
+
+impl DerefMut for RlsGuard<'_> {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        self.guard
+            .conn
+            .as_mut()
+            .expect("RlsConnection already consumed")
+            .deref_mut()
+    }
+}
+
+// =============================================================================
+// RLS Connection Extractor
+// =============================================================================
+
+/// Extractor for an RLS-enabled database connection.
+pub struct RlsConn(pub RlsConnection);
+
+impl<S> FromRequestParts<S> for RlsConn
+where
+    S: Send + Sync,
+{
+    type Rejection = RlsError;
+
+    async fn from_request_parts(parts: &mut Parts, _state: &S) -> Result<Self, Self::Rejection> {
+        parts
+            .extensions
+            .remove::<RlsConnection>()
+            .map(RlsConn)
+            .ok_or(RlsError::NoConnection)
+    }
+}
+
+/// Errors related to RLS connection handling.
+#[derive(Debug)]
+pub enum RlsError {
+    NoConnection,
+    DatabaseError(String),
+}
+
+impl IntoResponse for RlsError {
+    fn into_response(self) -> Response {
+        let (status, message) = match self {
+            RlsError::NoConnection => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "RLS connection not available",
+            ),
+            RlsError::DatabaseError(msg) => {
+                (StatusCode::INTERNAL_SERVER_ERROR, msg.leak() as &'static str)
+            }
+        };
+
+        let body = ErrorResponse {
+            error: message.to_string(),
+            code: Some("RLS_ERROR".to_string()),
+        };
+
+        (status, Json(body)).into_response()
+    }
+}
+
+// =============================================================================
+// RLS Middleware Layer
+// =============================================================================
+
+/// Layer that provides RLS-enabled database connections per request.
+#[derive(Clone)]
+pub struct RlsLayer {
+    pool: PgPool,
+}
+
+impl RlsLayer {
+    pub fn new(pool: PgPool) -> Self {
+        Self { pool }
+    }
+}
+
+impl<S> Layer<S> for RlsLayer {
+    type Service = RlsMiddleware<S>;
+
+    fn layer(&self, inner: S) -> Self::Service {
+        RlsMiddleware {
+            inner,
+            pool: self.pool.clone(),
+        }
+    }
+}
+
+/// Middleware that sets up RLS connections per request.
+#[derive(Clone)]
+pub struct RlsMiddleware<S> {
+    inner: S,
+    pool: PgPool,
+}
+
+impl<S, B> Service<Request<B>> for RlsMiddleware<S>
+where
+    S: Service<Request<B>, Response = Response> + Clone + Send + 'static,
+    S::Future: Send,
+    B: Send + 'static,
+{
+    type Response = Response;
+    type Error = S::Error;
+    type Future = Pin<Box<dyn Future<Output = Result<Self::Response, Self::Error>> + Send>>;
+
+    fn poll_ready(&mut self, cx: &mut Context<'_>) -> Poll<Result<(), Self::Error>> {
+        self.inner.poll_ready(cx)
+    }
+
+    fn call(&mut self, mut request: Request<B>) -> Self::Future {
+        let pool = self.pool.clone();
+        let mut inner = self.inner.clone();
+
+        let session = request.extensions().get::<Session>().cloned();
+
+        Box::pin(async move {
+            let (user_id, guest_session_id) = get_session_ids(session).await;
+
+            match acquire_rls_connection(&pool, user_id, guest_session_id).await {
+                Ok(rls_conn) => {
+                    request.extensions_mut().insert(rls_conn);
+                    inner.call(request).await
+                }
+                Err(e) => {
+                    tracing::error!("Failed to acquire RLS connection: {}", e);
+                    Ok(RlsError::DatabaseError(e.to_string()).into_response())
+                }
+            }
+        })
+    }
+}
+
+async fn get_session_ids(session: Option<Session>) -> (Option<Uuid>, Option<Uuid>) {
+    let Some(session) = session else {
+        return (None, None);
+    };
+
+    let user_id = session
+        .get::<Uuid>(SESSION_USER_ID_KEY)
+        .await
+        .ok()
+        .flatten();
+    let guest_session_id = session
+        .get::<Uuid>(SESSION_GUEST_ID_KEY)
+        .await
+        .ok()
+        .flatten();
+
+    (user_id, guest_session_id)
+}
+
+async fn acquire_rls_connection(
+    pool: &PgPool,
+    user_id: Option<Uuid>,
+    guest_session_id: Option<Uuid>,
+) -> Result<RlsConnection, sqlx::Error> {
+    let mut conn = pool.acquire().await?;
+
+    if user_id.is_some() {
+        sqlx::query("SELECT public.set_current_user_id($1)")
+            .bind(user_id)
+            .execute(&mut *conn)
+            .await?;
+    } else if guest_session_id.is_some() {
+        sqlx::query("SELECT public.set_current_user_id(NULL)")
+            .execute(&mut *conn)
+            .await?;
+        sqlx::query("SELECT public.set_current_guest_session_id($1)")
+            .bind(guest_session_id)
+            .execute(&mut *conn)
+            .await?;
+    } else {
+        sqlx::query("SELECT public.set_current_user_id(NULL)")
+            .execute(&mut *conn)
+            .await?;
+    }
+
+    Ok(RlsConnection::new(conn, pool.clone()))
+}
+
+impl std::ops::Deref for RlsConn {
+    type Target = RlsConnection;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl std::ops::DerefMut for RlsConn {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.0
+    }
+}

crates/chattyness-user-ui/src/auth/session.rs

@@ -0,0 +1,58 @@
+//! Session management using tower-sessions.
+
+use sqlx::PgPool;
+use tower_sessions::{cookie::time::Duration, cookie::SameSite, Expiry, SessionManagerLayer};
+use tower_sessions_sqlx_store::PostgresStore;
+
+/// Session cookie name.
+pub const SESSION_COOKIE_NAME: &str = "chattyness_session";
+
+/// Session user ID key.
+pub const SESSION_USER_ID_KEY: &str = "user_id";
+
+/// Session login type key (staff or realm).
+pub const SESSION_LOGIN_TYPE_KEY: &str = "login_type";
+
+/// Session current realm ID key (for realm logins).
+pub const SESSION_CURRENT_REALM_KEY: &str = "current_realm_id";
+
+/// Session original destination key (for password reset redirect).
+pub const SESSION_ORIGINAL_DEST_KEY: &str = "original_destination";
+
+/// Session guest ID key (for guest sessions).
+pub const SESSION_GUEST_ID_KEY: &str = "guest_id";
+
+/// Create the session management layer.
+pub async fn create_session_layer(
+    pool: PgPool,
+    secure: bool,
+) -> SessionManagerLayer<PostgresStore> {
+    let session_store = PostgresStore::new(pool)
+        .with_schema_name("auth")
+        .expect("Invalid schema name for session store")
+        .with_table_name("tower_sessions")
+        .expect("Invalid table name for session store");
+
+    SessionManagerLayer::new(session_store)
+        .with_name(SESSION_COOKIE_NAME)
+        .with_secure(secure)
+        .with_same_site(SameSite::Lax)
+        .with_http_only(true)
+        .with_expiry(Expiry::OnInactivity(Duration::days(7)))
+}
+
+/// Hash a session token for storage.
+pub fn hash_token(token: &str) -> String {
+    use sha2::{Digest, Sha256};
+    let mut hasher = Sha256::new();
+    hasher.update(token.as_bytes());
+    hex::encode(hasher.finalize())
+}
+
+/// Generate a random session token.
+pub fn generate_token() -> String {
+    use rand::Rng;
+    let mut rng = rand::thread_rng();
+    let bytes: [u8; 32] = rng.r#gen();
+    hex::encode(bytes)
+}

crates/chattyness-user-ui/src/components.rs

@@ -0,0 +1,17 @@
+//! Reusable UI components.
+
+pub mod chat;
+pub mod editor;
+pub mod forms;
+pub mod layout;
+pub mod modals;
+pub mod scene_viewer;
+pub mod ws_client;
+
+pub use chat::*;
+pub use editor::*;
+pub use forms::*;
+pub use layout::*;
+pub use modals::*;
+pub use scene_viewer::*;
+pub use ws_client::*;

crates/chattyness-user-ui/src/components/chat.rs

@@ -0,0 +1,38 @@
+//! Chat components for realm chat interface.
+
+use leptos::prelude::*;
+
+/// Chat input component (placeholder UI).
+///
+/// Displays a text input field for typing messages.
+/// Currently non-functional - just UI placeholder.
+#[component]
+pub fn ChatInput() -> impl IntoView {
+    let (message, set_message) = signal(String::new());
+
+    view! {
+        <div class="chat-input-container w-full max-w-4xl mx-auto">
+            <div class="flex gap-2 items-center bg-gray-900/80 backdrop-blur-sm rounded-lg p-2 border border-gray-600">
+                <input
+                    type="text"
+                    placeholder="Type a message..."
+                    class="flex-1 bg-transparent text-white placeholder-gray-500 px-3 py-2 outline-none"
+                    prop:value=move || message.get()
+                    on:input=move |ev| {
+                        set_message.set(event_target_value(&ev));
+                    }
+                />
+                <button
+                    type="button"
+                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    disabled=move || message.get().trim().is_empty()
+                >
+                    "Send"
+                </button>
+            </div>
+            <p class="text-gray-500 text-xs mt-2 text-center">
+                "Chat functionality coming soon"
+            </p>
+        </div>
+    }
+}

crates/chattyness-user-ui/src/components/editor.rs

@@ -0,0 +1,357 @@
+//! Scene editor components.
+
+use leptos::prelude::*;
+use uuid::Uuid;
+
+use chattyness_db::models::SpotSummary;
+
+/// Drawing mode for spot editor.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum DrawingMode {
+    #[default]
+    Select,
+    Polygon,
+    Rectangle,
+}
+
+/// Toolbar for selecting drawing mode.
+#[component]
+pub fn DrawingModeToolbar(
+    #[prop(into)] mode: Signal<DrawingMode>,
+    on_change: Callback<DrawingMode>,
+) -> impl IntoView {
+    view! {
+        <div class="flex gap-2" role="radiogroup" aria-label="Drawing mode">
+            <button
+                type="button"
+                class=move || {
+                    let base = "px-3 py-1 rounded text-sm transition-colors";
+                    if mode.get() == DrawingMode::Select {
+                        format!("{} bg-blue-600 text-white", base)
+                    } else {
+                        format!("{} bg-gray-700 text-gray-300 hover:bg-gray-600", base)
+                    }
+                }
+                on:click=move |_| on_change.run(DrawingMode::Select)
+                aria-pressed=move || mode.get() == DrawingMode::Select
+            >
+                "Select"
+            </button>
+            <button
+                type="button"
+                class=move || {
+                    let base = "px-3 py-1 rounded text-sm transition-colors";
+                    if mode.get() == DrawingMode::Rectangle {
+                        format!("{} bg-blue-600 text-white", base)
+                    } else {
+                        format!("{} bg-gray-700 text-gray-300 hover:bg-gray-600", base)
+                    }
+                }
+                on:click=move |_| on_change.run(DrawingMode::Rectangle)
+                aria-pressed=move || mode.get() == DrawingMode::Rectangle
+            >
+                "Rectangle"
+            </button>
+            <button
+                type="button"
+                class=move || {
+                    let base = "px-3 py-1 rounded text-sm transition-colors";
+                    if mode.get() == DrawingMode::Polygon {
+                        format!("{} bg-blue-600 text-white", base)
+                    } else {
+                        format!("{} bg-gray-700 text-gray-300 hover:bg-gray-600", base)
+                    }
+                }
+                on:click=move |_| on_change.run(DrawingMode::Polygon)
+                aria-pressed=move || mode.get() == DrawingMode::Polygon
+            >
+                "Polygon"
+            </button>
+        </div>
+    }
+}
+
+/// Canvas for displaying scene with spots.
+#[component]
+pub fn SceneCanvas(
+    #[prop(into)] width: Signal<u32>,
+    #[prop(into)] height: Signal<u32>,
+    #[prop(into)] background_color: Signal<Option<String>>,
+    #[prop(into)] background_image: Signal<Option<String>>,
+    #[prop(into)] spots: Signal<Vec<SpotSummary>>,
+    #[prop(into)] selected_spot_id: Signal<Option<Uuid>>,
+    on_spot_click: Callback<Uuid>,
+) -> impl IntoView {
+    let canvas_style = Signal::derive(move || {
+        let w = width.get();
+        let h = height.get();
+        let bg_color = background_color.get().unwrap_or_else(|| "#1a1a2e".to_string());
+
+        if let Some(img) = background_image.get() {
+            format!(
+                "width: {}px; height: {}px; background-image: url('{}'); background-size: cover; background-position: center;",
+                w, h, img
+            )
+        } else {
+            format!("width: {}px; height: {}px; background-color: {};", w, h, bg_color)
+        }
+    });
+
+    view! {
+        <div class="relative overflow-auto border border-gray-700 rounded-lg bg-gray-900">
+            <div class="relative" style=move || canvas_style.get()>
+                {move || {
+                    spots
+                        .get()
+                        .into_iter()
+                        .map(|spot| {
+                            let spot_id = spot.id;
+                            let is_selected = selected_spot_id.get() == Some(spot_id);
+                            let style = parse_wkt_to_style(&spot.region_wkt);
+                            view! {
+                                <div
+                                    class=move || {
+                                        let base = "absolute border-2 cursor-pointer transition-colors";
+                                        if is_selected {
+                                            format!("{} border-blue-500 bg-blue-500/30", base)
+                                        } else {
+                                            format!("{} border-green-500/50 bg-green-500/20 hover:bg-green-500/30", base)
+                                        }
+                                    }
+                                    style=style
+                                    on:click=move |_| on_spot_click.run(spot_id)
+                                    role="button"
+                                    tabindex="0"
+                                />
+                            }
+                        })
+                        .collect_view()
+                }}
+            </div>
+        </div>
+    }
+}
+
+/// Canvas for drawing new spots.
+#[component]
+#[allow(unused_variables)]
+pub fn SpotDrawer(
+    #[prop(into)] width: Signal<u32>,
+    #[prop(into)] height: Signal<u32>,
+    #[prop(into)] mode: Signal<DrawingMode>,
+    on_complete: Callback<String>,
+    #[prop(into)] background_color: Signal<Option<String>>,
+    #[prop(into)] background_image: Signal<Option<String>>,
+    #[prop(into)] existing_spots_wkt: Signal<Vec<String>>,
+) -> impl IntoView {
+    let (drawing_points, _set_drawing_points) = signal(Vec::<(f64, f64)>::new());
+    let (is_drawing, _set_is_drawing) = signal(false);
+    let (start_point, _set_start_point) = signal(Option::<(f64, f64)>::None);
+    #[cfg(feature = "hydrate")]
+    let (set_drawing_points, set_is_drawing, set_start_point) =
+        (_set_drawing_points, _set_is_drawing, _set_start_point);
+
+    let canvas_style = Signal::derive(move || {
+        let w = width.get();
+        let h = height.get();
+        let bg_color = background_color.get().unwrap_or_else(|| "#1a1a2e".to_string());
+
+        if let Some(img) = background_image.get() {
+            format!(
+                "width: {}px; height: {}px; background-image: url('{}'); background-size: cover; background-position: center; cursor: crosshair;",
+                w, h, img
+            )
+        } else {
+            format!("width: {}px; height: {}px; background-color: {}; cursor: crosshair;", w, h, bg_color)
+        }
+    });
+
+    let on_mouse_down = move |ev: leptos::ev::MouseEvent| {
+        #[cfg(feature = "hydrate")]
+        {
+            let rect = ev
+                .target()
+                .and_then(|t| {
+                    use wasm_bindgen::JsCast;
+                    t.dyn_ref::<web_sys::HtmlElement>()
+                        .map(|el| el.get_bounding_client_rect())
+                });
+
+            if let Some(rect) = rect {
+                let x = ev.client_x() as f64 - rect.left();
+                let y = ev.client_y() as f64 - rect.top();
+
+                match mode.get() {
+                    DrawingMode::Rectangle => {
+                        set_start_point.set(Some((x, y)));
+                        set_is_drawing.set(true);
+                    }
+                    DrawingMode::Polygon => {
+                        let mut points = drawing_points.get();
+                        points.push((x, y));
+                        set_drawing_points.set(points);
+                    }
+                    DrawingMode::Select => {}
+                }
+            }
+        }
+    };
+
+    let on_mouse_up = move |ev: leptos::ev::MouseEvent| {
+        #[cfg(feature = "hydrate")]
+        {
+            if mode.get() == DrawingMode::Rectangle && is_drawing.get() {
+                if let Some((start_x, start_y)) = start_point.get() {
+                    let rect = ev
+                        .target()
+                        .and_then(|t| {
+                            use wasm_bindgen::JsCast;
+                            t.dyn_ref::<web_sys::HtmlElement>()
+                                .map(|el| el.get_bounding_client_rect())
+                        });
+
+                    if let Some(rect) = rect {
+                        let end_x = ev.client_x() as f64 - rect.left();
+                        let end_y = ev.client_y() as f64 - rect.top();
+
+                        let min_x = start_x.min(end_x);
+                        let min_y = start_y.min(end_y);
+                        let max_x = start_x.max(end_x);
+                        let max_y = start_y.max(end_y);
+
+                        if (max_x - min_x) > 10.0 && (max_y - min_y) > 10.0 {
+                            let wkt = format!(
+                                "POLYGON(({} {}, {} {}, {} {}, {} {}, {} {}))",
+                                min_x, min_y, max_x, min_y, max_x, max_y, min_x, max_y, min_x, min_y
+                            );
+                            on_complete.run(wkt);
+                        }
+                    }
+                }
+                set_is_drawing.set(false);
+                set_start_point.set(None);
+            }
+        }
+    };
+
+    let on_double_click = move |_| {
+        #[cfg(feature = "hydrate")]
+        {
+            if mode.get() == DrawingMode::Polygon {
+                let points = drawing_points.get();
+                if points.len() >= 3 {
+                    let wkt = points_to_wkt(&points);
+                    on_complete.run(wkt);
+                }
+                set_drawing_points.set(Vec::new());
+            }
+        }
+    };
+
+    view! {
+        <div class="relative overflow-auto border border-gray-700 rounded-lg bg-gray-900">
+            <div
+                class="relative"
+                style=move || canvas_style.get()
+                on:mousedown=on_mouse_down
+                on:mouseup=on_mouse_up
+                on:dblclick=on_double_click
+            >
+                // Render existing spots
+                {move || {
+                    existing_spots_wkt
+                        .get()
+                        .into_iter()
+                        .map(|wkt| {
+                            let style = parse_wkt_to_style(&wkt);
+                            view! {
+                                <div
+                                    class="absolute border-2 border-gray-500/50 bg-gray-500/20"
+                                    style=style
+                                />
+                            }
+                        })
+                        .collect_view()
+                }}
+
+                // Render drawing preview
+                {move || {
+                    let points = drawing_points.get();
+                    if !points.is_empty() && mode.get() == DrawingMode::Polygon {
+                        let svg_points: String = points
+                            .iter()
+                            .map(|(x, y)| format!("{},{}", x, y))
+                            .collect::<Vec<_>>()
+                            .join(" ");
+                        Some(view! {
+                            <svg class="absolute inset-0 pointer-events-none">
+                                <polyline
+                                    points=svg_points
+                                    fill="none"
+                                    stroke="#3b82f6"
+                                    stroke-width="2"
+                                />
+                            </svg>
+                        })
+                    } else {
+                        None
+                    }
+                }}
+            </div>
+        </div>
+    }
+}
+
+/// Parse WKT polygon to CSS positioning style.
+fn parse_wkt_to_style(wkt: &str) -> String {
+    let trimmed = wkt.trim();
+    if let Some(coords_str) = trimmed
+        .strip_prefix("POLYGON((")
+        .and_then(|s| s.strip_suffix("))"))
+    {
+        let points: Vec<(f64, f64)> = coords_str
+            .split(',')
+            .filter_map(|p| {
+                let coords: Vec<&str> = p.trim().split_whitespace().collect();
+                if coords.len() >= 2 {
+                    Some((coords[0].parse().ok()?, coords[1].parse().ok()?))
+                } else {
+                    None
+                }
+            })
+            .collect();
+
+        if points.len() >= 4 {
+            let min_x = points.iter().map(|(x, _)| *x).fold(f64::INFINITY, f64::min);
+            let min_y = points.iter().map(|(_, y)| *y).fold(f64::INFINITY, f64::min);
+            let max_x = points.iter().map(|(x, _)| *x).fold(f64::NEG_INFINITY, f64::max);
+            let max_y = points.iter().map(|(_, y)| *y).fold(f64::NEG_INFINITY, f64::max);
+
+            return format!(
+                "left: {}px; top: {}px; width: {}px; height: {}px;",
+                min_x,
+                min_y,
+                max_x - min_x,
+                max_y - min_y
+            );
+        }
+    }
+    String::new()
+}
+
+/// Convert points to WKT polygon.
+#[allow(dead_code)]
+fn points_to_wkt(points: &[(f64, f64)]) -> String {
+    if points.is_empty() {
+        return String::new();
+    }
+
+    let coords: String = points
+        .iter()
+        .chain(std::iter::once(&points[0]))
+        .map(|(x, y)| format!("{} {}", x, y))
+        .collect::<Vec<_>>()
+        .join(", ");
+
+    format!("POLYGON(({})", coords)
+}

crates/chattyness-user-ui/src/components/forms.rs

@@ -0,0 +1,345 @@
+//! Form components with WCAG 2.2 AA accessibility.
+
+use leptos::prelude::*;
+
+/// Text input field with label.
+#[component]
+pub fn TextInput(
+    name: &'static str,
+    label: &'static str,
+    #[prop(default = "text")] input_type: &'static str,
+    #[prop(optional)] placeholder: &'static str,
+    #[prop(optional)] help_text: &'static str,
+    #[prop(default = false)] required: bool,
+    #[prop(optional)] minlength: Option<i32>,
+    #[prop(optional)] maxlength: Option<i32>,
+    #[prop(optional)] pattern: &'static str,
+    #[prop(optional)] class: &'static str,
+    #[prop(into)] value: Signal<String>,
+    on_input: Callback<String>,
+) -> impl IntoView {
+    let input_id = name;
+    let help_id = format!("{}-help", name);
+    let has_help = !help_text.is_empty();
+
+    view! {
+        <div class=format!("space-y-2 {}", class)>
+            <label for=input_id class="block text-sm font-medium text-gray-300">
+                {label}
+                {if required {
+                    view! { <span class="text-red-400 ml-1" aria-hidden="true">"*"</span> }.into_any()
+                } else {
+                    view! { <span class="text-gray-500 ml-1">"(optional)"</span> }.into_any()
+                }}
+            </label>
+            <input
+                type=input_type
+                id=input_id
+                name=name
+                placeholder=placeholder
+                required=required
+                minlength=minlength
+                maxlength=maxlength
+                pattern=if pattern.is_empty() { None } else { Some(pattern) }
+                aria-describedby=if has_help { Some(help_id.clone()) } else { None }
+                class="input-base"
+                prop:value=move || value.get()
+                on:input=move |ev| on_input.run(event_target_value(&ev))
+            />
+            {if has_help {
+                view! { <p id=help_id class="text-sm text-gray-400">{help_text}</p> }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </div>
+    }
+}
+
+/// Textarea field with label.
+#[component]
+pub fn TextArea(
+    name: &'static str,
+    label: &'static str,
+    #[prop(optional)] placeholder: &'static str,
+    #[prop(optional)] help_text: &'static str,
+    #[prop(default = false)] required: bool,
+    #[prop(default = 3)] rows: i32,
+    #[prop(optional)] class: &'static str,
+    #[prop(into)] value: Signal<String>,
+    on_input: Callback<String>,
+) -> impl IntoView {
+    let input_id = name;
+    let help_id = format!("{}-help", name);
+    let has_help = !help_text.is_empty();
+
+    view! {
+        <div class=format!("space-y-2 {}", class)>
+            <label for=input_id class="block text-sm font-medium text-gray-300">
+                {label}
+                {if required {
+                    view! { <span class="text-red-400 ml-1" aria-hidden="true">"*"</span> }.into_any()
+                } else {
+                    view! { <span class="text-gray-500 ml-1">"(optional)"</span> }.into_any()
+                }}
+            </label>
+            <textarea
+                id=input_id
+                name=name
+                placeholder=placeholder
+                required=required
+                rows=rows
+                aria-describedby=if has_help { Some(help_id.clone()) } else { None }
+                class="input-base resize-y"
+                prop:value=move || value.get()
+                on:input=move |ev| on_input.run(event_target_value(&ev))
+            />
+            {if has_help {
+                view! { <p id=help_id class="text-sm text-gray-400">{help_text}</p> }.into_any()
+            } else {
+                view! {}.into_any()
+            }}
+        </div>
+    }
+}
+
+/// Radio button group.
+#[component]
+pub fn RadioGroup(
+    name: &'static str,
+    legend: &'static str,
+    options: Vec<(&'static str, &'static str, &'static str)>,
+    #[prop(into)] value: Signal<String>,
+    on_change: Callback<String>,
+) -> impl IntoView {
+    view! {
+        <fieldset class="space-y-3">
+            <legend class="block text-sm font-medium text-gray-300 mb-2">{legend}</legend>
+            <div class="space-y-2">
+                {options
+                    .into_iter()
+                    .map(|(val, label, description)| {
+                        let val_clone = val.to_string();
+                        let is_selected = Signal::derive(move || value.get() == val);
+                        view! {
+                            <label class="flex items-start space-x-3 cursor-pointer group">
+                                <input
+                                    type="radio"
+                                    name=name
+                                    value=val
+                                    checked=move || is_selected.get()
+                                    on:change=move |_| on_change.run(val_clone.clone())
+                                    class="mt-1 w-4 h-4 text-blue-500 bg-gray-700 border-gray-600 focus:ring-blue-500 focus:ring-2"
+                                />
+                                <div>
+                                    <span class="text-white group-hover:text-blue-400 transition-colors">
+                                        {label}
+                                    </span>
+                                    <p class="text-sm text-gray-400">{description}</p>
+                                </div>
+                            </label>
+                        }
+                    })
+                    .collect_view()}
+            </div>
+        </fieldset>
+    }
+}
+
+/// Checkbox input.
+#[component]
+pub fn Checkbox(
+    name: &'static str,
+    label: &'static str,
+    #[prop(optional)] description: &'static str,
+    #[prop(into)] checked: Signal<bool>,
+    on_change: Callback<bool>,
+) -> impl IntoView {
+    let has_description = !description.is_empty();
+
+    view! {
+        <label class="flex items-start space-x-3 cursor-pointer group">
+            <input
+                type="checkbox"
+                name=name
+                prop:checked=move || checked.get()
+                on:change=move |ev| on_change.run(event_target_checked(&ev))
+                class="mt-1 w-4 h-4 text-blue-500 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+            />
+            <div>
+                <span class="text-white group-hover:text-blue-400 transition-colors">{label}</span>
+                {if has_description {
+                    view! { <p class="text-sm text-gray-400">{description}</p> }.into_any()
+                } else {
+                    view! {}.into_any()
+                }}
+            </div>
+        </label>
+    }
+}
+
+/// Range slider input.
+#[component]
+pub fn RangeSlider(
+    name: &'static str,
+    label: &'static str,
+    min: i32,
+    max: i32,
+    #[prop(default = 1)] step: i32,
+    #[prop(into)] value: Signal<i32>,
+    on_change: Callback<i32>,
+) -> impl IntoView {
+    let input_id = name;
+
+    view! {
+        <div class="space-y-2">
+            <div class="flex justify-between items-center">
+                <label for=input_id class="block text-sm font-medium text-gray-300">
+                    {label}
+                </label>
+                <span class="text-sm text-gray-400">{move || value.get()}</span>
+            </div>
+            <input
+                type="range"
+                id=input_id
+                name=name
+                min=min
+                max=max
+                step=step
+                prop:value=move || value.get()
+                on:input=move |ev| {
+                    if let Ok(val) = event_target_value(&ev).parse::<i32>() {
+                        on_change.run(val);
+                    }
+                }
+                class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+            />
+            <div class="flex justify-between text-xs text-gray-500">
+                <span>{min}</span>
+                <span>{max}</span>
+            </div>
+        </div>
+    }
+}
+
+/// Primary submit button.
+#[component]
+pub fn SubmitButton(
+    #[prop(default = "Submit")] text: &'static str,
+    #[prop(default = "Submitting...")] loading_text: &'static str,
+    #[prop(into)] pending: Signal<bool>,
+) -> impl IntoView {
+    view! {
+        <button type="submit" disabled=move || pending.get() class="btn-primary w-full">
+            {move || if pending.get() { loading_text } else { text }}
+        </button>
+    }
+}
+
+/// Error alert box.
+#[component]
+pub fn ErrorAlert(#[prop(into)] message: Signal<Option<String>>) -> impl IntoView {
+    view! {
+        <Show when=move || message.get().is_some()>
+            <div class="error-message" role="alert">
+                <p>{move || message.get().unwrap_or_default()}</p>
+            </div>
+        </Show>
+    }
+}
+
+/// Success alert box.
+#[component]
+pub fn SuccessAlert(#[prop(into)] message: Signal<Option<String>>) -> impl IntoView {
+    view! {
+        <Show when=move || message.get().is_some()>
+            <div
+                class="p-4 bg-green-900/50 border border-green-500 rounded-lg text-green-200"
+                role="alert"
+            >
+                <p>{move || message.get().unwrap_or_default()}</p>
+            </div>
+        </Show>
+    }
+}
+
+/// Color picker component.
+#[component]
+pub fn ColorPicker(
+    #[prop(into)] value: Signal<String>,
+    on_change: Callback<String>,
+    label: &'static str,
+    id: &'static str,
+) -> impl IntoView {
+    view! {
+        <div class="flex items-center gap-3">
+            <label for=id class="text-sm font-medium text-gray-300">
+                {label}
+            </label>
+            <input
+                type="color"
+                id=id
+                prop:value=move || value.get()
+                on:input=move |ev| on_change.run(event_target_value(&ev))
+                class="w-10 h-10 rounded border border-gray-600 cursor-pointer"
+            />
+            <input
+                type="text"
+                prop:value=move || value.get()
+                on:input=move |ev| on_change.run(event_target_value(&ev))
+                class="input-base w-24 text-sm"
+                placeholder="#1a1a2e"
+            />
+        </div>
+    }
+}
+
+/// Color palette component.
+#[component]
+pub fn ColorPalette(#[prop(into)] value: Signal<String>, on_change: Callback<String>) -> impl IntoView {
+    let colors = [
+        "#1a1a2e", "#16213e", "#0f3460", "#e94560", "#533483", "#2c3e50", "#1e8449", "#d35400",
+    ];
+
+    view! {
+        <div class="flex gap-2 flex-wrap">
+            {colors
+                .into_iter()
+                .map(|color| {
+                    let is_selected = Signal::derive(move || value.get() == color);
+                    let color_string = color.to_string();
+                    view! {
+                        <button
+                            type="button"
+                            class=move || {
+                                let base = "w-8 h-8 rounded border-2 transition-transform hover:scale-110";
+                                if is_selected.get() {
+                                    format!("{} border-white", base)
+                                } else {
+                                    format!("{} border-transparent", base)
+                                }
+                            }
+                            style=format!("background-color: {}", color)
+                            title=color
+                            on:click=move |_| on_change.run(color_string.clone())
+                        />
+                    }
+                })
+                .collect_view()}
+        </div>
+    }
+}
+
+/// Get the checked state of a checkbox input.
+#[cfg(feature = "hydrate")]
+fn event_target_checked(ev: &leptos::ev::Event) -> bool {
+    use wasm_bindgen::JsCast;
+    ev.target()
+        .and_then(|t| t.dyn_ref::<web_sys::HtmlInputElement>().map(|el| el.checked()))
+        .unwrap_or(false)
+}
+
+/// Stub for SSR.
+#[cfg(not(feature = "hydrate"))]
+fn event_target_checked(_ev: &leptos::ev::Event) -> bool {
+    false
+}

crates/chattyness-user-ui/src/components/layout.rs

@@ -0,0 +1,214 @@
+//! Layout components.
+
+use leptos::prelude::*;
+
+/// Main page layout wrapper.
+#[component]
+pub fn PageLayout(children: Children) -> impl IntoView {
+    view! {
+        <div class="min-h-screen bg-gray-900 text-white flex flex-col overflow-x-hidden">
+            <Header />
+            <main class="flex-1">{children()}</main>
+            <Footer />
+        </div>
+    }
+}
+
+/// Simple site header for non-realm pages.
+#[component]
+pub fn Header() -> impl IntoView {
+    view! {
+        <header class="bg-gray-800 border-b border-gray-700">
+            <nav class="px-4" aria-label="Main navigation">
+                <div class="flex items-center h-16">
+                    <a
+                        href="/"
+                        class="flex items-center space-x-2 text-xl font-bold text-white hover:text-blue-400 transition-colors"
+                    >
+                        <img src="/icons/castle.svg" alt="" class="w-6 h-6" aria-hidden="true" />
+                        <span>"Chattyness"</span>
+                    </a>
+                </div>
+            </nav>
+        </header>
+    }
+}
+
+/// Realm-specific header with realm/scene info and user actions.
+#[component]
+pub fn RealmHeader(
+    realm_name: String,
+    realm_slug: String,
+    realm_description: Option<String>,
+    scene_name: String,
+    scene_description: Option<String>,
+    online_count: i32,
+    total_members: i32,
+    max_capacity: i32,
+    can_admin: bool,
+    on_logout: Callback<()>,
+) -> impl IntoView {
+    let stats_tooltip = format!("Members: {} / Max: {}", total_members, max_capacity);
+    let online_text = format!("{} ONLINE", online_count);
+    let admin_url = format!("/admin/realms/{}", realm_slug);
+
+    view! {
+        <header class="bg-gray-800 border-b border-gray-700">
+            <div class="flex items-center justify-between h-16 px-4">
+                // Left side: Logo + Realm/Scene info
+                <div class="flex items-center gap-4">
+                    <a
+                        href="/"
+                        class="flex items-center space-x-2 text-xl font-bold text-white hover:text-blue-400 transition-colors"
+                    >
+                        <img src="/icons/castle.svg" alt="" class="w-6 h-6" aria-hidden="true" />
+                        <span>"Chattyness"</span>
+                    </a>
+                    <span class="text-gray-500">"|"</span>
+                    <span
+                        class="text-white font-medium cursor-default"
+                        title=realm_description.unwrap_or_default()
+                    >
+                        {realm_name}
+                    </span>
+                    <span class="text-gray-500">"/"</span>
+                    <span
+                        class="text-gray-300 cursor-default"
+                        title=scene_description.unwrap_or_default()
+                    >
+                        {scene_name}
+                    </span>
+                </div>
+
+                // Right side: Stats + Actions
+                <div class="flex items-center gap-4">
+                    <span class="text-green-400 font-medium cursor-default" title=stats_tooltip>
+                        {online_text}
+                    </span>
+                    <button
+                        type="button"
+                        class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                        on:click=move |_| on_logout.run(())
+                    >
+                        "Logout"
+                    </button>
+                    {can_admin.then(|| {
+                        view! {
+                            <a
+                                href=admin_url
+                                class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                            >
+                                "Admin"
+                            </a>
+                        }
+                    })}
+                </div>
+            </div>
+        </header>
+    }
+}
+
+/// Site footer.
+#[component]
+pub fn Footer() -> impl IntoView {
+    view! {
+        <footer class="bg-gray-800 border-t border-gray-700 py-8">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex flex-col md:flex-row items-center justify-between">
+                    <p class="text-gray-400 text-sm">
+                        "Built with "
+                        <a
+                            href="https://leptos.dev"
+                            class="text-blue-400 hover:underline"
+                            target="_blank"
+                            rel="noopener"
+                        >
+                            "Leptos"
+                        </a>
+                        " and "
+                        <a
+                            href="https://www.rust-lang.org"
+                            class="text-blue-400 hover:underline"
+                            target="_blank"
+                            rel="noopener"
+                        >
+                            "Rust"
+                        </a>
+                        "."
+                    </p>
+                    <nav class="flex items-center space-x-4 mt-4 md:mt-0" aria-label="Footer navigation">
+                        <a
+                            href="/about"
+                            class="text-gray-400 hover:text-white text-sm transition-colors"
+                        >
+                            "About"
+                        </a>
+                        <a
+                            href="/privacy"
+                            class="text-gray-400 hover:text-white text-sm transition-colors"
+                        >
+                            "Privacy"
+                        </a>
+                        <a
+                            href="/terms"
+                            class="text-gray-400 hover:text-white text-sm transition-colors"
+                        >
+                            "Terms"
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </footer>
+    }
+}
+
+/// Simple centered layout for forms and dialogs.
+#[component]
+pub fn CenteredLayout(children: Children) -> impl IntoView {
+    view! {
+        <div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
+            {children()}
+        </div>
+    }
+}
+
+/// Card container.
+#[component]
+pub fn Card(#[prop(optional)] class: &'static str, children: Children) -> impl IntoView {
+    let base_class = "bg-gray-800 rounded-lg shadow-xl";
+    let combined_class = if class.is_empty() {
+        base_class.to_string()
+    } else {
+        format!("{} {}", base_class, class)
+    };
+
+    view! { <div class=combined_class>{children()}</div> }
+}
+
+/// Scene thumbnail component.
+#[component]
+pub fn SceneThumbnail(scene: chattyness_db::models::SceneSummary) -> impl IntoView {
+    let background_style = match (&scene.background_image_path, &scene.background_color) {
+        (Some(path), _) => format!("background-image: url('{}'); background-size: cover; background-position: center;", path),
+        (None, Some(color)) => format!("background-color: {};", color),
+        (None, None) => "background-color: #1a1a2e;".to_string(),
+    };
+
+    view! {
+        <Card class="overflow-hidden">
+            <div class="h-32 w-full" style=background_style></div>
+            <div class="p-4">
+                <h3 class="text-lg font-semibold text-white">{scene.name}</h3>
+                <p class="text-gray-400 text-sm">"/" {scene.slug}</p>
+                <div class="flex items-center gap-2 mt-2">
+                    {scene.is_entry_point.then(|| view! {
+                        <span class="text-xs px-2 py-0.5 bg-green-600 rounded">"Entry"</span>
+                    })}
+                    {scene.is_hidden.then(|| view! {
+                        <span class="text-xs px-2 py-0.5 bg-gray-600 rounded">"Hidden"</span>
+                    })}
+                </div>
+            </div>
+        </Card>
+    }
+}

crates/chattyness-user-ui/src/components/modals.rs

@@ -0,0 +1,200 @@
+//! Modal components with WCAG 2.2 AA accessibility.
+
+use leptos::prelude::*;
+
+/// Confirmation modal for joining a realm.
+#[component]
+pub fn JoinRealmModal(
+    #[prop(into)] open: Signal<bool>,
+    realm_name: String,
+    realm_slug: String,
+    #[prop(into)] pending: Signal<bool>,
+    on_confirm: Callback<()>,
+    on_cancel: Callback<()>,
+) -> impl IntoView {
+    let on_cancel_backdrop = on_cancel.clone();
+    let on_cancel_close = on_cancel.clone();
+    let on_cancel_button = on_cancel.clone();
+
+    let (name_sig, _) = signal(realm_name);
+    let (slug_sig, _) = signal(realm_slug);
+
+    view! {
+        <Show when=move || open.get()>
+            <div
+                class="fixed inset-0 z-50 flex items-center justify-center"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="join-modal-title"
+            >
+                <div
+                    class="absolute inset-0 bg-black/70 backdrop-blur-sm"
+                    on:click=move |_| on_cancel_backdrop.run(())
+                    aria-hidden="true"
+                />
+
+                <div class="relative bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 border border-gray-700">
+                    <button
+                        type="button"
+                        class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+                        on:click=move |_| on_cancel_close.run(())
+                        aria-label="Close dialog"
+                    >
+                        <svg
+                            class="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+
+                    <div class="text-center">
+                        <div class="mx-auto w-16 h-16 rounded-full bg-blue-600/20 flex items-center justify-center mb-4">
+                            <img
+                                src="/icons/castle.svg"
+                                alt=""
+                                class="w-8 h-8"
+                                aria-hidden="true"
+                            />
+                        </div>
+
+                        <h3 id="join-modal-title" class="text-xl font-bold text-white mb-2">
+                            "Join " {move || name_sig.get()} "?"
+                        </h3>
+
+                        <p class="text-gray-400 mb-6">
+                            "You're not a member of "
+                            <span class="text-blue-400 font-medium">{move || slug_sig.get()}</span>
+                            " yet. Would you like to join this realm?"
+                        </p>
+
+                        <div class="flex flex-col sm:flex-row gap-3 justify-center">
+                            <button
+                                type="button"
+                                class="btn-secondary px-6 py-2"
+                                on:click=move |_| on_cancel_button.run(())
+                                disabled=move || pending.get()
+                            >
+                                "Cancel"
+                            </button>
+                            <button
+                                type="button"
+                                class="btn-primary px-6 py-2"
+                                on:click=move |_| on_confirm.run(())
+                                disabled=move || pending.get()
+                            >
+                                {move || if pending.get() { "Joining..." } else { "Join Realm" }}
+                            </button>
+                        </div>
+
+                        <p class="text-sm text-gray-500 mt-4">
+                            "You can leave a realm at any time from your profile settings."
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </Show>
+    }
+}
+
+/// Confirmation modal for general actions.
+#[component]
+pub fn ConfirmModal(
+    #[prop(into)] open: Signal<bool>,
+    title: &'static str,
+    message: String,
+    #[prop(default = "Confirm")] confirm_text: &'static str,
+    #[prop(default = "Cancel")] cancel_text: &'static str,
+    #[prop(default = false)] destructive: bool,
+    #[prop(into)] pending: Signal<bool>,
+    on_confirm: Callback<()>,
+    on_cancel: Callback<()>,
+) -> impl IntoView {
+    let on_cancel_backdrop = on_cancel.clone();
+    let on_cancel_close = on_cancel.clone();
+    let on_cancel_button = on_cancel.clone();
+
+    let (message_sig, _) = signal(message);
+
+    let confirm_class = if destructive {
+        "bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50"
+    } else {
+        "btn-primary px-6 py-2"
+    };
+
+    view! {
+        <Show when=move || open.get()>
+            <div
+                class="fixed inset-0 z-50 flex items-center justify-center"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="confirm-modal-title"
+            >
+                <div
+                    class="absolute inset-0 bg-black/70 backdrop-blur-sm"
+                    on:click=move |_| on_cancel_backdrop.run(())
+                    aria-hidden="true"
+                />
+
+                <div class="relative bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 border border-gray-700">
+                    <button
+                        type="button"
+                        class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+                        on:click=move |_| on_cancel_close.run(())
+                        aria-label="Close dialog"
+                    >
+                        <svg
+                            class="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+
+                    <div class="text-center">
+                        <h3 id="confirm-modal-title" class="text-xl font-bold text-white mb-4">
+                            {title}
+                        </h3>
+
+                        <p class="text-gray-400 mb-6">{move || message_sig.get()}</p>
+
+                        <div class="flex flex-col sm:flex-row gap-3 justify-center">
+                            <button
+                                type="button"
+                                class="btn-secondary px-6 py-2"
+                                on:click=move |_| on_cancel_button.run(())
+                                disabled=move || pending.get()
+                            >
+                                {cancel_text}
+                            </button>
+                            <button
+                                type="button"
+                                class=confirm_class
+                                on:click=move |_| on_confirm.run(())
+                                disabled=move || pending.get()
+                            >
+                                {move || if pending.get() { "Please wait..." } else { confirm_text }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Show>
+    }
+}

crates/chattyness-user-ui/src/components/scene_viewer.rs

@@ -0,0 +1,421 @@
+//! Scene viewer component for displaying realm scenes with avatars.
+//!
+//! Uses layered canvases for efficient rendering:
+//! - Background canvas: Static, drawn once when scene loads
+//! - Avatar canvas: Dynamic, redrawn when members change
+
+use leptos::prelude::*;
+
+use chattyness_db::models::{ChannelMemberWithAvatar, Scene};
+
+/// Parse bounds WKT to extract width and height.
+///
+/// Expected format: "POLYGON((0 0, WIDTH 0, WIDTH HEIGHT, 0 HEIGHT, 0 0))"
+fn parse_bounds_dimensions(bounds_wkt: &str) -> Option<(u32, u32)> {
+    let trimmed = bounds_wkt.trim();
+    let coords_str = trimmed
+        .strip_prefix("POLYGON((")
+        .and_then(|s| s.strip_suffix("))"))?;
+
+    let points: Vec<&str> = coords_str.split(',').collect();
+    if points.len() < 4 {
+        return None;
+    }
+
+    let mut max_x: f64 = 0.0;
+    let mut max_y: f64 = 0.0;
+
+    for point in points.iter() {
+        let coords: Vec<&str> = point.trim().split_whitespace().collect();
+        if coords.len() >= 2 {
+            if let (Ok(x), Ok(y)) = (coords[0].parse::<f64>(), coords[1].parse::<f64>()) {
+                if x > max_x {
+                    max_x = x;
+                }
+                if y > max_y {
+                    max_y = y;
+                }
+            }
+        }
+    }
+
+    if max_x > 0.0 && max_y > 0.0 {
+        Some((max_x as u32, max_y as u32))
+    } else {
+        None
+    }
+}
+
+/// Scene viewer component for displaying a realm scene with avatars.
+///
+/// Uses two layered canvases:
+/// - Background canvas (z-index 0): Static background, drawn once
+/// - Avatar canvas (z-index 1): Transparent, redrawn on member updates
+#[component]
+pub fn RealmSceneViewer(
+    scene: Scene,
+    #[allow(unused)]
+    realm_slug: String,
+    #[prop(into)]
+    members: Signal<Vec<ChannelMemberWithAvatar>>,
+    #[prop(into)]
+    on_move: Callback<(f64, f64)>,
+) -> impl IntoView {
+    let dimensions = parse_bounds_dimensions(&scene.bounds_wkt);
+    let (scene_width, scene_height) = dimensions.unwrap_or((800, 600));
+
+    let bg_color = scene
+        .background_color
+        .clone()
+        .unwrap_or_else(|| "#1a1a2e".to_string());
+
+    #[allow(unused_variables)]
+    let has_background_image = scene.background_image_path.is_some();
+    #[allow(unused_variables)]
+    let image_path = scene.background_image_path.clone().unwrap_or_default();
+
+    // Two separate canvas refs for layered rendering
+    let bg_canvas_ref = NodeRef::<leptos::html::Canvas>::new();
+    let avatar_canvas_ref = NodeRef::<leptos::html::Canvas>::new();
+
+    // Store scale factors for coordinate conversion (shared between both canvases)
+    let scale_x = StoredValue::new(1.0_f64);
+    let scale_y = StoredValue::new(1.0_f64);
+    let offset_x = StoredValue::new(0.0_f64);
+    let offset_y = StoredValue::new(0.0_f64);
+
+    // Handle canvas click for movement (on avatar canvas - topmost layer)
+    #[cfg(feature = "hydrate")]
+    let on_canvas_click = {
+        let on_move = on_move.clone();
+        move |ev: web_sys::MouseEvent| {
+            let Some(canvas) = avatar_canvas_ref.get() else {
+                return;
+            };
+
+            let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
+            let rect = canvas_el.get_bounding_client_rect();
+
+            let canvas_x = ev.client_x() as f64 - rect.left();
+            let canvas_y = ev.client_y() as f64 - rect.top();
+
+            let sx = scale_x.get_value();
+            let sy = scale_y.get_value();
+            let ox = offset_x.get_value();
+            let oy = offset_y.get_value();
+
+            if sx > 0.0 && sy > 0.0 {
+                let scene_x = (canvas_x - ox) / sx;
+                let scene_y = (canvas_y - oy) / sy;
+
+                let scene_x = scene_x.max(0.0).min(scene_width as f64);
+                let scene_y = scene_y.max(0.0).min(scene_height as f64);
+
+                on_move.run((scene_x, scene_y));
+            }
+        }
+    };
+
+    #[cfg(feature = "hydrate")]
+    {
+        use std::cell::RefCell;
+        use std::rc::Rc;
+        use wasm_bindgen::{closure::Closure, JsCast};
+
+        let image_path_clone = image_path.clone();
+        let bg_color_clone = bg_color.clone();
+        let scene_width_f = scene_width as f64;
+        let scene_height_f = scene_height as f64;
+
+        // Flag to track if background has been drawn
+        let bg_drawn = Rc::new(RefCell::new(false));
+
+        // =========================================================
+        // Background Effect - runs once on mount, draws static background
+        // =========================================================
+        Effect::new(move |_| {
+            // Don't track any reactive signals - this should only run once
+            let Some(canvas) = bg_canvas_ref.get() else {
+                return;
+            };
+
+            // Skip if already drawn
+            if *bg_drawn.borrow() {
+                return;
+            }
+
+            let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
+            let canvas_el = canvas_el.clone();
+            let bg_color = bg_color_clone.clone();
+            let image_path = image_path_clone.clone();
+            let bg_drawn_inner = bg_drawn.clone();
+
+            let draw_bg = Closure::once(Box::new(move || {
+                let display_width = canvas_el.client_width() as u32;
+                let display_height = canvas_el.client_height() as u32;
+
+                if display_width == 0 || display_height == 0 {
+                    return;
+                }
+
+                canvas_el.set_width(display_width);
+                canvas_el.set_height(display_height);
+
+                // Calculate scale to fit scene in canvas
+                let canvas_aspect = display_width as f64 / display_height as f64;
+                let scene_aspect = scene_width_f / scene_height_f;
+
+                let (draw_width, draw_height, draw_x, draw_y) = if canvas_aspect > scene_aspect {
+                    let h = display_height as f64;
+                    let w = h * scene_aspect;
+                    let x = (display_width as f64 - w) / 2.0;
+                    (w, h, x, 0.0)
+                } else {
+                    let w = display_width as f64;
+                    let h = w / scene_aspect;
+                    let y = (display_height as f64 - h) / 2.0;
+                    (w, h, 0.0, y)
+                };
+
+                // Store scale factors
+                let sx = draw_width / scene_width_f;
+                let sy = draw_height / scene_height_f;
+                scale_x.set_value(sx);
+                scale_y.set_value(sy);
+                offset_x.set_value(draw_x);
+                offset_y.set_value(draw_y);
+
+                if let Ok(Some(ctx)) = canvas_el.get_context("2d") {
+                    let ctx: web_sys::CanvasRenderingContext2d =
+                        ctx.dyn_into::<web_sys::CanvasRenderingContext2d>().unwrap();
+
+                    // Fill letterbox area with black
+                    ctx.set_fill_style_str("#000");
+                    ctx.fill_rect(0.0, 0.0, display_width as f64, display_height as f64);
+
+                    // Fill scene area with background color
+                    ctx.set_fill_style_str(&bg_color);
+                    ctx.fill_rect(draw_x, draw_y, draw_width, draw_height);
+
+                    // Draw background image if available
+                    if has_background_image && !image_path.is_empty() {
+                        let img = web_sys::HtmlImageElement::new().unwrap();
+                        let img_clone = img.clone();
+                        let ctx_clone = ctx.clone();
+
+                        let onload = Closure::once(Box::new(move || {
+                            let _ = ctx_clone.draw_image_with_html_image_element_and_dw_and_dh(
+                                &img_clone, draw_x, draw_y, draw_width, draw_height,
+                            );
+                        }) as Box<dyn FnOnce()>);
+
+                        img.set_onload(Some(onload.as_ref().unchecked_ref()));
+                        onload.forget();
+                        img.set_src(&image_path);
+                    }
+
+                    // Mark background as drawn
+                    *bg_drawn_inner.borrow_mut() = true;
+                }
+            }) as Box<dyn FnOnce()>);
+
+            let window = web_sys::window().unwrap();
+            let _ = window.request_animation_frame(draw_bg.as_ref().unchecked_ref());
+            draw_bg.forget();
+        });
+
+        // =========================================================
+        // Avatar Effect - runs when members change, redraws avatars only
+        // =========================================================
+        Effect::new(move |_| {
+            // Track members signal - this Effect reruns when members change
+            let current_members = members.get();
+
+            let Some(canvas) = avatar_canvas_ref.get() else {
+                return;
+            };
+
+            let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
+            let canvas_el = canvas_el.clone();
+
+            let draw_avatars_closure = Closure::once(Box::new(move || {
+                let display_width = canvas_el.client_width() as u32;
+                let display_height = canvas_el.client_height() as u32;
+
+                if display_width == 0 || display_height == 0 {
+                    return;
+                }
+
+                // Resize avatar canvas to match (if needed)
+                if canvas_el.width() != display_width || canvas_el.height() != display_height {
+                    canvas_el.set_width(display_width);
+                    canvas_el.set_height(display_height);
+                }
+
+                if let Ok(Some(ctx)) = canvas_el.get_context("2d") {
+                    let ctx: web_sys::CanvasRenderingContext2d =
+                        ctx.dyn_into::<web_sys::CanvasRenderingContext2d>().unwrap();
+
+                    // Clear with transparency (not fill - keeps canvas transparent)
+                    ctx.clear_rect(0.0, 0.0, display_width as f64, display_height as f64);
+
+                    // Get stored scale factors
+                    let sx = scale_x.get_value();
+                    let sy = scale_y.get_value();
+                    let ox = offset_x.get_value();
+                    let oy = offset_y.get_value();
+
+                    // Draw avatars
+                    draw_avatars(&ctx, &current_members, sx, sy, ox, oy);
+                }
+            }) as Box<dyn FnOnce()>);
+
+            let window = web_sys::window().unwrap();
+            let _ = window.request_animation_frame(draw_avatars_closure.as_ref().unchecked_ref());
+            draw_avatars_closure.forget();
+        });
+    }
+
+    let aspect_ratio = scene_width as f64 / scene_height as f64;
+
+    view! {
+        <div class="scene-container w-full h-full flex justify-center items-center">
+            <div
+                class="scene-canvas relative overflow-hidden cursor-pointer"
+                style:background-color=bg_color.clone()
+                style:aspect-ratio=format!("{} / {}", scene_width, scene_height)
+                style:width=format!("min(100%, calc((100vh - 64px) * {}))", aspect_ratio)
+                style:max-height="calc(100vh - 64px)"
+            >
+                // Background layer - static, drawn once
+                <canvas
+                    node_ref=bg_canvas_ref
+                    class="absolute inset-0 w-full h-full"
+                    style="z-index: 0"
+                    aria-hidden="true"
+                />
+                // Avatar layer - dynamic, transparent background
+                <canvas
+                    node_ref=avatar_canvas_ref
+                    class="absolute inset-0 w-full h-full"
+                    style="z-index: 1"
+                    aria-label=format!("Scene: {}", scene.name)
+                    role="img"
+                    on:click=move |ev| {
+                        #[cfg(feature = "hydrate")]
+                        on_canvas_click(ev);
+                        #[cfg(not(feature = "hydrate"))]
+                        let _ = ev;
+                    }
+                >
+                    {format!("Scene: {}", scene.name)}
+                </canvas>
+            </div>
+        </div>
+    }
+}
+
+#[cfg(feature = "hydrate")]
+use wasm_bindgen::JsCast;
+
+/// Normalize an asset path to be absolute, prefixing with /static/ if needed.
+#[cfg(feature = "hydrate")]
+fn normalize_asset_path(path: &str) -> String {
+    if path.starts_with('/') {
+        path.to_string()
+    } else {
+        format!("/static/{}", path)
+    }
+}
+
+#[cfg(feature = "hydrate")]
+fn draw_avatars(
+    ctx: &web_sys::CanvasRenderingContext2d,
+    members: &[ChannelMemberWithAvatar],
+    scale_x: f64,
+    scale_y: f64,
+    offset_x: f64,
+    offset_y: f64,
+) {
+    for member in members {
+        let x = member.member.position_x * scale_x + offset_x;
+        let y = member.member.position_y * scale_y + offset_y;
+
+        let avatar_size = 48.0 * scale_x.min(scale_y);
+
+        // Draw avatar placeholder circle
+        ctx.begin_path();
+        let _ = ctx.arc(x, y - avatar_size / 2.0, avatar_size / 2.0, 0.0, std::f64::consts::PI * 2.0);
+        ctx.set_fill_style_str("#6366f1");
+        ctx.fill();
+
+        // Draw skin layer sprite if available
+        if let Some(ref skin_path) = member.avatar.skin_layer[4] {
+            let img = web_sys::HtmlImageElement::new().unwrap();
+            let img_clone = img.clone();
+            let ctx_clone = ctx.clone();
+            let draw_x = x;
+            let draw_y = y - avatar_size;
+            let size = avatar_size;
+
+            let onload = wasm_bindgen::closure::Closure::once(Box::new(move || {
+                let _ = ctx_clone.draw_image_with_html_image_element_and_dw_and_dh(
+                    &img_clone, draw_x - size / 2.0, draw_y, size, size,
+                );
+            }) as Box<dyn FnOnce()>);
+
+            img.set_onload(Some(onload.as_ref().unchecked_ref()));
+            onload.forget();
+            img.set_src(&normalize_asset_path(skin_path));
+        }
+
+        // Draw emotion overlay if available
+        if let Some(ref emotion_path) = member.avatar.emotion_layer[4] {
+            let img = web_sys::HtmlImageElement::new().unwrap();
+            let img_clone = img.clone();
+            let ctx_clone = ctx.clone();
+            let draw_x = x;
+            let draw_y = y - avatar_size;
+            let size = avatar_size;
+
+            let onload = wasm_bindgen::closure::Closure::once(Box::new(move || {
+                let _ = ctx_clone.draw_image_with_html_image_element_and_dw_and_dh(
+                    &img_clone, draw_x - size / 2.0, draw_y, size, size,
+                );
+            }) as Box<dyn FnOnce()>);
+
+            img.set_onload(Some(onload.as_ref().unchecked_ref()));
+            onload.forget();
+            img.set_src(&normalize_asset_path(emotion_path));
+        }
+
+        // Draw emotion indicator on avatar
+        let emotion = member.member.current_emotion;
+        if emotion > 0 {
+            // Draw emotion number in a small badge
+            let badge_size = 16.0 * scale_x.min(scale_y);
+            let badge_x = x + avatar_size / 2.0 - badge_size / 2.0;
+            let badge_y = y - avatar_size - badge_size / 2.0;
+
+            // Badge background
+            ctx.begin_path();
+            let _ = ctx.arc(badge_x, badge_y, badge_size / 2.0, 0.0, std::f64::consts::PI * 2.0);
+            ctx.set_fill_style_str("#f59e0b"); // Amber color for emotion badge
+            ctx.fill();
+
+            // Emotion number
+            ctx.set_fill_style_str("#000");
+            ctx.set_font(&format!("bold {}px sans-serif", 10.0 * scale_x.min(scale_y)));
+            ctx.set_text_align("center");
+            ctx.set_text_baseline("middle");
+            let _ = ctx.fill_text(&format!("{}", emotion), badge_x, badge_y);
+        }
+
+        // Draw display name
+        ctx.set_fill_style_str("#fff");
+        ctx.set_font(&format!("{}px sans-serif", 12.0 * scale_x.min(scale_y)));
+        ctx.set_text_align("center");
+        ctx.set_text_baseline("alphabetic");
+        let _ = ctx.fill_text(&member.member.display_name, x, y + 10.0 * scale_y);
+    }
+}

crates/chattyness-user-ui/src/components/ws_client.rs

@@ -0,0 +1,257 @@
+//! WebSocket client for channel presence.
+//!
+//! Provides a Leptos hook to manage WebSocket connections for real-time
+//! position updates, emotion changes, and member synchronization.
+
+use leptos::prelude::*;
+use leptos::reactive::owner::LocalStorage;
+
+use chattyness_db::models::ChannelMemberWithAvatar;
+use chattyness_db::ws_messages::{ClientMessage, ServerMessage};
+
+/// WebSocket connection state.
+#[derive(Clone, Copy, PartialEq, Eq, Debug)]
+pub enum WsState {
+    /// Attempting to connect.
+    Connecting,
+    /// Connected and ready.
+    Connected,
+    /// Disconnected (not connected).
+    Disconnected,
+    /// Connection error occurred.
+    Error,
+}
+
+/// Sender function type for WebSocket messages.
+pub type WsSender = Box<dyn Fn(ClientMessage)>;
+
+/// Local stored value type for the sender (non-Send, WASM-compatible).
+pub type WsSenderStorage = StoredValue<Option<WsSender>, LocalStorage>;
+
+/// Hook to manage WebSocket connection for a channel.
+///
+/// Returns a tuple of:
+/// - `Signal<WsState>` - The current connection state
+/// - `WsSenderStorage` - A stored sender function to send messages
+#[cfg(feature = "hydrate")]
+pub fn use_channel_websocket(
+    realm_slug: Signal<String>,
+    channel_id: Signal<Option<uuid::Uuid>>,
+    on_members_update: Callback<Vec<ChannelMemberWithAvatar>>,
+) -> (Signal<WsState>, WsSenderStorage) {
+    use std::cell::RefCell;
+    use std::rc::Rc;
+    use wasm_bindgen::{closure::Closure, JsCast};
+    use web_sys::{CloseEvent, ErrorEvent, MessageEvent, WebSocket};
+
+    let (ws_state, set_ws_state) = signal(WsState::Disconnected);
+    let ws_ref: Rc<RefCell<Option<WebSocket>>> = Rc::new(RefCell::new(None));
+    let members: Rc<RefCell<Vec<ChannelMemberWithAvatar>>> = Rc::new(RefCell::new(Vec::new()));
+
+    // Create a stored sender function (using new_local for WASM single-threaded environment)
+    let ws_ref_for_send = ws_ref.clone();
+    let sender: WsSenderStorage = StoredValue::new_local(Some(Box::new(
+        move |msg: ClientMessage| {
+            if let Some(ws) = ws_ref_for_send.borrow().as_ref() {
+                if ws.ready_state() == WebSocket::OPEN {
+                    if let Ok(json) = serde_json::to_string(&msg) {
+                        #[cfg(debug_assertions)]
+                        web_sys::console::log_1(&format!("[WS->Server] {}", json).into());
+                        let _ = ws.send_with_str(&json);
+                    }
+                }
+            }
+        },
+    )));
+
+    // Effect to manage WebSocket lifecycle
+    let ws_ref_clone = ws_ref.clone();
+    let members_clone = members.clone();
+
+    Effect::new(move |_| {
+        let slug = realm_slug.get();
+        let ch_id = channel_id.get();
+
+        // Cleanup previous connection
+        if let Some(old_ws) = ws_ref_clone.borrow_mut().take() {
+            let _ = old_ws.close();
+        }
+
+        let Some(ch_id) = ch_id else {
+            set_ws_state.set(WsState::Disconnected);
+            return;
+        };
+
+        if slug.is_empty() {
+            set_ws_state.set(WsState::Disconnected);
+            return;
+        }
+
+        // Construct WebSocket URL
+        let window = web_sys::window().unwrap();
+        let location = window.location();
+        let protocol = if location.protocol().unwrap_or_default() == "https:" {
+            "wss:"
+        } else {
+            "ws:"
+        };
+        let host = location.host().unwrap_or_default();
+        let url = format!(
+            "{}//{}/api/realms/{}/channels/{}/ws",
+            protocol, host, slug, ch_id
+        );
+
+        #[cfg(debug_assertions)]
+        web_sys::console::log_1(&format!("[WS] Connecting to: {}", url).into());
+
+        set_ws_state.set(WsState::Connecting);
+
+        let ws = match WebSocket::new(&url) {
+            Ok(ws) => ws,
+            Err(e) => {
+                #[cfg(debug_assertions)]
+                web_sys::console::error_1(&format!("[WS] Failed to create: {:?}", e).into());
+                set_ws_state.set(WsState::Error);
+                return;
+            }
+        };
+
+        // onopen
+        let set_ws_state_open = set_ws_state;
+        let onopen = Closure::wrap(Box::new(move |_: web_sys::Event| {
+            #[cfg(debug_assertions)]
+            web_sys::console::log_1(&"[WS] Connected".into());
+            set_ws_state_open.set(WsState::Connected);
+        }) as Box<dyn FnMut(web_sys::Event)>);
+        ws.set_onopen(Some(onopen.as_ref().unchecked_ref()));
+        onopen.forget();
+
+        // onmessage
+        let members_for_msg = members_clone.clone();
+        let on_members_update_clone = on_members_update.clone();
+        let onmessage = Closure::wrap(Box::new(move |e: MessageEvent| {
+            if let Ok(text) = e.data().dyn_into::<js_sys::JsString>() {
+                let text: String = text.into();
+                #[cfg(debug_assertions)]
+                web_sys::console::log_1(&format!("[WS<-Server] {}", text).into());
+
+                if let Ok(msg) = serde_json::from_str::<ServerMessage>(&text) {
+                    handle_server_message(msg, &members_for_msg, &on_members_update_clone);
+                }
+            }
+        }) as Box<dyn FnMut(MessageEvent)>);
+        ws.set_onmessage(Some(onmessage.as_ref().unchecked_ref()));
+        onmessage.forget();
+
+        // onerror
+        let set_ws_state_err = set_ws_state;
+        let onerror = Closure::wrap(Box::new(move |e: ErrorEvent| {
+            #[cfg(debug_assertions)]
+            web_sys::console::error_1(&format!("[WS] Error: {:?}", e.message()).into());
+            set_ws_state_err.set(WsState::Error);
+        }) as Box<dyn FnMut(ErrorEvent)>);
+        ws.set_onerror(Some(onerror.as_ref().unchecked_ref()));
+        onerror.forget();
+
+        // onclose
+        let set_ws_state_close = set_ws_state;
+        let onclose = Closure::wrap(Box::new(move |e: CloseEvent| {
+            #[cfg(debug_assertions)]
+            web_sys::console::log_1(
+                &format!("[WS] Closed: code={}, reason={}", e.code(), e.reason()).into(),
+            );
+            set_ws_state_close.set(WsState::Disconnected);
+        }) as Box<dyn FnMut(CloseEvent)>);
+        ws.set_onclose(Some(onclose.as_ref().unchecked_ref()));
+        onclose.forget();
+
+        *ws_ref_clone.borrow_mut() = Some(ws);
+    });
+
+    (Signal::derive(move || ws_state.get()), sender)
+}
+
+/// Handle a message received from the server.
+#[cfg(feature = "hydrate")]
+fn handle_server_message(
+    msg: ServerMessage,
+    members: &std::rc::Rc<std::cell::RefCell<Vec<ChannelMemberWithAvatar>>>,
+    on_update: &Callback<Vec<ChannelMemberWithAvatar>>,
+) {
+    let mut members_vec = members.borrow_mut();
+
+    match msg {
+        ServerMessage::Welcome {
+            member: _,
+            members: initial_members,
+        } => {
+            *members_vec = initial_members;
+            on_update.run(members_vec.clone());
+        }
+        ServerMessage::MemberJoined { member } => {
+            // Remove if exists (rejoin case), then add
+            members_vec.retain(|m| {
+                m.member.user_id != member.member.user_id
+                    || m.member.guest_session_id != member.member.guest_session_id
+            });
+            members_vec.push(member);
+            on_update.run(members_vec.clone());
+        }
+        ServerMessage::MemberLeft {
+            user_id,
+            guest_session_id,
+        } => {
+            members_vec.retain(|m| {
+                m.member.user_id != user_id || m.member.guest_session_id != guest_session_id
+            });
+            on_update.run(members_vec.clone());
+        }
+        ServerMessage::PositionUpdated {
+            user_id,
+            guest_session_id,
+            x,
+            y,
+        } => {
+            if let Some(m) = members_vec.iter_mut().find(|m| {
+                m.member.user_id == user_id && m.member.guest_session_id == guest_session_id
+            }) {
+                m.member.position_x = x;
+                m.member.position_y = y;
+            }
+            on_update.run(members_vec.clone());
+        }
+        ServerMessage::EmotionUpdated {
+            user_id,
+            guest_session_id,
+            emotion,
+            emotion_layer,
+        } => {
+            if let Some(m) = members_vec.iter_mut().find(|m| {
+                m.member.user_id == user_id && m.member.guest_session_id == guest_session_id
+            }) {
+                m.member.current_emotion = emotion as i16;
+                m.avatar.emotion_layer = emotion_layer;
+            }
+            on_update.run(members_vec.clone());
+        }
+        ServerMessage::Pong => {
+            // Heartbeat acknowledged - nothing to do
+        }
+        ServerMessage::Error { code, message } => {
+            #[cfg(debug_assertions)]
+            web_sys::console::error_1(&format!("[WS] Server error: {} - {}", code, message).into());
+        }
+    }
+}
+
+/// Stub implementation for SSR (server-side rendering).
+#[cfg(not(feature = "hydrate"))]
+pub fn use_channel_websocket(
+    _realm_slug: Signal<String>,
+    _channel_id: Signal<Option<uuid::Uuid>>,
+    _on_members_update: Callback<Vec<ChannelMemberWithAvatar>>,
+) -> (Signal<WsState>, WsSenderStorage) {
+    let (ws_state, _) = signal(WsState::Disconnected);
+    let sender: WsSenderStorage = StoredValue::new_local(None);
+    (Signal::derive(move || ws_state.get()), sender)
+}

crates/chattyness-user-ui/src/lib.rs

@@ -0,0 +1,36 @@
+#![recursion_limit = "256"]
+//! User UI components for chattyness.
+//!
+//! This crate provides the public user-facing interface including:
+//! - Login and signup pages
+//! - Realm browsing and viewing
+//! - Scene editor for realm builders
+//!
+//! ## Usage
+//!
+//! For standalone use:
+//! ```ignore
+//! use chattyness_user_ui::App;
+//! // App includes its own Router
+//! ```
+//!
+//! For embedding in a combined app (e.g., chattyness-app):
+//! ```ignore
+//! use chattyness_user_ui::UserRoutes;
+//! // UserRoutes can be placed inside an existing Router
+//! ```
+
+#[cfg(feature = "ssr")]
+pub mod api;
+pub mod app;
+#[cfg(feature = "ssr")]
+pub mod auth;
+pub mod components;
+pub mod pages;
+pub mod routes;
+
+pub use app::{shell, App};
+pub use routes::UserRoutes;
+
+#[cfg(feature = "ssr")]
+pub use app::AppState;

crates/chattyness-user-ui/src/pages.rs

@@ -0,0 +1,15 @@
+//! Page components for user UI.
+//!
+//! Note: Editor pages and NewRealmPage have been moved to admin-ui.
+
+pub mod home;
+pub mod login;
+pub mod password_reset;
+pub mod realm;
+pub mod signup;
+
+pub use home::*;
+pub use login::*;
+pub use password_reset::*;
+pub use realm::*;
+pub use signup::*;

crates/chattyness-user-ui/src/pages/home.rs

@@ -0,0 +1,96 @@
+//! Home page component.
+
+use leptos::prelude::*;
+
+use crate::components::{Card, PageLayout};
+
+/// Home page.
+#[component]
+pub fn HomePage() -> impl IntoView {
+    view! {
+        <PageLayout>
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                // Hero section
+                <section class="text-center mb-16">
+                    <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
+                        "Welcome to "
+                        <span class="text-blue-400">"Chattyness"</span>
+                    </h1>
+                    <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
+                        "Create and explore virtual spaces where communities come alive. "
+                        "Build your own realm, customize it, and invite others to join."
+                    </p>
+                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <a href="/realms/new" class="btn-primary text-lg px-8 py-4">
+                            "Create Your Realm"
+                        </a>
+                        <a href="/realms" class="btn-secondary text-lg px-8 py-4">
+                            "Explore Realms"
+                        </a>
+                    </div>
+                </section>
+
+                // Features section
+                <section class="mb-16">
+                    <h2 class="text-2xl font-bold text-white text-center mb-8">"Why Chattyness?"</h2>
+                    <div class="grid md:grid-cols-3 gap-8">
+                        <FeatureCard
+                            icon="castle"
+                            title="Create Realms"
+                            description="Build themed virtual spaces with multiple scenes, customizable spots, and interactive elements."
+                        />
+                        <FeatureCard
+                            icon="users"
+                            title="Build Communities"
+                            description="Invite friends, manage members, and create a thriving community around your interests."
+                        />
+                        <FeatureCard
+                            icon="palette"
+                            title="Customize Everything"
+                            description="Props, avatars, scenes, and scripts - make your realm truly unique."
+                        />
+                    </div>
+                </section>
+
+                // CTA section
+                <section class="text-center">
+                    <Card class="p-8 max-w-2xl mx-auto">
+                        <h2 class="text-2xl font-bold text-white mb-4">"Ready to get started?"</h2>
+                        <p class="text-gray-300 mb-6">
+                            "Create your first realm in just a few clicks. No experience needed."
+                        </p>
+                        <a href="/realms/new" class="btn-primary inline-block">
+                            "Create a Realm"
+                        </a>
+                    </Card>
+                </section>
+            </div>
+        </PageLayout>
+    }
+}
+
+/// Feature card component.
+#[component]
+fn FeatureCard(icon: &'static str, title: &'static str, description: &'static str) -> impl IntoView {
+    let icon_symbol = match icon {
+        "castle" => "castle",
+        "users" => "users",
+        "palette" => "palette",
+        _ => "star",
+    };
+
+    view! {
+        <Card class="p-6 text-center">
+            <div class="text-4xl mb-4" aria-hidden="true">
+                <img
+                    src=format!("/icons/{}.svg", icon_symbol)
+                    alt=""
+                    class="w-12 h-12 mx-auto"
+                    aria-hidden="true"
+                />
+            </div>
+            <h3 class="text-xl font-semibold text-white mb-2">{title}</h3>
+            <p class="text-gray-400">{description}</p>
+        </Card>
+    }
+}

crates/chattyness-user-ui/src/pages/login.rs

@@ -0,0 +1,497 @@
+//! Login page for realm users.
+
+use leptos::ev::SubmitEvent;
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+#[cfg(feature = "hydrate")]
+use leptos_router::hooks::use_navigate;
+
+use crate::components::{Card, CenteredLayout, ErrorAlert, JoinRealmModal, SubmitButton};
+use chattyness_db::models::RealmSummary;
+
+/// Main login page component.
+#[component]
+pub fn LoginPage() -> impl IntoView {
+    view! {
+        <CenteredLayout>
+            <div class="w-full max-w-lg">
+                // Logo and title
+                <div class="text-center mb-8">
+                    <h1 class="text-3xl font-bold text-white mb-2">
+                        <span aria-hidden="true">"Chattyness"</span>
+                    </h1>
+                    <p class="text-gray-400">"Sign in to explore virtual community spaces"</p>
+                </div>
+
+                <Card class="p-6">
+                    <RealmLoginForm />
+                </Card>
+            </div>
+        </CenteredLayout>
+    }
+}
+
+/// Realm login form component.
+#[component]
+fn RealmLoginForm() -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let navigate = use_navigate();
+    #[cfg(feature = "hydrate")]
+    let navigate_for_submit = navigate.clone();
+    #[cfg(feature = "hydrate")]
+    let navigate_for_join = navigate.clone();
+    #[cfg(feature = "hydrate")]
+    let navigate_for_guest = navigate.clone();
+
+    // Form state
+    let (username, set_username) = signal(String::new());
+    let (password, set_password) = signal(String::new());
+    let (selected_realm, set_selected_realm) = signal(Option::<String>::None);
+    let (private_realm, set_private_realm) = signal(String::new());
+    let (error, set_error) = signal(Option::<String>::None);
+    let (pending, set_pending) = signal(false);
+    let (guest_pending, set_guest_pending) = signal(false);
+
+    // Join modal state
+    let (show_join_modal, set_show_join_modal) = signal(false);
+    let (join_pending, set_join_pending) = signal(false);
+    let (pending_realm, set_pending_realm) = signal(Option::<RealmSummary>::None);
+
+    // Fetch public realms
+    let realms = LocalResource::new(move || async move {
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+            #[derive(serde::Deserialize)]
+            struct ListResponse {
+                realms: Vec<RealmSummary>,
+            }
+            let response = Request::get("/api/realms?include_nsfw=false&limit=20").send().await;
+            match response {
+                Ok(resp) if resp.ok() => resp.json::<ListResponse>().await.ok().map(|r| r.realms),
+                _ => None,
+            }
+        }
+        #[cfg(not(feature = "hydrate"))]
+        {
+            None::<Vec<RealmSummary>>
+        }
+    });
+
+    // Get the realm slug to use
+    let realm_slug = Signal::derive(move || {
+        if !private_realm.get().is_empty() {
+            Some(private_realm.get())
+        } else {
+            selected_realm.get()
+        }
+    });
+
+    // Handle login submission
+    let on_submit = move |ev: SubmitEvent| {
+        ev.prevent_default();
+        set_error.set(None);
+
+        let slug = realm_slug.get();
+        if slug.is_none() {
+            set_error.set(Some(
+                "Please select a realm or enter a private realm name".to_string(),
+            ));
+            return;
+        }
+
+        #[cfg(feature = "hydrate")]
+        let slug = slug.unwrap();
+        let uname = username.get();
+        let pwd = password.get();
+
+        if uname.is_empty() || pwd.is_empty() {
+            set_error.set(Some("Username and password are required".to_string()));
+            return;
+        }
+
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use chattyness_db::models::{LoginRequest, LoginResponse, LoginType};
+            use gloo_net::http::Request;
+
+            let navigate = navigate_for_submit.clone();
+            spawn_local(async move {
+                let request = LoginRequest {
+                    username: uname,
+                    password: pwd,
+                    login_type: LoginType::Realm,
+                    realm_slug: Some(slug),
+                };
+
+                let response = Request::post("/api/auth/login")
+                    .json(&request)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        if let Ok(login_resp) = resp.json::<LoginResponse>().await {
+                            if login_resp.requires_pw_reset {
+                                navigate(&login_resp.redirect_url, Default::default());
+                            } else if login_resp.is_member == Some(false) {
+                                if let Some(realm) = login_resp.realm {
+                                    set_pending_realm.set(Some(realm));
+                                    set_show_join_modal.set(true);
+                                }
+                            } else {
+                                navigate(&login_resp.redirect_url, Default::default());
+                            }
+                        }
+                    }
+                    Ok(resp) => {
+                        let status = resp.status();
+                        if status == 401 {
+                            set_error.set(Some("Invalid username or password".to_string()));
+                        } else if status == 403 {
+                            set_error.set(Some("Your account is suspended or banned".to_string()));
+                        } else {
+                            set_error.set(Some("Login failed. Please try again.".to_string()));
+                        }
+                    }
+                    Err(_) => {
+                        set_error.set(Some(
+                            "Network error. Please check your connection.".to_string(),
+                        ));
+                    }
+                }
+            });
+        }
+    };
+
+    // Handle join confirmation
+    let on_join_confirm = move |_| {
+        if pending_realm.get().is_some() {
+            set_join_pending.set(true);
+
+            #[cfg(feature = "hydrate")]
+            {
+                use chattyness_db::models::JoinRealmRequest;
+                use gloo_net::http::Request;
+
+                let realm = pending_realm.get().unwrap();
+                let navigate = navigate_for_join.clone();
+                let realm_id = realm.id;
+                let realm_slug = realm.slug.clone();
+
+                spawn_local(async move {
+                    let request = JoinRealmRequest { realm_id };
+
+                    let response = Request::post("/api/auth/join-realm")
+                        .json(&request)
+                        .unwrap()
+                        .send()
+                        .await;
+
+                    set_join_pending.set(false);
+                    set_show_join_modal.set(false);
+
+                    match response {
+                        Ok(resp) if resp.ok() => {
+                            navigate(&format!("/realms/{}", realm_slug), Default::default());
+                        }
+                        Ok(resp) => {
+                            let status = resp.status();
+                            if status == 403 {
+                                set_error.set(Some("Cannot join this realm".to_string()));
+                            } else {
+                                set_error.set(Some(
+                                    "Failed to join realm. Please try again.".to_string(),
+                                ));
+                            }
+                        }
+                        Err(_) => {
+                            set_error.set(Some(
+                                "Network error. Please check your connection.".to_string(),
+                            ));
+                        }
+                    }
+                });
+            }
+        }
+    };
+
+    let on_join_cancel = move |_| {
+        set_show_join_modal.set(false);
+        set_pending_realm.set(None);
+    };
+
+    // Handle guest login
+    let on_guest_click = move |_| {
+        set_error.set(None);
+
+        let slug = realm_slug.get();
+        if slug.is_none() {
+            set_error.set(Some("Please select a realm first".to_string()));
+            return;
+        }
+
+        set_guest_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use chattyness_db::models::{GuestLoginRequest, GuestLoginResponse};
+            use gloo_net::http::Request;
+
+            let navigate = navigate_for_guest.clone();
+            let realm_slug_val = slug.unwrap();
+
+            spawn_local(async move {
+                let request = GuestLoginRequest {
+                    realm_slug: realm_slug_val,
+                };
+
+                let response = Request::post("/api/auth/guest")
+                    .json(&request)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_guest_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        if let Ok(guest_resp) = resp.json::<GuestLoginResponse>().await {
+                            navigate(&guest_resp.redirect_url, Default::default());
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_error.set(Some(err.error));
+                        } else {
+                            set_error.set(Some(
+                                "Guest access not available for this realm".to_string(),
+                            ));
+                        }
+                    }
+                    Err(_) => {
+                        set_error.set(Some(
+                            "Network error. Please check your connection.".to_string(),
+                        ));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <form on:submit=on_submit class="space-y-6">
+            // Realm selection
+            <fieldset>
+                <legend class="text-sm font-medium text-gray-300 mb-3">"Choose a Realm"</legend>
+
+                // Public realm list
+                <Suspense fallback=move || {
+                    view! { <p class="text-gray-400">"Loading realms..."</p> }
+                }>
+                    {move || {
+                        realms
+                            .get()
+                            .map(|maybe_realms: Option<Vec<RealmSummary>>| {
+                                match maybe_realms {
+                                    Some(realms) if !realms.is_empty() => {
+                                        view! {
+                                            <div class="space-y-2 max-h-48 overflow-y-auto mb-4">
+                                                {realms
+                                                    .into_iter()
+                                                    .map(|realm| {
+                                                        let slug = realm.slug.clone();
+                                                        let slug_for_click = slug.clone();
+                                                        let is_selected = Signal::derive(move || {
+                                                            selected_realm.get() == Some(slug.clone())
+                                                        });
+                                                        view! {
+                                                            <button
+                                                                type="button"
+                                                                class=move || {
+                                                                    let base = "w-full text-left p-3 rounded-lg border transition-colors";
+                                                                    if is_selected.get() {
+                                                                        format!("{} border-blue-500 bg-blue-500/10", base)
+                                                                    } else {
+                                                                        format!(
+                                                                            "{} border-gray-700 hover:border-gray-600 hover:bg-gray-700/50",
+                                                                            base,
+                                                                        )
+                                                                    }
+                                                                }
+                                                                on:click=move |_| {
+                                                                    set_selected_realm.set(Some(slug_for_click.clone()));
+                                                                    set_private_realm.set(String::new());
+                                                                }
+                                                            >
+                                                                <div class="flex items-center justify-between">
+                                                                    <div>
+                                                                        <span class="text-white font-medium">
+                                                                            {realm.name.clone()}
+                                                                        </span>
+                                                                        <span class="text-gray-500 text-sm ml-2">
+                                                                            {format!("/{}", realm.slug)}
+                                                                        </span>
+                                                                    </div>
+                                                                    <span class="text-gray-400 text-sm">
+                                                                        {realm.current_user_count}
+                                                                        " online"
+                                                                    </span>
+                                                                </div>
+                                                                {realm
+                                                                    .tagline
+                                                                    .as_ref()
+                                                                    .map(|t: &String| {
+                                                                        view! {
+                                                                            <p class="text-gray-400 text-sm mt-1">{t.clone()}</p>
+                                                                        }
+                                                                    })}
+                                                            </button>
+                                                        }
+                                                    })
+                                                    .collect_view()}
+                                            </div>
+                                        }
+                                            .into_any()
+                                    }
+                                    _ => {
+                                        view! {
+                                            <p class="text-gray-400 mb-4">"No public realms available"</p>
+                                        }
+                                            .into_any()
+                                    }
+                                }
+                            })
+                    }}
+                </Suspense>
+
+                // Private realm input
+                <div class="relative">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <span class="text-gray-500">"/"</span>
+                    </div>
+                    <input
+                        type="text"
+                        placeholder="Or enter a private realm name"
+                        class="input-base pl-6"
+                        prop:value=move || private_realm.get()
+                        on:input=move |ev| {
+                            set_private_realm.set(event_target_value(&ev));
+                            set_selected_realm.set(None);
+                        }
+                    />
+                </div>
+            </fieldset>
+
+            // Credentials
+            <div class="space-y-4">
+                <div>
+                    <label for="username" class="block text-sm font-medium text-gray-300 mb-2">
+                        "Username"
+                        <span class="text-red-400" aria-hidden="true">"*"</span>
+                    </label>
+                    <input
+                        type="text"
+                        id="username"
+                        name="username"
+                        required=true
+                        autocomplete="username"
+                        class="input-base"
+                        prop:value=move || username.get()
+                        on:input=move |ev| set_username.set(event_target_value(&ev))
+                    />
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
+                        "Password"
+                        <span class="text-red-400" aria-hidden="true">"*"</span>
+                    </label>
+                    <input
+                        type="password"
+                        id="password"
+                        name="password"
+                        required=true
+                        autocomplete="current-password"
+                        class="input-base"
+                        prop:value=move || password.get()
+                        on:input=move |ev| set_password.set(event_target_value(&ev))
+                    />
+                </div>
+            </div>
+
+            // Error message
+            <ErrorAlert message=Signal::derive(move || error.get()) />
+
+            // Submit button
+            <SubmitButton
+                text="Enter Realm"
+                loading_text="Signing in..."
+                pending=Signal::derive(move || pending.get())
+            />
+
+            // Divider
+            <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-700"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-gray-800 text-gray-400">"or"</span>
+                </div>
+            </div>
+
+            // Guest button
+            <button
+                type="button"
+                class="w-full py-3 px-4 border border-gray-600 rounded-lg text-gray-300 hover:bg-gray-700 hover:border-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled=move || guest_pending.get() || realm_slug.get().is_none()
+                on:click=on_guest_click
+            >
+                {move || {
+                    if guest_pending.get() { "Joining as guest..." } else { "Continue as Guest" }
+                }}
+            </button>
+
+            // Sign up link
+            <p class="text-center text-gray-400 text-sm">
+                "Don't have an account? "
+                <a href="/signup" class="text-blue-400 hover:underline">
+                    "Sign up"
+                </a>
+            </p>
+        </form>
+
+        // Join modal
+        {
+            let on_join_confirm = on_join_confirm.clone();
+            let on_join_cancel = on_join_cancel.clone();
+            move || {
+                let on_join_confirm = on_join_confirm.clone();
+                let on_join_cancel = on_join_cancel.clone();
+                pending_realm
+                    .get()
+                    .map(|realm| {
+                        view! {
+                            <JoinRealmModal
+                                open=Signal::derive(move || show_join_modal.get())
+                                realm_name=realm.name.clone()
+                                realm_slug=realm.slug.clone()
+                                pending=Signal::derive(move || join_pending.get())
+                                on_confirm=Callback::new(on_join_confirm.clone())
+                                on_cancel=Callback::new(on_join_cancel.clone())
+                            />
+                        }
+                    })
+            }
+        }
+    }
+}

crates/chattyness-user-ui/src/pages/password_reset.rs

@@ -0,0 +1,216 @@
+//! Password reset page for users with force_pw_reset flag.
+
+use leptos::ev::SubmitEvent;
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+#[cfg(feature = "hydrate")]
+use leptos_router::hooks::use_navigate;
+
+use crate::components::{Card, CenteredLayout, ErrorAlert, SubmitButton};
+
+/// Password reset page component.
+#[component]
+pub fn PasswordResetPage() -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let navigate = use_navigate();
+
+    let (new_password, set_new_password) = signal(String::new());
+    let (confirm_password, set_confirm_password) = signal(String::new());
+    let (error, set_error) = signal(Option::<String>::None);
+    let (pending, set_pending) = signal(false);
+
+    let password_valid = Signal::derive(move || new_password.get().len() >= 8);
+
+    let passwords_match = Signal::derive(move || {
+        let pwd = new_password.get();
+        let confirm = confirm_password.get();
+        !pwd.is_empty() && pwd == confirm
+    });
+
+    let on_submit = move |ev: SubmitEvent| {
+        ev.prevent_default();
+        set_error.set(None);
+
+        let pwd = new_password.get();
+        let confirm = confirm_password.get();
+
+        if pwd.len() < 8 {
+            set_error.set(Some("Password must be at least 8 characters".to_string()));
+            return;
+        }
+
+        if pwd != confirm {
+            set_error.set(Some("Passwords do not match".to_string()));
+            return;
+        }
+
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use chattyness_db::models::{PasswordResetRequest, PasswordResetResponse};
+            use gloo_net::http::Request;
+
+            let navigate = navigate.clone();
+            spawn_local(async move {
+                let request = PasswordResetRequest {
+                    new_password: pwd,
+                    confirm_password: confirm,
+                };
+
+                let response = Request::post("/api/auth/reset-password")
+                    .json(&request)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        if let Ok(reset_resp) = resp.json::<PasswordResetResponse>().await {
+                            navigate(&reset_resp.redirect_url, Default::default());
+                        }
+                    }
+                    Ok(resp) => {
+                        let status = resp.status();
+                        if status == 401 {
+                            set_error.set(Some("Session expired. Please log in again.".to_string()));
+                        } else if status == 400 {
+                            set_error.set(Some("Invalid password. Please try again.".to_string()));
+                        } else {
+                            set_error.set(Some(
+                                "Failed to reset password. Please try again.".to_string(),
+                            ));
+                        }
+                    }
+                    Err(_) => {
+                        set_error.set(Some(
+                            "Network error. Please check your connection.".to_string(),
+                        ));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <CenteredLayout>
+            <div class="w-full max-w-md">
+                <Card class="p-6">
+                    <div class="text-center mb-6">
+                        <div class="mx-auto w-16 h-16 rounded-full bg-yellow-600/20 flex items-center justify-center mb-4">
+                            <img src="/icons/key.svg" alt="" class="w-8 h-8" aria-hidden="true" />
+                        </div>
+                        <h1 class="text-2xl font-bold text-white mb-2">"Reset Your Password"</h1>
+                        <p class="text-gray-400">"Please create a new password to continue"</p>
+                    </div>
+
+                    <form on:submit=on_submit class="space-y-6">
+                        <div>
+                            <label
+                                for="new-password"
+                                class="block text-sm font-medium text-gray-300 mb-2"
+                            >
+                                "New Password"
+                                <span class="text-red-400" aria-hidden="true">"*"</span>
+                            </label>
+                            <input
+                                type="password"
+                                id="new-password"
+                                name="new_password"
+                                required=true
+                                minlength=8
+                                autocomplete="new-password"
+                                class="input-base"
+                                prop:value=move || new_password.get()
+                                on:input=move |ev| set_new_password.set(event_target_value(&ev))
+                            />
+                            <div class="mt-2 flex items-center space-x-2">
+                                <div class=move || {
+                                    let base = "h-1 flex-1 rounded";
+                                    if password_valid.get() {
+                                        format!("{} bg-green-500", base)
+                                    } else if new_password.get().len() >= 4 {
+                                        format!("{} bg-yellow-500", base)
+                                    } else {
+                                        format!("{} bg-gray-600", base)
+                                    }
+                                } />
+                            </div>
+                            <p class=move || {
+                                let base = "text-sm mt-1";
+                                if password_valid.get() {
+                                    format!("{} text-green-400", base)
+                                } else {
+                                    format!("{} text-gray-400", base)
+                                }
+                            }>
+                                {move || {
+                                    if password_valid.get() {
+                                        "Password meets requirements"
+                                    } else {
+                                        "Minimum 8 characters"
+                                    }
+                                }}
+                            </p>
+                        </div>
+
+                        <div>
+                            <label
+                                for="confirm-password"
+                                class="block text-sm font-medium text-gray-300 mb-2"
+                            >
+                                "Confirm Password"
+                                <span class="text-red-400" aria-hidden="true">"*"</span>
+                            </label>
+                            <input
+                                type="password"
+                                id="confirm-password"
+                                name="confirm_password"
+                                required=true
+                                autocomplete="new-password"
+                                class="input-base"
+                                prop:value=move || confirm_password.get()
+                                on:input=move |ev| set_confirm_password.set(event_target_value(&ev))
+                            />
+                            {move || {
+                                let confirm = confirm_password.get();
+                                if !confirm.is_empty() {
+                                    if passwords_match.get() {
+                                        view! {
+                                            <p class="text-sm text-green-400 mt-1">"Passwords match"</p>
+                                        }
+                                            .into_any()
+                                    } else {
+                                        view! {
+                                            <p class="text-sm text-red-400 mt-1">
+                                                "Passwords do not match"
+                                            </p>
+                                        }
+                                            .into_any()
+                                    }
+                                } else {
+                                    view! {}.into_any()
+                                }
+                            }}
+                        </div>
+
+                        <ErrorAlert message=Signal::derive(move || error.get()) />
+
+                        <SubmitButton
+                            text="Reset Password"
+                            loading_text="Resetting..."
+                            pending=Signal::derive(move || pending.get())
+                        />
+                    </form>
+
+                    <p class="text-sm text-gray-500 text-center mt-6">
+                        "After resetting your password, you'll be redirected to your destination."
+                    </p>
+                </Card>
+            </div>
+        </CenteredLayout>
+    }
+}

crates/chattyness-user-ui/src/pages/realm.rs

@@ -0,0 +1,349 @@
+//! Realm landing page after login.
+
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+#[cfg(feature = "hydrate")]
+use leptos_router::hooks::use_navigate;
+use leptos_router::hooks::use_params_map;
+
+use crate::components::{Card, ChatInput, RealmHeader, RealmSceneViewer};
+#[cfg(feature = "hydrate")]
+use crate::components::use_channel_websocket;
+use chattyness_db::models::{ChannelMemberWithAvatar, RealmRole, RealmWithUserRole, Scene};
+#[cfg(feature = "hydrate")]
+use chattyness_db::ws_messages::ClientMessage;
+
+/// Realm landing page component.
+#[component]
+pub fn RealmPage() -> impl IntoView {
+    let params = use_params_map();
+    #[cfg(feature = "hydrate")]
+    let navigate = use_navigate();
+
+    let slug = Signal::derive(move || params.read().get("slug").unwrap_or_default());
+
+    // Channel member state
+    let (members, set_members) = signal(Vec::<ChannelMemberWithAvatar>::new());
+    let (channel_id, set_channel_id) = signal(Option::<uuid::Uuid>::None);
+
+    let realm_data = LocalResource::new(move || {
+        let slug = slug.get();
+        async move {
+            if slug.is_empty() {
+                return None;
+            }
+
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+                let response = Request::get(&format!("/api/realms/{}", slug)).send().await;
+                match response {
+                    Ok(resp) if resp.ok() => resp.json::<RealmWithUserRole>().await.ok(),
+                    _ => None,
+                }
+            }
+            #[cfg(not(feature = "hydrate"))]
+            {
+                let _ = slug;
+                None::<RealmWithUserRole>
+            }
+        }
+    });
+
+    // Fetch entry scene for the realm
+    let entry_scene = LocalResource::new(move || {
+        let slug = slug.get();
+        async move {
+            if slug.is_empty() {
+                return None;
+            }
+
+            #[cfg(feature = "hydrate")]
+            {
+                use gloo_net::http::Request;
+                let response = Request::get(&format!("/api/realms/{}/entry-scene", slug))
+                    .send()
+                    .await;
+                match response {
+                    Ok(resp) if resp.ok() => resp.json::<Scene>().await.ok(),
+                    _ => None,
+                }
+            }
+            #[cfg(not(feature = "hydrate"))]
+            {
+                let _ = slug;
+                None::<Scene>
+            }
+        }
+    });
+
+    // WebSocket connection for real-time updates
+    #[cfg(feature = "hydrate")]
+    let on_members_update = Callback::new(move |new_members: Vec<ChannelMemberWithAvatar>| {
+        set_members.set(new_members);
+    });
+
+    #[cfg(feature = "hydrate")]
+    let (_ws_state, ws_sender) = use_channel_websocket(
+        slug,
+        Signal::derive(move || channel_id.get()),
+        on_members_update,
+    );
+
+    // Set channel ID when scene loads (triggers WebSocket connection)
+    #[cfg(feature = "hydrate")]
+    {
+        Effect::new(move |_| {
+            let Some(scene) = entry_scene.get().flatten() else {
+                return;
+            };
+            set_channel_id.set(Some(scene.id));
+        });
+    }
+
+    // Handle position update via WebSocket
+    #[cfg(feature = "hydrate")]
+    let on_move = Callback::new(move |(x, y): (f64, f64)| {
+        ws_sender.with_value(|sender| {
+            if let Some(send_fn) = sender {
+                send_fn(ClientMessage::UpdatePosition { x, y });
+            }
+        });
+    });
+
+    #[cfg(not(feature = "hydrate"))]
+    let on_move = Callback::new(move |(_x, _y): (f64, f64)| {});
+
+    // Handle emotion change via keyboard (e then 0-9)
+    #[cfg(feature = "hydrate")]
+    {
+        use std::cell::RefCell;
+        use std::rc::Rc;
+        use wasm_bindgen::{closure::Closure, JsCast};
+
+        let closure_holder: Rc<RefCell<Option<Closure<dyn Fn(web_sys::KeyboardEvent)>>>> =
+            Rc::new(RefCell::new(None));
+        let closure_holder_clone = closure_holder.clone();
+
+        Effect::new(move |_| {
+            // Cleanup previous closure if any
+            if let Some(old_closure) = closure_holder_clone.borrow_mut().take() {
+                if let Some(window) = web_sys::window() {
+                    let _ = window.remove_event_listener_with_callback(
+                        "keydown",
+                        old_closure.as_ref().unchecked_ref(),
+                    );
+                }
+            }
+
+            let current_slug = slug.get();
+            if current_slug.is_empty() {
+                return;
+            }
+
+            // Track if 'e' was pressed (for e+0-9 emotion sequence)
+            let e_pressed: Rc<RefCell<bool>> = Rc::new(RefCell::new(false));
+            let e_pressed_clone = e_pressed.clone();
+
+            let closure = Closure::new(move |ev: web_sys::KeyboardEvent| {
+                let key = ev.key();
+
+                // Check if 'e' key was pressed
+                if key == "e" || key == "E" {
+                    *e_pressed_clone.borrow_mut() = true;
+                    return;
+                }
+
+                // Check for 0-9 after 'e' was pressed
+                if *e_pressed_clone.borrow() {
+                    *e_pressed_clone.borrow_mut() = false; // Reset regardless of outcome
+                    if key.len() == 1 {
+                        if let Ok(emotion) = key.parse::<u8>() {
+                            if emotion <= 9 {
+                                #[cfg(debug_assertions)]
+                                web_sys::console::log_1(
+                                    &format!("[Emotion] Sending emotion {}", emotion).into(),
+                                );
+                                ws_sender.with_value(|sender| {
+                                    if let Some(send_fn) = sender {
+                                        send_fn(ClientMessage::UpdateEmotion { emotion });
+                                    }
+                                });
+                            }
+                        }
+                    }
+                } else {
+                    // Any other key resets the 'e' state
+                    *e_pressed_clone.borrow_mut() = false;
+                }
+            });
+
+            if let Some(window) = web_sys::window() {
+                let _ = window
+                    .add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref());
+            }
+
+            // Store the closure for cleanup
+            *closure_holder_clone.borrow_mut() = Some(closure);
+        });
+    }
+
+    // Create logout callback (WebSocket disconnects automatically)
+    let on_logout = Callback::new(move |_: ()| {
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+            let navigate = navigate.clone();
+
+            spawn_local(async move {
+                // WebSocket close handles channel leave automatically
+                let _: Result<gloo_net::http::Response, gloo_net::Error> =
+                    Request::post("/api/auth/logout").send().await;
+                navigate("/", Default::default());
+            });
+        }
+    });
+
+    view! {
+        <div class="h-screen bg-gray-900 text-white flex flex-col overflow-hidden">
+            <Suspense fallback=move || {
+                view! {
+                    <div class="flex items-center justify-center min-h-screen">
+                        <p class="text-gray-400">"Loading realm..."</p>
+                    </div>
+                }
+            }>
+                {move || {
+                    let on_logout = on_logout.clone();
+                    let on_move = on_move.clone();
+                    realm_data
+                        .get()
+                        .map(|maybe_data| {
+                            match maybe_data {
+                                Some(data) => {
+                                    let realm = data.realm;
+                                    let user_role = data.user_role;
+
+                                    // Determine if user can access admin
+                                    // Admin visible for: Owner, Moderator, or staff
+                                    let can_admin = matches!(
+                                        user_role,
+                                        Some(RealmRole::Owner) | Some(RealmRole::Moderator)
+                                    );
+
+                                    // Get scene name and description for header
+                                    let scene_info = entry_scene
+                                        .get()
+                                        .flatten()
+                                        .map(|s| (s.name.clone(), s.description.clone()))
+                                        .unwrap_or_else(|| ("Loading...".to_string(), None));
+
+                                    let realm_name = realm.name.clone();
+                                    let realm_slug_val = realm.slug.clone();
+                                    let realm_description = realm.tagline.clone();
+                                    let online_count = realm.current_user_count;
+                                    let total_members = realm.member_count;
+                                    let max_capacity = realm.max_users;
+                                    let scene_name = scene_info.0;
+                                    let scene_description = scene_info.1;
+
+                                    view! {
+                                        <RealmHeader
+                                            realm_name=realm_name
+                                            realm_slug=realm_slug_val.clone()
+                                            realm_description=realm_description
+                                            scene_name=scene_name
+                                            scene_description=scene_description
+                                            online_count=online_count
+                                            total_members=total_members
+                                            max_capacity=max_capacity
+                                            can_admin=can_admin
+                                            on_logout=on_logout.clone()
+                                        />
+                                        <main class="flex-1 w-full">
+                                            // Scene viewer - full width
+                                            <Suspense fallback=move || {
+                                                view! {
+                                                    <div class="flex items-center justify-center py-12">
+                                                        <p class="text-gray-400">"Loading scene..."</p>
+                                                    </div>
+                                                }
+                                            }>
+                                                {move || {
+                                                    let on_move = on_move.clone();
+                                                    let realm_slug_for_viewer = realm_slug_val.clone();
+                                                    entry_scene
+                                                        .get()
+                                                        .map(|maybe_scene| {
+                                                            match maybe_scene {
+                                                                Some(scene) => {
+                                                                    let members_signal = Signal::derive(move || members.get());
+                                                                    view! {
+                                                                        <div class="relative w-full">
+                                                                            <RealmSceneViewer
+                                                                                scene=scene
+                                                                                realm_slug=realm_slug_for_viewer.clone()
+                                                                                members=members_signal
+                                                                                on_move=on_move.clone()
+                                                                            />
+                                                                            <div class="absolute bottom-0 left-0 right-0 z-10 pb-4 px-4">
+                                                                                <ChatInput />
+                                                                            </div>
+                                                                        </div>
+                                                                    }
+                                                                        .into_any()
+                                                                }
+                                                                None => {
+                                                                    view! {
+                                                                        <div class="max-w-4xl mx-auto px-4 py-8">
+                                                                            <Card class="p-8 text-center">
+                                                                                <p class="text-gray-400">
+                                                                                    "No scenes have been created for this realm yet."
+                                                                                </p>
+                                                                            </Card>
+                                                                        </div>
+                                                                    }
+                                                                        .into_any()
+                                                                }
+                                                            }
+                                                        })
+                                                }}
+                                            </Suspense>
+                                        </main>
+                                    }
+                                        .into_any()
+                                }
+                                None => {
+                                    view! {
+                                        <div class="flex items-center justify-center min-h-screen">
+                                            <Card class="p-8 text-center max-w-md">
+                                                <div class="mx-auto w-20 h-20 rounded-full bg-red-900/20 flex items-center justify-center mb-4">
+                                                    <img
+                                                        src="/icons/x.svg"
+                                                        alt=""
+                                                        class="w-10 h-10"
+                                                        aria-hidden="true"
+                                                    />
+                                                </div>
+                                                <h2 class="text-xl font-semibold text-white mb-2">
+                                                    "Realm Not Found"
+                                                </h2>
+                                                <p class="text-gray-400 mb-6">
+                                                    "The realm you're looking for doesn't exist or you don't have access."
+                                                </p>
+                                                <a href="/" class="btn-primary inline-block">
+                                                    "Back to Home"
+                                                </a>
+                                            </Card>
+                                        </div>
+                                    }
+                                        .into_any()
+                                }
+                            }
+                        })
+                }}
+            </Suspense>
+        </div>
+    }
+}

crates/chattyness-user-ui/src/pages/signup.rs

@@ -0,0 +1,412 @@
+//! Sign-up page for new user registration.
+
+use leptos::ev::SubmitEvent;
+use leptos::prelude::*;
+#[cfg(feature = "hydrate")]
+use leptos::task::spawn_local;
+#[cfg(feature = "hydrate")]
+use leptos_router::hooks::use_navigate;
+use leptos_router::hooks::use_query_map;
+
+use crate::components::{Card, CenteredLayout, ErrorAlert, SubmitButton};
+use chattyness_db::models::RealmSummary;
+
+/// Sign-up page component.
+#[component]
+pub fn SignupPage() -> impl IntoView {
+    #[cfg(feature = "hydrate")]
+    let navigate = use_navigate();
+    let query = use_query_map();
+
+    // Form state
+    let (username, set_username) = signal(String::new());
+    let (display_name, set_display_name) = signal(String::new());
+    let (email, set_email) = signal(String::new());
+    let (password, set_password) = signal(String::new());
+    let (confirm_password, set_confirm_password) = signal(String::new());
+    let (selected_realm, set_selected_realm) = signal(Option::<String>::None);
+    let (private_realm, set_private_realm) = signal(String::new());
+    let (error, set_error) = signal(Option::<String>::None);
+    let (pending, set_pending) = signal(false);
+
+    // Read query param for pre-filled realm
+    Effect::new(move |_| {
+        if let Some(realm) = query.read().get("realm") {
+            set_private_realm.set(realm.to_string());
+        }
+    });
+
+    // Fetch public realms
+    let realms = LocalResource::new(move || async move {
+        #[cfg(feature = "hydrate")]
+        {
+            use gloo_net::http::Request;
+            #[derive(serde::Deserialize)]
+            struct ListResponse {
+                realms: Vec<RealmSummary>,
+            }
+            let response = Request::get("/api/realms?include_nsfw=false&limit=20").send().await;
+            match response {
+                Ok(resp) if resp.ok() => resp.json::<ListResponse>().await.ok().map(|r| r.realms),
+                _ => None,
+            }
+        }
+        #[cfg(not(feature = "hydrate"))]
+        {
+            None::<Vec<RealmSummary>>
+        }
+    });
+
+    // Get the realm slug to use
+    let realm_slug = Signal::derive(move || {
+        let private = private_realm.get();
+        if !private.is_empty() {
+            Some(private)
+        } else {
+            selected_realm.get()
+        }
+    });
+
+    // Handle form submission
+    let on_submit = move |ev: SubmitEvent| {
+        ev.prevent_default();
+        set_error.set(None);
+
+        let slug = realm_slug.get();
+        if slug.is_none() {
+            set_error.set(Some("Please select a realm or enter a realm name".to_string()));
+            return;
+        }
+
+        let uname = username.get();
+        if uname.len() < 3 || uname.len() > 30 {
+            set_error.set(Some("Username must be 3-30 characters".to_string()));
+            return;
+        }
+
+        let dname = display_name.get();
+        if dname.trim().is_empty() {
+            set_error.set(Some("Display name is required".to_string()));
+            return;
+        }
+
+        let pwd = password.get();
+        if pwd.len() < 8 {
+            set_error.set(Some("Password must be at least 8 characters".to_string()));
+            return;
+        }
+
+        let confirm_pwd = confirm_password.get();
+        if pwd != confirm_pwd {
+            set_error.set(Some("Passwords do not match".to_string()));
+            return;
+        }
+
+        set_pending.set(true);
+
+        #[cfg(feature = "hydrate")]
+        {
+            use chattyness_db::models::{SignupRequest, SignupResponse};
+            use gloo_net::http::Request;
+
+            let navigate = navigate.clone();
+            let email_val = email.get();
+            let email_opt = if email_val.trim().is_empty() {
+                None
+            } else {
+                Some(email_val)
+            };
+
+            spawn_local(async move {
+                let request = SignupRequest {
+                    username: uname,
+                    email: email_opt,
+                    display_name: dname,
+                    password: pwd,
+                    confirm_password: confirm_pwd,
+                    realm_slug: slug.unwrap(),
+                };
+
+                let response = Request::post("/api/auth/signup")
+                    .json(&request)
+                    .unwrap()
+                    .send()
+                    .await;
+
+                set_pending.set(false);
+
+                match response {
+                    Ok(resp) if resp.ok() => {
+                        if let Ok(signup_resp) = resp.json::<SignupResponse>().await {
+                            navigate(&signup_resp.redirect_url, Default::default());
+                        }
+                    }
+                    Ok(resp) => {
+                        #[derive(serde::Deserialize)]
+                        struct ErrorResp {
+                            error: String,
+                        }
+                        let status = resp.status();
+                        if let Ok(err) = resp.json::<ErrorResp>().await {
+                            set_error.set(Some(err.error));
+                        } else if status == 409 {
+                            set_error.set(Some("Username or email already taken".to_string()));
+                        } else if status == 404 {
+                            set_error.set(Some("Realm not found".to_string()));
+                        } else {
+                            set_error.set(Some("Sign up failed. Please try again.".to_string()));
+                        }
+                    }
+                    Err(_) => {
+                        set_error.set(Some(
+                            "Network error. Please check your connection.".to_string(),
+                        ));
+                    }
+                }
+            });
+        }
+    };
+
+    view! {
+        <CenteredLayout>
+            <div class="w-full max-w-lg">
+                <div class="text-center mb-8">
+                    <h1 class="text-3xl font-bold text-white mb-2">"Join Chattyness"</h1>
+                    <p class="text-gray-400">"Create your account and join a realm"</p>
+                </div>
+
+                <Card class="p-6">
+                    <form on:submit=on_submit class="space-y-6">
+                        // Realm selection
+                        <fieldset>
+                            <legend class="text-sm font-medium text-gray-300 mb-3">
+                                "Choose a Realm"
+                            </legend>
+
+                            <Suspense fallback=move || {
+                                view! { <p class="text-gray-400">"Loading realms..."</p> }
+                            }>
+                                {move || {
+                                    realms
+                                        .get()
+                                        .map(|maybe_realms: Option<Vec<RealmSummary>>| {
+                                            match maybe_realms {
+                                                Some(realms) if !realms.is_empty() => {
+                                                    view! {
+                                                        <div class="space-y-2 max-h-48 overflow-y-auto mb-4">
+                                                            {realms
+                                                                .into_iter()
+                                                                .map(|realm| {
+                                                                    let slug = realm.slug.clone();
+                                                                    let slug_for_click = slug.clone();
+                                                                    let is_selected = Signal::derive(move || {
+                                                                        selected_realm.get() == Some(slug.clone())
+                                                                    });
+                                                                    view! {
+                                                                        <button
+                                                                            type="button"
+                                                                            class=move || {
+                                                                                let base = "w-full text-left p-3 rounded-lg border transition-colors";
+                                                                                if is_selected.get() {
+                                                                                    format!("{} border-blue-500 bg-blue-500/10", base)
+                                                                                } else {
+                                                                                    format!(
+                                                                                        "{} border-gray-700 hover:border-gray-600 hover:bg-gray-700/50",
+                                                                                        base,
+                                                                                    )
+                                                                                }
+                                                                            }
+                                                                            on:click=move |_| {
+                                                                                set_selected_realm
+                                                                                    .set(Some(slug_for_click.clone()));
+                                                                                set_private_realm.set(String::new());
+                                                                            }
+                                                                        >
+                                                                            <div class="flex items-center justify-between">
+                                                                                <div>
+                                                                                    <span class="text-white font-medium">
+                                                                                        {realm.name.clone()}
+                                                                                    </span>
+                                                                                    <span class="text-gray-500 text-sm ml-2">
+                                                                                        {format!("/{}", realm.slug)}
+                                                                                    </span>
+                                                                                </div>
+                                                                                <span class="text-gray-400 text-sm">
+                                                                                    {realm.member_count}
+                                                                                    " members"
+                                                                                </span>
+                                                                            </div>
+                                                                        </button>
+                                                                    }
+                                                                })
+                                                                .collect_view()}
+                                                        </div>
+                                                    }
+                                                        .into_any()
+                                                }
+                                                _ => {
+                                                    view! {
+                                                        <p class="text-gray-400 mb-4">
+                                                            "No public realms available"
+                                                        </p>
+                                                    }
+                                                        .into_any()
+                                                }
+                                            }
+                                        })
+                                }}
+                            </Suspense>
+
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <span class="text-gray-500">"/"</span>
+                                </div>
+                                <input
+                                    type="text"
+                                    placeholder="Or enter a realm name"
+                                    class="input-base pl-6"
+                                    prop:value=move || private_realm.get()
+                                    on:input=move |ev| {
+                                        set_private_realm.set(event_target_value(&ev));
+                                        set_selected_realm.set(None);
+                                    }
+                                />
+                            </div>
+                        </fieldset>
+
+                        // Account details
+                        <div class="space-y-4">
+                            <div>
+                                <label
+                                    for="username"
+                                    class="block text-sm font-medium text-gray-300 mb-2"
+                                >
+                                    "Username"
+                                    <span class="text-red-400" aria-hidden="true">"*"</span>
+                                </label>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    name="username"
+                                    required=true
+                                    autocomplete="username"
+                                    minlength=3
+                                    maxlength=30
+                                    pattern="[a-z][a-z0-9_]*"
+                                    class="input-base"
+                                    placeholder="lowercase letters, numbers, underscores"
+                                    prop:value=move || username.get()
+                                    on:input=move |ev| set_username.set(event_target_value(&ev))
+                                />
+                                <p class="text-gray-500 text-xs mt-1">
+                                    "3-30 characters, starts with a letter"
+                                </p>
+                            </div>
+
+                            <div>
+                                <label
+                                    for="display_name"
+                                    class="block text-sm font-medium text-gray-300 mb-2"
+                                >
+                                    "Display Name"
+                                    <span class="text-red-400" aria-hidden="true">"*"</span>
+                                </label>
+                                <input
+                                    type="text"
+                                    id="display_name"
+                                    name="display_name"
+                                    required=true
+                                    maxlength=50
+                                    class="input-base"
+                                    placeholder="How others will see you"
+                                    prop:value=move || display_name.get()
+                                    on:input=move |ev| set_display_name.set(event_target_value(&ev))
+                                />
+                            </div>
+
+                            <div>
+                                <label
+                                    for="email"
+                                    class="block text-sm font-medium text-gray-300 mb-2"
+                                >
+                                    "Email"
+                                    <span class="text-gray-500 text-xs ml-1">"(optional)"</span>
+                                </label>
+                                <input
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    autocomplete="email"
+                                    class="input-base"
+                                    placeholder="your@email.com"
+                                    prop:value=move || email.get()
+                                    on:input=move |ev| set_email.set(event_target_value(&ev))
+                                />
+                            </div>
+
+                            <div>
+                                <label
+                                    for="password"
+                                    class="block text-sm font-medium text-gray-300 mb-2"
+                                >
+                                    "Password"
+                                    <span class="text-red-400" aria-hidden="true">"*"</span>
+                                </label>
+                                <input
+                                    type="password"
+                                    id="password"
+                                    name="password"
+                                    required=true
+                                    minlength=8
+                                    autocomplete="new-password"
+                                    class="input-base"
+                                    placeholder="At least 8 characters"
+                                    prop:value=move || password.get()
+                                    on:input=move |ev| set_password.set(event_target_value(&ev))
+                                />
+                            </div>
+
+                            <div>
+                                <label
+                                    for="confirm_password"
+                                    class="block text-sm font-medium text-gray-300 mb-2"
+                                >
+                                    "Confirm Password"
+                                    <span class="text-red-400" aria-hidden="true">"*"</span>
+                                </label>
+                                <input
+                                    type="password"
+                                    id="confirm_password"
+                                    name="confirm_password"
+                                    required=true
+                                    minlength=8
+                                    autocomplete="new-password"
+                                    class="input-base"
+                                    prop:value=move || confirm_password.get()
+                                    on:input=move |ev| {
+                                        set_confirm_password.set(event_target_value(&ev))
+                                    }
+                                />
+                            </div>
+                        </div>
+
+                        <ErrorAlert message=Signal::derive(move || error.get()) />
+
+                        <SubmitButton
+                            text="Create Account"
+                            loading_text="Creating account..."
+                            pending=Signal::derive(move || pending.get())
+                        />
+
+                        <p class="text-center text-gray-400 text-sm">
+                            "Already have an account? "
+                            <a href="/" class="text-blue-400 hover:underline">
+                                "Sign in"
+                            </a>
+                        </p>
+                    </form>
+                </Card>
+            </div>
+        </CenteredLayout>
+    }
+}

crates/chattyness-user-ui/src/routes.rs

@@ -0,0 +1,36 @@
+//! User routes without Router wrapper (for embedding in combined apps).
+//!
+//! This module provides the `UserRoutes` component which contains all user
+//! route definitions without a Router wrapper. This allows the routes to be
+//! embedded in a parent Router (e.g., CombinedApp in chattyness-app).
+//!
+//! For standalone use, use `App` which wraps these routes with a Router.
+//!
+//! Note: Editor routes and NewRealmPage have been removed.
+//! All create/edit functionality is now in the admin-ui.
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Route, Routes},
+    ParamSegment, StaticSegment,
+};
+
+use crate::pages::{HomePage, LoginPage, PasswordResetPage, RealmPage, SignupPage};
+
+/// User routes that can be embedded in a parent Router.
+///
+/// All paths are relative to the mount point. When used in:
+/// - `App`: Routes are at root (e.g., `/`, `/signup`, `/home`)
+/// - `CombinedApp`: Routes are at root (same paths)
+#[component]
+pub fn UserRoutes() -> impl IntoView {
+    view! {
+        <Routes fallback=|| "Page not found.".into_view()>
+            <Route path=StaticSegment("") view=LoginPage />
+            <Route path=StaticSegment("signup") view=SignupPage />
+            <Route path=StaticSegment("home") view=HomePage />
+            <Route path=StaticSegment("password-reset") view=PasswordResetPage />
+            <Route path=(StaticSegment("realms"), ParamSegment("slug")) view=RealmPage />
+        </Routes>
+    }
+}