@aiquants/auth-react-router 0.5.0 → 0.7.0

package/dist/styles/auth-react-router.standalone.css

@@ -1,3 +1,3 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 /*! @aiquants/auth-react-router standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-white:#fff;--spacing:.25rem;--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-bold:700;--tracking-wide:.025em;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base,components;@layer utilities{.collapse{visibility:collapse}.fixed{position:fixed}.static{position:static}.my-4{margin-block:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing) * 3)}.rounded-2xl{border-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-500{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-white{color:var(--color-white)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:from-blue-600:hover{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:to-indigo-600:hover{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-300:focus{--tw-ring-color:var(--color-blue-300)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-white:#fff;--spacing:.25rem;--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-bold:700;--tracking-wide:.025em;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base,components;@layer utilities{.collapse{visibility:collapse}.fixed{position:fixed}.static{position:static}.my-4{margin-block:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing) * 3)}.rounded-2xl{border-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-500{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-white{color:var(--color-white)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:from-blue-600:hover{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:to-indigo-600:hover{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-300:focus{--tw-ring-color:var(--color-blue-300)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/auth-react-router",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "React Router v7 auth adapter for @aiquants/auth-core: Google OAuth strategy factory (remix-auth), cookie session storage with DI test backdoor, per-request loader guard with token refresh + photo cache, auth route handlers, and a <GoogleForm> login button.",
   "sideEffects": [
     "**/*.css"
@@ -29,6 +29,8 @@
   "files": [
     "dist",
     "src",
+    "!src/**/*.spec.ts",
+    "!src/**/*.spec.tsx",
     "README.md",
     "LICENSE"
   ],

package/src/admin/server.ts

