feat: add server-sent events for logging and activity tracking

- Implemented a custom tracing layer (`AppLogLayer`) to capture log events and broadcast them to SSE clients.
- Created admin routes for streaming server logs and listing recent activity logs.
- Added an activity log repository interface and SQLite implementation for persisting activity events.
- Integrated activity logging into user authentication and channel CRUD operations.
- Developed frontend components for displaying server logs and activity logs in the admin panel.
- Enhanced the video player with a stats overlay for monitoring streaming metrics.

k-tv-frontend/app/(main)/tv/components/stats-panel.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type Hls from "hls.js";
+import type { CurrentBroadcastResponse } from "@/lib/types";
+
+interface StatsPanelProps {
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  hlsRef: React.RefObject<Hls | null>;
+  streamingProtocol?: "hls" | "direct_file";
+  broadcast?: CurrentBroadcastResponse | null;
+}
+
+interface Stats {
+  protocol: string;
+  resolution: string;
+  bitrate: string;
+  bandwidth: string;
+  buffer: string;
+  offset: string;
+  slotEnds: string;
+}
+
+function fmtSecs(s: number) {
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = Math.floor(s % 60);
+  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+  return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+}
+
+function fmtKbps(bps: number) {
+  if (!bps) return "--";
+  return `${Math.round(bps / 1000).toLocaleString()} kbps`;
+}
+
+function getBufferAhead(video: HTMLVideoElement) {
+  const ct = video.currentTime;
+  for (let i = 0; i < video.buffered.length; i++) {
+    if (video.buffered.start(i) <= ct && ct <= video.buffered.end(i)) {
+      return video.buffered.end(i) - ct;
+    }
+  }
+  return 0;
+}
+
+export function StatsPanel({ videoRef, hlsRef, streamingProtocol, broadcast }: StatsPanelProps) {
+  const [stats, setStats] = useState<Stats>({
+    protocol: "--",
+    resolution: "--",
+    bitrate: "--",
+    bandwidth: "--",
+    buffer: "--",
+    offset: "--",
+    slotEnds: "--",
+  });
+
+  useEffect(() => {
+    const update = () => {
+      const video = videoRef.current;
+      const hls = hlsRef.current;
+
+      const protocol =
+        streamingProtocol === "direct_file"
+          ? "Direct file"
+          : hls
+            ? "HLS (hls.js)"
+            : "HLS (native)";
+
+      let resolution = "--";
+      let bitrate = "--";
+      let bandwidth = "--";
+
+      if (hls) {
+        const level = hls.currentLevel >= 0 ? hls.levels[hls.currentLevel] : null;
+        if (level) {
+          resolution = `${level.width}×${level.height}`;
+          bitrate = fmtKbps(level.bitrate);
+        }
+        if (hls.bandwidthEstimate > 0) {
+          bandwidth = fmtKbps(hls.bandwidthEstimate);
+        }
+      }
+
+      const buffer = video ? `${getBufferAhead(video).toFixed(1)} s` : "--";
+      const offset = video ? fmtSecs(video.currentTime) : "--";
+
+      let slotEnds = "--";
+      if (broadcast?.slot.end_at) {
+        const secsLeft = (new Date(broadcast.slot.end_at).getTime() - Date.now()) / 1000;
+        if (secsLeft > 0) {
+          slotEnds = `in ${fmtSecs(secsLeft)}`;
+        } else {
+          slotEnds = "ending…";
+        }
+      }
+
+      setStats({ protocol, resolution, bitrate, bandwidth, buffer, offset, slotEnds });
+    };
+
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, [videoRef, hlsRef, streamingProtocol, broadcast]);
+
+  return (
+    <div className="pointer-events-none absolute bottom-20 left-4 z-30 min-w-56 rounded-lg border border-white/10 bg-black/75 px-4 py-3 backdrop-blur-sm">
+      <div className="mb-2.5 flex items-center gap-2">
+        <span className="text-[10px] font-bold uppercase tracking-widest text-violet-400">
+          Stats for nerds
+        </span>
+        <span className="rounded bg-green-900/50 px-1.5 py-0.5 text-[9px] text-green-400">
+          LIVE
+        </span>
+      </div>
+      <table className="w-full border-collapse font-mono text-[11px]">
+        <tbody>
+          <tr>
+            <td className="pr-4 text-zinc-500">Protocol</td>
+            <td className="text-zinc-200">{stats.protocol}</td>
+          </tr>
+          <tr>
+            <td className="pr-4 text-zinc-500">Resolution</td>
+            <td className="text-zinc-200">{stats.resolution}</td>
+          </tr>
+          <tr>
+            <td className="pr-4 text-zinc-500">Bitrate</td>
+            <td className="text-zinc-200">{stats.bitrate}</td>
+          </tr>
+          <tr>
+            <td className="pr-4 text-zinc-500">Bandwidth est.</td>
+            <td className="text-green-400">{stats.bandwidth}</td>
+          </tr>
+          <tr>
+            <td className="pr-4 text-zinc-500">Buffer</td>
+            <td className="text-zinc-200">{stats.buffer}</td>
+          </tr>
+          <tr className="border-t border-white/10">
+            <td className="pr-4 pt-2 text-zinc-500">Offset</td>
+            <td className="pt-2 text-zinc-200">{stats.offset}</td>
+          </tr>
+          <tr>
+            <td className="pr-4 text-zinc-500">Slot ends</td>
+            <td className="text-zinc-200">{stats.slotEnds}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

k-tv-frontend/app/(main)/tv/components/video-player.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useEffect, useRef, useState } from "react";
 import Hls from "hls.js";
 import { Loader2 } from "lucide-react";
+import type { CurrentBroadcastResponse } from "@/lib/types";
+import { StatsPanel } from "./stats-panel";
 
 export interface SubtitleTrack {
   id: number;
@@ -19,6 +21,10 @@ interface VideoPlayerProps {
   muted?: boolean;
   /** Force direct-file mode (skips hls.js even for .m3u8 URLs). */
   streamingProtocol?: "hls" | "direct_file";
+  /** When true, renders the Stats for Nerds overlay. */
+  showStats?: boolean;
+  /** Current broadcast data passed to the stats panel for slot timing. */
+  broadcast?: CurrentBroadcastResponse | null;
   onStreamError?: () => void;
   onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
   /** Called when the browser blocks autoplay and user interaction is required. */
@@ -37,6 +43,8 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       subtitleTrack = -1,
       muted = false,
       streamingProtocol,
+      showStats = false,
+      broadcast,
       onStreamError,
       onSubtitleTracksChange,
       onNeedsInteraction,
@@ -162,6 +170,16 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
             <Loader2 className="h-10 w-10 animate-spin text-zinc-500" />
           </div>
         )}
+
+        {/* Stats for Nerds overlay */}
+        {showStats && (
+          <StatsPanel
+            videoRef={internalRef}
+            hlsRef={hlsRef}
+            streamingProtocol={streamingProtocol}
+            broadcast={broadcast}
+          />
+        )}
       </div>
     );
   },

