@aiquants/daily-report 0.7.0 → 0.9.0

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

@@ -1,54 +1,31 @@
 /**
- * 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 { 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"
 
 /**
- * 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 +33,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 +48,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 +58,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,42 +79,53 @@ 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>
-        </DailyReportActionProvider>
+        // 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>
     )
 }
 

package/src/client/components/daily-report-resolved-content.tsx

@@ -2,35 +2,41 @@ import { Plus, RefreshCw, RotateCw } from "lucide-react"
 import type { ReactNode } from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useSearchParams } from "react-router"
-import type { DailyReportItem } from "../../shared/types"
+import { resolveTodayBusinessDateKey } from "../../shared/business-date"
 import { useDailyReportConfig } from "../config-context"
 import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { useAnimatedNumber } from "../hooks/use-animated-number"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
 import { Switch } from "../ui/switch"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
 import { DailyReportDetailList } from "./daily-report-detail-list"
+import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
 import { DailyReportList } from "./daily-report-list"
 
 const tabTriggerClass = "min-w-24 p-2 font-medium text-slate-600 text-xs transition-colors data-[state=active]:bg-white data-[state=active]:text-slate-900 sm:min-w-36 sm:text-sm dark:text-slate-300 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-slate-100"
 
 type DailyReportResolvedContentProps = {
-    dailyReportItems: DailyReportItem[]
     userId?: string | null
 }
 
 /**
- * Displays fetched daily reports with layout and tabbed virtual scroll views.
- * レイアウトとタブ付き仮想スクロールで取得済み日報を表示するコンポーネント。
+ * Displays streamed daily reports with layout and tabbed virtual scroll views.
+ * レイアウトとタブ付き仮想スクロールでストリーム受信済み日報を表示するコンポーネント。
+ *
+ * アイテムは Action Context (ストリームチャンクをマージ済み) から読む。
  */
-export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, userId }: DailyReportResolvedContentProps) => {
+export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedContentProps) => {
     // 自動既読設定
     const [autoMarkRead, setAutoMarkRead] = useState(false)
     const { title, renderHeader, showDevControls } = useDailyReportConfig()
     const { isSseEnabled, toggleSse, createReport, items: dailyReportItems, refetchData, clearCacheAndRefetch } = useDailyReportActionContext()
     const [searchParams] = useSearchParams()
 
+    // 総件数の表示値 (チャンク到着ごとの跳びをイーズアウトで滑らかにする)
+    const animatedItemCount = useAnimatedNumber(dailyReportItems.length)
+
     // 各タブのスクロール位置をアンマウント後も保持する Ref
     const listScrollOffsetRef = useRef<number>(0)
     const detailListScrollOffsetRef = useRef<number>(0)
@@ -49,6 +55,24 @@ export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, us
         return dailyReportItems[0].reportHubId
     })
 
+    // 初回の自動選択を一度きりにするフラグ (ユーザーの明示的な選択解除を上書きしない)
+    const hasAutoSelectedRef = useRef(false)
+
+    /**
+     * 最初のアイテム到着時に先頭日報を一度だけ自動選択する副作用。
+     * useState 初期化子はマウント時点で context の items がまだ空のため実質機能せず、
+     * ストリーミングでは最初のチャンク到着後に選択を確定させる必要がある。
+     * モバイルのオーバーレイは isMobileDetailOpen (明示タップ) でのみ開くため、
+     * プログラム選択でオーバーレイが開くことはない。
+     * 依存配列: dailyReportItems (チャンク到着ごと)。クリーンアップ: なし。
+     */
+    useEffect(() => {
+        if (!hasAutoSelectedRef.current && dailyReportItems.length > 0) {
+            hasAutoSelectedRef.current = true
+            setSelectedItemId((prev) => prev ?? dailyReportItems[0].reportHubId)
+        }
+    }, [dailyReportItems])
+
     const handleReload = async () => {
         await refetchData()
     }
@@ -59,8 +83,9 @@ export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, us
 
     const handleCreateReport = async () => {
         const businessDateParam = searchParams.get("businessDate")
-        const today = new Date().toISOString().split("T")[0]
-        const dateToUse = businessDateParam || today
+        // 「本日」はローカル暦日で決める。toISOString() の UTC 日付だと JST 深夜〜午前帯に
+        // 前日の営業日へ新規日報が登録されてしまう
+        const dateToUse = businessDateParam || resolveTodayBusinessDateKey()
         const newId = await createReport(dateToUse)
         setSelectedItemId(newId)
     }
@@ -123,13 +148,14 @@ export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, us
             {renderHeader({
                 title,
                 annotation: (
-                    <div className="flex flex-wrap gap-2 leading-1">
-                        <span>総件数: {dailyReportItems.length.toLocaleString()} 件</span>
+                    <div className="flex flex-wrap items-center gap-2 leading-1">
+                        <DailyReportIdsStreamStatus />
+                        <span className="tabular-nums">総件数: {animatedItemCount.toLocaleString()} 件</span>
                         <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
                     </div>
                 ),
             })}
-            <div className="h-full bg-slate-50 dark:bg-slate-500">
+            <div className="h-full bg-slate-50 dark:bg-slate-950">
                 <div className="flex h-full w-full max-w-6xl flex-1 flex-col p-1">
                     <Tabs defaultValue="list" className="flex h-full flex-1 flex-col">
                         <div className="flex items-center justify-between gap-2 rounded-md bg-slate-50 p-1 transition-colors dark:bg-slate-900/70 dark:text-slate-200">

package/src/client/components/report-views.spec.tsx

