Merge remote-tracking branch 'origin/blitz/spawn-v2' into spawn-v2/95-project-picker

# Conflicts:
#	web/src/spawnFormWorktree.test.ts

web/src/spawnForm.ts

@@ -94,6 +94,11 @@ export const FALLBACK_PRESETS: SpawnPreset[] = [
   { id: "custom", label: "Custom…", command: "" },
 ];
 
+/** Quiet period after raw-path typing before `/api/gitroot` fires (#74).
+ * Must stay equal to `GITROOT_PROBE_DEBOUNCE_MS` in
+ * crates/maestro-tui/src/draft.rs so both clients debounce alike. */
+const GITROOT_PROBE_DEBOUNCE_MS = 250;
+
 export interface SpawnFormHandle {
   el: HTMLFormElement;
   /** Remove global listeners (dir autocomplete) — call when unmounting. */
@@ -345,6 +350,15 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     emit();
   }
 
+  /** Re-highlight the operator's already-picked tile after `renderCommandTiles`
+   * rebuilds the row from scratch (new tiles carry no `is-active` class) —
+   * without touching `command`, since that was already settled. */
+  function reapplyActiveTile(): void {
+    for (const tile of cmdTiles.querySelectorAll(".tile")) {
+      tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === selectedPresetId);
+    }
+  }
+
   function renderCommandTiles(): void {
     cmdTiles.replaceChildren();
     for (const p of presets) {
@@ -353,13 +367,23 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       tile.className = "tile";
       tile.dataset.id = p.id;
       tile.innerHTML = `<span class="tile-label">${escapeHtml(p.label)}</span>`;
-      tile.addEventListener("click", () => selectPreset(p.id));
+      tile.addEventListener("click", () => {
+        commandTouched = true;
+        selectPreset(p.id);
+      });
       cmdTiles.appendChild(tile);
     }
   }
 
