feat(admin): セッション切れの再読み込みプロンプト + セクションの URL ハッシュ保持

Google ID トークンは約 1 時間で失効し、これまでは各ビューに
「Invalid ID token」が生のまま出るだけで不親切だった。

- API クライアント (admin / bug-report) は 401 で
  smalruby-admin:unauthorized をブロードキャスト
- App はログイン済みのときだけ購読し、全画面の「セッションの有効期限が
  切れました」オーバーレイ + 再読み込みボタンを表示
  (ログイン時の 401 は従来どおり通常エラー)
- 表示中セクションは URL ハッシュ (#/classrooms 等) に保持。
  再読み込み → 再ログイン後に元のセクションへ復帰する
  (localStorage は使わない方針)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: smalruby3-editor-bot[bot]

docs/admin/README.md

@@ -26,6 +26,7 @@
 - **deny-by-default 許可リスト**: `SmalrubyAdmins` テーブル（PK: email、RETAIN）への存在照合のみ。登録は AWS コンソール手動操作が唯一の経路（アプリ内に管理者管理 UI は無い・F4）
 - **sub 固定**: 初回ログインで Google `sub` を行に固定。以後 email 一致でも sub 不一致は 403（email 再利用防御）
 - トークンは**モジュールメモリのみ**（localStorage に保存しない・N1）。リロード時は再ログイン
+- **セッション切れ（約 1 時間）**: API が 401 を返すと全画面の再読み込みプロンプトを表示。表示中のセクションは **URL ハッシュ**（`#/classrooms` 等）に保持しているため、再読み込み → 再ログイン後に元のセクションへ復帰する（localStorage 不使用）
 - すべての管理操作は `audit()` 構造化ログ（prod の CloudWatch 保持は **1 年**）
 - バグ報告の閲覧は bug-report 側の既存レジストリ `BugReportAdmins`（email）で認可される（両方への登録が必要）
 

packages/admin/src/components/app.css

@@ -220,3 +220,33 @@ body {
     white-space: pre-wrap;
     word-break: break-all;
 }
+
+.admin-session-expired {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: hsla(220, 30%, 20%, 0.55);
+    z-index: 100;
+}
+
+.admin-session-expired-card {
+    max-width: 26rem;
+    padding: 1.5rem;
+    border-radius: 0.6rem;
+    background: white;
+    box-shadow: 0 8px 24px hsla(220, 30%, 20%, 0.25);
+    text-align: center;
+}
+
+.admin-session-expired-card button {
+    margin-top: 1rem;
+    padding: 0.5rem 1.2rem;
+    border: none;
+    border-radius: 0.4rem;
+    background: hsl(260, 60%, 55%);
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+}

packages/admin/src/components/app.jsx

@@ -16,15 +16,40 @@ const SECTIONS = [
     {key: 'bug-reports', label: 'バグ報告'}
 ];
 
+// The current section lives in the URL hash (#/classrooms) so a full reload
+// — including the one we prompt for on session expiry — lands the operator
+// back on the same section after re-login. Deliberately not localStorage.
+const sectionFromHash = () => {
+    const key = window.location.hash.replace(/^#\/?/, '');
+    return SECTIONS.some(s => s.key === key) ? key : 'shared';
+};
+
 // signed-out → checking → authorized | forbidden | error
 const App = () => {
     const [phase, setPhase] = useState('signed-out');
     const [me, setMe] = useState(null);
     const [errorMessage, setErrorMessage] = useState('');
-    const [section, setSection] = useState('shared');
+    const [section, setSection] = useState(sectionFromHash);
+    const [sessionExpired, setSessionExpired] = useState(false);
     const buttonRef = useRef(null);
 
-    const handleSection = useCallback(e => setSection(e.currentTarget.dataset.section), []);
+    const handleSection = useCallback(e => {
+        const key = e.currentTarget.dataset.section;
+        setSection(key);
+        window.history.replaceState(null, '', `#/${key}`);
+    }, []);
+
+    const handleReload = useCallback(() => window.location.reload(), []);
+
+    // Google ID tokens live ~1 hour and the SPA keeps them in memory only, so
+    // an expired session surfaces as API 401s. The clients broadcast those;
+    // show one clear prompt instead of per-view raw errors.
+    useEffect(() => {
+        if (phase !== 'authorized') return () => {};
+        const handleUnauthorized = () => setSessionExpired(true);
+        window.addEventListener('smalruby-admin:unauthorized', handleUnauthorized);
+        return () => window.removeEventListener('smalruby-admin:unauthorized', handleUnauthorized);
+    }, [phase]);
 
     const handleCredential = useCallback(async token => {
         setIdToken(token);
@@ -89,6 +114,24 @@ const App = () => {
                     {section === 'classrooms' && <ClassroomsView />}
                     {section === 'bug-reports' && <BugReportsView />}
                 </main>
+                {sessionExpired && (
+                    <div
+                        className="admin-session-expired"
+                        data-testid="admin-session-expired"
+                    >
+                        <div className="admin-session-expired-card">
+                            <p>
+                                {'セッションの有効期限が切れました（ログインから約 1 時間）。'}
+                                {'再読み込みして、もう一度ログインしてください。いまのページに戻ります。'}
+                            </p>
+                            <button
+                                data-testid="admin-session-reload"
+                                type="button"
+                                onClick={handleReload}
+                            >{'再読み込みしてログイン'}</button>
+                        </div>
+                    </div>
+                )}
             </div>
         );
     }

packages/admin/src/lib/admin-api.js

@@ -47,6 +47,12 @@ const request = async (method, path, body) => {
     if (response.status === 204) return null;
     const data = await response.json().catch(() => ({}));
     if (!response.ok) {
+        // Google ID tokens expire after ~1 hour: broadcast 401s so the app
+        // shell can prompt for a reload (no listener is attached while the
+        // login probe itself runs, so a bad first login stays a plain error).
+        if (response.status === 401 && typeof window !== 'undefined') {
+            window.dispatchEvent(new Event('smalruby-admin:unauthorized'));
+        }
         const error = new Error(data.error || `API error ${response.status}`);
         error.status = response.status;
         throw error;

packages/admin/src/lib/bug-report-api.js

@@ -24,6 +24,10 @@ const get = async path => {
     });
     const data = await response.json().catch(() => ({}));
     if (!response.ok) {
+        // Same session-expiry broadcast as admin-api (the token is shared).
+        if (response.status === 401 && typeof window !== 'undefined') {
+            window.dispatchEvent(new Event('smalruby-admin:unauthorized'));
+        }
         const error = new Error(data.error || `API error ${response.status}`);
         error.status = response.status;
         throw error;

packages/admin/test/unit/admin-api.test.js

@@ -48,3 +48,38 @@ describe('admin-api', () => {
         expect(await request('DELETE', '/admin/whatever')).toBeNull();
     });
 });
+
+describe('session expiry broadcast (401)', () => {
+    beforeEach(() => {
+        setIdToken('token-1');
+        global.fetch = jest.fn();
+    });
+
+    test('a 401 dispatches smalruby-admin:unauthorized before rejecting', async () => {
+        global.fetch.mockResolvedValue({
+            ok: false,
+            status: 401,
+            json: () => Promise.resolve({error: 'Invalid ID token'})
+        });
+        const listener = jest.fn();
+        window.addEventListener('smalruby-admin:unauthorized', listener);
+
+        await expect(request('GET', '/admin/me')).rejects.toMatchObject({status: 401});
+        expect(listener).toHaveBeenCalledTimes(1);
+        window.removeEventListener('smalruby-admin:unauthorized', listener);
+    });
+
+    test('non-401 errors do not broadcast', async () => {
+        global.fetch.mockResolvedValue({
+            ok: false,
+            status: 403,
+            json: () => Promise.resolve({error: 'Not an administrator'})
+        });
+        const listener = jest.fn();
+        window.addEventListener('smalruby-admin:unauthorized', listener);
+
+        await expect(request('GET', '/admin/me')).rejects.toMatchObject({status: 403});
+        expect(listener).not.toHaveBeenCalled();
+        window.removeEventListener('smalruby-admin:unauthorized', listener);
+    });
+});

packages/admin/test/unit/app.test.jsx

@@ -63,6 +63,49 @@ describe('App auth flow', () => {
         await waitFor(() => expect(screen.getByTestId('admin-error')).toHaveTextContent('boom'));
     });
 
+    test('the initial section is restored from the URL hash (session-expiry reload)', async () => {
+        window.location.hash = '#/classrooms';
+        mockGetDevLoginToken.mockReturnValue('dev-token');
+        mockFetchMe.mockResolvedValue({email: 'admin@example.com', name: null, stage: 'stg'});
+
+        render(<App />);
+        await waitFor(() => expect(screen.getByTestId('admin-dashboard')).toBeInTheDocument());
+        expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('クラス・課題');
+        window.location.hash = '';
+    });
+
+    test('an expired session (API 401) shows the reload prompt instead of raw errors', async () => {
+        mockGetDevLoginToken.mockReturnValue('dev-token');
+        mockFetchMe.mockResolvedValue({email: 'admin@example.com', name: null, stage: 'stg'});
+
+        render(<App />);
+        await waitFor(() => expect(screen.getByTestId('admin-dashboard')).toBeInTheDocument());
+        expect(screen.queryByTestId('admin-session-expired')).not.toBeInTheDocument();
+
+        // Any API client broadcasts this on 401 (token lifetime ~1 hour).
+        fireEvent(window, new Event('smalruby-admin:unauthorized'));
+        expect(screen.getByTestId('admin-session-expired')).toBeInTheDocument();
+        expect(screen.getByTestId('admin-session-expired').textContent).toContain('有効期限');
+
+        const reloadMock = jest.fn();
+        const original = window.location;
+        delete window.location;
+        window.location = {...original, reload: reloadMock};
+        fireEvent.click(screen.getByTestId('admin-session-reload'));
+        expect(reloadMock).toHaveBeenCalled();
+        window.location = original;
+    });
+
+    test('a 401 before authorization does NOT trigger the session overlay', async () => {
+        mockGetDevLoginToken.mockReturnValue('dev-token');
+        mockFetchMe.mockRejectedValue(Object.assign(new Error('Invalid ID token'), {status: 401}));
+
+        render(<App />);
+        await waitFor(() => expect(screen.getByTestId('admin-error')).toBeInTheDocument());
+        fireEvent(window, new Event('smalruby-admin:unauthorized'));
+        expect(screen.queryByTestId('admin-session-expired')).not.toBeInTheDocument();
+    });
+
     test('the section nav switches between management views (issue #1084)', async () => {
         mockGetDevLoginToken.mockReturnValue('dev-token');
         mockFetchMe.mockResolvedValue({email: 'admin@example.com', name: null, stage: 'stg'});