@aiquants/auth-react-router 0.15.0 → 0.16.0

package/src/admin/views.tsx

@@ -1,2120 +0,0 @@
-/**
- * @module admin/views
- * @description The five tab views of the user administration screen.
- * ユーザー管理画面を構成する 5 つのタブビュー。
- *
- * 一覧・検索・所属・許可リスト・ディレクトリ連携を描く。データはすべて loader から渡され、
- * 書き込みはビュー唯一の fetcher (`useSubmitThen`) を通す。
- */
-import type { AuthAllowlistEntry, AuthDirectoryMembershipMode, AuthDirectoryStatus, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
-import { getHighlightSegments, type Option, type RenderOptionContext, SelectBox, type SelectBoxTexts } from "@aiquants/select-box"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { Link, useFetcher, useLoaderData, useSearchParams } from "react-router"
-import { fill, formatDateTime } from "./format"
-import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
-import { normalizeUpstreamKey, type UserAdminCatalog, type UserAdminCatalogGroup } from "./server"
-import { UserAdminShell, type UserAdminShellProps } from "./ui"
-
-export type UserAdminLoaderData = {
-    segment: string
-    users: AuthUser[]
-    groups: AuthGroup[]
-    groupMembers: AuthGroupMember[]
-    allowlist: AuthAllowlistEntry[]
-    directoryStatus: AuthDirectoryStatus
-    /** 上流の候補一覧。選択欄を出す面でのみ `ready` になる。 */
-    catalog: UserAdminCatalog
-    labels?: UserAdminLabels
-}
-
-/**
- * Renders the error returned by the last action submission, if any.
- * 直近の action 送信が返したエラーを表示する部品。
- *
- * ロックアウト理由・重複パターン・入力不正などの文言は action が `{ok:false,error}` で返す。
- * 表示しなければ操作が黙って失敗したように見えるため、各ビューの先頭に必ず置く。
- */
-function ActionError({ result: raw, id }: { result: unknown; id?: string }) {
-    const result = raw as { ok?: boolean; error?: string } | undefined
-    if (result?.ok !== false || !result.error) return null
-    return (
-        // グリッド配下でも行を跨ぐ。空のときは描かないので、余分な行も生まれない
-        <div id={id} data-testid="user-admin-action-error" role="alert" style={{ gridColumn: "1 / -1", padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #fecaca", backgroundColor: "#fef2f2", color: "#b91c1c", fontSize: "0.85rem" }}>
-            {result.error}
-        </div>
-    )
-}
-
-/**
- * Submits through the view's single fetcher and defers "close and clear" until the server accepts.
- * ビュー唯一の fetcher で送信し、**サーバーが受理してから** 「閉じて消す」を行うためのフック。
- *
- * 送信直後に閉じて入力を消すと、認可拒否や検証エラーで戻ったときに打ち込んだ内容が丸ごと
- * 失われ、利用者は全部打ち直すことになる。成功応答 (`ok === true`) を待って初めて破棄する。
- *
- * ⚠️ **このビューの送信はすべてここを通すこと。** fetcher は 1 つを共有しており、後の送信は
- * 前の送信を打ち切る。素の `fetcher.submit` を混ぜると、打ち切られた送信の後始末が **後の
- * 送信の成功応答で** 実行される (行の操作を挟んだだけで、フォームの入力が消える)。ここを
- * 通せば後の送信が `pending` を必ず上書きするため、後始末は常に最後の送信のものになる。
- */
-function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
-    const pending = useRef<((data: unknown) => void) | null>(null)
-    // 破棄した結果の世代。`fetcher.data` は宣言的に消せないため、こちらで無効化する
-    const [discarded, setDiscarded] = useState<unknown>(undefined)
-    const result = fetcher.data === discarded ? undefined : fetcher.data
-
-    useEffect(() => {
-        if (fetcher.state !== "idle" || fetcher.data === undefined) return
-        const onSuccess = pending.current
-        if (!onSuccess) return
-        // 同じ応答で 2 度実行しないよう、消費した時点で捨てる。ここは **冗長な防御** である —
-        // すべての送信がこのフックを通る限り、後の送信が必ず `pending` を上書きするため。
-        // 素の `fetcher.submit` が 1 つでも混ざった瞬間に効き始める
-        pending.current = null
-        // ⚠️ 後始末には応答そのものを渡す。`ok === true` は「受理した」であって「要求どおりに
-        // なった」ではない — 積まれなかった要求も受理として返る。区別できない形にすると、
-        // 押した控えだけが成功の見た目で残る
-        if ((fetcher.data as { ok?: boolean }).ok === true) onSuccess(fetcher.data)
-    }, [fetcher.state, fetcher.data])
-
-    const submit = (payload: Record<string, string>, onSuccess?: (data: unknown) => void) => {
-        pending.current = onSuccess ?? null
-        setDiscarded(undefined)
-        fetcher.submit(payload, { method: "post" })
-    }
-    /**
-     * Forgets the last result so an unrelated failure cannot describe a freshly opened dialog.
-     * 直前の結果を忘れる処理 (無関係な失敗が、開いたばかりのダイアログの説明文にならないように)。
-     */
-    const resetResult = () => setDiscarded(fetcher.data)
-
-    return { submit, resetResult, result }
-}
-
-/**
- * Gives a dialog the behavior its ARIA attributes promise: focus, trap, Escape, restore.
- * ダイアログに、ARIA 属性が約束している挙動 (初期焦点・封じ込め・Escape・復帰) を与えるフック。
- *
- * 役割属性だけを付けても、焦点は背後に残り、Tab は外へ出て行き、Escape は効かない。
- * キーボード利用者は「閉じる」に到達できず、支援技術は背後を読み続ける。
- *
- * @param isOpen Whether the dialog is mounted and visible. ダイアログが開いているかどうか。
- * @param onClose Invoked when Escape is pressed. Escape が押されたときに呼ばれる処理。
- * @returns Ref to attach to the dialog panel. ダイアログ本体へ付ける ref。
- */
-function useModalBehavior(isOpen: boolean, onClose: () => void, openerRef?: React.RefObject<HTMLElement | null>) {
-    const ref = useRef<HTMLFormElement>(null)
-    // 再描画のたびに実行されると入力中に焦点が先頭へ飛ぶため、依存は開閉だけにする
-    const closeRef = useRef(onClose)
-    closeRef.current = onClose
-
-    useEffect(() => {
-        if (!isOpen) return
-        const panel = ref.current
-        // `activeElement` を見るだけでは戻し先にならない。押下で焦点が乗らないブラウザ
-        // (Safari / macOS の Firefox) では body へ戻ってしまう。開いた要素を明示的に覚える
-        const opener = openerRef?.current ?? (document.activeElement as HTMLElement | null)
-        /**
-         * Tab が実際に止まる要素だけを、文書順で返す。
-         *
-         * ⚠️ 同じ `name` のラジオ群は、ブラウザにとって **停止点 1 つ** である (選択中の 1 つ)。
-         * 両方を輪に入れると 2 つずれる — 先頭で Shift+Tab したときに罠が働かず `aria-modal` の
-         * 対話の外へ抜け、末尾から Tab したときは選択されていない 1px のラジオへ焦点が飛ぶ。
-         * 初期焦点だけがこの配慮をしていて、輪はしていなかった
-         */
-        const focusables = () => {
-            // ⚠️ 最後の `[tabindex]` 節は、前の節が除いた **無効な要素を連れ戻す**。無効かつ
-            // `tabindex="0"` の要素は実在する (仮想スクロールの矢印ボタンがそれで、popup の中に
-            // 常に 2 つ出る)。輪の端がそういう要素になると、`preventDefault` の後に `focus()` が
-            // 黙って何もしないため、**そこから Tab で出られない** 本物の罠になる。
-            // `inert` と非表示の部分木も同様に、到達できない停止点を輪へ持ち込む
-            const all = Array.from(panel?.querySelectorAll<HTMLElement>('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])') ?? []).filter(
-                (element) => !((element as HTMLElement & { disabled?: boolean }).disabled || element.hasAttribute("inert")) && element.closest("[inert]") === null && element.getAttribute("aria-hidden") !== "true",
-            )
-            const seenRadioGroups = new Set<string>()
-            return all.filter((element) => {
-                const radio = element instanceof HTMLInputElement && element.type === "radio" ? element : null
-                if (!radio || radio.name === "") return true
-                // 群の代表は選択中の 1 つ。どれも選択されていなければ先頭が停止点になる
-                if (!radio.checked && all.some((other) => other instanceof HTMLInputElement && other.type === "radio" && other.name === radio.name && other.checked)) return false
-                if (seenRadioGroups.has(radio.name)) return false
-                seenRadioGroups.add(radio.name)
-                return true
-            })
-        }
-        // ⚠️ 初期焦点は **見える** 要素へ置く。1px に切り詰めた入力 (ラジオ群の実体) へ置くと、
-        // 焦点環はその 1px の箱に描かれ、操作者からは「どこにも焦点が無い」ようにしか見えない。
-        // Tab の輪からは外さない — 見えないだけで、到達できる必要はある。
-        // 寸法では判定しない (jsdom は常に 0 を答え、検査が空砲になる)。意図を属性で示す
-        const items = focusables()
-        ;(items.find((element) => !element.hasAttribute("data-aqar-visually-hidden")) ?? items[0])?.focus()
-
-        const onKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                // 変換中の Escape は「候補を取り消す」であって「閉じる」ではない。ここで
-                // 閉じると、編集中の下書きは状態ごと捨てられ、打ち直しになる
-                if (event.isComposing || event.keyCode === 229) return
-                // ⚠️ 内側の部品が既に処理した Escape で対話ごと閉じない。選択欄は「一覧を閉じる」
-                // ために Escape を消費し、`preventDefault` で消費済みだと示した上で、対話が
-                // 反応できるよう伝播は止めない。ここで既定動作の有無を見ないと、**一覧を畳む
-                // つもりの 1 打鍵で対話全体と入力内容が消える**
-                if (event.defaultPrevented) return
-                event.preventDefault()
-                closeRef.current()
-                return
-            }
-            if (event.key !== "Tab") return
-            const items = focusables()
-            if (items.length === 0) return
-            const first = items[0]
-            const last = items[items.length - 1]
-            const active = document.activeElement
-            const outside = !panel?.contains(active)
-            if (event.shiftKey && (active === first || outside)) {
-                event.preventDefault()
-                last.focus()
-            } else if (!event.shiftKey && (active === last || outside)) {
-                event.preventDefault()
-                first.focus()
-            }
-        }
-        document.addEventListener("keydown", onKeyDown)
-        return () => {
-            document.removeEventListener("keydown", onKeyDown)
-            opener?.focus?.()
-        }
-    }, [isOpen, openerRef])
-
-    return ref
-}
-
-/**
- * Turns catalog entries into picker options, marking the ones that are already linked.
- * 候補一覧を選択肢へ変える処理 (すでに連携済みのものに印を付ける)。
- *
- * 連携済みを **隠さず、選べなくする** のは、運用者が探しているグループが「無い」のか
- * 「既に繋がっている」のかを区別できるようにするためである。隠すと、見つからない理由が判らない。
- *
- * @param catalog The loader's catalog state. loader が渡した候補一覧の状態。
- * @param linkedTo Upstream key to the local group already holding it. 上流キー → それを押さえているローカルグループ名。
- * @param labels Resolved labels. 解決済みラベル。
- * @returns Options for the picker. 選択欄に渡す選択肢。
- */
-function upstreamOptions(catalog: UserAdminCatalog, linkedTo: Map<string, string>, labels: UserAdminLabels): UpstreamOption[] {
-    if (catalog.kind !== "ready") return []
-    return catalog.groups.map((entry) => {
-        // ⚠️ 「連携済み」だけでは、どのローカルグループが押さえているのか判らず、探しようも
-        // 解除しようも無い。名指しできる情報は手元にあるので、名指しする。
-        // 突合は **安定 ID を第一キー、アドレスを第二キー** とする (サーバー側と同じ規則)。
-        // アドレスだけで見ると、上流で改名された直後は選べるように見えて、押すと拒否される
-        const holder = linkedTo.get(normalizeUpstreamKey(entry.externalId)) ?? linkedTo.get(normalizeUpstreamKey(entry.externalKey))
-        const linked = holder !== undefined
-        const members = entry.memberCount === undefined ? "" : fill(labels.groupsView.upstreamOptionMembers, { count: entry.memberCount })
-        return {
-            // ⚠️ 名前とアドレスの **両方を label に入れる**。選択欄が描くのも探すのも label だけで
-            // あり、別の項目へ入れた値は表示も検索もされない。同名のグループ (別部門の「営業部」等)
-            // を見分けられないまま選ばせるのが、この機能で最も避けたい取り違えである
-            label: fill(labels.directoryView.groupOptionTemplate, { name: entry.name, key: entry.externalKey }),
-            // ⚠️ 選択肢を区別するのは **安定 ID** である。アドレスは一意とは限らない (別名行、
-            // 改名の途中、別ドメインの同名) し、選んだ後に控えを引き当てるのもこの値である。
-            // アドレスを鍵にすると、2 件目を選んだのに 1 件目の名前が出る — 取り違えたまま
-            // 取り消せない委譲 (作成と連携) を押すことになる
-            value: entry.externalId,
-            note: linked ? fill(labels.groupsView.upstreamAlreadyLinked, { group: holder }) : members,
-            ...(linked ? { disabled: true } : {}),
-            entry,
-        }
-    })
-}
-
-/**
- * States when the catalog was observed, loudly when it is older than the deployment allows.
- * 候補一覧をいつ観測したかを示す表示。配備が許す鮮度を越えていれば強く出す。
- *
- * ⚠️ この一覧は上流を直に叩いた結果ではなく、資格情報を持つ同期ジョブが書いた **写し** である。
- * 時刻を出さないと「上流の現在」と読まれ、既に消えたグループを選ばせる。逆に、作ったばかりの
- * グループが出てこない理由も、時刻を見て初めて分かる。
- *
- * ⚠️ 陳腐化の判定は **loader が済ませている**。ここで `Date.now()` を読むと、時計が遅れている
- * 端末では経過が負になり警告が消える (安全側の警告が利用者側の入力で無効化される)。加えて、
- * 描画時に読むと開いたままの画面では判定が更新されず、水和のずれも生む。
- */
-function CatalogFreshness({ observedAt, isStale, labels }: { observedAt: string; isStale: boolean; labels: UserAdminLabels }): React.ReactNode {
-    return (
-        <p data-testid="catalog-freshness" data-stale={isStale ? "" : undefined} style={{ margin: "0.35rem 0 0 0", fontSize: "0.72rem", color: isStale ? "#92400e" : "#64748b" }}>
-            {fill(isStale ? labels.groupsView.catalogStale : labels.groupsView.catalogObservedAt, { at: formatDateTime(observedAt, labels) })}
-        </p>
-    )
-}
-
-/**
- * Whether an action result carries a message worth describing the dialog with.
- * 操作結果が、対話の説明として指す価値のある文言を持っているか。
- *
- * ⚠️ `aria-describedby` を常に張ると、誤りが無い間 **解決できない IDREF** を指し続ける。支援技術は
- * 黙って無視するため実害は小さいが、「説明が在るのに読めない」状態を常設することになる。
- *
- * @param result The action result, if any. 操作結果 (無い場合あり)。
- * @returns True when an error message exists. エラー文言が在れば true。
- */
-function hasError(result: unknown): boolean {
-    return typeof result === "object" && result !== null && (result as { ok?: unknown }).ok === false && typeof (result as { error?: unknown }).error === "string"
-}
-
-/**
- * 一致箇所の装飾。
- *
- * ⚠️ **選択欄パッケージの内部クラス名を書かない。** `sb-highlight--*` はそのパッケージの公開 API
- * ではなく、向こうが patch リリースで改名した瞬間に、こちらは何のエラーも出さずに装飾を失う。
- * 自前の値で描き、印は自パッケージの `data-*` に持つ。
- */
-const matchStyle: Record<"exact" | "fuzzy", React.CSSProperties> = {
-    exact: { backgroundColor: "#d1fae5", color: "#064e3b", borderRadius: "2px", fontWeight: 600 },
-    fuzzy: { backgroundColor: "#fef3c7", color: "#78350f", borderRadius: "2px", fontWeight: 600 },
-}
-
-/**
- * Turns the sync-request part of an action result into a notice, or nothing when there is nothing to say.
- * 操作結果のうち同期要求の部分を告知文へ写す処理 (言うことが無ければ `null`)。
- *
- * ⚠️ `queued` は告げない。積めたことの結果は、数秒後の再検証で `最終同期` が進むことそのもの
- * である。告げるのは **押しても何も積まれなかった** 2 つの場合だけで、黙ると押しても反応しない
- * 画面になる。
- *
- * @param actionResult The fetcher's last result. 直前の操作結果。
- * @param labels Active labels. 使用中のラベル。
- * @returns The notice text, or `null`. 告知文、または `null`。
- */
-function syncRequestNoticeOf(actionResult: unknown, labels: UserAdminLabels): string | null {
-    if (typeof actionResult !== "object" || actionResult === null) return null
-    const outcome = (actionResult as { syncRequest?: unknown }).syncRequest
-    if (outcome === "already-pending") return labels.directoryView.syncAlreadyPending
-    if (outcome === "not-queued") return labels.directoryView.linkSyncNotQueued
-    return null
-}
-
-/**
- * Indexes linked groups by both upstream keys. 連携済みグループを 2 つの上流キーで索引する処理。
- *
- * 安定 ID とアドレスの両方を引けるようにする。上流が改名すると、リンク行のアドレスは次の同期まで
- * 古いままであり、アドレスだけの索引では「連携済み」を見落とす。
- *
- * @param groups Local groups, linked or not. ローカルグループ (連携の有無を問わない)。
- * @returns Upstream key to the local group name holding it. 上流キー → 押さえているローカル名。
- */
-function upstreamIndex(groups: readonly AuthGroup[]): Map<string, string> {
-    const index = new Map<string, string>()
-    for (const group of groups) {
-        const link = group.externalLink
-        if (!link) continue
-        index.set(normalizeUpstreamKey(link.externalId), group.name)
-        index.set(normalizeUpstreamKey(link.externalKey), group.name)
-    }
-    return index
-}
-
-/** 選択欄 1 行分。`note` は選べない理由か規模を添える。 */
-type UpstreamOption = { label: string; value: string; note: string; disabled?: boolean; entry: UserAdminCatalogGroup }
-
-/**
- * Renders one upstream option: the searchable label, plus why it cannot be picked.
- * 上流の選択肢 1 行を描く処理 (検索対象のラベルと、選べない理由)。
- *
- * 既定の描画は `label` しか出さないため、`disabled` の理由が伝わらない。薄く見えるだけの行は、
- * 読み込み中や壊れている行と区別できない。
- */
-function renderUpstreamOption(option: Option, context: RenderOptionContext): React.ReactNode {
-    const note = typeof option.note === "string" ? option.note : ""
-    return (
-        // ⚠️ 行は幅で切り詰められる。切り詰められるのは末尾、つまりアドレス — 同名のグループを
-        // 見分ける唯一の手がかりである。全文を `title` に持たせて、少なくとも確かめられるようにする
-        <span data-aqar-upstream-option title={note === "" ? option.label : `${option.label} — ${note}`} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "0.75rem", width: "100%", minWidth: 0 }}>
-            <span data-aqar-upstream-option-label style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                {/* 独自描画は既定の一致ハイライトを失う。同じ関数と同じ装飾クラスを使って復元する
-                    (打った語がどこに当たったのか判らないと、絞り込みの手応えが消える) */}
-                {getHighlightSegments(option.label, context.query).map((segment, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: 分割位置そのものが同一性であり、他に安定した鍵が無い
-                    <span key={index} data-aqar-match={segment.matchType === "none" ? undefined : segment.matchType} style={segment.matchType === "none" ? undefined : matchStyle[segment.matchType]}>
-                        {segment.text}
-                    </span>
-                ))}
-            </span>
-            {note === "" ? null : (
-                <span data-aqar-upstream-option-note style={{ flexShrink: 0, fontSize: "0.72rem", opacity: 0.75 }}>
-                    {note}
-                </span>
-            )}
-        </span>
-    )
-}
-
-/**
- * The texts `@aiquants/select-box` renders itself, taken from this package's labels.
- * 選択欄が自前で描く文言を、このパッケージのラベルから与える処理。
- *
- * 渡さないと件数・空状態・クリア・開閉の読み上げが英語のまま出る — 和文の配備でそこだけ英語になる。
- */
-function pickerTexts(labels: UserAdminLabels): SelectBoxTexts {
-    const L = labels.directoryView
-    return {
-        noOptions: L.pickerNoOptions,
-        clear: L.pickerClear,
-        toggle: L.pickerToggle,
-        selection: (selected) => fill(L.pickerSelected, { value: selected.map((o) => o.label).join(", ") }),
-        status: (info) => fill(L.pickerAvailable, { count: info.count }),
-    }
-}
-
-/**
- * Builds a collator that cannot crash the view. 画面を落とさない照合器を作る処理。
- *
- * `Intl.Collator` は BCP 47 として読めないタグに `RangeError` を投げる。並べ替えは表示だけの
- * 関心事なのに、投げられると一覧そのものが描けなくなる。読めないタグは環境既定に倒す。
- *
- * @param locale Requested locale tag. 要求されたロケールタグ。
- * @returns A comparison function for display strings. 表示文字列用の比較関数。
- */
-function collatorFor(locale: string): (a: string, b: string) => number {
-    try {
-        return new Intl.Collator(locale).compare
-    } catch {
-        return new Intl.Collator().compare
-    }
-}
-
-/**
- * Derives a local group key from an upstream address. 上流アドレスからローカルのグループキーを導く処理。
- *
- * アドレスのローカル部だけを使い、鍵に使えない文字を落とす。運用者が手で打ち直す手間を省くための
- * **初期値** であり、確定値ではない (画面上で編集できる)。
- *
- * @param externalKey Upstream address. 上流のアドレス。
- * @returns A usable group key. グループキーとして使える文字列。
- */
-function groupKeyFromUpstream(externalKey: string): string {
-    const local = externalKey.split("@")[0] ?? externalKey
-    return local
-        .toLowerCase()
-        .replace(/[^a-z0-9._-]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-}
-
-export function UsersView() {
-    const data = useLoaderData() as UserAdminLoaderData
-    const fetcher = useFetcher()
-    const { submit: submitThen, resetResult, result: actionResult } = useSubmitThen(fetcher)
-    const labels = data.labels ?? defaultUserAdminLabels
-
-    const [searchQuery, setSearchQuery] = useState("")
-    // 2 つの独立した状態にすると「両方開いている」状態が表現でき、エラー欄が 2 つ描かれる。
-    // 排他であることを型で持つ
-    const [modal, setModal] = useState<{ kind: "create" } | { kind: "edit"; user: AuthUser } | null>(null)
-    const editingUser = modal?.kind === "edit" ? modal.user : null
-    const isCreateOpen = modal?.kind === "create"
-    const openerRef = useRef<HTMLElement | null>(null)
-    /** ダイアログを開く。直前の操作の結果を持ち越さない (別の操作の拒否が説明文になる)。 */
-    const openModal = (next: { kind: "create" } | { kind: "edit"; user: AuthUser }, event: React.MouseEvent<HTMLElement>) => {
-        openerRef.current = event.currentTarget
-        resetResult()
-        // ⚠️ 前回の下書きを残すと、別人を追加するつもりで開いた欄に前の人の Email が入っている。
-        // 見えている表示名だけ書き換えて送ると、**別人のサインイン identity を持つ利用者** ができる
-        if (next.kind === "create") {
-            setNewDisplayName("")
-            setNewEmail("")
-        }
-        setModal(next)
-    }
-
-    const [newDisplayName, setNewDisplayName] = useState("")
-    const [newEmail, setNewEmail] = useState("")
-    const createUserRef = useModalBehavior(isCreateOpen, () => setModal(null), openerRef)
-    const editUserRef = useModalBehavior(editingUser !== null, () => setModal(null), openerRef)
-
-    const busy = fetcher.state !== "idle"
-    // 並べ替えは表示だけの関心事なので状態は画面に持つ。URL へ載せると共有できるが、
-    // 「同じ URL を開いたのに並びが違う」という取り違えを防ぐには loader 側の合意が要る
-    const [sort, setSort] = useState<{ column: "id" | "displayName" | "email" | "isActive"; ascending: boolean }>({ column: "displayName", ascending: true })
-    const compareText = collatorFor(labels.locale)
-    // メールクライアントやチャットから貼った値はほぼ必ず末尾に空白を伴い、IME は全角空白を作る。
-    // trim しないと、存在する利用者が「登録が無い」ように見える
-    const userNeedle = searchQuery.trim().toLowerCase()
-    const filteredUsers = data.users
-        .filter((u) => u.displayName.toLowerCase().includes(userNeedle) || u.email.toLowerCase().includes(userNeedle))
-        .slice()
-        .sort((a, b) => {
-            const direction = sort.ascending ? 1 : -1
-            if (sort.column === "id") return (a.id - b.id) * direction
-            if (sort.column === "isActive") return (Number(a.isActive) - Number(b.isActive)) * direction
-            // 表示名と Email は言語に依存する。ロケールを固定して、環境ごとに並びが変わるのを防ぐ
-            return compareText(a[sort.column], b[sort.column]) * direction
-        })
-
-    /** 同じ列を押したら向きだけ変える。別の列なら昇順から始める。 */
-    const toggleSort = (column: typeof sort.column) => {
-        setSort((current) => (current.column === column ? { column, ascending: !current.ascending } : { column, ascending: true }))
-    }
-
-    const handleToggleActive = (user: AuthUser) => {
-        // ⚠️ `aria-disabled` は焦点を残すために `disabled` の代わりに使っている。押せてしまう
-        // ぶん、実際に断るのはここである
-        if (busy) return
-        // 無効化はサインインを止める。有効化は元に戻すだけなので確認しない
-        if (user.isActive && !window.confirm(fill(labels.usersView.confirmDeactivate, { user: user.displayName }))) return
-        submitThen({ intent: "toggleUserActive", userId: String(user.id), isActive: String(!user.isActive) })
-    }
-
-    const handleCreateUser = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!(newDisplayName && newEmail)) return
-        // 送信した値と今の値が違うなら、往復の間に打ち込まれたものである。消してはならない
-        const sentName = newDisplayName
-        const sentEmail = newEmail
-        submitThen({ intent: "createUser", displayName: sentName, email: sentEmail }, () => {
-            setNewDisplayName((current) => (current === sentName ? "" : current))
-            setNewEmail((current) => (current === sentEmail ? "" : current))
-            setModal(null)
-        })
-    }
-
-    const handleUpdateUser = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!editingUser) return
-        submitThen({ intent: "updateUser", userId: String(editingUser.id), displayName: editingUser.displayName, email: editingUser.email }, () => setModal(null))
-    }
-
-    return (
-        <section data-testid="users-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <h2 style={heading}>{labels.usersView.title}</h2>
-            {/* モーダルが開いている間はモーダル内に描く。両方描くと同じ hook が 2 つになる */}
-            {!modal && <ActionError result={actionResult} />}
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                <input
-                    type="text"
-                    aria-label={labels.usersView.searchLabel}
-                    placeholder={labels.usersView.searchPlaceholder}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    data-testid="users-search-input"
-                    style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
-                />
-                <button
-                    type="button"
-                    onClick={(event) => openModal({ kind: "create" }, event)}
-                    data-testid="users-add-button"
-                    style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
-                    {labels.usersView.addUser}
-                </button>
-            </div>
-
-            {/* 絞り込みの結果は視覚的にしか変わらない。読み上げへ届けるには live region が要る —
-                無いと、打ち込むたびに何件残ったのか判らないまま表全体を辿ることになる */}
-            <p data-testid="users-summary" role="status" aria-live="polite" style={{ margin: 0, fontSize: "0.78rem", color: "#475569" }}>
-                {fill(labels.usersView.listSummary, { shown: filteredUsers.length, total: data.users.length })}
-            </p>
-
-            <div style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", overflow: "hidden" }}>
-                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.85rem", textAlign: "left" }}>
-                    <thead>
-                        <tr style={{ backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0", color: "#475569" }}>
-                            {(
-                                [
-                                    ["id", labels.common.id],
-                                    ["displayName", labels.usersView.displayName],
-                                    ["email", labels.usersView.email],
-                                    ["isActive", labels.common.status],
-                                ] as const
-                            ).map(([column, heading]) => (
-                                <th key={column} scope="col" style={{ padding: 0 }} aria-sort={sort.column === column ? (sort.ascending ? "ascending" : "descending") : "none"}>
-                                    <button
-                                        type="button"
-                                        data-testid={`users-sort-${column}`}
-                                        onClick={() => toggleSort(column)}
-                                        // 向きを名前に含める。含めないと、押しても押し返しても同じ
-                                        // 「Sort by 名前」としか読まれず、今どちらなのか判らない
-                                        aria-label={fill(sort.column === column ? (sort.ascending ? labels.usersView.sortedAscending : labels.usersView.sortedDescending) : labels.usersView.sortBy, { column: heading })}
-                                        style={{ width: "100%", padding: "10px 14px", textAlign: "left", background: "transparent", border: "none", cursor: "pointer", font: "inherit", color: "inherit", fontWeight: sort.column === column ? 700 : 500 }}>
-                                        {heading}
-                                        {/* 向きは記号だけに頼らない。読み上げは aria-sort が担う */}
-                                        {/* 使っていない列に ▲ を薄く出すと「昇順で並んでいる」と読めてしまう。
-                                            並べ替えていない列は向きを持たない記号を出す */}
-                                        <span aria-hidden="true" style={{ marginLeft: "4px", opacity: sort.column === column ? 1 : 0.35 }}>
-                                            {sort.column === column ? (sort.ascending ? "▲" : "▼") : "⇅"}
-                                        </span>
-                                    </button>
-                                </th>
-                            ))}
-                            <th scope="col" style={{ padding: "10px 14px", textAlign: "right" }}>
-                                {labels.common.actions}
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {filteredUsers.map((u) => (
-                            <tr key={u.id} style={{ borderBottom: "1px solid #f1f5f9" }} data-testid={`user-row-${u.id}`}>
-                                <td style={{ padding: "10px 14px", color: "#475569" }}>{fill(labels.common.idTemplate, { id: u.id })}</td>
-                                <td style={{ padding: "10px 14px", fontWeight: 600, color: "#0f172a" }}>{u.displayName}</td>
-                                <td style={{ padding: "10px 14px", color: "#475569" }}>{u.email}</td>
-                                <td style={{ padding: "10px 14px" }}>
-                                    <span style={{ fontSize: "0.75rem", padding: "2px 8px", borderRadius: "10px", backgroundColor: u.isActive ? "#dcfce7" : "#fee2e2", color: u.isActive ? "#15803d" : "#b91c1c", fontWeight: 600 }}>
-                                        {u.isActive ? labels.usersView.active : labels.usersView.inactive}
-                                    </span>
-                                </td>
-                                <td style={{ padding: "10px 14px", textAlign: "right" }}>
-                                    <button
-                                        type="button"
-                                        onClick={(event) => openModal({ kind: "edit", user: u }, event)}
-                                        aria-label={fill(labels.usersView.editUserAria, { user: u.displayName })}
-                                        data-testid={`edit-user-btn-${u.id}`}
-                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.78rem", cursor: "pointer", marginRight: "6px" }}>
-                                        {labels.common.edit}
-                                    </button>
-                                    <button
-                                        type="button"
-                                        onClick={() => handleToggleActive(u)}
-                                        {...rowActionProps(busy)}
-                                        aria-label={fill(u.isActive ? labels.usersView.deactivateAria : labels.usersView.activateAria, { user: u.displayName })}
-                                        data-testid={`toggle-user-btn-${u.id}`}
-                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.78rem", cursor: busy ? "default" : "pointer", color: u.isActive ? "#b91c1c" : "#15803d" }}>
-                                        {u.isActive ? labels.usersView.deactivate : labels.usersView.activate}
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                        {filteredUsers.length === 0 && (
-                            <tr>
-                                <td colSpan={5} style={{ padding: "2rem", textAlign: "center", color: "#475569" }}>
-                                    {/* 「検索で 0 件」と「そもそも登録が無い」は別の事態である。同じ文言に
-                                        すると、新規テナントを開いた運用者は一覧が壊れていると読む */}
-                                    {userNeedle === "" ? labels.usersView.empty : labels.usersView.emptyFiltered}
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-
-            {/* Create Modal */}
-            {isCreateOpen && (
-                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }}>
-                    <form
-                        ref={createUserRef}
-                        onSubmit={handleCreateUser}
-                        role="dialog"
-                        aria-modal="true"
-                        aria-labelledby="create-user-title"
-                        {...(hasError(actionResult) ? { "aria-describedby": "create-user-error" } : {})}
-                        data-testid="user-create-modal"
-                        style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
-                        <h3 id="create-user-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
-                            {labels.usersView.addUser}
-                        </h3>
-                        <ActionError result={actionResult} id="create-user-error" />
-                        <div style={{ marginBottom: "1rem" }}>
-                            <label htmlFor="create-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.usersView.displayName}
-                            </label>
-                            <input
-                                id="create-user-display-name-input"
-                                type="text"
-                                value={newDisplayName}
-                                onChange={(e) => setNewDisplayName(e.target.value)}
-                                required
-                                data-testid="create-user-display-name"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: "1.2rem" }}>
-                            <label htmlFor="create-user-email-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.usersView.email}
-                            </label>
-                            <input
-                                id="create-user-email-input"
-                                type="email"
-                                value={newEmail}
-                                onChange={(e) => setNewEmail(e.target.value)}
-                                required
-                                data-testid="create-user-email"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setModal(null)} data-testid="cancel-create-user" style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                {labels.common.cancel}
-                            </button>
-                            <button type="submit" data-testid="submit-create-user" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
-                                {labels.common.create}
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            )}
-
-            {/* Edit Modal */}
-            {editingUser && (
-                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }}>
-                    <form
-                        ref={editUserRef}
-                        onSubmit={handleUpdateUser}
-                        role="dialog"
-                        aria-modal="true"
-                        aria-labelledby="edit-user-title"
-                        {...(hasError(actionResult) ? { "aria-describedby": "edit-user-error" } : {})}
-                        data-testid="user-edit-modal"
-                        style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
-                        <h3 id="edit-user-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
-                            {labels.usersView.editUser}
-                        </h3>
-                        <ActionError result={actionResult} id="edit-user-error" />
-                        <div style={{ marginBottom: "1rem" }}>
-                            <label htmlFor="edit-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.usersView.displayName}
-                            </label>
-                            <input
-                                id="edit-user-display-name-input"
-                                type="text"
-                                value={editingUser.displayName}
-                                onChange={(e) => setModal({ kind: "edit", user: { ...editingUser, displayName: e.target.value } })}
-                                required
-                                data-testid="edit-user-display-name"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: "1.2rem" }}>
-                            <label htmlFor="edit-user-email-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.usersView.email}
-                            </label>
-                            <input
-                                id="edit-user-email-input"
-                                type="email"
-                                value={editingUser.email}
-                                onChange={(e) => setModal({ kind: "edit", user: { ...editingUser, email: e.target.value } })}
-                                required
-                                data-testid="edit-user-email"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setModal(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                {labels.common.cancel}
-                            </button>
-                            <button type="submit" data-testid="submit-edit-user" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
-                                {labels.common.save}
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            )}
-        </section>
-    )
-}
-
-/**
- * View for managing user groups (create, edit, delete).
- * ユーザーグループ管理ビュー (作成・編集・削除)。
- */
-export function GroupsView() {
-    const data = useLoaderData() as UserAdminLoaderData
-    const fetcher = useFetcher()
-    const { submit: submitThen, resetResult, result: actionResult } = useSubmitThen(fetcher)
-    const labels = data.labels ?? defaultUserAdminLabels
-    const syncRequestNotice = syncRequestNoticeOf(actionResult, labels)
-
-    const [searchQuery, setSearchQuery] = useState("")
-    const [modal, setModal] = useState<{ kind: "create" } | { kind: "edit"; group: AuthGroup } | null>(null)
-    const editingGroup = modal?.kind === "edit" ? modal.group : null
-    const isCreateOpen = modal?.kind === "create"
-    const openerRef = useRef<HTMLElement | null>(null)
-    /** ダイアログを開く。直前の操作の結果と入力を持ち越さない。 */
-    const openModal = (next: { kind: "create" } | { kind: "edit"; group: AuthGroup }, event: React.MouseEvent<HTMLElement>) => {
-        openerRef.current = event.currentTarget
-        resetResult()
-        // 前回の入力を残すと、上流から作った直後に開いた作成欄が別グループの名前で埋まっている。
-        // 「連携済みなのに、もう 1 つ作ろうとしている」ように見え、取り違えたまま送られる
-        if (next.kind === "create") resetCreateFields()
-        setModal(next)
-    }
-
-    const busy = fetcher.state !== "idle"
-    const [newGroupKey, setNewGroupKey] = useState("")
-    const [newName, setNewName] = useState("")
-    const [newDescription, setNewDescription] = useState("")
-    // 上流から作る経路は、候補一覧が引けているときだけ選べる
-    const [createMode, setCreateMode] = useState<"local" | "upstream">("local")
-    /**
-     * 焦点が当たっている作成経路。
-     *
-     * ⚠️ ラジオ群の実体は視覚的に隠してある (装飾はラベル側の押しボタン風の見た目)。隠した入力へ
-     * 焦点が来ると、ブラウザは 1px の箱に焦点環を描き、操作者からは「どこにも焦点が無い」ように
-     * 見える。インラインの style では `:focus-within` を書けないため、焦点の在処を状態で持って
-     * ラベルへ環を描く
-     */
-    const [focusedMode, setFocusedMode] = useState<"local" | "upstream" | null>(null)
-    const [upstream, setUpstream] = useState<UserAdminCatalogGroup | null>(null)
-    const [membershipMode, setMembershipMode] = useState<AuthDirectoryMembershipMode>("direct")
-    /**
-     * 上流から埋めた 3 欄の控え。ローカルへ戻すときに「こちらが埋めた分だけ」を消すために持つ。
-     * 一律に消すと、先に手で打った内容まで失う
-     */
-    const prefilled = useRef<{ key: string; name: string; description: string } | null>(null)
-    // ⚠️ 候補の作り直しは描画ごとに行わない。新しい配列を毎回渡すと、選択欄は同一性で
-    // 記憶しているため、**無関係な欄の 1 打鍵ごとに候補全件を再正規化し、あいまい検索の
-    // 索引まで組み直す**。候補 4000 件で 1 打鍵 22ms を実測した (実ブラウザではさらに重い)
-    // ⚠️ 所属件数はグループごとに数え直さない。カード 1 枚ごとに所属配列を全走査すると
-    // O(グループ数 × 所属数) になり、検索欄の 1 打鍵ごとにそれを繰り返す。1 回だけ畳んでおく
-    const memberCountByGroup = useMemo(() => {
-        const counts = new Map<number, number>()
-        for (const m of data.groupMembers) counts.set(m.groupId, (counts.get(m.groupId) ?? 0) + 1)
-        return counts
-    }, [data.groupMembers])
-    const linkedTo = useMemo(() => upstreamIndex(data.groups), [data.groups])
-    const options = useMemo(() => upstreamOptions(data.catalog, linkedTo, labels), [data.catalog, linkedTo, labels])
-    // ⚠️ 判定に使うのは **選べる候補の数** である。行数で判定すると、全件が連携済みの配備で
-    // 「すべて選べない選択欄」と「押せない作成ボタン」を出し、hint は「まず候補を選べ」と
-    // 言う — 従いようのない指示になる
-    const selectableUpstreamCount = useMemo(() => options.filter((o) => o.disabled !== true).length, [options])
-    // 候補が引けても、この配備がどのプロバイダとして連携するかが決まっていなければ連携は作れない。
-    // 送れば `provider: ""` の行が残り、同期ジョブは「別プロバイダ」として恒久的に無視する
-    // ⚠️ 候補が 0 件の一覧で経路を出すと、選べない選択欄と押せない作成ボタンという終端へ導く。
-    // 「読めたが 1 件も無い」は上流側の話であり、この面で解決できることは何も無い
-    const upstreamPickable = data.catalog.kind === "ready" && data.catalog.groups.length > 0 && data.directoryStatus.provider !== ""
-    const createGroupRef = useModalBehavior(isCreateOpen, () => setModal(null), openerRef)
-    const editGroupRef = useModalBehavior(editingGroup !== null, () => setModal(null), openerRef)
-
-    const groupNeedle = searchQuery.trim().toLowerCase()
-    const filteredGroups = data.groups.filter((g) => g.name.toLowerCase().includes(groupNeedle) || g.groupKey.toLowerCase().includes(groupNeedle))
-
-    /** 作成欄をすべて初期状態へ戻す。 */
-    const resetCreateFields = () => {
-        setNewGroupKey("")
-        setNewName("")
-        setNewDescription("")
-        setCreateMode("local")
-        setUpstream(null)
-        setMembershipMode("direct")
-        prefilled.current = null
-    }
-
-    const handleCreateGroup = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!(newGroupKey && newName)) return
-        if (createMode === "upstream" && upstream === null) return
-        // 連携付きで作ると、名前・説明・メンバー・削除のすべてが上流の管理下へ移る。取り消すには
-        // 連携解除という別の操作が要るため、押した先が戻れない操作であることを先に伝える
-        if (createMode === "upstream" && upstream !== null && !window.confirm(fill(labels.groupsView.confirmCreateLinked, { group: newName, upstream: upstream.externalKey }))) return
-        // 送信した値と今の値が違うなら、往復の間に打ち込まれたものである。消してはならない
-        const sent = { key: newGroupKey, name: newName, description: newDescription }
-        const clear = () => {
-            setNewGroupKey((current) => (current === sent.key ? "" : current))
-            setNewName((current) => (current === sent.name ? "" : current))
-            setNewDescription((current) => (current === sent.description ? "" : current))
-            setUpstream(null)
-            setModal(null)
-        }
-        if (createMode === "upstream" && upstream !== null) {
-            // 作成と連携は 1 つの intent で行う。2 回に分けると、片方だけ成功した状態が生まれる
-            submitThen({ intent: "createLinkedGroup", groupKey: sent.key, name: sent.name, description: sent.description, provider: data.directoryStatus.provider, externalKey: upstream.externalKey, membershipMode }, clear)
-            return
-        }
-        submitThen({ intent: "createGroup", groupKey: sent.key, name: sent.name, description: sent.description }, clear)
-    }
-
-    /** 上流グループを選んだら、名前と鍵の初期値を埋める (打ち直しの手間を省く)。 */
-    const chooseUpstream = (entry: UserAdminCatalogGroup | null) => {
-        setUpstream(entry)
-        if (!entry) return
-        const filled = { key: groupKeyFromUpstream(entry.externalKey), name: entry.name, description: entry.description ?? "" }
-        setNewName(filled.name)
-        setNewGroupKey(filled.key)
-        setNewDescription(filled.description)
-        prefilled.current = filled
-    }
-
-    /**
-     * 作成の経路を切り替える。ローカルへ戻すときは、上流から埋めた欄だけを空へ戻す。
-     *
-     * 残すと、ローカル作成のはずが上流グループの名前と説明で作られる。一律に消すと、先に
-     * 手で打った内容まで失う
-     */
-    const switchCreateMode = (mode: "local" | "upstream") => {
-        setCreateMode(mode)
-        if (mode === "upstream") return
-        setUpstream(null)
-        const filled = prefilled.current
-        if (!filled) return
-        setNewGroupKey((current) => (current === filled.key ? "" : current))
-        setNewName((current) => (current === filled.name ? "" : current))
-        setNewDescription((current) => (current === filled.description ? "" : current))
-        prefilled.current = null
-    }
-
-    const handleUpdateGroup = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!editingGroup) return
-        submitThen({ intent: "updateGroup", groupId: String(editingGroup.id), name: editingGroup.name, description: editingGroup.description ?? "" }, () => setModal(null))
-    }
-
-    const handleDeleteGroup = (group: AuthGroup) => {
-        // ⚠️ `aria-disabled` は焦点を残すために `disabled` の代わりに使っている。押せてしまう
-        // ぶん、実際に断るのはここである
-        if (busy) return
-        // ⚠️ 名前も失うものも述べる。この面で最も破壊的な操作でありながら、確認が最も薄かった。
-        // 一覧の中から誤って隣のカードを押しても、対話の中に気付ける手がかりが無かった
-        const memberCount = data.groupMembers.filter((m) => m.groupId === group.id).length
-        if (!window.confirm(fill(labels.groupsView.confirmDelete, { group: group.name, count: memberCount }))) return
-        submitThen({ intent: "deleteGroup", groupId: String(group.id) })
-    }
-
-    return (
-        <section data-testid="groups-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <h2 style={heading}>{labels.groupsView.title}</h2>
-            {!modal && <ActionError result={actionResult} />}
-            {/* ⚠️ ライブリージョンは **常に置いておき、中身だけ入れ替える** (連携面と同じ理由)。
-                上流から作った直後に要求が積めなかったことを、閉じた対話の外で伝える唯一の場所 */}
-            <p
-                data-testid="groups-sync-request-notice"
-                role="status"
-                aria-live="polite"
-                hidden={syncRequestNotice === null}
-                style={syncRequestNotice === null ? undefined : { margin: 0, padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#fffbeb", border: "1px solid #fde68a", color: "#92400e", fontSize: "0.8rem" }}>
-                {syncRequestNotice}
-            </p>
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                <input
-                    type="text"
-                    aria-label={labels.groupsView.searchLabel}
-                    placeholder={labels.groupsView.searchPlaceholder}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    data-testid="groups-search-input"
-                    style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
-                />
-                <button
-                    type="button"
-                    onClick={(event) => openModal({ kind: "create" }, event)}
-                    data-testid="groups-add-button"
-                    style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
-                    {labels.groupsView.addGroup}
-                </button>
-            </div>
-
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>
-                {filteredGroups.map((g) => {
-                    const memberCount = memberCountByGroup.get(g.id) ?? 0
-                    return (
-                        <div
-                            key={g.id}
-                            style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", padding: "1rem", display: "flex", flexDirection: "column", justifyContent: "space-between" }}
-                            data-testid={`group-card-${g.id}`}
-                            data-group-readonly={g.readOnly ? "true" : "false"}>
-                            <div>
-                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
-                                    <h3 style={{ margin: 0, fontSize: "1rem", color: "#0f172a" }}>{g.name}</h3>
-                                    <span style={{ fontSize: "0.72rem", backgroundColor: "#e0e7ff", color: "#4338ca", padding: "2px 6px", borderRadius: "4px", fontFamily: "monospace" }}>{g.groupKey}</span>
-                                </div>
-                                <p style={{ margin: "0 0 0.8rem 0", fontSize: "0.82rem", color: "#64748b", minHeight: "2.4em" }}>{g.description || labels.groupsView.noDescription}</p>
-                                {/* 所属も名称も上流が所有していることを、操作を試す前に伝える */}
-                                {g.externalLink && (
-                                    <div data-testid={`group-source-${g.id}`} style={{ display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap", marginBottom: "0.6rem" }}>
-                                        <span style={{ fontSize: "0.72rem", padding: "2px 8px", borderRadius: "10px", backgroundColor: "#ede9fe", color: "#6d28d9", fontWeight: 600 }}>{labels.common.managedUpstream}</span>
-                                        <span style={{ fontSize: "0.72rem", fontFamily: "monospace", color: "#64748b" }}>{g.externalLink.externalKey}</span>
-                                        {g.externalLink.unresolvedCount > 0 && (
-                                            <span data-testid={`group-unresolved-${g.id}`} style={{ fontSize: "0.72rem", color: "#b45309" }}>
-                                                {fill(labels.directoryView.unresolvedTemplate, { count: g.externalLink.unresolvedCount })}
-                                            </span>
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid #f1f5f9", paddingTop: "0.6rem" }}>
-                                <Link to={`/users/group_members?group=${g.id}`} data-testid={`group-open-members-${g.id}`} aria-label={fill(labels.groupsView.openMembersAria, { group: g.name })} style={{ fontSize: "0.78rem", color: "#1d4ed8", textDecoration: "none" }}>
-                                    {fill(labels.groupsView.memberCountTemplate, { count: memberCount })}
-                                </Link>
-                                {/* 上流が所有する行では操作を **描かない**。無効化したボタンを出すと、
-                                    押せる操作と見分けがつかず、押せない理由も伝わらない */}
-                                {g.readOnly ? (
-                                    <span data-testid={`readonly-group-${g.id}`} style={{ fontSize: "0.75rem", color: "#475569" }}>
-                                        {labels.common.readOnly}
-                                    </span>
-                                ) : (
-                                    <div>
-                                        <button
-                                            type="button"
-                                            onClick={(event) => openModal({ kind: "edit", group: g }, event)}
-                                            {...rowActionProps(busy)}
-                                            aria-label={fill(labels.groupsView.editGroupAria, { group: g.name })}
-                                            data-testid={`edit-group-btn-${g.id}`}
-                                            style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.75rem", cursor: "pointer", marginRight: "4px" }}>
-                                            {labels.common.edit}
-                                        </button>
-                                        <button
-                                            type="button"
-                                            onClick={() => handleDeleteGroup(g)}
-                                            {...rowActionProps(busy)}
-                                            aria-label={fill(labels.groupsView.deleteGroupAria, { group: g.name })}
-                                            data-testid={`delete-group-btn-${g.id}`}
-                                            style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #fee2e2", backgroundColor: "#fff5f5", color: "#b91c1c", fontSize: "0.75rem", cursor: "pointer" }}>
-                                            {labels.common.delete}
-                                        </button>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    )
-                })}
-            </div>
-            {filteredGroups.length === 0 && (
-                <div data-testid="groups-empty" style={{ padding: "2rem", textAlign: "center", color: "#475569", backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                    {data.groups.length === 0 ? labels.groupsView.empty : labels.groupsView.emptyFiltered}
-                </div>
-            )}
-
-            {/* Create Group Modal */}
-            {isCreateOpen && (
-                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }}>
-                    <form
-                        ref={createGroupRef}
-                        onSubmit={handleCreateGroup}
-                        role="dialog"
-                        aria-modal="true"
-                        aria-labelledby="create-group-title"
-                        {...(hasError(actionResult) ? { "aria-describedby": "create-group-error" } : {})}
-                        data-testid="group-create-modal"
-                        style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
-                        <h3 id="create-group-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
-                            {labels.groupsView.addGroup}
-                        </h3>
-                        <ActionError result={actionResult} id="create-group-error" />
-
-                        {/* 上流から作る経路は候補一覧が在るときだけ提示する。出しておいて押せない
-                            切替は、機能が壊れているのと見分けが付かない */}
-                        {upstreamPickable && (
-                            <fieldset data-testid="create-group-mode" style={{ display: "flex", gap: "0.25rem", marginBottom: "1rem", border: "none", padding: 0, margin: "0 0 1rem 0" }}>
-                                {/* ⚠️ 本物のラジオ群である。同じ `name` を持つ入力にはブラウザが矢印キー移動と
-                                    「選択中の 1 つだけが Tab の停止点」を無償で与える。押しボタンに
-                                    `role="radio"` を被せると、その両方を手で書き直すことになる */}
-                                <legend style={visuallyHidden}>{labels.groupsView.createModeLabel}</legend>
-                                {(["local", "upstream"] as const).map((mode) => (
-                                    <label
-                                        key={mode}
-                                        data-aqar-create-mode={mode}
-                                        data-selected={createMode === mode ? "" : undefined}
-                                        data-focused={focusedMode === mode ? "" : undefined}
-                                        style={{
-                                            outline: focusedMode === mode ? "2px solid #4338ca" : undefined,
-                                            outlineOffset: "2px",
-                                            flex: 1,
-                                            padding: "0.4rem 0.6rem",
-                                            fontSize: "0.8rem",
-                                            borderRadius: "6px",
-                                            cursor: "pointer",
-                                            textAlign: "center",
-                                            border: createMode === mode ? "1px solid #4338ca" : "1px solid #cbd5e1",
-                                            backgroundColor: createMode === mode ? "#eef2ff" : "#ffffff",
-                                            color: createMode === mode ? "#3730a3" : "#475569",
-                                            fontWeight: createMode === mode ? 700 : 500,
-                                        }}>
-                                        <input
-                                            type="radio"
-                                            name="create-group-mode"
-                                            value={mode}
-                                            checked={createMode === mode}
-                                            onChange={() => switchCreateMode(mode)}
-                                            data-testid={`create-group-mode-${mode}`}
-                                            data-aqar-visually-hidden
-                                            onFocus={() => setFocusedMode(mode)}
-                                            onBlur={() => setFocusedMode((current) => (current === mode ? null : current))}
-                                            style={visuallyHidden}
-                                        />
-                                        {mode === "local" ? labels.groupsView.createModeLocal : labels.groupsView.createModeUpstream}
-                                    </label>
-                                ))}
-                            </fieldset>
-                        )}
-
-                        {data.catalog.kind === "ready" && data.catalog.groups.length === 0 && (
-                            <p data-testid="create-group-catalog-empty" role="note" style={{ margin: "0 0 1rem 0", padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#f8fafc", border: "1px solid #e2e8f0", color: "#475569", fontSize: "0.78rem" }}>
-                                {fill(labels.groupsView.catalogEmpty, { at: formatDateTime(data.catalog.observedAt ?? "", labels) })}
-                            </p>
-                        )}
-
-                        {data.catalog.kind === "ready" && data.catalog.groups.length > 0 && data.directoryStatus.provider === "" && (
-                            <p data-testid="create-group-provider-unset" role="note" style={{ margin: "0 0 1rem 0", padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#fffbeb", border: "1px solid #fde68a", color: "#92400e", fontSize: "0.78rem" }}>
-                                {labels.groupsView.providerUnset}
-                            </p>
-                        )}
-
-                        {data.catalog.kind === "unavailable" && (
-                            <p data-testid="create-group-catalog-unavailable" role="note" style={{ margin: "0 0 1rem 0", padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#fffbeb", border: "1px solid #fde68a", color: "#92400e", fontSize: "0.78rem" }}>
-                                {/* ⚠️ この対話には上流アドレスの欄が無い (一覧が引けないと経路ごと消える)。
-                                    「手入力してください」と案内すると、存在しない欄を探させることになる */}
-                                {fill(labels.groupsView.catalogUnavailableHere, { reason: labels.groupsView.catalogFailures[data.catalog.reason] })}
-                            </p>
-                        )}
-
-                        {createMode === "upstream" && upstreamPickable && data.catalog.kind === "ready" && (
-                            <div style={{ marginBottom: "1rem" }}>
-                                <p data-testid="create-group-upstream-notice" role="note" style={{ margin: "0 0 0.5rem 0", fontSize: "0.78rem", color: "#5b21b6" }}>
-                                    {labels.groupsView.createUpstreamNotice}
-                                </p>
-                                <div id="create-group-upstream-label" style={fieldLabel}>
-                                    {labels.groupsView.pickUpstream}
-                                </div>
-                                {/* ⚠️ 選択欄は行を選んでいない Enter を「フォームへ渡す」設計であり、
-                                    絞り込みを打った直後の Enter が **前回選んだ相手のまま** 送信になる。
-                                    送信先は取り消せない委譲であるため、ここで暗黙送信だけを止める */}
-                                {/* biome-ignore lint/a11y/noStaticElementInteractions: 子の暗黙送信を止めるためだけの捕捉であり、対話要素ではない */}
-                                <div
-                                    data-testid="create-group-upstream-picker"
-                                    onKeyDown={(event) => {
-                                        // ⚠️ 変換中の Enter には触れない。日本語 IME の確定は
-                                        // `keydown{key:"Enter", keyCode:229, isComposing:true}` として届き、
-                                        // ここで既定動作を止めると変換の確定そのものを潰し得る。
-                                        // 変換中はそもそも暗黙の送信は起きないので、止める意味も無い
-                                        if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return
-                                        if (event.key === "Enter") event.preventDefault()
-                                    }}>
-                                    <SelectBox
-                                        options={options}
-                                        value={upstream === null ? null : (options.find((o) => o.value === upstream.externalId) ?? null)}
-                                        onChange={(picked: Option | Option[] | null) => chooseUpstream(picked === null || Array.isArray(picked) ? null : ((picked as { entry?: UserAdminCatalogGroup }).entry ?? null))}
-                                        placeholder={labels.groupsView.pickUpstreamPlaceholder}
-                                        ariaLabelledBy="create-group-upstream-label"
-                                        renderOption={renderUpstreamOption}
-                                        texts={pickerTexts(labels)}
-                                        clearable
-                                    />
-                                </div>
-                                <CatalogFreshness observedAt={data.catalog.observedAt} isStale={data.catalog.isStale} labels={labels} />
-                                <div style={{ marginTop: "0.6rem" }}>
-                                    <label htmlFor="create-group-membership-mode" style={fieldLabel}>
-                                        {labels.directoryView.membershipMode}
-                                    </label>
-                                    <select
-                                        id="create-group-membership-mode"
-                                        data-testid="create-group-membership-mode"
-                                        value={membershipMode}
-                                        onChange={(e) => setMembershipMode(e.target.value as AuthDirectoryMembershipMode)}
-                                        style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}>
-                                        <option value="direct">{labels.directoryView.directMode}</option>
-                                        <option value="transitive">{labels.directoryView.transitiveMode}</option>
-                                    </select>
-                                </div>
-                            </div>
-                        )}
-
-                        <div style={{ marginBottom: "1rem" }}>
-                            <label htmlFor="create-group-key-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.groupsView.groupKey}
-                            </label>
-                            <input
-                                id="create-group-key-input"
-                                type="text"
-                                value={newGroupKey}
-                                onChange={(e) => setNewGroupKey(e.target.value)}
-                                placeholder={labels.groupsView.groupKeyPlaceholder}
-                                required
-                                data-testid="create-group-key"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: "1rem" }}>
-                            <label htmlFor="create-group-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.groupsView.name}
-                            </label>
-                            <input
-                                id="create-group-name-input"
-                                type="text"
-                                value={newName}
-                                onChange={(e) => setNewName(e.target.value)}
-                                placeholder={labels.groupsView.namePlaceholder}
-                                required
-                                data-testid="create-group-name"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: "1.2rem" }}>
-                            <label htmlFor="create-group-desc-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.groupsView.description}
-                            </label>
-                            <textarea
-                                id="create-group-desc-input"
-                                value={newDescription}
-                                onChange={(e) => setNewDescription(e.target.value)}
-                                data-testid="create-group-description"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box", height: "60px" }}
-                            />
-                        </div>
-                        {/* ⚠️ 押せない理由を `title` だけに置かない。無効化されたボタンは焦点を持てず、
-                            読み上げの要素移動でも飛ばされ、Safari では tooltip も出ない — つまり
-                            キーボード・読み上げ・多くのマウス操作者のいずれにも届かない */}
-                        {createMode === "upstream" && upstream === null && (
-                            <p id="create-group-submit-hint" data-testid="create-group-submit-hint" style={{ margin: "0 0 0.6rem 0", fontSize: "0.78rem", color: "#475569", textAlign: "right" }}>
-                                {/* ⚠️ 選べる候補が 1 件も無いときに「先に選べ」と言ってはならない。
-                                    従いようのない指示であり、操作者は自分の見落としを探し続ける。
-                                    候補は隠さない (どれが既に繋がっているのかを見せる価値は残る) */}
-                                {selectableUpstreamCount > 0 ? labels.groupsView.pickUpstreamFirst : labels.groupsView.allUpstreamLinked}
-                            </p>
-                        )}
-                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setModal(null)} data-testid="cancel-create-group" style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                {labels.common.cancel}
-                            </button>
-                            <button
-                                type="submit"
-                                data-testid="submit-create-group"
-                                // 上流モードで候補が空のまま押せると、送信は黙って捨てられる。押せない理由を
-                                // 見せる方が、無反応なボタンより短く伝わる
-                                disabled={busy || (createMode === "upstream" && upstream === null)}
-                                aria-busy={busy}
-                                {...(createMode === "upstream" && upstream === null ? { "aria-describedby": "create-group-submit-hint" } : {})}
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: "4px",
-                                    backgroundColor: busy || (createMode === "upstream" && upstream === null) ? "#a5b4fc" : "#4338ca",
-                                    color: "#ffffff",
-                                    border: "none",
-                                    cursor: busy || (createMode === "upstream" && upstream === null) ? "not-allowed" : "pointer",
-                                }}>
-                                {labels.common.create}
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            )}
-
-            {/* Edit Group Modal */}
-            {editingGroup && (
-                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }}>
-                    <form
-                        ref={editGroupRef}
-                        onSubmit={handleUpdateGroup}
-                        role="dialog"
-                        aria-modal="true"
-                        aria-labelledby="edit-group-title"
-                        {...(hasError(actionResult) ? { "aria-describedby": "edit-group-error" } : {})}
-                        data-testid="group-edit-modal"
-                        style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
-                        <h3 id="edit-group-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
-                            {labels.groupsView.editGroup}
-                        </h3>
-                        <ActionError result={actionResult} id="edit-group-error" />
-                        <div style={{ marginBottom: "1rem" }}>
-                            <label htmlFor="edit-group-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.groupsView.name}
-                            </label>
-                            <input
-                                id="edit-group-name-input"
-                                type="text"
-                                value={editingGroup.name}
-                                onChange={(e) => setModal({ kind: "edit", group: { ...editingGroup, name: e.target.value } })}
-                                required
-                                data-testid="edit-group-name"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: "1.2rem" }}>
-                            <label htmlFor="edit-group-desc-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
-                                {labels.groupsView.description}
-                            </label>
-                            <textarea
-                                id="edit-group-desc-input"
-                                value={editingGroup.description ?? ""}
-                                onChange={(e) => setModal({ kind: "edit", group: { ...editingGroup, description: e.target.value } })}
-                                data-testid="edit-group-description"
-                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box", height: "60px" }}
-                            />
-                        </div>
-                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setModal(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                {labels.common.cancel}
-                            </button>
-                            <button type="submit" data-testid="submit-edit-group" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
-                                {labels.common.save}
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            )}
-        </section>
-    )
-}
-
-/**
- * View for managing group member assignments.
- * グループメンバー割り当て管理ビュー。
- */
-export function GroupMembersView() {
-    const data = useLoaderData() as UserAdminLoaderData
-    const fetcher = useFetcher()
-    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
-    const busy = fetcher.state !== "idle"
-    const labels = data.labels ?? defaultUserAdminLabels
-
-    // 遷移元がグループを指定していればそれを選ぶ (グループ一覧から 1 クリックで来られるように)
-    const [searchParams] = useSearchParams()
-    const requested = Number(searchParams.get("group") ?? "")
-    const deepLinked = Number.isInteger(requested) && requested > 0 ? requested : null
-    const [picked, setPicked] = useState<number | null>(null)
-    /**
-     * 「所属のみ」表示中に、この画面で外した人。
-     *
-     * ⚠️ 外した行をその場で消すと、下の行が **カーソルの下へせり上がる**。上から順に外していく
-     * のは所属を整理する自然な手順であり、往復のたびに次の「外す」ボタンが今いる位置へ来る。
-     * 確認も無いため、普通の速さで押している運用者が意図しない人を外す
-     */
-    const [justRemoved, setJustRemoved] = useState<ReadonlySet<number>>(new Set())
-    /**
-     * 深いリンクが指す先が変わったら、その指定に従う。
-     *
-     * ⚠️ 初期値としてだけ読むと、同じ面に居るまま `?group=` が変わっても (グループ面の各カードから
-     * 続けて飛んだ場合) 選択が動かず、開いている面と URL が食い違う
-     */
-    const lastDeepLink = useRef<number | null>(deepLinked)
-    if (lastDeepLink.current !== deepLinked) {
-        lastDeepLink.current = deepLinked
-        if (deepLinked !== null) {
-            setPicked(deepLinked)
-            // 別のグループの「外したばかり」を持ち越さない (押しボタン経由と同じ扱い)
-            setJustRemoved(new Set())
-        }
-    }
-
-    const [memberQuery, setMemberQuery] = useState("")
-    const [onlyMembers, setOnlyMembers] = useState(false)
-
-    // 再検証で対象が消えることがある。消えた ID を握り続けると空の面になる
-    const requestedGroupId = picked ?? deepLinked ?? data.groups[0]?.id ?? null
-    const currentGroup = data.groups.find((g) => g.id === requestedGroupId) ?? data.groups[0]
-    /**
-     * 頼んだ相手と、実際に出ている相手が違うときの、頼んだ側の ID。
-     *
-     * ⚠️ 判定は「**頼んだ相手が出ているか**」で行う。「深いリンクで来て、まだ一度も選んでいない」
-     * ことを条件にすると、一度でも一覧から選んだ後は永久に黙る — そして代替が出る場面の大半は
-     * そちらである。**別の運用者が今開いているグループを消した** ときがそれで、画面の見出しだけが
-     * 入れ替わり、続けて押した「除外」は選んだ覚えのないグループへ書かれる。書込先を画面に
-     * 合わせてある (下の `handleToggleMember`) ことが、この沈黙を余計に危うくする
-     */
-    const missedTarget = requestedGroupId !== null && currentGroup !== undefined && currentGroup.id !== requestedGroupId ? requestedGroupId : null
-    const currentMemberUserIds = new Set(data.groupMembers.filter((m) => m.groupId === currentGroup?.id).map((m) => m.userId))
-    // 数百人の一覧を目で追わせない。名前と Email の両方を対象にする
-    const needle = memberQuery.trim().toLowerCase()
-    const visibleUsers = data.users.filter((u) => {
-        // この画面で外した人は残す (行が消えると、下の行がカーソルの下へせり上がる)
-        if (onlyMembers && !currentMemberUserIds.has(u.id) && !justRemoved.has(u.id)) return false
-        if (needle === "") return true
-        return u.displayName.toLowerCase().includes(needle) || u.email.toLowerCase().includes(needle)
-    })
-
-    const handleToggleMember = (userId: number, isMember: boolean) => {
-        // ⚠️ `aria-disabled` は焦点を残すために `disabled` の代わりに使っている。押せてしまう
-        // ぶん、実際に断るのはここである
-        if (busy) return
-        // ⚠️ 書き込む先は **画面に出ているグループ** でなければならない。選択 ID をそのまま送ると、
-        // 再検証で対象が消えて代替が表示されている間に、見えていない別グループを書き換える
-        if (!currentGroup) return
-        const groupId = String(currentGroup.id)
-        if (isMember) {
-            setJustRemoved((current) => new Set(current).add(userId))
-            submitThen({ intent: "removeGroupMember", groupId, userId: String(userId) })
-        } else {
-            setJustRemoved((current) => {
-                if (!current.has(userId)) return current
-                const next = new Set(current)
-                next.delete(userId)
-                return next
-            })
-            submitThen({ intent: "addGroupMember", groupId, userId: String(userId) })
-        }
-    }
-
-    return (
-        <section data-testid="group-members-view-section" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: "1.2rem" }}>
-            <h2 style={{ ...heading, gridColumn: "1 / -1" }}>{labels.groupMembersView.title}</h2>
-            <ActionError result={actionResult} />
-            {missedTarget !== null && (
-                <p data-testid="member-deep-link-missed" role="note" style={{ gridColumn: "1 / -1", margin: 0, padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#fffbeb", border: "1px solid #fde68a", color: "#92400e", fontSize: "0.8rem" }}>
-                    {fill(labels.groupMembersView.deepLinkMissed, { id: missedTarget, group: currentGroup?.name ?? "" })}
-                </p>
-            )}
-            <div style={{ backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                <h3 style={{ margin: "0 0 0.8rem 0", fontSize: "0.9rem", color: "#475569" }}>{labels.groupMembersView.selectGroup}</h3>
-                <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
-                    {data.groups.map((g) => {
-                        const isSelected = g.id === currentGroup?.id
-                        return (
-                            <button
-                                type="button"
-                                key={g.id}
-                                onClick={() => {
-                                    setPicked(g.id)
-                                    // 別のグループの「外したばかり」を持ち越さない
-                                    setJustRemoved(new Set())
-                                }}
-                                data-testid={`select-group-btn-${g.id}`}
-                                style={{
-                                    textAlign: "left",
-                                    padding: "8px 10px",
-                                    borderRadius: "6px",
-                                    border: isSelected ? "1px solid #6366f1" : "1px solid #e2e8f0",
-                                    backgroundColor: isSelected ? "#e0e7ff" : "#ffffff",
-                                    color: isSelected ? "#3730a3" : "#0f172a",
-                                    cursor: "pointer",
-                                    fontWeight: isSelected ? 600 : 400,
-                                    fontSize: "0.85rem",
-                                }}>
-                                {g.name}
-                                {g.readOnly ? (
-                                    <span data-testid={`group-upstream-marker-${g.id}`} style={{ marginLeft: "6px", fontSize: "0.7rem", color: "#7c3aed" }}>
-                                        {labels.common.managedUpstream}
-                                    </span>
-                                ) : null}
-                            </button>
-                        )
-                    })}
-                </div>
-            </div>
-
-            <div style={{ backgroundColor: "#ffffff", padding: "1.2rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                {currentGroup ? (
-                    <>
-                        <div style={{ marginBottom: "1rem", borderBottom: "1px solid #e2e8f0", paddingBottom: "0.8rem" }}>
-                            <h3 style={{ margin: 0, fontSize: "1.1rem", color: "#0f172a" }}>{fill(labels.groupMembersView.membersOfTemplate, { group: currentGroup.name })}</h3>
-                            <span style={{ fontSize: "0.8rem", color: "#64748b" }}>
-                                {labels.groupMembersView.groupKeyLabel}: {currentGroup.groupKey}
-                            </span>
-                            {currentGroup.readOnly ? (
-                                <div data-testid="group-members-upstream-notice" role="note" style={{ marginTop: "0.5rem", padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#f5f3ff", border: "1px solid #ddd6fe", color: "#5b21b6", fontSize: "0.8rem" }}>
-                                    {labels.groupMembersView.upstreamNotice}
-                                </div>
-                            ) : null}
-                        </div>
-                        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap", marginBottom: "0.8rem" }}>
-                            <input
-                                type="search"
-                                aria-label={labels.groupMembersView.searchLabel}
-                                placeholder={labels.groupMembersView.searchPlaceholder}
-                                value={memberQuery}
-                                onChange={(e) => setMemberQuery(e.target.value)}
-                                data-testid="member-search-input"
-                                style={{ flex: 1, minWidth: "220px", padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem" }}
-                            />
-                            <label style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem", fontSize: "0.8rem", color: "#475569" }}>
-                                <input
-                                    type="checkbox"
-                                    data-testid="member-only-toggle"
-                                    checked={onlyMembers}
-                                    onChange={(e) => {
-                                        setOnlyMembers(e.target.checked)
-                                        // 絞り込みを掛け直したら、その時点の所属で数え直す。
-                                        // 残すと「外したはずの人が所属のみ表示に居る」状態が続く
-                                        setJustRemoved(new Set())
-                                    }}
-                                />
-                                {fill(labels.groupMembersView.onlyMembers, { count: currentMemberUserIds.size })}
-                            </label>
-                        </div>
-                        {/* 絞り込みの結果は視覚的にしか変わらない。読み上げへ届けるには live region が要る */}
-                        <p data-testid="member-summary" role="status" aria-live="polite" style={{ margin: "0 0 0.6rem 0", fontSize: "0.78rem", color: "#475569" }}>
-                            {fill(labels.groupMembersView.summary, { shown: visibleUsers.length, total: data.users.length, members: currentMemberUserIds.size })}
-                        </p>
-                        {visibleUsers.length === 0 && (
-                            <p data-testid="member-empty-filtered" style={{ margin: "0 0 0.6rem 0", fontSize: "0.85rem", color: "#475569" }}>
-                                {/* 効いている絞り込みを名指しする。打っていない検索のせいにしない。
-                                    そもそも利用者が 1 人も居ない配備を「検索で 0 件」と言わない */}
-                                {data.users.length === 0 ? labels.groupMembersView.noUsers : needle === "" && onlyMembers ? labels.groupMembersView.emptyNoMembers : labels.groupMembersView.emptyFiltered}
-                            </p>
-                        )}
-                        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
-                            {visibleUsers.map((u) => {
-                                const isMember = currentMemberUserIds.has(u.id)
-                                return (
-                                    <div
-                                        key={u.id}
-                                        style={{
-                                            display: "flex",
-                                            justifyContent: "space-between",
-                                            alignItems: "center",
-                                            padding: "8px 12px",
-                                            borderRadius: "6px",
-                                            border: "1px solid #f1f5f9",
-                                            backgroundColor: isMember ? "#f0fdf4" : "#ffffff",
-                                        }}
-                                        data-testid={`member-row-${u.id}`}>
-                                        <div>
-                                            <span style={{ fontWeight: 600, fontSize: "0.88rem", color: "#0f172a", marginRight: "8px" }}>{u.displayName}</span>
-                                            <span style={{ fontSize: "0.78rem", color: "#64748b" }}>({u.email})</span>
-                                        </div>
-                                        {currentGroup.readOnly ? (
-                                            isMember ? (
-                                                <span data-testid={`member-readonly-${u.id}`} style={{ fontSize: "0.75rem", color: "#475569" }}>
-                                                    {labels.common.managedUpstream}
-                                                </span>
-                                            ) : null
-                                        ) : (
-                                            <button
-                                                type="button"
-                                                onClick={() => handleToggleMember(u.id, isMember)}
-                                                {...rowActionProps(busy)}
-                                                aria-label={fill(isMember ? labels.groupMembersView.actionRemoveAria : labels.groupMembersView.actionAddAria, { user: u.displayName })}
-                                                data-testid={`toggle-member-btn-${u.id}`}
-                                                style={{
-                                                    padding: "4px 12px",
-                                                    borderRadius: "4px",
-                                                    border: isMember ? "1px solid #b91c1c" : "1px solid #0284c7",
-                                                    backgroundColor: isMember ? "#ffffff" : "#0284c7",
-                                                    color: isMember ? "#b91c1c" : "#ffffff",
-                                                    fontSize: "0.78rem",
-                                                    fontWeight: 600,
-                                                    cursor: "pointer",
-                                                }}>
-                                                {isMember ? labels.groupMembersView.actionRemove : labels.groupMembersView.actionAdd}
-                                            </button>
-                                        )}
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    </>
-                ) : (
-                    <div data-testid="member-no-groups" style={{ color: "#475569", textAlign: "center", padding: "2rem" }}>
-                        {/* 左の一覧が空なら「選べ」は従えない指示である。何が無いのかを言う */}
-                        {data.groups.length === 0 ? labels.groupMembersView.noGroups : labels.groupMembersView.selectPrompt}
-                    </div>
-                )}
-            </div>
-        </section>
-    )
-}
-
-/** Badge colours per allowlist kind. 許可種別ごとのバッジ配色。 */
-function allowlistBadgeStyle(type: AuthAllowlistEntry["type"]): { backgroundColor: string; color: string } {
-    if (type === "email") return { backgroundColor: "#e0f2fe", color: "#0369a1" }
-    if (type === "domain") return { backgroundColor: "#fef3c7", color: "#b45309" }
-    return { backgroundColor: "#ede9fe", color: "#6d28d9" }
-}
-
-/** Badge text per allowlist kind. 許可種別ごとのバッジ文言。 */
-function allowlistTypeLabel(type: AuthAllowlistEntry["type"], labels: UserAdminLabels): string {
-    if (type === "email") return labels.allowlistView.emailTypeShort
-    if (type === "domain") return labels.allowlistView.domainTypeShort
-    return labels.allowlistView.groupTypeShort
-}
-
-/**
- * View for managing authentication allowlist entries.
- * アクセス許可リスト (Allowlist) 管理ビュー。
- */
-export function AllowlistView() {
-    const data = useLoaderData() as UserAdminLoaderData
-    const fetcher = useFetcher()
-    const labels = data.labels ?? defaultUserAdminLabels
-
-    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
-    const busy = fetcher.state !== "idle"
-    const [pattern, setPattern] = useState("")
-    const [type, setType] = useState<"email" | "domain">("email")
-    const [description, setDescription] = useState("")
-
-    const handleAddEntry = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!pattern) return
-        const sent = { pattern, description }
-        submitThen({ intent: "addAllowlistEntry", pattern: sent.pattern, type, description: sent.description }, () => {
-            setPattern((current) => (current === sent.pattern ? "" : current))
-            setDescription((current) => (current === sent.description ? "" : current))
-        })
-    }
-
-    const handleRemoveEntry = (id: number) => {
-        submitThen({ intent: "removeAllowlistEntry", entryId: String(id) })
-    }
-
-    /** グループ許可は別の表に住むため、別の intent で消す。 */
-    const handleRemoveGroupEntry = (id: number) => {
-        submitThen({ intent: "removeAllowlistGroup", entryId: String(id) })
-    }
-
-    return (
-        <section data-testid="allowlist-view-section" style={{ display: "flex", flexDirection: "column", gap: "1.2rem" }}>
-            <h2 style={heading}>{labels.allowlistView.title}</h2>
-            <ActionError result={actionResult} />
-            <form onSubmit={handleAddEntry} style={{ backgroundColor: "#ffffff", padding: "1.2rem", borderRadius: "8px", border: "1px solid #e2e8f0", display: "flex", flexWrap: "wrap", gap: "0.8rem", alignItems: "flex-end" }}>
-                <div style={{ flex: 2, minWidth: "220px" }}>
-                    <label htmlFor="allowlist-pattern-input-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
-                        {labels.allowlistView.pattern}
-                    </label>
-                    <input
-                        id="allowlist-pattern-input-field"
-                        type="text"
-                        value={pattern}
-                        onChange={(e) => setPattern(e.target.value)}
-                        required
-                        data-testid="allowlist-pattern-input"
-                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}
-                    />
-                </div>
-                <div style={{ flex: 1, minWidth: "140px" }}>
-                    <label htmlFor="allowlist-type-select-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
-                        {labels.allowlistView.type}
-                    </label>
-                    <select
-                        id="allowlist-type-select-field"
-                        value={type}
-                        onChange={(e) => setType(e.target.value as "email" | "domain")}
-                        data-testid="allowlist-type-select"
-                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}>
-                        <option value="email">{labels.allowlistView.emailType}</option>
-                        <option value="domain">{labels.allowlistView.domainType}</option>
-                    </select>
-                </div>
-                <div style={{ flex: 2, minWidth: "200px" }}>
-                    <label htmlFor="allowlist-desc-input-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
-                        {labels.allowlistView.description}
-                    </label>
-                    <input
-                        id="allowlist-desc-input-field"
-                        type="text"
-                        value={description}
-                        onChange={(e) => setDescription(e.target.value)}
-                        data-testid="allowlist-desc-input"
-                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}
-                    />
-                </div>
-                <button type="submit" data-testid="submit-allowlist-add" disabled={busy} aria-busy={busy} style={{ padding: "7px 16px", borderRadius: "6px", backgroundColor: "#047857", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
-                    {labels.allowlistView.addEntry}
-                </button>
-            </form>
-
-            <div style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", overflow: "hidden" }}>
-                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.85rem", textAlign: "left" }}>
-                    <thead>
-                        <tr style={{ backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0", color: "#475569" }}>
-                            <th scope="col" style={{ padding: "10px 14px" }}>
-                                {labels.common.id}
-                            </th>
-                            <th scope="col" style={{ padding: "10px 14px" }}>
-                                {labels.allowlistView.target}
-                            </th>
-                            <th scope="col" style={{ padding: "10px 14px" }}>
-                                {labels.allowlistView.type}
-                            </th>
-                            <th scope="col" style={{ padding: "10px 14px" }}>
-                                {labels.allowlistView.description}
-                            </th>
-                            <th scope="col" style={{ padding: "10px 14px", textAlign: "right" }}>
-                                {labels.common.actions}
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {data.allowlist.map((item) => (
-                            <tr key={`${item.type}-${item.id}`} style={{ borderBottom: "1px solid #f1f5f9" }} data-testid={`allowlist-row-${item.type}-${item.id}`} data-allowlist-type={item.type}>
-                                <td style={{ padding: "10px 14px", color: "#475569" }}>{fill(labels.common.idTemplate, { id: item.id })}</td>
-                                <td style={{ padding: "10px 14px", fontWeight: 600, color: "#0f172a" }}>
-                                    {/* パターン許可とグループ許可では正準値が違う。グループはアドレスではなく
-                                        グループそのものが対象なので、名前とキーを見せる */}
-                                    {item.type === "group" ? (
-                                        <span data-testid={`allowlist-group-${item.type}-${item.id}`}>
-                                            {item.groupName}
-                                            <span style={{ marginLeft: "6px", fontFamily: "monospace", fontSize: "0.78rem", color: "#64748b" }}>{item.groupKey}</span>
-                                        </span>
-                                    ) : (
-                                        <span style={{ fontFamily: "monospace" }}>{item.pattern}</span>
-                                    )}
-                                </td>
-                                <td style={{ padding: "10px 14px" }}>
-                                    <span style={{ fontSize: "0.75rem", padding: "2px 8px", borderRadius: "10px", ...allowlistBadgeStyle(item.type), fontWeight: 600 }}>{allowlistTypeLabel(item.type, labels)}</span>
-                                </td>
-                                <td style={{ padding: "10px 14px", color: "#475569" }}>
-                                    {item.description || labels.common.none}
-                                    {/* 配備全体が所有する行は、どのテナントの管理者でも編集できない */}
-                                    {item.owner.kind === "deployment" && (
-                                        <span data-testid={`allowlist-owner-${item.type}-${item.id}`} style={{ marginLeft: "8px", fontSize: "0.72rem", color: "#475569" }}>
-                                            {labels.allowlistView.deploymentOwner}
-                                        </span>
-                                    )}
-                                </td>
-                                <td style={{ padding: "10px 14px", textAlign: "right" }}>
-                                    {/* 変更不能な供給元 (環境変数など) は削除ボタンを出さない。無効化ではなく
-                                        非描画にするのは、押せないボタンが押せる操作と見分けられないため */}
-                                    {item.readOnly ? (
-                                        <span data-testid={`readonly-allowlist-${item.type}-${item.id}`} style={{ fontSize: "0.75rem", color: "#475569" }}>
-                                            {labels.common.readOnly}
-                                        </span>
-                                    ) : (
-                                        <button
-                                            type="button"
-                                            onClick={() => {
-                                                // これでしかサインインできない人はログインできなくなる。取り消せない
-                                                if (!window.confirm(fill(labels.allowlistView.confirmDelete, { target: item.type === "group" ? item.groupName : item.pattern }))) return
-                                                if (item.type === "group") handleRemoveGroupEntry(item.id)
-                                                else handleRemoveEntry(item.id)
-                                            }}
-                                            disabled={busy}
-                                            aria-busy={busy}
-                                            aria-label={fill(labels.allowlistView.deleteAria, { target: item.type === "group" ? item.groupName : item.pattern })}
-                                            data-testid={`remove-allowlist-btn-${item.type}-${item.id}`}
-                                            style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #fee2e2", backgroundColor: "#fff5f5", color: "#b91c1c", fontSize: "0.78rem", cursor: "pointer" }}>
-                                            {labels.common.delete}
-                                        </button>
-                                    )}
-                                </td>
-                            </tr>
-                        ))}
-                        {data.allowlist.length === 0 && (
-                            <tr>
-                                <td colSpan={5} style={{ padding: "2rem", textAlign: "center", color: "#475569" }}>
-                                    {labels.allowlistView.empty}
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </section>
-    )
-}
-
-/**
- * View for the upstream directory: what is linked, how fresh it is, and the controls that change it.
- * 上流ディレクトリのビュー。何が連携され、どれだけ新しく、それを変える操作を提供する。
- *
- * このタブが無いと、連携の作成・解除・一時停止・即時同期・グループ単位のサインイン許可という
- * 5 つの操作にどこからも到達できない。実装されているのに押せる場所が無い状態は、実装が無いのと
- * 変わらないうえ、「許可を消せるが作れない」という片肺の運用を強いる。
- */
-export function DirectoryView() {
-    const data = useLoaderData() as UserAdminLoaderData
-    const fetcher = useFetcher()
-    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
-    const labels = data.labels ?? defaultUserAdminLabels
-    const L = labels.directoryView
-
-    const linkable = data.groups.filter((g) => !g.externalLink)
-    const [groupId, setGroupId] = useState("")
-    const [externalKey, setExternalKey] = useState("")
-    // ⚠️ 選んだ候補の **安定 ID** を別に持つ。アドレスだけで引き当てると、同じアドレスの行が
-    // 2 つある配備 (別名行、改名の途中) で、選んだのとは違う行が控えに出る。手入力に切り替えた
-    // ときは空に戻す — 手入力は識別子を証明できないので、サーバー側もアドレスで解決する
-    const [pickedExternalId, setPickedExternalId] = useState("")
-    const [membershipMode, setMembershipMode] = useState<AuthDirectoryMembershipMode>("direct")
-
-    const linked = data.groups.filter((g) => g.externalLink)
-    const allowedGroupIds = new Set(data.allowlist.filter((e) => e.type === "group").map((e) => e.groupId))
-    const allowlistEntryOf = (id: number) => data.allowlist.find((e) => e.type === "group" && e.groupId === id)
-    const busy = fetcher.state !== "idle"
-    // 「要求しました」を出す対象。押しても何も変わらないと、何度も押される
-    const [queued, setQueued] = useState<{ groupId: number; syncedAtAtPress: string | null } | null>(null)
-    /**
-     * 直前の「今すぐ同期」が積まれなかったことの通知。
-     *
-     * ⚠️ 積まれなかったことを成功と同じ見た目にしてはならない。同じ範囲の要求が既に待っている
-     * とき積み増さないのは正しいが、黙って成功に見せると、押しても何も起きない画面になる —
-     * しかもその待っている行が誰にも拾われなければ、以後の押下すべてが同じように消える
-     */
-    const syncRequestNotice = syncRequestNoticeOf(actionResult, labels)
-    /**
-     * 「要求しました」を出し続けてよいグループ。
-     *
-     * ⚠️ **押した時刻より後に同期が成功していたら、もう出さない。** 出し続けると、運用者は
-     * 新しく押した要求と古い表示を見分けられず、同期が終わったのかどうかも判らない。
-     * 同期の完了は `syncedAt` が進んだことで判る — それが唯一の観測点である
-     */
-    const queuedGroupId = (() => {
-        if (queued === null) return null
-        const target = data.groups.find((g) => g.id === queued.groupId)
-        const syncedAt = target?.externalLink?.syncedAt ?? null
-        // ⚠️ 端末の時計を判定に使わない。押した時刻 (ブラウザ) と同期時刻 (サーバー) を比べると、
-        // 進んだ時計では控えが永久に消えず、遅れた時計では押した直後に消える。**押した瞬間に
-        // 見えていた同期時刻から変わったか** だけを見る — どちらもサーバーが作った値である
-        if (syncedAt !== queued.syncedAtAtPress) return null
-        return queued.groupId
-    })()
-    // 供給元が判らないまま欄を出すと、送信は必ずサーバー側の内部文言で失敗する
-    const canLink = data.directoryStatus.isEnabled && data.directoryStatus.provider !== ""
-    const catalogOptions = useMemo(() => upstreamOptions(data.catalog, upstreamIndex(linked), labels), [data.catalog, linked, labels])
-    // ⚠️ 候補は隠さない (どのローカルグループが押さえているかを見せる価値は残る) が、選べる候補が
-    // 1 件も無いなら **その理由を言う**。言わないと、すべて選べない選択欄と押せないボタンだけが
-    // 残り、操作者は自分の見落としを探し続ける
-    const selectableCatalogCount = useMemo(() => catalogOptions.filter((o) => o.disabled !== true).length, [catalogOptions])
-
-    /** 連携を作る。上流キーは運用者が知っている値 (グループアドレス) で受け取る。 */
-    const handleLink = (e: React.FormEvent) => {
-        e.preventDefault()
-        if (!(groupId && externalKey)) return
-        // 連携すると名前・説明・メンバー・削除のすべてが上流の管理下へ移る。作成側と同じく、
-        // 戻せない操作であることを先に伝える
-        const target = linkable.find((g) => String(g.id) === groupId)
-        if (!window.confirm(fill(L.confirmLink, { group: target?.name ?? groupId, upstream: externalKey }))) return
-        // 供給元は配備の設定から来る。ここに特定の値を書くと、別の上流を使う配備で作った
-        // リンクが同期側で恒久的に拒否される
-        const sentKey = externalKey
-        submitThen({ intent: "linkDirectoryGroup", groupId, provider: data.directoryStatus.provider, externalKey: sentKey, externalId: pickedExternalId, membershipMode }, () => {
-            setExternalKey((current) => (current === sentKey ? "" : current))
-            setPickedExternalId((current) => (externalKey === sentKey ? "" : current))
-            // 連携済みになった行は候補から消える。選択を残すと、表示は空欄なのに前の
-            // グループへ送信される
-            setGroupId("")
-        })
-    }
-
-    return (
-        <section data-testid="directory-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <h2 style={heading}>{L.title}</h2>
-            <ActionError result={actionResult} />
-
-            {!canLink && (
-                <p data-testid="directory-not-wired" style={{ margin: 0, padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #e2e8f0", backgroundColor: "#f8fafc", color: "#475569", fontSize: "0.85rem" }}>
-                    {L.notWiredNotice}
-                </p>
-            )}
-
-            {/* ⚠️ 連携候補が無い理由は 2 つあり、向かわせる先が逆である。グループが 1 つも無いのに
-                「すべて連携済み」と言うと、運用者は存在しない連携済み一覧を探し、真の次の一手
-                (グループタブで作る) に辿り着けない。空集合の意味を先に分ける */}
-            {canLink && data.groups.length === 0 && (
-                <p data-testid="directory-no-groups" style={{ margin: 0, padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #e2e8f0", backgroundColor: "#f8fafc", color: "#475569", fontSize: "0.85rem" }}>
-                    {L.noGroupsToLink}
-                </p>
-            )}
-
-            {canLink && data.groups.length > 0 && linkable.length === 0 && (
-                <p data-testid="directory-nothing-to-link" style={{ margin: 0, padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #e2e8f0", backgroundColor: "#f8fafc", color: "#475569", fontSize: "0.85rem" }}>
-                    {L.nothingToLink}
-                </p>
-            )}
-
-            {/* ⚠️ ライブリージョンは **常に置いておき、中身だけ入れ替える**。内容と一緒に挿入した
-                `role="status"` は読み上げられない — 押しても何も起きなかったことを伝える唯一の
-                手段が、その伝えたい場面でだけ無言になる */}
-            <p
-                data-testid="directory-sync-already-pending"
-                role="status"
-                aria-live="polite"
-                hidden={syncRequestNotice === null}
-                style={syncRequestNotice === null ? undefined : { margin: 0, padding: "0.5rem 0.7rem", borderRadius: "6px", backgroundColor: "#fffbeb", border: "1px solid #fde68a", color: "#92400e", fontSize: "0.8rem" }}>
-                {syncRequestNotice}
-            </p>
-
-            {canLink && linkable.length > 0 && (
-                <form onSubmit={handleLink} data-testid="directory-link-form" style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap", alignItems: "flex-end", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
-                        <label htmlFor="directory-group-select-input" style={fieldLabel}>
-                            {L.selectGroup}
-                        </label>
-                        <select id="directory-group-select-input" data-testid="directory-group-select" value={groupId} onChange={(e) => setGroupId(e.target.value)} style={{ padding: "0.5rem", borderRadius: "6px", border: "1px solid #cbd5e1" }}>
-                            <option value="">{L.selectGroup}</option>
-                            {linkable.map((g) => (
-                                <option key={g.id} value={String(g.id)}>
-                                    {fill(L.groupOptionTemplate, { name: g.name, key: g.groupKey })}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "260px" }}>
-                        {/* 候補一覧が引けているなら選ばせる。手入力は綴り違いを「後で赤いバナー」に変える */}
-                        {/* ⚠️ 「読めたが 1 件も無い」なら手入力へ倒す (選択欄へ倒すと、選べない選択欄と
-                            押せないボタンという終端になり、手入力欄まで消える)。行が在るなら選択欄を
-                            出すが、そのうち選べるものが 0 件のときは理由を添える — 作成対話と同じ扱い */}
-                        {data.catalog.kind === "ready" && data.catalog.groups.length > 0 ? (
-                            <>
-                                <div id="directory-external-key-label" style={fieldLabel}>
-                                    {L.externalKey}
-                                </div>
-                                {/* biome-ignore lint/a11y/noStaticElementInteractions: 子の暗黙送信を止めるためだけの捕捉であり、対話要素ではない */}
-                                <div
-                                    data-testid="directory-external-key-picker"
-                                    onKeyDown={(event) => {
-                                        // 絞り込みを打った直後の Enter が、前回選んだ上流のまま連携を作ってしまう
-                                        // ⚠️ 変換中の Enter には触れない。日本語 IME の確定は
-                                        // `keydown{key:"Enter", keyCode:229, isComposing:true}` として届き、
-                                        // ここで既定動作を止めると変換の確定そのものを潰し得る。
-                                        // 変換中はそもそも暗黙の送信は起きないので、止める意味も無い
-                                        if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return
-                                        if (event.key === "Enter") event.preventDefault()
-                                    }}>
-                                    <SelectBox
-                                        options={catalogOptions}
-                                        // 選んだ後も **名前とアドレス** を見せる。生のアドレスだけに戻すと、
-                                        // 名前で選んだ運用者に機械的なキーを突き返すことになる
-                                        value={pickedExternalId === "" ? null : (catalogOptions.find((o) => o.value === pickedExternalId) ?? null)}
-                                        onChange={(picked: Option | Option[] | null) => {
-                                            if (picked === null || Array.isArray(picked)) {
-                                                setPickedExternalId("")
-                                                setExternalKey("")
-                                                return
-                                            }
-                                            setPickedExternalId(String(picked.value))
-                                            setExternalKey((picked as UpstreamOption).entry.externalKey)
-                                        }}
-                                        placeholder={L.pickUpstreamPlaceholder}
-                                        ariaLabelledBy="directory-external-key-label"
-                                        renderOption={renderUpstreamOption}
-                                        texts={pickerTexts(labels)}
-                                        clearable
-                                    />
-                                </div>
-                                {selectableCatalogCount === 0 && (
-                                    <span data-testid="directory-all-upstream-linked" style={{ fontSize: "0.72rem", color: "#92400e" }}>
-                                        {labels.groupsView.allUpstreamLinked}
-                                    </span>
-                                )}
-                                <CatalogFreshness observedAt={data.catalog.observedAt} isStale={data.catalog.isStale} labels={labels} />
-                            </>
-                        ) : (
-                            <>
-                                <label htmlFor="directory-external-key-input" style={fieldLabel}>
-                                    {L.externalKey}
-                                </label>
-                                <input
-                                    id="directory-external-key-input"
-                                    type="email"
-                                    required
-                                    data-testid="directory-external-key"
-                                    placeholder={L.externalKeyPlaceholder}
-                                    value={externalKey}
-                                    onChange={(e) => {
-                                        // 手入力は識別子を証明できない。控えの安定 ID は捨て、
-                                        // サーバー側にもアドレスで解決させる
-                                        setPickedExternalId("")
-                                        setExternalKey(e.target.value)
-                                    }}
-                                    style={{ padding: "0.5rem", borderRadius: "6px", border: "1px solid #cbd5e1" }}
-                                />
-                                {data.catalog.kind === "unavailable" && (
-                                    <span data-testid="directory-catalog-unavailable" style={{ fontSize: "0.72rem", color: "#92400e" }}>
-                                        {fill(labels.groupsView.catalogUnavailable, { reason: labels.groupsView.catalogFailures[data.catalog.reason] })}
-                                    </span>
-                                )}
-                                {data.catalog.kind === "ready" && (
-                                    <span data-testid="directory-catalog-empty" style={{ fontSize: "0.72rem", color: "#475569" }}>
-                                        {fill(labels.groupsView.catalogEmpty, { at: formatDateTime(data.catalog.observedAt, labels) })}
-                                    </span>
-                                )}
-                            </>
-                        )}
-                    </div>
-                    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
-                        <label htmlFor="directory-membership-mode-input" style={fieldLabel}>
-                            {L.membershipMode}
-                        </label>
-                        <select
-                            id="directory-membership-mode-input"
-                            data-testid="directory-membership-mode"
-                            value={membershipMode}
-                            onChange={(e) => setMembershipMode(e.target.value as AuthDirectoryMembershipMode)}
-                            style={{ padding: "0.5rem", borderRadius: "6px", border: "1px solid #cbd5e1" }}>
-                            <option value="direct">{L.directMode}</option>
-                            <option value="transitive">{L.transitiveMode}</option>
-                        </select>
-                    </div>
-                    <button
-                        type="submit"
-                        data-testid="directory-link-submit"
-                        disabled={!(groupId && externalKey) || busy}
-                        aria-busy={busy}
-                        style={{ padding: "0.5rem 1rem", borderRadius: "6px", border: "none", backgroundColor: groupId && externalKey && !busy ? "#2563eb" : "#94a3b8", color: "#fff", fontWeight: 600 }}>
-                        {L.link}
-                    </button>
-                </form>
-            )}
-
-            {linked.length === 0 ? (
-                <div data-testid="directory-empty" style={{ padding: "2rem", textAlign: "center", color: "#64748b", backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
-                    {L.empty}
-                </div>
-            ) : (
-                <table data-testid="directory-table" style={{ width: "100%", borderCollapse: "collapse", backgroundColor: "#ffffff", borderRadius: "8px", overflow: "hidden", border: "1px solid #e2e8f0" }}>
-                    <thead>
-                        <tr style={{ backgroundColor: "#f8fafc", textAlign: "left" }}>
-                            <th scope="col" style={cell}>
-                                {labels.groupsView.name}
-                            </th>
-                            <th scope="col" style={cell}>
-                                {L.externalKey}
-                            </th>
-                            <th scope="col" style={cell}>
-                                {L.membershipMode}
-                            </th>
-                            <th scope="col" style={cell}>
-                                {L.lastSynced}
-                            </th>
-                            <th scope="col" style={cell}>
-                                {labels.common.status}
-                            </th>
-                            <th scope="col" style={cell}>
-                                {labels.common.actions}
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {linked.map((g) => {
-                            const link = g.externalLink as NonNullable<AuthGroup["externalLink"]>
-                            const allowed = allowedGroupIds.has(g.id)
-                            return (
-                                <tr key={g.id} data-testid={`directory-row-${g.id}`} data-sync-enabled={String(link.isSyncEnabled)} style={{ borderTop: "1px solid #e2e8f0" }}>
-                                    <td style={cell}>
-                                        {g.name}
-                                        <div style={{ fontSize: "0.75rem", color: "#64748b" }}>{g.groupKey}</div>
-                                    </td>
-                                    <td style={cell} data-testid={`directory-external-${g.id}`}>
-                                        {link.externalKey}
-                                    </td>
-                                    <td style={cell}>{link.membershipMode === "direct" ? L.directMode : L.transitiveMode}</td>
-                                    <td style={cell} data-testid={`directory-synced-${g.id}`}>
-                                        {link.syncedAt ? formatDateTime(link.syncedAt, labels) : L.neverSynced}
-                                        {link.unresolvedCount > 0 ? (
-                                            <div style={{ fontSize: "0.75rem", color: "#b45309" }} data-testid={`directory-unresolved-${g.id}`}>
-                                                {fill(L.unresolvedTemplate, { count: link.unresolvedCount })}
-                                            </div>
-                                        ) : null}
-                                    </td>
-                                    <td style={cell}>
-                                        <span
-                                            data-testid={`directory-status-${g.id}`}
-                                            style={{ fontSize: "0.75rem", padding: "2px 8px", borderRadius: "10px", backgroundColor: link.isSyncEnabled ? "#dcfce7" : "#fee2e2", color: link.isSyncEnabled ? "#166534" : "#b91c1c", fontWeight: 600 }}>
-                                            {link.isSyncEnabled ? L.syncEnabled : L.syncPaused}
-                                        </span>
-                                        {link.syncError ? (
-                                            <div style={{ fontSize: "0.75rem", color: "#b91c1c", marginTop: "0.25rem" }} data-testid={`directory-error-${g.id}`}>
-                                                {link.syncError}
-                                            </div>
-                                        ) : null}
-                                    </td>
-                                    {/* td 自体を flex にすると表セルの役割が失われ、列と見出しの対応が切れる */}
-                                    <td style={cell}>
-                                        <div style={{ display: "flex", gap: "0.35rem", flexWrap: "wrap" }}>
-                                            <button
-                                                type="button"
-                                                data-testid={`directory-sync-now-${g.id}`}
-                                                {...rowActionProps(busy)}
-                                                aria-label={fill(queuedGroupId === g.id ? L.syncQueuedAria : L.syncNowAria, { group: g.name })}
-                                                onClick={() =>
-                                                    submitThen({ intent: "requestDirectorySync", groupId: String(g.id) }, (result) => {
-                                                        // ⚠️ 積まれたときだけ控えを出す。既に待っている要求があって積み増さなかった場合も
-                                                        // 受理として返るため、区別せずに控えを出すと、押した本人には「要求しました」と
-                                                        // 見えるのに、その下の説明文は「何も積まれていません」と言う画面になる
-                                                        if ((result as { syncRequest?: unknown } | undefined)?.syncRequest !== "queued") return
-                                                        setQueued({ groupId: g.id, syncedAtAtPress: g.externalLink?.syncedAt ?? null })
-                                                    })
-                                                }
-                                                style={smallButton}>
-                                                {queuedGroupId === g.id ? L.syncQueued : L.syncNow}
-                                            </button>
-                                            <button
-                                                type="button"
-                                                data-testid={`directory-toggle-sync-${g.id}`}
-                                                {...rowActionProps(busy)}
-                                                aria-label={fill(link.isSyncEnabled ? L.pauseAria : L.resumeAria, { group: g.name })}
-                                                onClick={() => {
-                                                    setQueued(null)
-                                                    submitThen({ intent: "setDirectorySyncEnabled", groupId: String(g.id), isSyncEnabled: String(!link.isSyncEnabled) })
-                                                }}
-                                                style={smallButton}>
-                                                {link.isSyncEnabled ? L.pause : L.resume}
-                                            </button>
-                                            <button
-                                                type="button"
-                                                data-testid={`directory-allow-${g.id}`}
-                                                {...rowActionProps(busy)}
-                                                aria-label={fill(allowed ? L.disallowGroupAria : L.allowGroupAria, { group: g.name })}
-                                                onClick={() => {
-                                                    const entry = allowlistEntryOf(g.id)
-                                                    if (allowed && entry) {
-                                                        // 取り消しはサインインを止める。追加は元に戻すだけなので確認しない
-                                                        if (!window.confirm(fill(L.confirmDisallow, { group: g.name }))) return
-                                                        submitThen({ intent: "removeAllowlistGroup", entryId: String(entry.id) })
-                                                    } else {
-                                                        submitThen({ intent: "addAllowlistGroup", groupId: String(g.id) })
-                                                    }
-                                                }}
-                                                style={smallButton}>
-                                                {allowed ? L.disallowGroup : L.allowGroup}
-                                            </button>
-                                            <button
-                                                type="button"
-                                                data-testid={`directory-unlink-${g.id}`}
-                                                {...rowActionProps(busy)}
-                                                aria-label={fill(L.unlinkAria, { group: g.name })}
-                                                onClick={() => {
-                                                    // 台帳とグループ単位の許可が失われる。取り消せないので必ず確認する
-                                                    if (!window.confirm(fill(L.confirmUnlink, { group: g.name, upstream: g.externalLink?.externalKey ?? "" }))) return
-                                                    submitThen({ intent: "unlinkDirectoryGroup", groupId: String(g.id) })
-                                                }}
-                                                style={{ ...smallButton, color: "#b91c1c", borderColor: "#fecaca" }}>
-                                                {L.unlink}
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            )
-                        })}
-                    </tbody>
-                </table>
-            )}
-        </section>
-    )
-}
-
-/** フォーム項目の見出し。プレースホルダは入力すると消えるため名前にならない。 */
-const fieldLabel: React.CSSProperties = { fontSize: "0.78rem", color: "#475569", fontWeight: 600 }
-
-/**
- * 目には出さないが、読み上げと焦点には残す指定。
- *
- * `display: none` や `visibility: hidden` はアクセシビリティツリーからも消えるため使えない。
- * ここで隠すのはラジオ入力そのもので、隠しても **焦点は当たり続けなければならない** (矢印キーで
- * 移動できるのはブラウザが焦点を持てるからである)。
- */
-const visuallyHidden: React.CSSProperties = { position: "absolute", width: "1px", height: "1px", padding: 0, margin: "-1px", overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "nowrap", border: 0 }
-/** 各ビューの見出し。段階を飛ばさないよう h2 に固定する。 */
-const heading: React.CSSProperties = { margin: 0, fontSize: "1.05rem", fontWeight: 700, color: "#0f172a" }
-/** 表セルの共通スタイル。 */
-const cell: React.CSSProperties = { padding: "0.6rem 0.75rem", fontSize: "0.85rem", verticalAlign: "top" }
-/** 行内の小さな操作ボタン。 */
-/**
- * Marks a row action as unavailable without taking it out of the tab order.
- * 行の操作を「今は使えない」と示しつつ、タブ順からは外さない処理。
- *
- * ⚠️ `disabled` を使わない。HTML 上の無効化は **焦点を持てない要素** にするため、キーボードで
- * 押した瞬間にその要素が無効になり、ブラウザは焦点を `<body>` へ落とす。しかも busy は表全体で
- * 共有しているので、1 行を押しただけで表中の全ボタンが焦点を失う — 応答が返ったあと、操作者は
- * 文書の先頭から Tab で戻ることになる。`aria-disabled` は焦点を残したまま「使えない」を伝える。
- * 実際に押させないのは呼び出し側の早期 return である。
- *
- * @param busy - Whether a submission is in flight. 送信中かどうか。
- * @returns Props to spread onto the button. ボタンへ展開する属性。
- */
-function rowActionProps(busy: boolean): { "aria-disabled": boolean; "aria-busy": boolean; "data-busy": string | undefined } {
-    return { "aria-disabled": busy, "aria-busy": busy, "data-busy": busy ? "true" : undefined }
-}
-
-const smallButton: React.CSSProperties = { padding: "0.25rem 0.6rem", fontSize: "0.75rem", borderRadius: "6px", border: "1px solid #cbd5e1", backgroundColor: "#fff", cursor: "pointer" }
-
-const SEGMENT_VIEWS: Record<string, () => React.ReactElement> = {
-    users: UsersView,
-    groups: GroupsView,
-    group_members: GroupMembersView,
-    allowlist: AllowlistView,
-    directory: DirectoryView,
-}
-
-export type AuthUserAdminAppViewProps = UserAdminShellProps
-
-/**
- * Top-level application view component for the user administration UI (`/users/*`).
- * ユーザー管理 UI 全体を描画するトップレベルコンポーネント。
- */
-export function AuthUserAdminAppView({ renderHeader, pendingSyncPolling }: AuthUserAdminAppViewProps = {}) {
-    const data = useLoaderData() as UserAdminLoaderData | undefined
-    const segment = data?.segment ?? "users"
-    // 素のオブジェクト参照だと `segment="constructor"` が真値を返し、画面が描けなくなる
-    const View = Object.hasOwn(SEGMENT_VIEWS, segment) ? SEGMENT_VIEWS[segment] : UsersView
-
-    return (
-        <UserAdminShell renderHeader={renderHeader} pendingSyncPolling={pendingSyncPolling}>
-            <View />
-        </UserAdminShell>
-    )
-}