Ranggefuege: Rollen, die aufeinander aufbauen

Bisher trug jede Rolle ihre Rechte vollstaendig selbst. Bei achtzehn Rollen
und zweiundzwanzig Rechten heisst das, dass eine hoehere Rangrolle die ganze
Liste der darunterliegenden noch einmal abhaken muss - beim Anlegen
fehleranfaellig und bei jeder spaeteren Aenderung doppelt zu pflegen.

Ein Gefuege ist eine benannte, geordnete Folge von Rollen. Jede Sprosse
erbt alles von jeder Sprosse unter ihr, verwaltet wird nur noch das, was
oben dazukommt. Geerbt wird nicht nur die Rechteliste, sondern auch
Freigabestufe und Anmeldung: sonst waere eine Befoerderung unter Umstaenden
eine Herabstufung, naemlich immer dann, wenn Discord beim Befoerdern die
alte Rangrolle abnimmt.

Die Ordnung ist bewusst eine Reihenfolge und kein Zeiger je Rolle - ueber
ganzen Zahlen gibt es keinen Zyklus, den man abfangen muesste. Aufloesen
eines Gefueges laesst die Rollen stehen und nimmt nur das Geerbte weg.

Die Rechnung steht als reine Funktion in lib/auth/ladders.ts und wird an
drei Stellen benutzt: bei der Rechteaufloesung, in der Verwaltung und in
der Vorschau des Editors, die im Browser mitrechnet. Eine Vorschau, die den
Stand vor dem Verschieben zeigt, waere schlimmer als keine.

Die Rollenseite zeigt Geerbtes kursiv und gesperrt an, damit dort niemand
blind Kaestchen setzt, die laengst gesetzt sind.

Nebenbei: Aenderungen an der Rollenzuordnung landen jetzt im Protokoll, mit
Vorher und Nachher. Wer Rollen aendert, aendert die Rechte anderer - genau
dafuer ist es da.

