@aiquants/daily-report 0.7.0 → 0.9.0

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

@@ -3,16 +3,63 @@
  * 日報の楽観的 CRUD と SSE 同期を提供するアクションコンテキスト。
  */
 import { type Context, createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from "react"
-import { useRevalidator } from "react-router"
+import { compareIdsStreamOrder, isIdsStreamOrdered, upsertInIdsStreamOrder } from "../../shared/ids-stream"
 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, clearDailyReportCache, DailyReportCache, deleteDailyReportCache, getCachedReport, registerRecentDeletion, releaseMutationLock, subscribeCacheReady, updateDailyReportCache, writeCache } from "../hooks/use-daily-report"
+import {
+    acquireMutationLock,
+    applyBroadcastReportUpdate,
+    applyDailyReportServerUpdates,
+    clearDailyReportCache,
+    DailyReportCache,
+    deleteDailyReportCache,
+    getCachedReport,
+    registerRecentDeletion,
+    releaseMutationLock,
+    subscribeCacheReady,
+    updateDailyReportCache,
+    writeCache,
+} 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 { useDailyReportErrorSurface } from "./daily-report-error-context"
 
 const logger = createLogger(LogLevel.INFO, "daily-report-action-context")
 
+/**
+ * Operation intent -> default banner label (Japanese).
+ * 操作 intent -> 既定バナー用の日本語ラベル。ホストは config.onError で構造化情報 (operation)
+ * を受け取り独自メッセージへ差し替えできる。
+ */
+const OPERATION_LABELS: Record<string, string> = {
+    create: "日報の作成",
+    update: "日報の保存",
+    publish: "日報の公開",
+    delete: "日報の削除",
+    addComment: "コメントの投稿",
+    deleteComment: "コメントの削除",
+    toggleStar: "スターの更新",
+    toggleRead: "既読状態の更新",
+}
+
+/** intent から利用者向けの失敗メッセージを組み立てる。 */
+const describeOperationFailure = (intent: string): string => {
+    const label = OPERATION_LABELS[intent] ?? "操作"
+    return `${label}に失敗しました。時間をおいて再度お試しください。`
+}
+
+/**
+ * Stable empty default for the optional `initialItems` prop.
+ * 省略可能な `initialItems` の安定した空既定値。
+ *
+ * 既定を `= []` にすると毎レンダーで新しい配列参照になり、render-phase の
+ * `initialItems !== prevInitialItems` 判定が常に真になって setState が無限ループし、
+ * React が描画を中断する。単一の凍結参照を共有して同一性を保つ。
+ */
+const EMPTY_INITIAL_ITEMS: DailyReportItem[] = Object.freeze([]) as readonly DailyReportItem[] as DailyReportItem[]
+
 type ActionResponse = {
     status: string
     reportHubId: number
@@ -25,7 +72,7 @@ type ActionResponse = {
     [key: string]: unknown
 }
 
-type DailyReportActionContextType = {
+export type DailyReportActionContextType = {
     /** 表示中ユーザー (楽観的コメントの作者名等に使用)。 */
     user?: DailyReportUser
     /** reportHubId -> Map<tempCommentId, content> (追加コメントの一時IDと内容) */
@@ -120,8 +167,13 @@ const getUserDisplayName = (user: DailyReportUser | undefined): string => {
  * 日報のアクション（コメント追加・削除、スター、既読）を管理するプロバイダー。
  * 楽観的UI更新とAPI通信の抽象化を提供します。
  */
-export const DailyReportActionProvider = ({ children, user, initialItems = [], userId }: { children: ReactNode; user?: DailyReportUser; initialItems?: DailyReportItem[]; userId?: string | null }) => {
+export const DailyReportActionProvider = ({ children, user, initialItems = EMPTY_INITIAL_ITEMS, userId }: { children: ReactNode; user?: DailyReportUser; initialItems?: DailyReportItem[]; userId?: string | null }) => {
     const { apiBasePath, draftLabelName } = useDailyReportConfig()
+    // ミューテーション失敗の通知シーム。executeAction の catch から呼び、失敗を可視化する。
+    // ref 経由で読み、executeAction の依存に載せない (通知参照は安定しているが防御的に)
+    const { notifyError } = useDailyReportErrorSurface()
+    const notifyErrorRef = useRef(notifyError)
+    notifyErrorRef.current = notifyError
     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())
@@ -137,18 +189,35 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
     /** 自分が発行したアクションのID（SSEエコー無視用） */
     const processedClientTempIds = useRef<Set<string>>(new Set())
 
-    const revalidator = useRevalidator()
+    // トゥームストーン掃除のゲート参照。ストリーミング途中の部分配列で掃除すると、
+    // 後続チャンク到着前に削除された ID のトゥームストーンが失われ、遅れて届いた
+    // 削除前スナップショットのチャンクで日報が復活する (effect の依存を増やさないため ref 経由)
+    const streamState = useDailyReportIdsStream()
+    const isStreamSettledRef = useRef(false)
+    isStreamSettledRef.current = streamState.phase === "complete" && !streamState.isRevalidating
+
+    /**
+     * 遅延解決するミューテーション継続の門番。POST /action の待機中にリロード無しの
+     * ユーザー切替が起きた場合、この判定が偽になり、継続はモジュール常駐状態
+     * (常駐ストリームセッション・DailyReportCache・ミューテーションロック) への
+     * 書き込みを放棄する。放棄しないと、旧ユーザーの日報行が新ユーザーの一覧へ
+     * 注入され (観測集合に刻まれて完走剪定も免れる)、切替時に破棄したはずの
+     * 詳細キャッシュへ旧ユーザーの下書き本文が再シードされる (実測再現済み)。
+     * 同一ユーザーの通常ナビゲーション (アンマウント) ではセッションが生き続けるため
+     * 真のままであり、作成直後の日報が常駐データから欠ける round-3 の退行は起こさない。
+     */
+    const isSessionStillOurs = useCallback(() => getDailyReportIdsStreamSessionUserKey() === (userId ?? null), [userId])
 
     const refetchData = useCallback(async () => {
         logger.info("[DailyReportActionProvider] Refetching data without page reload...")
-        if (revalidator.state === "idle") {
-            revalidator.revalidate()
-        }
+        // ID 一覧はストリームセッションのバックグラウンド再検証で更新する
+        // (ルーター再検証は dailyReportShouldRevalidate に抑止されるため使わない)
+        refreshDailyReportIdsStream()
         setVersion((v) => v + 1)
         DailyReportCache.listeners.forEach((listener: (id: number) => void) => {
             listener(-1)
         })
-    }, [revalidator])
+    }, [])
 
     const clearCacheAndRefetch = useCallback(async () => {
         logger.info("[DailyReportActionProvider] Clearing client & server/DB cache and refetching data without page reload...")
@@ -175,15 +244,16 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
             logger.warn("[DailyReportActionProvider] Failed to clear server-side cache:", e)
         }
 
-        // 3. ルートローダーの再フェッチ & UI 再描画
-        if (revalidator.state === "idle") {
-            revalidator.revalidate()
-        }
+        // 3. ID 一覧ストリームをサーバーキャッシュバイパスで再検証 & UI 再描画。
+        // POST 待機中にユーザー切替が起きた場合は放棄する (新ユーザーのストリームを
+        // 冗長に強制再ダウンロードさせない)
+        if (!isSessionStillOurs()) return
+        refreshDailyReportIdsStream({ forceRefresh: true })
         setVersion((v) => v + 1)
         DailyReportCache.listeners.forEach((listener: (id: number) => void) => {
             listener(-1)
         })
-    }, [apiBasePath, revalidator])
+    }, [apiBasePath, isSessionStillOurs])
 
     /**
      * Queue for SSE messages that arrived before the target report was cached.
@@ -281,16 +351,18 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
      * レポートアイテムをリストへ upsert し、businessDate 降順を維持します。
      */
     const upsertItem = useCallback((reportHubId: number, businessDate: string | null | undefined) => {
+        // モジュール常駐ストリームセッションへも反映する (鮮度窓内の再訪で作成直後の日報が
+        // 消えないように)。businessDate 未指定は「既存値を保持」の意図なので中継しない
+        if (businessDate !== undefined) {
+            upsertDailyReportIdsStreamItem({ reportHubId, businessDate: businessDate ?? null })
+        }
         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)
-            })
+            const existing = prev.find((item) => item.reportHubId === reportHubId)
+            const nextBusinessDate = businessDate ?? existing?.businessDate ?? null
+            // 正準比較器 (営業日降順 → ID 降順) の位置へ二分探索で upsert する。
+            // 以前は SSE 1 件ごとに全件を localeCompare でソートし直していた (O(n log n)
+            // かつ ID 降順の副キー無しで、同日内の新規作成が誤った位置に描画されていた)
+            return upsertInIdsStreamOrder(prev, { reportHubId, businessDate: nextBusinessDate, sourceType: existing?.sourceType })
         })
     }, [])
 
