@aiquants/daily-report 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/daily-report",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Reusable daily-report feature package: shared types/schemas, React (Router v7) UI with virtual scrolling + optimistic updates + SSE sync, and a drizzle (mssql) server layer with DI ports (auth, user resolution, redis, external sources).",
   "sideEffects": [
     "**/*.css"
@@ -81,8 +81,8 @@
     "react-dom": ">=18",
     "react-router": "^7.0.0",
     "zod": ">=3.25.0 <5.0.0",
-    "@aiquants/swipe-overlay": "^1.2.4",
-    "@aiquants/virtualscroll": "^1.23.0"
+    "@aiquants/virtualscroll": "^1.23.0",
+    "@aiquants/swipe-overlay": "^1.2.4"
   },
   "peerDependenciesMeta": {
     "drizzle-orm": {

package/src/client/contexts/daily-report-action-context.spec.tsx

@@ -276,3 +276,61 @@ describe("initialItems の既定値 (無限レンダー防止)", () => {
         expect(contextRef.current?.items).toEqual([])
     })
 })
+
+describe("SSE 自動接続の遅延 (初回描画へ接続枠を譲る)", () => {
+    // isSseEnabled は render 時点で読む (effect 経由の contextRef はタイマー flush と 1 ティックずれる)
+    const renderState: { current: DailyReportActionContextType | null } = { current: null }
+    const RenderCapture = () => {
+        renderState.current = useDailyReportActionContext()
+        return null
+    }
+
+    it("初期は未接続で、遅延後に自動接続する", async () => {
+        vi.useFakeTimers()
+        try {
+            // セッションは張らない (このテストは SSE 遅延だけを見る)。userId ありで自動接続対象
+            render(
+                <DailyReportActionProvider user={{ id: "a", displayName: "User A" }} userId="ENC_A">
+                    <RenderCapture />
+                </DailyReportActionProvider>,
+            )
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(0)
+            })
+            // 初回描画時点では未接続 (HTTP/1.1 の接続枠を初回の中身フェッチへ譲る)
+            expect(renderState.current?.isSseEnabled).toBe(false)
+            // 遅延経過で自動接続する
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(1000)
+            })
+            expect(renderState.current?.isSseEnabled).toBe(true)
+        } finally {
+            vi.useRealTimers()
+        }
+    })
+
+    it("手動トグルは自動接続タイマーに上書きされない", async () => {
+        vi.useFakeTimers()
+        try {
+            render(
+                <DailyReportActionProvider user={{ id: "a", displayName: "User A" }} userId="ENC_A">
+                    <RenderCapture />
+                </DailyReportActionProvider>,
+            )
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(0)
+            })
+            // ユーザーが手動で ON → OFF した後、遅延タイマーが発火しても手動 OFF を尊重する
+            act(() => renderState.current?.toggleSse())
+            expect(renderState.current?.isSseEnabled).toBe(true)
+            act(() => renderState.current?.toggleSse())
+            expect(renderState.current?.isSseEnabled).toBe(false)
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(1000)
+            })
+            expect(renderState.current?.isSseEnabled).toBe(false)
+        } finally {
+            vi.useRealTimers()
+        }
+    })
+})

package/src/client/contexts/daily-report-action-context.tsx

@@ -24,6 +24,7 @@ import {
 } from "../hooks/use-daily-report"
 import { useDailyReportSseConnection } from "../hooks/use-daily-report-sse-connection"
 import { getDailyReportIdsStreamSessionUserKey, refreshDailyReportIdsStream, removeDailyReportIdsStreamItem, upsertDailyReportIdsStreamItem, useDailyReportIdsStream } from "../streaming/daily-report-ids-stream-session"
+import { SSE_INITIAL_CONNECT_DEFER_MS } from "../utils/constants"
 import { useDailyReportErrorSurface } from "./daily-report-error-context"
 
 const logger = createLogger(LogLevel.INFO, "daily-report-action-context")
