Added user page. fixed player.

Cargo.lock

@@ -1418,7 +1418,7 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
 
 [[package]]
 name = "furumusic"
-version = "0.2.12"
+version = "0.2.13"
 dependencies = [
  "anyhow",
  "async-trait",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "furumusic"
-version = "0.2.13"
+version = "0.2.14"
 edition = "2024"
 description = "Reusable web-app boilerplate: auth, OIDC/SSO, admin panel, user management, i18n, PostgreSQL"
 

src/admin/mod.rs

@@ -227,6 +227,55 @@ impl App for AdminApp {
                 },
                 "admin_v2_reviews_bulk",
             ),
+            Route::with_handler_and_name(
+                "/v2/api/users",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    get(move |session: Session, db: Database,
+                              query: UrlQuery<v2::UsersQuery>| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        async move {
+                            let pg_pool = pool
+                                .get_or_init(|| async {
+                                    sqlx::postgres::PgPoolOptions::new()
+                                        .max_connections(5)
+                                        .connect(&pool_config.database_url)
+                                        .await
+                                        .expect("admin pool")
+                                })
+                                .await;
+                            v2::users(session, db, pg_pool, query.0).await
+                        }
+                    })
+                },
+                "admin_v2_users",
+            ),
+            Route::with_handler_and_name(
+                "/v2/api/users/{id}",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    get(move |session: Session, db: Database, path: Path<PathId>| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        async move {
+                            let pg_pool = pool
+                                .get_or_init(|| async {
+                                    sqlx::postgres::PgPoolOptions::new()
+                                        .max_connections(5)
+                                        .connect(&pool_config.database_url)
+                                        .await
+                                        .expect("admin pool")
+                                })
+                                .await;
+                            v2::user_detail(session, db, pg_pool, path.0.id).await
+                        }
+                    })
+                },
+                "admin_v2_user_detail",
+            ),
             Route::with_handler_and_name(
                 "/v2/api/reviews/{id}/approve",
                 {

src/admin/v2.rs

@@ -45,6 +45,13 @@ pub(super) struct LibraryQuery {
     pub(super) offset: Option<i64>,
 }
 
+#[derive(Debug, Deserialize)]
+pub(super) struct UsersQuery {
+    pub(super) search: Option<String>,
+    pub(super) limit: Option<i64>,
+    pub(super) offset: Option<i64>,
+}
+
 #[derive(Debug, Deserialize)]
 pub(super) struct BulkReviewsRequest {
     action: String,
@@ -158,6 +165,48 @@ struct AdminDashboardDto {
     library: LibraryOverviewDto,
 }
 
+#[derive(Debug, Serialize, JsonSchema)]
+struct AdminUsersPageDto {
+    items: Vec<AdminUserRowDto>,
+    total: i64,
+    limit: i64,
+    offset: i64,
+    search: Option<String>,
+    online_count: i64,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct AdminUserRowDto {
+    id: i64,
+    username: String,
+    display_name: Option<String>,
+    email: Option<String>,
+    role: String,
+    is_active: bool,
+    is_online: bool,
+    last_seen_ms: Option<i64>,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct AdminUserDetailDto {
+    user: AdminUserRowDto,
+    stats: AdminUserStatsDto,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct AdminUserStatsDto {
+    plays: i64,
+    completed_plays: i64,
+    listened_seconds: i64,
+    liked_tracks: i64,
+    followed_artists: i64,
+    own_playlists: i64,
+    saved_playlists: i64,
+    uploaded_tracks: i64,
+    torrent_sessions: i64,
+    lastfm_connected: bool,
+}
+
 #[derive(Debug, Serialize, JsonSchema)]
 struct OverviewStatsDto {
     tracks: i64,
@@ -645,6 +694,41 @@ pub async fn reviews(
     Json(page).into_response()
 }
 
+pub async fn users(
+    session: Session,
+    db: Database,
+    pool: &PgPool,
+    query: UsersQuery,
+) -> cot::Result<cot::response::Response> {
+    if let Err(response) = require_admin_json(&session, &db).await {
+        return Ok(response);
+    }
+
+    let page = load_admin_users_page(pool, query)
+        .await
+        .map_err(|e| cot::Error::internal(e.to_string()))?;
+    Json(page).into_response()
+}
+
+pub async fn user_detail(
+    session: Session,
+    db: Database,
+    pool: &PgPool,
+    user_id: i64,
+) -> cot::Result<cot::response::Response> {
+    if let Err(response) = require_admin_json(&session, &db).await {
+        return Ok(response);
+    }
+
+    let detail = load_admin_user_detail(pool, user_id)
+        .await
+        .map_err(|e| cot::Error::internal(e.to_string()))?;
+    match detail {
+        Some(detail) => Json(detail).into_response(),
+        None => Ok(json_error(StatusCode::NOT_FOUND, "user not found")),
+    }
+}
+
 pub async fn bulk_reviews(
     session: Session,
     db: Database,
@@ -1554,6 +1638,197 @@ async fn load_overview_stats(pool: &PgPool) -> anyhow::Result<OverviewStatsDto>
     })
 }
 
+#[derive(Debug, sqlx::FromRow)]
+struct AdminUserSqlRow {
+    id: i64,
+    username: String,
+    display_name: Option<String>,
+    email: Option<String>,
+    role: String,
+    is_active: bool,
+}
+
+async fn load_admin_users_page(
+    pool: &PgPool,
+    query: UsersQuery,
+) -> anyhow::Result<AdminUsersPageDto> {
+    let limit = query.limit.unwrap_or(40).clamp(10, 200);
+    let offset = query.offset.unwrap_or(0).max(0);
+    let search = query
+        .search
+        .as_deref()
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(str::to_owned);
+    let pattern = search.as_ref().map(|value| format!("%{value}%"));
+
+    let mut count_qb =
+        QueryBuilder::<Postgres>::new("SELECT COUNT(*) FROM furumusic__user WHERE 1=1");
+    if let Some(pattern) = pattern.as_ref() {
+        count_qb.push(" AND (username ILIKE ");
+        count_qb.push_bind(pattern);
+        count_qb.push(" OR COALESCE(display_name, '') ILIKE ");
+        count_qb.push_bind(pattern);
+        count_qb.push(" OR COALESCE(email, '') ILIKE ");
+        count_qb.push_bind(pattern);
+        count_qb.push(")");
+    }
+    let total: i64 = count_qb.build_query_scalar().fetch_one(pool).await?;
+
+    let mut qb = QueryBuilder::<Postgres>::new(
+        "SELECT id, username::text, display_name, email, role::text, is_active FROM furumusic__user WHERE 1=1",
+    );
+    if let Some(pattern) = pattern.as_ref() {
+        qb.push(" AND (username ILIKE ");
+        qb.push_bind(pattern);
+        qb.push(" OR COALESCE(display_name, '') ILIKE ");
+        qb.push_bind(pattern);
+        qb.push(" OR COALESCE(email, '') ILIKE ");
+        qb.push_bind(pattern);
+        qb.push(")");
+    }
+    qb.push(" ORDER BY username ASC LIMIT ");
+    qb.push_bind(limit);
+    qb.push(" OFFSET ");
+    qb.push_bind(offset);
+    let rows: Vec<AdminUserSqlRow> = qb.build_query_as().fetch_all(pool).await?;
+
+    let active = crate::metrics::active_user_last_seen_ms();
+    let online_cutoff_ms = 60_000;
+    let items = rows
+        .into_iter()
+        .map(|row| admin_user_row(row, &active, online_cutoff_ms))
+        .collect::<Vec<_>>();
+    let online_count = active
+        .values()
+        .filter(|last_seen_ms| **last_seen_ms <= online_cutoff_ms)
+        .count() as i64;
+
+    Ok(AdminUsersPageDto {
+        items,
+        total,
+        limit,
+        offset,
+        search,
+        online_count,
+    })
+}
+
+async fn load_admin_user_detail(
+    pool: &PgPool,
+    user_id: i64,
+) -> anyhow::Result<Option<AdminUserDetailDto>> {
+    let row = sqlx::query_as::<_, AdminUserSqlRow>(
+        "SELECT id, username::text, display_name, email, role::text, is_active FROM furumusic__user WHERE id = $1",
+    )
+    .bind(user_id)
+    .fetch_optional(pool)
+    .await?;
+    let Some(row) = row else {
+        return Ok(None);
+    };
+
+    let active = crate::metrics::active_user_last_seen_ms();
+    let user = admin_user_row(row, &active, 60_000);
+    let (
+        plays,
+        completed_plays,
+        listened_seconds,
+        liked_tracks,
+        followed_artists,
+        own_playlists,
+        saved_playlists,
+        uploaded_tracks,
+        torrent_sessions,
+        lastfm_connected,
+    ) = tokio::try_join!(
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__play_history WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__play_history WHERE user_id = $1 AND completed"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COALESCE(SUM(duration_listened), 0)::bigint FROM furumusic__play_history WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__user_liked_track WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__user_followed_artist WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__playlist WHERE owner_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__saved_playlist WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(DISTINCT t.id) FROM furumusic__track t JOIN furumusic__media_file mf ON mf.id = t.media_file_id WHERE mf.uploaded_by_user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, i64>(
+            "SELECT COUNT(*) FROM furumusic__torrent_session WHERE user_id = $1"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+        sqlx::query_scalar::<_, bool>(
+            "SELECT EXISTS(SELECT 1 FROM furumusic__lastfm_account WHERE user_id = $1 AND session_key <> '')"
+        )
+        .bind(user_id)
+        .fetch_one(pool),
+    )?;
+
+    Ok(Some(AdminUserDetailDto {
+        user,
+        stats: AdminUserStatsDto {
+            plays,
+            completed_plays,
+            listened_seconds,
+            liked_tracks,
+            followed_artists,
+            own_playlists,
+            saved_playlists,
+            uploaded_tracks,
+            torrent_sessions,
+            lastfm_connected,
+        },
+    }))
+}
+
+fn admin_user_row(
+    row: AdminUserSqlRow,
+    active: &HashMap<i64, i64>,
+    online_cutoff_ms: i64,
+) -> AdminUserRowDto {
+    let last_seen_ms = active.get(&row.id).copied();
+    AdminUserRowDto {
+        id: row.id,
+        username: row.username,
+        display_name: row.display_name,
+        email: row.email,
+        role: row.role,
+        is_active: row.is_active,
+        is_online: last_seen_ms.is_some_and(|value| value <= online_cutoff_ms),
+        last_seen_ms,
+    }
+}
+
 fn load_runtime_overview(config: &AppConfig) -> RuntimeOverviewDto {
     let llm_configured = !config.agent_llm_url.trim().is_empty();
     let agent_status = if !config.agent_enabled {

src/i18n/phrases.rs

@@ -298,6 +298,7 @@ translations! {
     player_search_placeholder: "Search artists, releases, tracks..." , "Поиск артистов, релизов, треков...";
     player_connection_lost: "Server connection lost"             , "Нет соединения с сервером";
     player_connection_lost_detail: "Player cannot reach the server. Retrying..." , "Плеер не может связаться с сервером. Повторяю...";
+    player_active_device:   "Active device"                   , "Активный девайс";
     player_no_results:       "No results found"                , "Ничего не найдено";
     player_new_playlist:     "New Playlist"                    , "Новый плейлист";
     player_rename_playlist:  "Rename Playlist"                 , "Переименовать плейлист";

src/metrics.rs

@@ -159,6 +159,14 @@ pub fn record_active_user(user_id: i64) {
     users.insert(user_id, Instant::now());
 }
 
+pub fn active_user_last_seen_ms() -> HashMap<i64, i64> {
+    let users = ACTIVE_USERS.lock().expect("active user lock");
+    users
+        .iter()
+        .map(|(user_id, last_seen)| (*user_id, last_seen.elapsed().as_millis() as i64))
+        .collect()
+}
+
 pub fn record_auth_attempt(method: &'static str, outcome: &'static str, reason: &'static str) {
     REGISTRY.inc_counter(
         "furumusic_auth_login_attempts_total",

templates/admin/v2.html

@@ -307,7 +307,8 @@ button {
 }
 
 .btn:disabled,
-.icon-btn:disabled {
+.icon-btn:disabled,
+.seg-btn:disabled {
     opacity: 0.45;
     cursor: not-allowed;
 }
@@ -416,6 +417,15 @@ tbody tr:hover {
 .col-tags { width: 250px; }
 .col-time { width: 132px; }
 
+.users-table-wrap {
+    max-height: calc(100vh - 300px);
+}
+
+.users-table .user-status-column { width: 116px; }
+.users-table .user-role-column { width: 110px; }
+.users-table .user-active-column { width: 112px; }
+.users-table .user-seen-column { width: 170px; }
+
 .check {
     width: 16px;
     height: 16px;
@@ -1274,6 +1284,54 @@ tbody tr:hover {
     padding: 14px;
     overflow: auto;
 }
+
+.user-modal {
+    width: min(860px, calc(100vw - 80px));
+}
+
+.user-modal-tabs {
+    margin-bottom: 14px;
+}
+
+.user-summary-grid,
+.user-profile-facts {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    margin-bottom: 14px;
+}
+
+.user-summary-card,
+.user-profile-facts > div {
+    min-width: 0;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+}
+
+.user-summary-card span,
+.user-profile-facts span {
+    display: block;
+    color: var(--text-subdued);
+    font-size: 11px;
+    margin-bottom: 4px;
+}
+
+.user-summary-card strong,
+.user-profile-facts strong {
+    display: block;
+    overflow: hidden;
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 800;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.user-stats-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 </style>
 {% endblock head_extra %}
 
@@ -1309,6 +1367,11 @@ tbody tr:hover {
                 <i data-lucide="wrench"></i>
                 <span>Future Tools</span>
             </button>
+            <button class="nav-btn" :class="{active: activeView === 'users'}" @click="openUsers()">
+                <i data-lucide="users"></i>
+                <span>Users</span>
+                <span class="nav-count" x-text="users.online_count ? users.online_count + ' online' : ''"></span>
+            </button>
             <button class="nav-btn" :class="{active: activeView === 'settings'}" @click="openSettings()">
                 <i data-lucide="settings"></i>
                 <span>Settings</span>
@@ -1729,6 +1792,79 @@ tbody tr:hover {
             </div>
         </div>
 
+        <div class="content" x-show="activeView === 'users'">
+            <section class="stats-strip">
+                <div class="stat-cell">
+                    <div class="stat-value" x-text="fmt(users.total || 0)"></div>
+                    <div class="stat-label">Users</div>
+                </div>
+                <div class="stat-cell">
+                    <div class="stat-value" x-text="fmt(users.online_count || 0)"></div>
+                    <div class="stat-label">Online now</div>
+                </div>
+            </section>
+            <section class="panel">
+                <div class="panel-head">
+                    <div class="panel-title">
+                        <strong>Users</strong>
+                        <span x-text="usersSubtitle()"></span>
+                    </div>
+                    <div class="toolbar">
+                        <input class="search" placeholder="Search users" x-model="userSearch" @input.debounce.350ms="loadUsers()" />
+                        <button class="btn" @click="loadUsers(false)">
+                            <i data-lucide="refresh-cw"></i>
+                            Refresh
+                        </button>
+                    </div>
+                </div>
+                <div class="table-wrap users-table-wrap">
+                    <table class="users-table">
+                        <thead>
+                            <tr>
+                                <th class="user-status-column">Status</th>
+                                <th>User</th>
+                                <th class="user-role-column">Role</th>
+                                <th class="user-active-column">Account</th>
+                                <th class="user-seen-column">Last activity</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template x-for="user in users.items" :key="user.id">
+                                <tr @click="openUser(user)">
+                                    <td>
+                                        <span class="badge" :class="userStatusClass(user)" x-text="userStatusLabel(user)"></span>
+                                    </td>
+                                    <td>
+                                        <div class="primary-line" x-text="user.display_name || user.username"></div>
+                                        <div class="secondary-line" x-text="user.email ? user.username + ' · ' + user.email : user.username"></div>
+                                    </td>
+                                    <td><span x-text="user.role"></span></td>
+                                    <td>
+                                        <span class="badge" :class="user.is_active ? 'ok' : 'disabled'" x-text="user.is_active ? 'active' : 'disabled'"></span>
+                                    </td>
+                                    <td><span x-text="userLastSeenLabel(user)"></span></td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                    <div class="empty" x-show="!usersLoading && users.items.length === 0">No users in this filter</div>
+                </div>
+                <div class="action-strip">
+                    <span class="selection-summary" x-text="usersRangeText()"></span>
+                    <div class="toolbar">
+                        <select class="search" style="width:92px" x-model.number="users.limit" @change="users.offset = 0; loadUsers(false)">
+                            <option value="25">25</option>
+                            <option value="40">40</option>
+                            <option value="80">80</option>
+                            <option value="120">120</option>
+                        </select>
+                        <button class="btn" @click="pageUsers(-1)" :disabled="users.offset === 0">Previous</button>
+                        <button class="btn" @click="pageUsers(1)" :disabled="users.offset + users.limit >= users.total">Next</button>
+                    </div>
+                </div>
+            </section>
+        </div>
+
         <div class="content" x-show="activeView === 'tools'">
             <section class="panel">
                 <div class="panel-head">
@@ -2010,6 +2146,64 @@ tbody tr:hover {
         </div>
     </main>
 
+    <div class="modal-backdrop" x-show="userModalOpen && activeUserDetail" x-transition @click.self="userModalOpen = false">
+        <section class="modal user-modal">
+            <div class="modal-head">
+                <div class="panel-title">
+                    <strong x-text="activeUserDetail ? (activeUserDetail.user.display_name || activeUserDetail.user.username) : 'User'"></strong>
+                    <span x-text="activeUserDetail ? userStatusLabel(activeUserDetail.user) + ' · ' + activeUserDetail.user.role : ''"></span>
+                </div>
+                <button class="icon-btn" @click="userModalOpen = false">
+                    <i data-lucide="x"></i>
+                </button>
+            </div>
+            <div class="modal-body" x-show="activeUserDetail">
+                <div class="segmented user-modal-tabs">
+                    <button class="seg-btn" :class="{active: userModalTab === 'overview'}" @click="userModalTab = 'overview'">Overview</button>
+                    <button class="seg-btn" :class="{active: userModalTab === 'activity'}" @click="userModalTab = 'activity'" disabled>Activity</button>
+                    <button class="seg-btn" :class="{active: userModalTab === 'library'}" @click="userModalTab = 'library'" disabled>Library</button>
+                </div>
+                <div x-show="userModalTab === 'overview'">
+                    <section class="user-summary-grid">
+                        <div class="user-summary-card">
+                            <span>Status</span>
+                            <strong x-text="userStatusLabel(activeUserDetail.user)"></strong>
+                        </div>
+                        <div class="user-summary-card">
+                            <span>Last activity</span>
+                            <strong x-text="userLastSeenLabel(activeUserDetail.user)"></strong>
+                        </div>
+                        <div class="user-summary-card">
+                            <span>Account</span>
+                            <strong x-text="activeUserDetail.user.is_active ? 'active' : 'disabled'"></strong>
+                        </div>
+                        <div class="user-summary-card">
+                            <span>Last.fm</span>
+                            <strong x-text="activeUserDetail.stats.lastfm_connected ? 'connected' : 'not connected'"></strong>
+                        </div>
+                    </section>
+                    <section class="stats-strip user-stats-grid">
+                        <template x-for="cell in userStatCards()" :key="cell.label">
+                            <div class="stat-cell">
+                                <div class="stat-value" x-text="cell.display"></div>
+                                <div class="stat-label" x-text="cell.label"></div>
+                            </div>
+                        </template>
+                    </section>
+                    <div class="field">
+                        <label>Profile</label>
+                        <div class="user-profile-facts">
+                            <div><span>Username</span><strong x-text="activeUserDetail.user.username"></strong></div>
+                            <div><span>Email</span><strong x-text="activeUserDetail.user.email || 'not set'"></strong></div>
+                            <div><span>Display name</span><strong x-text="activeUserDetail.user.display_name || 'not set'"></strong></div>
+                            <div><span>Role</span><strong x-text="activeUserDetail.user.role"></strong></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
     <div class="modal-backdrop" x-show="reviewModalOpen && activeReview" x-transition @click.self="reviewModalOpen = false">
         <section class="modal">
             <div class="modal-head">
@@ -2307,6 +2501,12 @@ function adminV2() {
         runtime: { agent: {}, storage: [], node: {} },
         libraryOverview: {},
         reviews: { items: [], total: 0, limit: 80, offset: 0, status_counts: [] },
+        users: { items: [], total: 0, limit: 40, offset: 0, online_count: 0 },
+        usersLoading: false,
+        userSearch: '',
+        userModalOpen: false,
+        userModalTab: 'overview',
+        activeUserDetail: null,
         reviewFilter: { status: null, search: '' },
         selectedReviewIds: {},
         reviewSelectionScope: 'ids',
@@ -2450,6 +2650,8 @@ function adminV2() {
                     this.activeJobName ? this.loadRunsForJob(this.activeJobName, false) : Promise.resolve(),
                     this.refreshActiveRunDetail()
                 ]);
+            } else if (this.activeView === 'users') {
+                await Promise.allSettled([this.loadUsers(false)]);
             } else {
                 await Promise.allSettled([this.loadJobs(false), this.loadReviews(false)]);
             }
@@ -2482,6 +2684,8 @@ function adminV2() {
                 this.libraryKind = nextKind;
             } else if (view === 'settings') {
                 this.activeView = 'settings';
+            } else if (view === 'users') {
+                this.activeView = 'users';
             } else if (view === 'tools') {
                 this.activeView = 'tools';
             } else {
@@ -2513,6 +2717,9 @@ function adminV2() {
                 if (!this.settingsProbe.status || this.settingsProbe.status === 'idle') {
                     await this.loadSettingsProbe(false);
                 }
+            } else if (this.activeView === 'users') {
+                if (updateRoute) this.setRoute('#users');
+                await this.loadUsers(false);
             } else if (this.activeView === 'tools' && updateRoute) {
                 this.setRoute('#tools');
             }
@@ -2555,6 +2762,12 @@ function adminV2() {
             this.setRoute('#tools');
         },
 
+        openUsers() {
+            this.activeView = 'users';
+            this.setRoute('#users');
+            this.loadUsers();
+        },
+
         async loadReviews(resetOffset = true) {
             if (resetOffset) this.reviews.offset = 0;
             const params = new URLSearchParams();
@@ -2603,6 +2816,38 @@ function adminV2() {
             }
         },
 
+        async loadUsers(resetOffset = true) {
+            if (this.activeView !== 'users' && resetOffset) return;
+            if (resetOffset) this.users.offset = 0;
+            this.usersLoading = true;
+            const params = new URLSearchParams();
+            params.set('limit', this.users.limit || 40);
+            params.set('offset', this.users.offset || 0);
+            if (this.userSearch) params.set('search', this.userSearch);
+            try {
+                this.users = await this.request(`${this.apiBase}/users?${params.toString()}`);
+            } catch (error) {
+                this.showToast(error.message);
+            } finally {
+                this.usersLoading = false;
+                this.icons();
+            }
+        },
+
+        async openUser(user) {
+            if (!user) return;
+            this.userModalTab = 'overview';
+            this.activeUserDetail = { user, stats: {} };
+            this.userModalOpen = true;
+            try {
+                this.activeUserDetail = await this.request(`${this.apiBase}/users/${user.id}`);
+            } catch (error) {
+                this.showToast(error.message);
+            } finally {
+                this.icons();
+            }
+        },
+
         async loadSettings(showErrors = true) {
             try {
                 this.settings = await this.request(`${this.apiBase}/settings`);
@@ -3413,6 +3658,13 @@ function adminV2() {
             this.loadLibrary(false);
         },
 
+        pageUsers(delta) {
+            const next = Math.max(0, (this.users.offset || 0) + delta * (this.users.limit || 40));
+            if (next === this.users.offset) return;
+            this.users.offset = next;
+            this.loadUsers(false);
+        },
+
         statCells() {
             const agent = (this.runtime && this.runtime.agent) || {};
             const storage = (this.runtime && this.runtime.storage) || [];
@@ -3469,6 +3721,7 @@ function adminV2() {
             if (this.activeView === 'jobs') return 'Tasks';
             if (this.activeView === 'tools') return 'Future Tools';
             if (this.activeView === 'settings') return 'Settings';
+            if (this.activeView === 'users') return 'Users';
             return 'Review Queue';
         },
 
@@ -3477,6 +3730,7 @@ function adminV2() {
             if (this.activeView === 'jobs') return 'Scheduler state, recent runs, and manual controls in one place';
             if (this.activeView === 'tools') return 'Reserved space for merge, split, enrichment, and destructive workflows';
             if (this.activeView === 'settings') return 'Application configuration and external API credentials';
+            if (this.activeView === 'users') return 'Account status, live presence, and per-user listening statistics';
             return 'Full-screen review triage with filter-aware bulk actions';
         },
 
@@ -3493,6 +3747,55 @@ function adminV2() {
             return `${this.libraryKind} · ${this.fmt(this.library.total || 0)} rows`;
         },
 
+        usersSubtitle() {
+            return `${this.fmt(this.users.total || 0)} users · ${this.fmt(this.users.online_count || 0)} online`;
+        },
+
+        userStatusClass(user) {
+            return user?.is_online ? 'ok' : 'disabled';
+        },
+
+        userStatusLabel(user) {
+            return user?.is_online ? 'online' : 'offline';
+        },
+
+        userLastSeenLabel(user) {
+            if (!user || user.last_seen_ms == null) return 'never in this session';
+            if (user.is_online) return 'online now';
+            return this.durationApprox(user.last_seen_ms / 1000) + ' ago';
+        },
+
+        usersRangeText() {
+            const total = this.users.total || 0;
+            if (!total) return 'No users';
+            const start = (this.users.offset || 0) + 1;
+            const end = Math.min(total, (this.users.offset || 0) + (this.users.limit || 40));
+            return `${start}-${end} of ${this.fmt(total)}`;
+        },
+
+        userStatCards() {
+            const stats = this.activeUserDetail?.stats || {};
+            return [
+                { label: 'Plays', display: this.fmt(stats.plays || 0) },
+                { label: 'Completed plays', display: this.fmt(stats.completed_plays || 0) },
+                { label: 'Listened time', display: this.durationApprox(stats.listened_seconds || 0) },
+                { label: 'Liked tracks', display: this.fmt(stats.liked_tracks || 0) },
+                { label: 'Followed artists', display: this.fmt(stats.followed_artists || 0) },
+                { label: 'Own playlists', display: this.fmt(stats.own_playlists || 0) },
+                { label: 'Saved playlists', display: this.fmt(stats.saved_playlists || 0) },
+                { label: 'Uploaded tracks', display: this.fmt(stats.uploaded_tracks || 0) },
+                { label: 'Torrent sessions', display: this.fmt(stats.torrent_sessions || 0) }
+            ];
+        },
+
+        durationApprox(seconds) {
+            const value = Math.max(0, Number(seconds || 0));
+            if (value < 60) return `${Math.floor(value)}s`;
+            if (value < 3600) return `${Math.floor(value / 60)}m`;
+            if (value < 86400) return `${Math.floor(value / 3600)}h ${Math.floor((value % 3600) / 60)}m`;
+            return `${Math.floor(value / 86400)}d ${Math.floor((value % 86400) / 3600)}h`;
+        },
+
         librarySelectionSummary() {
             const count = this.selectedLibraryCount();
             if (!count) return 'Nothing selected';

templates/player/scripts.html

@@ -46,6 +46,7 @@ const T = {
     radioFailed: "{{ t.player_radio_failed }}",
     connectionLost: "{{ t.player_connection_lost }}",
     connectionLostDetail: "{{ t.player_connection_lost_detail }}",
+    activeDevice: "{{ t.player_active_device }}",
     trackWord: "{{ t.player_tracks_count }}",
     releaseWord: "{{ t.player_releases_count }}",
     ofWord: "{{ t.player_of }}",
@@ -1176,6 +1177,10 @@ document.addEventListener('alpine:init', () => {
         jamUsers: [],
         jamSelectedUsers: [],
         jamSearching: false,
+        remoteHintVisible: false,
+        remoteHintDeviceName: '',
+        _remoteHintShown: false,
+        _remoteHintTimer: null,
         _pollTimer: null,
         _jamSearchTimer: null,
         _stateRefreshTick: 0,
@@ -1265,6 +1270,34 @@ document.addEventListener('alpine:init', () => {
             if (wasActive && !this.isActive()) {
                 Alpine.store('player')?._pauseLocal();
             }
+            this._maybeShowRemoteHint();
+        },
+
+        remoteActiveDevice() {
+            if (!this.activeDeviceId || this.activeDeviceId === this.id) return null;
+            return this.devices.find(device => device.id === this.activeDeviceId) || null;
+        },
+
+        _maybeShowRemoteHint() {
+            if (this._remoteHintShown || this.remoteHintVisible || this.open) return;
+            const active = this.remoteActiveDevice();
+            if (!active) return;
+            this.remoteHintDeviceName = active.name || 'Devices';
+            this.remoteHintVisible = true;
+            this._remoteHintShown = true;
+            clearTimeout(this._remoteHintTimer);
+            this._remoteHintTimer = setTimeout(() => this.dismissRemoteHint(), 60000);
+        },
+
+        dismissRemoteHint() {
+            this.remoteHintVisible = false;
+            this._remoteHintShown = true;
+            clearTimeout(this._remoteHintTimer);
+            this._remoteHintTimer = null;
+        },
+
+        remoteHintText() {
+            return `${T.activeDevice}: ${this.remoteHintDeviceName || this.activeLabel()}`;
         },
 
         selectedJam() {
@@ -1330,6 +1363,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         toggle() {
+            this.dismissRemoteHint();
             this.open = !this.open;
             if (this.open) this.poll();
         },

templates/player/shell.html

@@ -639,23 +639,37 @@
                                 <span style="text-align:right">{{ t.player_duration }}</span>
                             </div>
                             <template x-for="(track, idx) in $store.library.currentArtist.featured_tracks" :key="track.id">
-                                <div class="track-row"
+                                <div class="track-row artist-appearance-row"
                                      :class="{ playing: $store.player.currentTrack && $store.player.currentTrack.id === track.id }"
                                      @dblclick="$store.queue.playRelease($store.library.currentArtist.featured_tracks, idx)">
                                     <span class="track-num" x-text="idx + 1"></span>
                                     <div class="track-info">
-                                        <div class="track-title">
+                                        <button class="artist-appearance-cover"
-                                            <span x-text="track.title"></span>
+                                                type="button"
-                                            <span style="color:var(--text-subdued)"> · </span>
+                                                @click.stop="$store.library.openRelease(track.release_id)"
-                                            <a class="artist-link" @click.stop="$store.library.openRelease(track.release_id)" x-text="track.release_title"></a>
+                                                :title="track.release_title"
-                                        </div>
+                                                aria-label="{{ t.player_release }}">
-                                        <div class="track-artists-inline">
+                                            <template x-if="track.cover_url">
-                                            <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                                <img :src="track.cover_url" :alt="track.release_title" loading="lazy">
-                                                <span>
-                                                    <template x-if="artistIdx > 0"><span>, </span></template>
-                                                    <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
-                                                </span>
                                             </template>
+                                            <template x-if="!track.cover_url">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/></svg>
+                                            </template>
+                                        </button>
+                                        <div class="artist-appearance-copy">
+                                            <div class="track-title">
+                                                <span x-text="track.title"></span>
+                                                <span style="color:var(--text-subdued)"> · </span>
+                                                <a class="artist-link" @click.stop="$store.library.openRelease(track.release_id)" x-text="track.release_title"></a>
+                                            </div>
+                                            <div class="track-artists-inline">
+                                                <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                                    <span>
+                                                        <template x-if="artistIdx > 0"><span>, </span></template>
+                                                        <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                                    </span>
+                                                </template>
+                                            </div>
                                         </div>
                                     </div>
                                     <span></span>
@@ -1074,6 +1088,16 @@
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
             </button>
             <div class="device-picker" @click.outside="$store.devices.open = false">
+                <template x-if="$store.devices.remoteHintVisible">
+                    <button class="remote-playback-hint"
+                            type="button"
+                            @click="$store.devices.dismissRemoteHint()"
+                            x-transition
+                            x-cloak>
+                        <span class="remote-playback-hint-text" x-text="$store.devices.remoteHintText()"></span>
+                        <span class="remote-playback-hint-progress"></span>
+                    </button>
+                </template>
                 <button class="queue-toggle-btn device-toggle-btn"
                         :class="{ active: $store.devices.isActive() }"
                         @click="$store.devices.toggle()"

templates/player/styles.html

@@ -735,6 +735,47 @@ button.user-stat:hover {
     margin-top: 2px;
 }
 
+.artist-appearance-row .track-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.artist-appearance-cover {
+    width: 42px;
+    height: 42px;
+    border: 0;
+    border-radius: 4px;
+    background: var(--bg-elevated);
+    color: var(--text-subdued);
+    cursor: pointer;
+    flex: 0 0 42px;
+    overflow: hidden;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.artist-appearance-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.artist-appearance-cover svg {
+    width: 22px;
+    height: 22px;
+}
+
+.artist-appearance-cover:hover {
+    filter: brightness(1.14);
+}
+
+.artist-appearance-copy {
+    min-width: 0;
+}
+
 .track-album { font-size: 13px; color: var(--text-subdued); }
 .track-duration { font-size: 13px; color: var(--text-subdued); text-align: right; pointer-events: none; }
 
@@ -1370,19 +1411,35 @@ button.user-stat:hover {
 
 .volume-slider {
     width: 104px;
-    height: 4px;
+    height: 28px;
-    background: var(--bg-active);
+    background: transparent;
-    border-radius: 2px;
+    border-radius: 6px;
     cursor: pointer;
     position: relative;
     touch-action: none;
+    display: flex;
+    align-items: center;
+}
+
+.volume-slider::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bg-active);
+    transform: translateY(-50%);
 }
 
 .volume-slider-fill {
-    height: 100%;
+    height: 4px;
     background: var(--text-primary);
     border-radius: 2px;
     position: relative;
+    z-index: 1;
+    pointer-events: none;
 }
 
 .volume-slider:hover .volume-slider-fill { background: var(--accent); }
@@ -1452,6 +1509,51 @@ button.user-stat:hover {
     justify-content: center;
 }
 
+.remote-playback-hint {
+    position: absolute;
+    right: 0;
+    bottom: 38px;
+    width: max-content;
+    max-width: min(280px, calc(100vw - 24px));
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    box-shadow: 0 14px 34px rgba(0,0,0,0.46);
+    cursor: pointer;
+    font: inherit;
+    overflow: hidden;
+    padding: 10px 12px 12px;
+    text-align: left;
+    z-index: 44;
+}
+
+.remote-playback-hint-text {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    line-height: 1.35;
+}
+
+.remote-playback-hint-progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent);
+    transform-origin: left center;
+    animation: remote-playback-hint-progress 60s linear forwards;
+}
+
+@keyframes remote-playback-hint-progress {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
+}
+
 .device-popover {
     position: absolute;
     right: 0;
@@ -4164,13 +4266,19 @@ button.user-stat:hover {
     }
 
     .volume-slider {
-        display: block;
+        display: flex;
         width: 100%;
-        height: 9px;
+        height: 34px;
-        border-radius: 999px;
+        border-radius: 6px;
     }
 
     .volume-slider-fill {
+        height: 7px;
+        border-radius: 999px;
+    }
+
+    .volume-slider::before {
+        height: 7px;
         border-radius: 999px;
     }
 
@@ -4417,8 +4525,8 @@ button.user-stat:hover {
     }
 
     .player-bar.mobile-expanded .mobile-full-player .volume-slider {
-        display: block;
+        display: flex;
-        height: 7px;
+        height: 44px;
     }
 
     .player-bar.mobile-expanded .mobile-full-player .device-popover {
@@ -4432,6 +4540,14 @@ button.user-stat:hover {
         max-height: 42dvh;
     }
 
+    .player-bar.mobile-expanded .mobile-full-player .remote-playback-hint {
+        position: fixed;
+        top: auto;
+        bottom: calc(90px + var(--safe-bottom));
+        right: 18px;
+        max-width: calc(100vw - 36px);
+    }
+
     .player-bar.mobile-expanded .mobile-full-player .mobile-expanded-queue {
         display: block;
         width: 100%;
@@ -5053,7 +5169,7 @@ button.user-stat:hover {
     }
 
     .volume-slider {
-        display: block;
+        display: flex;
         width: 100%;
     }