refactor: extract admin UI to static files (#395)

- Move HTML/CSS/JS from inline const to static/admin.{html,css,js}
- Serve static files via tower-http ServeDir
- Add Io error variant for file read errors
- Update Dockerfile to copy static directory

admin.rs: 730 → 310 lines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[e-mail]>

moderation/Dockerfile

···
 
 RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*
 
+WORKDIR /app
 COPY --from=builder /app/target/release/moderation /usr/local/bin/moderation
+COPY static ./static
 
 CMD ["moderation"]

moderation/src/admin.rs

···
 //! Admin API for reviewing and resolving copyright flags.
+//!
+//! Uses htmx for interactivity with server-rendered HTML.
 
-use axum::{extract::State, response::Html, Json};
+use axum::{
+    extract::State,
+    http::header::CONTENT_TYPE,
+    response::{IntoResponse, Response},
+    Json,
+};
 use serde::{Deserialize, Serialize};
 
 use crate::db::LabelContext;
···
     pub uri: String,
     pub val: String,
     pub created_at: String,
-    /// If there's a negation label for this URI+val, it's been resolved.
+    /// Track status: pending review, resolved (false positive), or confirmed (takedown).
     pub resolved: bool,
     /// Optional context about the track (title, artist, matches).
     #[serde(skip_serializing_if = "Option::is_none")]
···
     pub message: String,
 }
 
-/// List all flagged tracks (copyright-violation labels without negations).
+/// List all flagged tracks - returns JSON for API, HTML for htmx.
 pub async fn list_flagged(
     State(state): State<AppState>,
 ) -> Result<Json<ListFlaggedResponse>, AppError> {
     let db = state.db.as_ref().ok_or(AppError::LabelerNotConfigured)?;
+    let tracks = db.get_pending_flags().await?;
+    Ok(Json(ListFlaggedResponse { tracks }))
+}
 
+/// Render flags as HTML partial for htmx.
+pub async fn list_flagged_html(State(state): State<AppState>) -> Result<Response, AppError> {
+    let db = state.db.as_ref().ok_or(AppError::LabelerNotConfigured)?;
     let tracks = db.get_pending_flags().await?;
 
-    Ok(Json(ListFlaggedResponse { tracks }))
+    let html = render_flags_list(&tracks);
+
+    Ok(([(CONTENT_TYPE, "text/html; charset=utf-8")], html).into_response())
 }
 
 /// Resolve (negate) a copyright flag, marking it as a false positive.
···
     }))
 }
 
+/// Resolve flag and return HTML response for htmx.
+pub async fn resolve_flag_htmx(
+    State(state): State<AppState>,
+    axum::Form(request): axum::Form<ResolveRequest>,
+) -> Result<Response, AppError> {
+    let db = state.db.as_ref().ok_or(AppError::LabelerNotConfigured)?;
+    let signer = state.signer.as_ref().ok_or(AppError::LabelerNotConfigured)?;
+
+    tracing::info!(uri = %request.uri, val = %request.val, "resolving flag via htmx");
+
+    // Create a negation label
+    let label = crate::labels::Label::new(signer.did(), &request.uri, &request.val).negated();
+    let label = signer.sign_label(label)?;
+
+    let seq = db.store_label(&label).await?;
+
+    // Broadcast to subscribers
+    if let Some(tx) = &state.label_tx {
+        let _ = tx.send((seq, label));
+    }
+
+    // Return success toast + trigger refresh
+    let html = format!(
+        r#"<div id="toast" class="toast success" hx-swap-oob="true">resolved (seq: {})</div>"#,
+        seq
+    );
+
+    Ok((
+        [
+            (CONTENT_TYPE, "text/html; charset=utf-8"),
+        ],
+        [(axum::http::header::HeaderName::from_static("hx-trigger"), "flagsUpdated")],
+        html,
+    )
+        .into_response())
+}
+
 /// Store context for a label (for backfill without re-emitting labels).
 pub async fn store_context(
     State(state): State<AppState>,
···
     }))
 }
 
-/// Serve the admin UI HTML.
-pub async fn admin_ui() -> Html<&'static str> {
-    Html(ADMIN_HTML)
+/// Serve the admin UI HTML from static file.
+pub async fn admin_ui() -> Result<Response, AppError> {
+    let html = tokio::fs::read_to_string("static/admin.html").await?;
+    Ok(([(CONTENT_TYPE, "text/html; charset=utf-8")], html).into_response())
 }
 
