Add a keyboard-driven project setup flow (#2097)

* feat(projects): add keyboard-driven project setup

* test(app): update add project loading assertion

* fix(projects): harden GitHub project setup

packages/app/e2e/add-project-flow.spec.ts

@@ -0,0 +1,316 @@
+import { randomUUID } from "node:crypto";
+import { mkdtemp, rm, stat } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { test, expect, type Page } from "./fixtures";
+import {
+  addProjectFlow,
+  addProjectFlowBack,
+  addProjectFlowHost,
+  addProjectFlowInput,
+  addProjectFlowMethod,
+  chooseAddProjectMethod,
+  expectAddProjectPage,
+  openAddProjectFlow,
+  waitForConnectedHost,
+} from "./helpers/add-project-flow";
+import { gotoAppShell } from "./helpers/app";
+import { buildSeededHost } from "./helpers/daemon-registry";
+import { addOfflineHostAndReload } from "./helpers/hosts";
+import { type IsolatedHostDaemon, startIsolatedHostDaemon } from "./helpers/isolated-host-daemon";
+import { expectOpenedProject } from "./helpers/project-picker-ui";
+import { connectSeedClient } from "./helpers/seed-client";
+
+const EXTRA_HOSTS_KEY = "@paseo:e2e-extra-hosts";
+const SECONDARY_HOST_ID = "add-project-flow-secondary";
+const SECONDARY_HOST_LABEL = "Secondary Host";
+
+async function addConnectedHostAndReload(page: Page, host: IsolatedHostDaemon): Promise<void> {
+  const registryEntry = buildSeededHost({
+    serverId: host.serverId,
+    label: SECONDARY_HOST_LABEL,
+    endpoint: `127.0.0.1:${host.port}`,
+    nowIso: new Date().toISOString(),
+  });
+  await page.evaluate(
+    ({ key, entry }) => {
+      localStorage.setItem(key, JSON.stringify([entry]));
+    },
+    { key: EXTRA_HOSTS_KEY, entry: registryEntry },
+  );
+  await page.reload();
+}
+
+async function expectProjectDirectory(pathname: string): Promise<void> {
+  await expect.poll(async () => (await stat(pathname)).isDirectory()).toBe(true);
+}
+
+async function removeCreatedProject(
+  pathname: string,
+  knownProjectId: string | null,
+): Promise<void> {
+  const client = await connectSeedClient();
+  try {
+    let projectId = knownProjectId;
+    if (!projectId) {
+      const result = await client.addProject(pathname);
+      projectId = result.project?.projectId ?? null;
+    }
+    if (projectId) await client.removeProject(projectId).catch(() => undefined);
+  } finally {
+    await client.close();
+  }
+}
+
+test.describe("Add Project command-center flow", () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test("a single connected host opens directly on method selection", async ({ page }) => {
+    await gotoAppShell(page);
+
+    await openAddProjectFlow(page);
+
+    await expect(addProjectFlowMethod(page, "directory-search")).toBeVisible();
+    await expect(page.getByTestId("add-project-flow-page-host")).toHaveCount(0);
+  });
+
+  test("the back arrow, search input, and result glyph share one left edge", async ({ page }) => {
+    await gotoAppShell(page);
+    await openAddProjectFlow(page);
+
+    await page.keyboard.press("Enter");
+    await expectAddProjectPage(page, "directory-search");
+    await addProjectFlowInput(page).fill("/tmp");
+
+    const backGlyph = addProjectFlowBack(page).locator("svg");
+    const resultGlyph = addProjectFlow(page)
+      .locator('[data-testid^="add-project-flow-path-"]')
+      .first()
+      .locator("svg");
+    await expect(resultGlyph).toBeVisible();
+
+    const [backBox, inputBox, resultBox, titleBox, resultsBox, footerBox] = await Promise.all([
+      backGlyph.boundingBox(),
+      addProjectFlowInput(page).boundingBox(),
+      resultGlyph.boundingBox(),
+      page.getByTestId("add-project-flow-title").boundingBox(),
+      page.getByTestId("add-project-flow-results").boundingBox(),
+      page.getByTestId("add-project-flow-footer").boundingBox(),
+    ]);
+    expect(backBox).not.toBeNull();
+    expect(inputBox).not.toBeNull();
+    expect(resultBox).not.toBeNull();
+    expect(titleBox).not.toBeNull();
+    expect(resultsBox).not.toBeNull();
+    expect(footerBox).not.toBeNull();
+    if (!backBox || !inputBox || !resultBox || !titleBox || !resultsBox || !footerBox) return;
+
+    expect(Math.abs(backBox.x - inputBox.x)).toBeLessThanOrEqual(2);
+    expect(Math.abs(resultBox.x - inputBox.x)).toBeLessThanOrEqual(2);
+    expect(titleBox.height).toBeLessThanOrEqual(24);
+    expect(resultsBox.y + resultsBox.height).toBeLessThanOrEqual(footerBox.y + 1);
+  });
+
+  test("an offline extra host neither appears nor forces host selection", async ({ page }) => {
+    await gotoAppShell(page);
+    await addOfflineHostAndReload(page, {
+      serverId: "add-project-flow-offline",
+      label: "Offline Host",
+    });
+
+    await openAddProjectFlow(page);
+
+    await expect(addProjectFlowHost(page, "add-project-flow-offline")).toHaveCount(0);
+    await expect(addProjectFlowMethod(page, "directory-search")).toBeVisible();
+  });
+
+  test.describe("with two connected hosts", () => {
+    let secondaryHost: IsolatedHostDaemon;
+
+    test.beforeAll(async () => {
+      secondaryHost = await startIsolatedHostDaemon(SECONDARY_HOST_ID);
+    });
+
+    test.afterAll(async () => {
+      await secondaryHost?.close();
+    });
+
+    test("keyboard selection chooses the second host", async ({ page }) => {
+      await gotoAppShell(page);
+      await addConnectedHostAndReload(page, secondaryHost);
+      await waitForConnectedHost(page, {
+        serverId: SECONDARY_HOST_ID,
+        endpoint: `localhost:${secondaryHost.port}`,
+      });
+      await openAddProjectFlow(page, "host");
+
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("Enter");
+
+      await expectAddProjectPage(page, "method");
+      await expect(addProjectFlow(page)).toContainText(SECONDARY_HOST_LABEL);
+    });
+
+    test("Escape and Back restore page input and active selection before closing at the root", async ({
+      page,
+    }) => {
+      await gotoAppShell(page);
+      await addConnectedHostAndReload(page, secondaryHost);
+      await waitForConnectedHost(page, {
+        serverId: SECONDARY_HOST_ID,
+        endpoint: `localhost:${secondaryHost.port}`,
+      });
+      await openAddProjectFlow(page, "host");
+
+      await addProjectFlowInput(page).fill("o");
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "method");
+
+      await addProjectFlowInput(page).fill("new");
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "new-directory-parent");
+      await page.keyboard.press("Escape");
+
+      await expectAddProjectPage(page, "method");
+      await expect(addProjectFlowInput(page)).toHaveValue("new");
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "new-directory-parent");
+      await addProjectFlowBack(page).click();
+
+      await expectAddProjectPage(page, "method");
+      await addProjectFlowBack(page).click();
+      await expectAddProjectPage(page, "host");
+      await expect(addProjectFlowInput(page)).toHaveValue("o");
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "method");
+      await expect(addProjectFlow(page)).toContainText(SECONDARY_HOST_LABEL);
+
+      await page.keyboard.press("Escape");
+      await expectAddProjectPage(page, "host");
+      await page.keyboard.press("Escape");
+      await expect(addProjectFlow(page)).not.toBeVisible();
+    });
+
+    test("New directory creates a Project on the selected remote host", async ({ page }) => {
+      const parentDirectory = await mkdtemp(path.join(tmpdir(), "paseo-e2e-remote-project-"));
+      const directoryName = `remote-${randomUUID().slice(0, 8)}`;
+      const directoryPath = path.join(parentDirectory, directoryName);
+
+      try {
+        await gotoAppShell(page);
+        await addConnectedHostAndReload(page, secondaryHost);
+        await waitForConnectedHost(page, {
+          serverId: SECONDARY_HOST_ID,
+          endpoint: `localhost:${secondaryHost.port}`,
+        });
+        await openAddProjectFlow(page, "host");
+        await addProjectFlowHost(page, SECONDARY_HOST_ID).click();
+        await expectAddProjectPage(page, "method");
+
+        await expect(addProjectFlowMethod(page, "new-directory")).toContainText(
+          `Create an empty directory on ${SECONDARY_HOST_LABEL}`,
+        );
+        await chooseAddProjectMethod(page, "new-directory");
+        await addProjectFlowInput(page).fill(parentDirectory);
+        await page.keyboard.press("Enter");
+        await expectAddProjectPage(page, "new-directory-name");
+        await page.keyboard.type(directoryName);
+        await page.keyboard.press("Enter");
+
+        await expectOpenedProject(page, directoryName);
+        await expectProjectDirectory(directoryPath);
+      } finally {
+        await rm(parentDirectory, { recursive: true, force: true });
+      }
+    });
+  });
+
+  test("keyboard directory search adds the selected Project", async ({
+    page,
+    projectPickerFixture,
+  }) => {
+    await gotoAppShell(page);
+    await openAddProjectFlow(page);
+
+    await page.keyboard.press("Enter");
+    await expectAddProjectPage(page, "directory-search");
+    await page.keyboard.type(projectPickerFixture.fuzzyQuery);
+    await expect(addProjectFlow(page)).toContainText(projectPickerFixture.projectName, {
+      timeout: 30_000,
+    });
+    await page.keyboard.press("Enter");
+
+    const projectId = await expectOpenedProject(page, projectPickerFixture.projectName);
+    projectPickerFixture.rememberProjectId(projectId);
+  });
+
+  test("the current daemon advertises Clone from GitHub and New directory", async ({ page }) => {
+    await gotoAppShell(page);
+    await openAddProjectFlow(page);
+
+    await expect(addProjectFlowMethod(page, "github")).toContainText("Clone from GitHub");
+    await expect(addProjectFlowMethod(page, "new-directory")).toContainText("New directory");
+  });
+
+  test("a complete repository URL remains selectable without a GitHub search result", async ({
+    page,
+  }) => {
+    await gotoAppShell(page);
+    await openAddProjectFlow(page);
+    await chooseAddProjectMethod(page, "github");
+
+    const remote = "https://github.invalid/acme/manual.git";
+    await addProjectFlowInput(page).fill(remote);
+    await expect(addProjectFlow(page).getByText("manual", { exact: true })).toBeVisible();
+    await page.keyboard.press("Enter");
+
+    await expectAddProjectPage(page, "github-location");
+    await expect(addProjectFlow(page).getByTestId("add-project-flow-title")).toContainText(
+      "manual",
+    );
+    await addProjectFlowBack(page).click();
+    await expect(addProjectFlowInput(page)).toHaveValue(remote);
+  });
+
+  test("New directory validates the name, restores parent and name state, then creates a Project", async ({
+    page,
+  }) => {
+    const parentDirectory = await mkdtemp(path.join(tmpdir(), "paseo-e2e-new-project-"));
+    const directoryName = `created-${randomUUID().slice(0, 8)}`;
+    const directoryPath = path.join(parentDirectory, directoryName);
+    let projectId: string | null = null;
+
+    try {
+      await gotoAppShell(page);
+      await openAddProjectFlow(page);
+      await chooseAddProjectMethod(page, "new-directory");
+
+      await page.keyboard.type(parentDirectory);
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "new-directory-name");
+      await page.keyboard.type("../invalid");
+      await page.keyboard.press("Enter");
+
+      const error = page.getByTestId("add-project-flow-error");
+      await expect(error).toBeVisible();
+      await expect(error).toContainText(/name|separator|directory/i);
+      await expectAddProjectPage(page, "new-directory-name");
+
+      await addProjectFlowInput(page).fill(directoryName);
+      await addProjectFlowBack(page).click();
+      await expectAddProjectPage(page, "new-directory-parent");
+      await expect(addProjectFlowInput(page)).toHaveValue(parentDirectory);
+      await page.keyboard.press("Enter");
+      await expectAddProjectPage(page, "new-directory-name");
+      await expect(addProjectFlowInput(page)).toHaveValue(directoryName);
+      await page.keyboard.press("Enter");
+
+      projectId = await expectOpenedProject(page, directoryName);
+      await expectProjectDirectory(directoryPath);
+    } finally {
+      await removeCreatedProject(directoryPath, projectId).catch(() => undefined);
+      await rm(parentDirectory, { recursive: true, force: true });
+    }
+  });
+});

