@aiquants/auth-react-router 0.9.1 → 0.12.0

package/src/admin/server.ts

@@ -1,4 +1,5 @@
-import type { AuthAllowlistEntry, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
+import type { AuthAllowlistEntry, AuthDirectoryMembershipMode, AuthDirectoryStatus, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
+import { data } from "react-router"
 import { type PartialUserAdminLabels, resolveUserAdminLabels } from "./labels"
 
 /**
@@ -23,6 +24,38 @@ export type UserAdminStore = {
     listAllowlist: () => Promise<AuthAllowlistEntry[]>
     addAllowlistEntry: (data: { pattern: string; type: "email" | "domain"; description?: string }) => Promise<AuthAllowlistEntry>
     removeAllowlistEntry: (id: number) => Promise<void>
+
+    /**
+     * Allows every member of an externally-sourced group to sign in.
+     * 外部供給グループのメンバー全員にサインインを許可する処理。
+     *
+     * 判定は上流メンバー台帳を読むため、ローカル管理のグループを渡しても誰にも何も与えない。
+     * ストアはそれを拒否すること (無言の no-op を作らない)。
+     */
+    addAllowlistGroup: (groupId: number, description?: string) => Promise<void>
+    removeAllowlistGroup: (id: number) => Promise<void>
+
+    /**
+     * Links a local group to a group in the upstream directory.
+     * ローカルグループを上流ディレクトリのグループへ結び付ける処理。
+     *
+     * リンク後、そのグループの名称と所属は上流が所有する。ロール割当はローカルのままである。
+     */
+    linkDirectoryGroup: (groupId: number, data: { provider: string; externalKey: string; membershipMode: AuthDirectoryMembershipMode }) => Promise<void>
+    /** Stops following the upstream, keeping the memberships already projected. 連携の解除。 */
+    unlinkDirectoryGroup: (groupId: number) => Promise<void>
+    /** Pauses or resumes synchronization for one group. 1 グループの同期を停止・再開する処理。 */
+    setDirectorySyncEnabled: (groupId: number, isSyncEnabled: boolean) => Promise<void>
+    /**
+     * Queues a synchronization request. 同期要求をキューへ積む処理。
+     *
+     * 上流へ到達できるのは同期ジョブだけなので、web からは要求を残すことしかできない。
+     *
+     * @param groupId `null` requests every linked group of the tenant. `null` はテナント全件。
+     */
+    requestDirectorySync: (groupId: number | null) => Promise<void>
+    /** Health of the synchronization, for the header warning. 同期の健全性 (警告表示用)。 */
+    getDirectoryStatus: () => Promise<AuthDirectoryStatus>
 }
 
 /**
@@ -36,16 +69,16 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
         { id: 3, email: "user2@example.com", displayName: "営業 花子", isActive: true },
     ]
     let groups: AuthGroup[] = initial?.groups ?? [
-        { id: 1, groupKey: "dev-team", name: "開発チーム", description: "システム開発担当グループ", isActive: true },
-        { id: 2, groupKey: "sales-dept", name: "営業部", description: "営業ソリューション担当", isActive: true },
+        { id: 1, groupKey: "dev-team", name: "開発チーム", description: "システム開発担当グループ", isActive: true, readOnly: false },
+        { id: 2, groupKey: "sales-dept", name: "営業部", description: "営業ソリューション担当", isActive: true, readOnly: false },
     ]
     let groupMembers: AuthGroupMember[] = initial?.groupMembers ?? [
         { id: 1, groupId: 1, userId: 2 },
         { id: 2, groupId: 2, userId: 3 },
     ]
     let allowlist: AuthAllowlistEntry[] = initial?.allowlist ?? [
-        { id: 1, pattern: "admin@example.com", type: "email", description: "初期管理者" },
-        { id: 2, pattern: "@example.com", type: "domain", description: "社内ドメイン" },
+        { id: 1, pattern: "admin@example.com", type: "email", description: "初期管理者", owner: { kind: "tenant", tenantId: "default" }, readOnly: false },
+        { id: 2, pattern: "@example.com", type: "domain", description: "社内ドメイン", owner: { kind: "tenant", tenantId: "default" }, readOnly: false },
     ]
 
     return {
@@ -85,6 +118,7 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
                 name: data.name,
                 description: data.description,
                 isActive: true,
+                readOnly: false,
             }
             groups.push(newGroup)
             return newGroup
@@ -127,6 +161,8 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
                 pattern: data.pattern,
                 type: data.type,
                 description: data.description,
+                owner: { kind: "tenant", tenantId: "default" },
+                readOnly: false,
             }
             allowlist.push(newEntry)
             return newEntry
@@ -134,9 +170,52 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
         async removeAllowlistEntry(id) {
             allowlist = allowlist.filter((a) => a.id !== id)
         },
+
+        // --- ディレクトリ連携 ------------------------------------------------------------
+        // このメモリ実装はパッケージ自身の spec 用のテストシームであり、上流を持たない。
+        // 連携面は「結線されていない配備」を表現する形で応答する
+        async addAllowlistGroup(groupId, description) {
+            const group = groups.find((g) => g.id === groupId)
+            if (!group) throw new Error(`Group not found: ${groupId}`)
+            allowlist = [...allowlist, { id: Math.max(...allowlist.map((a) => a.id), 0) + 1, type: "group", groupId, groupKey: group.groupKey, groupName: group.name, description, owner: { kind: "tenant", tenantId: "default" }, readOnly: false }]
+        },
+        async removeAllowlistGroup(id) {
+            allowlist = allowlist.filter((a) => !(a.type === "group" && a.id === id))
+        },
+        async linkDirectoryGroup() {
+            throw new Error("This in-memory store has no upstream directory; inject a real store to link groups.")
+        },
+        async unlinkDirectoryGroup() {
+            throw new Error("This in-memory store has no upstream directory; inject a real store to unlink groups.")
+        },
+        async setDirectorySyncEnabled() {
+            throw new Error("This in-memory store has no upstream directory; inject a real store to pause synchronization.")
+        },
+        async requestDirectorySync() {
+            throw new Error("This in-memory store has no upstream directory; inject a real store to request a sync.")
+        },
+        async getDirectoryStatus() {
+            return { isEnabled: false, provider: "", linkedGroupCount: 0, isStale: false, pausedGroupCount: 0, stalenessThresholdSec: 0, erroredGroupIds: [], pendingRequestCount: 0 }
+        },
     }
 }
 
+/**
+ * Tells a per-operation authorization denial apart from any other failure, without importing an authz library.
+ * 認可ライブラリを import せずに、操作単位の認可拒否を他の失敗と見分ける判定。
+ *
+ * 特定の実装の例外クラスへ `instanceof` を張ると、そのライブラリに縛られる (`AGENTS.md` の
+ * クロスパッケージ・ハードコード禁止)。`status === 403` は HTTP の共通語彙なので、これだけを見る。
+ *
+ * @param error The thrown value. 送出された値。
+ * @returns True when it carries HTTP 403. HTTP 403 を名乗る場合に true。
+ */
+function isForbidden(error: unknown): boolean {
+    // Response でも素の例外でも `status` は共通語彙である。特定の実装の例外クラスへ
+    // `instanceof` を張ると、そのライブラリに縛られる
+    return typeof error === "object" && error !== null && (error as { status?: unknown }).status === 403
+}
+
 /**
  * The CRUD verb an operation performs. Deliberately a plain string union so this package stays
  * independent of any particular authorization library.
@@ -168,6 +247,13 @@ export type UserAdminGuards = {
      * 述語のつもりで `false` を返す実装を書くと素通りするため、返り値型で明示的に禁じる。
      */
     requireAccess: (request: Request, context: { action: UserAdminAccess; intent: string }) => Promise<void> | void
+    /**
+     * Observes a denial that was converted into an in-page error. 画面内エラーへ変換した拒否の観測点。
+     *
+     * 拒否を画面内に返すと、既定のエラー経路が拾っていたログが消える。管理面への総当たりが
+     * 200 番台の列に紛れて見えなくなるため、宿主が記録できる口を開けておく。
+     */
+    onDenied?: (context: { intent: string; actions: readonly UserAdminAccess[]; error: unknown }) => void
 }
 
 /**
@@ -177,19 +263,31 @@ export type UserAdminGuards = {
  * 割当の付与・解除は行の追加・削除であるため、認可管理 UI (`/authz`) の
  * `assignUserRole` = create / `removeUserRole` = delete と同じ粒度に揃える。
  */
