@aiquants/daily-report 0.20.0 → 0.21.0

package/src/client/components/daily-report-page.spec.tsx

@@ -1,119 +0,0 @@
-/**
- * Phase-gating tests for the stream-driven daily report page.
- * ストリーム駆動日報ページの局面ゲーティングテスト。
- *
- * ここで固定する不変条件のうち、特に重要なもの:
- *
- * - **最初のチャンク到着 (items > 0) で即座に本体を描画する** — 全件解決を待つ
- *   ゲートが存在しないことがストリーミング化の成果そのもの。
- * - **failed でも受信済みアイテムがあれば本体を描画し続ける** (データを捨てない)。
- * - **マウント時にセッションを ensure する** (clientLoader を経ないマウントの保険)。
- * - **auth-required はフルリロードへ倒す** (サーバー loader のリダイレクトに委譲)。
- */
-import { fireEvent, render, screen } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
-import type { DailyReportItem } from "../../shared/types"
-import type { DailyReportIdsStreamState } from "../streaming/daily-report-ids-stream-client"
-import { DailyReportPage } from "./daily-report-page"
-
-/** テストが差し替えるストリーム状態 (各テスト冒頭で上書きする)。 */
-let mockStreamState: DailyReportIdsStreamState = {
-    items: [],
-    loadedCount: 0,
-    totalCount: null,
-    phase: "idle",
-    isRevalidating: false,
-    hasCompletedOnce: false,
-    completedAt: null,
-    error: null,
-}
-
-const ensureMock = vi.fn()
-const retryMock = vi.fn()
-const reloadMock = vi.fn()
-
-vi.mock("../streaming/daily-report-ids-stream-session", () => ({
-    useDailyReportIdsStream: () => mockStreamState,
-    ensureDailyReportIdsStreamSession: (options: unknown) => ensureMock(options),
-    retryDailyReportIdsStream: () => retryMock(),
-    refreshDailyReportIdsStream: vi.fn(),
-    primeDailyReportIdsStreamSession: vi.fn(),
-    reloadDocument: () => reloadMock(),
-}))
-
-/** 重量級の子孫 (仮想スクロール・SSE) はマーカーへ置換し、ゲーティングだけを検証する。 */
-vi.mock("./daily-report-resolved-content", () => ({
-    DailyReportResolvedContent: () => <div data-testid="resolved-content" />,
-}))
-
-/** provider は initialItems の受け取りを記録する透過スタブにする。 */
-const providerItemsLog: DailyReportItem[][] = []
-vi.mock("../contexts/daily-report-action-context", () => ({
-    DailyReportActionProvider: ({ children, initialItems }: { children: React.ReactNode; initialItems?: DailyReportItem[] }) => {
-        providerItemsLog.push(initialItems ?? [])
-        return <div>{children}</div>
-    },
-}))
-
-/** 状態を部分上書きして描画するヘルパー。 */
-const renderPage = (partial: Partial<DailyReportIdsStreamState>) => {
-    mockStreamState = { ...mockStreamState, items: [], loadedCount: 0, totalCount: null, phase: "idle", isRevalidating: false, hasCompletedOnce: false, completedAt: null, error: null, ...partial }
-    return render(<DailyReportPage userId="ENC8" />)
-}
-
-const twoItems: DailyReportItem[] = [
-    { reportHubId: 2, businessDate: "2026-08-02" },
-    { reportHubId: 1, businessDate: "2026-08-01" },
-]
-
-describe("DailyReportPage / 局面ゲーティング", () => {
-    it("未受信 (idle/streaming) はローディング画面を表示する", () => {
-        renderPage({ phase: "streaming" })
-        expect(screen.getByText("日報 ID を読み込み中です...")).toBeInTheDocument()
-        expect(screen.queryByTestId("resolved-content")).not.toBeInTheDocument()
-    })
-
-    it("最初のチャンク到着 (items > 0) で本体を描画し、provider へアイテムを渡す", () => {
-        providerItemsLog.length = 0
-        renderPage({ phase: "streaming", items: twoItems, loadedCount: 2 })
-        expect(screen.getByTestId("resolved-content")).toBeInTheDocument()
-        expect(providerItemsLog.at(-1)).toEqual(twoItems)
-    })
-
-    it("空リストの完走 (complete) は本体を描画する (0 件表示は下層の責務)", () => {
-        renderPage({ phase: "complete", hasCompletedOnce: true })
-        expect(screen.getByTestId("resolved-content")).toBeInTheDocument()
-    })
-
-    it("未受信のまま failed ならエラー画面を出し、再試行がセッション retry を呼ぶ", () => {
-        retryMock.mockClear()
-        renderPage({ phase: "failed", error: new Error("x") })
-        expect(screen.getByText("日報データの読み込みに失敗しました。")).toBeInTheDocument()
-        fireEvent.click(screen.getByTestId("daily-report-load-error-retry"))
-        expect(retryMock).toHaveBeenCalledTimes(1)
-    })
-
-    it("failed でも受信済みアイテムがあれば本体を描画し続ける", () => {
-        renderPage({ phase: "failed", items: twoItems, loadedCount: 2, error: new Error("x") })
-        expect(screen.getByTestId("resolved-content")).toBeInTheDocument()
-        expect(screen.queryByText("日報データの読み込みに失敗しました。")).not.toBeInTheDocument()
-    })
-
-    it("マウント時にセッションを ensure する (userKey = 難読化ユーザー ID)", () => {
-        ensureMock.mockClear()
-        renderPage({ phase: "streaming" })
-        expect(ensureMock).toHaveBeenCalledWith({ apiBasePath: "/daily_report/api", userKey: "ENC8" })
-    })
-
-    it("auth-required はドキュメント再読込へ倒す (サーバー loader のリダイレクトに委譲)", () => {
-        reloadMock.mockClear()
-        renderPage({ phase: "auth-required" })
-        expect(reloadMock).toHaveBeenCalledTimes(1)
-    })
-
-    it("auth-required 以外の局面ではドキュメント再読込しない", () => {
-        reloadMock.mockClear()
-        renderPage({ phase: "streaming", items: twoItems, loadedCount: 2 })
-        expect(reloadMock).not.toHaveBeenCalled()
-    })
-})

