feat(diagnostics): the admin log console

Admin → Diagnostics reads the server's stored log: one list, newest first,
where a line opens in place to its full record (time, source and logger,
account, request and job ids, version, message, attributes, stack). A
request or job id narrows the list to that request or job with every other
filter off, shown as a removable chip. Filters: level group, source,
account, event, period and a free-text search; all of them live in the URL
(`l*` keys, which setPage clears like the Plex and Channels keys), so a
filtered view is a link and Back restores it. "Live" re-reads the newest
page every few seconds while the tab is visible; paging into older rows
turns it off. Copy puts the loaded lines on the clipboard as JSON lines.

The facet counts now honour every filter but their own, as the feed's do:
a request pivot narrows them, and a picked level does not zero its
siblings. A value in use stays offered even when the counts drop it.

"Saját napló" and the console draw a line with one shared component,
`LogLine`, whose phone layout gives the message its own full-width line
(sharing the code's line left it a few characters). The level groups
moved to lib/log.ts for both.

The console's own reads are logged at DEBUG on success, like the
healthcheck: at INFO its live tail filled the log with itself.

frontend/src/components/AdminLogs.dom.test.tsx

@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+//
+// E22.6: the admin log console. A request id narrows the list to that request (and says so, in the
+// filter row and the URL); a filter value the facets no longer count stays pickable; "Live" watches
+// the newest page only; a failed read is an error, not an empty log.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import type { LogFacets, LogPage, LogQuery, ServerLogRow } from "../lib/api";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, vars?: Record<string, unknown>) =>
+        vars?.id != null ? `${key}:${String(vars.id)}` : key,
+      i18n: { language: "en" },
+    }),
+  };
+});
+
+const logsMock = vi.fn<(query: LogQuery, before: string | null) => Promise<LogPage>>();
+const facetsMock = vi.fn<(query: LogQuery) => Promise<LogFacets>>();
+vi.mock("../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../lib/api")>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      adminLogs: (query: LogQuery, before: string | null) => logsMock(query, before),
+      adminLogFacets: (query: LogQuery) => facetsMock(query),
+    },
+  };
+});
+
+import AdminLogs from "./AdminLogs";
+
+function row(id: number, extra: Partial<ServerLogRow> = {}): ServerLogRow {
+  return {
+    id,
+    ts: new Date(Date.UTC(2026, 8, 19, 12, 0, id)).toISOString(),
+    level: "INFO",
+    source: "api",
+    logger: "siftlode.http",
+    event: "http.request",
+    msg: `GET /api/thing/${id} 200`,
+    attrs: null,
+    exc: null,
+    request_id: `req-${String(id).padStart(8, "0")}`,
+    user_id: 1,
+    job_id: null,
+    debug_session_id: null,
+    version: "0.90.0",
+    ...extra,
+  };
+}
+
+const FACETS: LogFacets = {
+  levels: [{ value: "INFO", count: 3 }],
+  sources: [{ value: "api", count: 3 }],
+  events: [{ value: "http.request", count: 3 }],
+  users: [{ value: "1", count: 3 }],
+  accounts: { "1": "admin@example.com" },
+  total: 3,
+};
+
+function renderConsole() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <AdminLogs />
+    </QueryClientProvider>,
+  );
+}
+
+const lines = () =>
+  within(screen.getByTestId("admin-logs-lines"))
+    .queryAllByRole("button")
+    .filter((b) => b.hasAttribute("aria-expanded"));
+
+beforeEach(() => {
+  window.history.replaceState(null, "", "/?page=logs");
+  facetsMock.mockResolvedValue(FACETS);
+});
+afterEach(() => {
+  cleanup();
+  logsMock.mockReset();
+  facetsMock.mockReset();
+});
+
+describe("AdminLogs", () => {
+  it("a request id narrows the list to that request, with every other filter off", async () => {
+    window.history.replaceState(null, "", "/?page=logs&lgrp=error&lq=boom");
+    logsMock.mockResolvedValue({ items: [row(1)], accounts: {}, next_cursor: null });
+    renderConsole();
+
+    await waitFor(() => expect(lines()).toHaveLength(1));
+    fireEvent.click(lines()[0]!);
+    fireEvent.click(screen.getByRole("button", { name: "req-00000001" }));
+
+    await waitFor(() =>
+      expect(logsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ request_id: "req-00000001", levels: undefined, q: undefined }),
+        null,
+      ),
+    );
+    expect(screen.getByText("adminLogs.pivotRequest:req-00000001")).toBeTruthy();
+    const url = new URLSearchParams(window.location.search);
+    expect([url.get("lreq"), url.get("lgrp"), url.get("lq")]).toEqual(["req-00000001", null, null]);
+  });
+
+  it("keeps the account in use offered when the facets no longer count it", async () => {
+    window.history.replaceState(null, "", "/?page=logs&lu=7");
+    logsMock.mockResolvedValue({ items: [], accounts: {}, next_cursor: null });
+    renderConsole();
+    await waitFor(() => expect(facetsMock).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByTestId("logs-user"));
+
+    expect(await screen.findByTestId("logs-user-7")).toBeTruthy();
+    expect(screen.getByTestId("logs-user-1")).toBeTruthy();
+  });
+
+  it("Live watches the newest page only", async () => {
+    logsMock.mockImplementation(async (_q, before) =>
+      before === null
+        ? { items: [row(3), row(2)], accounts: {}, next_cursor: "c1" }
+        : { items: [row(1)], accounts: {}, next_cursor: null },
+    );
+    renderConsole();
+    await waitFor(() => expect(lines()).toHaveLength(2));
+    fireEvent.click(screen.getByRole("button", { name: "adminLogs.older" }));
+    await waitFor(() => expect(lines()).toHaveLength(3));
+
+    fireEvent.click(screen.getByRole("button", { name: "adminLogs.live" }));
+
+    await waitFor(() => expect(lines()).toHaveLength(2));
+    expect(
+      screen.getByRole("button", { name: "adminLogs.live" }).getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
+  it("a failed read is an error with a retry, not an empty log", async () => {
+    logsMock.mockRejectedValue(new Error("502"));
+    renderConsole();
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(screen.queryByText("adminLogs.empty")).toBeNull();
+  });
+});

frontend/src/components/AdminLogs.tsx

@@ -0,0 +1,425 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { Copy, Radio, Search, X } from "lucide-react";
+
+import { api, type LogFacet, type LogQuery, type ServerLogRow } from "../lib/api";
+import { copyText } from "../lib/clipboard";
+import { LEVEL_GROUPS, type LevelGroup } from "../lib/log";
+import {
+  DEFAULT_LOGS_STATE,
+  logsParamsToState,
+  logsParamUpdates,
+  WINDOW_HOURS,
+  type LogsUrlState,
+  type LogWindow,
+} from "../lib/logsUrlState";
+import { notify } from "../lib/notifications";
+import { qk } from "../lib/queryKeys";
+import { useDebounced } from "../lib/useDebounced";
+import { useUrlMirror } from "../lib/useUrlMirror";
+import LogLine from "./LogLine";
+import { Button } from "./ui/Button";
+import FilterChipGroup from "./ui/FilterChipGroup";
+import FilterSelect from "./ui/FilterSelect";
+import { Section } from "./ui/form";
+import { LoadingState, StateMessage } from "./ui/QueryState";
+
+// Admin → Diagnosztika: the server's stored log (`log_events`, E22.6). One list, newest first; a line
+// opens in place to its full record, and its request id / job id narrow the list to that request or
+// job. Filters live in the URL, so a filtered view is a link. "Élő" re-reads the newest page every
+// few seconds while the tab is visible — the newest page only: live is watching the top, so paging
+// into older rows turns it off.
+
+const LIVE_MS = 4000;
+const GROUPS: readonly LevelGroup[] = ["all", "error", "warning", "info", "detail"];
+const WINDOWS: readonly LogWindow[] = ["1h", "24h", "7d"];
+// A pivot shows everything about one request or job: the other filters would only hide part of it.
+const PIVOT_RESET: Omit<LogsUrlState, "requestId" | "jobId"> = {
+  ...DEFAULT_LOGS_STATE,
+  window: "7d",
+};
+
+function sinceOf(window: LogWindow): string {
+  return new Date(Date.now() - WINDOW_HOURS[window] * 3_600_000).toISOString();
+}
+
+function toQuery(state: LogsUrlState, q: string): LogQuery {
+  return {
+    levels: state.group === "all" ? undefined : LEVEL_GROUPS[state.group],
+    sources: state.sources,
+    user: state.user ?? undefined,
+    event: state.event ?? undefined,
+    request_id: state.requestId ?? undefined,
+    job_id: state.jobId ?? undefined,
+    q: q.trim() || undefined,
+  };
+}
+
+export default function AdminLogs() {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const [state, setState] = useState<LogsUrlState>(() =>
+    logsParamsToState(new URLSearchParams(window.location.search)),
+  );
+  const [live, setLive] = useState(false);
+  const [open, setOpen] = useState<number | null>(null);
+  const q = useDebounced(state.q, 300);
+  useUrlMirror(logsParamUpdates(state));
+
+  const update = (patch: Partial<LogsUrlState>) => {
+    setOpen(null);
+    setState((s) => ({ ...s, ...patch }));
+  };
+
+  const query = toQuery(state, q);
+  const key = qk.adminLogs({ ...query, window: state.window });
+  const logs = useInfiniteQuery({
+    queryKey: key,
+    queryFn: ({ pageParam }) =>
+      api.adminLogs({ ...query, since: sinceOf(state.window) }, pageParam),
+    initialPageParam: null as string | null,
+    getNextPageParam: (last) => last.next_cursor ?? undefined,
+    placeholderData: keepPreviousData,
+    refetchInterval: live ? LIVE_MS : false,
+  });
+  const facets = useQuery({
+    queryKey: qk.adminLogFacets({ ...query, window: state.window }),
+    queryFn: () => api.adminLogFacets({ ...query, since: sinceOf(state.window) }),
+    placeholderData: keepPreviousData,
+    refetchInterval: live ? LIVE_MS * 4 : false,
+  });
+
+  const rows = useMemo(() => logs.data?.pages.flatMap((p) => p.items) ?? [], [logs.data]);
+  const accounts = useMemo(
+    () =>
+      Object.assign(
+        {},
+        facets.data?.accounts,
+        ...(logs.data?.pages.map((p) => p.accounts) ?? []),
+      ) as Record<string, string>,
+    [facets.data, logs.data],
+  );
+  const accountLabel = (id: string) =>
+    id === "none" ? t("adminLogs.noAccount") : (accounts[id] ?? `#${id}`);
+
+  const toggleLive = () => {
+    if (!live) {
+      // Watching the top: drop the older pages, or every tick would re-read all of them.
+      qc.setQueryData<typeof logs.data>(key, (d) =>
+        d ? { pages: d.pages.slice(0, 1), pageParams: d.pageParams.slice(0, 1) } : d,
+      );
+    }
+    setLive(!live);
+  };
+
+  const loadOlder = () => {
+    setLive(false);
+    void logs.fetchNextPage();
+  };
+
+  const copy = async () => {
+    // Oldest first, as a log reads.
+    const text = [...rows]
+      .reverse()
+      .map((r) => JSON.stringify(r))
+      .join("\n");
+    const ok = await copyText(text);
+    notify(
+      ok
+        ? { level: "success", message: t("adminLogs.copied", { count: rows.length }) }
+        : { level: "error", message: t("adminLogs.copyFailed") },
+    );
+  };
+
+  const groupCount = (group: LevelGroup) => {
+    const levels = facets.data?.levels ?? [];
+    const sum = (list: readonly LogFacet[]) => list.reduce((n, f) => n + f.count, 0);
+    if (group === "all") return facets.data?.total;
+    const inGroup: readonly string[] = LEVEL_GROUPS[group];
+    return facets.data ? sum(levels.filter((f) => inGroup.includes(f.value))) : undefined;
+  };
+
+  const pivot = (patch: Pick<LogsUrlState, "requestId" | "jobId">) => {
+    setLive(false);
+    update({ ...PIVOT_RESET, ...patch });
+  };
+
+  // "Any", then what the facet counted. The value in use stays offered even at zero — under the
+  // other filters it may count nothing, and a menu without it would show no way back.
+  const facetOptions = (
+    list: readonly LogFacet[] | undefined,
+    selected: string | null,
+    label: (v: string) => string,
+  ) => {
+    const facets = list ?? [];
+    const kept =
+      selected && !facets.some((f) => f.value === selected) ? [{ value: selected, count: 0 }] : [];
+    return [
+      { value: "", label: t("adminLogs.any") },
+      ...[...facets, ...kept].map((f) => ({
+        value: f.value,
+        label: label(f.value),
+        count: f.count,
+      })),
+    ];
+  };
+
+  return (
+    <div className="p-4 max-w-6xl w-full mx-auto">
+      <Section card title={t("adminLogs.title")}>
+        <p className="text-xs text-muted leading-relaxed mb-3">{t("adminLogs.intro")}</p>
+
+        <div
+          data-testid="admin-logs"
+          className="overflow-hidden rounded-xl border border-border bg-bg"
+        >
+          <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
+            <label className="flex min-w-[12rem] flex-1 items-center gap-1.5 rounded-lg border border-border bg-card px-2 py-1 text-sm focus-within:border-accent">
+              <Search className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden />
+              <input
+                type="search"
+                value={state.q}
+                onChange={(e) => update({ q: e.target.value.slice(0, 200) })}
+                placeholder={t("adminLogs.search")}
+                aria-label={t("adminLogs.search")}
+                className="min-w-0 flex-1 bg-transparent outline-none"
+              />
+            </label>
+            <FilterChipGroup
+              ariaLabel={t("adminLogs.levelLabel")}
+              value={state.group}
+              onChange={(group) => update({ group })}
+              options={GROUPS.map((g) => ({
+                value: g,
+                label: t(`settings.myLog.filters.${g}`),
+                count: groupCount(g),
+              }))}
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
+            <FilterSelect
+              label={t("adminLogs.source")}
+              options={facetOptions(facets.data?.sources, state.sources[0] ?? null, (v) => v)}
+              selected={[state.sources[0] ?? ""]}
+              onChange={([source]) => update({ sources: source ? [source] : [] })}
+              testId="logs-source"
+            />
+            <FilterSelect
+              label={t("adminLogs.account")}
+              options={facetOptions(facets.data?.users, state.user, accountLabel)}
+              selected={[state.user ?? ""]}
+              onChange={([user]) => update({ user: user || null })}
+              testId="logs-user"
+            />
+            <FilterSelect
+              label={t("adminLogs.event")}
+              options={facetOptions(facets.data?.events, state.event, (v) =>
+                v === "none" ? t("adminLogs.noEvent") : v,
+              )}
+              selected={[state.event ?? ""]}
+              onChange={([event]) => update({ event: event || null })}
+              testId="logs-event"
+            />
+            <FilterSelect
+              label={t("adminLogs.window")}
+              options={WINDOWS.map((w) => ({ value: w, label: t(`adminLogs.windows.${w}`) }))}
+              selected={[state.window]}
+              onChange={([window]) => update({ window: window as LogWindow })}
+              testId="logs-window"
+            />
+            <span className="ml-auto flex gap-1.5">
+              <Button
+                variant={live ? "outline-accent" : "outline"}
+                size="xs"
+                icon={<Radio className="h-3.5 w-3.5" />}
+                aria-pressed={live}
+                onClick={toggleLive}
+              >
+                {t("adminLogs.live")}
+              </Button>
+              <Button
+                variant="outline"
+                size="xs"
+                icon={<Copy className="h-3.5 w-3.5" />}
+                disabled={rows.length === 0}
+                onClick={() => void copy()}
+              >
+                {t("adminLogs.copy")}
+              </Button>
+            </span>
+          </div>
+
+          {(state.requestId || state.jobId !== null) && (
+            <div className="flex flex-wrap items-center gap-2 border-b border-border px-2 py-1.5 text-xs">
+              {state.requestId && (
+                <PivotChip
+                  label={t("adminLogs.pivotRequest", { id: state.requestId })}
+                  clearLabel={t("adminLogs.clearPivot")}
+                  onClear={() => update({ requestId: null })}
+                />
+              )}
+              {state.jobId !== null && (
+                <PivotChip
+                  label={t("adminLogs.pivotJob", { id: state.jobId })}
+                  clearLabel={t("adminLogs.clearPivot")}
+                  onClear={() => update({ jobId: null })}
+                />
+              )}
+            </div>
+          )}
+
+          <div className="font-mono text-2xs" data-testid="admin-logs-lines">
+            {logs.isError && !logs.data ? (
+              <StateMessage tone="error" onRetry={() => void logs.refetch()}>
+                {t("common.loadError")}
+              </StateMessage>
+            ) : logs.isLoading ? (
+              <LoadingState />
+            ) : rows.length === 0 ? (
+              <p className="px-3 py-6 text-center font-sans text-sm text-muted">
+                {t("adminLogs.empty")}
+              </p>
+            ) : (
+              rows.map((row) => (
+                <LogLine
+                  key={row.id}
+                  ts={row.ts}
+                  level={row.level}
+                  event={row.event ?? "—"}
+                  msg={row.msg}
+                  title={new Date(row.ts).toLocaleString()}
+                  open={open === row.id}
+                  onToggle={() => setOpen(open === row.id ? null : row.id)}
+                >
+                  <RowDetail
+                    row={row}
+                    account={row.user_id === null ? null : accountLabel(String(row.user_id))}
+                    onRequest={(requestId) => pivot({ requestId, jobId: null })}
+                    onJob={(jobId) => pivot({ requestId: null, jobId })}
+                  />
+                </LogLine>
+              ))
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-1.5 text-xs text-muted">
+            <span>{t("adminLogs.count", { count: rows.length })}</span>
+            {logs.hasNextPage && (
+              <Button
+                variant="outline"
+                size="xs"
+                disabled={logs.isFetchingNextPage}
+                onClick={loadOlder}
+              >
+                {t("adminLogs.older")}
+              </Button>
+            )}
+          </div>
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+function PivotChip({
+  label,
+  clearLabel,
+  onClear,
+}: {
+  label: string;
+  clearLabel: string;
+  onClear: () => void;
+}) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-accent/40 bg-accent/10 py-0.5 pl-2.5 pr-1 text-accent">
+      <span className="font-mono">{label}</span>
+      <button
+        type="button"
+        onClick={onClear}
+        aria-label={clearLabel}
+        title={clearLabel}
+        className="rounded-full p-0.5 hover:bg-accent/20"
+      >
+        <X className="h-3 w-3" aria-hidden />
+      </button>
+    </span>
+  );
+}
+
+function RowDetail({
+  row,
+  account,
+  onRequest,
+  onJob,
+}: {
+  row: ServerLogRow;
+  account: string | null;
+  onRequest: (id: string) => void;
+  onJob: (id: number) => void;
+}) {
+  const { t } = useTranslation();
+  const pivotCls =
+    "font-mono text-accent underline decoration-dotted underline-offset-2 hover:decoration-solid";
+  return (
+    <div className="flex flex-col gap-2">
+      <dl className="grid grid-cols-[max-content_minmax(0,1fr)] gap-x-3 gap-y-0.5 font-sans text-xs">
+        <dt>{t("adminLogs.fields.when")}</dt>
+        <dd className="tabular-nums">{new Date(row.ts).toLocaleString()}</dd>
+        <dt>{t("adminLogs.fields.source")}</dt>
+        <dd className="font-mono">
+          {row.source} · {row.logger}
+        </dd>
+        <dt>{t("adminLogs.fields.account")}</dt>
+        <dd>{account ?? "—"}</dd>
+        {row.request_id && (
+          <>
+            <dt>{t("adminLogs.fields.request")}</dt>
+            <dd>
+              <button
+                type="button"
+                className={pivotCls}
+                title={t("adminLogs.showRequest")}
+                onClick={() => onRequest(row.request_id!)}
+              >
+                {row.request_id}
+              </button>
+            </dd>
+          </>
+        )}
+        {row.job_id !== null && (
+          <>
+            <dt>{t("adminLogs.fields.job")}</dt>
+            <dd>
+              <button
+                type="button"
+                className={pivotCls}
+                title={t("adminLogs.showJob")}
+                onClick={() => onJob(row.job_id!)}
+              >
+                {row.job_id}
+              </button>
+            </dd>
+          </>
+        )}
+        {row.version && (
+          <>
+            <dt>{t("adminLogs.fields.version")}</dt>
+            <dd className="font-mono">{row.version}</dd>
+          </>
+        )}
+      </dl>
+      <pre className="overflow-x-auto whitespace-pre-wrap break-words">{row.msg}</pre>
+      {row.attrs && (
+        <pre className="overflow-x-auto whitespace-pre">{JSON.stringify(row.attrs, null, 2)}</pre>
+      )}
+      {row.exc && <pre className="overflow-x-auto whitespace-pre text-danger/90">{row.exc}</pre>}
+    </div>
+  );
+}

frontend/src/components/LogLine.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+
+import type { Level } from "../lib/log";
+
+// One log line as both log viewers draw it — "Saját napló" (this tab's ring) and the admin
+// diagnostics console (the server's stored log): time, level, event code, message, and the line opens
+// in place to whatever detail its screen has. One component, so a level reads the same on both.
+
+const LEVEL_TAG: Record<Level, { text: string; className: string }> = {
+  TRACE: { text: "TRACE", className: "text-muted opacity-80" },
+  DEBUG: { text: "DEBUG", className: "text-muted" },
+  INFO: { text: "INFO", className: "text-info" },
+  WARNING: { text: "WARN", className: "text-warn" },
+  ERROR: { text: "ERROR", className: "text-danger" },
+  CRITICAL: { text: "FATAL", className: "text-danger" },
+};
+
+/** `HH:MM:SS.mmm` in local time — a log is read to the millisecond. */
+function logClock(ts: string): string {
+  const d = new Date(ts);
+  const pad = (n: number, w = 2) => String(n).padStart(w, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+}
+
+export default function LogLine({
+  ts,
+  level,
+  event,
+  msg,
+  open,
+  onToggle,
+  title,
+  children,
+}: {
+  ts: string;
+  level: Level;
+  event: string;
+  msg: string;
+  open: boolean;
+  onToggle: () => void;
+  /** The row button's tooltip — the admin console puts the full date there. */
+  title?: string;
+  /** The detail shown while the line is open. */
+  children: ReactNode;
+}) {
+  const tag = LEVEL_TAG[level];
+  return (
+    <div className="border-b border-border/50 last:border-b-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={onToggle}
+        title={title}
+        className={`grid w-full grid-cols-[6.5em_3.5em_minmax(0,1fr)] items-baseline sm:grid-cols-[6.5em_3.5em_minmax(0,10em)_minmax(0,1fr)] gap-x-2 px-3 py-1 text-left hover:bg-card ${
+          open ? "bg-accent/10" : ""
+        }`}
+      >
+        <span className="tabular-nums text-muted">{logClock(ts)}</span>
+        <span className={`font-semibold ${tag.className}`}>{tag.text}</span>
+        <span className="truncate">{event}</span>
+        {/* A phone has no room for a fourth column: the message takes a line of its own under the
+            code, full width — sharing the code's line left it a few characters. */}
+        <span className="col-span-3 truncate sm:col-span-1">{msg}</span>
+      </button>
+      {open && <div className="bg-accent/5 px-3 py-2 text-muted">{children}</div>}
+    </div>
+  );
+}

frontend/src/components/MyLogViewer.tsx

@@ -3,33 +3,23 @@ import { useTranslation } from "react-i18next";
 import { Copy, Search } from "lucide-react";
 
 import { copyText } from "../lib/clipboard";
-import { clear, events, subscribe, type Level, type LogEvent } from "../lib/log";
+import {
+  clear,
+  events,
+  LEVEL_GROUPS,
+  subscribe,
+  type LevelGroup as Filter,
+  type LogEvent,
+} from "../lib/log";
 import { notify } from "../lib/notifications";
+import LogLine from "./LogLine";
 import { Button } from "./ui/Button";
 import FilterChipGroup from "./ui/FilterChipGroup";
 
-type Filter = "all" | "error" | "warning" | "info" | "detail";
-
-const FILTER_LEVELS: Record<Exclude<Filter, "all">, readonly Level[]> = {
-  error: ["ERROR", "CRITICAL"],
-  warning: ["WARNING"],
-  info: ["INFO"],
-  detail: ["DEBUG", "TRACE"],
-};
-
 // Rows rendered at once. The ring holds up to 2000 events; drawing all of them on every new event
 // would make the settings page the slowest thing in the app while it is watching the app.
 const ROWS_SHOWN = 500;
 
-const LEVEL_TAG: Record<Level, { text: string; className: string }> = {
-  TRACE: { text: "TRACE", className: "text-muted opacity-80" },
-  DEBUG: { text: "DEBUG", className: "text-muted" },
-  INFO: { text: "INFO", className: "text-info" },
-  WARNING: { text: "WARN", className: "text-warn" },
-  ERROR: { text: "ERROR", className: "text-danger" },
-  CRITICAL: { text: "FATAL", className: "text-danger" },
-};
-
 /** The ring, live: re-read at most once per animation frame however fast events arrive. */
 function useLogEvents(): LogEvent[] {
   const [list, setList] = useState(events);
@@ -73,12 +63,6 @@ const matches = (event: LogEvent, needle: string) =>
     .toLowerCase()
     .includes(needle);
 
-const clock = (ts: string) => {
-  const d = new Date(ts);
-  const pad = (n: number, w = 2) => String(n).padStart(w, "0");
-  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
-};
-
 // "Saját napló" — this tab's own client log (lib/log.ts), exactly what it would send while a raised
 // diagnostics level is on: newest first, filtered by level group and free text, a row opens to its
 // correlation id and attributes, and "Copy" puts the FILTERED events on the clipboard as JSON lines
@@ -99,7 +83,7 @@ export default function MyLogViewer() {
       detail: 0,
     };
     for (const e of all) {
-      for (const [group, levels] of Object.entries(FILTER_LEVELS)) {
+      for (const [group, levels] of Object.entries(LEVEL_GROUPS)) {
         if (levels.includes(e.level)) out[group as Filter] += 1;
       }
     }
@@ -108,7 +92,7 @@ export default function MyLogViewer() {
 
   const shown = useMemo(() => {
     const needle = query.trim().toLowerCase();
-    const levels = filter === "all" ? null : FILTER_LEVELS[filter];
+    const levels = filter === "all" ? null : LEVEL_GROUPS[filter];
     const out: LogEvent[] = [];
     for (let i = all.length - 1; i >= 0; i--) {
       const e = all[i]!;
@@ -166,47 +150,32 @@ export default function MyLogViewer() {
             {all.length === 0 ? t("settings.myLog.emptyAll") : t("settings.myLog.empty")}
           </p>
         ) : (
-          shown.slice(0, ROWS_SHOWN).map((e) => {
-            const tag = LEVEL_TAG[e.level];
-            const isOpen = open === e;
-            return (
-              <div key={rowKey(e)} className="border-b border-border/50 last:border-b-0">
-                <button
-                  type="button"
-                  aria-expanded={isOpen}
-                  onClick={() => setOpen(isOpen ? null : e)}
-                  className={`grid w-full grid-cols-[6.5em_3.5em_minmax(0,1fr)] items-baseline sm:grid-cols-[6.5em_3.5em_minmax(0,10em)_minmax(0,1fr)] gap-2 px-3 py-1 text-left hover:bg-card ${
-                    isOpen ? "bg-accent/10" : ""
-                  }`}
-                >
-                  <span className="tabular-nums text-muted">{clock(e.ts)}</span>
-                  <span className={`font-semibold ${tag.className}`}>{tag.text}</span>
-                  {/* A phone has no room for a fourth column: the code leads the message there. */}
-                  <span className="hidden truncate sm:block">{e.event}</span>
-                  <span className="truncate">
-                    <span className="sm:hidden">{e.event} · </span>
-                    {e.msg}
-                  </span>
-                </button>
-                {isOpen && (
-                  <pre className="overflow-x-auto whitespace-pre bg-accent/5 px-3 py-2 text-muted">
-                    {JSON.stringify(
-                      {
-                        event: e.event,
-                        msg: e.msg,
-                        request_id: e.request_id,
-                        ts: e.ts,
-                        tab_id: e.tab_id,
-                        attrs: e.attrs,
-                      },
-                      null,
-                      2,
-                    )}
-                  </pre>
+          shown.slice(0, ROWS_SHOWN).map((e) => (
+            <LogLine
+              key={rowKey(e)}
+              ts={e.ts}
+              level={e.level}
+              event={e.event}
+              msg={e.msg}
+              open={open === e}
+              onToggle={() => setOpen(open === e ? null : e)}
+            >
+              <pre className="overflow-x-auto whitespace-pre">
+                {JSON.stringify(
+                  {
+                    event: e.event,
+                    msg: e.msg,
+                    request_id: e.request_id,
+                    ts: e.ts,
+                    tab_id: e.tab_id,
+                    attrs: e.attrs,
+                  },
+                  null,
+                  2,
                 )}
-              </div>
-            );
-          })
+              </pre>
+            </LogLine>
+          ))
         )}
       </div>
 

frontend/src/components/NavigationProvider.dom.test.tsx

@@ -74,6 +74,17 @@ describe("NavigationProvider · setPage's same-page guard", () => {
     expect(result.current.page).toBe("plex");
   });
 
+  it("leaves every page's own URL keys behind, the log console's included", () => {
+    window.history.replaceState(
+      { sfPage: "logs" },
+      "",
+      "/?page=logs&lgrp=error&lreq=req-abcdef12&pscope=movie&ctab=hidden&keep=1",
+    );
+    const { result } = render();
+    act(() => result.current.setPage("plex"));
+    expect(window.location.search).toBe("?page=plex&keep=1");
+  });
+
   it("pushes nothing when it is already that page", () => {
     const { result } = render();
     act(() => result.current.setPage("plex"));

frontend/src/components/NavigationProvider.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { urlWithParams, type Page } from "../lib/urlState";
+import { LOGS_KEYS } from "../lib/logsUrlState";
 import { pageTitleKey } from "../lib/pageMeta";
 import { setAccountRaw } from "../lib/storage";
 import { setNavigator } from "../lib/nav";
@@ -89,6 +90,7 @@ export function NavigationProvider({ children }: { children: ReactNode }) {
             ctab: null,
             csort: null,
             cf: null,
+            ...Object.fromEntries(LOGS_KEYS.map((k) => [k, null])),
           }),
         );
         notifyNav();

frontend/src/components/moduleRegistry.tsx

@@ -32,6 +32,7 @@ const Scheduler = lazyWithPreload(() => import("./Scheduler"));
 const ConfigPanel = lazyWithPreload(() => import("./ConfigPanel"));
 const AdminUsers = lazyWithPreload(() => import("./AdminUsers"));
 const AuditLog = lazyWithPreload(() => import("./AuditLog"));
+const AdminLogs = lazyWithPreload(() => import("./AdminLogs"));
 const SettingsPanel = lazyWithPreload(() => import("./SettingsPanel"));
 
 export type PageDef = {
@@ -63,6 +64,7 @@ export const PAGE_CONTENT: Record<Page, PageDef> = {
   config: { Component: ConfigPanel },
   users: { Component: AdminUsers, maxWidth: "48rem" },
   audit: { Component: AuditLog, fadeTop: false },
+  logs: { Component: AdminLogs },
   settings: { Component: SettingsPanel },
 };