From 118153ecfd79279bb7a7ac0ed5d987b98a189556 Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Thu, 26 Mar 2026 15:53:50 -0700
Subject: [PATCH 1/4] fix: hide "compact conversation" when there's no
 conversation history

When the system message is large, context percentage can exceed 60%
even on the first exchange, causing the "Compact conversation" label
and link to appear when there's nothing meaningful to compact. Now
requires at least 2 user messages before showing compact UI elements.
---
 gui/src/components/StepContainer/ResponseActions.tsx | 6 +++++-
 gui/src/components/mainInput/ContextStatus.tsx       | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx
index 0dc09a438be..8cce6007146 100644
--- a/gui/src/components/StepContainer/ResponseActions.tsx
+++ b/gui/src/components/StepContainer/ResponseActions.tsx
@@ -40,6 +40,9 @@ export default function ResponseActions({
     (state) => state.session.contextPercentage,
   );
   const isPruned = useAppSelector((state) => state.session.isPruned);
+  const historyLength = useAppSelector(
+    (state) => state.session.history.length,
+  );
   const ruleGenerationSupported = useMemo(() => {
     return selectedModel && modelSupportsNativeTools(selectedModel);
   }, [selectedModel]);
@@ -50,7 +53,8 @@ export default function ResponseActions({
       ? "text-warning"
       : "text-description-muted";
 
-  const showLabel = isLast && (isPruned || percent >= 60);
+  const showLabel =
+    isLast && historyLength >= 4 && (isPruned || percent >= 60);
 
   const compactConversation = useCompactConversation();
 
diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx
index 63be8f18000..049ac81c25a 100644
--- a/gui/src/components/mainInput/ContextStatus.tsx
+++ b/gui/src/components/mainInput/ContextStatus.tsx
@@ -61,7 +61,7 @@ const ContextStatus = () => {
                 {`Oldest messages are being removed.`}
               </span>
             )}
-            {history.length > 0 && (
+            {history.length >= 4 && (
               <div className="flex flex-col gap-1 whitespace-pre">
                 <div>
                   <span

From 641ede1d9dd34d5794cbf80a73e5272c7651fabc Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Thu, 26 Mar 2026 16:33:26 -0700
Subject: [PATCH 2/4] fix: format files with prettier/tailwindcss plugin

---
 .../components/StepContainer/ResponseActions.tsx  | 15 ++++++---------
 gui/src/components/mainInput/ContextStatus.tsx    |  6 +++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx
index 8cce6007146..7e0775c0214 100644
--- a/gui/src/components/StepContainer/ResponseActions.tsx
+++ b/gui/src/components/StepContainer/ResponseActions.tsx
@@ -40,9 +40,7 @@ export default function ResponseActions({
     (state) => state.session.contextPercentage,
   );
   const isPruned = useAppSelector((state) => state.session.isPruned);
-  const historyLength = useAppSelector(
-    (state) => state.session.history.length,
-  );
+  const historyLength = useAppSelector((state) => state.session.history.length);
   const ruleGenerationSupported = useMemo(() => {
     return selectedModel && modelSupportsNativeTools(selectedModel);
   }, [selectedModel]);
@@ -53,8 +51,7 @@ export default function ResponseActions({
       ? "text-warning"
       : "text-description-muted";
 
-  const showLabel =
-    isLast && historyLength >= 4 && (isPruned || percent >= 60);
+  const showLabel = isLast && historyLength >= 4 && (isPruned || percent >= 60);
 
   const compactConversation = useCompactConversation();
 
@@ -64,7 +61,7 @@ export default function ResponseActions({
   };
 
   return (
-    <div className="text-description-muted mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs">
+    <div className="mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs text-description-muted">
       <HeaderButtonWithToolTip
         testId={`compact-button-${index}`}
         text={
@@ -95,7 +92,7 @@ export default function ResponseActions({
           text="Generate rule"
           onClick={onGenerateRule}
         >
-          <PencilSquareIcon className="text-description-muted h-3.5 w-3.5" />
+          <PencilSquareIcon className="h-3.5 w-3.5 text-description-muted" />
         </HeaderButtonWithToolTip>
       )}
 
@@ -105,7 +102,7 @@ export default function ResponseActions({
           text="Continue generation"
           onClick={onContinueGeneration}
         >
-          <BarsArrowDownIcon className="text-description-muted h-3.5 w-3.5" />
+          <BarsArrowDownIcon className="h-3.5 w-3.5 text-description-muted" />
         </HeaderButtonWithToolTip>
       )}
 
@@ -115,7 +112,7 @@ export default function ResponseActions({
         tabIndex={-1}
         onClick={onDelete}
       >
-        <TrashIcon className="text-description-muted h-3.5 w-3.5" />
+        <TrashIcon className="h-3.5 w-3.5 text-description-muted" />
       </HeaderButtonWithToolTip>
 
       <CopyIconButton
diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx
index 049ac81c25a..0f248e27b0a 100644
--- a/gui/src/components/mainInput/ContextStatus.tsx
+++ b/gui/src/components/mainInput/ContextStatus.tsx
@@ -65,14 +65,14 @@ const ContextStatus = () => {
               <div className="flex flex-col gap-1 whitespace-pre">
                 <div>
                   <span
-                    className="hover:text-link inline-block cursor-pointer underline"
+                    className="inline-block cursor-pointer underline hover:text-link"
                     onClick={() => compactConversation(history.length - 1)}
                   >
                     Compact conversation
                   </span>
                   {"\n"}
                   <span
-                    className="hover:text-link inline-block cursor-pointer underline"
+                    className="inline-block cursor-pointer underline hover:text-link"
                     onClick={() => {
                       void dispatch(
                         saveCurrentSession({
@@ -90,7 +90,7 @@ const ContextStatus = () => {
           </div>
         }
       >
-        <div className="border-command-border relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid md:h-[10px] md:w-[5px]">
+        <div className="relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid border-command-border md:h-[10px] md:w-[5px]">
           <div
             className={`transition-height absolute bottom-0 left-0 w-full duration-300 ease-in-out ${barColorClass}`}
             style={{ height: `${percent}%` }}

From 073692ec904c2e244278c1aaa54b1a86ea7dfc6e Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Thu, 26 Mar 2026 16:37:25 -0700
Subject: [PATCH 3/4] fix: reformat with root prettier config to match CI

---
 gui/src/components/StepContainer/ResponseActions.tsx | 8 ++++----
 gui/src/components/mainInput/ContextStatus.tsx       | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx
index 7e0775c0214..ac28afb9dc1 100644
--- a/gui/src/components/StepContainer/ResponseActions.tsx
+++ b/gui/src/components/StepContainer/ResponseActions.tsx
@@ -61,7 +61,7 @@ export default function ResponseActions({
   };
 
   return (
-    <div className="mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs text-description-muted">
+    <div className="text-description-muted mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs">
       <HeaderButtonWithToolTip
         testId={`compact-button-${index}`}
         text={
@@ -92,7 +92,7 @@ export default function ResponseActions({
           text="Generate rule"
           onClick={onGenerateRule}
         >
-          <PencilSquareIcon className="h-3.5 w-3.5 text-description-muted" />
+          <PencilSquareIcon className="text-description-muted h-3.5 w-3.5" />
         </HeaderButtonWithToolTip>
       )}
 
@@ -102,7 +102,7 @@ export default function ResponseActions({
           text="Continue generation"
           onClick={onContinueGeneration}
         >
-          <BarsArrowDownIcon className="h-3.5 w-3.5 text-description-muted" />
+          <BarsArrowDownIcon className="text-description-muted h-3.5 w-3.5" />
         </HeaderButtonWithToolTip>
       )}
 
@@ -112,7 +112,7 @@ export default function ResponseActions({
         tabIndex={-1}
         onClick={onDelete}
       >
-        <TrashIcon className="h-3.5 w-3.5 text-description-muted" />
+        <TrashIcon className="text-description-muted h-3.5 w-3.5" />
       </HeaderButtonWithToolTip>
 
       <CopyIconButton
diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx
index 0f248e27b0a..049ac81c25a 100644
--- a/gui/src/components/mainInput/ContextStatus.tsx
+++ b/gui/src/components/mainInput/ContextStatus.tsx
@@ -65,14 +65,14 @@ const ContextStatus = () => {
               <div className="flex flex-col gap-1 whitespace-pre">
                 <div>
                   <span
-                    className="inline-block cursor-pointer underline hover:text-link"
+                    className="hover:text-link inline-block cursor-pointer underline"
                     onClick={() => compactConversation(history.length - 1)}
                   >
                     Compact conversation
                   </span>
                   {"\n"}
                   <span
-                    className="inline-block cursor-pointer underline hover:text-link"
+                    className="hover:text-link inline-block cursor-pointer underline"
                     onClick={() => {
                       void dispatch(
                         saveCurrentSession({
@@ -90,7 +90,7 @@ const ContextStatus = () => {
           </div>
         }
       >
-        <div className="relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid border-command-border md:h-[10px] md:w-[5px]">
+        <div className="border-command-border relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid md:h-[10px] md:w-[5px]">
           <div
             className={`transition-height absolute bottom-0 left-0 w-full duration-300 ease-in-out ${barColorClass}`}
             style={{ height: `${percent}%` }}

From 6f38a61903618549aec1ef9ba93f248e72d0e2c1 Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Thu, 26 Mar 2026 16:41:10 -0700
Subject: [PATCH 4/4] fix: show "Start a new session" for all history lengths

"Compact conversation" still requires history.length >= 4, but
"Start a new session" should be available whenever there is any
conversation history.
---
 .../components/mainInput/ContextStatus.tsx    | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx
index 049ac81c25a..d036c2e2900 100644
--- a/gui/src/components/mainInput/ContextStatus.tsx
+++ b/gui/src/components/mainInput/ContextStatus.tsx
@@ -61,16 +61,20 @@ const ContextStatus = () => {
                 {`Oldest messages are being removed.`}
               </span>
             )}
-            {history.length >= 4 && (
+            {history.length > 0 && (
               <div className="flex flex-col gap-1 whitespace-pre">
                 <div>
-                  <span
-                    className="hover:text-link inline-block cursor-pointer underline"
-                    onClick={() => compactConversation(history.length - 1)}
-                  >
-                    Compact conversation
-                  </span>
-                  {"\n"}
+                  {history.length >= 4 && (
+                    <>
+                      <span
+                        className="hover:text-link inline-block cursor-pointer underline"
+                        onClick={() => compactConversation(history.length - 1)}
+                      >
+                        Compact conversation
+                      </span>
+                      {"\n"}
+                    </>
+                  )}
                   <span
                     className="hover:text-link inline-block cursor-pointer underline"
                     onClick={() => {