fix(control-ui): keep context usage fresh (#71297)

BunsDev · web-flow · commit da773175f2eb · 2026-04-25T01:20:12.000+01:00
Patch live session usage metadata into the Control UI session list, coalesce overlapping refreshes, and add a compact action when fresh context usage is high.

Keep session refresh loading separate from session mutation ownership so background refreshes cannot re-enable mutation UI or overwrite delete/restore state mid-flight.

Co-authored-by: Val Alexander &lt;68980965+BunsDev@users.noreply.github.com&gt;
diff --git a/docs/web/control-ui.md b/docs/web/control-ui.md
@@ -156,6 +156,10 @@ Cron jobs panel notes:
 - `chat.history` also strips display-only inline directive tags from visible assistant text (for example `[[reply_to_*]]` and `[[audio_as_voice]]`), plain-text tool-call XML payloads (including `<tool_call>...</tool_call>`, `<function_call>...</function_call>`, `<tool_calls>...</tool_calls>`, `<function_calls>...</function_calls>`, and truncated tool-call blocks), and leaked ASCII/full-width model control tokens, and omits assistant entries whose whole visible text is only the exact silent token `NO_REPLY` / `no_reply`.
 - `chat.inject` appends an assistant note to the session transcript and broadcasts a `chat` event for UI-only updates (no agent run, no channel delivery).
 - The chat header model and thinking pickers patch the active session immediately through `sessions.patch`; they are persistent session overrides, not one-turn-only send options.
+- When fresh Gateway session usage reports show high context pressure, the chat
+  composer area shows a context notice and, at recommended compaction levels, a
+  compact button that runs the normal session compaction path. Stale token
+  snapshots are hidden until the Gateway reports fresh usage again.
 - Talk mode uses a registered realtime voice provider that supports browser
   WebRTC sessions. Configure OpenAI with `talk.provider: "openai"` plus
   `talk.providers.openai.apiKey`, or reuse the Voice Call realtime provider
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
@@ -151,16 +151,19 @@
   align-self: center;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   gap: 8px;
   padding: 7px 14px;
   margin: 0 auto 8px;
+  max-width: calc(100% - 20px);
   border-radius: var(--radius-full);
   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;
+  white-space: normal;
   user-select: none;
   animation: fade-in 0.2s var(--ease-out);
 }
@@ -177,6 +180,52 @@
   font-variant-numeric: tabular-nums;
 }
 