@@ -181,7 +182,10 @@ export const DailyReportActionProvider = ({ children, user, initialItems = EMPTY
     const resolvedIdMap = useRef<Map<number, number>>(new Map())
     const [version, setVersion] = useState(0)
     const [items, setItems] = useState<DailyReportItem[]>(initialItems)
-    const [isSseEnabled, setIsSseEnabled] = useState(!!userId)
+    // SSE は初回描画とその最初の中身フェッチに接続枠を譲るため、少し遅らせて自動接続する
+    // (HTTP/1.1 の 6 接続のうち 1 枠を初回描画へ回す)。手動トグル済みなら自動接続しない
+    const [isSseEnabled, setIsSseEnabled] = useState(false)
+    const hasManualSseToggleRef = useRef(false)
     const pendingAddPromises = useRef<Map<number, Promise<number>>>(new Map())
     const manuallyTrackingIds = useRef<Set<number>>(new Set())
     /** 削除済み ID を記録し、マージロジックでの復活を防止する */
@@ -369,9 +373,27 @@ export const DailyReportActionProvider = ({ children, user, initialItems = EMPTY
     // 未登録ユーザーは SSE を有効化できない
     const toggleSse = () => {
         if (!userId) return
+        // 手動操作後は自動接続タイマーに上書きさせない
+        hasManualSseToggleRef.current = true
         setIsSseEnabled((prev) => !prev)
     }
 
+    /**
+     * Defers the initial SSE auto-connect until just after first paint.
+     * 初回 SSE 自動接続を初回描画直後まで遅らせる副作用。
+     *
+     * 依存配列: userId (ユーザーごとに provider が key リマウントされるため、切替で張り直す)。
+     * クリーンアップ: タイマー解除 (アンマウント/再マウントでのリークと二重発火を防ぐ)。
+     */
+    useEffect(() => {
+        if (!userId) return
+        const timer = setTimeout(() => {
+            // 手動でトグルされていなければ自動接続する
+            if (!hasManualSseToggleRef.current) setIsSseEnabled(true)
+        }, SSE_INITIAL_CONNECT_DEFER_MS)
+        return () => clearTimeout(timer)
+    }, [userId])
+
     /**
      * Remove a stale item from the list as a safety net.
      * フェッチ後にレポートが見つからなかった場合の安全弁としてアイテムを除去する。

package/src/client/hooks/use-daily-report.spec.ts

@@ -201,3 +201,60 @@ describe("getGlobal behavior (window グローバル変数の読み取り)", ()
         expect(mod.getCachedReport(1)).toBeNull()
     })
 })
+
+describe("useDailyReportDetail の初回フェッチ (デバウンス適用範囲)", () => {
+    let mod: typeof import("./use-daily-report")
+
+    beforeEach(async () => {
+        vi.resetModules()
+        mod = await import("./use-daily-report")
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+        vi.unstubAllGlobals()
+    })
+
+    /** business-date 応答を 1 件返す fetch スタブ。呼び出し回数を記録する。 */
+    const stubFetch = () => {
+        const calls: string[] = []
+        vi.stubGlobal(
+            "fetch",
+            vi.fn(async (input: RequestInfo | URL) => {
+                calls.push(String(input))
+                return new Response(JSON.stringify({ reports: [makeMockReport({ reportHubId: 7, date: "2026-01-01" })] }), { status: 200, headers: { "Content-Type": "application/json" } })
+            }),
+        )
+        return calls
+    }
+
+    it("未キャッシュの初回は即フェッチする (120ms のデバウンスを掛けない)", async () => {
+        const { renderHook, act } = await import("@testing-library/react")
+        const calls = stubFetch()
+        renderHook(() => mod.useDailyReportDetail(7, "2026-01-01"))
+        // タイマーを進めずマイクロタスクだけ流す → 即時 (0ms) 発火の検証
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(0)
+        })
+        expect(calls.length).toBe(1)
+        expect(calls[0]).toContain("business-date?businessDate=2026-01-01")
+    })
+
+    it("キャッシュ済み (stale) の再取得はデバウンスされる", async () => {
+        const { renderHook, act } = await import("@testing-library/react")
+        const calls = stubFetch()
+        // 期限切れのキャッシュを用意 → 表示は即、再取得はデバウンス対象
+        mod.writeCache(makeMockReport({ reportHubId: 7, date: "2026-01-01" }), Date.now() - 1)
+        renderHook(() => mod.useDailyReportDetail(7, "2026-01-01"))
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(0)
+        })
+        // 0ms 時点では発火しない (スクロール churn 吸収のためのデバウンス)
+        expect(calls.length).toBe(0)
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(120)
+        })
+        expect(calls.length).toBe(1)
+    })
+})