packages/app/e2e/add-project-github.real.spec.ts

@@ -0,0 +1,75 @@
+import { mkdtemp, rm, stat } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { expect, test } from "./fixtures";
+import {
+  addProjectFlow,
+  addProjectFlowBack,
+  addProjectFlowInput,
+  chooseAddProjectMethod,
+  expectAddProjectPage,
+  openAddProjectFlow,
+} from "./helpers/add-project-flow";
+import { gotoAppShell } from "./helpers/app";
+import { createTempGithubRepo, hasGithubAuth, type GhRepoFixture } from "./helpers/github-fixtures";
+import { expectOpenedProject } from "./helpers/project-picker-ui";
+import { connectSeedClient } from "./helpers/seed-client";
+
+test.describe("Add Project GitHub flow", () => {
+  test.describe.configure({ timeout: 300_000 });
+
+  test("searches the host's repositories and clones into a clearly shown final path", async ({
+    page,
+  }) => {
+    test.skip(!hasGithubAuth(), "Requires GitHub authentication (gh auth login)");
+
+    let repository: GhRepoFixture | null = null;
+    const parentDirectory = await mkdtemp(path.join(tmpdir(), "paseo-e2e-github-clone-"));
+    let projectId: string | null = null;
+
+    try {
+      repository = await createTempGithubRepo({ category: "add-project" });
+      const checkoutPath = path.join(parentDirectory, repository.name);
+
+      await gotoAppShell(page);
+      await openAddProjectFlow(page);
+      await chooseAddProjectMethod(page, "github");
+
+      await addProjectFlowInput(page).fill("getpaseo/paseo");
+      await expect(addProjectFlow(page).getByText("getpaseo/paseo", { exact: true })).toBeVisible({
+        timeout: 30_000,
+      });
+      await addProjectFlowInput(page).fill("");
+
+      const repositoryRow = addProjectFlow(page).getByText(repository.fullName, { exact: true });
+      await expect(repositoryRow).toBeVisible({ timeout: 30_000 });
+      await repositoryRow.click();
+      await expectAddProjectPage(page, "github-location");
+
+      await addProjectFlowInput(page).fill(parentDirectory);
+      await expect(addProjectFlow(page)).toContainText(checkoutPath, { timeout: 30_000 });
+
+      await addProjectFlowBack(page).click();
+      await expectAddProjectPage(page, "github-search");
+      await expect(repositoryRow).toBeVisible();
+      await repositoryRow.click();
+      await expectAddProjectPage(page, "github-location");
+      await expect(addProjectFlowInput(page)).toHaveValue(parentDirectory);
+
+      await page.keyboard.press("Enter");
+      projectId = await expectOpenedProject(page, repository.name);
+      await expect.poll(async () => (await stat(checkoutPath)).isDirectory()).toBe(true);
+    } finally {
+      if (projectId) {
+        const client = await connectSeedClient();
+        try {
+          await client.removeProject(projectId).catch(() => undefined);
+        } finally {
+          await client.close();
+        }
+      }
+      await repository?.cleanup();
+      await rm(parentDirectory, { recursive: true, force: true });
+    }
+  });
+});

