From 71a63ec81658e72dfe9264abffe199e3008e8a45 Mon Sep 17 00:00:00 2001
From: David Katz <dkatz@squareup.com>
Date: Thu, 25 Sep 2025 13:48:41 -0400
Subject: [PATCH 1/4] fix token ui refreshing

---
 ui/desktop/src/components/ChatInput.tsx                  | 2 ++
 ui/desktop/src/components/alerts/types.ts                | 1 +
 .../components/bottom_menu/BottomMenuAlertPopover.tsx    | 9 +++++++--
 ui/desktop/src/components/bottom_menu/CostTracker.tsx    | 8 ++++++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index b19c32be90cf..2699a49c0b6c 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -572,6 +572,7 @@ export default function ChatInput({
         },
         compactIcon: <ScrollText size={12} />,
         autoCompactThreshold: autoCompactThreshold,
+        key: `context-${numTokens}-${tokenLimit}`, // Add a key to force re-render
       });
     }
 
@@ -1610,6 +1611,7 @@ export default function ChatInput({
             <>
               <div className="flex items-center h-full ml-1 mr-1">
                 <CostTracker
+                  key={`cost-tracker-${inputTokens}-${outputTokens}`}
                   inputTokens={inputTokens}
                   outputTokens={outputTokens}
                   sessionCosts={sessionCosts}
diff --git a/ui/desktop/src/components/alerts/types.ts b/ui/desktop/src/components/alerts/types.ts
index af8867261836..eb15d9ea28e8 100644
--- a/ui/desktop/src/components/alerts/types.ts
+++ b/ui/desktop/src/components/alerts/types.ts
@@ -21,4 +21,5 @@ export interface Alert {
   onCompact?: () => void;
   compactIcon?: React.ReactNode;
   autoCompactThreshold?: number; // Add this for showing the auto-compact threshold
+  key?: string; // Add key for forcing re-renders
 }
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
index 86a59ec013e8..7c5b3b67cb9a 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
@@ -104,10 +104,15 @@ export default function BottomMenuAlertPopover({ alerts }: AlertPopoverProps) {
       return;
     }
 
-    // Find new or changed alerts
+    // Find new or changed alerts - also check for key changes
     const changedAlerts = alerts.filter((alert, index) => {
       const prevAlert = previousAlertsRef.current[index];
-      return !prevAlert || prevAlert.type !== alert.type || prevAlert.message !== alert.message;
+      return (
+        !prevAlert ||
+        prevAlert.type !== alert.type ||
+        prevAlert.message !== alert.message ||
+        prevAlert.key !== alert.key
+      );
     });
 
     previousAlertsRef.current = alerts;
diff --git a/ui/desktop/src/components/bottom_menu/CostTracker.tsx b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
index 54cf6620e94b..1ac9ea22dfed 100644
--- a/ui/desktop/src/components/bottom_menu/CostTracker.tsx
+++ b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
@@ -291,10 +291,14 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
         <TooltipTrigger asChild>
           <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-default/70 hover:text-text-default">
             <CoinIcon className="mr-1" size={16} />
-            <span className="text-xs font-mono">{formatCost(totalCost)}</span>
+            <span className="text-xs font-mono" key={`cost-${totalCost}`}>
+              {formatCost(totalCost)}
+            </span>
           </div>
         </TooltipTrigger>
-        <TooltipContent>{getTooltipContent()}</TooltipContent>
+        <TooltipContent key={`tooltip-${inputTokens}-${outputTokens}-${totalCost}`}>
+          {getTooltipContent()}
+        </TooltipContent>
       </Tooltip>
       <div className="w-px h-4 bg-border-default mx-2" />
     </>

From affb9147cfb57301258ef047d8d3af57b6dbed6f Mon Sep 17 00:00:00 2001
From: David Katz <dkatz@squareup.com>
Date: Thu, 25 Sep 2025 13:51:48 -0400
Subject: [PATCH 2/4] de vibe comments

---
 ui/desktop/src/components/ChatInput.tsx                       | 2 +-
 ui/desktop/src/components/alerts/types.ts                     | 4 ++--
 .../src/components/bottom_menu/BottomMenuAlertPopover.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 2699a49c0b6c..28a0cbf11715 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -572,7 +572,7 @@ export default function ChatInput({
         },
         compactIcon: <ScrollText size={12} />,
         autoCompactThreshold: autoCompactThreshold,
-        key: `context-${numTokens}-${tokenLimit}`, // Add a key to force re-render
+        key: `context-${numTokens}-${tokenLimit}`, // Force re-render on token count change
       });
     }
 