@@ -1,6 +1,5 @@
 import type { AuthAllowlistEntry, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"
-import { type PartialUserAdminLabels, resolveUserAdminLabels, type UserAdminLabels } from "./labels"
+import { type PartialUserAdminLabels, resolveUserAdminLabels } from "./labels"
 
 /**
  * Server store interface for managing users, groups, memberships, and allowlists.
@@ -143,6 +142,14 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
  * independent of any particular authorization library.
  * 操作が行う CRUD 種別。特定の認可ライブラリに依存しないよう素の文字列 union で表現する。
  */
+/**
+ * The only route-args field this module reads. React Router's full `LoaderFunctionArgs` satisfies it, so
+ * route wiring is unchanged — but declaring the minimum keeps callers (and tests) from fabricating fields
+ * that are never looked at.
+ * このモジュールが実際に読むルート引数の全て。React Router の完全な引数はこれを満たすため結線は不変。
+ */
+type RouteArgs = { request: Request }
+
 export type UserAdminAccess = "read" | "create" | "update" | "delete"
 
 /**
@@ -183,6 +190,20 @@ const INTENT_ACCESS = new Map<string, UserAdminAccess>([
     ["removeAllowlistEntry", "delete"],
 ])
 
+/**
+ * Neutral per-resource permission summary the admin shell renders in its header badge.
+ * 管理シェルのヘッダーバッジが描画する、リソース単位の中立な権限サマリ。
+ *
+ * この形はこのパッケージ自身の契約であり、特定の認可ライブラリの型を import しない
+ * (`AGENTS.md` のクロスパッケージ・ハードコード禁止)。`canRead` / `canWrite` / `canDelete` を持つ
+ * ビューであれば構造的にそのまま渡せる。
+ */
+export type UserAdminPermission = {
+    canRead: boolean
+    canWrite: boolean
+    canDelete: boolean
+}
+
 export type UserAdminAppConfig = {
     store: UserAdminStore
     /** セクション単位の部分上書き。既定は英語 (`defaultUserAdminLabels`)。 */
@@ -192,6 +213,21 @@ export type UserAdminAppConfig = {
      * 必須。省略を許すとユーザー名簿と全更新操作が無防備に露出するため、型で強制する。
      */
     guards: UserAdminGuards
+    /**
+     * Per-request self-permission lookup for the header annotation. Resolving to a map of
+     * {@link UserAdminPermission} shows the badge; rejecting shows an explicit "unknown" badge — never a
+     * permissive one. Any authz library whose view carries `canRead` / `canWrite` / `canDelete` satisfies it.
+     * ヘッダー注釈に自分の実効権限を表示するためのリクエスト別権限取得関数。失敗時は「権限不明」表示。
+     */
+    getMyPermissions?: (request: Request) => Promise<Record<string, UserAdminPermission | undefined>>
+    /**
+     * Display names for the resource keys the badge shows, e.g. `{ authz_admin: "ユーザー管理 UI" }`.
+     * バッジに出すリソースキーの表示名。未指定のキーはキー文字列をそのまま表示。
+     *
+     * 表示名をこのパッケージ側に埋め込むと、別パッケージのリソースキーを名指しすることになる
+     * (`AGENTS.md` のクロスパッケージ・ハードコード禁止)。中立な差し込み口として受け取る。
+     */
+    resourceLabels?: Record<string, string>
 }
 
 /**
@@ -238,26 +274,40 @@ function optionalText(formData: FormData, field: string): string | undefined {
 export function createUserAdminApp(config: UserAdminAppConfig) {
     const labels = resolveUserAdminLabels(config.labels)
 
-    async function loader({ request }: LoaderFunctionArgs) {
+    async function loader({ request }: RouteArgs) {
         // 読取ガード: 拒否は throw されるためここで処理が打ち切られる
         await config.guards.requireAccess(request, { action: "read", intent: "loader" })
         const url = new URL(request.url)
         const pathSegments = url.pathname.split("/").filter(Boolean)
         const segment = pathSegments[pathSegments.length - 1] ?? "users"
 
-        const [users, groups, groupMembers, allowlist] = await Promise.all([config.store.listUsers(), config.store.listGroups(), config.store.listGroupMembers(), config.store.listAllowlist()])
+        const [users, groups, groupMembers, allowlist, myPermissions] = await Promise.all([
+            config.store.listUsers(),
+            config.store.listGroups(),
+            config.store.listGroupMembers(),
+            config.store.listAllowlist(),
+            // 取得できない場合は null (= 権限不明)。空マップに倒すと「付与ゼロ」と区別できなくなる
+            config.getMyPermissions
+                ? config.getMyPermissions(request).catch((e) => {
+                      console.error("[@aiquants/auth-react-router] getMyPermissions failed; rendering the permission badge as unknown:", e)
+                      return null
+                  })
+                : Promise.resolve(null),
+        ])
 
         return {
+            resourceLabels: config.resourceLabels,
             segment: ["groups", "group_members", "allowlist"].includes(segment) ? segment : "users",
             users,
             groups,
             groupMembers,
             allowlist,
+            myPermissions,
             labels,
         }
     }
 
-    async function action({ request }: ActionFunctionArgs) {
+    async function action({ request }: RouteArgs) {
         // intent の判定に FormData が要るため、ここでだけ本文を先に読む。
         // 未知 intent は「何も実行しない」ため、ガード前に読んでも権限判断には影響しない。
         const formData = await request.formData()

package/src/admin/ui.tsx

@@ -1,20 +1,52 @@
 import type React from "react"
 import { Link, useLoaderData } from "react-router"
 import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
+import type { UserAdminPermission } from "./server"
 
 export type UserAdminShellProps = {
     children?: React.ReactNode
     renderHeader?: (props: { title: string; annotation: React.ReactNode }) => React.ReactNode
 }
 
+/**
+ * Render one resource's permission summary as a compact pill.
+ * 1 リソース分の権限サマリをコンパクトなタグとして描画するコンポーネント。
+ */
+function GroupPill({ label, summary }: { label: string; summary: { text: string; color: string; bgColor: string; borderColor: string } }) {
+    return (
+        <span
+            style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.18rem",
+                fontSize: "0.65rem",
+                padding: "0.08rem 0.35rem",
+                borderRadius: "9999px",
+                backgroundColor: summary.bgColor,
+                color: summary.color,
+                border: `1px solid ${summary.borderColor}`,
+                fontWeight: 600,
+                lineHeight: "1.2",
+            }}>
+            <span>{label}:</span>
+            <span>{summary.text}</span>
+        </span>
+    )
+}
+
 /**
  * Shell layout for user administration pages with header annotation delegation.
  * ヘッダー注釈委譲を備えたユーザー管理ページのシェルレイアウト。
  */
 export function UserAdminShell({ children, renderHeader }: UserAdminShellProps) {
-    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels } | undefined
+    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string> } | undefined
     const segment = data?.segment ?? "users"
     const labels = data?.labels ?? defaultUserAdminLabels