+.context-notice__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: var(--radius-full);
+  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: currentColor;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background 150ms ease-out,
+    border-color 150ms ease-out,
+    opacity 150ms ease-out;
+}
+
+.context-notice__action:hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 18%, transparent);
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+
+.context-notice__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.context-notice__action svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.7px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.context-notice__action--busy svg {
+  animation: compaction-spin 1s linear infinite;
+}
+
 /* Chat compose - sticky at bottom */
 .chat-compose {
   position: sticky;
diff --git a/ui/src/ui/app-gateway.sessions.node.test.ts b/ui/src/ui/app-gateway.sessions.node.test.ts
@@ -42,6 +42,7 @@ vi.mock("./controllers/nodes.ts", () => ({
   loadNodes: vi.fn(),
 }));
 vi.mock("./controllers/sessions.ts", () => ({
+  applySessionsChangedEvent: vi.fn(),
   loadSessions: loadSessionsMock,
   subscribeSessions: vi.fn(),
 }));
diff --git a/ui/src/ui/app-gateway.ts b/ui/src/ui/app-gateway.ts
@@ -43,7 +43,12 @@ import {
 } from "./controllers/exec-approval.ts";
 import { loadHealthState, type HealthState } from "./controllers/health.ts";
 import { loadNodes, type NodesState } from "./controllers/nodes.ts";
-import { loadSessions, subscribeSessions, type SessionsState } from "./controllers/sessions.ts";
+import {
+  applySessionsChangedEvent,
+  loadSessions,
+  subscribeSessions,
+  type SessionsState,
+} from "./controllers/sessions.ts";
 import {
   resolveGatewayErrorDetailCode,
   type GatewayEventFrame,
@@ -482,6 +487,7 @@ function handleSessionMessageGatewayEvent(
   host: GatewayHost,
   payload: { sessionKey?: string } | undefined,
 ) {
+  applySessionsChangedEvent(host as unknown as SessionsState, payload);
   const deferredReloadHost = host as GatewayHostWithDeferredSessionMessageReload;
   const sessionKey = payload?.sessionKey?.trim();
   if (!sessionKey || sessionKey !== host.sessionKey) {
@@ -568,6 +574,7 @@ function handleGatewayEventUnsafe(host: GatewayHost, evt: GatewayEventFrame) {
   }
 
   if (evt.event === "sessions.changed") {
+    applySessionsChangedEvent(host as unknown as SessionsState, evt.payload);
     void loadSessions(host as unknown as SessionsState);
     return;
   }
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -7,7 +7,7 @@ import {
 } from "../../../src/routing/session-key.js";
 import { t } from "../i18n/index.ts";
 import { getSafeLocalStorage } from "../local-storage.ts";
-import { refreshChatAvatar } from "./app-chat.ts";
+import { refreshChat } from "./app-chat.ts";
 import { DEFAULT_CRON_FORM } from "./app-defaults.ts";
 import { renderUsageTab } from "./app-render-usage-tab.ts";
 import {
@@ -2242,7 +2242,7 @@ export function renderApp(state: AppViewState) {
               onRefresh: () => {
                 state.chatSideResult = null;
                 state.resetToolStream();
-                return Promise.all([loadChatHistory(state), refreshChatAvatar(state)]);
+                return refreshChat(state, { scheduleScroll: false });
               },
               onToggleFocusMode: () => {
                 if (state.onboarding) {
@@ -2260,6 +2260,7 @@ export function renderApp(state: AppViewState) {
               attachments: state.chatAttachments,
               onAttachmentsChange: (next) => (state.chatAttachments = next),
               onSend: () => state.handleSendChat(),
+              onCompact: () => state.handleSendChat("/compact", { restoreDraft: true }),
               onToggleRealtimeTalk: () => state.toggleRealtimeTalk(),
               canAbort: Boolean(state.chatRunId),
               onAbort: () => void state.handleAbortChat(),
diff --git a/ui/src/ui/chat/context-notice.test.ts b/ui/src/ui/chat/context-notice.test.ts
@@ -55,6 +55,7 @@ describe("context notice", () => {
 
     expect(container.textContent).toContain("95% context used");
     expect(container.textContent).toContain("190k / 200k");
+    expect(getContextNoticeViewModel(session, 200_000)?.compactRecommended).toBe(true);
     expect(container.textContent).not.toContain("757.3k / 200k");
     const notice = container.querySelector<HTMLElement>(".context-notice");
     expect(notice).not.toBeNull();
@@ -71,6 +72,12 @@ describe("context notice", () => {
     expect(icon?.getAttribute("height")).toBe("16");
     expect(icon?.querySelector("path")).not.toBeNull();
 
+    const onCompact = vi.fn();
+    render(renderContextNotice(session, 200_000, { onCompact }), container);
+    expect(container.textContent).toContain("Compact");
+    container.querySelector<HTMLButtonElement>(".context-notice__action")?.click();
+    expect(onCompact).toHaveBeenCalledTimes(1);
+
     expect(
       getContextNoticeViewModel(
         {
diff --git a/ui/src/ui/chat/context-notice.ts b/ui/src/ui/chat/context-notice.ts
@@ -1,6 +1,16 @@
 import { html, nothing } from "lit";
+import { icons } from "../icons.ts";
 import type { GatewaySessionRow } from "../types.ts";
 
+const CONTEXT_NOTICE_RATIO = 0.85;
+const CONTEXT_COMPACT_RATIO = 0.9;
+
+export type ContextNoticeOptions = {
+  compactBusy?: boolean;
+  compactDisabled?: boolean;
+  onCompact?: () => void | Promise<void>;
+};
+
 /** Parse a 6-digit CSS hex color string to [r, g, b] integer components. */
 function parseHexRgb(hex: string): [number, number, number] | null {
   const h = hex.trim().replace(/^#/, "");
@@ -49,6 +59,7 @@ export function getContextNoticeViewModel(
   detail: string;
   color: string;
   bg: string;
+  compactRecommended: boolean;
 } | null {
   if (session?.totalTokensFresh === false) {
     return null;
@@ -59,7 +70,7 @@ export function getContextNoticeViewModel(
     return null;
   }
   const ratio = used / limit;
-  if (ratio < 0.85) {
+  if (ratio < CONTEXT_NOTICE_RATIO) {
     return null;
   }
   const pct = Math.min(Math.round(ratio * 100), 100);
@@ -79,17 +90,21 @@ export function getContextNoticeViewModel(
     detail: `${formatTokensCompact(used)} / ${formatTokensCompact(limit)}`,
     color,
     bg,
+    compactRecommended: ratio >= CONTEXT_COMPACT_RATIO,
   };
 }
 
 export function renderContextNotice(
   session: GatewaySessionRow | undefined,
   defaultContextTokens: number | null,
+  options: ContextNoticeOptions = {},
 ) {
   const model = getContextNoticeViewModel(session, defaultContextTokens);
   if (!model) {
     return nothing;
   }
+  const canRenderCompact = model.compactRecommended && options.onCompact;
+  const compactDisabled = options.compactDisabled === true || options.compactBusy === true;
   return html`
     <div
       class="context-notice"
@@ -113,6 +128,30 @@ export function renderContextNotice(
       </svg>
       <span>${model.pct}% context used</span>
       <span class="context-notice__detail">${model.detail}</span>
+      ${canRenderCompact
+        ? html`
+            <button
+              class="context-notice__action ${options.compactBusy
+                ? "context-notice__action--busy"
+                : ""}"
+              type="button"
+              title="Compact session context"
+              aria-label="Compact recommended session context"
+              ?disabled=${compactDisabled}
+              @click=${(event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (compactDisabled) {
+                  return;
+                }
+                void options.onCompact?.();
+              }}
+            >
+              ${options.compactBusy ? icons.loader : icons.minimize}
+              <span>${options.compactBusy ? "Compacting" : "Compact"}</span>
+            </button>
+          `
+        : nothing}
     </div>
   `;
 }
diff --git a/ui/src/ui/controllers/sessions.test.ts b/ui/src/ui/controllers/sessions.test.ts
diff --git a/ui/src/ui/controllers/sessions.ts b/ui/src/ui/controllers/sessions.ts
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
