Commit 1b409c39468298a2a0c01d988fc2d90340877f13 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-02-17 13:04:49-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-02-17 19:47:09-08:00
log	1b409c39468298a2a0c01d988fc2d90340877f13
tree	a72fb92ead04015ce31fdee38c395451d76ee30d
parent	60ed67e5e1e5b983c0d6f0315baeb98b6372daea

Refactor web query hooks and debounce composer path search

- add `@tanstack/react-pacer` and switch composer path debounce to `useDebouncedValue`
- extract reusable `projectSearchEntriesQueryOptions` for workspace entry lookup
- add `serverKeybindingsQueryOptions` and update consumers in chat/sidebar
- keep branch toolbar mutation error handling at call sites

7 files changed, 99 insertions(+), 60 deletions(-)

apps
- web
  - package.json
  - src
    components
    BranchToolbar.tsx
    ChatView.tsx
    Sidebar.tsx
    lib
    projectReactQuery.ts
    serverReactQuery.ts
bun.lock

apps/web/package.json+1

...	@@ -13,6 +13,7 @@	...	@@ -13,6 +13,7 @@
13	"dependencies": {	13	"dependencies": {
14	"@base-ui/react": "^1.2.0",	14	"@base-ui/react": "^1.2.0",
15	"@t3tools/contracts": "workspace:*",	15	"@t3tools/contracts": "workspace:*",
		16	"@tanstack/react-pacer": "^0.19.4",
16	"@tanstack/react-query": "^5.90.0",	17	"@tanstack/react-query": "^5.90.0",
17	"@xterm/addon-fit": "^0.11.0",	18	"@xterm/addon-fit": "^0.11.0",
18	"@xterm/xterm": "^6.0.0",	19	"@xterm/xterm": "^6.0.0",

apps/web/src/components/BranchToolbar.tsx+13-12

 @@ -68,19 +68,13 @@ export default function BranchToolbar({
       : branchNames;
   // ── Mutations ─────────────────────────────────────────────────────────
-  const checkoutMutation = useMutation({
+  const checkoutMutation = useMutation(
-    ...gitCheckoutMutationOptions({ api, cwd: branchCwd, queryClient }),
+    gitCheckoutMutationOptions({ api, cwd: branchCwd, queryClient }),
-    onError: (error) => {
+  );
-      setThreadError(error instanceof Error ? error.message : "Failed to checkout branch.");
-      setIsBranchMenuOpen(true);
-    },
-  });
-  const createBranchMutation = useMutation({
+  const createBranchMutation = useMutation(
-    ...gitCreateBranchAndCheckoutMutationOptions({ api, cwd: branchCwd, queryClient }),
+    gitCreateBranchAndCheckoutMutationOptions({ api, cwd: branchCwd, queryClient }),
-    onError: (error) =>
+  );
-      setThreadError(error instanceof Error ? error.message : "Failed to create branch."),
-  });
   // ── Effects ───────────────────────────────────────────────────────────
 @@ -159,6 +153,10 @@ export default function BranchToolbar({
         setIsBranchMenuOpen(false);
         onComposerFocusRequest?.();
       },
+      onError: (error) => {
+        setThreadError(error instanceof Error ? error.message : "Failed to checkout branch.");
+        setIsBranchMenuOpen(true);
+      },
     });
   };
 @@ -173,6 +171,9 @@ export default function BranchToolbar({
         setIsBranchMenuOpen(false);
         onComposerFocusRequest?.();
       },
+      onError: (error) => {
+        setThreadError(error instanceof Error ? error.message : "Failed to create branch.");
+      },
     });
   };

apps/web/src/components/ChatView.tsx+23-43

 @@ -27,8 +27,10 @@ import {
   useState,
 } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
 import { gitBranchesQueryOptions, gitCreateWorktreeMutationOptions } from "~/lib/gitReactQuery";