+    // null = 未結線または取得失敗。空 {} も「分からない」扱いで、いずれも許可として描画しない
+    const myPermissions = data?.myPermissions ?? null
+    // リソースキーの表示名は呼び出し側が差し込む (キーをこのパッケージに埋め込まない)
+    const resourceLabels = data?.resourceLabels ?? {}
+    const labelFor = (resourceKey: string) => (Object.hasOwn(resourceLabels, resourceKey) ? resourceLabels[resourceKey] : resourceKey)
 
     const tabs = [
         { key: "users", label: labels.tabs.users, href: "/users" },
@@ -23,9 +55,42 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
         { key: "allowlist", label: labels.tabs.allowlist, href: "/users/allowlist" },
     ]
 
+    const permEntries = Object.entries(myPermissions ?? {})
+
+    /**
+     * Pick the badge text and colours for one resource, never rendering "unknown" as "allowed".
+     * 1 リソース分のバッジ文言と配色を決める処理。**未知を許可として描かない** ことが要件。
+     *
+     * 以前は権限マップが空のとき「編集可」の固定値を描いていたため、ポート未結線・取得失敗・
+     * 付与ゼロのいずれでも「全操作できます」と表示されていた (実際には操作するとガードで拒否される)。
+     */
+    const getSummary = (perm: UserAdminPermission | undefined) => {
+        if (perm?.canWrite) {
+            return { text: "編集可", color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
+        }
+        if (perm?.canRead) {
+            return { text: "閲覧のみ", color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
+        }
+        return { text: "権限なし", color: "#64748b", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
+    }
+    const unavailableSummary = { text: "権限不明", color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
+
     const annotation = (
-        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }} data-testid="user-admin-header-annotation">
+        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }} data-testid="user-admin-header-annotation">
             <span style={{ fontSize: "0.75rem", backgroundColor: "#e0f2fe", color: "#0369a1", padding: "2px 8px", borderRadius: "12px", fontWeight: 600 }}>{labels.heading}</span>
+
+            <div style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", fontSize: "0.68rem", color: "#475569" }} data-testid="user-admin-permissions-badge">
+                <span style={{ fontWeight: 600, color: "#334155" }}>あなたの権限:</span>
+                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.18rem" }}>
+                    {permEntries.length === 0 ? (
+                        <span data-testid="user-admin-permission-unavailable">
+                            <GroupPill label={labels.heading} summary={unavailableSummary} />
+                        </span>
+                    ) : (
+                        permEntries.map(([resKey, perm]) => <GroupPill key={resKey} label={labelFor(resKey)} summary={getSummary(perm)} />)
+                    )}
+                </span>
+            </div>
         </div>
     )
 

package/src/admin/server.spec.ts

