fix: simplify chat session search

steipete · steipete · commit 7e16a50c7eac · 2026-05-22T22:54:21.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,7 +48,7 @@ Docs: https://docs.openclaw.ai
 - Diffs: continue hydrating later diff cards when one card fails so a single broken card no longer blanks the whole diff viewer. (#84775) Thanks @cosmopolitan033.
 - Mac app: use the native settings sidebar window chrome so the sidebar toggle stays on the left and content no longer clips under oversized titlebar padding.
 - Gateway/agents: preserve fresh session overrides and metadata when stale cached agent-session entries race with store updates, so subagent model/provider overrides and routing policy survive concurrent writes. (#19328) Thanks @CodeReclaimers.
-- Control UI/chat: keep chat session search inline with the session selector so the header no longer shows a duplicate standalone search row.
+- Control UI/chat: keep chat session search always inline with the session selector, remove the extra search/clear icon buttons, and keep picker chevrons/checkmarks visible in dark mode.
 - Codex app-server: restart the native app-server and retry once when server-side compaction times out, so preflight compaction stalls recover instead of failing every dispatch. (#85500)
 - Restore Control UI gateway token pairing [AI]. (#85459) Thanks @pgondhi987.
 - CLI/update: repair managed npm plugin `openclaw` peer links during post-core convergence and reject stale or wrong-target peer links before restart. (#83794) Thanks @fuller-stack-dev.
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
@@ -1450,19 +1450,13 @@
 .chat-controls__session-trigger-icon svg {
   width: 16px;
   height: 16px;
-}
-
-.chat-controls__session-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: auto;
-  min-width: 0;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.5px;
 }
 
 .chat-controls__session-search {
   position: relative;
-  flex: 1 1 220px;
   min-width: 160px;
   max-width: none;
 }
@@ -1501,8 +1495,8 @@
   stroke-linejoin: round;
 }
 
-.chat-controls__session-search-toggle {
-  flex: 0 0 auto;
+.chat-controls__session-actions {
+  min-width: 0;
 }
 
 .chat-session-picker {
@@ -1523,20 +1517,6 @@
   overflow: hidden;
 }
 
-.chat-session-picker .chat-session-picker__icon-button.btn--icon {
-  flex: 0 0 36px;
-  width: 36px;
-  min-width: 36px;
-  height: 36px;
-  padding: 0;
-  border-radius: var(--radius-md);
-}
-
-.chat-session-picker .chat-session-picker__icon-button.btn--icon svg {
-  width: 16px;
-  height: 16px;
-}
-
 .chat-session-picker__list {
   display: flex;
   flex-direction: column;
@@ -1608,6 +1588,9 @@
 .chat-session-picker__option-check svg {
   width: 16px;
   height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.5px;
 }
 
 .chat-session-picker__status {
diff --git a/ui/src/styles/chat/layout.test.ts b/ui/src/styles/chat/layout.test.ts
@@ -58,13 +58,15 @@ describe("chat layout styles", () => {
     expect(css).toContain("height: 22px;");
   });
 
-  it("keeps chat session picker search icon buttons fixed size", () => {
+  it("keeps chat session picker glyphs color-aware", () => {
     const css = readLayoutCss();
 
-    expect(css).toContain(".chat-session-picker .chat-session-picker__icon-button.btn--icon {");
-    expect(css).toContain("flex: 0 0 36px;");
-    expect(css).toContain("width: 36px;");
-    expect(css).toContain("min-width: 36px;");
+    expect(css).toMatch(
+      /\.chat-controls__session-trigger-icon svg \{[\s\S]*stroke: currentColor;[\s\S]*fill: none;/,
+    );
+    expect(css).toMatch(
+      /\.chat-session-picker__option-check svg \{[\s\S]*stroke: currentColor;[\s\S]*fill: none;/,
+    );
   });
 
   it("keeps composer controls labeled and large enough without shrinking mobile taps", () => {
diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css
@@ -546,17 +546,6 @@
     padding-left: 42px;
   }
 
-  .chat-mobile-controls-wrapper
-    .chat-controls-dropdown
-    .chat-session-picker
-    .chat-session-picker__icon-button.btn--icon {
-    flex: 0 0 44px;
-    width: 44px;
-    min-width: 44px;
-    height: 44px;
-    padding: 0;
-  }
-
   .chat-mobile-controls-wrapper .chat-controls-dropdown .chat-controls__model {
     grid-area: model;
   }
diff --git a/ui/src/styles/layout.mobile.test.ts b/ui/src/styles/layout.mobile.test.ts
@@ -47,13 +47,13 @@ describe("chat header responsive mobile styles", () => {
     expect(css).toContain("height: 44px;");
   });
 
-  it("keeps chat session picker search icons from stretching in mobile controls", () => {
+  it("keeps chat session picker search aligned in mobile controls", () => {
     const css = readMobileCss();
 
-    expect(css).toContain(".chat-session-picker__icon-button.btn--icon {");
-    expect(css).toContain("flex: 0 0 44px;");
-    expect(css).toContain("width: 44px;");
-    expect(css).toContain("min-width: 44px;");
+    expect(css).toContain(".chat-controls__session-row--session-search-open");
+    expect(css).toContain("grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr);");
+    expect(css).toContain(".chat-controls__session-search input");
+    expect(css).toContain("padding-left: 42px;");
   });
 });
 
diff --git a/ui/src/ui/app-view-state.ts b/ui/src/ui/app-view-state.ts
@@ -115,7 +115,6 @@ export type AppViewState = {
   chatModelCatalog: ModelCatalogEntry[];
   sessionSwitchNotice: { id: number; text: string } | null;
   sessionSwitchFlashKey: string | null;
-  chatSessionSearchOpen: boolean;
   chatSessionPickerOpen: boolean;
   chatSessionPickerSurface: "desktop" | "mobile" | null;
   chatSessionPickerQuery: string;
diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts
@@ -234,7 +234,6 @@ export class OpenClawApp extends LitElement {
   @state() chatModelCatalog: ModelCatalogEntry[] = [];
   @state() sessionSwitchNotice: { id: number; text: string } | null = null;
   @state() sessionSwitchFlashKey: string | null = null;
-  @state() chatSessionSearchOpen = false;
   @state() chatSessionPickerOpen = false;
   @state() chatSessionPickerSurface: "desktop" | "mobile" | null = null;
   @state() chatSessionPickerQuery = "";
diff --git a/ui/src/ui/chat/session-controls.ts b/ui/src/ui/chat/session-controls.ts
@@ -54,17 +54,13 @@ export function renderChatSessionSelect(
   const surface = options.surface ?? "desktop";
   const selectedSessionLabel = resolveSelectedChatSessionLabel(state, sessionGroups);
   const pickerOpen = state.chatSessionPickerOpen && state.chatSessionPickerSurface === surface;
-  const sessionSearchVisible =
-    state.chatSessionSearchOpen ||
-    (state.chatSessionPickerQuery ?? "").trim() !== "" ||
-    (state.chatSessionPickerAppliedQuery ?? "").trim() !== "";
   const flashSession = state.sessionSwitchFlashKey === state.sessionKey;
   const rowClass = [
     "chat-controls__session-row",
     hasAgentSelect ? "" : "chat-controls__session-row--single-agent",
     quotaPill ? "chat-controls__session-row--has-quota" : "",
     flashSession ? "chat-controls__session-row--flash" : "",
-    sessionSearchVisible ? "chat-controls__session-row--session-search-open" : "",
+    "chat-controls__session-row--session-search-open",
   ]
     .filter(Boolean)
     .join(" ");
@@ -140,11 +136,6 @@ function closeChatSessionPicker(state: AppViewState) {
   requestHostUpdate(state);
 }
 
-function openChatSessionSearch(state: AppViewState, surface: ChatSessionSelectSurface) {
-  state.chatSessionSearchOpen = true;
-  openChatSessionPicker(state, surface);
-}
-
 function toggleChatSessionPicker(state: AppViewState, surface: ChatSessionSelectSurface) {
   if (state.chatSessionPickerOpen && state.chatSessionPickerSurface === surface) {
     closeChatSessionPicker(state);
@@ -258,7 +249,6 @@ async function applyChatSessionPickerSearch(state: AppViewState) {
 }
 
 function clearChatSessionPickerSearch(state: AppViewState) {
-  state.chatSessionSearchOpen = false;
   state.chatSessionPickerQuery = "";
   state.chatSessionPickerAppliedQuery = "";
   state.chatSessionPickerError = null;
@@ -369,28 +359,7 @@ function renderChatSessionPickerSearchControls(
   state: AppViewState,
   surface: ChatSessionSelectSurface,
 ) {
-  const hasQuery =
-    (state.chatSessionPickerQuery ?? "").trim() !== "" ||
-    (state.chatSessionPickerAppliedQuery ?? "").trim() !== "";
-  const searchVisible = state.chatSessionSearchOpen || hasQuery;
   const disabled = !state.connected || !state.client || state.chatSessionPickerLoading;
-  if (!searchVisible) {
-    return html`
-      <div class="chat-controls__session-actions">
-        <button
-          class="btn btn--ghost btn--icon chat-controls__session-search-toggle"
-          data-chat-session-search-toggle="true"
-          type="button"
-          title=${t("chat.selectors.sessionSearch")}
-          aria-label=${t("chat.selectors.sessionSearch")}
-          ?disabled=${disabled}
-          @click=${() => openChatSessionSearch(state, surface)}
-        >
-          ${icons.search}
-        </button>
-      </div>
-    `;
-  }
   return html`
     <div class="chat-controls__session-actions">
       <label class="field chat-controls__session-search">
@@ -403,12 +372,14 @@ function renderChatSessionPickerSearchControls(
           aria-label=${t("chat.selectors.sessionSearch")}
           .value=${state.chatSessionPickerQuery ?? ""}
           ?disabled=${disabled}
+          @focus=${() => openChatSessionPicker(state, surface)}
           @input=${(event: Event) => {
             state.chatSessionPickerQuery = (event.target as HTMLInputElement).value;
           }}
           @keydown=${(event: KeyboardEvent) => {
             if (event.key === "Enter") {
               event.preventDefault();
+              openChatSessionPicker(state, surface);
               void applyChatSessionPickerSearch(state);
             } else if (event.key === "Escape") {
               event.preventDefault();
@@ -418,28 +389,6 @@ function renderChatSessionPickerSearchControls(
           }}
         />
       </label>
-      <button
-        class="btn btn--ghost btn--icon"
-        data-chat-session-search-submit="true"
-        type="button"
-        title=${t("common.search")}
-        aria-label=${t("common.search")}
-        ?disabled=${disabled}
-        @click=${() => void applyChatSessionPickerSearch(state)}
-      >
-        ${icons.search}
-      </button>
-      <button
-        class="btn btn--ghost btn--icon"
-        data-chat-session-search-clear="true"
-        type="button"
-        title=${t("chat.selectors.clearSessionSearch")}
-        aria-label=${t("chat.selectors.clearSessionSearch")}
-        ?disabled=${disabled}
-        @click=${() => clearChatSessionPickerSearch(state)}
-      >
-        ${icons.x}
-      </button>
     </div>
   `;
 }
diff --git a/ui/src/ui/e2e/chat-picker-pagination.e2e.test.ts b/ui/src/ui/e2e/chat-picker-pagination.e2e.test.ts
@@ -154,7 +154,6 @@ describeControlUiE2e("Control UI chat picker mocked Gateway E2E", () => {
     try {
       await page.goto(`${server.baseUrl}chat`);
       await page.getByRole("button", { name: "Chat session" }).click();
-      await page.locator('[data-chat-session-search-toggle="true"]').last().click();
 
       const searchInput = page.locator('[data-chat-session-picker-search="true"]').last();
       await searchInput.waitFor({ state: "visible", timeout: 10_000 });
@@ -174,7 +173,7 @@ describeControlUiE2e("Control UI chat picker mocked Gateway E2E", () => {
       await page.getByRole("option", { name: /Alpha planning/u }).waitFor({ timeout: 10_000 });
 
       await searchInput.fill(" telegram ");
-      await page.locator('[data-chat-session-search-submit="true"]').last().click();
+      await searchInput.press("Enter");
 
       const searchRequest = await waitForSessionsRequest(
         gateway,
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
@@ -1310,24 +1310,15 @@ describe("chat session controls", () => {
     const container = document.createElement("div");
     render(renderChatSessionSelect(state), container);
 
-    expect(container.querySelector('input[data-chat-session-picker-search="true"]')).toBeNull();
-    container
-      .querySelector<HTMLButtonElement>('button[data-chat-session-search-toggle="true"]')!
-      .click();
-    render(renderChatSessionSelect(state), container);
     const input = container.querySelector<HTMLInputElement>(
       'input[data-chat-session-picker-search="true"]',
     );
-    const submit = container.querySelector<HTMLButtonElement>(
-      'button[data-chat-session-search-submit="true"]',
-    );
 
     input!.value = " telegram ";
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     expect(state.chatSessionPickerQuery).toBe(" telegram ");
+    input!.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
     expect(state.chatSessionPickerOpen).toBe(true);
-    expect(submit?.disabled).toBe(false);
-    submit!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
     await vi.waitFor(() => expect(state.chatSessionPickerAppliedQuery).toBe("telegram"));
     render(renderChatSessionSelect(state), container);
 
@@ -1367,7 +1358,7 @@ describe("chat session controls", () => {
       render(renderChatSessionSelect(state), desktopContainer);
 
       desktopContainer
-        .querySelector<HTMLButtonElement>('button[data-chat-session-search-toggle="true"]')!
+        .querySelector<HTMLButtonElement>('button[data-chat-session-select="true"]')!
         .click();
       render(renderChatSessionSelect(state, undefined, { surface: "mobile" }), mobileContainer);
       render(renderChatSessionSelect(state), desktopContainer);
