From d4961e9083eb7909489a793f60fadadabb44cbcf Mon Sep 17 00:00:00 2001
From: Philip Zeyliger <philip@bold.dev>
Date: Tue, 20 Jan 2026 02:54:29 +0000
Subject: [PATCH] shelley/ui: show warning icon when conversation exceeds 100k
 tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prompt: When a conversation gets to 100k tokens, I want you to put up a ⚠️-type
icon, and some text above it: 'This conversation is getting long. For best
results, start a new conversation.'

When the context window reaches 100k tokens or more, show a ⚠️ warning icon
next to the context usage bar. Clicking the bar shows a popup with the
full warning message.

Co-authored-by: Shelley <shelley@exe.dev>
---
 ui/src/components/ChatInterface.tsx | 40 +++++++++++++++++++++--------
 ui/src/styles.css                   | 12 +++++++++
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/ChatInterface.tsx b/ui/src/components/ChatInterface.tsx
index 9ad2333762f9b4e2152564349f70eaf9a2b24189..37be15e72b6f363a73bf8993303b6d1db7e87ef2 100644
--- a/ui/src/components/ChatInterface.tsx
+++ b/ui/src/components/ChatInterface.tsx
@@ -37,6 +37,7 @@ function ContextUsageBar({ contextWindowSize, maxContextTokens }: ContextUsageBa
 
   const percentage = maxContextTokens > 0 ? (contextWindowSize / maxContextTokens) * 100 : 0;
   const clampedPercentage = Math.min(percentage, 100);
+  const showLongConversationWarning = contextWindowSize >= 100000;
 
   const getBarColor = () => {
     if (percentage >= 90) return "var(--error-text)";
@@ -104,20 +105,37 @@ function ContextUsageBar({ contextWindowSize, maxContextTokens }: ContextUsageBa
         >
           {formatTokens(contextWindowSize)} / {formatTokens(maxContextTokens)} (
           {percentage.toFixed(1)}%) tokens used
+          {showLongConversationWarning && (
+            <div style={{ marginTop: "6px", color: "var(--warning-text, #f59e0b)" }}>
+              This conversation is getting long.
+              <br />
+              For best results, start a new conversation.
+            </div>
+          )}
         </div>
       )}
-      <div
-        className="context-usage-bar"
-        onClick={handleClick}
-        title={`Context: ${formatTokens(contextWindowSize)} / ${formatTokens(maxContextTokens)} tokens (${percentage.toFixed(1)}%)`}
-      >
+      <div className="context-usage-bar-container">
+        {showLongConversationWarning && (
+          <span
+            className="context-warning-icon"
+            title="This conversation is getting long. For best results, start a new conversation."
+          >
+            ⚠️
+          </span>
+        )}
         <div
-          className="context-usage-fill"
-          style={{
-            width: `${clampedPercentage}%`,
-            backgroundColor: getBarColor(),
-          }}
-        />
+          className="context-usage-bar"
+          onClick={handleClick}
+          title={`Context: ${formatTokens(contextWindowSize)} / ${formatTokens(maxContextTokens)} tokens (${percentage.toFixed(1)}%)`}
+        >
+          <div
+            className="context-usage-fill"
+            style={{
+              width: `${clampedPercentage}%`,
+              backgroundColor: getBarColor(),
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 62344278bf996a30ac88e09dae32a867afe28e09..554dacc15a6a13bdcbe66224021b7f096e17c368 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -2681,6 +2681,18 @@ svg {
   }
 }
 
+.context-usage-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.context-warning-icon {
+  font-size: 14px;
+  line-height: 1;
+  cursor: help;
+}
+
 .context-usage-bar {
   width: 60px;
   height: 6px;