packages/app/e2e/empty-project-persists.spec.ts

@@ -2,6 +2,11 @@ import path from "node:path";
 import { existsSync } from "node:fs";
 import { test, expect, type Page } from "./fixtures";
 import { gotoAppShell } from "./helpers/app";
+import {
+  addProjectFlowInput,
+  chooseAddProjectMethod,
+  openAddProjectFlow,
+} from "./helpers/add-project-flow";
 import { expectOpenedProject } from "./helpers/project-picker-ui";
 import { connectSeedClient, seedWorkspace } from "./helpers/seed-client";
 import { getServerId } from "./helpers/server-id";
@@ -46,10 +51,10 @@ async function removeProjectFromSidebar(page: Page, projectId: string): Promise<
 }
 
 async function addProjectFromPicker(page: Page, projectPath: string): Promise<string> {
-  await page.getByTestId("sidebar-add-project").click();
+  await openAddProjectFlow(page);
+  await chooseAddProjectMethod(page, "directory-search");
 
-  const input = page.getByTestId("project-picker-input");
-  await expect(input).toBeVisible({ timeout: 30_000 });
+  const input = addProjectFlowInput(page);
   await input.fill(projectPath);
   await page.keyboard.press("Enter");
 
@@ -78,10 +83,10 @@ test.describe("Project picker search", () => {
   }) => {
     await gotoAppShell(page);
     await waitForSidebarProjectListReady(page);
-    await page.getByTestId("sidebar-add-project").click();
+    await openAddProjectFlow(page);
+    await chooseAddProjectMethod(page, "directory-search");
 
-    const input = page.getByTestId("project-picker-input");
-    await expect(input).toBeVisible({ timeout: 30_000 });
+    const input = addProjectFlowInput(page);
     await input.fill(projectPickerFixture.fuzzyQuery);
 
     const suggestion = page.getByText(projectPickerFixture.projectName, { exact: false }).first();
@@ -97,14 +102,14 @@ test.describe("Project picker search", () => {
   }) => {
     await gotoAppShell(page);
     await waitForSidebarProjectListReady(page);
-    await page.getByTestId("sidebar-add-project").click();
+    await openAddProjectFlow(page);
+    await chooseAddProjectMethod(page, "directory-search");
 
-    const input = page.getByTestId("project-picker-input");
-    await expect(input).toBeVisible({ timeout: 30_000 });
+    const input = addProjectFlowInput(page);
     await input.fill("paseo-loading-state-no-match");
 
     await expect(page.getByText("Start typing a path", { exact: true })).toHaveCount(0);
-    await expect(page.getByText("Searching...", { exact: true })).toBeVisible();
+    await expect(page.getByText("Loading...", { exact: true })).toBeVisible();
   });
 });
 

