fix: clear stale ClawHub query results on input change (#60267)

* fix: clear stale ClawHub query results on input change

* docs: move ClawHub follow-up changelog entry to section tail

ui/src/ui/app-render.ts

@@ -87,6 +87,7 @@ import {
   loadSkills,
   saveSkillApiKey,
   searchClawHub,
+  setClawHubSearchQuery,
   updateSkillEdit,
   updateSkillEnabled,
 } from "./controllers/skills.ts";
@@ -1340,8 +1341,7 @@ export function renderApp(state: AppViewState) {
                 onDetailOpen: (key) => (state.skillsDetailKey = key),
                 onDetailClose: () => (state.skillsDetailKey = null),
                 onClawHubQueryChange: (query) => {
-                  state.clawhubSearchQuery = query;
-                  state.clawhubInstallMessage = null;
+                  setClawHubSearchQuery(state, query);
                   if (clawhubSearchTimer) {
                     clearTimeout(clawhubSearchTimer);
                   }

ui/src/ui/controllers/skills.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { searchClawHub, type SkillsState } from "./skills.ts";
+import { searchClawHub, setClawHubSearchQuery, type SkillsState } from "./skills.ts";
 
 function createState(): { state: SkillsState; request: ReturnType<typeof vi.fn> } {
   const request = vi.fn();
@@ -37,6 +37,21 @@ function createState(): { state: SkillsState; request: ReturnType<typeof vi.fn>
 }
 
 describe("searchClawHub", () => {
+  it("clears stale query state immediately when the input changes", () => {
+    const { state } = createState();
+
+    state.clawhubSearchLoading = true;
+    state.clawhubInstallMessage = { kind: "success", text: "Installed github" };
+
+    setClawHubSearchQuery(state, "github app");
+
+    expect(state.clawhubSearchQuery).toBe("github app");
+    expect(state.clawhubSearchResults).toBeNull();
+    expect(state.clawhubSearchError).toBeNull();
+    expect(state.clawhubSearchLoading).toBe(false);
+    expect(state.clawhubInstallMessage).toBeNull();
+  });
+
   it("clears stale results as soon as a new search starts", async () => {
     const { state, request } = createState();
     type SearchResponse = { results: SkillsState["clawhubSearchResults"] };

ui/src/ui/controllers/skills.ts

@@ -87,6 +87,14 @@ function getErrorMessage(err: unknown) {
   return String(err);
 }
 
+export function setClawHubSearchQuery(state: SkillsState, query: string) {
+  state.clawhubSearchQuery = query;
+  state.clawhubInstallMessage = null;
+  state.clawhubSearchResults = null;
+  state.clawhubSearchError = null;
+  state.clawhubSearchLoading = false;
+}
+
 export async function loadSkills(state: SkillsState, options?: LoadSkillsOptions) {
   if (options?.clearMessages && Object.keys(state.skillMessages).length > 0) {
     state.skillMessages = {};