feat: [New billing] Add CopilotUsageBar & ContextWindowBar for visualizing token usage (#1623)

Author: ethanyhou

com.microsoft.copilot.eclipse.ui/src/com/microsoft/copilot/eclipse/ui/chat/contextwindow/ContextWindowPopup.java

@@ -20,6 +20,7 @@
 
 import com.microsoft.copilot.eclipse.core.lsp.protocol.ContextSizeInfo;
 import com.microsoft.copilot.eclipse.ui.i18n.Messages;
+import com.microsoft.copilot.eclipse.ui.swt.ContextWindowBar;
 import com.microsoft.copilot.eclipse.ui.swt.CssConstants;
 import com.microsoft.copilot.eclipse.ui.utils.UiUtils;
 
@@ -38,8 +39,6 @@ class ContextWindowPopup {
   private static final int BORDER_ARC = 8;
   private static final int H_MARGIN = 8;
   private static final int V_MARGIN = 8;
-  private static final int PROGRESS_BAR_HEIGHT = 4;
-  private static final int PROGRESS_BAR_ARC = 4;
   private static final int POLL_INTERVAL_MS = 100;
 
   private Shell shell;
@@ -51,7 +50,7 @@ class ContextWindowPopup {
   // Updatable labels
   private Label tokenUsageLabel;
   private Label percentageLabel;
-  private Composite progressBar;
+  private ContextWindowBar progressBar;
   private Label systemInstructionsValue;
   private Label toolDefinitionsValue;
   private Label messagesValue;
@@ -77,7 +76,6 @@ public void open(Control anchor) {
 
     Shell parentShell = anchor.getShell();
     shell = new Shell(parentShell, SWT.NO_TRIM | SWT.ON_TOP);
-    applyCssId(shell, DROPDOWN_POPUP_CSS_ID);
 
     GridLayout shellLayout = new GridLayout(1, false);
     shellLayout.marginWidth = H_MARGIN;
@@ -86,6 +84,7 @@ public void open(Control anchor) {
     shell.setLayout(shellLayout);
 
     buildContent(shell, info);
+    applyCssId(shell, DROPDOWN_POPUP_CSS_ID);
     addBorder(shell);
 
     shell.pack();
@@ -187,7 +186,9 @@ private void buildContent(Composite parent, ContextSizeInfo info) {
     percentageLabel = createSecondaryTextLabel(tokenRow, formatPercentage(info.utilizationPercentage()));
     percentageLabel.setLayoutData(new GridData(SWT.RIGHT, SWT.NONE, false, false));
 
-    progressBar = createProgressBar(parent);
+    progressBar = new ContextWindowBar(parent, SWT.NONE);
+    progressBar.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false));
+    progressBar.setPercentage((int) Math.round(info.utilizationPercentage()));
 
     addSeparator(parent, SECTION_SPACING);
 
@@ -221,7 +222,7 @@ private void updateLabels(ContextSizeInfo info) {
     setLabelText(attachedFilesValue, percentageOf(info.attachedFilesTokens(), info.totalTokenLimit()));
     setLabelText(toolResultsValue, percentageOf(info.toolResultsTokens(), info.totalTokenLimit()));
     if (progressBar != null && !progressBar.isDisposed()) {
-      progressBar.redraw();
+      progressBar.setPercentage((int) Math.round(info.utilizationPercentage()));
     }
     shell.requestLayout();
   }
@@ -276,33 +277,6 @@ private Label addKeyValueRow(Composite parent, String key, String value) {
     return valueLabel;
   }
 
-  private Composite createProgressBar(Composite parent) {
-    Composite bar = new Composite(parent, SWT.NONE);
-    applyCssId(bar, DROPDOWN_POPUP_CSS_ID);
-    GridData pbGd = new GridData(SWT.FILL, SWT.CENTER, true, false);
-    pbGd.heightHint = PROGRESS_BAR_HEIGHT;
-    bar.setLayoutData(pbGd);
-    Display display = parent.getDisplay();
-    bar.addPaintListener(e -> {
-      ContextSizeInfo state = contextWindowService.getState();
-      if (state == null) {
-        return;
-      }
-      Rectangle r = bar.getClientArea();
-      Color restColor = CssConstants.getDonutTrackColor(display);
-      e.gc.setAntialias(SWT.ON);
-      e.gc.setBackground(restColor);
-      e.gc.fillRoundRectangle(0, 0, r.width, r.height, PROGRESS_BAR_ARC, PROGRESS_BAR_ARC);
-      int fill = (int) (r.width * Math.min(state.utilizationPercentage(), 100) / 100.0);
-      if (fill > 0) {
-        Color usedColor = CssConstants.getDonutFilledColor(display);
-        e.gc.setBackground(usedColor);
-        e.gc.fillRoundRectangle(0, 0, fill, r.height, PROGRESS_BAR_ARC, PROGRESS_BAR_ARC);
-      }
-    });
-    return bar;
-  }
-
   private Label createSecondaryTextLabel(Composite parent, String text) {
     Label label = new Label(parent, SWT.NONE);
     label.setText(text);

com.microsoft.copilot.eclipse.ui/src/com/microsoft/copilot/eclipse/ui/swt/AbstractUsageBar.java

@@ -0,0 +1,102 @@
+package com.microsoft.copilot.eclipse.ui.swt;
+
+import org.eclipse.swt.SWT;
+import org.eclipse.swt.events.PaintEvent;
+import org.eclipse.swt.graphics.Color;
+import org.eclipse.swt.graphics.GC;
+import org.eclipse.swt.graphics.Rectangle;
+import org.eclipse.swt.layout.GridData;
+import org.eclipse.swt.layout.GridLayout;
+import org.eclipse.swt.widgets.Canvas;
+import org.eclipse.swt.widgets.Composite;
+
+/**
+ * Abstract base for color-coded usage bars. Subclasses provide colors and threshold logic via {@link #getTrackColor()}
+ * and {@link #getFillColor()}.
+ *
+ * <p>The bar renders a filled portion (left) over a track background (right), both with rounded
+ * ends.
+ */
+public abstract class AbstractUsageBar extends Composite {
+
+  private static final int BAR_HEIGHT = 4;
+
+  private int percentage;
+  private Canvas barCanvas;
+
+  /**
+   * Creates a new usage bar.
+   *
+   * @param parent the parent composite
+   * @param style the SWT style bits
+   */
+  protected AbstractUsageBar(Composite parent, int style) {
+    super(parent, style);
+    this.percentage = 0;
+    createControls();
+  }
+
+  private void createControls() {
+    GridLayout layout = new GridLayout(1, false);
+    layout.marginWidth = 0;
+    layout.marginHeight = 0;
+    setLayout(layout);
+
+    barCanvas = new Canvas(this, SWT.DOUBLE_BUFFERED);
+    GridData barGd = new GridData(SWT.FILL, SWT.NONE, true, false);
+    barGd.heightHint = BAR_HEIGHT;
+    barCanvas.setLayoutData(barGd);
+    barCanvas.addPaintListener(this::paintBar);
+  }
+
+  /**
+   * Sets the percentage value (0–100) and redraws the bar.
+   *
+   * @param percentage the percentage used, clamped to [0, 100]
+   */
+  public void setPercentage(int percentage) {
+    this.percentage = Math.max(0, Math.min(100, percentage));
+    barCanvas.redraw();
+  }
+
+  /**
+   * Returns the current percentage value.
+   */
+  protected int getPercentage() {
+    return percentage;
+  }
+
+  /**
+   * Returns the background track color for the unused portion of the bar.
+   */
+  protected abstract Color getTrackColor();
+
+  /**
+   * Returns the fill color for the used portion of the bar based on the current percentage.
+   */
+  protected abstract Color getFillColor();
+
+  private void paintBar(PaintEvent e) {
+    GC gc = e.gc;
+    gc.setAdvanced(true);
+    gc.setAntialias(SWT.ON);
+
+    Rectangle bounds = barCanvas.getClientArea();
+    int width = bounds.width;
+    int height = bounds.height;
+    int arc = height;
+
+    // Draw remaining background
+    gc.setBackground(getTrackColor());
+    gc.fillRoundRectangle(0, 0, width, height, arc, arc);
+
+    // Draw filled portion
+    if (percentage > 0) {
+      int fillWidth = (int) Math.round(width * percentage / 100.0);
+      fillWidth = Math.max(arc, Math.min(fillWidth, width));
+
+      gc.setBackground(getFillColor());
+      gc.fillRoundRectangle(0, 0, fillWidth, height, arc, arc);
+    }
+  }
+}

com.microsoft.copilot.eclipse.ui/src/com/microsoft/copilot/eclipse/ui/swt/ContextWindowBar.java

@@ -0,0 +1,48 @@
+package com.microsoft.copilot.eclipse.ui.swt;
+
+import org.eclipse.swt.graphics.Color;
+import org.eclipse.swt.widgets.Composite;
+
+/**
+ * A usage bar colored to match the {@link com.microsoft.copilot.eclipse.ui.chat.contextwindow.ContextSizeDonut} color
+ * scheme:
+ * <ul>
+ * <li>Filled color when percentage &lt; 90%</li>
+ * <li>Warning color when percentage &ge; 90%</li>
+ * </ul>
+ * The unused portion is rendered using the donut track color.
+ */
+public class ContextWindowBar extends AbstractUsageBar {
+
+  private static final int THRESHOLD_WARNING = 90;
+
+  private Color colorFilled;
+  private Color colorWarning;
+  private Color colorTrack;
+
+  /**
+   * Creates a new ContextWindowBar.
+   *
+   * @param parent the parent composite
+   * @param style the SWT style bits
+   */
+  public ContextWindowBar(Composite parent, int style) {
+    super(parent, style);
+    colorFilled = CssConstants.getDonutFilledColor(getDisplay());
+    colorWarning = CssConstants.getDonutWarningColor(getDisplay());
+    colorTrack = CssConstants.getDonutTrackColor(getDisplay());
+  }
+
+  @Override
+  protected Color getTrackColor() {
+    return colorTrack;
+  }
+
+  @Override
+  protected Color getFillColor() {
+    if (getPercentage() >= THRESHOLD_WARNING) {
+      return colorWarning;
+    }
+    return colorFilled;
+  }
+}

com.microsoft.copilot.eclipse.ui/src/com/microsoft/copilot/eclipse/ui/swt/CopilotUsageBar.java

@@ -0,0 +1,53 @@
+package com.microsoft.copilot.eclipse.ui.swt;
+
+import org.eclipse.swt.graphics.Color;
+import org.eclipse.swt.widgets.Composite;
+
+/**
+ * A usage bar colored for Copilot quota display:
+ * <ul>
+ * <li>Blue (#3574F0) when percentage &lt; 75%</li>
+ * <li>Yellow (#FFB824) when 75% &le; percentage &lt; 90%</li>
+ * <li>Red (#E05151) when percentage &ge; 90%</li>
+ * </ul>
+ * The unused portion is rendered in gray (#DFE1E5).
+ */
+public class CopilotUsageBar extends AbstractUsageBar {
+
+  private static final int THRESHOLD_WARNING = 75;
+  private static final int THRESHOLD_CRITICAL = 90;
+
+  private Color colorActive;
+  private Color colorApproaching;
+  private Color colorExhausted;
+  private Color colorRemaining;
+
+  /**
+   * Creates a new CopilotUsageBar.
+   *
+   * @param parent the parent composite
+   * @param style the SWT style bits
+   */
+  public CopilotUsageBar(Composite parent, int style) {
+    super(parent, style);
+    colorActive = CssConstants.getUsageBarActiveColor(getDisplay());
+    colorApproaching = CssConstants.getUsageBarApproachingColor(getDisplay());
+    colorExhausted = CssConstants.getUsageBarExhaustedColor(getDisplay());
+    colorRemaining = CssConstants.getUsageBarRemainingColor(getDisplay());
+  }
+
+  @Override
+  protected Color getTrackColor() {
+    return colorRemaining;
+  }
+
+  @Override
+  protected Color getFillColor() {
+    if (getPercentage() >= THRESHOLD_CRITICAL) {
+      return colorExhausted;
+    } else if (getPercentage() >= THRESHOLD_WARNING) {
+      return colorApproaching;
+    }
+    return colorActive;
+  }
+}

com.microsoft.copilot.eclipse.ui/src/com/microsoft/copilot/eclipse/ui/swt/CssConstants.java

@@ -185,4 +185,32 @@ public static Color getDonutTrackColor(Display display) {
     return new Color(display, 223, 225, 229); // #DFE1E5
   }
 
+  /**
+   * Returns the active (blue) fill color for the usage bar.
+   */
+  public static Color getUsageBarActiveColor(Display display) {
+    return new Color(display, 53, 116, 240);
+  }
+
+  /**
+   * Returns the approaching (yellow) fill color for the usage bar.
+   */
+  public static Color getUsageBarApproachingColor(Display display) {
+    return new Color(display, 255, 184, 36);
+  }
+
+  /**
+   * Returns the exhausted (red) fill color for the usage bar.
+   */
+  public static Color getUsageBarExhaustedColor(Display display) {
+    return new Color(display, 224, 81, 81);
+  }
+
+  /**
+   * Returns the remaining (gray) track color for the usage bar.
+   */
+  public static Color getUsageBarRemainingColor(Display display) {
+    return new Color(display, 223, 225, 229);
+  }
+
 }