From a40f4eee716eb7955bf87ce8b52a164277a3e2f8 Mon Sep 17 00:00:00 2001
From: Philip Zeyliger <philip@bold.dev>
Date: Sat, 24 Jan 2026 23:20:26 +0000
Subject: [PATCH] shelley/ui: restore context usage bar CSS

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 <shelley@exe.dev>
---
 ui/src/styles.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/ui/src/styles.css b/ui/src/styles.css
index dacffa8cbdcb1418f14f66b3fb3b887ae3899d53..a7cd5838d271da280a6db45c16c14679a29a3f8f 100644
--- a/ui/src/styles.css
+++ b/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 */