Cache draft across remounts; address bot review patterns

Two things in one commit since they touch overlapping lines:

1. Module-level draftCache so navigating away and back to a chat doesn't
   flash the synthetic Concierge bubble away during the remount +
   Onyx-hydration window. Gate's useState lazy-inits from the cache; every
   reducer write mirrors to the cache; the reducer's null returns
   (completed / failed / cleared) evict it. Keyed by reportID so chats
   stay isolated. 4 unit specs cover the contract.

2. Drop redundant useCallback/useMemo on clearDraft, dispatchLocalDraftEvent,
   stateValue, actionsValue — React Compiler auto-memoizes; the explicit
   wrappers just shadow its analysis (clean-react-0-compiler bot review).
   Inline the resubscribe-clear logic so the effect's deps stay scoped to
   reportID instead of dragging in a per-render clearDraft closure.

3. Extract the trickle-vs-binary-reveal threshold (100 anchors) to a
   named MIN_TRICKLE_TOKEN_COUNT constant — matches the pattern of every
   other timing/sizing constant in this file (consistency-2 bot review).

Author: marcochavezf

src/hooks/usePendingConciergeResponse.ts

@@ -19,6 +19,8 @@ const TICK_INTERVAL_MS = 80;
 const TRICKLE_HARD_CAP_MS = 60_000;
 /** Once the real reportComment lands in REPORT_ACTIONS, finish the remaining reveal within this window. */
 const ACCELERATED_REMAINING_MS = 1_500;
