@aiquants/daily-report 0.1.1

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

@@ -0,0 +1,910 @@
+/**
+ * Action context providing optimistic CRUD + SSE synchronization for daily reports.
+ * 日報の楽観的 CRUD と SSE 同期を提供するアクションコンテキスト。
+ */
+import { type Context, createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from "react"
+import { createLogger, LogLevel } from "../../shared/logger"
+import type { DailyReportSseMessage } from "../../shared/sse-schema"
+import type { DailyReportCommentItem, DailyReportDetail, DailyReportItem, DailyReportUser } from "../../shared/types"
+import { useDailyReportConfig } from "../config-context"
+import { acquireMutationLock, applyDailyReportServerUpdates, deleteDailyReportCache, getCachedReport, registerRecentDeletion, releaseMutationLock, subscribeCacheReady, updateDailyReportCache, writeCache } from "../hooks/use-daily-report"
+import { useDailyReportSseConnection } from "../hooks/use-daily-report-sse-connection"
+
+const logger = createLogger(LogLevel.INFO, "daily-report-action-context")
+
+type ActionResponse = {
+    status: string
+    reportHubId: number
+    newComment?: DailyReportCommentItem
+    updatedStatus?: { isStarred?: boolean; isRead?: boolean }
+    deletedCommentId?: string
+    updatedAt?: string // ISO string from server
+    report?: DailyReportDetail // Full report for creation/updates
+    clientTempId?: string // Validation token for optimistic updates
+    [key: string]: unknown
+}
+
+type DailyReportActionContextType = {
+    /** 表示中ユーザー (楽観的コメントの作者名等に使用)。 */
+    user?: DailyReportUser
+    /** reportHubId -> Map<tempCommentId, content> (追加コメントの一時IDと内容) */
+    pendingAddCommentIds: React.MutableRefObject<Map<number, Map<number, string>>>
+    /** reportHubId -> Set<tempCommentId> (削除された一時ID) */
+    pendingDeleteCommentIds: React.MutableRefObject<Map<number, Set<number>>>
+    /** reportHubId -> boolean (スターの保留状態) */
+    pendingStarUpdates: React.MutableRefObject<Map<number, boolean>>
+    /** reportHubId -> boolean (既読の保留状態) */
+    pendingReadUpdates: React.MutableRefObject<Map<number, boolean>>
+    /** tempId -> realId (解決されたID) */
+    resolvedIdMap: React.MutableRefObject<Map<number, number>>
+    /** 状態変更通知用バージョン */
+    version: number
+    /** 日報リスト */
+    items: DailyReportItem[]
+    /** SSE購読が有効かどうか */
+    isSseEnabled: boolean
+    /** SSE購読の有効/無効を切り替える */
+    toggleSse: () => void
+
+    /**
+     * コメントを追加します。
+     * @param reportHubId 日報HubID
+     * @param content コメント内容
+     * @param businessDate 営業日
+     */
+    addComment: (reportHubId: number, content: string, businessDate: string) => Promise<void>
+    /**
+     * コメントを削除します。
+     * @param reportHubId 日報HubID
+     * @param commentId コメントID (一時IDまたは実ID)
+     * @param businessDate 営業日
+     */
+    deleteComment: (reportHubId: number, commentId: number, businessDate: string) => Promise<void>
+    /**
+     * スターの状態を切り替えます。
+     * @param reportHubId 日報HubID
+     * @param isStarred 新しいスター状態
+     * @param businessDate 営業日
+     */
+    toggleStar: (reportHubId: number, isStarred: boolean, businessDate: string) => Promise<void>
+    /**
+     * 既読の状態を切り替えます。
+     * @param reportHubId 日報HubID
+     * @param isRead 新しい既読状態
+     * @param businessDate 営業日
+     */
+    toggleRead: (reportHubId: number, isRead: boolean, businessDate: string) => Promise<void>
+    createReport: (businessDate: string) => Promise<number>
+    updateReport: (reportHubId: number, data: { title?: string; content?: string }, businessDate: string) => Promise<void>
+    publishReport: (reportHubId: number, businessDate: string) => Promise<void>
+    deleteReport: (reportHubId: number, businessDate: string) => Promise<void>
+    /** stale アイテムをリストから除去する安全弁 */
+    removeStaleItem: (reportHubId: number) => void
+}
+
+// HMR / dual-bundle (ESM+CJS) でもコンテキスト identity を一意に保つため、
+// グローバルへ登録した単一インスタンスを常に使用する。
+declare global {
+    var __DailyReportActionContext: Context<DailyReportActionContextType | null> | undefined
+}
+
+const DailyReportActionContext: Context<DailyReportActionContextType | null> = globalThis.__DailyReportActionContext ?? createContext<DailyReportActionContextType | null>(null)
+globalThis.__DailyReportActionContext = DailyReportActionContext
+
+export const useDailyReportActionContext = () => {
+    const context = useContext(DailyReportActionContext)
+    if (!context) {
+        throw new Error("useDailyReportActionContext must be used within a DailyReportActionProvider")
+    }
+    return context
+}
+
+const getUserDisplayName = (user: DailyReportUser | undefined): string => {
+    if (!user) return "Unknown"
+    if (user.displayName?.trim()) return user.displayName
+    if (user.name) {
+        const fullName = `${user.name.familyName ?? ""} ${user.name.givenName ?? ""}`.trim()
+        if (fullName) return fullName
+    }
+    return user.emails?.[0]?.value ?? "Unknown"
+}
+
+/**
+ * Provides a context for daily report actions including comments, stars, leads, and basic CRUD operations.
+ * Also manages optimistic UI updates and real-time synchronization via SSE.
+ * 日報のアクション（コメント追加・削除、スター、既読）を管理するプロバイダー。
+ * 楽観的UI更新とAPI通信の抽象化を提供します。
+ */
+export const DailyReportActionProvider = ({ children, user, initialItems = [], userId }: { children: ReactNode; user?: DailyReportUser; initialItems?: DailyReportItem[]; userId?: string | null }) => {
+    const { apiBasePath, draftLabelName } = useDailyReportConfig()
+    const pendingAddCommentIds = useRef<Map<number, Map<number, string>>>(new Map())
+    const pendingDeleteCommentIds = useRef<Map<number, Set<number>>>(new Map())
+    const pendingStarUpdates = useRef<Map<number, boolean>>(new Map())
+    const pendingReadUpdates = useRef<Map<number, boolean>>(new Map())
+    const resolvedIdMap = useRef<Map<number, number>>(new Map())
+    const [version, setVersion] = useState(0)
+    const [items, setItems] = useState<DailyReportItem[]>(initialItems)
+    const [isSseEnabled, setIsSseEnabled] = useState(!!userId)
+    const pendingAddPromises = useRef<Map<number, Promise<number>>>(new Map())
+    const manuallyTrackingIds = useRef<Set<number>>(new Set())
+    /** 削除済み ID を記録し、マージロジックでの復活を防止する */
+    const removedIds = useRef<Set<number>>(new Set())
+    /** 自分が発行したアクションのID（SSEエコー無視用） */
+    const processedClientTempIds = useRef<Set<string>>(new Set())
+
+    /**
+     * Queue for SSE messages that arrived before the target report was cached.
+     * キャッシュ未取得時に到着した SSE メッセージの待機キュー。
+     * key: reportHubId, value: { messages, unsubscribe, timer }
+     */
+    const pendingSseQueue = useRef<
+        Map<
+            number,
+            {
+                messages: Exclude<DailyReportSseMessage, { type: "connected" }>[]
+                unsubscribe: () => void
+                timer: ReturnType<typeof setTimeout>
+            }
+        >
+    >(new Map())
+
+    /**
+     * Ref to always access the latest handleSseMessage for queue replay.
+     * キューの再処理時に常に最新の handleSseMessage を参照するための ref。
+     */
+    const handleSseMessageRef = useRef<(payload: Exclude<DailyReportSseMessage, { type: "connected" }>) => void>(() => {})
+
+    /**
+     * Enqueue an SSE message for a report that isn't cached yet.
+     * Subscribes to cache-ready events and replays queued messages when the cache becomes available.
+     *
+     * キャッシュ未取得のレポートへの SSE メッセージをキューに追加する。
+     * キャッシュ書き込みを監視し、書き込まれたらキューのメッセージを再処理する。
+     */
+    const enqueuePendingSseMessage = useCallback((reportHubId: number, message: Exclude<DailyReportSseMessage, { type: "connected" }>) => {
+        const queue = pendingSseQueue.current
+        const existing = queue.get(reportHubId)
+
+        if (existing) {
+            // 既存キューにメッセージを追加するだけ
+            existing.messages.push(message)
+            return
+        }
+
+        // 新規キューを作成
+        const entry = {
+            messages: [message],
+            unsubscribe: () => {},
+            timer: setTimeout(() => {
+                // 30秒経過してもキャッシュが来なければキューを破棄
+                const e = queue.get(reportHubId)
+                if (e) {
+                    e.unsubscribe()
+                    queue.delete(reportHubId)
+                    logger.warn(`[SSE Queue] Expired: reportHubId=${reportHubId}, dropped=${e.messages.length} messages`)
+                }
+            }, 30_000),
+        }
+
+        // キャッシュ書き込みを監視
+        entry.unsubscribe = subscribeCacheReady(reportHubId, () => {
+            const e = queue.get(reportHubId)
+            if (!e) return
+
+            // キャッシュが書き込まれたか確認
+            if (!getCachedReport(reportHubId, { ignoreExpiry: true })) return
+
+            // キューをクリーンアップ
+            e.unsubscribe()
+            clearTimeout(e.timer)
+            queue.delete(reportHubId)
+
+            // キューのメッセージを最新の handleSseMessage で再処理
+            logger.info(`[SSE Queue] Replaying ${e.messages.length} messages for reportHubId=${reportHubId}`)
+            for (const msg of e.messages) {
+                handleSseMessageRef.current(msg)
+            }
+        })
+
+        queue.set(reportHubId, entry)
+    }, [])
+
+    const addProcessedId = (id: string) => {
+        processedClientTempIds.current.add(id)
+        // Auto-remove after 30 seconds to prevent memory leaks
+        // 30秒後に自動削除（メモリリーク防止）
+        setTimeout(() => {
+            processedClientTempIds.current.delete(id)
+        }, 30000)
+    }
+
+    const isProcessedId = useCallback((id: string | undefined): boolean => {
+        return !!id && processedClientTempIds.current.has(id)
+    }, [])
+
+    /**
+     * Upserts a report item into the list while keeping businessDate-desc order.
+     *
+     * レポートアイテムをリストへ upsert し、businessDate 降順を維持します。
+     */
+    const upsertItem = useCallback((reportHubId: number, businessDate: string | null | undefined) => {
+        setItems((prev) => {
+            const nextBusinessDate = businessDate ?? prev.find((item) => item.reportHubId === reportHubId)?.businessDate ?? null
+            const exists = prev.some((item) => item.reportHubId === reportHubId)
+            const merged = exists ? prev.map((item) => (item.reportHubId === reportHubId ? { ...item, businessDate: nextBusinessDate } : item)) : [{ reportHubId, businessDate: nextBusinessDate }, ...prev]
+
+            return merged.sort((a, b) => {
+                const left = a.businessDate ?? ""
+                const right = b.businessDate ?? ""
+                return right.localeCompare(left)
+            })
+        })
+    }, [])
+
+    // 未登録ユーザーは SSE を有効化できない
+    const toggleSse = () => {
+        if (!userId) return
+        setIsSseEnabled((prev) => !prev)
+    }
+
+    /**
+     * Remove a stale item from the list as a safety net.
+     * フェッチ後にレポートが見つからなかった場合の安全弁としてアイテムを除去する。
+     */
+    const removeStaleItem = useCallback((reportHubId: number) => {
+        removedIds.current.add(reportHubId)
+        setItems((prev) => prev.filter((item) => item.reportHubId !== reportHubId))
+    }, [])
+
+    /**
+     * Merge initialItems with prevItems instead of replacing.
+     * Items already in the list are kept even if temporarily absent from the API response.
+     * Removal is handled exclusively by the report-delete SSE handler.
+     *
+     * initialItems と prevItems をマージする（全置換ではない）。
+     * API レスポンスから一時的に欠落した ID も prevItems に残っていれば保持する。
+     * 削除は report-delete SSE ハンドラーでのみ行う。
+     */
+    // initialItems と prevItems のマージ — 削除済み ID の復活を防止する
+    // 外部リソース同期: React Router loader の initialItems 更新に反応する
+    useEffect(() => {
+        // initialItems に含まれない removedIds エントリは不要なのでクリーンアップ
+        const initialIds = new Set(initialItems.map((item) => item.reportHubId))
+        // Set のイテレーション中の delete は JS 仕様で安全 (visited は再訪問しない)
+        for (const id of removedIds.current) {
+            if (!initialIds.has(id)) {
+                removedIds.current.delete(id)
+            }
+        }
+
+        setItems((prevItems) => {
+            // initialItems をベースにマップを構築（removedIds を除外）
+            const mergedMap = new Map<number, DailyReportItem>()
+            for (const item of initialItems) {
+                if (!removedIds.current.has(item.reportHubId)) {
+                    mergedMap.set(item.reportHubId, item)
+                }
+            }
+
+            // prevItems にのみ存在する ID を保持（削除は report-delete SSE で行う）
+            for (const item of prevItems) {
+                if (!(mergedMap.has(item.reportHubId) || removedIds.current.has(item.reportHubId))) {
+                    mergedMap.set(item.reportHubId, item)
+                }
+            }
+
+            // businessDate 降順でソート
+            return Array.from(mergedMap.values()).sort((a, b) => {
+                const dateA = a.businessDate ? new Date(a.businessDate).getTime() : 0
+                const dateB = b.businessDate ? new Date(b.businessDate).getTime() : 0
+                return dateB - dateA
+            })
+        })
+    }, [initialItems])
+
+    const handleSseMessage = useCallback(
+        (payload: Exclude<DailyReportSseMessage, { type: "connected" }>) => {
+            // Ignore echo of own actions
+            // 自分が発行したアクションのエコーは無視する
+            // clientTempId は connected 以外すべてのメッセージに存在する（型で保証済み）
+            if (isProcessedId(payload.clientTempId)) {
+                return
+            }
+
+            switch (payload.type) {
+                case "comment-add": {
+                    const { comment, reportHubId } = payload
+                    const cached = getCachedReport(reportHubId, { ignoreExpiry: true })
+                    if (cached) {
+                        // Check for duplicates
+                        // 重複チェック
+                        if (cached.commentItems.some((c) => c.id === comment.id)) return
+
+                        // Check if this comment matches a pending optimistic comment
+                        let isMyComment = false
+                        const pendingMap = pendingAddCommentIds.current.get(reportHubId)
+                        if (pendingMap) {
+                            for (const [tempId, content] of pendingMap.entries()) {
+                                if (content === comment.content) {
+                                    pendingMap.delete(tempId)
+                                    resolvedIdMap.current.set(tempId, comment.id)
+                                    isMyComment = true
+                                    break
+                                }
+                            }
+                        }
+
+                        const newComment: DailyReportCommentItem = {
+                            ...comment,
+                            userName: comment.userName || (isMyComment ? getUserDisplayName(user) : "Unknown"),
+                            createdAt: comment.createdAt || new Date().toISOString(),
+                            isMine: isMyComment, // Use the detected ownership
+                        }
+
+                        const updatedReport = {
+                            ...cached,
+                            commentItems: [...cached.commentItems, newComment].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
+                        }
+                        applyDailyReportServerUpdates(reportHubId, updatedReport)
+                        // Update mutation time to prevent stale fetch overwrite
+                        // 古いフェッチによる上書きを防ぐために変更時刻を更新
+                        acquireMutationLock(reportHubId)
+                        releaseMutationLock(reportHubId)
+                        setVersion((v) => v + 1) // UI更新トリガー
+                    } else {
+                        // キャッシュ未取得 → フェッチ完了後にリプレイ
+                        enqueuePendingSseMessage(reportHubId, payload)
+                    }
+                    break
+                }
+                case "comment-delete": {
+                    const { commentId, reportHubId } = payload
+                    const cached = getCachedReport(reportHubId, { ignoreExpiry: true })
+                    if (cached) {
+                        const updatedReport = {
+                            ...cached,
+                            commentItems: cached.commentItems.filter((c) => c.id !== commentId),
+                        }
+                        applyDailyReportServerUpdates(reportHubId, updatedReport)
+                        // Update mutation time to prevent stale fetch overwrite
+                        // 古いフェッチによる上書きを防ぐために変更時刻を更新
+                        acquireMutationLock(reportHubId)
+                        releaseMutationLock(reportHubId)
+                        setVersion((v) => v + 1)
+                    } else {
+                        enqueuePendingSseMessage(reportHubId, payload)
+                    }
+                    break
+                }
+                case "status-update": {
+                    const { statusType, value, reportHubId } = payload
+                    const cached = getCachedReport(reportHubId, { ignoreExpiry: true })
+
+                    if (statusType === "star") {
+                        if (pendingStarUpdates.current.get(reportHubId) === value) {
+                            pendingStarUpdates.current.delete(reportHubId)
+                        }
+                        if (cached) {
+                            const updatedReport = { ...cached, isStarred: value }
+                            applyDailyReportServerUpdates(reportHubId, updatedReport)
+                            setVersion((v) => v + 1)
+                        } else {
+                            enqueuePendingSseMessage(reportHubId, payload)
+                        }
+                    } else if (statusType === "read") {
+                        if (pendingReadUpdates.current.get(reportHubId) === value) {
+                            pendingReadUpdates.current.delete(reportHubId)
+                        }
+                        if (cached) {
+                            const updatedReport = { ...cached, isRead: value }
+                            applyDailyReportServerUpdates(reportHubId, updatedReport)
+                            setVersion((v) => v + 1)
+                        } else {
+                            enqueuePendingSseMessage(reportHubId, payload)
+                        }
+                    }
+                    break
+                }
+                case "report-delete": {
+                    const { reportHubId } = payload
+                    manuallyTrackingIds.current.delete(reportHubId)
+                    // マージロジックでの復活を防止するために削除済み ID を記録
+                    removedIds.current.add(reportHubId)
+
+                    // 削除されたレポートへの待機中 SSE メッセージを破棄
+                    const pendingEntry = pendingSseQueue.current.get(reportHubId)
+                    if (pendingEntry) {
+                        pendingEntry.unsubscribe()
+                        clearTimeout(pendingEntry.timer)
+                        pendingSseQueue.current.delete(reportHubId)
+                    }
+
+                    const cached = getCachedReport(reportHubId, { ignoreExpiry: true })
+                    if (cached?.date) {
+                        deleteDailyReportCache(reportHubId, cached.date)
+                        setVersion((v) => v + 1)
+                    }
+                    setItems((prev) => prev.filter((item) => item.reportHubId !== reportHubId))
+                    break
+                }
+                case "report-create":
+                case "report-update":
+                case "report-publish": {
+                    // report はスキーマで必須なのでバリデーション通過後は必ず存在する（if ガード不要）
+                    const { report } = payload
+                    applyDailyReportServerUpdates(report.reportHubId, report)
+                    if (payload.type === "report-create" || payload.type === "report-publish") {
+                        manuallyTrackingIds.current.add(report.reportHubId)
+                        upsertItem(report.reportHubId, report.date)
+                    }
+                    setVersion((v) => v + 1)
+                    break
+                }
+            }
+        },
+        [isProcessedId, upsertItem, user, enqueuePendingSseMessage],
+    )
+
+    // 常に最新の handleSseMessage をキューのリプレイから参照できるようにする
+    handleSseMessageRef.current = handleSseMessage
+
+    /**
+     * Cleanup all pending SSE queues on unmount.
+     * アンマウント時に全キューをクリーンアップする。
+     */
+    useEffect(() => {
+        return () => {
+            for (const entry of pendingSseQueue.current.values()) {
+                entry.unsubscribe()
+                clearTimeout(entry.timer)
+            }
+            pendingSseQueue.current.clear()
+        }
+    }, [])
+
+    useDailyReportSseConnection({ isSseEnabled, onMessage: handleSseMessage })
+
+    /**
+     * Common helper function to execute API actions.
+     * APIアクションを実行する共通ヘルパー関数。
+     */
+    const executeAction = async <T,>(
+        reportHubId: number,
+        intent: string,
+        businessDate: string,
+        params: Record<string, string>,
+        callbacks: {
+            onOptimistic?: () => void
+            onSuccess?: (data: ActionResponse) => Promise<T> | T
+            onFailure?: () => void
+        },
+        options?: {
+            keepLock?: boolean
+            skipLock?: boolean
+        },
+    ): Promise<T> => {
+        if (!options?.skipLock) acquireMutationLock(reportHubId)
+        callbacks.onOptimistic?.()
+
+        // Generate or use provided clientTempId
+        const clientTempId = params.clientTempId || crypto.randomUUID()
+        addProcessedId(clientTempId)
+
+        const formData = new FormData()
+        formData.append("intent", intent)
+        formData.append("reportHubId", String(reportHubId))
+        formData.append("businessDate", businessDate)
+        formData.append("operationTimestamp", String(Date.now()))
+        formData.append("clientTempId", clientTempId)
+
+        for (const [k, v] of Object.entries(params)) {
+            if (k !== "clientTempId") {
+                formData.append(k, v)
+            }
+        }
+
+        try {
+            const res = await fetch(`${apiBasePath}/action`, {
+                method: "POST",
+                body: formData,
+                headers: { Accept: "application/json" },
+            })
+            if (!res.ok) {
+                const error = new Error(`Failed to ${intent}`)
+                Object.assign(error, { status: res.status })
+                throw error
+            }
+            const data = await res.json()
+            if (data.status !== "OK" || (intent !== "create" && String(data.reportHubId) !== String(reportHubId))) {
+                throw new Error(`Invalid response for ${intent}`)
+            }
+            if (typeof data.clientTempId !== "string" || data.clientTempId !== clientTempId) {
+                throw new Error(`Invalid clientTempId for ${intent}`)
+            }
+            return (await callbacks.onSuccess?.(data)) as T
+        } catch (e) {
+            logger.error(`${intent} failed:`, e)
+            callbacks.onFailure?.()
+            throw e
+        } finally {
+            if (!(options?.keepLock || options?.skipLock)) {
+                releaseMutationLock(reportHubId)
+            }
+        }
+    }
+
+    const addComment = async (reportHubId: number, content: string, businessDate: string) => {
+        const id = Number(reportHubId)
+        const tempId = -1 * Date.now()
+        const promise = executeAction(
+            id,
+            "addComment",
+            businessDate,
+            { content, clientTempId: String(tempId) },
+            {
+                onOptimistic: () => {
+                    if (!pendingAddCommentIds.current.has(id)) pendingAddCommentIds.current.set(id, new Map())
+                    pendingAddCommentIds.current.get(id)?.set(tempId, content)
+                    setVersion((v) => v + 1)
+                },
+                onSuccess: (data) => {
+                    if (!data.newComment) throw new Error("No new comment returned")
+                    const realId = data.newComment.id
+                    resolvedIdMap.current.set(tempId, realId)
+                    pendingAddCommentIds.current.get(id)?.delete(tempId)
+
+                    const cachedReport = getCachedReport(id, { ignoreExpiry: true })
+                    if (cachedReport && !cachedReport.commentItems.some((c) => c.id === realId)) {
+                        updateDailyReportCache(id, {
+                            commentItems: [...cachedReport.commentItems, { ...data.newComment, id: realId, isMine: true, userName: getUserDisplayName(user) }],
+                            updatedAt: data.updatedAt,
+                        })
+                    }
+                    return realId
+                },
+                onFailure: () => {
+                    pendingAddCommentIds.current.get(id)?.delete(tempId)
+                },
+            },
+            { skipLock: true },
+        ).finally(() => pendingAddPromises.current.delete(tempId))
+
+        pendingAddPromises.current.set(tempId, promise)
+        await promise
+    }
+
+    const deleteComment = async (reportHubId: number, commentId: number, businessDate: string) => {
+        const id = Number(reportHubId)
+        // 1. Optimistic UI Update
+        if (!pendingDeleteCommentIds.current.has(id)) pendingDeleteCommentIds.current.set(id, new Set())
+        pendingDeleteCommentIds.current.get(id)?.add(commentId)
+        setVersion((v) => v + 1)
+
+        // 2. Resolve ID
+        let realId = commentId
+        if (commentId < 0) {
+            const resolved = resolvedIdMap.current.get(commentId)
+            if (resolved !== undefined) {
+                realId = resolved
+            } else {
+                const promise = pendingAddPromises.current.get(commentId)
+                if (!promise) return // 既に削除済みかエラー
+                try {
+                    realId = await promise
+                } catch {
+                    return // 追加失敗時は削除不要
+                }
+            }
+        }
+
+        // 3. Server Request
+        await executeAction(
+            id,
+            "deleteComment",
+            businessDate,
+            { commentId: String(realId) },
+            {
+                onSuccess: (data) => {
+                    const deletedId = typeof data.deletedCommentId === "string" ? Number(data.deletedCommentId) : realId
+                    const cachedReport = getCachedReport(id, { ignoreExpiry: true })
+                    if (cachedReport) {
+                        updateDailyReportCache(id, {
+                            commentItems: cachedReport.commentItems.filter((c) => c.id !== deletedId),
+                            updatedAt: data.updatedAt,
+                        })
+                        registerRecentDeletion(deletedId)
+                    }
+                    pendingDeleteCommentIds.current.get(id)?.delete(commentId)
+                },
+                onFailure: () => {
+                    pendingDeleteCommentIds.current.get(id)?.delete(commentId)
+                },
+            },
+            { skipLock: true },
+        )
+    }
+
+    const toggleStar = async (reportHubId: number, isStarred: boolean, businessDate: string) => {
+        const id = Number(reportHubId)
+        await executeAction(
+            id,
+            "toggleStar",
+            businessDate,
+            { isStarred: String(isStarred) },
+            {
+                onOptimistic: () => {
+                    updateDailyReportCache(id, { isStarred })
+                    pendingStarUpdates.current.set(id, isStarred)
+                    setVersion((v) => v + 1)
+                },
+                onSuccess: (data) => {
+                    if (data.updatedStatus && typeof data.updatedStatus.isStarred === "boolean") {
+                        const cached = getCachedReport(id, { ignoreExpiry: true })
+                        if (cached) {
+                            updateDailyReportCache(id, { isStarred: data.updatedStatus.isStarred, updatedAt: data.updatedAt })
+                            setVersion((v) => v + 1)
+                        }
+                    }
+                    pendingStarUpdates.current.delete(id)
+                },
+                onFailure: () => {
+                    updateDailyReportCache(id, { isStarred: !isStarred })
+                    pendingStarUpdates.current.delete(id)
+                },
+            },
+            { skipLock: true },
+        )
+    }
+
+    const toggleReadImpl = async (reportHubId: number, isRead: boolean, businessDate: string) => {
+        const id = Number(reportHubId)
+        await executeAction(
+            id,
+            "toggleRead",
+            businessDate,
+            { isRead: String(isRead) },
+            {
+                onOptimistic: () => {
+                    updateDailyReportCache(id, { isRead })
+                    pendingReadUpdates.current.set(id, isRead)
+                    setVersion((v) => v + 1)
+                },
+                onSuccess: (data) => {
+                    if (data.updatedStatus && typeof data.updatedStatus.isRead === "boolean") {
+                        const cached = getCachedReport(id, { ignoreExpiry: true })
+                        if (cached) {
+                            updateDailyReportCache(id, { isRead: data.updatedStatus.isRead, updatedAt: data.updatedAt })
+                            setVersion((v) => v + 1)
+                        }
+                    }
+                    pendingReadUpdates.current.delete(id)
+                },
+                onFailure: () => {
+                    updateDailyReportCache(id, { isRead: !isRead })
+                    pendingReadUpdates.current.delete(id)
+                },
+            },
+            { skipLock: true },
+        )
+    }
+    // ref 経由で最新実装を参照し、安定した関数 identity を提供する
+    // (SSE イベントによるコンテキスト再レンダリングで auto-read タイマーがリセットされるのを防止)
+    const toggleReadRef = useRef(toggleReadImpl)
+    toggleReadRef.current = toggleReadImpl
+    const toggleRead = useCallback((reportHubId: number, isRead: boolean, businessDate: string) => toggleReadRef.current(reportHubId, isRead, businessDate), [])
+
+    const createReport = async (businessDate: string) => {
+        const tempId = -1 * Date.now()
+        // Optimistic UI update
+        const now = new Date().toISOString()
+        const dummyReport: DailyReportDetail = {
+            reportHubId: tempId,
+            date: businessDate,
+            createdAt: now,
+            author: getUserDisplayName(user),
+            userId: user?.id ?? "unknown",
+            employeeName: getUserDisplayName(user),
+            updatedBy: getUserDisplayName(user),
+            updatedAt: now,
+            category: null,
+            creationCategory: null,
+            visitTimeFrom: null,
+            visitTimeTo: null,
+            customerName: null,
+            interviewers: [],
+            subject: "",
+            content: "",
+            comments: [],
+            isRead: true,
+            isStarred: false,
+            labels: [{ id: 0, name: draftLabelName, color: "#9ca3af" }],
+            commentItems: [],
+        }
+        writeCache(dummyReport, Date.now() + 300000, false)
+
+        setItems((prev) => [
+            {
+                reportHubId: tempId,
+                businessDate: businessDate,
+            },
+            ...prev,
+        ])
+
+        try {
+            const res = await executeAction<ActionResponse>(
+                0,
+                "create",
+                businessDate,
+                { clientTempId: String(tempId) },
+                {
+                    onSuccess: (data) => data,
+                },
+            )
+            // Validate response mapping
+            if (res.clientTempId && res.clientTempId !== String(tempId)) {
+                logger.warn(`[createReport] ID mismatch. req=${tempId}, res=${res.clientTempId}`)
+                // Mismatch implies this response is not for this specific request. Throwing here triggers revert.
+                throw new Error("Optimistic ID mismatch")
+            }
+
+            const newId = Number(res.reportHubId)
+
+            // newId を一時的にロックし、createReport 以前に開始された背景 prefetch の
+            // cacheMany による stale データ上書きを防止する
+            acquireMutationLock(newId)
+
+            // Seed cache with server response (checking staleness)
+            if (res.report) {
+                applyDailyReportServerUpdates(newId, res.report)
+                setVersion((v) => v + 1)
+            }
+
+            setItems((prev) => {
+                // If newId is already present (e.g. from SSE), just remove tempId to avoid duplication
+                if (prev.some((item) => item.reportHubId === newId)) {
+                    return prev.filter((item) => item.reportHubId !== tempId)
+                }
+                return prev.map((item) => (item.reportHubId === tempId ? { ...item, reportHubId: newId } : item))
+            })
+
+            // ロック解放: lastMutations に newId が記録され、以降の cacheMany でも保護される
+            setTimeout(() => releaseMutationLock(newId), 1000)
+
+            return newId
+        } catch (e) {
+            logger.error("[createReport] Failed or mismatched", e)
+            // Revert optimistic update
+            setItems((prev) => prev.filter((item) => item.reportHubId !== tempId))
+            throw e
+        }
+    }
+
+    const updateReport = async (reportHubId: number, data: { title?: string; content?: string }, businessDate: string) => {
+        const id = Number(reportHubId)
+        await executeAction(
+            id,
+            "update",
+            businessDate,
+            { ...(data.title && { title: data.title }), ...(data.content && { content: data.content }) },
+            {
+                onSuccess: () => {
+                    const cached = getCachedReport(id, { ignoreExpiry: true })
+                    if (cached) {
+                        updateDailyReportCache(id, {
+                            subject: data.title ?? cached.subject,
+                            content: data.content ?? cached.content,
+                        })
+                        setVersion((v) => v + 1)
+                    }
+                },
+            },
+        )
+    }
+
+    const publishReport = async (reportHubId: number, businessDate: string) => {
+        const id = Number(reportHubId)
+        const cached = getCachedReport(id, { ignoreExpiry: true })
+        const oldLabels = cached?.labels || []
+
+        await executeAction(
+            id,
+            "publish",
+            businessDate,
+            {},
+            {
+                onOptimistic: () => {
+                    if (cached) {
+                        const newLabels = cached.labels.filter((l) => l.name !== draftLabelName)
+                        updateDailyReportCache(id, {
+                            labels: newLabels,
+                        })
+                        setVersion((v) => v + 1)
+                    }
+                },
+                onSuccess: (data) => {
+                    // サーバーからのレスポンスを正とする
+                    if (data.report) {
+                        applyDailyReportServerUpdates(id, data.report)
+                        setVersion((v) => v + 1)
+                    }
+                },
+                onFailure: () => {
+                    // ロールバック
+                    updateDailyReportCache(id, {
+                        labels: oldLabels,
+                    })
+                    setVersion((v) => v + 1)
+                },
+            },
+            { skipLock: true },
+        )
+    }
+
+    const deleteReport = async (reportHubId: number, businessDate: string) => {
+        const id = Number(reportHubId)
+        const targetItem = items.find((i) => i.reportHubId === id)
+
+        // マージロジックでの復活を防止するために削除済み ID を記録
+        removedIds.current.add(id)
+        // Optimistic UI update
+        setItems((prev) => prev.filter((item) => item.reportHubId !== id))
+
+        try {
+            await executeAction(
+                id,
+                "delete",
+                businessDate,
+                {},
+                {
+                    onSuccess: (_data) => {
+                        deleteDailyReportCache(id, businessDate)
+                        // Note: Item already removed from list optimistically
+                    },
+                },
+            )
+        } catch (e: unknown) {
+            const error = e as { status?: number }
+            // 既に削除済み(404)の場合は、成功とみなしてロールバックしない（キャッシュはクリアする）
+            if (error.status === 404) {
+                deleteDailyReportCache(id, businessDate)
+                return
+            }
+
+            // それ以外のエラーの場合は、楽観的更新をロールバックする
+            removedIds.current.delete(id)
+            if (targetItem) {
+                setItems((prev) => {
+                    if (prev.some((i) => i.reportHubId === id)) return prev
+                    return [targetItem, ...prev].sort((a, b) => (b.businessDate ?? "").localeCompare(a.businessDate ?? ""))
+                })
+            }
+        }
+    }
+
+    return (
+        <DailyReportActionContext.Provider
+            value={{
+                user,
+                pendingAddCommentIds,
+                pendingDeleteCommentIds,
+                pendingStarUpdates,
+                pendingReadUpdates,
+                resolvedIdMap,
+                version,
+                items,
+                isSseEnabled,
+                toggleSse,
+                addComment,
+                deleteComment,
+                toggleStar,
+                toggleRead,
+                createReport,
+                updateReport,
+                publishReport,
+                deleteReport,
+                removeStaleItem,
+            }}>
+            {children}
+        </DailyReportActionContext.Provider>
+    )
+}