From ea6dc7c16e0c6becd60da82abc9a746ab3c32aa9 Mon Sep 17 00:00:00 2001 From: MFPires Date: Tue, 28 Jan 2025 16:33:06 -0300 Subject: [PATCH] feat(ui): add context window percentage to task header Display the percentage of total context window used alongside token count in the task header. This helps users better understand their context usage relative to the model's capacity. Implementation details: - Retrieve model's context window size from normalized API configuration - Calculate percentage of context window used based on current context tokens - Display percentage in parentheses next to token count (e.g. "40,000 (20%)") - Default to context window size of 1 if model info is unavailable - Format numbers with commas for better readability --- src/core/Cline.ts | 6 +++++- webview-ui/src/components/chat/TaskHeader.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/core/Cline.ts b/src/core/Cline.ts index f85bf18..82a4314 100644 --- a/src/core/Cline.ts +++ b/src/core/Cline.ts @@ -3043,7 +3043,11 @@ export class Cline { // Add context tokens information const { contextTokens } = getApiMetrics(this.clineMessages) - details += `\n\n# Current Context Size (Tokens)\n${contextTokens ? contextTokens.toLocaleString() : "(Not available)"}` + const modelInfo = this.api.getModel().info + const contextWindow = modelInfo.contextWindow + const contextPercentage = + contextTokens && contextWindow ? Math.round((contextTokens / contextWindow) * 100) : undefined + details += `\n\n# Current Context Size (Tokens)\n${contextTokens ? `${contextTokens.toLocaleString()} (${contextPercentage}%)` : "(Not available)"}` // Add current mode and any mode-specific warnings const { mode, customModes } = (await this.providerRef.deref()?.getState()) ?? {} diff --git a/webview-ui/src/components/chat/TaskHeader.tsx b/webview-ui/src/components/chat/TaskHeader.tsx index 52b3756..f51bf13 100644 --- a/webview-ui/src/components/chat/TaskHeader.tsx +++ b/webview-ui/src/components/chat/TaskHeader.tsx @@ -7,6 +7,7 @@ import { vscode } from "../../utils/vscode" import Thumbnails from "../common/Thumbnails" import { mentionRegexGlobal } from "../../../../src/shared/context-mentions" import { formatLargeNumber } from "../../utils/format" +import { normalizeApiConfiguration } from "../settings/ApiOptions" interface TaskHeaderProps { task: ClineMessage @@ -32,11 +33,14 @@ const TaskHeader: React.FC = ({ onClose, }) => { const { apiConfiguration } = useExtensionState() + const { selectedModelInfo } = useMemo(() => normalizeApiConfiguration(apiConfiguration), [apiConfiguration]) const [isTaskExpanded, setIsTaskExpanded] = useState(true) const [isTextExpanded, setIsTextExpanded] = useState(false) const [showSeeMore, setShowSeeMore] = useState(false) const textContainerRef = useRef(null) const textRef = useRef(null) + const contextWindow = selectedModelInfo?.contextWindow || 1 + const contextPercentage = Math.round((contextTokens / contextWindow) * 100) /* When dealing with event listeners in React components that depend on state variables, we face a challenge. We want our listener to always use the most up-to-date version of a callback function that relies on current state, but we don't want to constantly add and remove event listeners as that function updates. This scenario often arises with resize listeners or other window events. Simply adding the listener in a useEffect with an empty dependency array risks using stale state, while including the callback in the dependencies can lead to unnecessary re-registrations of the listener. There are react hook libraries that provide a elegant solution to this problem by utilizing the useRef hook to maintain a reference to the latest callback function without triggering re-renders or effect re-runs. This approach ensures that our event listener always has access to the most current state while minimizing performance overhead and potential memory leaks from multiple listener registrations. @@ -277,7 +281,9 @@ const TaskHeader: React.FC = ({
Context: - {contextTokens ? formatLargeNumber(contextTokens) : '-'} + {contextTokens + ? `${formatLargeNumber(contextTokens)} (${contextPercentage}%)` + : "-"}