Refactor context size warning logic to include the percentage over the threshold and update UI components to display token utilization details, including hover titles and formatted token counts

Author: robertpiosik

packages/shared/src/constants/dictionary.ts

@@ -82,8 +82,8 @@ export const dictionary = {
     TYPE_SOMETHING_TO_USE_GROUP: 'Type something to use this group.',
     GROUP_HAS_NO_SELECTED_PRESETS:
       'The chosen group has no selected presets to run.',
-    CONTEXT_SIZE_WARNING: (threshold: number) =>
-      `Context is now larger than set threshold of ${threshold} tokens. Unreasonably large context affects quality of responses, usage limits/costs.`,
+    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.`,
     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.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: var(--padding-8px);
-  padding: 0 13px;
+  padding: 0 var(--padding-10px);
   color: var(--vscode-descriptionForeground);
 }
 

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

@@ -31,10 +31,19 @@ export const ContextUtilisation: React.FC<Props> = (props) => {
     ? `⚠ ${formatted_current_size}`
     : formatted_current_size
 
+  let title_text = ''
   const context_text = is_above_threshold
     ? `${display_current_size} tokens in context`
     : `${display_current_size}/${formatted_threshold} tokens in context`
 
+  if (!is_above_threshold) {
+    const remaining_tokens =
+      props.context_size_warning_threshold - props.current_context_size
+    title_text = `${remaining_tokens} tokens remaining until threshold (${formatted_threshold})`
+  } else {
+    title_text = `Context size (${formatted_current_size}) exceeds threshold (${formatted_threshold})`
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.bar}>
@@ -45,7 +54,9 @@ export const ContextUtilisation: React.FC<Props> = (props) => {
           style={{ width: `${progress}%` }}
         />
       </div>
-      <span className={styles.label}>{context_text}</span>
+      <span className={styles.label} title={title_text}>
+        {context_text}
+      </span>
     </div>
   )
 }

packages/vscode/src/context/context-initialization.ts

@@ -13,11 +13,20 @@ import { ContextProvider } from './providers/context-provider'
 
 export const token_count_emitter = new EventEmitter()
 
-export function context_initialization(context: vscode.ExtensionContext): {
+const round_token_count_for_badge = (count: number): number => {
+  if (count < 1000) {
+    return count
+  }
+  return Math.floor(count / 1000) * 1000
+}
+
+export const context_initialization = (
+  context: vscode.ExtensionContext
+): {
   workspace_provider: WorkspaceProvider
   open_editors_provider: OpenEditorsProvider
   websites_provider: WebsitesProvider
-} {
+} => {
   let was_above_threshold = false
 
   const workspace_folders = vscode.workspace.workspaceFolders ?? []
@@ -48,24 +57,19 @@ export function context_initialization(context: vscode.ExtensionContext): {
     if (context_provider && context_view) {
       context_token_count =
         await workspace_provider.get_checked_files_token_count()
-      context_view.badge = {
-        value: context_token_count,
+      workspace_view.badge = {
+        value: round_token_count_for_badge(context_token_count),
         tooltip: context_token_count
           ? `About ${context_token_count} tokens in context`
           : ''
       }
+      context_view.badge = undefined
     }
 
     let websites_token_count = 0
-    if (websites_provider && websites_view) {
+    if (websites_provider) {
       websites_token_count =
         websites_provider.get_checked_websites_token_count()
-      websites_view.badge = {
-        value: websites_token_count,
-        tooltip: websites_token_count
-          ? `About ${websites_token_count} tokens in context`
-          : ''
-      }
     }
     token_count_emitter.emit('token-count-updated')
 
@@ -76,8 +80,18 @@ export function context_initialization(context: vscode.ExtensionContext): {
     if (threshold && threshold > 0) {
       const is_above_threshold = total_token_count > threshold
       if (is_above_threshold && !was_above_threshold) {
+        const percentage_over = Math.round(
+          ((total_token_count - threshold) / threshold) * 100
+        )
+        const formatted_threshold =
+          threshold >= 1000
+            ? `${Math.round(threshold / 1000)}k`
+            : `${threshold}`
         vscode.window.showWarningMessage(
-          dictionary.warning_message.CONTEXT_SIZE_WARNING(threshold)
+          dictionary.warning_message.CONTEXT_SIZE_WARNING(
+            formatted_threshold,
+            percentage_over
+          )
         )
       }
       was_above_threshold = is_above_threshold