package/src/client/components/daily-report-page.tsx

@@ -1,140 +0,0 @@
-/**
- * Top-level daily-report page content (chrome-agnostic, stream-driven).
- * アプリのレイアウトに依存しない日報ページ本体コンポーネント (ストリーム駆動)。
- *
- * ID 一覧はモジュール常駐の NDJSON ストリームセッションから購読し、最初の
- * チャンク到着と同時に一覧を描画する (全件解決を待つ Await ゲートは廃止)。
- * 再訪時はセッションに残る受信済みデータで即座に復元し、鮮度はバックグラウンド
- * 再検証 (SWR) と SSE が担う。アプリ側のルートは本コンポーネントを自前の
- * レイアウトで包み、`config` でヘッダー描画・パス・ラベル名を注入する。
- */
-import { useEffect } from "react"
-import type { DailyReportUser } from "../../shared/types"
-import { type DailyReportClientConfigInput, DailyReportConfigProvider, useDailyReportConfig } from "../config-context"
-import { DailyReportActionProvider } from "../contexts/daily-report-action-context"
-import { DailyReportErrorProvider } from "../contexts/daily-report-error-context"
-import { ensureDailyReportIdsStreamSession, reloadDocument, retryDailyReportIdsStream, useDailyReportIdsStream } from "../streaming/daily-report-ids-stream-session"
-import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
-import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
-import { DailyReportResolvedContent } from "./daily-report-resolved-content"
-
-/**
- * Error display when the ids stream terminally failed before any data arrived.
- * データ未受信のまま ID ストリームが力尽きたときのエラー表示コンポーネント。
- *
- * 再試行はストリームセッションの retry へ直結する (受信済みカーソルから再開)。
- */
-export const DailyReportLoadError = () => {
-    const { title, renderHeader } = useDailyReportConfig()
-    return (
-        <>
-            {renderHeader({ title, annotation: <span className="font-bold text-red-500">Error</span> })}
-            <div className="h-full bg-slate-50 p-2">
-                <div className="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col gap-6">
-                    <div className="flex h-full flex-1 flex-col items-center justify-center gap-4 rounded-lg border border-red-200 bg-white p-4 text-slate-500 shadow-sm dark:border-red-900 dark:bg-slate-900/70 dark:text-slate-400">
-                        <p className="font-medium text-red-600">日報データの読み込みに失敗しました。</p>
-                        <button
-                            type="button"
-                            data-testid="daily-report-load-error-retry"
-                            onClick={() => retryDailyReportIdsStream()}
-                            className="rounded bg-slate-100 px-4 py-2 text-slate-700 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">
-                            再読み込み
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-/**
- * Loading screen shown only until the first stream chunk arrives.
- * 最初のストリームチャンクが届くまでの間だけ表示するローディング画面。
- */
-export const DailyReportLoading = () => {
-    const { title, renderHeader } = useDailyReportConfig()
-    return (
-        <>
-            {renderHeader({
-                title,
-                annotation: (
-                    <div className="flex flex-wrap items-center gap-2 leading-none">
-                        <DailyReportIdsStreamStatus />
-                        <span>総件数: 読み込み中...</span>
-                        <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
-                    </div>
-                ),
-            })}
-            <div className="h-full bg-slate-50 p-2">
-                <div className="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col gap-6">
-                    <div className="flex h-full flex-1 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-300">日報 ID を読み込み中です...</div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-export type DailyReportPageProps = {
-    /** 表示中ユーザー (楽観的コメントの作者名等に使用)。 */
-    user?: DailyReportUser
-    /** 難読化済みの内部ユーザー ID (未登録ユーザーは null)。 */
-    userId?: string | null
-    /** クライアント設定の部分上書き (ヘッダー描画・パス・ラベル名・フィールドラベルなど)。 */
-    config?: DailyReportClientConfigInput
-}
-
-/**
- * Stream-driven page body: session bootstrap, phase gating, and provider wiring.
- * ストリーム駆動のページ本体。セッション確立・局面ゲーティング・プロバイダー結線を担う。
- */
-const DailyReportPageInner = ({ user, userId }: Omit<DailyReportPageProps, "config">) => {
-    const { apiBasePath } = useDailyReportConfig()
-    const stream = useDailyReportIdsStream()
-
-    /**
-     * ストリームセッション確立の保険。
-     * 通常は clientLoader が先に確立するが、clientLoader を経ないマウントや
-     * ユーザー切替 (userKey 不一致でセッション再生成) をここで拾う。
-     * 依存配列: apiBasePath / userId (いずれかの変化で再確認)。
-     * クリーンアップ: なし (セッションはモジュール常駐で、アンマウント後も生存させる)。
-     */
-    useEffect(() => {
-        ensureDailyReportIdsStreamSession({ apiBasePath, userKey: userId ?? null })
-    }, [apiBasePath, userId])
-
-    /**
-     * 認証切れ (ストリームが 401/403) はドキュメントのフルリロードへ倒し、
-     * サーバー loader のログインリダイレクトに委譲する。
-     * 依存配列: stream.phase。クリーンアップ: なし。
-     */
-    useEffect(() => {
-        if (stream.phase === "auth-required") {
-            reloadDocument()
-        }
-    }, [stream.phase])
-
-    // 1 件でも届いたら (または空リストで完走したら) 本体を描画する
-    const showContent = stream.items.length > 0 || stream.phase === "complete"
-    return (
-        // key でユーザーごとにプロバイダーをリマウントする。リロード無しのユーザー切替
-        // (再ログイン・成り代わり) で items / removedIds / 保留キュー等の状態が旧ユーザーの
-        // まま残ると、render-phase マージが旧ユーザーの行を新ユーザーの一覧へ持ち越す
-        // エラーサーフェスはユーザー切替のリマウント境界より外側 (バナーは切替を跨いで消えてよい)。
-        // アクションプロバイダーはこの notifyError を購読して失敗を可視化する
-        <DailyReportErrorProvider>
-            <DailyReportActionProvider key={userId ?? "anonymous"} user={user} initialItems={stream.items} userId={userId}>
-                {showContent ? <DailyReportResolvedContent userId={userId} /> : stream.phase === "failed" ? <DailyReportLoadError /> : <DailyReportLoading />}
-            </DailyReportActionProvider>
-        </DailyReportErrorProvider>
-    )
-}
-
-/**
- * Chrome-agnostic daily report page with client configuration provider.
- * 設定プロバイダー込みの日報ページコンポーネント。
- */
-export const DailyReportPage = ({ config, ...rest }: DailyReportPageProps) => (
-    <DailyReportConfigProvider config={config}>
-        <DailyReportPageInner {...rest} />
-    </DailyReportConfigProvider>
-)

package/src/client/components/daily-report-resize-panels.spec.tsx

@@ -1,307 +0,0 @@
-/**
- * Tests for resize panels integration in DailyReportList (desktop and mobile layouts).
- * DailyReportList におけるリサイズパネル統合 (デスクトップおよびモバイルレイアウト) のテスト。
- */
-
-import { fireEvent, render, screen } from "@testing-library/react"
-import { type ReactNode, useState } from "react"
-import { beforeEach, describe, expect, it, vi } from "vitest"
-import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
-import { DailyReportConfigProvider } from "../config-context"
-
-vi.mock("@aiquants/virtualscroll", async () => {
-    const { forwardRef: fwd, useImperativeHandle: useHandle } = await import("react")
-    return {
-        tapScrollCircleSampleVisual: () => null,
-        VirtualScroll: fwd((props: { testId?: string; itemCount: number; getItem: (index: number) => unknown; children: (item: unknown, index: number) => ReactNode }, ref: React.Ref<unknown>) => {
-            useHandle(ref, () => ({ scrollTo: () => 0, scrollToIndex: () => {}, getScrollPosition: () => 0, getContentSize: () => 0, getViewportSize: () => 0, updateItemSize: () => {}, focusItemAtIndex: () => {} }))
-            return (
-                <div data-testid={props.testId}>
-                    {Array.from({ length: props.itemCount }, (_, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
-                        <div key={index}>{props.children(props.getItem(index), index)}</div>
-                    ))}
-                </div>
-            )
-        }),
-    }
-})
-
-vi.mock("../contexts/daily-report-action-context", async (importOriginal) => {
-    const actual = await importOriginal<typeof import("../contexts/daily-report-action-context")>()
-    const noop = async () => {}
-    return {
-        ...actual,
-        useDailyReportActionContext: () => ({
-            pendingAddCommentIds: { current: new Map() },
-            pendingDeleteCommentIds: { current: new Map() },
-            pendingReadUpdates: { current: new Map() },
-            pendingStarUpdates: { current: new Map() },
-            resolvedIdMap: { current: new Map() },
-            version: 0,
-            items: [],
-            user: null,
-            isSseEnabled: false,
-            toggleSse: () => {},
-            addComment: noop,
-            deleteComment: noop,
-            toggleStar: noop,
-            toggleRead: noop,
-            createReport: async () => 0,
-            updateReport: noop,
-            publishReport: noop,
-            deleteReport: noop,
-            removeStaleItem: () => {},
-            refetchData: noop,
-            clearCacheAndRefetch: noop,
-        }),
-    }
-})
-
-const detailRef: { current: DailyReportDetail | null } = { current: null }
-vi.mock("../hooks/use-daily-report", async (importOriginal) => {
-    const actual = await importOriginal<typeof import("../hooks/use-daily-report")>()
-    return {
-        ...actual,
-        useDailyReportDetail: () => ({ report: detailRef.current, error: null, isLoading: false, isRefetching: false }),
-        useDailyReportPrefetch: () => () => {},
-    }
-})
-
-const { DailyReportList } = await import("./daily-report-list")
-
-const REPORT_HUB_ID = 100
-const item: DailyReportItem = { reportHubId: REPORT_HUB_ID, businessDate: "2026-09-08" }
-
-const buildDetail = (): DailyReportDetail => ({
-    reportHubId: REPORT_HUB_ID,
-    date: "2026-09-08",
-    interviewers: [],
-    externalComments: [],
-    isRead: false,
-    isStarred: false,
-    labels: [],
-    postedComments: [],
-    attachments: [],
-})
-
-const renderWithConfig = (node: ReactNode) =>
-    render(
-        <DailyReportConfigProvider
-            config={{
-                apiBasePath: "/daily_report/api",
-                fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" },
-            }}>
-            {node}
-        </DailyReportConfigProvider>,
-    )
-
-describe("DailyReportList / リサイズパネル統合", () => {
-    beforeEach(() => {
-        detailRef.current = buildDetail()
-        vi.stubGlobal(
-            "ResizeObserver",
-            class {
-                observe() {}
-                unobserve() {}
-                disconnect() {}
-            },
-        )
-    })
-
-    describe("デスクトップ表示 (isMobileLayout === false)", () => {
-        beforeEach(() => {
-            vi.stubGlobal(
-                "matchMedia",
-                vi.fn((query: string) => ({
-                    matches: false,
-                    media: query,
-                    onchange: null,
-                    addEventListener: vi.fn(),
-                    removeEventListener: vi.fn(),
-                    addListener: vi.fn(),
-                    removeListener: vi.fn(),
-                    dispatchEvent: vi.fn(),
-                })),
-            )
-        })
-
-        it("PanelGroup が水平方向で描画される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const panelGroup = container.querySelector('[data-panel-group-direction="horizontal"]')
-            expect(panelGroup).toBeInTheDocument()
-        })
-
-        it("左側の日報一覧パネル (Panel) が正しく配置される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const listPanel = container.querySelector('[data-panel-id="daily-report-list-panel"]')
-            expect(listPanel).toBeInTheDocument()
-            expect(listPanel?.querySelector('[data-testid="daily-report-list"]')).toBeInTheDocument()
-        })
-
-        it("右側の詳細ペインパネル (Panel) が正しく配置される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const detailPanel = container.querySelector('[data-panel-id="daily-report-detail-panel"]')
-            expect(detailPanel).toBeInTheDocument()
-            expect(detailPanel?.querySelector('[data-testid="daily-report-side-pane"]')).toBeInTheDocument()
-        })
-
-        it("リサイズハンドルがアクセシビリティ属性とインジケーターを備えて描画される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')
-            expect(handle).toBeInTheDocument()
-            expect(handle).toHaveAttribute("aria-label")
-            // 支援技術が読み上げるのは、このパッケージが与えた名前でなければならない
-            // (@aiquants/resize-panels 1.x は利用者の aria-label を黙って捨て、自前の英語名を出していた)
-            expect(handle?.getAttribute("aria-label")).toBe("日報一覧と詳細ペインの境界リサイズ")
-
-            // 視覚インジケーターおよび内部バーの存在検証
-            const indicator = handle?.querySelector("[data-resize-handle-indicator]")
-            expect(indicator).toBeInTheDocument()
-            const indicatorBar = indicator?.querySelector("[data-resize-handle-indicator-bar]")
-            expect(indicatorBar).toBeInTheDocument()
-        })
-
-        it("リサイズハンドルはキーボード操作可能なボタン要素である", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
-            expect(handle).toBeInTheDocument()
-            expect(handle.tagName).toBe("BUTTON")
-            expect(handle.type).toBe("button")
-            expect(handle.disabled).toBe(false)
-        })
-
-        it("詳細ペインパネルに境界侵食防止用の左パディングクラス (pl-1.5) が付与されている", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const detailPanel = container.querySelector('[data-panel-id="daily-report-detail-panel"]')
-            expect(detailPanel).toBeInTheDocument()
-            expect(detailPanel?.className).toContain("pl-1.5")
-        })
-
-        it("キーボードリサイズ操作により矢印キー操作が安全に処理される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
-            expect(handle).toBeInTheDocument()
-
-            // 左右の矢印キーでリサイズを実行
-            fireEvent.keyDown(handle, { key: "ArrowRight" })
-            fireEvent.keyDown(handle, { key: "ArrowLeft" })
-            expect(handle).toBeInTheDocument()
-        })
-
-        it("ポインタードラッグ操作によるリサイズ処理が安全に完了する", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
-            expect(handle).toBeInTheDocument()
-
-            fireEvent.pointerDown(handle, { clientX: 360, pointerId: 1 })
-            fireEvent.pointerMove(handle, { clientX: 420, pointerId: 1 })
-            fireEvent.pointerUp(handle, { clientX: 420, pointerId: 1 })
-            expect(handle).toBeInTheDocument()
-        })
-
-        it("データが 0 件のとき、デスクトップ表示で空状態表示と PanelGroup が整合して描画される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[]} selectedReportHubId={null} onSelectItem={() => {}} />)
-            const panelGroup = container.querySelector('[data-panel-group-direction="horizontal"]')
-            expect(panelGroup).toBeInTheDocument()
-            expect(screen.getByText("データがありません")).toBeInTheDocument()
-            expect(screen.getByText("左側の一覧から日報を選択してください。")).toBeInTheDocument()
-        })
-
-        it('ルート要素に data-testid="daily-report-root" が付与される', () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            expect(container.querySelector('[data-testid="daily-report-root"]')).toBeInTheDocument()
-        })
-    })
-
-    describe("コンテナ幅狭小化時のフォールバック (isContainerNarrow === true)", () => {
-        let resizeCallback: (entries: { target: Element; contentRect: { width: number } }[]) => void
-
-        beforeEach(() => {
-            vi.stubGlobal(
-                "matchMedia",
-                vi.fn((query: string) => ({
-                    matches: false, // デスクトップ扱い
-                    media: query,
-                    onchange: null,
-                    addEventListener: vi.fn(),
-                    removeEventListener: vi.fn(),
-                    addListener: vi.fn(),
-                    removeListener: vi.fn(),
-                    dispatchEvent: vi.fn(),
-                })),
-            )
-
-            vi.stubGlobal(
-                "ResizeObserver",
-                class {
-                    constructor(callback: (entries: { target: Element; contentRect: { width: number } }[]) => void) {
-                        resizeCallback = callback
-                    }
-                    observe(el: Element) {
-                        // 460px 未満の狭小コンテナ幅を即時シミュレート
-                        resizeCallback([{ target: el, contentRect: { width: 400 } }])
-                    }
-                    unobserve() {}
-                    disconnect() {}
-                },
-            )
-        })
-
-        it("利用可能幅が狭小化した場合は 2 カラムではなく 1 カラム表示へフォールバックする", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            // 狭小幅時は PanelGroup がアンマウントされ、一覧のみが描画される
-            expect(container.querySelector('[data-panel-group-direction="horizontal"]')).toBeNull()
-            expect(container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')).toBeNull()
-            expect(screen.getByTestId("daily-report-list")).toBeInTheDocument()
-        })
-    })
-
-    describe("モバイル表示 (isMobileLayout === true)", () => {
-        beforeEach(() => {
-            vi.stubGlobal(
-                "matchMedia",
-                vi.fn((query: string) => ({
-                    matches: true,
-                    media: query,
-                    onchange: null,
-                    addEventListener: vi.fn(),
-                    removeEventListener: vi.fn(),
-                    addListener: vi.fn(),
-                    removeListener: vi.fn(),
-                    dispatchEvent: vi.fn(),
-                })),
-            )
-        })
-
-        it("PanelGroup および PanelResizeHandle は描画されず、一覧が直接描画される", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            expect(container.querySelector('[data-panel-group-direction="horizontal"]')).toBeNull()
-            expect(container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')).toBeNull()
-            expect(screen.getByTestId("daily-report-list")).toBeInTheDocument()
-        })
-
-        it("初期表示時にモバイルオーバーレイが自動展開されないこと", () => {
-            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
-            expect(container.querySelector('aside[role="dialog"]')).toBeNull()
-        })
-
-        it("アイテムタップでモバイルオーバーレイが展開され、--aqdr-overlay-right のインラインスタイルが適用されること", () => {
-            const TestComponent = () => {
-                const [selectedId, setSelectedId] = useState<number | null>(null)
-                return <DailyReportList dailyReportItems={[item]} selectedReportHubId={selectedId} onSelectItem={setSelectedId} />
-            }
-            const { container } = renderWithConfig(<TestComponent />)
-            expect(container.querySelector('[data-daily-report-mobile-overlay="true"]')).toBeNull()
-
-            const card = container.querySelector(`[data-daily-report-button="${REPORT_HUB_ID}"]`)
-            expect(card).not.toBeNull()
-            if (!card) throw new Error("card not found")
-            fireEvent.keyDown(card, { key: "Enter" })
-
-            const overlayRoot = container.querySelector('[data-daily-report-mobile-overlay="true"]')
-            expect(overlayRoot).not.toBeNull()
-            expect(overlayRoot).toHaveStyle({ right: "var(--aqdr-overlay-right, 0px)" })
-        })
-    })
-})