@aiquants/daily-report 0.6.2 → 0.8.0

package/src/client/components/daily-report-detail-list.tsx

@@ -3,7 +3,7 @@
  * useFetcher ベースのデータフックで日報詳細を提供する仮想スクロールビュー。
  */
 
-import { type ScrollBarTapCircleOptions, type ScrollBarThumbOverlayRenderProps, tapScrollCircleSampleVisual, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
+import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 
 /**
  * Handle type augmented with E2E test helper methods.
@@ -25,8 +25,10 @@ import { useDailyReportDetail, useDailyReportPrefetch } from "../hooks/use-daily
 import { useDailyReportComments } from "../hooks/use-daily-report-comments"
 import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
 import { cn } from "../ui/cn"
-import { EMPTY_ITEM, FAST_SCROLL_INERTIA_OPTIONS, FAST_SCROLL_WHEEL_MULTIPLIER, PREFETCH_LOOKAHEAD, PREFETCH_MAX_DATES, VIRTUAL_SCROLL_OVERSCAN_COUNT } from "../utils/constants"
+import { CONTENT_DRAG_POINTER_INPUTS, EMPTY_ITEM, FAST_SCROLL_INERTIA_OPTIONS, FAST_SCROLL_WHEEL_MULTIPLIER, PREFETCH_LOOKAHEAD, PREFETCH_MAX_DATES, SCROLL_BAR_WIDTH, TAP_SCROLL_CIRCLE_OPTIONS, VIRTUAL_SCROLL_OVERSCAN_COUNT, WHEEL_RESET_TIMEOUT_MS } from "../utils/constants"
 import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportAttachmentIndicator } from "./daily-report-attachment-indicator"
+import { DailyReportAttachmentList } from "./daily-report-attachment-list"
 import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
 import { DailyReportEditForm } from "./daily-report-edit-form"
 import { UnreadIndicator } from "./unread-indicator"
@@ -230,7 +232,7 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
             wheelResetTimerRef.current = window.setTimeout(() => {
                 setIsWheelScrollActive(false)
                 wheelResetTimerRef.current = null
-            }, 240)
+            }, WHEEL_RESET_TIMEOUT_MS)
         }
         el.addEventListener("wheel", onWheel, { passive: true })
         return () => {
@@ -270,8 +272,6 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
         [getItem],
     )
 
-    const tapScrollCircleOptions = useMemo<ScrollBarTapCircleOptions>(() => ({ enabled: true, renderVisual: tapScrollCircleSampleVisual }), [])
-
     /**
      * Updates viewport height when item count changes.
      * アイテム数変更時にビューポート高さを更新する。
@@ -311,11 +311,14 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
                     initialScrollOffset={initialScrollOffset}
                     overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
                     scrollBarOptions={{
-                        width: 8,
-                        tapScrollCircleOptions: tapScrollCircleOptions,
+                        width: SCROLL_BAR_WIDTH,
+                        tapScrollCircleOptions: TAP_SCROLL_CIRCLE_OPTIONS,
                         renderThumbOverlay: renderThumbOverlay,
                     }}
                     behaviorOptions={{
+                        // ドラッグスクロールは無効化せず、**ポインタ種別で絞る**。
+                        // 丸ごと切るとタッチ端末からスクロール手段が消える (定数の注記参照)
+                        pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                         wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
                         inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                     }}
@@ -472,6 +475,9 @@ const DailyReportHeader = ({
     const { sourceTypeConfigs } = useDailyReportConfig()
     return (
         <div className="flex flex-wrap items-center gap-2 font-medium text-slate-600 text-xs">
+            {/* 添付の有無を一目判別できるようにする。仕様書が定める
+                [sourceType] [Star] [Read] の相対順は崩さず、その手前に置く */}
+            <DailyReportAttachmentIndicator count={report.attachments.length} label={fieldLabels.attachments} />
             {(() => {
                 const sourceType = itemSourceType ?? report?.sourceType
                 const sourceConfig = resolveSourceTypeConfig(sourceType, sourceTypeConfigs)
@@ -673,6 +679,7 @@ const DailyReportResolvedItem = ({ item, report, onCommentAdded, userId, onDoubl
                                 </ul>
                             </div>
                         )}
+                        <DailyReportAttachmentList attachments={report.attachments} />
                         {uiComments.length > 0 && (
                             <div className="flex flex-col gap-2">
                                 <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.comments}</span>

package/src/client/components/daily-report-ids-stream-status.spec.tsx

@@ -0,0 +1,93 @@
+/**
+ * Per-phase rendering tests for the ids stream status badge.
+ * ids ストリーム状態バッジの局面別描画テスト。
+ *
+ * ここで固定する不変条件のうち、特に重要なもの:
+ *
+ * - **進捗率は 0-100 にクランプされ、total 0/null では表示されない** (0 除算・>100% 防止)。
+ * - **failed バッジの再試行ボタンはセッション retry へ直結する。**
+ * - **idle / 完走済み (再検証なし) では何も描画しない** (ヘッダーを汚さない)。
+ */
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import type { DailyReportIdsStreamState } from "../streaming/daily-report-ids-stream-client"
+import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
+
+let mockStreamState: DailyReportIdsStreamState
+const retryMock = vi.fn()
+
+vi.mock("../streaming/daily-report-ids-stream-session", () => ({
+    useDailyReportIdsStream: () => mockStreamState,
+    retryDailyReportIdsStream: () => retryMock(),
+}))
+
+/** 状態を組み立ててバッジを描画する。 */
+const renderStatus = (partial: Partial<DailyReportIdsStreamState>) => {
+    mockStreamState = {
+        items: [],
+        loadedCount: 0,
+        totalCount: null,
+        phase: "idle",
+        isRevalidating: false,
+        hasCompletedOnce: false,
+        completedAt: null,
+        error: null,
+        ...partial,
+    }
+    return render(<DailyReportIdsStreamStatus />)
+}
+
+describe("DailyReportIdsStreamStatus", () => {
+    it("streaming + total あり: 進捗率付きピルを表示する", () => {
+        renderStatus({ phase: "streaming", loadedCount: 250, totalCount: 1000 })
+        const badge = screen.getByTestId("daily-report-ids-stream-status")
+        expect(badge).toHaveAttribute("data-phase", "streaming")
+        expect(badge.textContent).toContain("読み込み中")
+        expect(badge.textContent).toContain("(25%)")
+    })
+
+    it("streaming + total 未着: 件数のみで率を出さない", () => {
+        renderStatus({ phase: "streaming", loadedCount: 42, totalCount: null })
+        const badge = screen.getByTestId("daily-report-ids-stream-status")
+        expect(badge.textContent).toContain("件")
+        expect(badge.textContent).not.toContain("%")
+    })
+
+    it("streaming + total 0: 0 除算せず率を出さない", () => {
+        renderStatus({ phase: "streaming", loadedCount: 0, totalCount: 0 })
+        expect(screen.getByTestId("daily-report-ids-stream-status").textContent).not.toContain("%")
+    })
+
+    it("loadedCount > total でも率は 100% にクランプされる", () => {
+        renderStatus({ phase: "streaming", loadedCount: 12, totalCount: 10 })
+        expect(screen.getByTestId("daily-report-ids-stream-status").textContent).toContain("(100%)")
+    })
+
+    it("retrying: 受信済み件数付きの再接続表示", () => {
+        renderStatus({ phase: "retrying", loadedCount: 123 })
+        const badge = screen.getByTestId("daily-report-ids-stream-status")
+        expect(badge).toHaveAttribute("data-phase", "retrying")
+        expect(badge.textContent).toContain("再接続中")
+        expect(badge.textContent).toContain("123")
+    })
+
+    it("failed: 再試行ボタンがセッション retry を呼ぶ", () => {
+        retryMock.mockClear()
+        renderStatus({ phase: "failed", error: new Error("x") })
+        expect(screen.getByTestId("daily-report-ids-stream-status")).toHaveAttribute("data-phase", "failed")
+        fireEvent.click(screen.getByTestId("daily-report-ids-stream-retry"))
+        expect(retryMock).toHaveBeenCalledTimes(1)
+    })
+
+    it("complete + 再検証中: 控えめな最新化インジケーター", () => {
+        renderStatus({ phase: "complete", isRevalidating: true, hasCompletedOnce: true })
+        expect(screen.getByTestId("daily-report-ids-stream-status")).toHaveAttribute("data-phase", "revalidating")
+    })
+
+    it("idle / complete (再検証なし) は何も描画しない", () => {
+        const { container: idleContainer } = renderStatus({ phase: "idle" })
+        expect(idleContainer.firstChild).toBeNull()
+        const { container: completeContainer } = renderStatus({ phase: "complete", hasCompletedOnce: true })
+        expect(completeContainer.firstChild).toBeNull()
+    })
+})

package/src/client/components/daily-report-ids-stream-status.tsx

@@ -0,0 +1,67 @@
+/**
+ * Header badge that visualizes the ids stream lifecycle.
+ * ID ストリームのライフサイクルをヘッダーへ可視化するバッジコンポーネント。
+ *
+ * 局面ごとの表示:
+ * - streaming: 進捗ピル「読み込み中 n / total (p%)」(total 未着なら件数のみ)
+ * - retrying: 「再接続中... (n 件受信済)」
+ * - failed: 失敗表示 + 再試行ボタン (受信済みデータは保持されている)
+ * - complete + 再検証中: 控えめな「最新化中」インジケーター
+ * - それ以外 (idle / complete): 何も描画しない
+ */
+import { RefreshCw } from "lucide-react"
+import { useAnimatedNumber } from "../hooks/use-animated-number"
+import { retryDailyReportIdsStream, useDailyReportIdsStream } from "../streaming/daily-report-ids-stream-session"
+
+/**
+ * Renders the streaming progress / recovery badge for the ids stream.
+ * ids ストリームの進捗・復旧バッジを描画するコンポーネント。
+ */
+export const DailyReportIdsStreamStatus = () => {
+    const stream = useDailyReportIdsStream()
+    const animatedLoaded = useAnimatedNumber(stream.loadedCount)
+    const animatedTotal = useAnimatedNumber(stream.totalCount ?? 0)
+
+    if (stream.phase === "streaming") {
+        // total 到着前は件数のみ、到着後は分母と進捗率を添える
+        const percent = stream.totalCount && stream.totalCount > 0 ? Math.min(100, Math.round((stream.loadedCount / stream.totalCount) * 100)) : null
+        return (
+            <span data-testid="daily-report-ids-stream-status" data-phase="streaming" className="inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-800 text-xs tabular-nums dark:bg-blue-900/40 dark:text-blue-300">
+                <span aria-hidden="true" className="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500 dark:bg-blue-400" />
+                読み込み中 {animatedLoaded.toLocaleString()}
+                {percent !== null ? ` / ${animatedTotal.toLocaleString()} (${percent}%)` : " 件"}
+            </span>
+        )
+    }
+
+    if (stream.phase === "retrying") {
+        return (
+            <span role="status" data-testid="daily-report-ids-stream-status" data-phase="retrying" className="inline-flex items-center gap-1.5 rounded-full bg-amber-100 px-2 py-0.5 font-medium text-amber-800 text-xs tabular-nums dark:bg-amber-900/40 dark:text-amber-300">
+                <RefreshCw aria-hidden="true" className="h-3 w-3 animate-spin" />
+                再接続中... ({stream.loadedCount.toLocaleString()} 件受信済)
+            </span>
+        )
+    }
+
+    if (stream.phase === "failed") {
+        return (
+            <span role="status" data-testid="daily-report-ids-stream-status" data-phase="failed" className="inline-flex items-center gap-1.5 rounded-full bg-rose-100 px-2 py-0.5 font-medium text-rose-800 text-xs dark:bg-rose-900/40 dark:text-rose-300">
+                読み込みに失敗しました
+                <button type="button" data-testid="daily-report-ids-stream-retry" onClick={() => retryDailyReportIdsStream()} className="rounded bg-rose-200 px-1.5 py-0.5 font-semibold text-rose-900 hover:bg-rose-300 dark:bg-rose-800 dark:text-rose-100 dark:hover:bg-rose-700">
+                    再試行
+                </button>
+            </span>
+        )
+    }
+
+    if (stream.isRevalidating) {
+        return (
+            <span data-testid="daily-report-ids-stream-status" data-phase="revalidating" className="inline-flex items-center gap-1 text-slate-400 text-xs dark:text-slate-500">
+                <RefreshCw aria-hidden="true" className="h-3 w-3 animate-spin" />
+                最新化中
+            </span>
+        )
+    }
+
+    return null
+}

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

@@ -13,9 +13,11 @@ import { useDailyReportActionContext } from "../contexts/daily-report-action-con
 import { useDailyReportDetail } from "../hooks/use-daily-report"
 import { useDailyReportComments } from "../hooks/use-daily-report-comments"
 import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
+import { useIsMobileLayout } from "../hooks/use-responsive-layout"
 import { cn } from "../ui/cn"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import {
+    CONTENT_DRAG_POINTER_INPUTS,
     DEFAULT_ITEM_HEIGHT,
     EMPTY_DETAIL,
     EMPTY_ITEM,
@@ -30,6 +32,8 @@ import {
     WHEEL_RESET_TIMEOUT_MS,
 } from "../utils/constants"
 import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportAttachmentIndicator } from "./daily-report-attachment-indicator"
+import { DailyReportAttachmentList } from "./daily-report-attachment-list"
 import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
 import { DailyReportEditForm } from "./daily-report-edit-form"
 import { UnreadIndicator } from "./unread-indicator"
@@ -236,7 +240,7 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef)
     const [overlayLabel, setOverlayLabel] = useState<string>("")
     const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
-    const [isMobileLayout, setIsMobileLayout] = useState(false)
+    const isMobileLayout = useIsMobileLayout()
     const wheelResetTimerRef = useRef<number | null>(null)
     const appliedInitialSignatureRef = useRef<string | null>(null)
     const itemCount = dailyReportItems.length
@@ -247,21 +251,17 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const columnHeightStyle = useMemo<CSSProperties | undefined>(() => (Number.isFinite(viewportHeight) && viewportHeight > 0 ? { height: viewportHeight } : undefined), [viewportHeight])
 
     /**
-     * Manages global event listeners (Media Query, Wheel, Resize).
-     * メディアクエリ、ホイール、リサイズなどのグローバルイベントリスナーを管理する副作用。
+     * Manages global event listeners (Wheel, Resize).
+     * ホイール・リサイズのグローバルイベントリスナーを管理する副作用。
      *
-     * Purpose: To handle responsive layout changes and scroll interactions.
+     * Purpose: To keep the viewport height in sync and to detect wheel scrolling.
+     * (レスポンシブ判定は use-responsive-layout のフックが担当する。)
      * Dependencies: [updateViewportHeight]
      * Cleanup: Removes all event listeners and clears timers.
      */
     useEffect(() => {
         if (typeof window === "undefined") return
 
-        const mq = window.matchMedia("(max-width: 639px)")
-        const onMediaChange = (e: MediaQueryListEvent) => setIsMobileLayout(e.matches)
-        setIsMobileLayout(mq.matches)
-        mq.addEventListener("change", onMediaChange)
-
         const onResize = () => requestAnimationFrame(updateViewportHeight)
         window.addEventListener("resize", onResize)
         updateViewportHeight()
@@ -278,7 +278,6 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
         el?.addEventListener("wheel", onWheel, { passive: true })
 
         return () => {
-            mq.removeEventListener("change", onMediaChange)
             window.removeEventListener("resize", onResize)
             el?.removeEventListener("wheel", onWheel)
             if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
@@ -453,6 +452,9 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
                             renderThumbOverlay: renderThumbOverlay,
                         }}
                         behaviorOptions={{
+                            // ドラッグスクロールは無効化せず、**ポインタ種別で絞る**。
+                            // 丸ごと切るとタッチ端末からスクロール手段が消える (定数の注記参照)
+                            pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                             inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                             wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
                         }}
@@ -811,6 +813,9 @@ const DailyReportDisplayPane = ({
                     )}
                 </div>
             </div>
+            {/* 添付節。DetailList タブと同じ位置 (面談者・本文の後、コメントの前) に置く。
+                片方のタブにしか出さないと、利用者は「添付が無い日報」と誤認する */}
+            {report && <DailyReportAttachmentList attachments={report.attachments} />}
             {report && (
                 <div className="fade-in animate-in space-y-2 border-slate-100 border-t pt-4 duration-500 dark:border-slate-800">
                     <div className="font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.comments}</div>
@@ -934,7 +939,7 @@ const extractPreviewLines = (content: string | null): string[] => {
  * List タブ内で表示する日報サマリーカード。
  */
 const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; isActive: boolean; onSelect: (id: number) => void }) => {
-    const { sourceTypeConfigs } = useDailyReportConfig()
+    const { fieldLabels, sourceTypeConfigs } = useDailyReportConfig()
     const { toggleStar, toggleRead, removeStaleItem } = useDailyReportActionContext()
     const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
 
@@ -1022,6 +1027,9 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                         <span className="truncate font-medium text-slate-900 dark:text-slate-100">{creator}</span>
                     </span>
                     <div className="ml-auto flex items-center gap-1.5">
+                        {/* 添付の有無を一覧で一目判別できるようにする。
+                            仕様書が定める [sourceType] [Star] [Read] の相対順は崩さず、その手前に置く */}
+                        <DailyReportAttachmentIndicator count={report.attachments.length} label={fieldLabels.attachments} />
                         {(() => {
                             const sourceType = item.sourceType ?? report?.sourceType
                             const sourceConfig = resolveSourceTypeConfig(sourceType, sourceTypeConfigs)

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

@@ -0,0 +1,119 @@
+/**
+ * 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,54 +1,30 @@
 /**
- * Top-level daily-report page content (chrome-agnostic).
- * アプリのレイアウトに依存しない日報ページ本体コンポーネント。
+ * Top-level daily-report page content (chrome-agnostic, stream-driven).
+ * アプリのレイアウトに依存しない日報ページ本体コンポーネント (ストリーム駆動)。
  *
- * アプリ側のルートは本コンポーネントを自前のレイアウト (Main 等) で包み、
- * `config` でヘッダー描画・パス・ラベル名を注入する。
+ * ID 一覧はモジュール常駐の NDJSON ストリームセッションから購読し、最初の
+ * チャンク到着と同時に一覧を描画する (全件解決を待つ Await ゲートは廃止)。
+ * 再訪時はセッションに残る受信済みデータで即座に復元し、鮮度はバックグラウンド
+ * 再検証 (SWR) と SSE が担う。アプリ側のルートは本コンポーネントを自前の
+ * レイアウトで包み、`config` でヘッダー描画・パス・ラベル名を注入する。
  */
-import { Suspense, useCallback, useEffect, useState } from "react"
-import { Await, useRevalidator } from "react-router"
-import type { DailyReportItem, DailyReportUser } from "../../shared/types"
+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 { 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"
 
 /**
- * Synchronizes resolved daily report ids into the action context provider state.
- * Also renders the resolved content after synchronization trigger is set.
+ * Error display when the ids stream terminally failed before any data arrived.
+ * データ未受信のまま ID ストリームが力尽きたときのエラー表示コンポーネント。
  *
- * 解決済みの日報 ID を Action Context 側へ同期し、解決済みコンテンツを描画するコンポーネント。
- */
-const DailyReportResolvedSync = ({ dailyReportItems, userId, onResolved }: { dailyReportItems: DailyReportItem[]; userId?: string | null; onResolved: (items: DailyReportItem[]) => void }) => {
-    /**
-     * Notifies parent when resolved items change.
-     * Dependencies:
-     * - dailyReportItems: latest resolved list from Await.
-     * - onResolved: parent synchronization callback.
-     * Cleanup:
-     * - None (pure synchronization side effect).
-     *
-     * 解決済み items が変化したときに親へ通知します。
-     * 依存配列:
-     * - dailyReportItems: Await で解決された最新リスト
-     * - onResolved: 親への同期コールバック
-     * クリーンアップ:
-     * - なし（同期のみの副作用）
-     */
-    useEffect(() => {
-        onResolved(dailyReportItems)
-    }, [dailyReportItems, onResolved])
-
-    return <DailyReportResolvedContent dailyReportItems={dailyReportItems} userId={userId} />
-}
-
-/**
- * Error display component for daily report data fetch failures.
- * 日報データの取得失敗時に表示するエラーコンポーネント。
+ * 再試行はストリームセッションの retry へ直結する (受信済みカーソルから再開)。
  */
 export const DailyReportLoadError = () => {
     const { title, renderHeader } = useDailyReportConfig()
-    const { revalidate } = useRevalidator()
     return (
         <>
             {renderHeader({ title, annotation: <span className="font-bold text-red-500">Error</span> })}
@@ -56,7 +32,11 @@ export const DailyReportLoadError = () => {
                 <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" onClick={() => revalidate()} 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
+                            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>
@@ -67,8 +47,8 @@ export const DailyReportLoadError = () => {
 }
 
 /**
- * Suspense fallback while daily report identifiers resolve.
- * 日報 ID 解決中のサスペンスフォールバック。
+ * Loading screen shown only until the first stream chunk arrives.
+ * 最初のストリームチャンクが届くまでの間だけ表示するローディング画面。
  */
 export const DailyReportLoading = () => {
     const { title, renderHeader } = useDailyReportConfig()
@@ -77,7 +57,8 @@ export const DailyReportLoading = () => {
             {renderHeader({
                 title,
                 annotation: (
-                    <div className="flex flex-wrap gap-2 leading-none">
+                    <div className="flex flex-wrap items-center gap-2 leading-none">
+                        <DailyReportIdsStreamStatus />
                         <span>総件数: 読み込み中...</span>
                         <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
                     </div>
@@ -97,41 +78,48 @@ export type DailyReportPageProps = {
     user?: DailyReportUser
     /** 難読化済みの内部ユーザー ID (未登録ユーザーは null)。 */
     userId?: string | null
-    /** clientLoader で defer した日報 ID 一覧 (Promise) または解決済み配列。 */
-    dailyReportIds?: Promise<DailyReportItem[]> | DailyReportItem[] | null
     /** クライアント設定の部分上書き (ヘッダー描画・パス・ラベル名・フィールドラベルなど)。 */
     config?: DailyReportClientConfigInput
 }
 
 /**
- * Daily report page content rendering provider, suspense boundary, and resolved views.
- * プロバイダー・サスペンス境界・解決済みビューを描画する日報ページ本体。
+ * Stream-driven page body: session bootstrap, phase gating, and provider wiring.
+ * ストリーム駆動のページ本体。セッション確立・局面ゲーティング・プロバイダー結線を担う。
  */
-const DailyReportPageInner = ({ user, userId, dailyReportIds }: Omit<DailyReportPageProps, "config">) => {
-    const [resolvedInitialItems, setResolvedInitialItems] = useState<DailyReportItem[]>([])
+const DailyReportPageInner = ({ user, userId }: Omit<DailyReportPageProps, "config">) => {
+    const { apiBasePath } = useDailyReportConfig()
+    const stream = useDailyReportIdsStream()
 
-    const handleResolvedItems = useCallback((items: DailyReportItem[]) => {
-        setResolvedInitialItems(items)
-    }, [])
+    /**
+     * ストリームセッション確立の保険。
+     * 通常は 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 (
-        <DailyReportActionProvider user={user} initialItems={resolvedInitialItems} userId={userId}>
-            <Suspense fallback={<DailyReportLoading />}>
-                {/* Resolve で非同期取得済み ID を確定表示 */}
-                {dailyReportIds ? (
-                    <Await resolve={dailyReportIds} errorElement={<DailyReportLoadError />}>
-                        {(resolvedItems) => {
-                            if (!resolvedItems) {
-                                throw new Error("Daily report ids resolve must not be null")
-                            }
-                            // 非 null を保証して以降の処理で利用
-                            return <DailyReportResolvedSync dailyReportItems={resolvedItems as DailyReportItem[]} userId={userId} onResolved={handleResolvedItems} />
-                        }}
-                    </Await>
-                ) : (
-                    <DailyReportLoading />
-                )}
-            </Suspense>
+        // key でユーザーごとにプロバイダーをリマウントする。リロード無しのユーザー切替
+        // (再ログイン・成り代わり) で items / removedIds / 保留キュー等の状態が旧ユーザーの
+        // まま残ると、render-phase マージが旧ユーザーの行を新ユーザーの一覧へ持ち越す
+        <DailyReportActionProvider key={userId ?? "anonymous"} user={user} initialItems={stream.items} userId={userId}>
+            {showContent ? <DailyReportResolvedContent userId={userId} /> : stream.phase === "failed" ? <DailyReportLoadError /> : <DailyReportLoading />}
         </DailyReportActionProvider>
     )
 }