-const ADMIN_HTML: &str = r##"<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>plyr.fm moderation admin</title>
-    <style>
-        * { box-sizing: border-box; }
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            background: #0a0a0a;
-            color: #e5e5e5;
-            max-width: 1100px;
-            margin: 0 auto;
-            padding: 20px;
-            line-height: 1.6;
-        }
-        h1 { color: #fff; margin-bottom: 8px; }
-        .subtitle { color: #888; margin-bottom: 24px; }
-        .auth-form {
-            background: #111;
-            border: 1px solid #222;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 24px;
-        }
-        .auth-form input {
-            background: #1a1a1a;
-            border: 1px solid #333;
-            color: #fff;
-            padding: 8px 12px;
-            border-radius: 4px;
-            width: 300px;
-            margin-right: 8px;
-        }
-        .auth-form button {
-            background: #3b82f6;
-            color: #fff;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        .auth-form button:hover { background: #2563eb; }
-        .status {
-            padding: 8px 12px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-            display: none;
-        }
-        .status.error { display: block; background: rgba(239, 68, 68, 0.2); color: #ef4444; }
-        .status.success { display: block; background: rgba(34, 197, 94, 0.2); color: #22c55e; }
-        .flags-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        .flag-card {
-            background: #111;
-            border: 1px solid #222;
-            border-radius: 8px;
-            padding: 16px;
-        }
-        .flag-card.resolved { opacity: 0.6; }
-        .flag-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 12px;
-        }
-        .track-info h3 {
-            margin: 0 0 4px 0;
-            color: #fff;
-            font-size: 1.1em;
-        }
-        .track-info .artist {
-            color: #888;
-            font-size: 0.9em;
-        }
-        .track-info .uri {
-            font-family: monospace;
-            font-size: 0.75em;
-            color: #666;
-            word-break: break-all;
-            margin-top: 4px;
-        }
-        .flag-badges {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-        .badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 0.8em;
-        }
-        .badge.pending { background: rgba(234, 179, 8, 0.2); color: #eab308; }
-        .badge.resolved { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
-        .badge.score { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
-        .matches {
-            background: #0a0a0a;
-            border-radius: 4px;
-            padding: 12px;
-            margin-top: 12px;
-        }
-        .matches h4 {
-            margin: 0 0 8px 0;
-            color: #888;
-            font-size: 0.85em;
-            font-weight: 500;
-        }
-        .match-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 6px 0;
-            border-bottom: 1px solid #1a1a1a;
-            font-size: 0.9em;
-        }
-        .match-item:last-child { border-bottom: none; }
-        .match-item .title { color: #e5e5e5; }
-        .match-item .artist { color: #888; }
-        .match-item .score {
-            color: #ef4444;
-            font-family: monospace;
-        }
-        .flag-actions {
-            display: flex;
-            justify-content: flex-end;
-            margin-top: 12px;
-            padding-top: 12px;
-            border-top: 1px solid #222;
-        }
-        .resolve-btn {
-            background: #f59e0b;
-            color: #000;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.85em;
-            font-weight: 500;
-        }
-        .resolve-btn:hover { background: #d97706; }
-        .resolve-btn:disabled { background: #333; color: #666; cursor: not-allowed; }
-        .empty { color: #666; text-align: center; padding: 40px; }
-        .loading { color: #888; text-align: center; padding: 40px; }
-        .refresh-btn {
-            background: #333;
-            color: #fff;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            margin-left: auto;
-        }
-        .refresh-btn:hover { background: #444; }
-        .header-row {
-            display: flex;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-        .header-row h2 { margin: 0; }
-        .no-context { color: #666; font-style: italic; font-size: 0.9em; }
-    </style>
-</head>
-<body>
-    <h1>moderation admin</h1>
-    <p class="subtitle">review and resolve copyright flags</p>
+/// Render the flags list as HTML.
+fn render_flags_list(tracks: &[FlaggedTrack]) -> String {
+    if tracks.is_empty() {
+        return r#"<div class="empty">no flagged tracks</div>"#.to_string();
+    }
 
-    <div class="auth-form">
-        <input type="password" id="token" placeholder="moderation auth token">
-        <button onclick="authenticate()">authenticate</button>
-    </div>
-
-    <div id="status" class="status"></div>
-
-    <div id="content" style="display: none;">
-        <div class="header-row">
-            <h2>flagged tracks</h2>
-            <button class="refresh-btn" onclick="loadFlags()">refresh</button>
-        </div>
-        <div id="flags-list" class="flags-list">
-            <div class="loading">loading...</div>
-        </div>
-    </div>
-
-    <script>
-        let authToken = localStorage.getItem('moderation_token') || '';
-
-        if (authToken) {
-            document.getElementById('token').value = '••••••••';
-            showContent();
-            loadFlags();
-        }
-
-        function authenticate() {
-            authToken = document.getElementById('token').value;
-            localStorage.setItem('moderation_token', authToken);
-            showContent();
-            loadFlags();
-        }
-
-        function showContent() {
-            document.getElementById('content').style.display = 'block';
-        }
-
-        function showStatus(message, type) {
-            const status = document.getElementById('status');
-            status.textContent = message;
-            status.className = 'status ' + type;
-        }
-
-        async function loadFlags() {
-            const container = document.getElementById('flags-list');
-            container.innerHTML = '<div class="loading">loading...</div>';
-
-            try {
-                const res = await fetch('/admin/flags', {
-                    headers: { 'X-Moderation-Key': authToken }
-                });
-
-                if (!res.ok) {
-                    if (res.status === 401) {
-                        showStatus('invalid token', 'error');
-                        localStorage.removeItem('moderation_token');
-                        return;
-                    }
-                    throw new Error('failed to load flags');
-                }
-
-                const data = await res.json();
+    let cards: Vec<String> = tracks.iter().map(render_flag_card).collect();
+    cards.join("\n")
+}
 
-                if (data.tracks.length === 0) {
-                    container.innerHTML = '<div class="empty">no flagged tracks</div>';
-                    return;
-                }
+/// Render a single flag card as HTML.
+fn render_flag_card(track: &FlaggedTrack) -> String {
+    let ctx = track.context.as_ref();
+    let has_context = ctx.map_or(false, |c| c.track_title.is_some() || c.artist_handle.is_some());
 
-                container.innerHTML = data.tracks.map(track => {
-                    const ctx = track.context || {};
-                    const hasContext = ctx.track_title || ctx.artist_handle;
-                    const matches = ctx.matches || [];
+    let track_info = if has_context {
+        let c = ctx.unwrap();
+        format!(
+            r#"<h3>{}</h3>
+            <div class="artist">by @{}</div>"#,
+            html_escape(c.track_title.as_deref().unwrap_or("unknown track")),
+            html_escape(c.artist_handle.as_deref().unwrap_or("unknown"))
+        )
+    } else {
+        r#"<div class="no-context">no track info available</div>"#.to_string()
+    };
 
-                    return `
-                        <div class="flag-card ${track.resolved ? 'resolved' : ''}">
-                            <div class="flag-header">
-                                <div class="track-info">
-                                    ${hasContext ? `
-                                        <h3>${escapeHtml(ctx.track_title || 'unknown track')}</h3>
-                                        <div class="artist">by @${escapeHtml(ctx.artist_handle || 'unknown')}</div>
-                                    ` : `
-                                        <div class="no-context">no track info available</div>
-                                    `}
-                                    <div class="uri">${escapeHtml(track.uri)}</div>
-                                </div>
-                                <div class="flag-badges">
-                                    ${ctx.highest_score ? `<span class="badge score">${(ctx.highest_score * 100).toFixed(0)}% match</span>` : ''}
-                                    <span class="badge ${track.resolved ? 'resolved' : 'pending'}">${track.resolved ? 'resolved' : 'pending'}</span>
-                                </div>
-                            </div>
-                            ${matches.length > 0 ? `
-                                <div class="matches">
-                                    <h4>potential matches</h4>
-                                    ${matches.slice(0, 3).map(m => `
-                                        <div class="match-item">
-                                            <span><span class="title">${escapeHtml(m.title)}</span> <span class="artist">by ${escapeHtml(m.artist)}</span></span>
-                                            <span class="score">${(m.score * 100).toFixed(0)}%</span>
-                                        </div>
-                                    `).join('')}
-                                </div>
-                            ` : ''}
-                            <div class="flag-actions">
-                                <button class="resolve-btn"
-                                        onclick="resolveFlag('${escapeHtml(track.uri)}', '${escapeHtml(track.val)}')"
-                                        ${track.resolved ? 'disabled' : ''}>
-                                    ${track.resolved ? 'resolved' : 'mark false positive'}
-                                </button>
-                            </div>
-                        </div>
-                    `;
-                }).join('');
+    let score_badge = ctx
+        .and_then(|c| c.highest_score)
+        .filter(|&s| s > 0.0)
+        .map(|s| format!(r#"<span class="badge score">{}% match</span>"#, (s * 100.0) as i32))
+        .unwrap_or_default();
 
-            } catch (err) {
-                container.innerHTML = `<div class="empty">error: ${err.message}</div>`;
-            }
-        }
+    let status_badge = if track.resolved {
+        r#"<span class="badge resolved">resolved</span>"#
+    } else {
+        r#"<span class="badge pending">pending</span>"#
+    };
 
-        async function resolveFlag(uri, val) {
-            try {
-                const res = await fetch('/admin/resolve', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-Moderation-Key': authToken
-                    },
-                    body: JSON.stringify({ uri, val })
-                });
+    let matches_html = ctx
+        .and_then(|c| c.matches.as_ref())
+        .filter(|m| !m.is_empty())
+        .map(|matches| {
+            let items: Vec<String> = matches
+                .iter()
+                .take(3)
+                .map(|m| {
+                    format!(
+                        r#"<div class="match-item">
+                            <span><span class="title">{}</span> <span class="artist">by {}</span></span>
+                            <span class="score">{}%</span>
+                        </div>"#,
+                        html_escape(&m.title),
+                        html_escape(&m.artist),
+                        (m.score * 100.0) as i32
+                    )
+                })
+                .collect();
+            format!(
+                r#"<div class="matches">
+                    <h4>potential matches</h4>
+                    {}
+                </div>"#,
+                items.join("\n")
+            )
+        })
+        .unwrap_or_default();
 
-                if (!res.ok) {
-                    const data = await res.json();
-                    throw new Error(data.message || 'failed to resolve');
-                }
+    let action_button = if track.resolved {
+        r#"<button class="btn btn-secondary" disabled>resolved</button>"#.to_string()
+    } else {
+        format!(
+            r#"<form hx-post="/admin/resolve-htmx" hx-swap="none" style="display:inline">
+                <input type="hidden" name="uri" value="{}">
+                <input type="hidden" name="val" value="{}">
+                <button type="submit" class="btn btn-warning">mark false positive</button>
+            </form>"#,
+            html_escape(&track.uri),
+            html_escape(&track.val)
+        )
+    };
 
-                showStatus('flag resolved successfully', 'success');
-                loadFlags();
+    let resolved_class = if track.resolved { " resolved" } else { "" };
 
-            } catch (err) {
-                showStatus(err.message, 'error');
-            }
-        }
+    format!(
+        r#"<div class="flag-card{}">
+            <div class="flag-header">
+                <div class="track-info">
+                    {}
+                    <div class="uri">{}</div>
+                </div>
+                <div class="flag-badges">
+                    {}
+                    {}
+                </div>
+            </div>
+            {}
+            <div class="flag-actions">
+                {}
+            </div>
+        </div>"#,
+        resolved_class,
+        track_info,
+        html_escape(&track.uri),
+        score_badge,
+        status_badge,
+        matches_html,
+        action_button
+    )
+}
 
-        function escapeHtml(str) {
-            if (!str) return '';
-            return str.replace(/&/g, '&amp;')
-                      .replace(/</g, '&lt;')
-                      .replace(/>/g, '&gt;')
-                      .replace(/"/g, '&quot;')
-                      .replace(/'/g, '&#039;');
-        }
-    </script>
-</body>
-</html>
-"##;
+/// Simple HTML escaping.
+fn html_escape(s: &str) -> String {
+    s.replace('&', "&amp;")
+        .replace('<', "&lt;")
+        .replace('>', "&gt;")
+        .replace('"', "&quot;")
+        .replace('\'', "&#039;")
+}

moderation/src/main.rs

···
     Router,
 };
 use tokio::{net::TcpListener, sync::broadcast};
+use tower_http::services::ServeDir;
 use tracing::{info, warn};
 
 mod admin;
···
         // Admin UI and API
         .route("/admin", get(admin::admin_ui))
         .route("/admin/flags", get(admin::list_flagged))
+        .route("/admin/flags-html", get(admin::list_flagged_html))
         .route("/admin/resolve", post(admin::resolve_flag))
+        .route("/admin/resolve-htmx", post(admin::resolve_flag_htmx))
         .route("/admin/context", post(admin::store_context))
+        // Static files (CSS, JS for admin UI)
+        .nest_service("/static", ServeDir::new("static"))
         // ATProto XRPC endpoints (public)
         .route("/xrpc/com.atproto.label.queryLabels", get(xrpc::query_labels))
         .route(

moderation/src/state.rs

···
 
     #[error("database error: {0}")]
     Database(#[from] sqlx::Error),
+
+    #[error("io error: {0}")]
+    Io(#[from] std::io::Error),
 }
 
 impl IntoResponse for AppError {
···
             }
             AppError::Label(_) => (StatusCode::INTERNAL_SERVER_ERROR, "LabelError"),
             AppError::Database(_) => (StatusCode::INTERNAL_SERVER_ERROR, "DatabaseError"),
+            AppError::Io(_) => (StatusCode::INTERNAL_SERVER_ERROR, "IoError"),
         };
         let body = serde_json::json!({
             "error": error_type,

moderation/static/admin.css

···
+/* plyr.fm design tokens */
+:root {
+    --accent: #6a9fff;
+    --accent-hover: #8ab3ff;
+    --accent-muted: #4a7ddd;
+
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #141414;
+    --bg-tertiary: #1a1a1a;
+    --bg-hover: #1f1f1f;
+
+    --border-subtle: #282828;
+    --border-default: #333333;
+    --border-emphasis: #444444;
+
+    --text-primary: #e8e8e8;
+    --text-secondary: #b0b0b0;
+    --text-tertiary: #808080;
+    --text-muted: #666666;
+
+    --success: #4ade80;
+    --warning: #fbbf24;
+    --error: #ef4444;
+}
+
+* { box-sizing: border-box; }
+
+body {
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 24px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+}
+
+h1 {
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 4px 0;
+}
+
+.subtitle {
+    color: var(--text-tertiary);
+    margin: 0 0 32px 0;
+    font-size: 0.9rem;
+}
+
+/* auth form */
+.auth-section {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 24px;
+}
+
+.auth-section input[type="password"] {
+    font-family: inherit;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-default);
+    color: var(--text-primary);
+    padding: 10px 14px;
+    border-radius: 6px;
+    width: 280px;
+    font-size: 0.9rem;
+}
+
+.auth-section input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* buttons */
+.btn {
+    font-family: inherit;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 10px 16px;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: var(--bg-primary);
+}
+.btn-primary:hover { background: var(--accent-hover); }
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-default);
+}
+.btn-secondary:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-emphasis);
+}
+
+.btn-warning {
+    background: var(--warning);
+    color: var(--bg-primary);
+}
+.btn-warning:hover {
+    background: #d97706;
+}
+
+.btn:disabled {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    cursor: not-allowed;
+    border: 1px solid var(--border-subtle);
+}
+
+/* header row */
+.header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.header-row h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+/* flags list */
+.flags-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.flag-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 20px;
+}
+
+.flag-card.resolved {
+    opacity: 0.5;
+}
+
+.flag-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.track-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.track-info h3 {
+    margin: 0 0 4px 0;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.track-info .artist {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.track-info .uri {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    word-break: break-all;
+    margin-top: 8px;
+}
+
+.flag-badges {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.badge {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.badge.pending {
+    background: rgba(251, 191, 36, 0.15);
+    color: var(--warning);
+}
+
+.badge.resolved {
+    background: rgba(74, 222, 128, 0.15);
+    color: var(--success);
+}
+
+.badge.score {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--error);
+}
+
+/* matches section */
+.matches {
+    background: var(--bg-primary);
+    border-radius: 6px;
+    padding: 14px;
+    margin-top: 16px;
+}
+
+.matches h4 {
+    margin: 0 0 10px 0;
+    color: var(--text-tertiary);
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-transform: lowercase;
+}
+
+.match-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 0.85rem;
+}
+
+.match-item:last-child { border-bottom: none; }
+
+.match-item .title {
+    color: var(--text-primary);
+}
+
+.match-item .artist {
+    color: var(--text-tertiary);
+}
+
+.match-item .score {
+    color: var(--error);
+    font-weight: 500;
+}
+
+/* actions */
+.flag-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-subtle);
+}
+
+/* states */
+.empty, .loading {
+    color: var(--text-muted);
+    text-align: center;
+    padding: 48px 24px;
+}
+
+.no-context {
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* toast */
+.toast {
+    position: fixed;
+    bottom: 24px;
+    left: 24px;
+    padding: 12px 20px;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    animation: fadeInUp 0.2s ease, fadeOut 0.3s ease 2.7s forwards;
+}
+
+.toast.success {
+    background: rgba(74, 222, 128, 0.15);
+    color: var(--success);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+}
+
+.toast.error {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--error);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+    to { opacity: 0; }
+}
+
+/* htmx indicator */
+.htmx-indicator {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+.htmx-request .htmx-indicator {
+    opacity: 1;
+}
+.htmx-request.htmx-indicator {
+    opacity: 1;
+}
+
+/* mobile */
+@media (max-width: 640px) {
+    body { padding: 16px; }
+    .auth-section input[type="password"] { width: 100%; margin-bottom: 12px; }
+    .flag-header { flex-direction: column; }
+    .flag-badges { margin-top: 12px; }
+}

moderation/static/admin.html

···
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>moderation · plyr.fm</title>
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <link rel="stylesheet" href="/static/admin.css">
+</head>
+<body>
+    <h1>moderation</h1>
+    <p class="subtitle">review and resolve copyright flags</p>
+
+    <div class="auth-section">
+        <input type="password"
+               id="auth-token"
+               placeholder="auth token"
+               onkeyup="if(event.key==='Enter')authenticate()">
+        <button class="btn btn-primary" onclick="authenticate()" style="margin-left: 10px">
+            authenticate
+        </button>
+    </div>
+
+    <div id="main-content" style="display: none;">
+        <div class="header-row">
+            <h2>flagged tracks</h2>
+            <button class="btn btn-secondary"
+                    hx-get="/admin/flags-html"
+                    hx-target="#flags-list"
+                    hx-indicator="#refresh-indicator">
+                <span id="refresh-indicator" class="htmx-indicator">...</span>
+                refresh
+            </button>
+        </div>
+
+        <div id="flags-list" class="flags-list"
+             hx-get="/admin/flags-html"
+             hx-trigger="load, flagsUpdated from:body"
+             hx-indicator="#loading">
+            <div id="loading" class="loading htmx-indicator">loading...</div>
+        </div>
+    </div>
+
+    <div id="toast"></div>
+
+    <script src="/static/admin.js"></script>
+</body>
+</html>

moderation/static/admin.js

···
+// Check for saved token on load
+const savedToken = localStorage.getItem('mod_token');
+if (savedToken) {
+    document.getElementById('auth-token').value = '••••••••';
+    showMain();
+    setAuthHeader(savedToken);
+}
+
+function authenticate() {
+    const token = document.getElementById('auth-token').value;
+    if (token && token !== '••••••••') {
+        localStorage.setItem('mod_token', token);
+        setAuthHeader(token);
+        showMain();
+        htmx.trigger('#flags-list', 'load');
+    }
+}
+
+function showMain() {
+    document.getElementById('main-content').style.display = 'block';
+}
+
+function setAuthHeader(token) {
+    document.body.addEventListener('htmx:configRequest', function(evt) {
+        evt.detail.headers['X-Moderation-Key'] = token;
+    });
+}
+
+// Handle auth errors
+document.body.addEventListener('htmx:responseError', function(evt) {
+    if (evt.detail.xhr.status === 401) {
+        localStorage.removeItem('mod_token');
+        showToast('invalid token', 'error');
+    }
+});
+
+function showToast(message, type) {
+    const toast = document.getElementById('toast');
+    toast.className = 'toast ' + type;
+    toast.textContent = message;
+    toast.style.display = 'block';
+    setTimeout(() => { toast.style.display = 'none'; }, 3000);
+}