@@ -304,59 +376,88 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
      * 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))
-    }, [])
+    const removeStaleItem = useCallback(
+        (reportHubId: number) => {
+            // ユーザー切替後の遅延発火は新ユーザーのセッションへトゥームストーンを刻んでしまう
+            if (!isSessionStillOurs()) return
+            removedIds.current.add(reportHubId)
+            // 常駐ストリームデータからも除去する (再訪時に安全弁が再発動し続けるのを防ぐ)
+            removeDailyReportIdsStreamItem(reportHubId)
+            setItems((prev) => prev.filter((item) => item.reportHubId !== reportHubId))
+        },
+        [isSessionStillOurs],
+    )
 
     /**
-     * Merge initialItems with prevItems instead of replacing.
+     * Merge initialItems with prevItems instead of replacing (render-phase derived state).
      * 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 をマージする (全置換ではない)。render-phase の
+     * 派生状態パターン (prev 比較 + render 中の setState) で行うことが重要 —
+     * effect で行うと「最初のチャンクのコミットは items が空 (VirtualScroll が
+     * 一瞬 No items を描画) → effect 後の 2 コミット目で行が出る」という
+     * 1 コミット分の遅延と空表示フラッシュが生まれる。render 中の setState は
+     * React が子のコミット前に同一コンポーネントを再レンダーする公式パターン。
+     * マージは純粋 (ref は読み取りのみ)。StrictMode の二重レンダーにも冪等。
      */
