From 7bcd1a2a2d4ed5cd2aaf392e65e8e103ef3cb4a5 Mon Sep 17 00:00:00 2001
From: maaz519 <maaz@insigniaconsultancy.com>
Date: Sat, 18 Jul 2026 19:08:47 +0530
Subject: [PATCH] fix(inbox): reload mail content when switching items (+
 filter refetch)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The appshell SDK useQuery only re-runs when the action changes, not the
variables — so switching mail items (same crm.mail.history action, new
threadId) never refetched and the reader kept the first thread's content
(only the subject, a direct prop, updated). Key MailReader by threadId to
remount it on switch (same pattern Messenger already uses for ThreadView).
Also force a refetch of crm.inbox.list when the filter changes, which hit
the same stale-variables bug.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/dashboard/inbox.tsx | 4 +++-
 src/lib/inbox-api.ts               | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/inbox.tsx b/src/components/dashboard/inbox.tsx
index ff2c0c7..c79ac1c 100644
--- a/src/components/dashboard/inbox.tsx
+++ b/src/components/dashboard/inbox.tsx
@@ -135,8 +135,10 @@ function Detail({ it, onError, onDone, onSnooze, onArchive }: {
 
       {it.threadId ? (
         // A message/mail item → open the conversation to read + reply.
+        // key by threadId: the SDK's useQuery only refetches when the ACTION changes, not the
+        // variables — so switching items must remount MailReader to load the new thread's history.
         <div style={{ flex: 1, minHeight: 0 }}>
-          <MailReader threadId={it.threadId} subject={it.title} onError={onError} />
+          <MailReader key={it.threadId} threadId={it.threadId} subject={it.title} onError={onError} />
         </div>
       ) : (
         // A non-threaded item (e.g. a system alert) → show its detail.
diff --git a/src/lib/inbox-api.ts b/src/lib/inbox-api.ts
index 6f3d2e6..6ce40fd 100644
--- a/src/lib/inbox-api.ts
+++ b/src/lib/inbox-api.ts
@@ -8,7 +8,7 @@
 //   query crm.inbox.list       { state? }              -> InboxItem[]
 //   cmd   crm.inbox.transition { id, state, reason? }  -> InboxItem
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAppShell, useQuery } from "@abe-kap/appshell-sdk/react";
 import { isShellConfigured } from "./appshell";
 import type { MailThread } from "./mail-api";
@@ -40,6 +40,11 @@ function useLiveInbox(state?: InboxState): InboxData {
   const showMail = !state || state === "OPEN";
   const mq = useQuery<MailThread[]>("crm.mail.list", {});
 
+  // The SDK's useQuery only refetches when the ACTION changes, not the variables — so a filter
+  // change (same action, new { state }) wouldn't reload. Force a refetch when the filter changes.
+  const refetchInbox = q.refetch;
+  useEffect(() => { refetchInbox(); }, [state, refetchInbox]);
+
   const items = useMemo<UiInboxItem[]>(() => {
     const inboxItems = q.data ?? [];
     const mailItems: UiInboxItem[] = showMail