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)/admin/components/server-logs-panel.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { LogLine } from "@/lib/types";
+
+const LEVELS = ["DEBUG", "INFO", "WARN", "ERROR"] as const;
+
+const levelColor: Record<string, string> = {
+  DEBUG: "text-zinc-500",
+  INFO: "text-zinc-300",
+  WARN: "text-yellow-400",
+  ERROR: "text-red-400",
+};
+
+interface ServerLogsPanelProps {
+  lines: LogLine[];
+  connected: boolean;
+  onClear: () => void;
+}
+
+export function ServerLogsPanel({ lines, connected, onClear }: ServerLogsPanelProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [levelFilter, setLevelFilter] = useState<Set<string>>(
+    new Set(["DEBUG", "INFO", "WARN", "ERROR"]),
+  );
+
+  const filtered = lines.filter((l) => levelFilter.has(l.level.toUpperCase()));
+
+  useEffect(() => {
+    if (!autoScroll) return;
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [filtered.length, autoScroll]);
+
+  const toggleLevel = (level: string) => {
+    setLevelFilter((prev) => {
+      const next = new Set(prev);
+      if (next.has(level)) next.delete(level);
+      else next.add(level);
+      return next;
+    });
+  };
+
+  const handleScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    setAutoScroll(atBottom);
+  };
+
+  const fmtTime = (ts: string) => {
+    if (!ts) return "";
+    try {
+      return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
+    } catch {
+      return ts;
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-2 border-b border-zinc-800 px-4 py-2.5">
+        <span className="text-xs font-semibold uppercase tracking-widest text-violet-400">
+          Server Logs
+        </span>
+        <span
+          className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
+            connected
+              ? "bg-green-900/40 text-green-400"
+              : "bg-zinc-800 text-zinc-500"
+          }`}
+        >
+          {connected ? "● live" : "○ disconnected"}
+        </span>
+
+        <div className="ml-auto flex items-center gap-1">
+          {LEVELS.map((lvl) => (
+            <button
+              key={lvl}
+              onClick={() => toggleLevel(lvl)}
+              className={`rounded px-2 py-0.5 text-[10px] font-medium transition-opacity ${
+                levelFilter.has(lvl) ? "opacity-100" : "opacity-30"
+              } ${levelColor[lvl] ?? "text-zinc-400"}`}
+            >
+              {lvl}
+            </button>
+          ))}
+          <button
+            onClick={() => {
+              onClear();
+              setAutoScroll(true);
+            }}
+            className="ml-2 rounded px-2 py-0.5 text-[10px] text-zinc-500 hover:text-zinc-300"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {/* Log lines */}
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        className="flex-1 overflow-y-auto bg-zinc-950 px-4 py-2 font-mono text-[11px] leading-relaxed"
+      >
+        {filtered.length === 0 ? (
+          <p className="mt-8 text-center text-zinc-600">
+            {connected ? "Waiting for log events…" : "Connecting to server…"}
+          </p>
+        ) : (
+          filtered.map((line, i) => (
+            <div key={i} className="flex gap-3">
+              <span className="shrink-0 text-zinc-600">{fmtTime(line.timestamp)}</span>
+              <span
+                className={`w-10 shrink-0 font-semibold ${levelColor[line.level?.toUpperCase()] ?? "text-zinc-400"}`}
+              >
+                {line.level?.toUpperCase()}
+              </span>
+              <span className="shrink-0 text-zinc-500">{line.target}</span>
+              <span className="text-zinc-200">{line.message}</span>
+            </div>
+          ))
+        )}
+        <div className="text-violet-400">{connected && lines.length > 0 ? "▋" : ""}</div>
+      </div>
+    </div>
+  );
+}