-    // 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)
+    const [prevInitialItems, setPrevInitialItems] = useState(initialItems)
+    if (initialItems !== prevInitialItems) {
+        setPrevInitialItems(initialItems)
+        // initialItems をベースにマップを構築 (removedIds を除外)
+        const mergedMap = new Map<number, DailyReportItem>()
+        for (const item of initialItems) {
+            if (!removedIds.current.has(item.reportHubId)) {
+                mergedMap.set(item.reportHubId, item)
             }
         }
-
-        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)
-                }
+        // 現在の items にのみ存在する ID を保持 (削除は report-delete SSE で行う)
+        for (const item of items) {
+            if (!(mergedMap.has(item.reportHubId) || removedIds.current.has(item.reportHubId))) {
+                mergedMap.set(item.reportHubId, item)
             }
+        }
+        // 並び順は正準比較器 (compareIdsStreamOrder: 営業日降順 → ID 降順、null 営業日は
+        // 末尾) に一本化する。ストリームはソート順どおりに届き末尾へ追記されるため通常は
+        // 整列済み — O(n) の検査で確認できたらソートを丸ごと省略する (20 万件級で毎 publish
+        // の O(n log n) を O(n) へ落とす)。以前は営業日のみの比較で ID 降順の副キーが無く、
+        // 前回全量走査以降に作成された日報が同日グループ内の誤った位置に描画されていた
+        const merged = Array.from(mergedMap.values())
+        if (!isIdsStreamOrdered(merged)) {
+            merged.sort(compareIdsStreamOrder)
+        }
+        setItems(merged)
+    }
 
-            // 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)
+    /**
+     * トゥームストーン (removedIds) のクリーンアップ副作用。
+     * ストリームの全量が出揃っている (complete かつ再検証中でない) ときにのみ行う。
+     * 部分配列からの欠落は「サーバーに存在しない」証拠にならない。
+     * 依存配列: initialItems (チャンク到着・再検証ごと)。クリーンアップ: なし。
+     * ref の変異を伴うため render-phase ではなく effect に置く。
+     */
+    useEffect(() => {
+        if (isStreamSettledRef.current) {
+            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)
                 }
             }
-
-            // 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" }>) => {
+            // セッション切替〜プロバイダーアンマウントの隙間で届いた旧ユーザーの SSE は破棄する。
+            // clientLoader の bootstrap は React のコミット前にモジュールセッションを新ユーザーへ
+            // 差し替えるため、旧プロバイダーの EventSource が閉じるまでの間に届いたメッセージ
+            // (下書きの recipient 宛配信を含む) が、破棄済みキャッシュと新セッションへ
+            // 旧ユーザーのデータを書き込んでしまう (POST 継続と同じ汚染シグネチャ・実測再現済み)
+            if (!isSessionStillOurs()) {
+                return
+            }
             // Ignore echo of own actions
             // 自分が発行したアクションのエコーは無視する
             // clientTempId は connected 以外すべてのメッセージに存在する（型で保証済み）