package/src/client/hooks/use-daily-report.ts

@@ -7,6 +7,7 @@ import { normalizeBusinessDateKey } from "../../shared/business-date"
 import { createLogger, LogLevel } from "../../shared/logger"
 import type { DailyReportDetail } from "../../shared/types"
 import { useDailyReportConfig } from "../config-context"
+import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
 
 const logger = createLogger(LogLevel.INFO, "use-daily-report")
 
@@ -22,7 +23,6 @@ const getGlobal = (k: string, d: number): number => {
 }
 const TTL = getGlobal("__DAILY_REPORT_CACHE_TTL__", 300_000)
 const REVIVE_MS = getGlobal("__DAILY_REPORT_CACHE_REVIVE_MS__", 60_000)
-const FETCH_DEBOUNCE_MS = 120
 
 // --- Cache Store (Centralized State) ---
 type CacheEntry<T> = { data: T; expiresAt: number }
@@ -430,6 +430,11 @@ export const useDailyReportDetail = (reportHubId: number, businessDate: string |
         setIsLoading(!cached)
         setIsRefetching(true)
 
+        // 未キャッシュ (骨組み表示中) の初回取得は即時に走らせる。デバウンスはスクロール連打の
+        // 無駄取りを抑える目的なので、スクロール churn の無い初回に効かせると純粋な遅延になる。
+        // キャッシュ済み (内容表示中) の stale 再取得だけデバウンスして churn を吸収する
+        const debounceMs = cached ? DAILY_REPORT_FETCH_DEBOUNCE_MS : 0
+
         const timer = setTimeout(async () => {
             if (reqRef.current.token !== token) return
             try {
@@ -453,7 +458,7 @@ export const useDailyReportDetail = (reportHubId: number, businessDate: string |
                     setIsRefetching(false)
                 }
             }
-        }, FETCH_DEBOUNCE_MS)
+        }, debounceMs)
 
         return () => clearTimeout(timer)
     }, [reportHubId, businessDate, apiBasePath])

package/src/client/utils/constants.ts

@@ -6,7 +6,17 @@ import type { DailyReportDetailResource } from "../hooks/use-daily-report"
  * Shared constants for Daily Report data fetching parameters.
  * 日報データ取得で利用する共通パラメーター。
  */
-export const DAILY_REPORT_FETCH_DEBOUNCE_MS = 180
+export const DAILY_REPORT_FETCH_DEBOUNCE_MS = 120
+
+/**
+ * Delay before the provider auto-connects SSE, freeing a browser connection slot for first paint.
+ * SSE を自動接続するまでの遅延。初回描画とその中身フェッチへ接続枠を譲るための猶予。
+ *
+ * HTTP/1.1 のオリジン当たり 6 接続のうち、ids ストリームと SSE で 2 枠を常時占有する。
+ * SSE 接続を初回描画直後まで遅らせ、その 1 枠を初回の中身フェッチ (`/business-date`) に回す。
+ * リアルタイム更新の初動がこの分だけ遅れるが、その間の状態はストリーム / SWR が担保する。
+ */
+export const SSE_INITIAL_CONNECT_DEFER_MS = 1000
 
 export const DEFAULT_ITEM_HEIGHT = 160
 export const ITEM_VERTICAL_PADDING = 6