feat(activity): one Activity page — runs, admin actions, server log and quota under one filter bar

The audit log, the server log and the admin quota view were three pages (the quota one a Stats tab),
each with its own filters, and the background runs had no list at all. Now one page ("Napló" /
"Activity") reads all four, each still its own table on the server: a shared bar (text, a period of
1 h to 90 days defaulting to 7, an account) and each tab's own filters, the whole view in the URL.
The old page ids open their tab.

Server side: the audit log and the new run list (`/api/admin/runs`) filter and page like the server
log, through one keyset helper (`routes/_keyset`) the log now shares; an audit row keeps the request
it was made in (migration 0111), so its log lines are a pivot away, as a run's are (`lrun`). The
quota breakdown takes since/until and one account. The Scheduler rows get a history button to their
job's runs.

Also fixed on the way: re-saving the value in force on the Configuration page staged its override
without committing it (the commit sat inside the audit branch), so the save was lost.

frontend/src/components/AdminLogs.tsx

@@ -1,5 +1,4 @@
-import clsx from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   keepPreviousData,
@@ -7,26 +6,17 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { Copy, Radio, Search } from "lucide-react";
+import { Copy, Radio } from "lucide-react";
 
 import { api, type LogFacet, type LogQuery, type ServerLogRow } from "../lib/api";
 import { copyText } from "../lib/clipboard";
 import { formatDateTimeSec } from "../lib/format";
-import { nextNavId, notifyNav, rememberNavPosition } from "../lib/history";
 import { nextPageOnClick } from "../lib/nextPage";
 import { LEVEL_GROUPS, type LevelGroup } from "../lib/log";
-import {
-  DEFAULT_LOGS_STATE,
-  logsParamsToState,
-  logsParamUpdates,
-  WINDOW_HOURS,
-  type LogsUrlState,
-  type LogWindow,
-} from "../lib/logsUrlState";
+import { sinceOf } from "../lib/activityUrlState";
+import { logsParamsToState, logsParamUpdates, type LogsUrlState } from "../lib/logsUrlState";
 import { notify } from "../lib/notifications";
 import { qk } from "../lib/queryKeys";
-import { useDebounced } from "../lib/useDebounced";
-import { urlWithParams } from "../lib/urlState";
 import { useUrlMirror } from "../lib/useUrlMirror";
 import LogLine from "./LogLine";
 import NavGrid from "./ui/NavGrid";
@@ -35,46 +25,45 @@ import FilterChipGroup from "./ui/FilterChipGroup";
 import FilterSelect from "./ui/FilterSelect";
 import { FilterFoldButton } from "./ui/FilterFold";
 import { useFilterFold } from "../lib/useFilterFold";
-import { useStickyTop } from "./ui/stickyTop";
-import { Section } from "./ui/form";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import { DismissibleChip } from "./ui/Chip";
-import { InnerInput } from "./ui/Input";
-import { fieldClass } from "./ui/fieldStyles";
+import type { Shared } from "./ActivityRuns";
 
