From c1291f344080335fa429494ffadc4feb2f252c2a Mon Sep 17 00:00:00 2001 From: Nam Thanh Nguyen Date: Sun, 9 Aug 2026 12:39:43 +0700 Subject: [PATCH 1/3] feat: always-on context usage display with sub-1% precision MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Show context usage percentage persistently in the UI so users can proactively monitor context consumption — inspired by Kiro IDE. Changes: - ContextStatus: always visible when history exists (removed 60% threshold) - ContextStatus: show '—' instead of misleading '0%' when no data yet - ContextStatus: show 1 decimal place for sub-1% usage (e.g. '0.3%') - ContextStatus: color-coded bar (muted < 60%, description >= 60%, warning >= 80%, error=pruned) - ContextStatus: show percentage number next to bar - ResponseActions: always show 'Compact' label on last message - ResponseActions: show percentage prefix (e.g. '0.3% · Compact') - ResponseActions: hide percentage prefix when no context data yet --- .../StepContainer/ResponseActions.tsx | 20 +++++++-- .../components/mainInput/ContextStatus.tsx | 43 ++++++++++++++++--- 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx index 9461bbf9309..63ce371f01f 100644 --- a/gui/src/components/StepContainer/ResponseActions.tsx +++ b/gui/src/components/StepContainer/ResponseActions.tsx @@ -32,14 +32,28 @@ 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 +77,7 @@ export default function ResponseActions({ - Compact conversation + {hasContextData ? `${percentFormatted}% · ` : ""}Compact )} diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx index 63be8f18000..a25278d9baf 100644 --- a/gui/src/components/mainInput/ContextStatus.tsx +++ b/gui/src/components/mainInput/ContextStatus.tsx @@ -15,9 +15,23 @@ const ContextStatus = () => { const previousHistoryLength = useRef(null); const previousSelectedChatModel = useRef(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 +44,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 +56,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 ( -
+
{ content={
- {`${percent}% of context filled.`} + {hasContextData + ? `${percentFormatted}% of context filled.` + : `Context usage will be shown after sending a message.`} {isPruned && ( @@ -93,10 +117,15 @@ const ContextStatus = () => {
+
); }; From 358a8d37d86cdd156de8a6d5497d71dd7d193148 Mon Sep 17 00:00:00 2001 From: Nam Thanh Nguyen Date: Sun, 9 Aug 2026 12:39:52 +0700 Subject: [PATCH 2/3] style: apply prettier formatting to ResponseActions and ContextStatus --- gui/src/components/StepContainer/ResponseActions.tsx | 4 +--- gui/src/components/mainInput/ContextStatus.tsx | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx index 63ce371f01f..1931c8d6c49 100644 --- a/gui/src/components/StepContainer/ResponseActions.tsx +++ b/gui/src/components/StepContainer/ResponseActions.tsx @@ -38,9 +38,7 @@ export default function ResponseActions({ const hasContextData = contextPercentage !== undefined; // Format: show 1 decimal place when < 1%, integer otherwise - const displayPercent = hasContextData - ? contextPercentage * 100 - : 0; + const displayPercent = hasContextData ? contextPercentage * 100 : 0; const percentFormatted = hasContextData ? displayPercent < 1 ? displayPercent.toFixed(1) diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx index a25278d9baf..a01fdbecf15 100644 --- a/gui/src/components/mainInput/ContextStatus.tsx +++ b/gui/src/components/mainInput/ContextStatus.tsx @@ -22,9 +22,7 @@ const ContextStatus = () => { const hasContextData = contextPercentage !== undefined; // Format: show 1 decimal place when < 1%, integer otherwise - const displayPercent = hasContextData - ? contextPercentage * 100 - : 0; + const displayPercent = hasContextData ? contextPercentage * 100 : 0; const percentFormatted = hasContextData ? displayPercent < 1 ? displayPercent.toFixed(1) @@ -122,7 +120,7 @@ const ContextStatus = () => {
From 98a2bdfca7b739f02b50a9739b5a2e48f181337e Mon Sep 17 00:00:00 2001 From: Nam Thanh Nguyen Date: Sun, 9 Aug 2026 12:40:26 +0700 Subject: [PATCH 3/3] ci: trigger CLA re-check