@@ -463,6 +564,8 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
                     manuallyTrackingIds.current.delete(reportHubId)
                     // マージロジックでの復活を防止するために削除済み ID を記録
                     removedIds.current.add(reportHubId)
+                    // 常駐ストリームデータからも除去 (鮮度窓内の再訪で削除済み日報が蘇らないように)
+                    removeDailyReportIdsStreamItem(reportHubId)
 
                     // 削除されたレポートへの待機中 SSE メッセージを破棄
                     const pendingEntry = pendingSseQueue.current.get(reportHubId)
@@ -485,7 +588,9 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
                 case "report-publish": {
                     // report はスキーマで必須なのでバリデーション通過後は必ず存在する（if ガード不要）
                     const { report } = payload
-                    applyDailyReportServerUpdates(report.reportHubId, report)
+                    // 全ユーザー放送: report の isRead/isStarred は操作者の状態なので、
+                    // 受信者自身の per-viewer 状態を保持するマージ経路を使う
+                    applyBroadcastReportUpdate(report)
                     if (payload.type === "report-create" || payload.type === "report-publish") {
                         manuallyTrackingIds.current.add(report.reportHubId)
                         upsertItem(report.reportHubId, report.date)
@@ -495,7 +600,7 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
                 }
             }
         },
-        [isProcessedId, upsertItem, user, enqueuePendingSseMessage],
+        [isProcessedId, isSessionStillOurs, upsertItem, user, enqueuePendingSseMessage],
     )
 
     // 常に最新の handleSseMessage をキューのリプレイから参照できるようにする
@@ -574,10 +679,22 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
             if (typeof data.clientTempId !== "string" || data.clientTempId !== clientTempId) {
                 throw new Error(`Invalid clientTempId for ${intent}`)
             }
+            // ユーザー切替後に解決した継続は、モジュール常駐状態 (常駐セッション・詳細キャッシュ)
+            // を旧ユーザーのデータで汚染しないよう onSuccess を放棄する
+            if (!isSessionStillOurs()) {
+                logger.warn(`[executeAction] ${intent} resolved after a user switch; discarding continuation`)
+                throw new Error(`Stale continuation for ${intent}`)
+            }
             return (await callbacks.onSuccess?.(data)) as T
         } catch (e) {
             logger.error(`${intent} failed:`, e)
-            callbacks.onFailure?.()
+            // 切替後の失敗も同様: onFailure のロールバックが旧値をモジュールキャッシュへ
+            // 書き戻すため放棄する (プロバイダー自身の state は key リマウントで破棄済み)。
+            // 通知も同じ門で守る: ユーザー切替で捨てた継続の失敗は当人に見せない
+            if (isSessionStillOurs()) {
+                callbacks.onFailure?.()
+                notifyErrorRef.current({ operation: intent, message: describeOperationFailure(intent), cause: e })
+            }
             throw e
         } finally {
             if (!(options?.keepLock || options?.skipLock)) {
@@ -805,6 +922,11 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
 
             const newId = Number(res.reportHubId)
 
+            // 常駐ストリームセッションへも反映する。自分の SSE エコーは clientTempId で
+            // 抑止されるため upsertItem 経由の中継は届かず、ここで直接中継しないと
+            // 鮮度窓内の再訪で作成直後の日報が一覧から消える
+            upsertDailyReportIdsStreamItem({ reportHubId: newId, businessDate })
+
             // newId を一時的にロックし、createReport 以前に開始された背景 prefetch の
             // cacheMany による stale データ上書きを防止する
             acquireMutationLock(newId)
@@ -883,6 +1005,10 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
                         applyDailyReportServerUpdates(id, data.report)
                         setVersion((v) => v + 1)
                     }
+                    // 成功確定後に常駐ストリームセッションへも反映する (自分の SSE エコーは
+                    // 抑止されるため)。失敗時に走らせると、並行削除済みの日報を誤って
+                    // 蘇らせトゥームストーンまで解除してしまう
+                    upsertDailyReportIdsStreamItem({ reportHubId: id, businessDate })
                 },
                 onFailure: () => {
                     // ロールバック
@@ -902,6 +1028,8 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
 
         // マージロジックでの復活を防止するために削除済み ID を記録
         removedIds.current.add(id)
+        // 常駐ストリームデータからも除去 (鮮度窓内の再訪で削除済み日報が蘇らないように)
+        removeDailyReportIdsStreamItem(id)
         // Optimistic UI update
         setItems((prev) => prev.filter((item) => item.reportHubId !== id))
 
@@ -926,12 +1054,22 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
                 return
             }
 