packages/app/e2e/helpers/add-project-flow.ts

@@ -0,0 +1,74 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+export type AddProjectFlowPage =
+  | "host"
+  | "method"
+  | "directory-search"
+  | "github-search"
+  | "github-location"
+  | "new-directory-parent"
+  | "new-directory-name";
+
+export type AddProjectMethod = "directory-search" | "browse" | "github" | "new-directory";
+
+const METHOD_DESTINATIONS: Record<Exclude<AddProjectMethod, "browse">, AddProjectFlowPage> = {
+  "directory-search": "directory-search",
+  github: "github-search",
+  "new-directory": "new-directory-parent",
+};
+
+export function addProjectFlow(page: Page): Locator {
+  return page.getByTestId("add-project-flow");
+}
+
+export function addProjectFlowInput(page: Page): Locator {
+  return page.getByTestId("add-project-flow-input");
+}
+
+export function addProjectFlowBack(page: Page): Locator {
+  return page.getByTestId("add-project-flow-back");
+}
+
+export function addProjectFlowHost(page: Page, serverId: string): Locator {
+  return page.getByTestId(`add-project-flow-host-${serverId}`);
+}
+
+export function addProjectFlowMethod(page: Page, method: AddProjectMethod): Locator {
+  return page.getByTestId(`add-project-flow-method-${method}`);
+}
+
+export async function waitForConnectedHost(
+  page: Page,
+  input: { serverId: string; endpoint: string },
+): Promise<void> {
+  await page.getByTestId("sidebar-hosts-trigger").click();
+  const host = page.getByTestId(`sidebar-host-row-${input.serverId}`);
+  await expect(host).toContainText(input.endpoint, { timeout: 30_000 });
+  await page.keyboard.press("Escape");
+  await expect(host).not.toBeVisible();
+}
+
+export async function expectAddProjectPage(page: Page, kind: AddProjectFlowPage): Promise<Locator> {
+  const currentPage = page.getByTestId(`add-project-flow-page-${kind}`);
+  await expect(currentPage).toBeVisible({ timeout: 30_000 });
+  return currentPage;
+}
+
+export async function openAddProjectFlow(
+  page: Page,
+  expectedPage: "host" | "method" = "method",
+): Promise<void> {
+  await page.getByTestId("sidebar-add-project").click();
+  await expect(addProjectFlow(page)).toBeVisible({ timeout: 30_000 });
+  await expectAddProjectPage(page, expectedPage);
+  await expect(addProjectFlowInput(page)).toBeFocused();
+}
+
+export async function chooseAddProjectMethod(page: Page, method: AddProjectMethod): Promise<void> {
+  const option = addProjectFlowMethod(page, method);
+  await expect(option).toBeVisible();
+  await option.click();
+  if (method !== "browse") {
+    await expectAddProjectPage(page, METHOD_DESTINATIONS[method]);
+  }
+}

