shelley/ui: restore context usage bar CSS

Philip Zeyliger and Shelley created 3 months ago

Prompt: Sometime in the last ~10 commits, the "usage bar" in the chat
window has broken/disappeared. That wasn't intentional. Figure it out and
restore it. Tell me what happened too.

The CSS for the context usage bar (.context-usage-bar-container,
.context-warning-icon, .context-usage-bar, .context-usage-fill) was
accidentally replaced with an unused .context-usage-indicator class
in commit 6c20eec2 (output_iframe changes).

This restores the original CSS so the context window usage bar is
visible again in the chat interface.

Co-authored-by: Shelley <[e-mail]>

Change summary

ui/src/styles.css | 32 +++++++++++++++++++++++++-------
1 file changed, 25 insertions(+), 7 deletions(-)

Detailed changes

ui/src/styles.css

@@ -3062,15 +3062,33 @@ svg {
   }
 }
 
-.context-usage-indicator {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
+.context-usage-bar-container {
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  gap: 4px;
+}
+
+.context-warning-icon {
+  font-size: 14px;
+  line-height: 1;
+  cursor: help;
+}
+
+.context-usage-bar {
+  width: 60px;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.context-usage-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition:
+    width 0.3s ease,
+    background-color 0.3s ease;
 }
 
 /* Mobile optimizations for tighter spacing */