@@ -1,300 +0,0 @@
-import { describe, expect, it } from "vitest"
-import { createInMemoryUserAdminStore, createUserAdminApp, type UserAdminGuards } from "./server"
-
-/** テスト用の常時許可ガード(ガード自体の検証は専用ケースで行う)。 */
-const allowAll = (): UserAdminGuards => ({ requireAccess: () => {} })
-
-/** intent + フィールドを FormData に載せて action を叩くヘルパ。 */
-function runActionOn(app: ReturnType<typeof createUserAdminApp>) {
-    return (intent: string, fields: Record<string, string>) => {
-        const formData = new FormData()
-        formData.append("intent", intent)
-        for (const [key, val] of Object.entries(fields)) formData.append(key, val)
-        return app.action({
-            request: new Request("http://localhost/users", { method: "POST", body: formData }),
-            params: {},
-            context: {},
-        } as never)
-    }
-}
-
-describe("UserAdminStore & createUserAdminApp", () => {
-    it("manages users correctly in memory store and throws on non-existent ids", async () => {
-        const store = createInMemoryUserAdminStore({ users: [] })
-
-        const created = await store.createUser({ displayName: "テスト 太郎", email: "test@example.com" })
-        expect(created.id).toBe(1)
-        expect(created.displayName).toBe("テスト 太郎")
-        expect(created.isActive).toBe(true)
-
-        const updated = await store.updateUser(1, { displayName: "テスト 次郎", email: "updated@example.com" })
-        expect(updated.displayName).toBe("テスト 次郎")
-        expect(updated.email).toBe("updated@example.com")
-
-        const toggled = await store.toggleUserActive(1, false)
-        expect(toggled.isActive).toBe(false)
-
-        await expect(store.updateUser(999, { displayName: "a", email: "b" })).rejects.toThrow("User not found: 999")
-        await expect(store.toggleUserActive(999, true)).rejects.toThrow("User not found: 999")
-
-        const list = await store.listUsers()
-        expect(list).toHaveLength(1)
-    })
-
-    it("manages groups and memberships correctly and throws on non-existent group ids", async () => {
-        const store = createInMemoryUserAdminStore({ users: [{ id: 10, displayName: "U10", email: "u10@ex.com", isActive: true }], groups: [], groupMembers: [] })
-
-        const group = await store.createGroup({ groupKey: "qa-team", name: "QAチーム", description: "品質保証" })
-        expect(group.id).toBe(1)
-        expect(group.groupKey).toBe("qa-team")
-
-        const updatedGroup = await store.updateGroup(1, { name: "QA・テストチーム", description: "品質管理全般" })
-        expect(updatedGroup.name).toBe("QA・テストチーム")
-
-        await expect(store.updateGroup(999, { name: "x" })).rejects.toThrow("Group not found: 999")
-
-        const member1 = await store.addGroupMember(1, 10)
-        expect(member1.groupId).toBe(1)
-        expect(member1.userId).toBe(10)
-
-        // Idempotent duplicate add
-        const member2 = await store.addGroupMember(1, 10)
-        expect(member2).toEqual(member1)
-
-        const members = await store.listGroupMembers()
-        expect(members).toHaveLength(1)
-
-        await store.removeGroupMember(1, 10)
-        expect(await store.listGroupMembers()).toHaveLength(0)
-
-        await store.deleteGroup(1)
-        expect(await store.listGroups()).toHaveLength(0)
-    })
-
-    it("manages allowlist entries correctly in memory store", async () => {
-        const store = createInMemoryUserAdminStore({ allowlist: [] })
-
-        const entry = await store.addAllowlistEntry({ pattern: "@domain.com", type: "domain", description: "許可ドメイン" })
-        expect(entry.id).toBe(1)
-        expect(entry.pattern).toBe("@domain.com")
-
-        expect(await store.listAllowlist()).toHaveLength(1)
-
-        await store.removeAllowlistEntry(1)
-        expect(await store.listAllowlist()).toHaveLength(0)
-    })
-
-    it("handles all loader route segments via createUserAdminApp", async () => {
-        const store = createInMemoryUserAdminStore()
-        const app = createUserAdminApp({ store, guards: allowAll() })
-
-        const segments = ["users", "groups", "group_members", "allowlist", "unknown_path"]
-        for (const seg of segments) {
-            const loaderRes = await app.loader({
-                request: new Request(`http://localhost/users/${seg}`),
-                params: {},
-                context: {},
-            })
-            if (seg === "unknown_path") {
-                expect(loaderRes.segment).toBe("users")
-            } else {
-                expect(loaderRes.segment).toBe(seg)
-            }
-        }
-    })
-
-    it("handles all action intents and PERSISTS each mutation to the store", async () => {
-        const store = createInMemoryUserAdminStore()
-        const app = createUserAdminApp({ store, guards: allowAll() })
-        const run = runActionOn(app)
-
-        // createUser — 戻り値だけでなく実際の永続結果を検証する
-        expect(await run("createUser", { displayName: "John", email: "john@example.com" })).toEqual({ ok: true })
-        const created = (await store.listUsers()).find((u) => u.email === "john@example.com")
-        expect(created).toMatchObject({ displayName: "John", isActive: true })
-
-        expect(await run("updateUser", { userId: String(created?.id), displayName: "John Updated", email: "john.updated@example.com" })).toEqual({ ok: true })
-        expect((await store.listUsers()).find((u) => u.id === created?.id)).toMatchObject({ displayName: "John Updated", email: "john.updated@example.com" })
-
-        expect(await run("toggleUserActive", { userId: String(created?.id), isActive: "false" })).toEqual({ ok: true })
-        expect((await store.listUsers()).find((u) => u.id === created?.id)?.isActive).toBe(false)
-
-        expect(await run("createGroup", { groupKey: "sec-team", name: "Security", description: "SecOps" })).toEqual({ ok: true })
-        const group = (await store.listGroups()).find((g) => g.groupKey === "sec-team")
-        expect(group).toMatchObject({ name: "Security", description: "SecOps" })
-
-        expect(await run("updateGroup", { groupId: String(group?.id), name: "Security Team", description: "Updated" })).toEqual({ ok: true })
-        expect((await store.listGroups()).find((g) => g.id === group?.id)).toMatchObject({ name: "Security Team", description: "Updated" })
-
-        expect(await run("addGroupMember", { groupId: String(group?.id), userId: String(created?.id) })).toEqual({ ok: true })
-        expect((await store.listGroupMembers()).some((m) => m.groupId === group?.id && m.userId === created?.id)).toBe(true)
-
-        expect(await run("removeGroupMember", { groupId: String(group?.id), userId: String(created?.id) })).toEqual({ ok: true })
-        expect((await store.listGroupMembers()).some((m) => m.groupId === group?.id && m.userId === created?.id)).toBe(false)
-
-        expect(await run("addAllowlistEntry", { pattern: "@sec.com", type: "domain", description: "Sec" })).toEqual({ ok: true })
-        expect(await run("addAllowlistEntry", { pattern: "user@sec.com", type: "email" })).toEqual({ ok: true })
-        const allowlist = await store.listAllowlist()
-        expect(allowlist.find((a) => a.pattern === "@sec.com")?.type).toBe("domain")
-        expect(allowlist.find((a) => a.pattern === "user@sec.com")?.type).toBe("email")
-
-        const removable = allowlist.find((a) => a.pattern === "@sec.com")
-        expect(await run("removeAllowlistEntry", { entryId: String(removable?.id) })).toEqual({ ok: true })
-        expect((await store.listAllowlist()).some((a) => a.pattern === "@sec.com")).toBe(false)
-
-        // unknown intent
-        expect(await run("unknownIntent", {})).toEqual({ ok: false, error: "Unknown intent: unknownIntent" })
-    })
-
-    it("deleteGroup cascades: the group's memberships are removed too (no orphan rows)", async () => {
-        const store = createInMemoryUserAdminStore({
-            users: [{ id: 10, displayName: "U10", email: "u10@ex.com", isActive: true }],
-            groups: [{ id: 5, groupKey: "g5", name: "G5", isActive: true }],
-            groupMembers: [{ id: 1, groupId: 5, userId: 10 }],
-        })
-        const app = createUserAdminApp({ store, guards: allowAll() })
-
-        expect(await runActionOn(app)("deleteGroup", { groupId: "5" })).toEqual({ ok: true })
-        expect((await store.listGroups()).some((g) => g.id === 5)).toBe(false)
-        // 参照整合性: グループ削除で所属行も消えること (孤立行ゼロ)
-        expect((await store.listGroupMembers()).some((m) => m.groupId === 5)).toEqual(false)
-    })
-
-    it("denies every read and write when the guards throw (fail-closed mount)", async () => {
-        const store = createInMemoryUserAdminStore()
-        const denied = new Error("403")
-        const app = createUserAdminApp({
-            store,
-            guards: {
-                requireAccess: () => {
-                    throw denied
-                },
-            },
-        })
-
-        await expect(app.loader({ request: new Request("http://localhost/users"), params: {}, context: {} } as never)).rejects.toThrow("403")
-
-        const before = await store.listUsers()
-        // ガード拒否はそのまま伝播する ({ok:false} に握り潰さない)
-        await expect(runActionOn(app)("createUser", { displayName: "Attacker", email: "attacker@evil.example" })).rejects.toThrow("403")
-        // 拒否時にストアが一切変化しないこと
-        expect(await store.listUsers()).toEqual(before)
-    })
-
-    it("guards run BEFORE the body is read, and receive the incoming request", async () => {
-        const store = createInMemoryUserAdminStore()
-        const seen: string[] = []
-        const app = createUserAdminApp({
-            store,
-            guards: {
-                requireAccess: (request, ctx) => {
-                    seen.push(`${ctx.action}:${ctx.intent}:${new URL(request.url).pathname}`)
-                },
-            },
-        })
-
-        await app.loader({ request: new Request("http://localhost/users/groups"), params: {}, context: {} } as never)
-        await runActionOn(app)("createUser", { displayName: "A", email: "a@ex.com" })
-        expect(seen).toEqual(["read:loader:/users/groups", "create:createUser:/users"])
-    })
-
-    it("requires the CRUD verb each intent actually performs (delete is not covered by update)", async () => {
-        const store = createInMemoryUserAdminStore()
-        const asked: Array<{ action: string; intent: string }> = []
-        const app = createUserAdminApp({ store, guards: { requireAccess: (_r, ctx) => void asked.push({ ...ctx }) } })
-        const run = runActionOn(app)
-
-        await run("createUser", { displayName: "A", email: "a@ex.com" })
-        await run("updateGroup", { groupId: "1", name: "N" })
-        await run("deleteGroup", { groupId: "1" })
-        await run("addGroupMember", { groupId: "2", userId: "1" })
-        await run("removeGroupMember", { groupId: "2", userId: "1" })
-        await run("addAllowlistEntry", { pattern: "@x.com", type: "domain" })
-        await run("removeAllowlistEntry", { entryId: "1" })
-
-        expect(asked).toEqual([
-            { action: "create", intent: "createUser" },
-            { action: "update", intent: "updateGroup" },
-            { action: "delete", intent: "deleteGroup" },
-            { action: "create", intent: "addGroupMember" },
-            { action: "delete", intent: "removeGroupMember" },
-            { action: "create", intent: "addAllowlistEntry" },
-            { action: "delete", intent: "removeAllowlistEntry" },
-        ])
-    })
-
-    it("an update-only principal cannot delete (destructive intents are blocked, update ones pass)", async () => {
-        const store = createInMemoryUserAdminStore({ groups: [{ id: 1, groupKey: "g", name: "G", isActive: true }], users: [], groupMembers: [], allowlist: [] })
-        // update だけを許す主体を模す
-        const app = createUserAdminApp({
-            store,
-            guards: {
-                requireAccess: (_r, { action }) => {
-                    if (action !== "update" && action !== "read") throw new Error(`forbidden: ${action}`)
-                },
-            },
-        })
-        const run = runActionOn(app)
-
-        await expect(run("deleteGroup", { groupId: "1" })).rejects.toThrow("forbidden: delete")
-        expect((await store.listGroups()).some((g) => g.id === 1)).toBe(true) // 削除されていない
-        await expect(run("createUser", { displayName: "A", email: "a@ex.com" })).rejects.toThrow("forbidden: create")
-        // update 相当は通る
-        expect(await run("updateGroup", { groupId: "1", name: "G2" })).toEqual({ ok: true })
-    })
-
-    it("an unknown intent never reaches the guard nor the store", async () => {
-        const store = createInMemoryUserAdminStore()
-        let called = 0
-        const app = createUserAdminApp({ store, guards: { requireAccess: () => void called++ } })
-        expect(await runActionOn(app)("__proto__", {})).toEqual({ ok: false, error: "Unknown intent: __proto__" })
-        expect(await runActionOn(app)("constructor", {})).toEqual({ ok: false, error: "Unknown intent: constructor" })
-        expect(called).toBe(0)
-    })
-
-    it("rejects malformed ids and blank required fields instead of writing garbage", async () => {
-        const store = createInMemoryUserAdminStore({ users: [], groups: [], groupMembers: [], allowlist: [] })
-        const run = runActionOn(createUserAdminApp({ store, guards: allowAll() }))
-
-        // 欠落 / 非数値 / 0 以下の ID は書き込む前に弾き、理由を UI へ返す
-        expect(await run("updateUser", { displayName: "x", email: "y" })).toMatchObject({ ok: false, error: expect.stringMatching(/userId/) })
-        expect(await run("deleteGroup", { groupId: "abc" })).toMatchObject({ ok: false, error: expect.stringMatching(/groupId/) })
-        expect(await run("addGroupMember", { groupId: "1", userId: "0" })).toMatchObject({ ok: false, error: expect.stringMatching(/userId/) })
-        expect(await run("removeAllowlistEntry", { entryId: "-1" })).toMatchObject({ ok: false, error: expect.stringMatching(/entryId/) })
-        // 必須文字列の空送信も弾く
-        expect(await run("createUser", { displayName: "  ", email: "a@ex.com" })).toMatchObject({ ok: false, error: expect.stringMatching(/displayName/) })
-        expect(await run("createGroup", { groupKey: "k", name: "" })).toMatchObject({ ok: false, error: expect.stringMatching(/name/) })
-        // 明示的な true/false 以外の isActive も拒否 (破壊側を既定にしない)
-        expect(await run("toggleUserActive", { userId: "1" })).toMatchObject({ ok: false, error: expect.stringMatching(/isActive/) })
-
-        expect(await store.listUsers()).toHaveLength(0)
-        expect(await store.listGroups()).toHaveLength(0)
-        expect(await store.listGroupMembers()).toHaveLength(0)
-        expect(await store.listAllowlist()).toHaveLength(0)
-    })
-})
-
-describe("createUserAdminApp — ストア由来のエラーを UI へ届ける", () => {
-    it("ストアが投げた業務エラー (ロックアウト理由など) を {ok:false,error} で返す", async () => {
-        const store = createInMemoryUserAdminStore()
-        store.deleteGroup = async () => {
-            throw new Error("グループの削除は実行できません: 最後の管理者を失うためです")
-        }
-        const app = createUserAdminApp({ store, guards: { requireAccess: () => {} } })
-        expect(await runActionOn(app)("deleteGroup", { groupId: "1" })).toEqual({ ok: false, error: "グループの削除は実行できません: 最後の管理者を失うためです" })
-    })
-
-    it("ガードの拒否 (Response) は握り潰さずそのまま伝播する", async () => {
-        const store = createInMemoryUserAdminStore()
-        const denied = new Response("Forbidden", { status: 403 })
-        const app = createUserAdminApp({
-            store,
-            guards: {
-                requireAccess: () => {
-                    throw denied
-                },
-            },
-        })
-        await expect(runActionOn(app)("deleteGroup", { groupId: "1" })).rejects.toBe(denied)
-    })
-})