+  // Set once the operator picks a tile or types a custom command — guards
+  // `applyInitialCommand()` the same way `nameTouched` guards a late name
+  // batch: a late `/api/info` resolution must never overwrite a field the
+  // operator has already touched (#76).
+  let commandTouched = false;
+
   cmdRaw.addEventListener("input", () => {
     if (selectedPresetId === "custom" || presets.find((p) => p.id === selectedPresetId)?.command === "") {
+      commandTouched = true;
       command = cmdRaw.value.trim();
       emit();
     }
@@ -375,7 +399,11 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       if (info.presets?.length) {
         presets = info.presets;
         renderCommandTiles();
-        applyInitialCommand();
+        if (commandTouched) {
+          reapplyActiveTile();
+        } else {
+          applyInitialCommand();
+        }
       }
     })
     .catch(() => {
@@ -445,7 +473,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     cwd = cwdRaw.value.trim();
     branchCache = null;
     emit();
-    if (wtEnabled.checked) probeGitRoot();
+    if (wtEnabled.checked) scheduleGitRootProbe();
   });
 
   /** Every worktree of a group, including the group's own box when the scan
@@ -671,7 +699,20 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       applyProjectRepo(project.base_repo ?? project.path);
       return;
     }
-    void probeGitRoot();
+    scheduleGitRootProbe();
+  }
+
+  // Every keystroke resets this timer, so a burst of typing issues one
+  // request once the operator pauses. `probeToken` inside probeGitRoot still
+  // owns ordering: a scheduled probe that fires after a newer one started
+  // loses the token race and is dropped.
+  let probeTimer: number | undefined;
+  function scheduleGitRootProbe(): void {
+    window.clearTimeout(probeTimer);
+    probeTimer = window.setTimeout(() => {
+      probeTimer = undefined;
+      void probeGitRoot();
+    }, GITROOT_PROBE_DEBOUNCE_MS);
   }
 
   async function probeGitRoot(): Promise<void> {
@@ -832,6 +873,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     el: form,
     destroy() {
       destroyed = true;
+      window.clearTimeout(probeTimer);
       autocomplete.destroy();
       form.remove();
     },

web/src/spawnFormPreset.test.ts

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createSpawnForm, type SpawnFormHandle, type SpawnFormValues } from "./spawnForm.js";
+
+/** Stubs fetch so `/api/info` only resolves once `resolveInfo()` is called —
+ * everything else (names, projects, gitroot) answers immediately with an
+ * empty/default body. Lets a test pick a preset (or type a custom command)
+ * mid-flight, then observe what the late `/api/info` resolution does to it. */
+function stubDeferredInfo(): { resolveInfo: () => void } {
+  let releaseInfo: () => void = () => {};
+  const infoGate = new Promise<void>((resolve) => {
+    releaseInfo = resolve;
+  });
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes("/api/info")) {
+        await infoGate;
+        return new Response(
+          JSON.stringify({
+            hostname: "h",
+            version: "0",
+            home_dir: "/home/user",
+            presets: [
+              { id: "claude", label: "Claude", command: "claude" },
+              { id: "fish", label: "Fish", command: "fish" },
+              { id: "custom", label: "Custom…", command: "" },
+            ],
+          }),
+          { status: 200 },
+        );
+      }
+      if (url.includes("/api/names")) {
+        return new Response(JSON.stringify({ names: ["amber-fox"] }), { status: 200 });
+      }
+      return new Response(JSON.stringify([]), { status: 200 });
+    }),
+  );
+  return { resolveInfo: releaseInfo };
+}
+
+describe("spawnForm preset selection vs. late /api/info (#76)", () => {
+  let handle: SpawnFormHandle | null = null;
+
+  afterEach(() => {
+    handle?.destroy();
+    handle = null;
+    vi.unstubAllGlobals();
+  });
+
+  async function drain(): Promise<void> {
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+  }
+
+  it("keeps an operator-picked tile after /api/info resolves late", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    // Fallback presets are up; the operator picks "zsh" before /api/info lands.
+    const zshTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "zsh",
+    )!;
+    zshTile.click();
+    expect(zshTile.classList.contains("is-active")).toBe(true);
+
+    // /api/info lands late with a preset list that doesn't even include "zsh".
+    resolveInfo();
+    await drain();
+
+    // The operator's pick must not be discarded back to the new list's first
+    // entry — `onChange` only starts firing once the initial load settles
+    // (`ready`), which happens right here, so this is the first place the
+    // published command is observable.
+    expect(values?.command).toBe("zsh");
+  });
+
+  it("keeps an operator-typed custom command after /api/info resolves late", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    const customTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "custom",
+    )!;
+    customTile.click();
+    const cmdRaw = form.querySelector<HTMLInputElement>(".cmd-raw")!;
+    cmdRaw.value = "htop";
+    cmdRaw.dispatchEvent(new Event("input"));
+
+    resolveInfo();
+    await drain();
+
+    expect(values?.command).toBe("htop");
+    expect(cmdRaw.value).toBe("htop");
+  });
+
+  it("still applies the real presets' first entry when the operator never touched the command", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    resolveInfo();
+    await drain();
+
+    // Untouched: the refined preset list is still free to settle the command.
+    expect(values?.command).toBe("claude");
+    const fishTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "fish",
+    );
+    expect(fishTile).toBeDefined();
+  });
+});

web/src/spawnFormProbe.test.ts

