Implement context utilization display logic and UI component to show token count relative to a configurable warning threshold

Author: robertpiosik

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -60,11 +60,7 @@
 
 .textarea {
   padding: var(--padding);
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
   background-color: transparent;
-  color: var(--vscode-input-foreground);
   border: none;
   resize: none;
   position: relative;
@@ -113,7 +109,7 @@
   display: flex;
   bottom: 0;
   right: 0;
-  padding: var(--padding-6px) var(--padding-8px) var(--padding-6px)
+  padding: var(--padding-6px) var(--padding-10px) var(--padding-6px)
     var(--padding-6px);
   justify-content: space-between;
   overflow: hidden;
@@ -150,7 +146,7 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    gap: var(--padding-8px);
+    gap: var(--padding-10px);
     pointer-events: none;
 
     &__edit-format {
@@ -199,7 +195,6 @@
       height: 20px;
       padding: 0 var(--padding-2px);
       border-radius: var(--border-radius-5px);
-      color: var(--vscode-foreground);
       pointer-events: all;
 
       > svg {

packages/ui/src/components/editor/panel/ContextUtilisation/ContextUtilisation.module.scss

@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-8px);
+  padding: 0 var(--padding-10px);
+  font-size: var(--font-size-11px);
+  color: var(--vscode-descriptionForeground);
+}
+
+.label {
+  white-space: nowrap;
+}
+
+.bar {
+  width: 100%;
+  height: 3px;
+  background-color: var(--vscode-dropdown-border);
+  border-radius: var(--border-radius-999px);
+  overflow: hidden;
+
+  &__progress {
+    height: 100%;
+    background-color: var(--vscode-focusBorder);
+    border-top-right-radius: var(--border-radius-999px);
+    border-bottom-right-radius: var(--border-radius-999px);
+
+    &--warning {
+      background-color: var(--vscode-editorWarning-foreground);
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import { ContextUtilisation } from './ContextUtilisation'
+
+export default {
+  component: ContextUtilisation
+}
+
+export const BelowThreshold = () => (
+  <ContextUtilisation
+    current_context_size={5000}
+    context_size_warning_treshold={100000}
+  />
+)
+
+export const AboveThreshold = () => (
+  <ContextUtilisation
+    current_context_size={120000}
+    context_size_warning_treshold={100000}
+  />
+)
+
+export const AtThreshold = () => (
+  <ContextUtilisation
+    current_context_size={100000}
+    context_size_warning_treshold={100000}
+  />
+)

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

@@ -0,0 +1,44 @@
+import { FC } from 'react'
+import styles from './ContextUtilisation.module.scss'
+import cn from 'classnames'
+
+type Props = {
+  current_context_size: number
+  context_size_warning_treshold: number
+}
+
+const format_number = (num: number): string => {
+  if (num < 1000) {
+    return num.toLocaleString()
+  }
+  return `${Math.floor(num / 1000)}k`
+}
+
+export const ContextUtilisation: FC<Props> = (props) => {
+  const { current_context_size, context_size_warning_treshold } = props
+  const is_above_threshold =
+    current_context_size > context_size_warning_treshold
+  const progress = Math.min(
+    (current_context_size / context_size_warning_treshold) * 100,
+    100
+  )
+
+  return (
+    <div className={styles.container}>
+      <span className={styles.label}>
+        {format_number(current_context_size)}
+      </span>
+      <div className={styles.bar}>
+        <div
+          className={cn(styles.bar__progress, {
+            [styles['bar__progress--warning']]: is_above_threshold
+          })}
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+      <span className={styles.label}>
+        {format_number(context_size_warning_treshold)}
+      </span>
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/ContextUtilisation/index.ts

@@ -0,0 +1 @@
+export * from './ContextUtilisation'

packages/ui/src/styles/global.scss

@@ -11,6 +11,7 @@
 body {
   padding: 0;
   font-size: var(--font-size-13px);
+  color: var(--vscode-foreground);
   user-select: none;
   line-height: 1.4;
 }
@@ -25,6 +26,13 @@ button {
   line-height: inherit;
 }
 
+textarea {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
 button:not(:disabled) {
   cursor: pointer;
 }

packages/vscode/package.json

@@ -537,6 +537,11 @@
           "description": "The instructions used when generating a commit message.",
           "default": "Write a brief and precise summary for the changes, limited to a single sentence if possible and nothing else. Use an imperative tone to ensure clarity and focus on the primary change or purpose."
         },
+        "codeWebChat.contextSizeWarningThreshold": {
+          "type": "number",
+          "default": 60000,
+          "description": "Threshold for the context size to show a warning."
+        },
         "codeWebChat.ignorePatterns": {
           "type": "array",
           "description": "List of glob patterns to ignore files and folders in the context.",

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -191,6 +191,12 @@ export class ViewProvider implements vscode.WebviewViewProvider {
           handle_get_edit_format_instructions(this)
         }
 
+        if (
+          event.affectsConfiguration('codeWebChat.contextSizeWarningThreshold')
+        ) {
+          this.send_context_size_warning_threshold()
+        }
+
         const all_api_config_keys = [
           'codeWebChat.configurationsForEditContext',
           'codeWebChat.configurationsForCodeCompletions'
@@ -500,6 +506,7 @@ export class ViewProvider implements vscode.WebviewViewProvider {
     )
 
     this.send_presets_to_webview(webview_view.webview)
+    this.send_context_size_warning_threshold()
     // We need to wait until the webview fully initialized
     setTimeout(() => {
       this.send_message({
@@ -683,6 +690,16 @@ export class ViewProvider implements vscode.WebviewViewProvider {
     })
   }
 
+  public send_context_size_warning_threshold() {
+    if (!this._webview_view) return
+    const config = vscode.workspace.getConfiguration('codeWebChat')
+    const threshold = config.get<number>('contextSizeWarningThreshold', 60000)
+    this.send_message({
+      command: 'CONTEXT_SIZE_WARNING_THRESHOLD',
+      threshold
+    })
+  }
+
   private _send_git_state() {
     try {
       const git_extension =

packages/vscode/src/views/panel/frontend/Main/Main.tsx

@@ -51,6 +51,7 @@ type Props = {
   chat_input_focus_and_select_key: number
   chat_input_focus_key: number
   commit_button_enabling_trigger_count: number
+  context_size_warning_threshold: number
 }
 
 export const Main: React.FC<Props> = (props) => {
@@ -655,6 +656,7 @@ export const Main: React.FC<Props> = (props) => {
       token_count={token_count}
       web_mode={props.web_mode}
       api_mode={props.api_mode}
+      context_size_warning_threshold={props.context_size_warning_threshold}
       on_web_mode_change={props.on_web_mode_change}
       on_api_mode_change={props.on_api_mode_change}
       chat_edit_format={chat_edit_format}

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.module.scss

@@ -226,7 +226,10 @@
   }
 }
 
-.chat-input {
+.chat-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-6px);
   margin: 0 var(--padding-12px);
 }