⚡️(front) throttle chat stream re-renders

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- ⚡️(front) throttle chat stream updates to stop excessive re-renders
+
 ## [0.0.20] - 2026-07-23
 
 ### Added

src/frontend/apps/conversations/src/core/config/ConfigProvider.tsx

@@ -14,6 +14,7 @@ import { MaintenancePage } from '@/features/maintenance';
 import { useAnalytics } from '@/libs';
 import { PostHogAnalytic } from '@/services';
 import { useSentryStore } from '@/stores/useSentryStore';
+import { trackRender } from '@/utils';
 
 import { useConfig } from './api/useConfig';
 
@@ -29,6 +30,13 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
   const hasSyncedInitialLanguage = useRef(false);
   const lastSyncedUserLanguage = useRef<string | null>(null);
 
+  // TEMPORARY: render-loop diagnostic, remove with utils/debugRenderLoop.
+  trackRender('ConfigProvider', {
+    hasConf: !!conf,
+    hasUser: !!user,
+    language: i18n.resolvedLanguage,
+  });
+
   useEffect(() => {
     if (!conf || hasSyncedInitialLanguage.current) {
       return;

src/frontend/apps/conversations/src/features/auth/components/Auth.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 
 import { Box, Loader } from '@/components';
 import { useConfig } from '@/core';
+import { trackRender } from '@/utils';
 
 import { useActivationStatus } from '../api/useActivationStatus';
 import { HOME_URL } from '../conf';
@@ -18,6 +19,22 @@ export const Auth = ({ children }: PropsWithChildren) => {
   const { data: activationStatus, isLoading: isActivationLoading } =
     useActivationStatus();
 
+  // TEMPORARY: this component redirects from its render body, so every input
+  // it branches on is worth seeing when it loops.
+  trackRender('Auth', {
+    pathname,
+    authenticated,
+    pathAllowed,
+    isLoading,
+    isFetchedAfterMount,
+    isConfigLoading,
+    isActivationLoading,
+    silentLoginEnabled: config?.FRONTEND_SILENT_LOGIN_ENABLED,
+    homepageEnabled: config?.FRONTEND_HOMEPAGE_FEATURE_ENABLED,
+    activationRequired: config?.ACTIVATION_REQUIRED,
+    isActivated: activationStatus?.is_activated,
+  });
+
   if (isLoading && !isFetchedAfterMount) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">

src/frontend/apps/conversations/src/features/chat/api/useChat.tsx

@@ -8,6 +8,7 @@ import { KEY_CONVERSATION } from '@/features/chat/api/useConversation';
 import { KEY_LIST_CONVERSATION } from '@/features/chat/api/useConversations';
 import { KEY_LIST_PROJECT } from '@/features/chat/api/useProjects';
 import { useChatPreferencesStore } from '@/features/chat/stores/useChatPreferencesStore';
+import { debugSample } from '@/utils';
 
 const fetchAPIAdapter = (input: RequestInfo | URL, init?: RequestInit) => {
   let url: string;
@@ -166,13 +167,20 @@ export function stampImagesSkippedOnLatestUserMessage(
   return next;
 }
 
+// Without this the SDK calls SWR's `mutate` once per stream chunk
+// (`throttle(fn, undefined)` returns `fn` untouched), so a fast response
+// re-renders the whole chat tree ~100 times a second. 50ms caps the refresh at
+// 20fps, which still reads as continuous typing.
+const STREAM_THROTTLE_MS = 50;
+
 export function useChat(options: Omit<UseChatOptions, 'fetch'>) {
   const queryClient = useQueryClient();
   const { onFinish: onFinishOption, ...restOptions } = options;
 
   const result = useAiSdkChat({
     ...restOptions,
     maxSteps: 3,
+    experimental_throttle: STREAM_THROTTLE_MS,
     fetch: fetchAPIAdapter,
     onFinish: (message, finishOptions) => {
       if (message.annotations?.length) {
@@ -195,6 +203,12 @@ export function useChat(options: Omit<UseChatOptions, 'fetch'>) {
     },
   });
 
+  // TEMPORARY: render-loop diagnostic. Renders that continue past a `ready`
+  // status are a real loop; renders that stop with it were just the stream.
+  useEffect(() => {
+    debugSample('useChat status', { status: result.status });
+  }, [result.status]);
+
   // Epoch ms until which the user must wait before sending a new message.
   const [cooldownUntil, setCooldownUntil] = useState<number | null>(null);
   // Track how many data items we have already handled so each event is

src/frontend/apps/conversations/src/features/chat/components/Chat.tsx

@@ -45,6 +45,7 @@ import {
 } from '@/features/chat/components/reindexErrorMessages';
 import { useClipboard } from '@/hook';
 import { useResponsiveStore } from '@/stores';
+import { trackRender } from '@/utils';
 
 import { useSourceMetadataCache } from '../hooks';
 import { useAprilFools } from '../hooks/useAprilFools';
@@ -764,6 +765,52 @@ export const Chat = ({
 
   const showImagesBanner = imagesSkipped && !imagesBannerDismissed;
 
+  // TEMPORARY: render-loop diagnostic, remove with utils/debugRenderLoop.
+  // Every hook output this component reads, so the diff names what churns.
+  trackRender('Chat', {
+    initialConversationId,
+    conversationId,
+    messages,
+    setMessages,
+    status,
+    data,
+    input,
+    cooldownUntil,
+    initialConversationMessages,
+    llmConfig,
+    selectedModel,
+    selectedModelHrid,
+    config,
+    t,
+    files,
+    isUploadingFiles,
+    conversationProjectId,
+    projectAttachments,
+    failedIndexingIds,
+    chatErrorModal,
+    chatErrorType,
+    imagesSkipped,
+    imagesBannerDismissed,
+    isSourceOpen,
+    streamingMessageHeight,
+    isReadingInstructions,
+    contextTrimmed,
+    shouldAutoSubmit,
+    shouldRetry,
+    hasInitialized,
+    pendingFirstMessage,
+    pendingInput,
+    pendingFiles,
+    pendingProjectId,
+    hasProjectInstructions,
+    forceWebSearch,
+    isMobile,
+    aprilFoolsActive: aprilFools.isActive,
+    aprilFoolsText: aprilFools.displayedText,
+    isErrorAttachment,
+    errorAttachment,
+  });
+
   useEffect(() => {
     if (
       hasInitialized &&

src/frontend/apps/conversations/src/features/chat/components/InputChat.tsx

@@ -24,6 +24,7 @@ import { WelcomeMessage } from '@/features/chat/components/WelcomeMessage';
 import { useFileDragDrop } from '@/features/chat/hooks/useFileDragDrop';
 import { useFileUrls } from '@/features/chat/hooks/useFileUrls';
 import { useResponsiveStore } from '@/stores';
+import { trackRender } from '@/utils';
 
 import FilesIcon from '../assets/files.svg';
 
@@ -457,6 +458,41 @@ export const InputChat = ({
     });
   }, [files, fileUrlMap]);
 
+  // TEMPORARY: render-loop diagnostic, remove with utils/debugRenderLoop.
+  trackRender('InputChat', {
+    messagesLength,
+    input,
+    status,
+    files,
+    setFiles,
+    handleInputChange,
+    handleSubmit,
+    onScrollToBottom,
+    containerRef,
+    forceWebSearch,
+    onToggleWebSearch,
+    onStop,
+    selectedModel,
+    onModelSelect,
+    isUploadingFiles,
+    isIndexingFiles,
+    failedIndexingCount,
+    onRetryFailedIndexing,
+    isRetryingIndexing,
+    errorType,
+    cooldownUntil,
+    cooldownRemaining,
+    conf,
+    assistantHealth,
+    isDragActive,
+    fileUrlMap,
+    attachments,
+    isDesktop,
+    isMobile,
+    t,
+    showToast,
+  });
+
   return (
     <>
       {isDragActive && <Box $position="fixed" $css={DRAG_FADE_CSS} />}

src/frontend/apps/conversations/src/features/left-panel/components/left-panel/LeftPanel.tsx

@@ -9,6 +9,7 @@ import { LaGaufre } from '@/features/header/components/LaGaufre';
 import { OnboardingButton } from '@/features/onboarding';
 import { SettingsButton } from '@/features/settings';
 import { useResponsiveStore } from '@/stores';
+import { trackRender } from '@/utils';
 
 import { LeftPanelContent } from './LeftPanelContent';
 import { LeftPanelHeader } from './LeftPanelHeader';
@@ -33,6 +34,9 @@ export const LeftPanel = () => {
     (componentTokens as Record<string, unknown>)['la-gaufre'] === true;
   const { setPanelOpen, isPanelOpen } = useChatPreferencesStore();
 
+  // TEMPORARY: render-loop diagnostic, remove with utils/debugRenderLoop.
+  trackRender('LeftPanel', { isDesktop, isPanelOpen });
+
   useEffect(() => {
     setPanelOpen(isDesktop ? true : false);
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/frontend/apps/conversations/src/layouts/MainLayout.tsx

@@ -10,6 +10,7 @@ import { Header } from '@/features/header';
 import { LeftPanel } from '@/features/left-panel';
 import { MAIN_LAYOUT_ID } from '@/layouts/conf';
 import { useResponsiveStore } from '@/stores';
+import { trackRender } from '@/utils';
 
 type MainLayoutProps = {
   backgroundColor?: 'white' | 'grey';
@@ -24,6 +25,9 @@ export function MainLayout({
   const { data: config } = useConfig();
   const { data: assistantHealth } = useAssistantHealth();
 
+  // TEMPORARY: render-loop diagnostic, remove with utils/debugRenderLoop.
+  trackRender('MainLayout', { isDesktop, isPanelOpen });
+
   return (
     <Box className="--docs--main-layout">
       <Box

src/frontend/apps/conversations/src/pages/_app.tsx

@@ -7,9 +7,14 @@ import { AppProvider, productName } from '@/core/';
 import { useCunninghamTheme } from '@/cunningham';
 import '@/i18n/initI18n';
 import { NextPageWithLayout } from '@/types/next';
+import { installRenderLoopCapture } from '@/utils';
 
 import './globals.css';
 
+// TEMPORARY: names the component behind the "Maximum update depth exceeded"
+// errors. Remove together with the trackRender() call sites.
+installRenderLoopCapture();
+
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };