From 4c77c3a7bbbff1fe92115fc8f96228e23c92be40 Mon Sep 17 00:00:00 2001
From: Val Alexander <68980965+BunsDev@users.noreply.github.com>
Date: Fri, 13 Mar 2026 18:51:06 -0500
Subject: [PATCH] UI: fix chat context notice icon sizing (#45533)

* UI: fix chat context notice icon sizing

* Update ui/src/ui/views/chat.browser.test.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* UI: tighten chat context notice regression test

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 ui/src/styles/chat/layout.css        | 31 +++++++++++
 ui/src/ui/views/chat.browser.test.ts | 82 ++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 ui/src/ui/views/chat.browser.test.ts

diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index f0e0154329d..8b92c051fc1 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -146,6 +146,37 @@
   flex-shrink: 0;
 }
 
+/* Context usage warning pill */
+.context-notice {
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 14px;
+  margin: 0 auto 8px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ctx-color, #d97706) 35%, transparent);
+  background: var(--ctx-bg, rgba(217, 119, 6, 0.12));
+  color: var(--ctx-color, #d97706);
+  font-size: 13px;
+  line-height: 1.2;
+  white-space: nowrap;
+  user-select: none;
+  animation: fade-in 0.2s var(--ease-out);
+}
+
+.context-notice__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  stroke: currentColor;
+}
+
+.context-notice__detail {
+  color: color-mix(in srgb, currentColor 72%, var(--muted));
+  font-variant-numeric: tabular-nums;
+}
+
 /* Chat compose - sticky at bottom */
 .chat-compose {
   position: sticky;
diff --git a/ui/src/ui/views/chat.browser.test.ts b/ui/src/ui/views/chat.browser.test.ts
new file mode 100644
index 00000000000..be2b5ab277e
--- /dev/null
+++ b/ui/src/ui/views/chat.browser.test.ts
@@ -0,0 +1,82 @@
+import { render } from "lit";
+import { afterEach, describe, expect, it } from "vitest";
+import "../../styles.css";
+import { renderChat, type ChatProps } from "./chat.ts";
+
+function createProps(overrides: Partial<ChatProps> = {}): ChatProps {
+  return {
+    sessionKey: "main",
+    onSessionKeyChange: () => undefined,
+    thinkingLevel: null,
+    showThinking: false,
+    loading: false,
+    sending: false,
+    canAbort: false,
+    compactionStatus: null,
+    fallbackStatus: null,
+    messages: [],
+    toolMessages: [],
+    streamSegments: [],
+    stream: null,
+    streamStartedAt: null,
+    assistantAvatarUrl: null,
+    draft: "",
+    queue: [],
+    connected: true,
+    canSend: true,
+    disabledReason: null,
+    error: null,
+    sessions: {
+      ts: 0,
+      path: "",
+      count: 1,
+      defaults: { model: "gpt-5", contextTokens: null },
+      sessions: [
+        {
+          key: "main",
+          kind: "direct",
+          updatedAt: null,
+          inputTokens: 3_800,
+          contextTokens: 4_000,
+        },
+      ],
+    },
+    focusMode: false,
+    assistantName: "OpenClaw",
+    assistantAvatar: null,
+    onRefresh: () => undefined,
+    onToggleFocusMode: () => undefined,
+    onDraftChange: () => undefined,
+    onSend: () => undefined,
+    onQueueRemove: () => undefined,
+    onNewSession: () => undefined,
+    agentsList: null,
+    currentAgentId: "",
+    onAgentChange: () => undefined,
+    ...overrides,
+  };
+}
+
+describe("chat context notice", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("keeps the warning icon badge-sized", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    render(renderChat(createProps()), container);
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+    const icon = container.querySelector<SVGElement>(".context-notice__icon");
+    expect(icon).not.toBeNull();
+    if (!icon) {
+      return;
+    }
+
+    const iconStyle = getComputedStyle(icon);
+    expect(iconStyle.width).toBe("16px");
+    expect(iconStyle.height).toBe("16px");
+    expect(icon.getBoundingClientRect().width).toBeLessThan(24);
+  });
+});