Phase 1: identity, sessions, audit, frontend shell

AD sign-in over LDAPS (search with the service account, bind as the user,
nested groups through LDAP_MATCHING_RULE_IN_CHAIN, disabled accounts refused),
roles as the union of PS-* groups mapped by a table derived from the seeded
departments. Server-side sessions with idle, lock and absolute timeouts, Origin
and X-Requested-With check, step-up unlock. Optional Argon2id PIN set with the
domain password; PIN sign-in by employee ID on registered devices only; five
wrong attempts disable the PIN, three wrong at unlock or signature end the
session. Rate limits per account and per address before any bind. Devices,
signatures table and sign helper, audit rows for every identity event, SSE over
LISTEN/NOTIFY with presence. Account settings and Admin APIs and screens
(AD view, devices, PIN clearing, group map with missing-group flags, refresh
from AD now). CLI ad-groups --list and ad-refresh. Migration 0002.

Frontend: real sign-in (password tab, PIN keypad on registered devices), lock
screen, role switcher, Account settings, Admin shell, screen placeholders.

CI: Samba AD DC container (PSTEST.LOCAL) with a generated CA, 49 of the 50
groups plus one extra, 17 test users; wired into the CI compose overlay and
the Gitea workflow; Playwright sign-in scenario.

Verified on docker-1: 171 server tests green inside the CI stack against
PostgreSQL and the Samba DC, 48 frontend tests, 8 Playwright scenarios against
the live stack (password and PIN sign-in, lock and unlock, Admin group map).
Findings recorded in the docs: the DC needs CAP_SYS_ADMIN, a hidden tab locks
only after a minute as the old build did,
and the app uses the alias ps-app for Playwright because "app" is on
Chromium's HSTS preload list.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

frontend/src/components/Layout.tsx

@@ -1,16 +1,59 @@
-import { Outlet } from "react-router";
+import { useEffect, useRef } from "react";
+import { Link, Outlet, useLocation } from "react-router";
+import { SCREEN_LABELS, firstScreen, isScreen, orderScreens, type Screen } from "../auth/roles";
+import { useAuth } from "../auth/useAuth";
+import { LockScreen } from "./LockScreen";
+import { RoleSwitcher } from "./RoleSwitcher";
 import { TopBar } from "./TopBar";
 
-/** Page frame: the top bar, then the routed page inside main.wrap. */
+function chipClass(s: Screen): string {
+  if (s === "admin") return "rchip admin";
+  if (s === "supervisor") return "rchip supervisor";
+  return "rchip";
+}
+
+/** Page frame: the top bar, then the routed page inside main.wrap, and the lock screen over both. */
 export function Layout() {
+  const auth = useAuth();
+  const { pathname } = useLocation();
+  const mainRef = useRef<HTMLElement>(null);
+  const locked = auth.status === "locked";
+  const me = auth.status === "ready" || locked ? auth.me : null;
+
+  const screens = me ? orderScreens(me.screens) : [];
+  const seg = pathname.split("/")[1];
+  const active = isScreen(seg) && screens.includes(seg) ? seg : null;
+  const shown = active ?? firstScreen(screens);
+
+  // Keep the page mounted behind the lock, but out of reach of the keyboard and screen readers.
+  useEffect(() => {
+    mainRef.current?.toggleAttribute("inert", locked);
+  }, [locked]);
+
   return (
     <>
-      <TopBar>
-        <span className="proto">Rebuild preview</span>
+      <TopBar nav={me && !locked ? <RoleSwitcher screens={screens} active={active} /> : null}>
+        {me ? (
+          <>
+            <b className="uname">{me.user.display_name}</b>
+            {shown ? <span className={chipClass(shown)}>{SCREEN_LABELS[shown]}</span> : null}
+            <Link className="btn sm ghost" to="/account">
+              Account
+            </Link>
+            <button className="btn sm ghost" type="button" onClick={() => void auth.signOut()}>
+              Sign out
+            </button>
+          </>
+        ) : (
+          <span className="proto">Rebuild preview</span>
+        )}
       </TopBar>
-      <main className="wrap" id="main">
-        <Outlet />
-      </main>
+      <div className={locked ? "blur-hidden" : undefined}>
+        <main className="wrap" id="main" ref={mainRef} aria-hidden={locked ? true : undefined}>
+          <Outlet />
+        </main>
+      </div>
+      {locked ? <LockScreen key={auth.me?.user.id ?? "unknown"} /> : null}
     </>
   );
 }