Align the remaining token calculation in the context utilization component with the displayed token formatting

Author: robertpiosik

packages/shared/src/constants/dictionary.ts

@@ -83,7 +83,7 @@ export const dictionary = {
     GROUP_HAS_NO_SELECTED_PRESETS:
       'The chosen group has no selected presets to run.',
     CONTEXT_SIZE_WARNING: (threshold: string, percentage: number) =>
-      `Context is now larger than set threshold of ${threshold} tokens by ${percentage}%. Unreasonably large context may degrade response quality, hit allowed usage limit faster or increase costs.`,
+      `Context exceeds threshold of ${threshold} tokens by ${percentage}%. Unreasonably large context may degrade response quality, hurt plan's usage allowance or incur significant costs.`,
     FAILED_TO_CREATE_FILE: (file_path: string) =>
       `Failed to create file: ${file_path}`,
     FAILED_TO_APPLY_CHANGES_TO_FILE: (file_path: string) =>

packages/ui/src/components/editor/panel/ContextUtilisation/ContextUtilisation.tsx

@@ -38,7 +38,10 @@ export const ContextUtilisation: React.FC<Props> = (props) => {
 
   if (!is_above_threshold) {
     const remaining_tokens =
-      props.context_size_warning_threshold - props.current_context_size
+      props.context_size_warning_threshold -
+      (props.current_context_size < 1000
+        ? props.current_context_size
+        : Math.floor(props.current_context_size / 1000) * 1000)
     const formatted_remaining_tokens = format_tokens(remaining_tokens)
     title_text = `${formatted_remaining_tokens} tokens remaining until threshold warning`
   } else {