fix(web): thread error banner dismiss survives reconnect and rerenders (#6123)

Author: myacoub91

apps/web/src/components/ChatView.tsx

@@ -264,7 +264,13 @@ import {
   ProviderStatusBanner,
   shouldShowProviderStatusBanner,
 } from "./chat/ProviderStatusBanner";
-import { ThreadErrorBanner } from "./chat/ThreadErrorBanner";
+import {
+  dismissThreadErrorBannerForSession,
+  getThreadErrorBannerKey,
+  isThreadErrorBannerDismissedForSession,
+  shouldShowThreadErrorBanner,
+  ThreadErrorBanner,
+} from "./chat/ThreadErrorBanner";
 import { resolveThreadPr } from "./ThreadStatusIndicators";
 import { ComposerBannerStack, type ComposerBannerStackItem } from "./chat/ComposerBannerStack";
 import { ThreadSyncStatusPill } from "./chat/ThreadSyncStatusPill";
@@ -1493,6 +1499,24 @@ function ChatViewContent(props: ChatViewProps) {
   const threadError = isServerThread
     ? (localServerError ?? activeServerThread?.session?.lastError ?? null)
     : localDraftError;
+  // Dismissals can only mask the shown error, never clear it: a server thread
+  // keeps its error in session.lastError, so clearing the local shadow would
+  // just fall through to the persisted one. Mask the current error until a
+  // different error arrives, mirroring the provider status banner.
+  const threadErrorBannerKey = getThreadErrorBannerKey(routeThreadKey, threadError);
+  const visibleThreadError = shouldShowThreadErrorBanner(
+    routeThreadKey,
+    threadError,
+    isThreadErrorBannerDismissedForSession(threadErrorBannerKey),
+  )
+    ? threadError
+    : null;
+  // Dismissing only mutates the session-scoped mask set, which does not
+  // trigger a render on its own; setThreadError(null) can also bail when the
+  // local shadow is already empty and the banner is driven purely by
+  // session.lastError. Bump a tick so the banner hides immediately. Mirrors
+  // the branch mismatch banner.
+  const [, setThreadErrorBannerDismissTick] = useState(0);
   const runtimeMode = composerRuntimeMode ?? activeThread?.runtimeMode ?? DEFAULT_RUNTIME_MODE;
   // Plan mode is legacy (Settings → Beta). With the flag off the effective
   // mode is forced to "default" — even for threads with a stored plan mode —
@@ -2618,7 +2642,7 @@ function ChatViewContent(props: ChatViewProps) {
   )
     ? activeProviderStatus
     : null;
-  const hasTimelineTopBanner = Boolean(threadError) || visibleProviderStatus !== null;
+  const hasTimelineTopBanner = Boolean(visibleThreadError) || visibleProviderStatus !== null;
   const activeProjectCwd = activeProject?.workspaceRoot ?? null;
   const activeThreadWorktreePath = activeThread?.worktreePath ?? null;
   const activeWorkspaceRoot = activeThreadWorktreePath ?? activeProjectCwd ?? undefined;
@@ -6146,8 +6170,12 @@ function ChatViewContent(props: ChatViewProps) {
         </header>
 
         <ThreadErrorBanner
-          error={threadError}
-          onDismiss={() => setThreadError(activeThread.id, null)}
+          error={visibleThreadError}
+          onDismiss={() => {
+            setThreadError(activeThread.id, null);
+            dismissThreadErrorBannerForSession(threadErrorBannerKey);
+            setThreadErrorBannerDismissTick((tick) => tick + 1);
+          }}
         />
         {/* Main content area with optional plan sidebar */}
         <div className="flex min-h-0 min-w-0 flex-1">

apps/web/src/components/chat/ThreadErrorBanner.test.tsx

@@ -1,9 +1,74 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
-import { ThreadErrorBanner } from "./ThreadErrorBanner";
+import {
+  dismissThreadErrorBannerForSession,
+  getThreadErrorBannerKey,
+  isThreadErrorBannerDismissedForSession,
+  shouldShowThreadErrorBanner,
+  ThreadErrorBanner,
+} from "./ThreadErrorBanner";
 
 describe("ThreadErrorBanner", () => {
+  it("stays hidden after its current error is dismissed", () => {
+    const bannerKey = getThreadErrorBannerKey("env:thread-a", "Aborted");
+    dismissThreadErrorBannerForSession(bannerKey);
+
+    expect(
+      shouldShowThreadErrorBanner(
+        "env:thread-a",
+        "Aborted",
+        isThreadErrorBannerDismissedForSession(bannerKey),
+      ),
+    ).toBe(false);
+  });
+
+  it("reappears when a new error arrives on the same thread", () => {
+    dismissThreadErrorBannerForSession(getThreadErrorBannerKey("env:thread-b", "Turn failed"));
+    const newErrorKey = getThreadErrorBannerKey("env:thread-b", "Provider crashed");
+
+    expect(isThreadErrorBannerDismissedForSession(newErrorKey)).toBe(false);
+    expect(
+      shouldShowThreadErrorBanner(
+        "env:thread-b",
+        "Provider crashed",
+        isThreadErrorBannerDismissedForSession(newErrorKey),
+      ),
+    ).toBe(true);
+  });
+
+  it("scopes dismissals to the thread that dismissed them", () => {
+    dismissThreadErrorBannerForSession(getThreadErrorBannerKey("env:thread-c", "Aborted"));
+    const otherThreadKey = getThreadErrorBannerKey("env:other-thread", "Aborted");
+
+    expect(isThreadErrorBannerDismissedForSession(otherThreadKey)).toBe(false);
+    expect(
+      shouldShowThreadErrorBanner(
+        "env:other-thread",
+        "Aborted",
+        isThreadErrorBannerDismissedForSession(otherThreadKey),
+      ),
+    ).toBe(true);
+  });
+
+  it("keeps a dismissal across visiting threads with no error", () => {
+    const bannerKey = getThreadErrorBannerKey("env:thread-d", "Aborted");
+    dismissThreadErrorBannerForSession(bannerKey);
+
+    expect(shouldShowThreadErrorBanner("env:thread-d", null, false)).toBe(false);
+    expect(isThreadErrorBannerDismissedForSession(bannerKey)).toBe(true);
+    expect(
+      shouldShowThreadErrorBanner(
+        "env:thread-d",
+        "Aborted",
+        isThreadErrorBannerDismissedForSession(bannerKey),
+      ),
+    ).toBe(false);
+  });
+
+  it("never shows a null error", () => {
+    expect(shouldShowThreadErrorBanner("env:thread-e", null, false)).toBe(false);
+  });
   it("aligns the warning and dismiss icons with the first line of a multi-line error", () => {
     const markup = renderToStaticMarkup(
       <ThreadErrorBanner

apps/web/src/components/chat/ThreadErrorBanner.tsx

@@ -4,6 +4,35 @@ import { Button } from "../ui/button";
 import { CircleAlertIcon, XIcon } from "lucide-react";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
+export function getThreadErrorBannerKey(threadKey: string, error: string | null): string | null {
+  return error === null ? null : `${threadKey}\u0000${error}`;
+}
+
+export function shouldShowThreadErrorBanner(
+  threadKey: string,
+  error: string | null,
+  isDismissed: boolean,
+): boolean {
+  return getThreadErrorBannerKey(threadKey, error) !== null && !isDismissed;
+}
+
+// Session-scoped (module-level so it survives ChatView remounts, e.g. route
+// changes between threads). Mirrors the branch-mismatch banner: a dismissal
+// is remembered per thread key plus message, so navigating away to a thread
+// with no error cannot resurrect the banner, while a different error message
+// on the same thread still appears.
+const sessionDismissedThreadErrorBannerKeys = new Set<string>();
+
+export function dismissThreadErrorBannerForSession(bannerKey: string | null): void {
+  if (bannerKey !== null) {
+    sessionDismissedThreadErrorBannerKeys.add(bannerKey);
+  }
+}
+
+export function isThreadErrorBannerDismissedForSession(bannerKey: string | null): boolean {
+  return bannerKey !== null && sessionDismissedThreadErrorBannerKeys.has(bannerKey);
+}
+
 export const ThreadErrorBanner = memo(function ThreadErrorBanner({
   error,
   onDismiss,