-            // それ以外のエラーの場合は、楽観的更新をロールバックする
+            // それ以外のエラーの場合は、楽観的更新をロールバックする。
+            // 常駐ストリームデータの除去とトゥームストーンも upsert で巻き戻す
+            // (巻き戻さないと、実在する日報が次の全量走査まで再訪時の一覧から消える)。
+            // ユーザー切替後に解決した継続は巻き戻さない — 旧ユーザーの行を新ユーザーの
+            // セッションへ upsert しトゥームストーンまで解除してしまうため
+            // (元の catch と同様に握り潰す。呼び出し元 UI は既に破棄済み)
+            if (!isSessionStillOurs()) {
+                return
+            }
             removedIds.current.delete(id)
+            upsertDailyReportIdsStreamItem({ reportHubId: id, businessDate: targetItem?.businessDate ?? businessDate })
             if (targetItem) {
                 setItems((prev) => {
                     if (prev.some((i) => i.reportHubId === id)) return prev
-                    return [targetItem, ...prev].sort((a, b) => (b.businessDate ?? "").localeCompare(a.businessDate ?? ""))
+                    // ロールバックも正準比較器の位置へ戻す (第 3 の比較器を持たない)
+                    return upsertInIdsStreamOrder(prev, targetItem)
                 })
             }
         }

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

@@ -0,0 +1,66 @@
+/**
+ * Tests for the mutation error-surface seam.
+ * ミューテーション通知シームのテスト。
+ */
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { DailyReportConfigProvider } from "../config-context"
+import { DailyReportErrorProvider, useDailyReportErrorSurface } from "./daily-report-error-context"
+
+/** notifyError を発火するだけのプローブ。 */
+const Trigger = ({ label = "発火" }: { label?: string }) => {
+    const { notifyError } = useDailyReportErrorSurface()
+    return (
+        <button type="button" onClick={() => notifyError({ operation: "update", message: "日報の保存に失敗しました。" })}>
+            {label}
+        </button>
+    )
+}
+
+const renderWithConfig = (node: React.ReactNode, onError?: (info: { operation: string; message: string }) => void) =>
+    render(
+        <DailyReportConfigProvider config={onError ? { onError } : undefined}>
+            <DailyReportErrorProvider>{node}</DailyReportErrorProvider>
+        </DailyReportConfigProvider>,
+    )
+
+describe("DailyReportErrorProvider", () => {
+    it("shows a role=alert banner when no onError is injected", () => {
+        renderWithConfig(<Trigger />)
+        expect(screen.queryByRole("alert")).toBeNull()
+        fireEvent.click(screen.getByText("発火"))
+        const banner = screen.getByRole("alert")
+        expect(banner).toHaveTextContent("日報の保存に失敗しました。")
+    })
+
+    it("delegates to config.onError and does NOT render the default banner", () => {
+        const onError = vi.fn()
+        renderWithConfig(<Trigger />, onError)
+        fireEvent.click(screen.getByText("発火"))
+        expect(onError).toHaveBeenCalledWith(expect.objectContaining({ operation: "update", message: "日報の保存に失敗しました。" }))
+        // ホストへ委譲したときは内蔵バナーを出さない (二重表示防止)
+        expect(screen.queryByRole("alert")).toBeNull()
+    })
+
+    it("dismisses the banner via the close button", () => {
+        renderWithConfig(<Trigger />)
+        fireEvent.click(screen.getByText("発火"))
+        expect(screen.getByRole("alert")).toBeInTheDocument()
+        fireEvent.click(screen.getByLabelText("閉じる"))
+        expect(screen.queryByRole("alert")).toBeNull()
+    })
+
+    it("notifyError is a safe no-op outside the provider", () => {
+        // Provider の外でも購読できて壊れない (アクションコンテキストの防御的呼び出しを保証)
+        const Standalone = () => {
+            const { notifyError } = useDailyReportErrorSurface()
+            return (
+                <button type="button" onClick={() => notifyError({ operation: "delete", message: "x" })}>
+                    無所属
+                </button>
+            )
+        }
+        render(<Standalone />)
+        expect(() => fireEvent.click(screen.getByText("無所属"))).not.toThrow()
+    })
+})

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