-// Admin → Szervernapló: the server's stored log (`log_events`). 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
+// Activity → Server log: the server's stored log (`log_events`). One list, newest first; a line
+// opens in place to its full record, and its request / job / run id narrows the list to that
+// request, job or run (the page does that: a pivot is a new history entry with every other filter
+// off). The time range, account and text come from the page's shared bar; the rest live in the URL
+// (./logsUrlState), 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. A failed read stops the polling (the request already reported it
 // once) and marks the list as possibly stale, instead of re-raising the failure every few seconds.
 
 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 {
+function toQuery(state: LogsUrlState, shared: Shared): LogQuery {
   return {
     levels: state.group === "all" ? undefined : LEVEL_GROUPS[state.group],
     sources: state.sources,
-    user: state.user ?? undefined,
+    user: shared.user ?? undefined,
     event: state.event ?? undefined,
     request_id: state.requestId ?? undefined,
     job_id: state.jobId ?? undefined,
-    q: q.trim() || undefined,
+    run_id: state.runId ?? undefined,
+    q: shared.q.trim() || undefined,
   };
 }
 
-export default function AdminLogs() {
+/** The ids a line can narrow the list to. */
+export type LogPivot = Pick<LogsUrlState, "requestId" | "jobId" | "runId">;
+
+export default function AdminLogs({
+  shared,
+  onPivot,
+}: {
+  shared: Shared;
+  /** Show only one request's, job's or run's lines (the page clears every other filter). */
+  onPivot: (pivot: LogPivot) => void;
+}) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
   const qc = useQueryClient();
@@ -82,14 +71,9 @@ export default function AdminLogs() {
     logsParamsToState(new URLSearchParams(window.location.search)),
   );
   const [live, setLiveState] = useState(false);
-  // The toolbar sticks at the scroller's top (./ui/stickyTop), and folds its facet row when short.
-  useStickyTop();
+  // The facet row folds away when the screen is short.
   const fold = useFilterFold();
-  const facetFilters =
-    state.sources.length +
-    (state.user ? 1 : 0) +
-    (state.event ? 1 : 0) +
-    (state.window !== DEFAULT_LOGS_STATE.window ? 1 : 0);
+  const facetFilters = state.sources.length + (state.event ? 1 : 0);
   // Read by `getNextPageParam` when a page is fetched, not when it renders: while live, a refetch
   // stops after the newest page, however many pages the cache holds — a "Load older" that lands
   // after Live was switched on, or a filter set revisited with older pages still cached.
@@ -99,41 +83,26 @@ export default function AdminLogs() {
     setLiveState(on);
   };
   const [open, setOpen] = useState<number | null>(null);
-  // Bumped when the view changes by a jump (a pivot, Back/Forward) rather than by typing: the
-  // search box's text then applies at once instead of after the typing debounce.
-  const [jumps, setJumps] = useState(0);
-  const q = useDebounced(state.q, 300, jumps);
   useUrlMirror(logsParamUpdates(state));
-  // Back/Forward lands on another view of the console (a pivot pushed one, below): read it back.
-  useEffect(() => {
-    const onPop = () => {
-      setOpen(null);
-      setJumps((n) => n + 1);
-      setState(logsParamsToState(new URLSearchParams(window.location.search)));
-    };
-    window.addEventListener("popstate", onPop);
-    return () => window.removeEventListener("popstate", onPop);
-  }, []);
-
   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 query = toQuery(state, shared);
+  const key = qk.adminLogs({ ...query, window: shared.window });
   const logs = useInfiniteQuery({
     queryKey: key,
     queryFn: ({ pageParam }) =>
-      api.adminLogs({ ...query, since: sinceOf(state.window) }, pageParam),
+      api.adminLogs({ ...query, since: sinceOf(shared.window) }, pageParam),
     initialPageParam: null as string | null,
     getNextPageParam: (last) => (liveRef.current ? undefined : (last.next_cursor ?? undefined)),
     placeholderData: keepPreviousData,
     refetchInterval: (q) => (live && q.state.status !== "error" ? LIVE_MS : false),
   });
   const facets = useQuery({
-    queryKey: qk.adminLogFacets({ ...query, window: state.window }),
-    queryFn: () => api.adminLogFacets({ ...query, since: sinceOf(state.window) }),
+    queryKey: qk.adminLogFacets({ ...query, window: shared.window }),
+    queryFn: () => api.adminLogFacets({ ...query, since: sinceOf(shared.window) }),
     placeholderData: keepPreviousData,
     refetchInterval: (q) => (live && q.state.status !== "error" ? LIVE_MS * 4 : false),
   });
@@ -217,19 +186,9 @@ export default function AdminLogs() {
     return facets.data ? sum(levels.filter((f) => inGroup.includes(f.value))) : undefined;
   };
 
-  // A pivot follows a link to another view, so it is its own history entry and Back returns to the
-  // view it was made from. The other filters are adjustments of the view on screen and replace it.
-  const pivot = (patch: Pick<LogsUrlState, "requestId" | "jobId">) => {
+  const pivot = (patch: Partial<LogPivot>) => {
     setLive(false);
-    const next = { ...state, ...PIVOT_RESET, ...patch };
-    window.history.pushState(
-      { ...rememberNavPosition(), sfScroll: nextNavId() },
-      "",
-      urlWithParams(logsParamUpdates(next)),
-    );
-    notifyNav();
-    setJumps((n) => n + 1);
-    update(next);
+    onPivot({ requestId: null, jobId: null, runId: null, ...patch });
   };
 
   // "Any", then what the facet counted. The value in use stays offered even at zero — under the
@@ -253,193 +212,155 @@ export default function AdminLogs() {
   };
 
   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"
-          // overflow-clip, not -hidden: a hidden box is a scroll container, and the toolbar would stick
-          // to it instead of to the page.
-          className="overflow-clip rounded-xl border border-border bg-bg"
-        >
-          {/* The console's toolbar is the page's band (B4, B9): it sticks at the top with the fade
-              under it while the lines scroll, so a filter is in reach at line 500. */}
-          <div className="sticky top-0 z-base bg-bg fade-below">
-            <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
-              <label
-                className={clsx(
-                  fieldClass({ size: "sm", pill: true }),
-                  "flex min-w-[12rem] flex-1 items-center gap-1.5",
-                )}
-              >
-                <Search className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden />
-                <InnerInput
-                  type="search"
-                  value={state.q}
-                  onChange={(e) => update({ q: e.target.value.slice(0, 200) })}
-                  placeholder={t("adminLogs.search")}
-                  aria-label={t("adminLogs.search")}
-                />
-              </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">
-              <FilterFoldButton fold={fold} label={t("sidebar.filters")} count={facetFilters} />
-              {!fold.folded && (
-                <>
-                  <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="outline"
-                  size="xs"
-                  icon={<Radio className="h-3.5 w-3.5" />}
-                  pressed={polling}
-                  onClick={toggleLive}
-                >
-                  {t("adminLogs.live")}
-                </Button>
-                <Button
-                  variant="outline"
-                  size="xs"
-                  icon={<Copy className="h-3.5 w-3.5" />}
-                  // While a filter change loads, the rows on screen are the previous filter's.
-                  disabled={rows.length === 0 || logs.isPlaceholderData}
-                  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>
-
-          {failure && (
-            <StateMessage
-              tone="error"
-              compact
-              onRetry={retryFailed}
-              className="border-b border-border"
-            >
-              {t(`adminLogs.${failure}`)}
-            </StateMessage>
-          )}
-
-          <div
-            className={`font-mono text-2xs ${logs.isPlaceholderData ? "opacity-60" : ""}`}
-            data-testid="admin-logs-lines"
-            aria-busy={logs.isPlaceholderData}
-          >
-            {logs.isError && !logs.data ? (
-              <StateMessage tone="error" onRetry={() => void logs.refetch()}>
-                {t("common.loadError")}
-              </StateMessage>
-            ) : logs.isLoading ? (
-              <LoadingState shape="table" />
-            ) : rows.length === 0 ? (
-              <p className="px-3 py-6 text-center font-sans text-sm text-muted">
-                {t("adminLogs.empty")}
-              </p>
-            ) : (
-              <NavGrid>
-                {rows.map((row, index) => (
-                  <LogLine
-                    navIndex={index}
-                    key={row.id}
-                    ts={row.ts}
-                    level={row.level}
-                    event={row.event ?? "—"}
-                    msg={row.msg}
-                    title={formatDateTimeSec(row.ts, lang)}
-                    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>
-                ))}
-              </NavGrid>
-            )}
-          </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>
-            {olderCursor !== null && (
-              <Button
-                variant="outline"
-                size="xs"
-                disabled={logs.isFetchingNextPage}
-                onClick={loadOlder}
-              >
-                {t("adminLogs.older")}
-              </Button>
-            )}
-          </div>
+    <div data-testid="admin-logs" className="overflow-clip rounded-xl border border-border bg-bg">
+      {/* The page's own band carries the shared filters and stays in reach; this one scrolls. */}
+      <div>
+        <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
+          <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>
-      </Section>
+
+        <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
+          <FilterFoldButton fold={fold} label={t("sidebar.filters")} count={facetFilters} />
+          {!fold.folded && (
+            <>
+              <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.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"
+              />
+            </>
+          )}
+          <span className="ml-auto flex gap-1.5">
+            <Button
+              variant="outline"
+              size="xs"
+              icon={<Radio className="h-3.5 w-3.5" />}
+              pressed={polling}
+              onClick={toggleLive}
+            >
+              {t("adminLogs.live")}
+            </Button>
+            <Button
+              variant="outline"
+              size="xs"
+              icon={<Copy className="h-3.5 w-3.5" />}
+              // While a filter change loads, the rows on screen are the previous filter's.
+              disabled={rows.length === 0 || logs.isPlaceholderData}
+              onClick={() => void copy()}
+            >
+              {t("adminLogs.copy")}
+            </Button>
+          </span>
+        </div>
+
+        {(state.requestId || state.jobId !== null || state.runId !== 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 })}
+              />
+            )}
+            {state.runId !== null && (
+              <PivotChip
+                label={t("adminLogs.pivotRun", { id: state.runId })}
+                clearLabel={t("adminLogs.clearPivot")}
+                onClear={() => update({ runId: null })}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      {failure && (
+        <StateMessage tone="error" compact onRetry={retryFailed} className="border-b border-border">
+          {t(`adminLogs.${failure}`)}
+        </StateMessage>
+      )}
+
+      <div
+        className={`font-mono text-2xs ${logs.isPlaceholderData ? "opacity-60" : ""}`}
+        data-testid="admin-logs-lines"
+        aria-busy={logs.isPlaceholderData}
+      >
+        {logs.isError && !logs.data ? (
+          <StateMessage tone="error" onRetry={() => void logs.refetch()}>
+            {t("common.loadError")}
+          </StateMessage>
+        ) : logs.isLoading ? (
+          <LoadingState shape="table" />
+        ) : rows.length === 0 ? (
+          <p className="px-3 py-6 text-center font-sans text-sm text-muted">
+            {t("adminLogs.empty")}
+          </p>
+        ) : (
+          <NavGrid>
+            {rows.map((row, index) => (
+              <LogLine
+                navIndex={index}
+                key={row.id}
+                ts={row.ts}
+                level={row.level}
+                event={row.event ?? "—"}
+                msg={row.msg}
+                title={formatDateTimeSec(row.ts, lang)}
+                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 })}
+                  onJob={(jobId) => pivot({ jobId })}
+                  onRun={(runId) => pivot({ runId })}
+                />
+              </LogLine>
+            ))}
+          </NavGrid>
+        )}
+      </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>
+        {olderCursor !== null && (
+          <Button
+            variant="outline"
+            size="xs"
+            disabled={logs.isFetchingNextPage}
+            onClick={loadOlder}
+          >
+            {t("adminLogs.older")}
+          </Button>
+        )}
+      </div>
     </div>
   );
 }
@@ -465,11 +386,13 @@ function RowDetail({
   account,
   onRequest,
   onJob,
+  onRun,
 }: {
   row: ServerLogRow;
   account: string | null;
   onRequest: (id: string) => void;
   onJob: (id: number) => void;
+  onRun: (id: number) => void;
 }) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -516,6 +439,21 @@ function RowDetail({
             </dd>
           </>
         )}
+        {row.run_id !== null && (
+          <>
+            <dt>{t("adminLogs.fields.run")}</dt>
+            <dd>
+              <Button
+                variant="link"
+                className={pivotCls}
+                title={t("adminLogs.showRun")}
+                onClick={() => onRun(row.run_id!)}
+              >
+                {row.run_id}
+              </Button>
+            </dd>
+          </>
+        )}
         {row.version && (
           <>
             <dt>{t("adminLogs.fields.version")}</dt>