-import { serverConfigQueryOptions } from "~/lib/serverReactQuery";
+import { projectSearchEntriesQueryOptions } from "~/lib/projectReactQuery";
+import { serverKeybindingsQueryOptions } from "~/lib/serverReactQuery";
 import { isElectron } from "../env";
 import { buildBootstrapInput } from "../historyBootstrap";
 @@ -340,7 +342,6 @@ export default function ChatView() {
   const [nowTick, setNowTick] = useState(() => Date.now());
   const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
   const [composerCursor, setComposerCursor] = useState(0);
-  const [debouncedPathQuery, setDebouncedPathQuery] = useState("");
   const [composerMenuIndex, setComposerMenuIndex] = useState(0);
   const [composerKeyboardHighlight, setComposerKeyboardHighlight] = useState(false);
   const messagesScrollRef = useRef<HTMLDivElement>(null);
 @@ -462,47 +463,23 @@ export default function ChatView() {
   const composerTriggerKind = composerTrigger?.kind ?? null;
   const pathTriggerQuery = composerTrigger?.kind === "path" ? composerTrigger.query : "";
   const isPathTrigger = composerTriggerKind === "path";
+  const [debouncedPathQuery, composerPathQueryDebouncer] = useDebouncedValue(
+    pathTriggerQuery,
+    { wait: COMPOSER_PATH_QUERY_DEBOUNCE_MS },
+    (debouncerState) => ({ isPending: debouncerState.isPending }),
+  );
+  const effectivePathQuery = pathTriggerQuery.length > 0 ? debouncedPathQuery : "";
   const branchesQuery = useQuery(gitBranchesQueryOptions(api, gitCwd));
-  const keybindingsQuery = useQuery({
+  const keybindingsQuery = useQuery(serverKeybindingsQueryOptions(api));
-    ...serverConfigQueryOptions(api),
+  const workspaceEntriesQuery = useQuery(
-    select: (config) => config.keybindings,
+    projectSearchEntriesQueryOptions({
-  });
+      api,
-  useEffect(() => {
+      cwd: gitCwd,
-    if (!isPathTrigger) {
+      query: effectivePathQuery,
-      setDebouncedPathQuery("");
+      enabled: isPathTrigger,
-      return;
+      limit: 80,
-    }
+    }),
-    if (pathTriggerQuery.length === 0) {
+  );
-      setDebouncedPathQuery("");
-      return;
-    }
-    const timer = window.setTimeout(() => {
-      setDebouncedPathQuery(pathTriggerQuery);
-    }, COMPOSER_PATH_QUERY_DEBOUNCE_MS);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [isPathTrigger, pathTriggerQuery]);
-  const workspaceEntriesQuery = useQuery({
-    queryKey: [
-      "composer-workspace-entries",
-      gitCwd,
-      debouncedPathQuery,
-    ],
-    enabled: Boolean(api && gitCwd && isPathTrigger),
-    staleTime: 15_000,
-    placeholderData: (previous) => previous,
-    queryFn: async () => {
-      if (!api || !gitCwd || !isPathTrigger) {
-        return { entries: [], truncated: false };
-      }
-      return api.projects.searchEntries({
-        cwd: gitCwd,
-        query: debouncedPathQuery,
-        limit: 80,
-      });
-    },
-  });
   const workspaceEntries = workspaceEntriesQuery.data?.entries ?? EMPTY_PROJECT_ENTRIES;
   const composerMenuItems = useMemo<ComposerCommandItem[]>(() => {
     if (!composerTrigger) return [];
 @@ -1301,7 +1278,10 @@ export default function ChatView() {
     setComposerMenuIndex(index);
   }, []);
   const isComposerMenuLoading =
-    composerTriggerKind === "path" && (workspaceEntriesQuery.isLoading || workspaceEntriesQuery.isFetching);
+    composerTriggerKind === "path" &&
+    ((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
+      workspaceEntriesQuery.isLoading ||
+      workspaceEntriesQuery.isFetching);
   const onPromptChange = useCallback((nextPrompt: string, nextCursor: number) => {
     setPrompt(nextPrompt);

apps/web/src/components/Sidebar.tsx+2-5

apps/web/src/lib/projectReactQuery.ts created+42

...	@@ -0,0 +1,42 @@
1	import type { NativeApi, ProjectSearchEntriesResult } from "@t3tools/contracts";
2	import { queryOptions } from "@tanstack/react-query";
3
4	export const projectQueryKeys = {
5	all: ["projects"] as const,
6	searchEntries: (cwd: string \| null, query: string, limit: number) =>
7	["projects", "search-entries", cwd, query, limit] as const,
8	};
9
10	const DEFAULT_SEARCH_ENTRIES_LIMIT = 80;
11	const DEFAULT_SEARCH_ENTRIES_STALE_TIME = 15_000;
12	const EMPTY_SEARCH_ENTRIES_RESULT: ProjectSearchEntriesResult = {
13	entries: [],
14	truncated: false,
15	};
16
17	export function projectSearchEntriesQueryOptions(input: {
18	api: NativeApi \| undefined;
19	cwd: string \| null;
20	query: string;
21	enabled?: boolean;
22	limit?: number;
23	staleTime?: number;
24	}) {
25	const limit = input.limit ?? DEFAULT_SEARCH_ENTRIES_LIMIT;
26	return queryOptions({
27	queryKey: projectQueryKeys.searchEntries(input.cwd, input.query, limit),
28	queryFn: async () => {
29	if (!input.api \|\| !input.cwd) {
30	throw new Error("Workspace entry search is unavailable.");
31	}
32	return input.api.projects.searchEntries({
33	cwd: input.cwd,
34	query: input.query,
35	limit,
36	});
37	},
38	enabled: input.enabled ?? Boolean(input.api && input.cwd),
39	staleTime: input.staleTime ?? DEFAULT_SEARCH_ENTRIES_STALE_TIME,
40	placeholderData: (previous) => previous ?? EMPTY_SEARCH_ENTRIES_RESULT,
41	});
42	}

apps/web/src/lib/serverReactQuery.ts+7

...	@@ -19,3 +19,10 @@ export function serverConfigQueryOptions(api: NativeApi \| undefined) {	...	@@ -19,3 +19,10 @@ export function serverConfigQueryOptions(api: NativeApi \| undefined) {
19	staleTime: Infinity,	19	staleTime: Infinity,
20	});	20	});
21	}	21	}
		22
		23	export function serverKeybindingsQueryOptions(api: NativeApi \| undefined) {
		24	return queryOptions({
		25	...serverConfigQueryOptions(api),
		26	select: (config) => config.keybindings,
		27	});
		28	}

bun.lock+11

 @@ -53,6 +53,7 @@
       "dependencies": {
         "@base-ui/react": "^1.2.0",
         "@t3tools/contracts": "workspace:*",
+        "@tanstack/react-pacer": "^0.19.4",
         "@tanstack/react-query": "^5.90.0",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
 @@ -425,10 +426,20 @@
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
+    "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.4.0", "", {}, "sha512-RPfGuk2bDZgcu9bAJodvO2lnZeHuz4/71HjZ0bGb/SPg8+lyTA+RLSKQvo7fSmPSi8/vcH3aKQ8EM9ywf1olaw=="],
+    "@tanstack/pacer": ["@tanstack/pacer@0.18.0", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.4.0", "@tanstack/store": "^0.8.0" } }, "sha512-qhCRSFei0hokQr3xYcQXqxsRD/LKlgHCxHXtKHrQoImp4x2Zu6tUOpUGVH4y2qexIrzSu3aibQBNNfC3Eay6Mg=="],
     "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
+    "@tanstack/react-pacer": ["@tanstack/react-pacer@0.19.4", "", { "dependencies": { "@tanstack/pacer": "0.18.0", "@tanstack/react-store": "^0.8.0" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-coj8ULAuR0qFpjAKD44gTgRuZyjxU6Xu+IX5MwwYvr4e61OtZcJshaExoOBKpCGde0Edb12jDnzzj2Im13Qm9Q=="],
     "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
+    "@tanstack/react-store": ["@tanstack/react-store@0.8.1", "", { "dependencies": { "@tanstack/store": "0.8.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XItJt+rG8c5Wn/2L/bnxys85rBpm0BfMbhb4zmPVLXAKY9POrp1xd6IbU4PKoOI+jSEGc3vntPRfLGSgXfE2Ig=="],
+    "@tanstack/store": ["@tanstack/store@0.8.1", "", {}, "sha512-PtOisLjUZPz5VyPRSCGjNOlwTvabdTBQ2K80DpVL1chGVr35WRxfeavAPdNq6pm/t7F8GhoR2qtmkkqtCEtHYw=="],
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],

...	@@ -16,7 +16,7 @@ import {	...	@@ -16,7 +16,7 @@ import {
16	} from "../types";	16	} from "../types";
17	import { useNativeApi } from "../hooks/useNativeApi";	17	import { useNativeApi } from "../hooks/useNativeApi";
18	import { gitRemoveWorktreeMutationOptions } from "../lib/gitReactQuery";	18	import { gitRemoveWorktreeMutationOptions } from "../lib/gitReactQuery";
19	import { serverConfigQueryOptions } from "../lib/serverReactQuery";	19	import { serverKeybindingsQueryOptions } from "../lib/serverReactQuery";
20	import { toastManager } from "./ui/toast";	20	import { toastManager } from "./ui/toast";
21	import { formatWorktreePathForDisplay, getOrphanedWorktreePathForThread } from "../worktreeCleanup";	21	import { formatWorktreePathForDisplay, getOrphanedWorktreePathForThread } from "../worktreeCleanup";
22		22
...	@@ -118,10 +118,7 @@ function terminalStatusIndicator(thread: Thread): TerminalStatusIndicator \| null	...	@@ -118,10 +118,7 @@ function terminalStatusIndicator(thread: Thread): TerminalStatusIndicator \| null
118	export default function Sidebar() {	118	export default function Sidebar() {
119	const { state, dispatch } = useStore();	119	const { state, dispatch } = useStore();
120	const api = useNativeApi();	120	const api = useNativeApi();
121	const { data: keybindings = EMPTY_KEYBINDINGS } = useQuery({	121	const { data: keybindings = EMPTY_KEYBINDINGS } = useQuery(serverKeybindingsQueryOptions(api));
122	...serverConfigQueryOptions(api),
123	select: (config) => config.keybindings,
124	});
125	const queryClient = useQueryClient();	122	const queryClient = useQueryClient();
126	const removeWorktreeMutation = useMutation(	123	const removeWorktreeMutation = useMutation(
127	gitRemoveWorktreeMutationOptions({ api, queryClient }),	124	gitRemoveWorktreeMutationOptions({ api, queryClient }),