diff --git a/ui/desktop/src/components/alerts/types.ts b/ui/desktop/src/components/alerts/types.ts
index eb15d9ea28e8..ddbc4e9d357c 100644
--- a/ui/desktop/src/components/alerts/types.ts
+++ b/ui/desktop/src/components/alerts/types.ts
@@ -20,6 +20,6 @@ export interface Alert {
   compactButtonDisabled?: boolean;
   onCompact?: () => void;
   compactIcon?: React.ReactNode;
-  autoCompactThreshold?: number; // Add this for showing the auto-compact threshold
-  key?: string; // Add key for forcing re-renders
+  autoCompactThreshold?: number;
+  key?: string;
 }
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
index 7c5b3b67cb9a..0fa1bad89b56 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
@@ -104,7 +104,7 @@ export default function BottomMenuAlertPopover({ alerts }: AlertPopoverProps) {
       return;
     }
 
-    // Find new or changed alerts - also check for key changes
+    // Find new or changed alerts
     const changedAlerts = alerts.filter((alert, index) => {
       const prevAlert = previousAlertsRef.current[index];
       return (

From 5cd2b179fad14c48a58fe307f2b28493beee106e Mon Sep 17 00:00:00 2001
From: David Katz <dkatz@squareup.com>
Date: Thu, 25 Sep 2025 13:56:58 -0400
Subject: [PATCH 3/4] don trenerender cost tracker

---
 ui/desktop/src/components/ChatInput.tsx               | 1 -
 ui/desktop/src/components/bottom_menu/CostTracker.tsx | 8 ++------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 28a0cbf11715..f8c91d361662 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -1611,7 +1611,6 @@ export default function ChatInput({
             <>
               <div className="flex items-center h-full ml-1 mr-1">
                 <CostTracker
-                  key={`cost-tracker-${inputTokens}-${outputTokens}`}
                   inputTokens={inputTokens}
                   outputTokens={outputTokens}
                   sessionCosts={sessionCosts}
diff --git a/ui/desktop/src/components/bottom_menu/CostTracker.tsx b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
index 1ac9ea22dfed..54cf6620e94b 100644
--- a/ui/desktop/src/components/bottom_menu/CostTracker.tsx
+++ b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
@@ -291,14 +291,10 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
         <TooltipTrigger asChild>
           <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-default/70 hover:text-text-default">
             <CoinIcon className="mr-1" size={16} />
-            <span className="text-xs font-mono" key={`cost-${totalCost}`}>
-              {formatCost(totalCost)}
-            </span>
+            <span className="text-xs font-mono">{formatCost(totalCost)}</span>
           </div>
         </TooltipTrigger>
-        <TooltipContent key={`tooltip-${inputTokens}-${outputTokens}-${totalCost}`}>
-          {getTooltipContent()}
-        </TooltipContent>
+        <TooltipContent>{getTooltipContent()}</TooltipContent>
       </Tooltip>
       <div className="w-px h-4 bg-border-default mx-2" />
     </>

From 10d7aa1bde23fcccda2be7dffd75f89bd4e94f85 Mon Sep 17 00:00:00 2001
From: David Katz <dkatz@squareup.com>
Date: Thu, 25 Sep 2025 19:05:01 -0400
Subject: [PATCH 4/4] deep euqlaity

---
 ui/desktop/src/components/ChatInput.tsx                |  1 -
 ui/desktop/src/components/alerts/types.ts              |  1 -
 .../components/bottom_menu/BottomMenuAlertPopover.tsx  | 10 +++-------
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index f8c91d361662..b19c32be90cf 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -572,7 +572,6 @@ export default function ChatInput({
         },
         compactIcon: <ScrollText size={12} />,
         autoCompactThreshold: autoCompactThreshold,
-        key: `context-${numTokens}-${tokenLimit}`, // Force re-render on token count change
       });
     }
 
diff --git a/ui/desktop/src/components/alerts/types.ts b/ui/desktop/src/components/alerts/types.ts
index ddbc4e9d357c..f7aba0815087 100644
--- a/ui/desktop/src/components/alerts/types.ts
+++ b/ui/desktop/src/components/alerts/types.ts
@@ -21,5 +21,4 @@ export interface Alert {
   onCompact?: () => void;
   compactIcon?: React.ReactNode;
   autoCompactThreshold?: number;
-  key?: string;
 }
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
index 0fa1bad89b56..a7288891f0ca 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
@@ -1,5 +1,6 @@
 import { useRef, useEffect, useCallback, useState } from 'react';
 import { FaCircle } from 'react-icons/fa';
+import { isEqual } from 'lodash';
 import { cn } from '../../utils';
 import { Alert, AlertType } from '../alerts';
 import { AlertBox } from '../alerts';
@@ -104,15 +105,10 @@ export default function BottomMenuAlertPopover({ alerts }: AlertPopoverProps) {
       return;
     }
 
-    // Find new or changed alerts
+    // Find new or changed alerts using deep comparison
     const changedAlerts = alerts.filter((alert, index) => {
       const prevAlert = previousAlertsRef.current[index];
-      return (
-        !prevAlert ||
-        prevAlert.type !== alert.type ||
-        prevAlert.message !== alert.message ||
-        prevAlert.key !== alert.key
-      );
+      return !prevAlert || !isEqual(prevAlert, alert);
     });
 
     previousAlertsRef.current = alerts;