@aiquants/daily-report 0.7.0 → 0.9.0

package/src/client/components/daily-report-edit-form.tsx

@@ -34,6 +34,9 @@ export const DailyReportEditForm = ({ report, onCancel, onPublishSuccess }: Dail
         setIsSaving(true)
         try {
             await updateReport(report.reportHubId, { title, content }, report.date ?? "")
+        } catch {
+            // 失敗はアクションコンテキストが role="alert" バナー / onError で可視化する。
+            // ここで握るのは未処理 Promise 拒否を防ぐためだけ (成功時のみ後続へ進む)
         } finally {
             setIsSaving(false)
         }
@@ -45,7 +48,10 @@ export const DailyReportEditForm = ({ report, onCancel, onPublishSuccess }: Dail
             // Ensure latest changes are saved before publishing
             await updateReport(report.reportHubId, { title, content }, report.date ?? "")
             await publishReport(report.reportHubId, report.date ?? "")
+            // 保存・公開の両方が成功したときだけ成功コールバックを呼ぶ
             onPublishSuccess?.()
+        } catch {
+            // 失敗はアクションコンテキストが可視化する。onPublishSuccess は呼ばない
         } finally {
             setIsSaving(false)
         }

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

@@ -5,7 +5,7 @@
 import { SwipeCloseGuardContext, useSwipeGuardState, useSwipeToDismissOverlay, useTapClick, useTransitionDisplay } from "@aiquants/swipe-overlay"
 import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 import { Check, Star, Trash2 } from "lucide-react"
-import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { type CSSProperties, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
 import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
 import { resolveSourceTypeConfig, useDailyReportConfig } from "../config-context"
@@ -45,8 +45,6 @@ type TestableVirtualScrollHandle = VirtualScrollHandle & {
 
 type DailyReportListProps = {
     dailyReportItems: DailyReportItem[]
-    initialSelectedBusinessDate?: string | null
-    initialSelectedReportHubId?: number | null
     autoMarkRead?: boolean
     selectedReportHubId: number | null
     onSelectItem: (reportHubId: number | null) => void
@@ -234,15 +232,16 @@ const useAutoRead = (report: DailyReportDetail | null, isLoading: boolean, autoM
  * Daily report list cards with key metadata and preview content via virtual scrolling.
  * 主なメタデータと内容プレビューを仮想スクロール表示する日報リスト。
  */
-export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate = null, initialSelectedReportHubId = null, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, initialScrollOffset, onScrollOffsetChange }: DailyReportListProps) => {
+export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, initialScrollOffset, onScrollOffsetChange }: DailyReportListProps) => {
     const scrollContainerRef = useRef<HTMLDivElement | null>(null)
     const virtualScrollRef = useRef<VirtualScrollHandle>(null)
+    // list ロールの aria-label に使う (消費側が注入する業務ドメイン名。既定 "Daily Reports")
+    const { title } = useDailyReportConfig()
     const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef)
     const [overlayLabel, setOverlayLabel] = useState<string>("")
     const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
     const isMobileLayout = useIsMobileLayout()
     const wheelResetTimerRef = useRef<number | null>(null)
-    const appliedInitialSignatureRef = useRef<string | null>(null)
     const itemCount = dailyReportItems.length
     const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -285,34 +284,16 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     }, [updateViewportHeight])
 
     /**
-     * Synchronizes initial selection from props when data changes.
-     * データ変更時にプロパティからの初期選択状態を同期する副作用。
+     * Clears the selection when the list becomes empty.
+     * 一覧が空になったとき選択を解除する副作用。
      *
-     * Purpose: To respect deep-linked selection (ID or Date) when items are loaded.
-     * Dependencies: [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem]
-     * Cleanup: None.
+     * 依存配列: [itemCount, selectedReportHubId, onSelectItem]。クリーンアップ: なし。
      */
     useEffect(() => {
-        if (!itemCount) {
-            appliedInitialSignatureRef.current = null
-            if (selectedReportHubId !== null) onSelectItem(null)
-            return
-        }
-
-        const signature = `${initialSelectedReportHubId ?? ""}|${initialSelectedBusinessDate ?? ""}`
-        const hasInitial = (initialSelectedReportHubId ?? null) !== null || (initialSelectedBusinessDate ?? null) !== null
-
-        if (!hasInitial) appliedInitialSignatureRef.current = null
-
-        if (hasInitial && appliedInitialSignatureRef.current !== signature) {
-            const match = (initialSelectedReportHubId && dailyReportItems.find((i) => i.reportHubId === initialSelectedReportHubId)) || (initialSelectedBusinessDate && dailyReportItems.find((i) => i.businessDate === initialSelectedBusinessDate))
-            if (match) {
-                appliedInitialSignatureRef.current = signature
-                if (selectedReportHubId !== match.reportHubId) onSelectItem(match.reportHubId)
-                return
-            }
+        if (!itemCount && selectedReportHubId !== null) {
+            onSelectItem(null)
         }
-    }, [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem])
+    }, [itemCount, selectedReportHubId, onSelectItem])
 
     /**
      * Restores focus after closing overlay (Desktop only).
@@ -329,7 +310,15 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
 
         const index = dailyReportItems.findIndex((item) => item.reportHubId === targetId)
         if (index >= 0) {
-            requestAnimationFrame(() => virtualScrollRef.current?.focusItemAtIndex(index))
+            // スクロールで行を DOM に入れてから、カード本体 (tabIndex=0) へフォーカスを戻す。
+            // focusItemAtIndex は enableKeyboardNavigation:false では no-op のため使えない
+            // (行ラッパーではなくカードへ直接フォーカスするのが本来の意図でもある)
+            virtualScrollRef.current?.scrollToIndex(index)
+            requestAnimationFrame(() => {
+                // detail-list の行も同じ data 属性を持つため、一覧側スコープで限定する
+                const card = document.querySelector<HTMLElement>(`[data-testid="daily-report-list"] [data-daily-report-button="${targetId}"]`)
+                card?.focus()
+            })
         }
     }, [isMobileDetailOpen, isMobileLayout, dailyReportItems, lastClosedItemIdRef])
 
@@ -377,6 +366,13 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const getItem = useCallback((index: number) => (index < itemCount ? dailyReportItems[index] : EMPTY_ITEM), [dailyReportItems, itemCount])
     const getItemHeight = useCallback(() => DEFAULT_ITEM_HEIGHT, [])
 
+    // 行レンダラーを安定参照にする。インライン矢印だと毎レンダー新関数になり、
+    // React.memo の ListReportItem が全行で再レンダーへ落ちる (選択変更で全行が再描画)
+    const renderListRow = useCallback(
+        (item: DailyReportItem, index: number) => <ListReportItem key={item.reportHubId} item={item} index={index} setSize={itemCount} isActive={item.reportHubId === selectedReportHubId} onSelect={handleItemSelect} />,
+        [itemCount, selectedReportHubId, handleItemSelect],
+    )
+
     const handleRangeChange = useCallback(
         (range: { visibleStartIndex: number }) => {
             const item = getItem(range.visibleStartIndex)
@@ -389,17 +385,6 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
         [getItem],
     )
 
-    const handleItemFocus = useCallback(
-        (index: number) => {
-            const item = getItem(index)
-            if (item && item.reportHubId > 0) {
-                if (item.reportHubId === selectedReportHubId) return
-                onSelectItem(item.reportHubId)
-            }
-        },
-        [getItem, onSelectItem, selectedReportHubId],
-    )
-
     const handleScroll = useCallback(() => {
         if (virtualScrollRef.current && onScrollOffsetChange) {
             onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
@@ -457,14 +442,25 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
                             pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                             inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                             wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
+                            // 行ラッパーへの tabIndex 付与 (タブ順汚染) と pointerdown フォーカス移動を止める。
+                            // 「★/既読タップで詳細ペインが切り替わる」不具合は 2 経路あり、これはその 1 つ目
+                            // (focus 経由)。2 つ目 (useTapClick の pointerup バブリング) はボタン側の
+                            // stopPointerPropagation が塞ぐ。onItemFocus は発火しなくなる
+                            enableKeyboardNavigation: false,
                         }}
                         onRangeChange={handleRangeChange}
                         onScroll={handleScroll}
-                        onItemFocus={handleItemFocus}
                         contentInsets={{ top: ITEM_VERTICAL_PADDING, bottom: ITEM_VERTICAL_PADDING }}
                         testId="daily-report-list"
-                        className="relative w-full">
-                        {(item) => <ListReportItem key={item.reportHubId} item={item} isActive={item.reportHubId === selectedReportHubId} onSelect={handleItemSelect} />}
+                        className="relative w-full"
+                        contentProps={{
+                            // 行 (role="option" ではなく role="listitem") だけを所有する list を、
+                            // スクロールバーと兄弟のコンテンツ要素に置く (virtualscroll 1.23.0 の口)。
+                            // 各行が aria-posinset/aria-setsize を持つので SR は「全 N 件中 M 番目」を読める
+                            role: "list",
+                            "aria-label": title,
+                        }}>
+                        {renderListRow}
                     </VirtualScroll>
                 </div>
                 <DailyReportSidePane dailyReportItems={dailyReportItems} selectedItem={selectedItem} heightStyle={columnHeightStyle} autoMarkRead={!isMobileLayout && autoMarkRead} isActive={selectedReportHubId !== null} userId={userId} />
@@ -482,9 +478,12 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
 /**
  * Loading skeleton representation for daily report list items.
  * 日報リストアイテム用読み込み中スケルトン表示。
+ *
+ * `wrapperProps` は仮想リストの位置属性 (role="listitem" / aria-posinset / aria-setsize) を
+ * 外側ラッパーへ透過するための口。読み込み中の行も一覧内の位置を SR へ公開する。
  */