+/** Minimum char-level anchors before we opt into the trickle reveal. Replies under this fall back to the binary reveal at `displayAfter`. */
+const MIN_TRICKLE_TOKEN_COUNT = 100;
 
 function easeOut(t: number): number {
     const clamped = Math.max(0, Math.min(1, t));
@@ -88,7 +90,7 @@ function usePendingConciergeResponse(reportID: string | undefined) {
         // Anchors are character-level. Short replies (~50–100 chars) keep the
         // binary reveal; longer ones (paragraphs / lists) cross the threshold
         // and get the smooth trickle.
-        const shouldTrickle = snapshotTokens.length >= 100 && !!snapshotHtml;
+        const shouldTrickle = snapshotTokens.length >= MIN_TRICKLE_TOKEN_COUNT && !!snapshotHtml;
         if (!shouldTrickle) {
             const timer = setTimeout(() => applyPendingConciergeAction(reportID, reportAction), Math.max(0, remainingDelay));
             return () => clearTimeout(timer);

src/pages/inbox/ConciergeDraftContext.tsx

@@ -1,5 +1,5 @@
 import {getReportChatType} from '@selectors/Report';
-import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
 import useOnyx from '@hooks/useOnyx';
 import {getReportChannelName} from '@libs/actions/Report';
 import Log from '@libs/Log';
@@ -9,7 +9,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 import type {ConciergeDraft} from './conciergeDraftState';
-import {applyConciergeDraftEvent} from './conciergeDraftState';
+import {applyConciergeDraftEvent, getCachedDraft, setCachedDraft} from './conciergeDraftState';
 
 type ConciergeDraftState = {
     draftReportAction: ReportAction | null;
@@ -61,23 +61,34 @@ function ConciergeDraftProvider({reportID, children}: React.PropsWithChildren<{r
 }
 
 function ConciergeDraftGate({reportID, children}: React.PropsWithChildren<{reportID: string}>) {
-    const [draft, setDraft] = useState<ConciergeDraft | null>(null);
-
-    const clearDraft = useCallback(() => {
+    // Lazy-init from the module-level cache so a remount (ReportScreen
+    // unmount/remount on chat-switch) restores the in-progress draft on the
+    // first paint instead of flashing the synthetic bubble away.
+    const [draft, setDraft] = useState<ConciergeDraft | null>(() => getCachedDraft(reportID));
+
+    // React Compiler auto-memoizes; explicit useCallback/useMemo would just
+    // shadow the compiler's analysis (clean-react-0-compiler).
+    const clearDraft = () => {
+        setCachedDraft(reportID, null);
         setDraft(null);
-    }, []);
+    };
 
-    const dispatchLocalDraftEvent = useCallback(
-        (event: ConciergeDraftEvent) => {
-            setDraft((currentDraft) => applyConciergeDraftEvent(currentDraft, event, reportID));
-        },
-        [reportID],
-    );
+    const dispatchLocalDraftEvent = (event: ConciergeDraftEvent) => {
+        setDraft((currentDraft) => {
+            const next = applyConciergeDraftEvent(currentDraft, event, reportID);
+            setCachedDraft(reportID, next);
+            return next;
+        });
+    };
 
     useEffect(() => {
         const channelName = getReportChannelName(reportID);
+        // Inline the clear so the effect's deps stay scoped to reportID; closing
+        // over `clearDraft` would either drag it into deps (re-subscribing on
+        // every render) or trip exhaustive-deps.
         const handleResubscribe = () => {
-            clearDraft();
+            setCachedDraft(reportID, null);
+            setDraft(null);
         };
         const eventTypes = [
             Pusher.TYPE.CONCIERGE_DRAFT_STARTED,
@@ -93,7 +104,11 @@ function ConciergeDraftGate({reportID, children}: React.PropsWithChildren<{repor
                 eventType,
                 (eventData) => {
                     const conciergeDraftEvent = eventData as ConciergeDraftEvent;
-                    setDraft((currentDraft) => applyConciergeDraftEvent(currentDraft, conciergeDraftEvent, reportID));
+                    setDraft((currentDraft) => {
+                        const next = applyConciergeDraftEvent(currentDraft, conciergeDraftEvent, reportID);
+                        setCachedDraft(reportID, next);
+                        return next;
+                    });
                 },
                 handleResubscribe,
             );
@@ -110,23 +125,17 @@ function ConciergeDraftGate({reportID, children}: React.PropsWithChildren<{repor
                 subscription.unsubscribe();
             }
         };
-    }, [clearDraft, reportID]);
-
-    const stateValue = useMemo<ConciergeDraftState>(
-        () => ({
-            draftReportAction: draft?.reportAction ?? null,
-            hasActiveDraft: !!draft?.reportAction,
-        }),
-        [draft?.reportAction],
-    );
+    }, [reportID]);
 
-    const actionsValue = useMemo<ConciergeDraftActions>(
-        () => ({
-            clearDraft,
-            dispatchLocalDraftEvent,
-        }),
-        [clearDraft, dispatchLocalDraftEvent],
-    );
+    const stateValue: ConciergeDraftState = {
+        draftReportAction: draft?.reportAction ?? null,
+        hasActiveDraft: !!draft?.reportAction,
+    };
+
+    const actionsValue: ConciergeDraftActions = {
+        clearDraft,
+        dispatchLocalDraftEvent,
+    };
 
     return (
         <ConciergeDraftActionsContext.Provider value={actionsValue}>

src/pages/inbox/conciergeDraftState.ts

@@ -40,6 +40,26 @@ function buildConciergeDraftReportAction({bodyMarkdown, created, finalRenderedHT
     } as ReportAction;
 }
 
+// Module-level cache so a chat re-mount (ReportScreen unmount/remount on chat
+// switch) preserves the in-progress draft. Without this the gate's local state
+// resets to null on every revisit and the synthetic bubble disappears for the
+// remount + Onyx-hydration window. Keyed by reportID; entries are evicted by
+// `setCachedDraft(reportID, null)` when the reducer returns null
+// (completed/failed/cleared).
+const draftCache = new Map<string, ConciergeDraft>();
+
+function getCachedDraft(reportID: string): ConciergeDraft | null {
+    return draftCache.get(reportID) ?? null;
+}
+
+function setCachedDraft(reportID: string, draft: ConciergeDraft | null): void {
+    if (draft) {
+        draftCache.set(reportID, draft);
+    } else {
+        draftCache.delete(reportID);
+    }
+}
+
 function applyConciergeDraftEvent(currentDraft: ConciergeDraft | null, event: ConciergeDraftEvent, reportID: string): ConciergeDraft | null {
     if (event.reportID !== reportID) {
         return currentDraft;
@@ -81,5 +101,5 @@ function applyConciergeDraftEvent(currentDraft: ConciergeDraft | null, event: Co
     };
 }
 
-export {applyConciergeDraftEvent, buildConciergeDraftReportAction};
+export {applyConciergeDraftEvent, buildConciergeDraftReportAction, getCachedDraft, setCachedDraft};
 export type {ConciergeDraft};

tests/unit/pages/inbox/conciergeDraftState.test.ts

@@ -1,4 +1,4 @@
-import {applyConciergeDraftEvent} from '@pages/inbox/conciergeDraftState';
+import {applyConciergeDraftEvent, getCachedDraft, setCachedDraft} from '@pages/inbox/conciergeDraftState';
 import CONST from '@src/CONST';
 
 const REPORT_ID = '123';
@@ -131,4 +131,41 @@ describe('conciergeDraftState', () => {
 
         expect(otherReportDraft).toBe(initialDraft);
     });
+
+    describe('draftCache', () => {
+        // Always start clean so tests don't leak state into each other.
+        beforeEach(() => {
+            setCachedDraft(REPORT_ID, null);
+        });
+
+        it('returns null for an unseen reportID', () => {
+            expect(getCachedDraft('never-stored')).toBeNull();
+        });
+
+        it('persists a draft across set/get and survives across calls (the remount survival contract)', () => {
+            const draft = applyConciergeDraftEvent(null, createDraftEvent(), REPORT_ID);
+            expect(draft).not.toBeNull();
+            setCachedDraft(REPORT_ID, draft);
+            expect(getCachedDraft(REPORT_ID)).toBe(draft);
+            // Simulating a remount: a fresh getCachedDraft call returns the same instance.
+            expect(getCachedDraft(REPORT_ID)).toBe(draft);
+        });
+
+        it('evicts when set to null (completed/failed/cleared reducer return)', () => {
+            const draft = applyConciergeDraftEvent(null, createDraftEvent(), REPORT_ID);
+            setCachedDraft(REPORT_ID, draft);
+            expect(getCachedDraft(REPORT_ID)).not.toBeNull();
+            setCachedDraft(REPORT_ID, null);
+            expect(getCachedDraft(REPORT_ID)).toBeNull();
+        });
+
+        it('keeps entries scoped per reportID (no cross-talk)', () => {
+            const draftA = applyConciergeDraftEvent(null, createDraftEvent(), REPORT_ID);
+            const draftB = applyConciergeDraftEvent(null, createDraftEvent({reportID: 'other'}), 'other');
+            setCachedDraft(REPORT_ID, draftA);
+            setCachedDraft('other', draftB);
+            expect(getCachedDraft(REPORT_ID)).toBe(draftA);
+            expect(getCachedDraft('other')).toBe(draftB);
+        });
+    });
 });