Click Path Audit

1. IDENTIFY the handler (onClick, onSubmit, onChange, etc.)2. TRACE every function call in the handler, IN ORDER3. For EACH function call:   a. What state does it READ?   b. What state does it WRITE?   c. Does it have SIDE EFFECTS on shared state?   d. Does it reset/clear any state as a side effect?4. CHECK: Does any later call UNDO a state change from an earlier call?5. CHECK: Is the FINAL state what the user expects from the button label?6. CHECK: Are there race conditions (async calls that resolve in wrong order)?

For each Zustand store / React context in scope:  For each action/setter:    - What fields does it set?    - Does it RESET other fields as a side effect?    - Document: actionName → {sets: [...], resets: [...]}

STORE: emailStore  setComposeMode(bool) → sets: {composeMode}  selectThread(thread|null) → sets: {selectedThread, selectedThreadId, messages, drafts, selectedDraft, summary} RESETS: {composeMode: false, composeData: null, redraftOpen: false}  setDraftGenerating(bool) → sets: {draftGenerating}  ...
DANGEROUS RESETS (actions that clear state they don't own):  selectThread → resets composeMode (owned by setComposeMode)  reset → resets everything

TOUCHPOINT: [Button label] in [Component:line]  HANDLER: onClick → {    call 1: functionA() → sets {X: true}    call 2: functionB() → sets {Y: null} RESETS {X: false}  ← CONFLICT  }  EXPECTED: User sees [description of what button label promises]  ACTUAL: X is false because functionB reset it  VERDICT: BUG — [description]

handler() {  setState_A(true)     // sets X = true  setState_B(null)     // side effect: resets X = false}// Result: X is false. First call was pointless.

handler() {  fetchA().then(() => setState({ loading: false }))  fetchB().then(() => setState({ loading: true }))}// Result: final loading state depends on which resolves first

const [count, setCount] = useState(0)const handler = useCallback(() => {  setCount(count + 1)  // captures stale count  setCount(count + 1)  // same stale count — increments by 1, not 2}, [count])

// Button says "Save" but handler only validates, never actually saves// Button says "Delete" but handler sets a flag without calling the API// Button says "Send" but the API endpoint is removed/broken

handler() {  if (someState) {        // someState is ALWAYS false at this point    doTheActualThing()    // never reached  }}

// Button sets stateX = true// A useEffect watches stateX and resets it to false// User sees nothing happen

CLICK-PATH-NNN: [severity: CRITICAL/HIGH/MEDIUM/LOW]  Touchpoint: [Button label] in [file:line]  Pattern: [Sequential Undo / Async Race / Stale Closure / Missing Transition / Dead Path / useEffect Interference]  Handler: [function name or inline]  Trace:    1. [call] → sets {field: value}    2. [call] → RESETS {field: value}  ← CONFLICT  Expected: [what user expects]  Actual: [what actually happens]  Fix: [specific fix]

Agent 1: Map ALL state stores (Step 1) — this is shared context for all other agentsAgent 2: Dashboard (Tasks, Notes, Journal, Ideas)Agent 3: Chat (DanteChatColumn, JustChatPage)Agent 4: Emails (ThreadList, DraftArea, EmailsPage)Agent 5: Projects (ProjectsPage, ProjectOverviewTab, NewProjectWizard)Agent 6: CRM (all sub-tabs)Agent 7: Profile, Settings, Vault, NotificationsAgent 8: Management Suite (all pages)

onClick={() => {  useEmailStore.getState().setComposeMode(true)   // ✓ sets composeMode = true  useEmailStore.getState().selectThread(null)      // ✗ RESETS composeMode = false}}

selectThread: (thread) => set({  selectedThread: thread,  selectedThreadId: thread?.id ?? null,  messages: [],  drafts: [],  selectedDraft: null,  summary: null,  composeMode: false,     // ← THIS silent reset killed the button  composeData: null,  redraftOpen: false,})