web/app/(app)/admin/ranggefuege/LadderEditor.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import { useMemo, useState, useTransition } from 'react'
+import { ladderAdminText } from '@/lib/i18n/admin'
+import { resolveAll, type LadderRung } from '@/lib/auth/ladders'
+import { deleteLadderAction, setLadderRolesAction } from './actions'
+
+export type RoleOption = {
+  discordRoleId: string
+  label: string
+  isPresent: boolean
+  ladderId: string | null
+  clearanceLevel: number
+  permissions: string[]
+  grantsMembership: boolean
+}
+
+/**
+ * Eine Leiter bearbeiten: welche Rollen darin stehen und in welcher Ordnung.
+ *
+ * Angezeigt wird von oben nach unten, weil man ein Ranggefüge so liest - die
+ * höchste Rolle zuerst. Gespeichert wird umgekehrt, `ladderRank` 0 ist unten.
+ * Die Umkehr steht genau an einer Stelle, in `speichern`.
+ *
+ * Die Vorschau rechnet **im Browser** mit derselben Funktion wie der Server
+ * (lib/auth/ladders.ts). Eine Vorschau, die den Stand vor dem Verschieben
+ * zeigt, wäre schlimmer als keine: sie sähe richtig aus und wäre falsch.
+ *
+ * Bewusst nicht optimistisch. Eine Änderung hier wirkt sofort für alle
+ * Träger dieser Rollen, deshalb Bestätigung und gesperrter Knopf statt einer
+ * vorweggenommenen Rückmeldung. Siehe docs/09-performance-und-ux.md.
+ */
+export function LadderEditor({
+  ladder,
+  order,
+  allRoles,
+  levels,
+}: {
+  ladder: { id: string; name: string; note: string | null }
+  /** Von unten nach oben, so wie es in der Datenbank steht. */
+  order: string[]
+  allRoles: RoleOption[]
+  levels: { level: number; name: string }[]
+}) {
+  // Im Zustand von oben nach unten, so wie es dasteht.
+  const [sprossen, setSprossen] = useState<string[]>(() => [...order].reverse())
+  const [fehler, setFehler] = useState<string | null>(null)
+  const [gespeichert, setGespeichert] = useState(false)
+  const [pending, startTransition] = useTransition()
+
+  const nachId = useMemo(
+    () => new Map(allRoles.map((rolle) => [rolle.discordRoleId, rolle])),
+    [allRoles],
+  )
+
+  const geaendert = sprossen.join() !== [...order].reverse().join()
+
+  /**
+   * Dieselbe Rechnung wie serverseitig, auf dem aktuellen Entwurf. `sprossen`
+   * steht von oben nach unten, `ladderRank` zählt von unten - daher der
+   * gedrehte Index.
+   */
+  const aufgeloest = useMemo(() => {
+    const rungs: LadderRung[] = sprossen.flatMap((id, index) => {
+      const rolle = nachId.get(id)
+      if (!rolle) return []
+      return [
+        {
+          discordRoleId: rolle.discordRoleId,
+          clearanceLevel: rolle.clearanceLevel,
+          permissions: rolle.permissions,
+          grantsMembership: rolle.grantsMembership,
+          ladderId: ladder.id,
+          ladderRank: sprossen.length - 1 - index,
+        },
+      ]
+    })
+    return resolveAll(rungs)
+  }, [sprossen, nachId, ladder.id])
+
+  const verfuegbar = allRoles.filter(
+    (rolle) => !sprossen.includes(rolle.discordRoleId) && rolle.ladderId === null,
+  )
+
+  function verschieben(index: number, richtung: -1 | 1) {
+    const ziel = index + richtung
+    if (ziel < 0 || ziel >= sprossen.length) return
+    const naechste = [...sprossen]
+    const [herausgenommen] = naechste.splice(index, 1)
+    naechste.splice(ziel, 0, herausgenommen!)
+    setSprossen(naechste)
+    setGespeichert(false)
+  }
+
+  function herausnehmen(id: string) {
+    setSprossen((aktuell) => aktuell.filter((eintrag) => eintrag !== id))
+    setGespeichert(false)
+  }
+
+  function aufnehmen(id: string) {
+    if (id === '') return
+    setSprossen((aktuell) => [id, ...aktuell])
+    setGespeichert(false)
+  }
+
+  function speichern() {
+    if (!confirm(ladderAdminText.confirmSave)) return
+    setFehler(null)
+    startTransition(async () => {
+      // Zurück in die Reihenfolge der Datenbank: unten zuerst.
+      const ergebnis = await setLadderRolesAction({
+        id: ladder.id,
+        roleIds: [...sprossen].reverse(),
+      })
+      if (ergebnis.ok) setGespeichert(true)
+      else setFehler(ergebnis.error)
+    })
+  }
+
+  function aufloesen() {
+    if (!confirm(ladderAdminText.confirmRemove)) return
+    setFehler(null)
+    startTransition(async () => {
+      const ergebnis = await deleteLadderAction(ladder.id)
+      if (!ergebnis.ok) setFehler(ergebnis.error)
+    })
+  }
+
+  return (
+    <section className="border-b border-line py-6">
+      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        <h3 className="font-condensed">{ladder.name}</h3>
+        {ladder.note ? <span className="text-2xs text-text-dim">{ladder.note}</span> : null}
+      </div>
+
+      {sprossen.length === 0 ? (
+        <p className="mt-3 text-2xs text-text-dim">{ladderAdminText.emptyLadder}</p>
+      ) : (
+        <ol className="mt-4 border-t border-line">
+          {sprossen.map((id, index) => {
+            const rolle = nachId.get(id)
+            if (!rolle) return null
+            const ergebnis = aufgeloest.get(id)
+            const geerbt = ergebnis ? [...ergebnis.inherited].sort() : []
+            const angehoben =
+              ergebnis !== undefined && ergebnis.clearanceLevel > ergebnis.ownClearanceLevel
+            const stufe = levels.find((l) => l.level === ergebnis?.clearanceLevel)
+
+            return (
+              <li key={id} className="border-b border-line py-3">
+                <div className="record-row">
+                  <span className="record-key">{sprossen.length - index}</span>
+                  <span className="record-title">{rolle.label}</span>
+                  {!rolle.isPresent ? (
+                    <span className="font-condensed text-2xs text-stamp-4">!</span>
+                  ) : null}
+                  <span className="font-condensed text-2xs text-text-dim">
+                    {index === 0 && sprossen.length > 1 ? ladderAdminText.top : null}
+                    {index === sprossen.length - 1 ? ladderAdminText.bottom : null}
+                  </span>
+
+                  <span className="ml-auto flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => verschieben(index, -1)}
+                      disabled={index === 0 || pending}
+                      className="btn btn-sm"
+                      title={ladderAdminText.up}
+                    >
+                      ↑
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => verschieben(index, 1)}
+                      disabled={index === sprossen.length - 1 || pending}
+                      className="btn btn-sm"
+                      title={ladderAdminText.down}
+                    >
+                      ↓
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => herausnehmen(id)}
+                      disabled={pending}
+                      className="btn btn-sm"
+                    >
+                      {ladderAdminText.drop}
+                    </button>
+                  </span>
+                </div>
+
+                <p className="mt-1.5 text-2xs text-text-dim">
+                  {geerbt.length === 0 ? (
+                    ladderAdminText.inheritsNothing
+                  ) : (
+                    <>
+                      {ladderAdminText.inherits}{' '}
+                      <span className="font-mono text-stamp-3">{geerbt.join(', ')}</span>
+                    </>
+                  )}
+                  {stufe ? (
+                    <>
+                      {' · '}
+                      {ladderAdminText.effectiveClearance} {stufe.level} · {stufe.name}
+                      {angehoben ? ` (${ladderAdminText.raisedBy})` : ''}
+                    </>
+                  ) : null}
+                </p>
+              </li>
+            )
+          })}
+        </ol>
+      )}
+
+      <div className="mt-4 flex flex-wrap items-center gap-3">
+        <label className="field-row">
+          <span className="field-label">{ladderAdminText.addRole}</span>
+          <select
+            value=""
+            onChange={(event) => aufnehmen(event.target.value)}
+            disabled={pending || verfuegbar.length === 0}
+            className="field"
+          >
+            <option value="">{ladderAdminText.none}</option>
+            {verfuegbar.map((rolle) => (
+              <option key={rolle.discordRoleId} value={rolle.discordRoleId}>
+                {rolle.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <button
+          type="button"
+          onClick={speichern}
+          disabled={pending || !geaendert}
+          className="btn btn-primary"
+        >
+          {pending ? ladderAdminText.saving : ladderAdminText.save}
+        </button>
+        <button type="button" onClick={aufloesen} disabled={pending} className="btn btn-sm">
+          {ladderAdminText.remove}
+        </button>
+
+        {gespeichert && !geaendert ? (
+          <span className="font-condensed text-2xs text-text-dim">{ladderAdminText.saved}</span>
+        ) : null}
+        {fehler ? <span className="font-condensed text-2xs text-stamp-4">{fehler}</span> : null}
+      </div>
+    </section>
+  )
+}

web/app/(app)/admin/ranggefuege/NewLadderForm.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useActionState } from 'react'
+import { ladderAdminText } from '@/lib/i18n/admin'
+import { createLadderAction, type ActionResult } from './actions'
+
+/** Ein neues Gefüge anlegen. Die Sprossen kommen danach im Editor dazu. */
+export function NewLadderForm() {
+  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
+    createLadderAction,
+    null,
+  )
+
+  return (
+    <form action={action} className="flex flex-wrap items-end gap-3">
+      <label className="field-row">
+        <span className="field-label">{ladderAdminText.name}</span>
+        <input
+          name="name"
+          required
+          maxLength={80}
+          placeholder={ladderAdminText.namePlaceholder}
+          className="field"
+        />
+      </label>
+      <label className="field-row">
+        <span className="field-label">{ladderAdminText.note}</span>
+        <input
+          name="note"
+          maxLength={300}
+          placeholder={ladderAdminText.notePlaceholder}
+          className="field w-64"
+        />
+      </label>
+      <button type="submit" disabled={pending} className="btn btn-primary">
+        {pending ? ladderAdminText.creating : ladderAdminText.create}
+      </button>
+      {state && !state.ok ? (
+        <span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
+      ) : null}
+    </form>
+  )
+}

