@aiquants/auth-react-router 0.13.0 → 0.14.0

package/src/admin/views.tsx

@@ -1,9 +1,19 @@
+/**
+ * @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, useRef, useState } from "react"
-import { useFetcher, useLoaderData } from "react-router"
+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 = {
@@ -13,13 +23,11 @@ export type UserAdminLoaderData = {
     groupMembers: AuthGroupMember[]
     allowlist: AuthAllowlistEntry[]
     directoryStatus: AuthDirectoryStatus
+    /** 上流の候補一覧。選択欄を出す面でのみ `ready` になる。 */
+    catalog: UserAdminCatalog
     labels?: UserAdminLabels
 }
 
-/**
- * View for managing users (list, search, toggle active, modal edit).
- * ユーザー管理ビュー (一覧・検索・アクティブ切替・ダイアログ編集)。
- */
 /**
  * Renders the error returned by the last action submission, if any.
  * 直近の action 送信が返したエラーを表示する部品。
@@ -51,7 +59,7 @@ function ActionError({ result: raw, id }: { result: unknown; id?: string }) {
  * 通せば後の送信が `pending` を必ず上書きするため、後始末は常に最後の送信のものになる。
  */
 function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
-    const pending = useRef<(() => void) | null>(null)
+    const pending = useRef<((data: unknown) => void) | null>(null)
     // 破棄した結果の世代。`fetcher.data` は宣言的に消せないため、こちらで無効化する
     const [discarded, setDiscarded] = useState<unknown>(undefined)
     const result = fetcher.data === discarded ? undefined : fetcher.data
@@ -64,10 +72,13 @@ function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
         // すべての送信がこのフックを通る限り、後の送信が必ず `pending` を上書きするため。
         // 素の `fetcher.submit` が 1 つでも混ざった瞬間に効き始める
         pending.current = null
-        if ((fetcher.data as { ok?: boolean }).ok === true) onSuccess()
+        // ⚠️ 後始末には応答そのものを渡す。`ok === true` は「受理した」であって「要求どおりに
+        // なった」ではない — 積まれなかった要求も受理として返る。区別できない形にすると、
+        // 押した控えだけが成功の見た目で残る
+        if ((fetcher.data as { ok?: boolean }).ok === true) onSuccess(fetcher.data)
     }, [fetcher.state, fetcher.data])
 
-    const submit = (payload: Record<string, string>, onSuccess?: () => void) => {
+    const submit = (payload: Record<string, string>, onSuccess?: (data: unknown) => void) => {
         pending.current = onSuccess ?? null
         setDiscarded(undefined)
         fetcher.submit(payload, { method: "post" })
@@ -104,14 +115,51 @@ function useModalBehavior(isOpen: boolean, onClose: () => void, openerRef?: Reac
         // `activeElement` を見るだけでは戻し先にならない。押下で焦点が乗らないブラウザ
         // (Safari / macOS の Firefox) では body へ戻ってしまう。開いた要素を明示的に覚える
         const opener = openerRef?.current ?? (document.activeElement as HTMLElement | null)
-        const focusables = () => Array.from(panel?.querySelectorAll<HTMLElement>('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])') ?? [])
-        focusables()[0]?.focus()
+        /**
+         * 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
@@ -141,6 +189,197 @@ function useModalBehavior(isOpen: boolean, onClose: () => void, openerRef?: Reac
     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 },
+}
+
+/**
+ * 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()
@@ -158,6 +397,12 @@ export function UsersView() {
     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)
     }
 
@@ -167,11 +412,35 @@ export function UsersView() {
     const editUserRef = useModalBehavior(editingUser !== null, () => setModal(null), openerRef)
 
     const busy = fetcher.state !== "idle"
-    const filteredUsers = data.users.filter((u) => u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) || u.email.toLowerCase().includes(searchQuery.toLowerCase()))
+    // 並べ替えは表示だけの関心事なので状態は画面に持つ。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(labels.usersView.confirmDeactivate)) 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) })
     }
 
@@ -218,15 +487,46 @@ export function UsersView() {
                 </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" }}>
-                            <th style={{ padding: "10px 14px" }}>{labels.common.id}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.usersView.displayName}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.usersView.email}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.common.status}</th>
-                            <th style={{ padding: "10px 14px", textAlign: "right" }}>{labels.common.actions}</th>
+                            {(
+                                [
+                                    ["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>
@@ -252,8 +552,7 @@ export function UsersView() {
                                     <button
                                         type="button"
                                         onClick={() => handleToggleActive(u)}
-                                        disabled={busy}
-                                        aria-busy={busy}
+                                        {...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" }}>
@@ -265,7 +564,9 @@ export function UsersView() {
                         {filteredUsers.length === 0 && (
                             <tr>
                                 <td colSpan={5} style={{ padding: "2rem", textAlign: "center", color: "#475569" }}>
-                                    {labels.usersView.empty}
+                                    {/* 「検索で 0 件」と「そもそも登録が無い」は別の事態である。同じ文言に
+                                        すると、新規テナントを開いた運用者は一覧が壊れていると読む */}
+                                    {userNeedle === "" ? labels.usersView.empty : labels.usersView.emptyFiltered}
                                 </td>
                             </tr>
                         )}