@@ -39,7 +39,7 @@ import { CONTENT_DRAG_POINTER_INPUTS, ITEM_VERTICAL_PADDING, TAP_SCROLL_CIRCLE_O
 type CapturedVirtualScrollProps = {
     testId?: string
     itemCount: number
-    behaviorOptions?: { pointerDragInputs?: unknown; enablePointerDrag?: unknown }
+    behaviorOptions?: { pointerDragInputs?: unknown; enablePointerDrag?: unknown; enableKeyboardNavigation?: unknown }
     scrollBarOptions?: { tapScrollCircleOptions?: unknown; renderThumbOverlay?: (props: Record<string, unknown>) => ReactNode }
     getItemKey?: unknown
     getItemHeight?: unknown
@@ -48,6 +48,7 @@ type CapturedVirtualScrollProps = {
     onRangeChange?: unknown
     onScroll?: unknown
     contentInsets?: unknown
+    contentProps?: Record<string, unknown>
 }
 
 const captured: CapturedVirtualScrollProps[] = []
@@ -84,10 +85,13 @@ vi.mock("@aiquants/virtualscroll", async () => {
                     onRangeChange: props.onRangeChange,
                     onScroll: props.onScroll,
                     contentInsets: props.contentInsets,
+                    contentProps: props.contentProps,
                 })
                 useHandle(ref, () => ({ scrollTo: () => 0, scrollToIndex: () => {}, getScrollPosition: () => 0, getContentSize: () => 0, getViewportSize: () => 0, updateItemSize: () => {}, focusItemAtIndex: () => {} }))
+                // 本物は contentProps をコンテンツ要素 (行だけを所有する list) へ透過する。
+                // ロール階層 (list → listitem) を DOM で検査できるよう代役でも同じ口へ流す
                 return (
-                    <div data-testid={props.testId}>
+                    <div data-testid={props.testId} {...props.contentProps}>
                         {Array.from({ length: props.itemCount }, (_, index) => (
                             // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
                             <div key={index}>{props.children(props.getItem(index), index)}</div>
@@ -338,3 +342,34 @@ describe("日報ビューの描画と結線", () => {
         expect(detailViews).toEqual(REPORT_DETAIL_VIEWS.map((view) => view.file).sort())
     })
 })
+
+describe("日報ビューのアクセシビリティ (仮想化リストのセマンティクス)", () => {
+    it.each(VIEW_CASES)("%s は行だけを所有する list をコンテンツ要素へ置く", (_file, view) => {
+        // role="list" を「スクロールバーと兄弟の」コンテンツ要素へ置く (contentProps 経由)。
+        // ペイン以上の階層に置くと ScrollBar の role="scrollbar" が不許可の所有子になる
+        renderView(view.render())
+        const props = optionsOf(view.testId)
+        expect(props.contentProps?.role).toBe("list")
+        expect(typeof props.contentProps?.["aria-label"]).toBe("string")
+        expect((props.contentProps?.["aria-label"] as string).length).toBeGreaterThan(0)
+    })
+
+    it.each(VIEW_CASES)("%s は enableKeyboardNavigation を false にする (タブ順汚染と focus 奪取の防止)", (_file, view) => {
+        // 既定 true は行ラッパーへ tabIndex=-1 を付けてタブ順を汚し、pointerdown で
+        // 行へフォーカスを移す (★/既読タップで詳細ペインが黙って切り替わる不具合の原因)。
+        // false にすることで list/listitem のロール階層も有効になる
+        renderView(view.render())
+        expect(optionsOf(view.testId).behaviorOptions?.enableKeyboardNavigation).toBe(false)
+    })
+
+    it.each(VIEW_CASES)("%s は各行へ role=listitem と aria-posinset/aria-setsize を付ける", (_file, view) => {
+        // 仮想化で描画されるのは窓分だけなので、絶対位置 (posinset) と全件数 (setsize) を
+        // 各行に載せないと SR は「全 N 件中 M 番目」を読めない
+        const { container } = renderView(view.render())
+        const listItems = container.querySelectorAll('[role="listitem"]')
+        expect(listItems.length).toBe(1)
+        const row = listItems[0]
+        expect(row.getAttribute("aria-posinset")).toBe("1")
+        expect(row.getAttribute("aria-setsize")).toBe("1")
+    })
+})

package/src/client/config-context.tsx

@@ -43,6 +43,19 @@ export type DailyReportFieldLabels = {
     relationsEmpty: string
 }
 
+/**
+ * Mutation-failure notification payload (for a host-supplied error surface).
+ * ミューテーション失敗の通知情報 (ホストが独自の通知 UI を出すための口)。
+ */
+export type DailyReportErrorInfo = {
+    /** 失敗した操作の種別 (create / update / publish / delete / addComment / deleteComment / toggleStar / toggleRead)。 */
+    operation: string
+    /** 表示用のメッセージ (パッケージ内蔵バナー用)。 */
+    message: string
+    /** 元例外 (診断用)。 */
+    cause?: unknown
+}
+
 /** データソースごとのバッジ表示設定。 */
 export type SourceTypeConfig = {
     label: string
@@ -69,6 +82,11 @@ export type DailyReportClientConfig = {
     renderHeader: (props: DailyReportHeaderProps) => ReactNode
     /** 開発向けコントロール (SSE 購読トグル等) を表示するか。 */
     showDevControls: boolean
+    /**
+     * ミューテーション失敗時の通知ポート。未指定ならパッケージ内蔵の role="alert"
+     * バナーで表示する。ホストが独自トースト等を持つ場合はここへ委譲する。
+     */
+    onError?: (info: DailyReportErrorInfo) => void
 }
 
 /**