feat: add metrics, observability, test fixtures, and scaling playbook artifacts

frontend/src/admin.test.ts

@@ -1,16 +1,18 @@
 /// <reference types="vitest" />
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { refreshAnalytics, refreshOverview, renderPlaylistSortable, savePlaylist } from "../src/admin";
 
 // Mock fetch globally
 let fetchCalls: { url: string; options?: RequestInit }[] = [];
-let mockFetchResponse: any = { ok: true, json: () => Promise.resolve({}) };
+let mockFetchResponse: any = { ok: true, payload: {} };
 
 beforeEach(() => {
   fetchCalls = [];
-  globalThis.fetch = vi.fn((url: string, options?: RequestInit) => {
+  globalThis.fetch = vi.fn(async (url: string, options?: RequestInit) => {
     fetchCalls.push({ url, options });
+    const payload = mockFetchResponse.payload ?? {};
     return Promise.resolve(
-      new Response(JSON.stringify(mockFetchResponse.json ? mockFetchResponse.json() : mockFetchResponse), {
+      new Response(JSON.stringify(payload), {
         status: mockFetchResponse.ok ? 200 : mockFetchResponse.status || 500,
         headers: { "Content-Type": "application/json" },
       }),
@@ -140,3 +142,132 @@ describe("API calls on tab load", () => {
     expect(true).toBe(true);
   });
 });
+
+describe("admin data refresh", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="overview-status"></div>
+      <span id="stat-viewers"></span>
+      <span id="stat-stored-messages"></span>
+      <span id="stat-moderation-actions"></span>
+      <span id="stat-media-runtime"></span>
+      <span id="stat-media-count"></span>
+      <span id="system-stored-messages"></span>
+      <span id="system-redis-clients"></span>
+      <span id="system-redis-enabled"></span>
+      <span id="system-redis-memory"></span>
+      <span id="system-db-driver"></span>
+      <span id="system-generated-at"></span>
+      <div id="analytics-status"></div>
+      <span id="analytics-total-messages"></span>
+      <span id="analytics-messages-24h"></span>
+      <span id="analytics-distinct-rooms"></span>
+      <span id="analytics-moderation-actions"></span>
+      <span id="analytics-generated-at"></span>
+      <table><tbody id="analytics-table-body"></tbody></table>
+    `;
+  });
+
+  it("renders overview stats from the admin overview API", async () => {
+    mockFetchResponse = {
+      ok: true,
+      payload: {
+        viewers: 12,
+        storedMessages: 345,
+        moderationActions: 9,
+        mediaTotalRuntime: "01:23:45",
+        mediaCount: 7,
+        redisClients: 4,
+        redisEnabled: true,
+        redisMemoryUsed: "18 MB",
+        databaseDriver: "sqlite",
+        generatedAt: "2026-08-08T12:00:00Z",
+      },
+    };
+
+    await refreshOverview();
+
+    expect(document.getElementById("stat-viewers")?.textContent).toBe("12");
+    expect(document.getElementById("stat-stored-messages")?.textContent).toBe("345");
+    expect(document.getElementById("system-redis-enabled")?.textContent).toBe("yes");
+    expect(document.getElementById("overview-status")?.textContent).toContain("2026-08-08T12:00:00Z");
+  });
+
+  it("renders analytics rows from the analytics API", async () => {
+    mockFetchResponse = {
+      ok: true,
+      payload: {
+        totalMessages: 1000,
+        messagesLast24Hours: 75,
+        distinctRooms: 3,
+        moderationActions: 11,
+        generatedAt: "2026-08-08T12:30:00Z",
+        topRooms: [
+          { room: "main", messageCount: 55 },
+          { room: "lobby", messageCount: 20 },
+        ],
+      },
+    };
+
+    await refreshAnalytics();
+
+    expect(document.getElementById("analytics-total-messages")?.textContent).toBe("1000");
+    expect(document.getElementById("analytics-messages-24h")?.textContent).toBe("75");
+    expect(document.getElementById("analytics-table-body")?.textContent).toContain("main");
+    expect(document.getElementById("analytics-table-body")?.textContent).toContain("lobby");
+  });
+});
+
+describe("playlist management", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="playlist-status"></div>
+      <textarea id="playlist-content">file '/app/media/demo1.mp4'
+file '/app/media/demo2.mp4'
+</textarea>
+      <ul id="playlist-sortable"></ul>
+      <div id="playlist-warnings" hidden></div>
+    `;
+  });
+
+  it("saves playlist via PUT request", async () => {
+    mockFetchResponse = { ok: true, payload: {} };
+
+    await savePlaylist();
+
+    const putCall = fetchCalls.find((c) => c.options?.method === "PUT");
+    expect(putCall).toBeDefined();
+    expect(putCall?.url).toBe("/api/admin/playlist");
+    expect(putCall?.options?.headers).toEqual({ "Content-Type": "application/json" });
+    const body = JSON.parse(putCall?.options?.body as string);
+    expect(body.content).toContain("demo1.mp4");
+  });
+
+  it("sets error status on save failure", async () => {
+    mockFetchResponse = { ok: false, status: 500, payload: {} };
+
+    await savePlaylist();
+
+    const status = document.getElementById("playlist-status");
+    expect(status?.textContent).toContain("Failed");
+  });
+
+  it("renders sortable playlist with indexes and paths", () => {
+    renderPlaylistSortable("file '/app/media/demo1.mp4'\nfile '/app/media/demo2.mp4'\n");
+
+    const list = document.getElementById("playlist-sortable")!;
+    expect(list.children).toHaveLength(2);
+    expect(list.innerHTML).toContain("demo1.mp4");
+    expect(list.innerHTML).toContain("demo2.mp4");
+    expect(list.querySelector(".sortable-index")?.textContent).toBe("1");
+    expect(list.querySelector("[data-remove]")).toBeTruthy();
+  });
+
+  it("skips comment and blank lines in sortable", () => {
+    renderPlaylistSortable("# comment\n\nfile '/app/media/demo1.mp4'\n");
+
+    const list = document.getElementById("playlist-sortable")!;
+    expect(list.children).toHaveLength(1);
+    expect(list.innerHTML).toContain("demo1.mp4");
+  });
+});