@@ -0,0 +1,98 @@
+/**
+ * Error-surface seam for daily-report mutations.
+ * 日報ミューテーション失敗を利用者へ可視化するための通知シーム。
+ *
+ * 保存・公開・削除・コメント等の失敗は、これまで握り潰されてボタンが成功したかのように
+ * 復帰していた。ここでミューテーションの失敗を一元的に受け取り、`config.onError` が
+ * 注入されていればホストへ委譲し、無ければパッケージ内蔵の `role="alert"` バナーで表示する。
+ * `notifyError` は Provider 外でも安全に呼べる (既定は no-op) ため、アクションコンテキストは
+ * 存在を前提にせず呼び出せる。
+ */
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
+import { type DailyReportErrorInfo, useDailyReportConfig } from "../config-context"
+
+/** バナーの自動消滅までの既定時間 (ms)。手動クローズでも消せる。 */
+const ERROR_BANNER_AUTO_DISMISS_MS = 8_000
+
+type DailyReportErrorSurface = {
+    /** ミューテーション失敗を通知する。 */
+    notifyError: (info: DailyReportErrorInfo) => void
+}
+
+/** 既定は no-op (Provider 外で呼んでも壊れない)。 */
+const DailyReportErrorContext = createContext<DailyReportErrorSurface>({ notifyError: () => {} })
+
+/**
+ * Returns the error-surface API (safe no-op outside the provider).
+ * 通知 API を返す処理 (Provider 外では no-op)。
+ */
+export const useDailyReportErrorSurface = (): DailyReportErrorSurface => useContext(DailyReportErrorContext)
+
+/**
+ * Provides the mutation error surface and renders the default alert banner.
+ * ミューテーション通知シームを供給し、既定のアラートバナーを描画するプロバイダー。
+ *
+ * `config.onError` があればホストへ委譲し、内蔵バナーは描画しない (二重表示防止)。
+ */
+export const DailyReportErrorProvider = ({ children }: { children: ReactNode }) => {
+    const { onError } = useDailyReportConfig()
+    const [banner, setBanner] = useState<DailyReportErrorInfo | null>(null)
+    // onError を ref 経由で読み、notifyError の参照を安定させる (毎回新関数だと購読側が再レンダー)
+    const onErrorRef = useRef(onError)
+    onErrorRef.current = onError
+    const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const notifyError = useCallback((info: DailyReportErrorInfo) => {
+        const host = onErrorRef.current
+        if (host) {
+            // ホストが通知 UI を持つ場合は委譲し、内蔵バナーは出さない
+            host(info)
+            return
+        }
+        setBanner(info)
+    }, [])
+
+    const dismiss = useCallback(() => {
+        if (dismissTimerRef.current !== null) {
+            clearTimeout(dismissTimerRef.current)
+            dismissTimerRef.current = null
+        }
+        setBanner(null)
+    }, [])
+
+    /**
+     * バナー表示中は一定時間で自動的に消す副作用。
+     * 依存配列: banner (新しい失敗が来るたびにタイマーを張り直す)。
+     * クリーンアップ: タイマー解除 (アンマウント/再通知でのリークと二重発火を防ぐ)。
+     */
+    useEffect(() => {
+        if (!banner) return
+        dismissTimerRef.current = setTimeout(() => setBanner(null), ERROR_BANNER_AUTO_DISMISS_MS)
+        return () => {
+            if (dismissTimerRef.current !== null) {
+                clearTimeout(dismissTimerRef.current)
+                dismissTimerRef.current = null
+            }
+        }
+    }, [banner])
+
+    const value = useMemo(() => ({ notifyError }), [notifyError])
+
+    return (
+        <DailyReportErrorContext.Provider value={value}>
+            {children}
+            {banner && (
+                <div
+                    // role="alert" で SR へ即時読み上げさせる。fixed トーストで操作を妨げない
+                    role="alert"
+                    data-testid="daily-report-error-banner"
+                    className="fade-in slide-in-from-bottom-2 fixed inset-x-0 bottom-4 z-[100] mx-auto flex w-fit max-w-[92vw] animate-in items-center gap-3 rounded-lg border border-red-300 bg-red-600 px-4 py-2.5 text-sm text-white shadow-lg duration-200 dark:border-red-500/60 dark:bg-red-700">
+                    <span className="font-medium">{banner.message}</span>
+                    <button type="button" aria-label="閉じる" onClick={dismiss} className="shrink-0 rounded px-1.5 py-0.5 font-bold text-white/90 transition-colors hover:bg-red-700 hover:text-white dark:hover:bg-red-800">
+                        ✕
+                    </button>
+                </div>
+            )}
+        </DailyReportErrorContext.Provider>
+    )
+}