-const INTENT_ACCESS = new Map<string, UserAdminAccess>([
-    ["createUser", "create"],
-    ["updateUser", "update"],
-    ["toggleUserActive", "update"],
-    ["createGroup", "create"],
-    ["updateGroup", "update"],
-    ["deleteGroup", "delete"],
-    ["addGroupMember", "create"],
-    ["removeGroupMember", "delete"],
-    ["addAllowlistEntry", "create"],
-    ["removeAllowlistEntry", "delete"],
+const INTENT_ACCESS = new Map<string, readonly UserAdminAccess[]>([
+    ["createUser", ["create"]],
+    ["updateUser", ["update"]],
+    ["toggleUserActive", ["update"]],
+    ["createGroup", ["create"]],
+    ["updateGroup", ["update"]],
+    ["deleteGroup", ["delete"]],
+    ["addGroupMember", ["create"]],
+    ["removeGroupMember", ["delete"]],
+    ["addAllowlistEntry", ["create"]],
+    ["removeAllowlistEntry", ["delete"]],
+    ["addAllowlistGroup", ["create"]],
+    ["removeAllowlistGroup", ["delete"]],
+    // 連携の開始は、以後の所属の **追加と削除の両方** を上流へ委ねる行為である。所属を足せる
+    // だけの主体が「足すことも消すこともできる仕掛け」を据えられてはならない。属性変更でもある
+    // ため update も要る
+    ["linkDirectoryGroup", ["update", "create", "delete"]],
+    // 解除は台帳とグループ単位のサインイン許可を **消す**。属性を戻すだけではないので、
+    // 削除権限を持たない主体には許さない
+    ["unlinkDirectoryGroup", ["update", "delete"]],
+    ["setDirectorySyncEnabled", ["update"]],
+    // 書き込みを伴わないが update を要求する。読取権限だけの主体が上流問い合わせを誘発できると、
+    // レート制限を外部から枯渇させられる
+    ["requestDirectorySync", ["update"]],
 ])
-
 /**
  * Neutral per-resource permission summary the admin shell renders in its header badge.
  * 管理シェルのヘッダーバッジが描画する、リソース単位の中立な権限サマリ。
@@ -259,6 +357,33 @@ function requireText(formData: FormData, field: string): string {
     return value
 }
 
+/**
+ * Reads an explicit boolean. 明示的な真偽値の読み取り。
+ *
+ * `"true"` / `"false"` のみを受け付ける。欠落を既定へ倒すと、破壊側 (停止) が既定方向になる。
+ *
+ * @throws when the field is absent or not one of the two literals. 明示指定でない場合。
+ */
+function requireBoolean(formData: FormData, field: string): boolean {
+    const raw = String(formData.get(field) ?? "")
+    if (raw !== "true" && raw !== "false") throw new Error(`Invalid or missing "${field}"`)
+    return raw === "true"
+}
+
+/**
+ * Reads the membership expansion mode. 所属展開モードの読み取り。
+ *
+ * 既定へ倒さない。入れ子展開が黙って有効になると権限が静かに広がり、黙って無効になると
+ * 入れ子側の全員が削除候補になる。どちらの向きにも倒さず、明示させる。
+ *
+ * @throws when the value is not one of the two modes. 2 値でない場合。
+ */
+function requireMembershipMode(formData: FormData): AuthDirectoryMembershipMode {
+    const raw = String(formData.get("membershipMode") ?? "")
+    if (raw !== "direct" && raw !== "transitive") throw new Error('Invalid or missing "membershipMode"')
+    return raw
+}
+
 /** Reads an optional trimmed string; blank becomes `undefined`. 任意文字列の読み取り (空は undefined)。 */
 function optionalText(formData: FormData, field: string): string | undefined {
     const value = String(formData.get(field) ?? "").trim()
@@ -281,11 +406,12 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
         const pathSegments = url.pathname.split("/").filter(Boolean)
         const segment = pathSegments[pathSegments.length - 1] ?? "users"
 
-        const [users, groups, groupMembers, allowlist, myPermissions] = await Promise.all([
+        const [users, groups, groupMembers, allowlist, directoryStatus, myPermissions] = await Promise.all([
             config.store.listUsers(),
             config.store.listGroups(),
             config.store.listGroupMembers(),
             config.store.listAllowlist(),
+            config.store.getDirectoryStatus(),
             // 取得できない場合は null (= 権限不明)。空マップに倒すと「付与ゼロ」と区別できなくなる
             config.getMyPermissions
                 ? config.getMyPermissions(request).catch((e) => {
@@ -297,11 +423,12 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
 
         return {
             resourceLabels: config.resourceLabels,
-            segment: ["groups", "group_members", "allowlist"].includes(segment) ? segment : "users",
+            segment: ["groups", "group_members", "allowlist", "directory"].includes(segment) ? segment : "users",
             users,
             groups,
             groupMembers,
             allowlist,
+            directoryStatus,
             myPermissions,
             labels,
         }
@@ -318,8 +445,18 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
         const access = INTENT_ACCESS.get(intent)
         if (!access) return { ok: false, error: `Unknown intent: ${intent}` }
 
-        // 操作ごとの CRUD 種別でガードする (削除は delete 権限が要る)
-        await config.guards.requireAccess(request, { action: access, intent })
+        // 操作ごとの CRUD 種別でガードする。複数を要求する intent は **すべて** 通ること
+        try {
+            for (const action of access) await config.guards.requireAccess(request, { action, intent })
+        } catch (error) {
+            // 403 は「この操作だけができない」であり、画面ごと落とすと **他の操作まで巻き添え** に
+            // なる (閲覧と作成はできるのに削除だけ拒否された、で一覧が消える)。401 や再認証の
+            // リダイレクト、それ以外の障害はそのまま伝播させる — 握り潰すとログインし直せない
+            if (!isForbidden(error)) throw error
+            // 監視から消えないよう、状態は 403 のまま返す。画面は data() なので生き残る
+            config.guards.onDenied?.({ intent, actions: access, error })
+            return data({ ok: false, error: labels.errors.forbidden }, { status: 403 })
+        }
 
         try {
             return await dispatch(intent, formData)
@@ -382,6 +519,35 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
             return { ok: true }
         }
 
+        if (intent === "addAllowlistGroup") {
+            await config.store.addAllowlistGroup(requireId(formData, "groupId"), optionalText(formData, "description"))
+            return { ok: true }
+        }
+        if (intent === "removeAllowlistGroup") {
+            await config.store.removeAllowlistGroup(requireId(formData, "entryId"))
+            return { ok: true }
+        }
+        if (intent === "linkDirectoryGroup") {
+            await config.store.linkDirectoryGroup(requireId(formData, "groupId"), {
+                provider: requireText(formData, "provider"),
+                externalKey: requireText(formData, "externalKey"),
+                membershipMode: requireMembershipMode(formData),
+            })
+            return { ok: true }
+        }
+        if (intent === "unlinkDirectoryGroup") {
+            await config.store.unlinkDirectoryGroup(requireId(formData, "groupId"))
+            return { ok: true }
+        }
+        if (intent === "setDirectorySyncEnabled") {
+            await config.store.setDirectorySyncEnabled(requireId(formData, "groupId"), requireBoolean(formData, "isSyncEnabled"))
+            return { ok: true }
+        }
+        if (intent === "requestDirectorySync") {
+            const raw = String(formData.get("groupId") ?? "").trim()
+            await config.store.requestDirectorySync(raw === "" ? null : requireId(formData, "groupId"))
+            return { ok: true }
+        }
         if (intent === "removeAllowlistEntry") {
             await config.store.removeAllowlistEntry(requireId(formData, "entryId"))
             return { ok: true }

package/src/admin/ui.tsx

@@ -1,5 +1,7 @@
+import type { AuthDirectoryStatus, AuthGroup } from "@aiquants/auth-core"
 import type React from "react"
 import { Link, useLoaderData } from "react-router"
+import { fill, formatDateTime } from "./format"
 import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
 import type { UserAdminPermission } from "./server"
 
@@ -34,12 +36,64 @@ function GroupPill({ label, summary }: { label: string; summary: { text: string;
     )
 }
 
+/**
+ * Warns when synchronization is not actually keeping the mirror fresh.
+ * 同期が実際には鏡を新しく保てていないことを警告する部品。
+ *
+ * 同期の停止は「上流から外れた人がテナントに居続ける」というセキュリティ事象である。件数と
+ * エラー数だけを見ると何も起きていないように読めるため、**滞留・全停止・未結線の 3 つを
+ * それぞれ名指しで** 出す。出さなければ、状態を計算している意味がない。
+ *
+ * どのタブに居ても見えるようにシェル側で描く。ディレクトリの停止はグループ一覧を見ている
+ * ときだけ起きる事象ではない。
+ */
+function DirectorySyncBanner({ status, labels, groups }: { status?: AuthDirectoryStatus; labels: UserAdminLabels; groups: AuthGroup[] }) {
+    if (!status || status.linkedGroupCount === 0) return null
+    const L = labels.directoryView
+    const warnings: Array<{ id: string; text: string }> = []
+    if (!status.isEnabled) warnings.push({ id: "disabled", text: L.disabledWarning })
+    if (status.pausedGroupCount > 0) warnings.push({ id: "paused", text: fill(L.pausedTemplate, { paused: status.pausedGroupCount, total: status.linkedGroupCount }) })
+    if (status.isStale) {
+        const at = status.oldestSyncedAt ? formatDateTime(status.oldestSyncedAt, labels) : L.neverSynced
+        warnings.push({ id: "stale", text: `${L.staleWarning} ${fill(L.oldestSyncedTemplate, { at })}` })
+    }
+    if (status.erroredGroupIds.length > 0) {
+        // ID を並べても運用者には何のグループか判らない。名前と、あれば実際の失敗理由を出す
+        const described = status.erroredGroupIds.map((id) => {
+            const group = groups.find((g) => g.id === id)
+            if (!group) return fill(labels.common.idTemplate, { id })
+            const reason = group.externalLink?.syncError
+            return reason ? fill(L.erroredItemTemplate, { group: group.name, reason }) : group.name
+        })
+        warnings.push({ id: "errored", text: fill(L.erroredTemplate, { groups: described.join(L.listSeparator) }) })
+    }
+    if (status.pendingRequestCount > 0) warnings.push({ id: "pending", text: fill(L.pendingTemplate, { count: status.pendingRequestCount }) })
+    if (warnings.length === 0) return null
+    return (
+        // ライブリージョンにはしない。初期描画から在る内容は読み上げられず、見出しも読み順も
+        // 失われる。**読める本文** として置き、見出しから辿れるようにする
+        <section
+            aria-labelledby="directory-sync-heading"
+            data-testid="directory-sync-banner"
+            style={{ display: "flex", flexDirection: "column", gap: "0.35rem", padding: "0.7rem 1rem", marginBottom: "1rem", borderRadius: "6px", border: "1px solid #fde68a", backgroundColor: "#fffbeb", color: "#92400e", fontSize: "0.85rem" }}>
+            <h2 id="directory-sync-heading" style={{ margin: 0, fontSize: "0.9rem", fontWeight: 700 }}>
+                {L.title}
+            </h2>
+            {warnings.map((w) => (
+                <span key={w.id} data-directory-warning={w.id}>
+                    {w.text}
+                </span>
+            ))}
+        </section>
+    )
+}
+
 /**
  * Shell layout for user administration pages with header annotation delegation.
  * ヘッダー注釈委譲を備えたユーザー管理ページのシェルレイアウト。
  */
 export function UserAdminShell({ children, renderHeader }: UserAdminShellProps) {
-    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string> } | undefined
+    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string>; directoryStatus?: AuthDirectoryStatus; groups?: AuthGroup[] } | undefined
     const segment = data?.segment ?? "users"
     const labels = data?.labels ?? defaultUserAdminLabels
     // null = 未結線または取得失敗。空 {} も「分からない」扱いで、いずれも許可として描画しない
@@ -54,6 +108,9 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
         { key: "group_members", label: labels.tabs.groupMembers, href: "/users/group_members" },
         { key: "allowlist", label: labels.tabs.allowlist, href: "/users/allowlist" },
     ]
+    // 未結線でも **連携が残っていれば** 出す。停止を警告した直後に、解除や再開ができる唯一の
+    // 面だけが消えるのは最悪の挙動である。連携も結線も無い配備でだけ隠す
+    if (data?.directoryStatus && (data.directoryStatus.isEnabled || data.directoryStatus.linkedGroupCount > 0)) tabs.push({ key: "directory", label: labels.tabs.directory, href: "/users/directory" })
 
     const permEntries = Object.entries(myPermissions ?? {})
 
@@ -66,21 +123,21 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
      */
     const getSummary = (perm: UserAdminPermission | undefined) => {
         if (perm?.canWrite) {
-            return { text: "編集可", color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
+            return { text: labels.permissions.canWrite, color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
         }
         if (perm?.canRead) {
-            return { text: "閲覧のみ", color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
+            return { text: labels.permissions.canRead, color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
         }
-        return { text: "権限なし", color: "#64748b", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
+        return { text: labels.permissions.none, color: "#475569", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
     }
-    const unavailableSummary = { text: "権限不明", color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
+    const unavailableSummary = { text: labels.permissions.unknown, color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
 
     const annotation = (
         <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }} data-testid="user-admin-header-annotation">
             <span style={{ fontSize: "0.75rem", backgroundColor: "#e0f2fe", color: "#0369a1", padding: "2px 8px", borderRadius: "12px", fontWeight: 600 }}>{labels.heading}</span>
 
             <div style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", fontSize: "0.68rem", color: "#475569" }} data-testid="user-admin-permissions-badge">
-                <span style={{ fontWeight: 600, color: "#334155" }}>あなたの権限:</span>
+                <span style={{ fontWeight: 600, color: "#334155" }}>{labels.permissions.label}</span>
                 <span style={{ display: "inline-flex", alignItems: "center", gap: "0.18rem" }}>
                     {permEntries.length === 0 ? (
                         <span data-testid="user-admin-permission-unavailable">
@@ -105,7 +162,7 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                 </div>
             )}
 
-            <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
+            <nav aria-label={labels.title} style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
                 {tabs.map((tab) => {
                     const isActive = segment === tab.key
                     return (
@@ -113,6 +170,7 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                             key={tab.key}
                             to={tab.href}
                             data-testid={`user-admin-tab-${tab.key}`}
+                            aria-current={isActive ? "page" : undefined}
                             style={{
                                 padding: "0.5rem 1rem",
                                 borderRadius: "6px 6px 0 0",
@@ -128,7 +186,9 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                         </Link>
                     )
                 })}
-            </div>
+            </nav>
+
+            <DirectorySyncBanner status={data?.directoryStatus} labels={labels} groups={data?.groups ?? []} />
 
             <main>{children}</main>
         </div>