web/app/(app)/admin/ranggefuege/actions.ts

@@ -0,0 +1,102 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+import { requireUser } from '@/lib/auth/current'
+import { AccessError } from '@/lib/errors'
+import { createLadder, deleteLadder, setLadderRoles, updateLadder } from '@/lib/roles/ladders'
+import { de } from '@/lib/i18n/de'
+
+export type ActionResult = { ok: true } | { ok: false; error: string }
+
+function toMessage(error: unknown): string {
+  if (error instanceof AccessError) {
+    return de.actionErrors[error.code] ?? de.actionErrors.default!
+  }
+  console.error('[ranggefuege] unerwartet', error)
+  return de.actionErrors.default!
+}
+
+/**
+ * Die Prüfung steht im Dienst, nicht hier und nicht in der Oberfläche: eine
+ * Server Action ist ein Endpunkt und direkt aufrufbar, egal was das UI zeigt.
+ */
+function aktualisieren(): void {
+  revalidatePath('/admin/ranggefuege')
+  revalidatePath('/admin/rollen')
+}
+
+const createSchema = z.object({
+  name: z.string().min(1).max(80),
+  note: z.string().max(300).optional(),
+})
+
+export async function createLadderAction(
+  _prev: ActionResult | null,
+  formData: FormData,
+): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = createSchema.safeParse(Object.fromEntries(formData))
+  if (!parsed.success) return { ok: false, error: de.ladderAdmin.nameInvalid }
+
+  try {
+    await createLadder(user.permissions, parsed.data)
+    aktualisieren()
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+const updateSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1).max(80),
+  note: z.string().max(300).optional(),
+})
+
+export async function updateLadderAction(
+  _prev: ActionResult | null,
+  formData: FormData,
+): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = updateSchema.safeParse(Object.fromEntries(formData))
+  if (!parsed.success) return { ok: false, error: de.ladderAdmin.nameInvalid }
+
+  try {
+    await updateLadder(user.permissions, parsed.data)
+    aktualisieren()
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+export async function deleteLadderAction(id: string): Promise<ActionResult> {
+  const user = await requireUser()
+  try {
+    await deleteLadder(user.permissions, id)
+    aktualisieren()
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+const orderSchema = z.object({
+  id: z.string().min(1),
+  roleIds: z.array(z.string().min(1)).max(30),
+})
+
+export async function setLadderRolesAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = orderSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
+
+  try {
+    await setLadderRoles(user.permissions, parsed.data)
+    aktualisieren()
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}

web/app/(app)/admin/ranggefuege/loading.tsx

@@ -0,0 +1,21 @@
+/** Skelett, keine Blockade. Siehe docs/09-performance-und-ux.md. */
+export default function Loading() {
+  return (
+    <section className="animate-pulse">
+      <div className="h-5 w-40 rounded bg-line" />
+      <div className="mt-3 h-3 w-full max-w-(--container-measure) rounded bg-line" />
+      <div className="mt-8 h-9 w-72 rounded-(--radius-field) bg-line" />
+      <div className="mt-10 border-t border-line">
+        {[0, 1].map((i) => (
+          <div key={i} className="border-b border-line py-6">
+            <div className="h-4 w-32 rounded bg-line" />
+            <div className="mt-4 space-y-3">
+              <div className="h-8 w-full rounded bg-line" />
+              <div className="h-8 w-full rounded bg-line" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

web/app/(app)/admin/ranggefuege/page.tsx

@@ -0,0 +1,81 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { listLadders } from '@/lib/roles/ladders'
+import { de } from '@/lib/i18n/de'
+import { LadderEditor } from './LadderEditor'
+import { NewLadderForm } from './NewLadderForm'
+
+export const metadata: Metadata = { title: de.ladderAdmin.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Ranggefüge verwalten.
+ *
+ * Eigene Seite und nicht ein weiterer Block auf der Rollenseite: dort steht
+ * jede Rolle für sich mit zweiundzwanzig Kästchen, hier steht die Ordnung
+ * zwischen den Rollen. Das sind zwei verschiedene Fragen, und beide brauchen
+ * Platz.
+ */
+export default async function LadderAdminPage() {
+  const user = await requireUser()
+  if (!user.permissions.isAdmin && !user.permissions.permissions.has('roles.manage')) {
+    notFound()
+  }
+
+  const [leitern, rollen, stufen] = await Promise.all([
+    listLadders(user.permissions),
+    db.roleMapping.findMany({
+      orderBy: [{ sortOrder: 'desc' }, { label: 'asc' }],
+      select: {
+        discordRoleId: true,
+        label: true,
+        ladderId: true,
+        isPresent: true,
+        clearanceLevel: true,
+        permissions: true,
+        grantsMembership: true,
+      },
+    }),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+  ])
+
+  return (
+    <section>
+      <h2 className="font-condensed">{de.ladderAdmin.heading}</h2>
+      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.ladderAdmin.intro}
+      </p>
+      <p className="mt-2 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.ladderAdmin.why}
+      </p>
+
+      {rollen.length === 0 ? (
+        <p className="mt-8 text-text-dim">{de.ladderAdmin.noRoles}</p>
+      ) : (
+        <>
+          <div className="mt-6">
+            <NewLadderForm />
+          </div>
+
+          {leitern.length === 0 ? (
+            <p className="mt-10 text-text-dim">{de.ladderAdmin.empty}</p>
+          ) : (
+            <div className="mt-10 border-t border-line">
+              {leitern.map((leiter) => (
+                <LadderEditor
+                  key={leiter.id}
+                  ladder={{ id: leiter.id, name: leiter.name, note: leiter.note }}
+                  order={leiter.roles.map((rolle) => rolle.discordRoleId)}
+                  allRoles={rollen}
+                  levels={stufen.map((stufe) => ({ level: stufe.level, name: stufe.name }))}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  )
+}

web/app/(app)/admin/rollen/RoleRow.tsx

@@ -13,6 +13,11 @@ export type RoleRowData = {
   category: string
   permissions: string[]
   isPresent: boolean
+  /** Rechte, die nur aus dem Ranggefüge kommen. Hier nicht abwählbar. */
+  inherited: string[]
+  ladderName: string | null
+  /** Stufe einschliesslich Gefüge - kann über der eigenen liegen. */
+  effectiveClearanceLevel: number
 }
 
 const CATEGORIES = ['MEMBERSHIP', 'RANK', 'CLEARANCE', 'UNSORTED'] as const
@@ -80,6 +85,11 @@ export function RoleRow({
             {roleAdminText.missingFromGuild}
           </span>
         ) : null}
+        {role.ladderName ? (
+          <span className="font-condensed text-2xs text-text-dim">
+            {roleAdminText.inLadder} {role.ladderName}
+          </span>
+        ) : null}
       </div>
 
       <div className="mt-3 flex flex-wrap gap-x-8 gap-y-3 text-xs">
@@ -117,6 +127,11 @@ export function RoleRow({
               </option>
             ))}
           </select>
+          {role.effectiveClearanceLevel > clearanceLevel ? (
+            <span className="font-condensed text-2xs text-stamp-3">
+              {roleAdminText.clearanceRaised} {role.effectiveClearanceLevel}
+            </span>
+          ) : null}
         </label>
 
         <label className="flex items-center gap-2">
@@ -133,22 +148,44 @@ export function RoleRow({
       </div>
 
       <fieldset className="mt-4">
-        <legend className="text-xs text-text-dim">{roleAdminText.permissions}</legend>
+        <legend className="text-xs text-text-dim">
+          {roleAdminText.permissions}
+          {role.inherited.length > 0 ? (
+            <span className="ml-2 text-text-dim">{roleAdminText.inheritedNote}</span>
+          ) : null}
+        </legend>
         <div className="mt-2 grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-x-4 gap-y-1.5">
           {PERMISSIONS.map((permission) => {
             const optIn = OPT_IN_PERMISSIONS.includes(permission)
+            // Geerbtes ist hier nicht abwählbar: das Kästchen gehört zur
+            // niedrigeren Sprosse. Es abzublenden wäre die schlechtere Antwort -
+            // dann sähe die Rolle so aus, als könnte sie weniger, als sie kann.
+            const geerbt = role.inherited.includes(permission)
             return (
               <label
                 key={permission}
                 className="flex items-center gap-2 font-mono text-2xs"
-                title={optIn ? roleAdminText.optIn : undefined}
+                title={
+                  geerbt
+                    ? `${roleAdminText.inheritedFrom} ${role.ladderName ?? ''}`.trim()
+                    : optIn
+                      ? roleAdminText.optIn
+                      : undefined
+                }
               >
                 <input
                   type="checkbox"
-                  checked={permissions.includes(permission)}
+                  checked={geerbt || permissions.includes(permission)}
+                  disabled={geerbt}
                   onChange={(event) => toggle(permission, event.target.checked)}
                 />
-                <span className={optIn ? 'text-stamp-3' : undefined}>{permission}</span>
+                <span
+                  className={
+                    geerbt ? 'text-text-dim italic' : optIn ? 'text-stamp-3' : undefined
+                  }
+                >
+                  {permission}
+                </span>
               </label>
             )
           })}

web/app/(app)/admin/rollen/actions.ts

@@ -4,6 +4,7 @@ import { revalidatePath } from 'next/cache'
 import { z } from 'zod'
 import { db } from '@/lib/db'
 import { requirePermissionForAction } from '@/lib/auth/current'
+import { writeAudit } from '@/lib/audit/write'
 import { PERMISSIONS } from '@/lib/auth/permissions'
 import { invalidateAll } from '@/lib/auth/effective'
 import { de } from '@/lib/i18n/de'
@@ -29,7 +30,7 @@ export type SaveResult = { ok: true } | { ok: false; error: string }
  * eigenen Prozess sofort ab, ohne auf die Runde über die Datenbank zu warten.
  */
 export async function saveRoleMapping(input: unknown): Promise<SaveResult> {
-  await requirePermissionForAction('roles.manage')
+  const user = await requirePermissionForAction('roles.manage')
 
   const parsed = schema.safeParse(input)
   if (!parsed.success) {
@@ -41,14 +42,32 @@ export async function saveRoleMapping(input: unknown): Promise<SaveResult> {
   const existing = await db.roleMapping.findUnique({ where: { discordRoleId } })
   if (!existing) return { ok: false, error: de.roleAdmin.roleGone }
 
-  await db.roleMapping.update({
-    where: { discordRoleId },
-    data: {
-      clearanceLevel,
-      grantsMembership,
-      category,
-      permissions: [...new Set(permissions)].sort(),
-    },
+  const neue = [...new Set(permissions)].sort()
+
+  // Wer Rollen ändert, ändert die Rechte anderer. Genau dafür gibt es das
+  // Protokoll (harte Regel 3) - mit dem Vorher, sonst steht dort nur, dass
+  // jemand etwas geändert hat, aber nicht was.
+  await db.$transaction(async (tx) => {
+    await tx.roleMapping.update({
+      where: { discordRoleId },
+      data: { clearanceLevel, grantsMembership, category, permissions: neue },
+    })
+    await writeAudit(tx, {
+      actorId: user.id,
+      action: 'roles.update',
+      targetType: 'RoleMapping',
+      targetId: discordRoleId,
+      clearanceAtTime: user.permissions.clearanceLevel,
+      meta: {
+        label: existing.label,
+        from: {
+          clearanceLevel: existing.clearanceLevel,
+          grantsMembership: existing.grantsMembership,
+          permissions: existing.permissions,
+        },
+        to: { clearanceLevel, grantsMembership, permissions: neue },
+      },
+    })
   })
 
   invalidateAll()

web/app/(app)/admin/rollen/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { db } from '@/lib/db'
 import { requirePermission } from '@/lib/auth/current'
 import { de } from '@/lib/i18n/de'
+import { resolveAll, type LadderRung } from '@/lib/auth/ladders'
 import { RoleRow } from './RoleRow'
 import { ClearancePreview } from './ClearancePreview'
 
@@ -21,11 +22,18 @@ export default async function RoleAdminPage() {
   // Ohne roles.manage gibt es 404, nicht 403.
   await requirePermission('roles.manage')
 
-  const [mappings, levels] = await Promise.all([
+  const [mappings, levels, ladders] = await Promise.all([
     db.roleMapping.findMany({ orderBy: [{ sortOrder: 'desc' }, { label: 'asc' }] }),
     db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+    db.roleLadder.findMany({ select: { id: true, name: true } }),
   ])
 
+  // Was jede Rolle **tatsächlich** gewährt, einschliesslich ihres Ranggefüges.
+  // Ohne das zeigte diese Seite die eigene Zeile und die Vorschau eine Stufe,
+  // die für niemanden gilt - siehe lib/auth/ladders.ts.
+  const aufgeloest = resolveAll(mappings as LadderRung[])
+  const ladderName = new Map(ladders.map((leiter) => [leiter.id, leiter.name]))
+
   return (
     <section>
       <h2 className="font-condensed">{de.roleAdmin.heading}</h2>
@@ -39,7 +47,7 @@ export default async function RoleAdminPage() {
             levels={levels}
             mappings={mappings.map((m) => ({
               label: m.label,
-              clearanceLevel: m.clearanceLevel,
+              clearanceLevel: aufgeloest.get(m.discordRoleId)?.clearanceLevel ?? m.clearanceLevel,
             }))}
           />
 
@@ -63,6 +71,15 @@ export default async function RoleAdminPage() {
                         category: role.category,
                         permissions: role.permissions,
                         isPresent: role.isPresent,
+                        inherited: [
+                          ...(aufgeloest.get(role.discordRoleId)?.inherited ?? []),
+                        ].sort(),
+                        ladderName: role.ladderId
+                          ? (ladderName.get(role.ladderId) ?? null)
+                          : null,
+                        effectiveClearanceLevel:
+                          aufgeloest.get(role.discordRoleId)?.clearanceLevel ??
+                          role.clearanceLevel,
                       }}
                       levels={levels.map((l) => ({ level: l.level, name: l.name }))}
                     />

web/app/(app)/admin/sections.ts

@@ -26,6 +26,12 @@ export function adminSections(p: EffectivePermissions): AdminSection[] {
 
   const alle: (AdminSection & { sichtbar: boolean })[] = [
     { key: 'roles', href: '/admin/rollen', sichtbar: darf('roles.manage'), ...text('roles') },
+    {
+      key: 'ladders',
+      href: '/admin/ranggefuege',
+      sichtbar: darf('roles.manage'),
+      ...text('ladders'),
+    },
     {
       key: 'departments',
       href: '/admin/abteilungen',