packages/app/e2e/helpers/isolated-host-daemon.ts

@@ -0,0 +1,129 @@
+import { once } from "node:events";
+import { spawn, execSync, type ChildProcess } from "node:child_process";
+import { mkdtemp, rm } from "node:fs/promises";
+import net from "node:net";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { withDisabledE2ESpeechEnv } from "./speech-env";
+
+export interface IsolatedHostDaemon {
+  serverId: string;
+  port: number;
+  close(): Promise<void>;
+}
+
+async function getAvailablePort(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer();
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address();
+      if (!address || typeof address === "string") {
+        server.close(() => reject(new Error("Failed to acquire an isolated daemon port")));
+        return;
+      }
+      server.close(() => resolve(address.port));
+    });
+  });
+}
+
+async function waitForServer(port: number, child: ChildProcess): Promise<void> {
+  const deadline = Date.now() + 20_000;
+  let lastError: unknown = null;
+
+  while (Date.now() < deadline) {
+    if (child.exitCode !== null) {
+      throw new Error(`Isolated host daemon exited before listening (exit ${child.exitCode})`);
+    }
+    try {
+      await new Promise<void>((resolve, reject) => {
+        const socket = net.connect(port, "127.0.0.1", () => {
+          socket.end();
+          resolve();
+        });
+        socket.setTimeout(1_000, () => {
+          socket.destroy();
+          reject(new Error(`Connection timed out to isolated daemon port ${port}`));
+        });
+        socket.on("error", reject);
+      });
+      return;
+    } catch (error) {
+      lastError = error;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+
+  throw new Error(
+    `Isolated host daemon did not listen on ${port}: ${
+      lastError instanceof Error ? lastError.message : String(lastError)
+    }`,
+  );
+}
+
+async function stopProcess(child: ChildProcess): Promise<void> {
+  if (child.exitCode !== null || child.signalCode !== null) return;
+  child.kill("SIGTERM");
+  const timeout = setTimeout(() => {
+    if (child.exitCode === null && child.signalCode === null) child.kill("SIGKILL");
+  }, 5_000);
+  try {
+    await once(child, "exit");
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+export async function startIsolatedHostDaemon(serverId: string): Promise<IsolatedHostDaemon> {
+  const primaryPort = Number(process.env.E2E_DAEMON_PORT ?? 0);
+  let port = await getAvailablePort();
+  while (port === 6767 || port === primaryPort) port = await getAvailablePort();
+
+  const metroPort = process.env.E2E_METRO_PORT;
+  if (!metroPort) throw new Error("E2E_METRO_PORT is required to start an isolated host daemon");
+
+  const paseoHome = await mkdtemp(path.join(tmpdir(), "paseo-e2e-secondary-host-"));
+  const serverDir = path.resolve(__dirname, "../../../server");
+  const tsxBin = execSync("which tsx").toString().trim();
+  const child = spawn(tsxBin, ["scripts/supervisor-entrypoint.ts", "--dev"], {
+    cwd: serverDir,
+    env: withDisabledE2ESpeechEnv({
+      ...process.env,
+      PASEO_HOME: paseoHome,
+      PASEO_SERVER_ID: serverId,
+      PASEO_LISTEN: `127.0.0.1:${port}`,
+      PASEO_CORS_ORIGINS: `http://localhost:${metroPort}`,
+      PASEO_RELAY_ENABLED: "0",
+      PASEO_NODE_ENV: "development",
+      NODE_ENV: "development",
+    }),
+    stdio: ["ignore", "ignore", "pipe"],
+    detached: false,
+  });
+
+  let stderr = "";
+  child.stderr?.on("data", (chunk: Buffer) => {
+    stderr += chunk.toString("utf8");
+    stderr = stderr.split("\n").slice(-40).join("\n");
+  });
+
+  try {
+    await waitForServer(port, child);
+  } catch (error) {
+    await stopProcess(child);
+    await rm(paseoHome, { recursive: true, force: true });
+    throw new Error(
+      `${error instanceof Error ? error.message : String(error)}\nDaemon stderr:\n${stderr}`,
+      { cause: error },
+    );
+  }
+
+  return {
+    serverId,
+    port,
+    close: async () => {
+      await stopProcess(child);
+      await rm(paseoHome, { recursive: true, force: true });
+    },
+  };
+}

packages/app/e2e/new-workspace.spec.ts

@@ -36,6 +36,7 @@ import {
 } from "./helpers/github-fixtures";
 import { getServerId } from "./helpers/server-id";
 import { getE2EDaemonPort } from "./helpers/daemon-port";
+import { chooseAddProjectMethod, expectAddProjectPage } from "./helpers/add-project-flow";
 import { seedSavedSettingsHosts } from "./helpers/settings";
 import {
   expectSidebarWorkspaceSelected,
@@ -252,7 +253,8 @@ test.describe("New workspace flow", () => {
       await expect(addProject).toContainText(/(?:⌘|Ctrl\+)O/);
       await addProject.click();
 
-      await expect(page.getByTestId("project-picker-input")).toBeVisible();
+      await expectAddProjectPage(page, "method");
+      await chooseAddProjectMethod(page, "directory-search");
     } finally {
       await repo.cleanup();
     }

packages/app/e2e/project-picker-desktop.spec.ts

@@ -18,7 +18,7 @@ test("Browse opens the folder selected by the desktop dialog", async ({
   await gotoAppShell(page);
 
   await page.getByTestId("sidebar-add-project").click();
-  const browse = page.getByRole("button", { name: "Browse…" });
+  const browse = page.getByRole("button", { name: /^Browse/ });
   await expect(browse).toBeVisible({ timeout: 30_000 });
   await browse.click();
 
@@ -26,7 +26,7 @@ test("Browse opens the folder selected by the desktop dialog", async ({
   projectPickerFixture.rememberProjectId(projectId);
 });
 
-test("Browse owns Enter without opening the active typed path", async ({
+test("canceling Browse returns to the Add Project methods", async ({
   page,
   projectPickerFixture,
 }) => {
@@ -38,20 +38,17 @@ test("Browse owns Enter without opening the active typed path", async ({
   await gotoAppShell(page);
 
   await page.getByTestId("sidebar-add-project").click();
-  const input = page.getByTestId("project-picker-input");
-  await expect(input).toBeVisible({ timeout: 30_000 });
-  await input.fill(projectPickerFixture.projectPath);
-
-  const browse = page.getByRole("button", { name: "Browse…" });
+  const browse = page.getByRole("button", { name: /^Browse/ });
   await expect(browse).toBeVisible({ timeout: 30_000 });
-  await browse.press("Enter");
+  await browse.click();
 
   const dialogOptions = await waitForDirectoryDialog(page);
   expect(dialogOptions).toEqual({
+    createDirectory: true,
     directory: true,
     multiple: false,
   });
-  await expect(input).toBeVisible();
+  await expect(browse).toBeVisible();
   await expect(
     page
       .locator('[data-testid^="sidebar-project-row-"]')

packages/app/e2e/projects-settings.spec.ts

@@ -31,6 +31,11 @@ import {
   unblockPaseoConfigWrites,
 } from "./helpers/project-settings";
 import { gotoAppShell } from "./helpers/app";
+import {
+  addProjectFlowInput,
+  chooseAddProjectMethod,
+  openAddProjectFlow,
+} from "./helpers/add-project-flow";
 import { createTempGitRepo } from "./helpers/workspace";
 
 const updatedSetup = ["npm install", "npm run build"];
@@ -134,10 +139,10 @@ async function readProjectConfigFile(project: ProjectsSettingsProject): Promise<
 }
 
 async function addProjectFromSidebar(page: Page, projectPath: string): Promise<string> {
-  await page.getByTestId("sidebar-add-project").click();
+  await openAddProjectFlow(page);
+  await chooseAddProjectMethod(page, "directory-search");
 
-  const input = page.getByTestId("project-picker-input");
-  await expect(input).toBeVisible({ timeout: 30_000 });
+  const input = addProjectFlowInput(page);
   await input.fill(projectPath);
   await page.keyboard.press("Enter");