|
| 1 | +# Context Size Donut and Popup |
| 2 | + |
| 3 | +## Overview |
| 4 | +Tests the context size donut chart widget and its hover popup in the GitHub Copilot |
| 5 | +for Eclipse chat view. A `ContextSizeDonut` widget is rendered in the chat view's |
| 6 | +`ActionBar` control bar. It displays a ring that fills proportionally based on the |
| 7 | +token utilization percentage received via the LSP `ContextSizeInfo` payload. At |
| 8 | +≥90 % utilization the ring switches to a warning color. Hovering over the donut |
| 9 | +opens a `ContextWindowPopup` that shows a breakdown of token usage by category. |
| 10 | + |
| 11 | +Entry points: |
| 12 | +- **Copilot Chat view** → bottom control bar (the donut appears after the first |
| 13 | + response is received that includes `ContextSizeInfo`). |
| 14 | +- Hover the donut to open the **Context Window** popup. |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## Prerequisites |
| 19 | + |
| 20 | +- Eclipse IDE with the GitHub Copilot for Eclipse plugin installed and activated. |
| 21 | +- A valid GitHub Copilot subscription is active (authentication completed). |
| 22 | +- The Copilot Chat view is open and visible in the workbench. |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +## 1. Donut Widget Visibility |
| 27 | + |
| 28 | +### TC-001: Donut appears after first response |
| 29 | + |
| 30 | +**Type:** `Happy Path` |
| 31 | +**Priority:** `P1` |
| 32 | + |
| 33 | +#### Preconditions |
| 34 | +- The Copilot Chat view is open. |
| 35 | +- No previous conversation is loaded (fresh session or new conversation). |
| 36 | + |
| 37 | +#### Steps |
| 38 | +1. Open the Copilot Chat view. |
| 39 | +2. Confirm the donut widget is **not** visible in the bottom control bar (no |
| 40 | + `ContextSizeInfo` has been received yet). |
| 41 | +3. Send a short chat message (e.g. "Hello") and wait for a response. |
| 42 | +4. Inspect the bottom control bar of the chat view. |
| 43 | + |
| 44 | +#### Expected Result |
| 45 | +- Before the first response the donut is not visible (or shows an empty/zero state). |
| 46 | +- After the first response arrives the donut widget appears in the control bar. |
| 47 | +- No error dialog or exception is logged. |
| 48 | + |
| 49 | +#### 📸 Key Screenshots |
| 50 | +- [ ] **Before response** — chat view control bar with no donut. |
| 51 | +- [ ] **After response** — chat view control bar showing the donut widget. |
| 52 | + |
| 53 | +--- |
| 54 | + |
| 55 | +## 2. Donut Fill Proportion |
| 56 | + |
| 57 | +### TC-002: Donut ring reflects token utilization |
| 58 | + |
| 59 | +**Type:** `Happy Path` |
| 60 | +**Priority:** `P1` |
| 61 | + |
| 62 | +#### Preconditions |
| 63 | +- A conversation exists with at least one response (donut is visible). |
| 64 | + |
| 65 | +#### Steps |
| 66 | +1. Send a short message; note the approximate fill level of the donut ring. |
| 67 | +2. Send a message that attaches a large file or pastes a long code block to |
| 68 | + increase context size; wait for the response. |
| 69 | +3. Compare the donut fill level after the larger-context response. |
| 70 | + |
| 71 | +#### Expected Result |
| 72 | +- The donut ring fill increases visibly when more tokens are consumed. |
| 73 | +- The fill level is proportional to the reported utilization percentage (0–100 %). |
| 74 | + |
| 75 | +#### 📸 Key Screenshots |
| 76 | +- [ ] **Low utilization** — donut with small fill. |
| 77 | +- [ ] **Higher utilization** — donut with larger fill. |
| 78 | + |
| 79 | +--- |
| 80 | + |
| 81 | +## 3. Context Window Popup |
| 82 | + |
| 83 | +### TC-003: Hovering the donut opens the Context Window popup |
| 84 | + |
| 85 | +**Type:** `Happy Path` |
| 86 | +**Priority:** `P1` |
| 87 | + |
| 88 | +#### Preconditions |
| 89 | +- The donut widget is visible (at least one response received). |
| 90 | + |
| 91 | +#### Steps |
| 92 | +1. Hover the mouse cursor over the donut widget in the control bar. |
| 93 | +2. Wait for the popup to appear. |
| 94 | +3. Inspect the popup header. |
| 95 | +4. Inspect the popup body for: total token count, utilization percentage, progress |
| 96 | + bar, and per-category rows. |
| 97 | +5. Move the mouse away from the donut. |
| 98 | + |
| 99 | +#### Expected Result |
| 100 | +- The popup opens with the header **"Context Window"**. |
| 101 | +- Total usage is displayed in the format `X / Y tokens`. |
| 102 | +- A utilization percentage is shown. |
| 103 | +- A progress bar reflects the utilization level. |
| 104 | +- Per-category rows are shown: **System Instructions**, **Tool Definitions**, |
| 105 | + **Messages**, **Attached Files**, **Tool Results**. |
| 106 | +- Moving the mouse away closes the popup. |
| 107 | + |
| 108 | +#### 📸 Key Screenshots |
| 109 | +- [ ] **Popup open** — the Context Window popup showing all fields. |
| 110 | + |
| 111 | +--- |
| 112 | + |
| 113 | +### TC-004: Popup shows non-zero Attached Files when a file is attached |
| 114 | + |
| 115 | +**Type:** `Happy Path` |
| 116 | +**Priority:** `P2` |
| 117 | + |
| 118 | +#### Preconditions |
| 119 | +- The chat view is open. |
| 120 | + |
| 121 | +#### Steps |
| 122 | +1. Send a message with at least one file attached as context. |
| 123 | +2. Wait for the response. |
| 124 | +3. Hover over the donut to open the popup. |
| 125 | +4. Locate the **Attached Files** row. |
| 126 | + |
| 127 | +#### Expected Result |
| 128 | +- The **Attached Files** row displays a non-zero token count. |
| 129 | + |
| 130 | +--- |
| 131 | + |
| 132 | +### TC-005: Popup shows non-zero Tool Definitions and Tool Results in agent mode |
| 133 | + |
| 134 | +**Type:** `Happy Path` |
| 135 | +**Priority:** `P2` |
| 136 | + |
| 137 | +#### Preconditions |
| 138 | +- Agent mode is enabled in the chat view. |
| 139 | + |
| 140 | +#### Steps |
| 141 | +1. Send a message that triggers at least one tool call in agent mode. |
| 142 | +2. Wait for the response. |
| 143 | +3. Hover over the donut to open the popup. |
| 144 | +4. Locate the **Tool Definitions** and **Tool Results** rows. |
| 145 | + |
| 146 | +#### Expected Result |
| 147 | +- **Tool Definitions** shows a non-zero token count. |
| 148 | +- **Tool Results** shows a non-zero token count. |
| 149 | + |
| 150 | +--- |
| 151 | + |
| 152 | +## 4. Warning Color at High Utilization |
| 153 | + |
| 154 | +### TC-006: Donut ring changes to warning color at ≥90 % utilization |
| 155 | + |
| 156 | +**Type:** `Happy Path` |
| 157 | +**Priority:** `P1` |
| 158 | + |
| 159 | +#### Preconditions |
| 160 | +- A way to produce or simulate ≥90 % token utilization (e.g. very large context, |
| 161 | + or by injecting a mock `ContextSizeInfo` value via a debug breakpoint). |
| 162 | + |
| 163 | +#### Steps |
| 164 | +1. Bring the token utilization to ≥90 % (send large context or inject mock data). |
| 165 | +2. Observe the donut ring color. |
| 166 | + |
| 167 | +#### Expected Result |
| 168 | +- Below 90 % the ring is rendered in the normal (non-warning) color. |
| 169 | +- At or above 90 % the ring switches to a warning/red color. |
| 170 | + |
| 171 | +#### 📸 Key Screenshots |
| 172 | +- [ ] **Warning state** — donut showing warning color at high utilization. |
| 173 | + |
| 174 | +--- |
| 175 | + |
| 176 | +## 5. Edge Cases |
| 177 | + |
| 178 | +### TC-007: Donut resets when a new conversation is started |
| 179 | + |
| 180 | +**Type:** `Edge Case` |
| 181 | +**Priority:** `P2` |
| 182 | + |
| 183 | +#### Steps |
| 184 | +1. Start a conversation and let the donut show some utilization. |
| 185 | +2. Start a new conversation (clear or new session). |
| 186 | +3. Observe the donut state before any new response. |
| 187 | + |
| 188 | +#### Expected Result |
| 189 | +- The donut resets (hidden or zero state) for the new conversation until a |
| 190 | + response with `ContextSizeInfo` is received. |
| 191 | + |
| 192 | +--- |
| 193 | + |
| 194 | +### TC-008: Chat view resized to narrow width |
| 195 | + |
| 196 | +**Type:** `Edge Case` |
| 197 | +**Priority:** `P2` |
| 198 | + |
| 199 | +#### Steps |
| 200 | +1. Make the chat view narrow by dragging its edge. |
| 201 | +2. Send a message and wait for the donut to appear. |
| 202 | +3. Hover over the donut to open the popup. |
| 203 | + |
| 204 | +#### Expected Result |
| 205 | +- The donut and control bar do not overflow or clip incorrectly. |
| 206 | +- The popup appears positioned near the donut without being cut off. |
| 207 | + |
| 208 | +--- |
| 209 | + |
| 210 | +### TC-009: Rapid message sending does not cause stale data |
| 211 | + |
| 212 | +**Type:** `Edge Case` |
| 213 | +**Priority:** `P2` |
| 214 | + |
| 215 | +#### Steps |
| 216 | +1. Send several messages in quick succession. |
| 217 | +2. After all responses arrive, hover over the donut. |
| 218 | + |
| 219 | +#### Expected Result |
| 220 | +- The donut and popup reflect the most recent `ContextSizeInfo` without |
| 221 | + stale data, race conditions, or visual glitches. |
0 commit comments