Fire resource-template completions on focus

Mirrors the prompt-side change: focusing a template variable input
now fires completion/complete immediately so the dropdown populates
the moment the user clicks in, rather than waiting for the first
keystroke + 300ms debounce. Any pending debounce timer for the same
variable is cancelled first so a stale keystroke response can't
overwrite the focus response.

The sibling-context coverage was already correct here — `variables`
is seeded with empty strings for every declared template variable at
mount and on template switch, so the context payload always carries
the full variable set minus the one being completed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.test.tsx

@@ -139,6 +139,37 @@ describe("ResourceTemplatePanel", () => {
   });
 
   describe("completions", () => {
+    it("fires a completion immediately on focus before any keystroke", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi
+        .fn<
+          (
+            argName: string,
+            value: string,
+            context: Record<string, string>,
+          ) => Promise<string[]>
+        >()
+        .mockResolvedValue(["alpha", "alphabet"]);
+
+      renderWithMantine(
+        <ResourceTemplatePanel
+          template={titledTemplate}
+          onReadResource={vi.fn()}
+          completionsSupported
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+
+      await user.click(screen.getByRole("textbox", { name: "tableName" }));
+      await new Promise((r) => setTimeout(r, 0));
+      // Empty value, empty sibling — but the sibling key is still
+      // present so the server sees the full argument set.
+      expect(onCompleteArgument).toHaveBeenCalledWith("tableName", "", {
+        rowId: "",
+      });
+      expect(await screen.findByText("alpha")).toBeInTheDocument();
+    });
+
     it("calls onCompleteArgument (debounced) and surfaces values when supported", async () => {
       const user = userEvent.setup();
       const onCompleteArgument = vi
@@ -163,8 +194,10 @@ describe("ResourceTemplatePanel", () => {
       await user.type(screen.getByRole("textbox", { name: "userId" }), "al");
       // Wait past the 300ms debounce.
       await new Promise((r) => setTimeout(r, 400));
-      expect(onCompleteArgument).toHaveBeenCalledTimes(1);
-      expect(onCompleteArgument).toHaveBeenCalledWith("userId", "al", {});
+      // user.type focuses first (firing one immediate completion) and
+      // then types the characters (firing the debounced one). Only the
+      // typed-prefix call is the one we care about here.
+      expect(onCompleteArgument).toHaveBeenLastCalledWith("userId", "al", {});
 
       // Server-returned values surface in the Autocomplete dropdown.
       expect(await screen.findByText("alpha")).toBeInTheDocument();

clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx

@@ -184,6 +184,24 @@ export function ResourceTemplatePanel({
     });
   }
 
+  function handleVariableFocus(varName: string) {
+    if (!useAutocomplete) return;
+    // Fire immediately so the dropdown isn't empty when the user first
+    // clicks in. Cancel any pending debounce for this variable so a
+    // stale keystroke request doesn't overwrite the fresher focus
+    // response. `variables` already carries every declared template
+    // variable (seeded with "") so the context is complete by default.
+    const existing = timersRef.current.get(varName);
+    if (existing) {
+      clearTimeout(existing);
+      timersRef.current.delete(varName);
+    }
+    const value = variables[varName] ?? "";
+    const context: Record<string, string> = { ...variables };
+    delete context[varName];
+    void runCompletion(varName, value, context);
+  }
+
   const canSubmit = variableNames.every((n) => variables[n]?.length > 0);
 
   function handleSubmit() {
@@ -217,6 +235,7 @@ export function ResourceTemplatePanel({
               // substring-match what the server returned.
               filter={({ options }) => options}
               onChange={(value) => handleVariableChange(varName, value)}
+              onFocus={() => handleVariableFocus(varName)}
             />
           ) : (
             <TextInput