feat: always-on context usage display with sub-1% precision

gui/src/components/StepContainer/ResponseActions.tsx

@@ -32,14 +32,26 @@ export default function ResponseActions({
     (state) => state.session.contextPercentage,
   );
   const isPruned = useAppSelector((state) => state.session.isPruned);
+  const history = useAppSelector((state) => state.session.history);
 
-  const percent = Math.round((contextPercentage ?? 0) * 100);
+  // contextPercentage is undefined until first message is sent
+  const hasContextData = contextPercentage !== undefined;
+
+  // Format: show 1 decimal place when < 1%, integer otherwise
+  const displayPercent = hasContextData ? contextPercentage * 100 : 0;
+  const percentFormatted = hasContextData
+    ? displayPercent < 1
+      ? displayPercent.toFixed(1)
+      : Math.round(displayPercent).toString()
+    : "";
+  const percent = hasContextData ? Math.round(displayPercent) : 0;
   const buttonColorClass =
     isLast && (isPruned || percent > 80)
       ? "text-warning"
       : "text-description-muted";
 
-  const showLabel = isLast && (isPruned || percent >= 60);
+  // Always show label on last message when there's history
+  const showLabel = isLast && history.length > 0;
 
   const compactConversation = useCompactConversation();
 
@@ -63,7 +75,7 @@ export default function ResponseActions({
             <span
               className={`text-xs ${buttonColorClass || "text-description-muted"}`}
             >
-              Compact conversation
+              {hasContextData ? `${percentFormatted}% · ` : ""}Compact
             </span>
           )}
         </div>

gui/src/components/mainInput/ContextStatus.tsx

@@ -15,9 +15,21 @@ const ContextStatus = () => {
   const previousHistoryLength = useRef<number | null>(null);
   const previousSelectedChatModel = useRef<string | null>(null);
   const history = useAppSelector((state) => state.session.history);
-  const percent = Math.round((contextPercentage ?? 0) * 100);
   const isPruned = useAppSelector((state) => state.session.isPruned);
 
+  // contextPercentage is undefined until the first message is sent
+  // (it's only computed in compileChatMessages during streamNormalInput)
+  const hasContextData = contextPercentage !== undefined;
+
+  // Format: show 1 decimal place when < 1%, integer otherwise
+  const displayPercent = hasContextData ? contextPercentage * 100 : 0;
+  const percentFormatted = hasContextData
+    ? displayPercent < 1
+      ? displayPercent.toFixed(1)
+      : Math.round(displayPercent).toString()
+    : "—";
+  const percent = hasContextData ? Math.round(displayPercent) : 0;
+
   const isDifferentModelAndSameHistory = useMemo(() => {
     if (!selectedChatModel) return false;
     // only reset if history changes
@@ -30,7 +42,10 @@ const ContextStatus = () => {
   }, [history.length, selectedChatModel]);
 
   const compactConversation = useCompactConversation();
-  if (!isPruned && percent < 60) {
+
+  // Always show context usage when there's history, regardless of percentage
+  // Previously: if (!isPruned && percent < 60) return null;
+  if (history.length === 0) {
     return null;
   }
 
@@ -39,13 +54,18 @@ const ContextStatus = () => {
     return null;
   }
 
-  const barColorClass = isPruned ? "bg-error" : "bg-description";
+  const barColorClass = isPruned
+    ? "bg-error"
+    : percent >= 80
+      ? "bg-warning"
+      : percent >= 60
+        ? "bg-description"
+        : "bg-description-muted";
 
   return (
-    <div>
+    <div className="flex items-center gap-1">
       <ToolTip
         closeEvents={{
-          // blur: false,
           mouseleave: true,
           click: true,
           mouseup: false,
@@ -54,7 +74,9 @@ const ContextStatus = () => {
         content={
           <div className="flex flex-col gap-0 text-left text-xs">
             <span className="inline-block">
-              {`${percent}% of context filled.`}
+              {hasContextData
+                ? `${percentFormatted}% of context filled.`
+                : `Context usage will be shown after sending a message.`}
             </span>
             {isPruned && (
               <span className="inline-block">
@@ -93,10 +115,15 @@ const ContextStatus = () => {
         <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}%` }}
+            style={{ height: `${hasContextData ? Math.max(percent, 2) : 0}%` }}
           />
         </div>
       </ToolTip>
+      <span
+        className={`text-description-muted xs:inline hidden select-none text-[10px] leading-none ${percent >= 80 ? "text-warning" : percent >= 60 ? "text-description" : "text-description-muted"}`}
+      >
+        {hasContextData ? `${percentFormatted}%` : "—"}
+      </span>
     </div>
   );
 };