k-tv-frontend/app/(main)/tv/page.tsx

@@ -16,6 +16,7 @@ import type { SubtitleTrack } from "./components/video-player";
 import type { LogoPosition } from "@/lib/types";
 import {
   Cast,
+  Info,
   Maximize2,
   Minimize2,
   Volume1,
@@ -101,6 +102,7 @@ function TvPageContent() {
   // Overlay / idle state
   const [showOverlays, setShowOverlays] = useState(true);
   const [showSchedule, setShowSchedule] = useState(false);
+  const [showStats, setShowStats] = useState(false);
   const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Video ref — used to resume playback if autoplay was blocked on load
@@ -411,6 +413,10 @@ function TvPageContent() {
           e.preventDefault();
           prevChannel();
           break;
+        case "s":
+        case "S":
+          setShowStats((v) => !v);
+          break;
         case "g":
         case "G":
           toggleSchedule();
@@ -623,6 +629,8 @@ function TvPageContent() {
           }
           subtitleTrack={activeSubtitleTrack}
           muted={isMuted}
+          showStats={showStats}
+          broadcast={broadcast}
           onSubtitleTracksChange={setSubtitleTracks}
           onStreamError={handleStreamError}
           onEnded={handleVideoEnded}
@@ -850,6 +858,14 @@ function TvPageContent() {
                 )}
               </div>
 
+              <button
+                className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${showStats ? "text-violet-400" : "text-zinc-400"}`}
+                onClick={() => setShowStats((v) => !v)}
+                title="Stats for nerds [S]"
+              >
+                <Info className="h-4 w-4" />
+              </button>
+
               <button
                 className="pointer-events-auto rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
                 onClick={toggleSchedule}