@@ -0,0 +1,148 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createSpawnForm, type SpawnFormHandle } from "./spawnForm.js";
+
+/** Debounce window under test — must equal GITROOT_PROBE_DEBOUNCE_MS in
+ * spawnForm.ts (#74). */
+const DEBOUNCE_MS = 250;
+
+const PROJECTS = [
+  { path: "/home/user/maestro", name: "maestro", last_activity: "2026-08-20T10:00:00Z" },
+];
+
+/** Stub the fetches the form makes. Gitroot responses for a given path can be
+ * held until `releaseGitRoot(path)` is called, so tests can land answers out
+ * of order. */
+function stubFetch(opts?: { holdGitRootFor?: string[] }): {
+  urls: string[];
+  gitRootCalls: string[];
+  releaseGitRoot: (path: string) => void;
+} {
+  const urls: string[] = [];
+  const gitRootCalls: string[] = [];
+  const releases = new Map<string, () => void>();
+  const held = new Map<string, Promise<void>>();
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      urls.push(url);
+      if (url.includes("/api/dirs")) {
+        return new Response(JSON.stringify({ entries: [] }), { status: 200 });
+      }
+      if (url.includes("/api/gitroot")) {
+        const path = new URL(url, "http://localhost").searchParams.get("path") ?? "";
+        gitRootCalls.push(path);
+        if (opts?.holdGitRootFor?.includes(path)) {
+          let release!: () => void;
+          held.set(
+            path,
+            new Promise<void>((r) => {
+              release = r;
+            }),
+          );
+          releases.set(path, release);
+        }
+        await held.get(path);
+        return new Response(JSON.stringify({ root: path }), { status: 200 });
+      }
+      if (url.includes("/api/names")) {
+        return new Response(JSON.stringify({ names: ["amber-fox"] }), { status: 200 });
+      }
+      if (url.includes("/api/projects")) {
+        return new Response(JSON.stringify(PROJECTS), { status: 200 });
+      }
+      return new Response(
+        JSON.stringify({ hostname: "h", version: "0", home_dir: "/home/user", presets: [] }),
+        { status: 200 },
+      );
+    }),
+  );
+  return {
+    urls,
+    gitRootCalls,
+    releaseGitRoot: (path: string) => releases.get(path)?.(),
+  };
+}
+
+describe("spawnForm gitroot probe debounce (#74)", () => {
+  let handle: SpawnFormHandle | null = null;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    handle?.destroy();
+    handle = null;
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  async function mount(opts?: Parameters<typeof stubFetch>[0]) {
+    const stub = stubFetch(opts);
+    handle = createSpawnForm({ onSuccess() {} });
+    document.body.appendChild(handle.el);
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+    return { form: handle.el, stub };
+  }
+
+  const drain = async () => {
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+  };
+
+  function typeRaw(form: HTMLFormElement, value: string): void {
+    const raw = form.querySelector<HTMLInputElement>("input[name=cwd_raw]")!;
+    raw.value = value;
+    raw.dispatchEvent(new Event("input"));
+  }
+
+  it("a keystroke burst fires exactly one probe after the quiet period", async () => {
+    const { form, stub } = await mount();
+
+    form.querySelector<HTMLElement>(".project-other")!.click();
+    // Burst: every keystroke reschedules; nothing may hit /api/gitroot yet.
+    for (let i = 1; i <= "/opt/somewhere".length; i++) {
+      typeRaw(form, "/opt/somewhere".slice(0, i));
+      await drain();
+      expect(stub.gitRootCalls).toEqual([]);
+    }
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_MS);
+    await drain();
+
+    expect(stub.gitRootCalls).toEqual(["/opt/somewhere"]);
+    expect(stub.urls.filter((u) => u.includes("/api/gitroot")).length).toBe(1);
+  });
+
+  it("a stale probe answer cannot overwrite a newer input", async () => {
+    const { form, stub } = await mount({ holdGitRootFor: ["/repo/old"] });
+
+    form.querySelector<HTMLElement>(".project-other")!.click();
+
+    // Probe for the old target, held in flight.
+    typeRaw(form, "/repo/old");
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_MS);
+
+    // Newer target supersedes it and answers immediately.
+    typeRaw(form, "/repo/new");
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_MS);
+    await drain();
+
+    expect(stub.gitRootCalls).toEqual(["/repo/old", "/repo/new"]);
+    expect(form.querySelector<HTMLElement>(".wt-repo")!.textContent).toContain("/repo/new");
+    expect(
+      form.querySelector<HTMLInputElement>("input[name=worktree_enabled]")!.checked,
+    ).toBe(true);
+
+    // The late answer to the old target lands last but must lose.
+    stub.releaseGitRoot("/repo/old");
+    await drain();
+
+    expect(form.querySelector<HTMLElement>(".wt-repo")!.textContent).toContain("/repo/new");
+    expect(
+      form.querySelector<HTMLInputElement>("input[name=worktree_enabled]")!.checked,
+    ).toBe(true);
+  });
+});

web/src/spawnFormWorktree.test.ts

@@ -132,11 +132,13 @@ describe("spawnForm worktree defaults and branch picker (#61)", () => {
   it("still probes the gitroot for a free-text directory", async () => {
     const form = await mount();
 
-    // Escape hatch: switch to a free-text dir; only now does /api/gitroot fire.
+    // Escape hatch: switch to a free-text dir; only now does /api/gitroot
+    // fire — debounced, so the quiet period must elapse first (#74).
     form.querySelector<HTMLElement>(".project-other")!.click();
     const raw = form.querySelector<HTMLInputElement>("input[name=cwd_raw]")!;
     raw.value = "/opt/somewhere";
     raw.dispatchEvent(new Event("input"));
+    await vi.advanceTimersByTimeAsync(250);
     await drain();
 
     expect(urls.some((u) => u.includes("/api/gitroot"))).toBe(true);