feat(ui): E31 S4a — rail rows are links, the channel page opens on unwatched, users and audit tidied

- Nav rail page rows are real links (/?page=<id>): a middle-click or
  Ctrl-click opens the page in a new tab; a plain click stays in-app.
- A fresh channel page shows the unwatched videos; a picked watch state
  is a remembered preference (channelShow).
- Users: the role, suspend and delete move into the row's one menu
  (the "…", right-click, Shift+F10); locked ones keep their reason.
- Audit log: back-to-back successful runs of one job fold into one row
  that opens to the earlier ones; a failed run reads in the danger colour.
- DESIGN.md decision log: the E31 picks.

frontend/src/components/auditColumns.tsx

@@ -1,5 +1,8 @@
 import type { TFunction } from "i18next";
+import clsx from "clsx";
 import type { AuditRow } from "../lib/api";
+import type { AuditListRow } from "../lib/auditGroups";
+import AuditEarlierRuns from "./AuditEarlierRuns";
 import { formatNumber } from "../lib/format";
 import type { JobResult } from "../lib/api";
 import { jobResultText, jobRunText } from "../lib/jobResult";
@@ -105,7 +108,7 @@ export function auditColumns(
   t: TFunction,
   lang: string,
   actionOptions: { value: string; label: string }[],
-): Column<AuditRow>[] {
+): Column<AuditListRow>[] {
   return [
     {
       key: "when",
@@ -147,13 +150,23 @@ export function auditColumns(
         const local = localDetails(t, r, lang);
         const summary = local ? local.head : r.summary;
         const change = local ? local.sub : changeText(r);
+        // A failed run is the row to see in a page of routine ones (E31): its line in the danger colour.
+        const failed = r.action === "job_run" && r.after?.status === "error";
         return (
           // wrap-break-word (wrap), NOT truncate: in the auto-layout table a `truncate` (nowrap) cell
           // sizes to its longest row, so one long summary/change stretched the whole table past the
           // card (the row rules bled into the page). Wrapping keeps every row inside the container.
           <div className="min-w-0">
-            {summary && <div className="wrap-break-word">{summary}</div>}
+            {summary && (
+              <div className={clsx("wrap-break-word", failed && "text-danger")}>{summary}</div>
+            )}
             {change && <div className="text-2xs text-muted wrap-break-word">{change}</div>}
+            {r.runs && r.runs.length > 1 && (
+              <AuditEarlierRuns
+                runs={r.runs}
+                detailOf={(run) => localDetails(t, run, lang)?.sub ?? run.summary}
+              />
+            )}
           </div>
         );
       },