@@ -282,7 +583,7 @@ export function UsersView() {
                         role="dialog"
                         aria-modal="true"
                         aria-labelledby="create-user-title"
-                        aria-describedby="create-user-error"
+                        {...(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" }}>
@@ -338,7 +639,7 @@ export function UsersView() {
                         role="dialog"
                         aria-modal="true"
                         aria-labelledby="edit-user-title"
-                        aria-describedby="edit-user-error"
+                        {...(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" }}>
@@ -403,10 +704,13 @@ export function GroupsView() {
     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)
     }
 
@@ -414,22 +718,113 @@ export function GroupsView() {
     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 filteredGroups = data.groups.filter((g) => g.name.toLowerCase().includes(searchQuery.toLowerCase()) || g.groupKey.toLowerCase().includes(searchQuery.toLowerCase()))
+    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 }
-        submitThen({ intent: "createGroup", groupKey: sent.key, name: sent.name, description: sent.description }, () => {
+        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) => {
@@ -438,9 +833,15 @@ export function GroupsView() {
         submitThen({ intent: "updateGroup", groupId: String(editingGroup.id), name: editingGroup.name, description: editingGroup.description ?? "" }, () => setModal(null))
     }
 
-    const handleDeleteGroup = (groupId: number) => {
-        if (!window.confirm(labels.groupsView.confirmDelete)) return
-        submitThen({ intent: "deleteGroup", groupId: String(groupId) })
+    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 (
@@ -468,7 +869,7 @@ export function GroupsView() {
 
             <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>
                 {filteredGroups.map((g) => {
-                    const memberCount = data.groupMembers.filter((m) => m.groupId === g.id).length
+                    const memberCount = memberCountByGroup.get(g.id) ?? 0
                     return (
                         <div
                             key={g.id}
@@ -477,7 +878,7 @@ export function GroupsView() {
                             data-group-readonly={g.readOnly ? "true" : "false"}>
                             <div>
                                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
-                                    <h4 style={{ margin: 0, fontSize: "1rem", color: "#0f172a" }}>{g.name}</h4>
+                                    <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>
@@ -495,9 +896,9 @@ export function GroupsView() {
                                 )}
                             </div>
                             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid #f1f5f9", paddingTop: "0.6rem" }}>
-                                <span style={{ fontSize: "0.78rem", color: "#475569" }} data-testid={`group-member-count-${g.id}`}>
+                                <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 })}
-                                </span>
+                                </Link>
                                 {/* 上流が所有する行では操作を **描かない**。無効化したボタンを出すと、
                                     押せる操作と見分けがつかず、押せない理由も伝わらない */}
                                 {g.readOnly ? (
@@ -509,8 +910,7 @@ export function GroupsView() {
                                         <button
                                             type="button"
                                             onClick={(event) => openModal({ kind: "edit", group: g }, event)}
-                                            disabled={busy}
-                                            aria-busy={busy}
+                                            {...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" }}>
@@ -518,9 +918,8 @@ export function GroupsView() {
                                         </button>
                                         <button
                                             type="button"
-                                            onClick={() => handleDeleteGroup(g.id)}
-                                            disabled={busy}
-                                            aria-busy={busy}
+                                            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" }}>
@@ -548,13 +947,131 @@ export function GroupsView() {
                         role="dialog"
                         aria-modal="true"
                         aria-labelledby="create-group-title"
-                        aria-describedby="create-group-error"
+                        {...(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}
@@ -597,11 +1114,37 @@ export function GroupsView() {
                                 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} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
+                            <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>
@@ -618,7 +1161,7 @@ export function GroupsView() {
                         role="dialog"
                         aria-modal="true"
                         aria-labelledby="edit-group-title"
-                        aria-describedby="edit-group-error"
+                        {...(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" }}>
@@ -677,17 +1220,80 @@ export function GroupMembersView() {
     const busy = fetcher.state !== "idle"
     const labels = data.labels ?? defaultUserAdminLabels
 
-    const [selectedGroupId, setSelectedGroupId] = useState<number>(data.groups[0]?.id ?? 0)
+    // 遷移元がグループを指定していればそれを選ぶ (グループ一覧から 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 currentGroup = data.groups.find((g) => g.id === selectedGroupId) ?? data.groups[0]
-    const currentMemberUserIds = new Set(data.groupMembers.filter((m) => m.groupId === selectedGroupId).map((m) => m.userId))
+    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) {
-            submitThen({ intent: "removeGroupMember", groupId: String(selectedGroupId), userId: String(userId) })
+            setJustRemoved((current) => new Set(current).add(userId))
+            submitThen({ intent: "removeGroupMember", groupId, userId: String(userId) })
         } else {
-            submitThen({ intent: "addGroupMember", groupId: String(selectedGroupId), userId: String(userId) })
+            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) })
         }
     }
 
@@ -695,16 +1301,25 @@ export function GroupMembersView() {
         <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" }}>
-                <h4 style={{ margin: "0 0 0.8rem 0", fontSize: "0.9rem", color: "#475569" }}>{labels.groupMembersView.selectGroup}</h4>
+                <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 === selectedGroupId
+                        const isSelected = g.id === currentGroup?.id
                         return (
                             <button
                                 type="button"
                                 key={g.id}
-                                onClick={() => setSelectedGroupId(g.id)}
+                                onClick={() => {
+                                    setPicked(g.id)
+                                    // 別のグループの「外したばかり」を持ち越さない
+                                    setJustRemoved(new Set())
+                                }}
                                 data-testid={`select-group-btn-${g.id}`}
                                 style={{
                                     textAlign: "left",
@@ -743,8 +1358,44 @@ export function GroupMembersView() {
                                 </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" }}>
-                            {data.users.map((u) => {
+                            {visibleUsers.map((u) => {
                                 const isMember = currentMemberUserIds.has(u.id)
                                 return (
                                     <div
@@ -773,8 +1424,7 @@ export function GroupMembersView() {
                                             <button
                                                 type="button"
                                                 onClick={() => handleToggleMember(u.id, isMember)}
-                                                disabled={busy}
-                                                aria-busy={busy}
+                                                {...rowActionProps(busy)}
                                                 aria-label={fill(isMember ? labels.groupMembersView.actionRemoveAria : labels.groupMembersView.actionAddAria, { user: u.displayName })}
                                                 data-testid={`toggle-member-btn-${u.id}`}
                                                 style={{
@@ -796,7 +1446,10 @@ export function GroupMembersView() {
                         </div>
                     </>
                 ) : (
-                    <div style={{ color: "#475569", textAlign: "center", padding: "2rem" }}>{labels.groupMembersView.selectPrompt}</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>
@@ -906,11 +1559,21 @@ export function AllowlistView() {
                 <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.85rem", textAlign: "left" }}>
                     <thead>
                         <tr style={{ backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0", color: "#475569" }}>
-                            <th style={{ padding: "10px 14px" }}>{labels.common.id}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.target}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.type}</th>
-                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.description}</th>
-                            <th style={{ padding: "10px 14px", textAlign: "right" }}>{labels.common.actions}</th>
+                            <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>
@@ -953,7 +1616,7 @@ export function AllowlistView() {
                                             type="button"
                                             onClick={() => {
                                                 // これでしかサインインできない人はログインできなくなる。取り消せない
-                                                if (!window.confirm(labels.allowlistView.confirmDelete)) return
+                                                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)
                                             }}
@@ -1000,6 +1663,10 @@ export function 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)
@@ -1007,19 +1674,54 @@ export function DirectoryView() {
     const allowlistEntryOf = (id: number) => data.allowlist.find((e) => e.type === "group" && e.groupId === id)
     const busy = fetcher.state !== "idle"
     // 「要求しました」を出す対象。押しても何も変わらないと、何度も押される
-    const [queuedGroupId, setQueuedGroupId] = useState<number | null>(null)
+    const [queued, setQueued] = useState<{ groupId: number; syncedAtAtPress: string | null } | null>(null)
+    /**
+     * 直前の「今すぐ同期」が積まれなかったことの通知。
+     *
+     * ⚠️ 積まれなかったことを成功と同じ見た目にしてはならない。同じ範囲の要求が既に待っている
+     * とき積み増さないのは正しいが、黙って成功に見せると、押しても何も起きない画面になる —
+     * しかもその待っている行が誰にも拾われなければ、以後の押下すべてが同じように消える
+     */
+    const syncRequestNotice = typeof actionResult === "object" && actionResult !== null && (actionResult as { syncRequest?: unknown }).syncRequest === "already-pending" ? L.syncAlreadyPending : null
+    /**
+     * 「要求しました」を出し続けてよいグループ。
+     *
+     * ⚠️ **押した時刻より後に同期が成功していたら、もう出さない。** 出し続けると、運用者は
+     * 新しく押した要求と古い表示を見分けられず、同期が終わったのかどうかも判らない。
+     * 同期の完了は `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 件も無いなら、選択欄ではなく手入力へ倒す。行数で判定すると、全件が
+    // 連携済みの配備で「すべて選べない選択欄」だけが出て、手入力欄まで消える — 連携だけが
+    // 目的のこの面で、打つ手が 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, membershipMode }, () => {
+        submitThen({ intent: "linkDirectoryGroup", groupId, provider: data.directoryStatus.provider, externalKey: sentKey, externalId: pickedExternalId, membershipMode }, () => {
             setExternalKey((current) => (current === sentKey ? "" : current))
+            setPickedExternalId((current) => (externalKey === sentKey ? "" : current))
             // 連携済みになった行は候補から消える。選択を残すと、表示は空欄なのに前の
             // グループへ送信される
             setGroupId("")
@@ -1043,6 +1745,18 @@ export function DirectoryView() {
                 </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" }}>
@@ -1058,20 +1772,83 @@ export function DirectoryView() {
                             ))}
                         </select>
                     </div>
-                    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "220px" }}>
-                        <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) => setExternalKey(e.target.value)}
-                            style={{ padding: "0.5rem", borderRadius: "6px", border: "1px solid #cbd5e1" }}
-                        />
+                    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "260px" }}>
+                        {/* 候補一覧が引けているなら選ばせる。手入力は綴り違いを「後で赤いバナー」に変える */}
+                        {/* ⚠️ 「読めたが 1 件も無い」で選択欄へ倒すと、選べない選択欄と押せない
+                            ボタンという終端になる。しかも手入力欄まで消えるので、連携だけが目的の
+                            この面で打つ手が無くなる。作成対話と同じ条件で扱う */}
+                        {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>
+                                <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}>
@@ -1106,12 +1883,24 @@ export function DirectoryView() {
                 <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 style={cell}>{labels.groupsView.name}</th>
-                            <th style={cell}>{L.externalKey}</th>
-                            <th style={cell}>{L.membershipMode}</th>
-                            <th style={cell}>{L.lastSynced}</th>
-                            <th style={cell}>{labels.common.status}</th>
-                            <th style={cell}>{labels.common.actions}</th>
+                            <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>
@@ -1154,21 +1943,27 @@ export function DirectoryView() {
                                             <button
                                                 type="button"
                                                 data-testid={`directory-sync-now-${g.id}`}
-                                                disabled={busy}
-                                                aria-busy={busy}
+                                                {...rowActionProps(busy)}
                                                 aria-label={fill(queuedGroupId === g.id ? L.syncQueuedAria : L.syncNowAria, { group: g.name })}
-                                                onClick={() => submitThen({ intent: "requestDirectorySync", groupId: String(g.id) }, () => setQueuedGroupId(g.id))}
+                                                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}`}
-                                                disabled={busy}
-                                                aria-busy={busy}
+                                                {...rowActionProps(busy)}
                                                 aria-label={fill(link.isSyncEnabled ? L.pauseAria : L.resumeAria, { group: g.name })}
                                                 onClick={() => {
-                                                    setQueuedGroupId(null)
+                                                    setQueued(null)
                                                     submitThen({ intent: "setDirectorySyncEnabled", groupId: String(g.id), isSyncEnabled: String(!link.isSyncEnabled) })
                                                 }}
                                                 style={smallButton}>
@@ -1177,14 +1972,13 @@ export function DirectoryView() {
                                             <button
                                                 type="button"
                                                 data-testid={`directory-allow-${g.id}`}
-                                                disabled={busy}
-                                                aria-busy={busy}
+                                                {...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(L.confirmDisallow)) return
+                                                        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) })
@@ -1196,12 +1990,11 @@ export function DirectoryView() {
                                             <button
                                                 type="button"
                                                 data-testid={`directory-unlink-${g.id}`}
-                                                disabled={busy}
-                                                aria-busy={busy}
+                                                {...rowActionProps(busy)}
                                                 aria-label={fill(L.unlinkAria, { group: g.name })}
                                                 onClick={() => {
                                                     // 台帳とグループ単位の許可が失われる。取り消せないので必ず確認する
-                                                    if (!window.confirm(L.confirmUnlink)) return
+                                                    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" }}>
@@ -1221,11 +2014,37 @@ export function DirectoryView() {
 
 /** フォーム項目の見出し。プレースホルダは入力すると消えるため名前にならない。 */
 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> = {