-const ListSkeletonItem = () => (
-    <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+const ListSkeletonItem = (wrapperProps: React.HTMLAttributes<HTMLDivElement> & { "aria-posinset"?: number; "aria-setsize"?: number }) => (
+    <div {...wrapperProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
         <div data-skeleton className="flex h-full animate-pulse flex-col justify-between rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
             <div className="mb-3 flex flex-wrap items-center gap-3">
                 <div className="h-4 w-24 rounded bg-slate-200"></div>
@@ -657,6 +656,15 @@ const DailyReportSidePane = ({
     )
 }
 
+/**
+ * Skeleton line placeholder (module-scope so it is not re-created every render).
+ * スケルトンの 1 行プレースホルダー (レンダーごとに再生成しないようモジュールスコープに置く)。
+ *
+ * 以前は DailyReportDisplayPane の render 本体で宣言していたため、レンダーのたびに
+ * 別コンポーネント型となり全スケルトンが再マウントしていた。
+ */
+const SkeletonText = ({ className = "w-32" }: { className?: string }) => <div data-skeleton className={`h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-700 ${className}`} />
+
 /**
  * Shows the selected report details in the display tab, including content and metadata.
  * 表示タブ内で選択した日報の詳細とメタデータを表示するコンポーネント。
@@ -756,8 +764,6 @@ const DailyReportDisplayPane = ({
     const isMine = !!(userId && report?.userId === userId)
     const hasComments = uiComments.length > 0
 
-    const SkeletonText = ({ className = "w-32" }: { className?: string }) => <div data-skeleton className={`h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-700 ${className}`} />
-
     return (
         // biome-ignore lint/a11y/noStaticElementInteractions: Double click to edit feature
         <div className="relative space-y-4 text-slate-700 dark:text-slate-200" onDoubleClick={onDoubleClick}>
@@ -938,10 +944,13 @@ const extractPreviewLines = (content: string | null): string[] => {
  * Daily report summary card rendered inside the list tab.
  * List タブ内で表示する日報サマリーカード。
  */
-const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; isActive: boolean; onSelect: (id: number) => void }) => {
+const ListReportItem = memo(({ item, index, setSize, isActive, onSelect }: { item: DailyReportItem; index: number; setSize: number; isActive: boolean; onSelect: (id: number) => void }) => {
     const { fieldLabels, sourceTypeConfigs } = useDailyReportConfig()
     const { toggleStar, toggleRead, removeStaleItem } = useDailyReportActionContext()
     const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
+    // list 内の絶対位置を SR へ公開する (仮想化で描画されるのは窓分だけなので必須)。
+    // どの表示状態 (読み込み中・エラー・本体) でも同じ位置属性を載せる
+    const listItemProps = { role: "listitem", "aria-posinset": index + 1, "aria-setsize": setSize } as const
 
     // フェッチが一度でも試行されたかを追跡する ref
     const hasEverFetched = useRef(false)
@@ -959,19 +968,19 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
 
     if (error) {
         return (
-            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
-                <div className="flex h-full items-center justify-center rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">
+            <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+                <div className="flex h-full items-center justify-center rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-300">
                     <p>日報 {item.reportHubId.toLocaleString()} の概要読み込みに失敗しました。</p>
                 </div>
             </div>
         )
     }
 
-    if (isLoading) return <ListSkeletonItem />
+    if (isLoading) return <ListSkeletonItem {...listItemProps} />
 
     if (!report) {
         return (
-            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+            <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
                 <div className="flex h-full items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-500 text-sm dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400">
                     <p>日報が見つかりません</p>
                 </div>
@@ -1006,8 +1015,19 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
         }
     }
 
+    /**
+     * Keeps card selection from firing when an inner action button is tapped.
+     * カード内のアクションボタン操作でカード選択を発火させないための伝播停止。
+     *
+     * カードの選択は useTapClick (pointerdown/pointerup 駆動) なので、click の
+     * stopPropagation だけでは止まらない。pointer イベント自体を止める必要がある。
+     */
+    const stopPointerPropagation = (e: React.PointerEvent) => {
+        e.stopPropagation()
+    }
+
     return (
-        <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+        <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
             {/* biome-ignore lint/a11y/useSemanticElements: Card contains nested interactive elements (Star/Read buttons) */}
             <div
                 data-daily-report-button={item.reportHubId}
@@ -1017,7 +1037,11 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                 style={{ touchAction: "manipulation" }}
                 role="button"
                 tabIndex={0}
+                // aria-current が「一覧の現在項目」の意味論を担う。aria-pressed は
+                // 消費アプリの E2E ヘルパーが選択判定に使う既存契約のため併記を維持する
+                aria-current={isActive ? "true" : undefined}
                 aria-pressed={isActive}
+                aria-label={`${date} ${creator}`}
                 {...tapHandlers}>
                 <div className="mb-3 flex items-center gap-3 text-slate-600 text-sm">
                     <span className="inline-flex shrink-0 items-center rounded-full bg-slate-100 px-3 py-1 font-semibold text-xs dark:bg-slate-800 dark:text-slate-200">
@@ -1038,16 +1062,24 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                         <button
                             type="button"
                             title={report.isStarred ? "スターを外す" : "スターを付ける"}
+                            aria-label={report.isStarred ? "スターを外す" : "スターを付ける"}
+                            aria-pressed={report.isStarred}
                             data-list-star-button={item.reportHubId}
                             onClick={handleToggleStar}
+                            onPointerDown={stopPointerPropagation}
+                            onPointerUp={stopPointerPropagation}
                             className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
                             {report.isStarred ? <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" /> : <Star className="h-3.5 w-3.5 text-slate-300 dark:text-slate-500" />}
                         </button>
                         <button
                             type="button"
                             title={report.isRead ? "未読にする" : "既読にする"}
+                            aria-label={report.isRead ? "未読にする" : "既読にする"}
+                            aria-pressed={report.isRead}
                             data-list-read-button={item.reportHubId}
                             onClick={handleToggleRead}
+                            onPointerDown={stopPointerPropagation}
+                            onPointerUp={stopPointerPropagation}
                             className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
                             {report.isRead ? <Check className="h-3.5 w-3.5 text-blue-500" /> : <UnreadIndicator className="text-xs" />}
                         </button>
@@ -1067,4 +1099,5 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
             </div>
         </div>
     )
-}
+})
+ListReportItem.displayName = "ListReportItem"

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()
+    })
+})