Make the command center stable and workspace-aware (#2749)

* feat(app): expand command center actions Keep command center navigation stable by revealing only clipped rows without smooth centering. Prioritize a concise default list while making workspace, Git, pane, and creation actions searchable through the existing contribution and action-policy paths. * test(app): search for query-only command action Add project is intentionally absent from the unfiltered command center. Exercise the overlay flow through search before selecting it.
2026-08-01 15:38:07 +02:00
parent 47dcb64ac7
commit fb9f7fb98a
21 changed files with 1178 additions and 247 deletions
@@ -0,0 +1,53 @@
+import { test } from "./fixtures";
+import { gotoAppShell } from "./helpers/app";
+import {
+  expectCommandCenterToRemainAtTheTop,
+  expectPrimaryCommandCenterActions,
+  expectTightTwoLineResultSpacing,
+  expectVisibleKeyboardNavigationNotToScroll,
+  expectWorkspaceResultsToBeLimitedUntilSearch,
+  observeCommandCenterScroll,
+  openCommandCenterWithKeyboard,
+} from "./helpers/command-center-scroll";
+import { seedWorkspace } from "./helpers/seed-client";
+
+test.use({
+  userAgent:
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/145.0 Safari/537.36",
+});
+
+test("opening the command center keeps its first result fully visible", async ({ page }) => {
+  const seeded = await seedWorkspace({
+    repoPrefix: "command-center-scroll-",
+    title: "Command Center Scroll 00",
+  });
+
+  try {
+    for (let index = 1; index <= 8; index += 1) {
+      const created = await seeded.client.createWorkspace({
+        source: {
+          kind: "worktree",
+          projectId: seeded.projectId,
+          baseBranch: "main",
+          worktreeSlug: `command-center-scroll-${index}`,
+        },
+        title: `Command Center Scroll ${String(index).padStart(2, "0")}`,
+      });
+      if (!created.workspace) {
+        throw new Error(created.error ?? `Failed to seed workspace ${index}`);
+      }
+    }
+
+    await gotoAppShell(page);
+    await observeCommandCenterScroll(page);
+    const panel = await openCommandCenterWithKeyboard(page);
+
+    await expectCommandCenterToRemainAtTheTop(page);
+    await expectPrimaryCommandCenterActions(panel);
+    await expectVisibleKeyboardNavigationNotToScroll(page, panel);
+    await expectTightTwoLineResultSpacing(panel, "Command Center Scroll 00");
+    await expectWorkspaceResultsToBeLimitedUntilSearch(panel);
+  } finally {
+    await seeded.cleanup();
+  }
+});
@@ -0,0 +1,34 @@
+import { test } from "./fixtures";
+import { gotoAppShell } from "./helpers/app";
+import { openCommandCenter } from "./helpers/command-center";
+import {
+  createTerminalFromCommandCenter,
+  expectDefaultWorkspaceActions,
+  expectWorkspaceActionsAvailableThroughSearch,
+  makeWorkspacePrimaryGitActionCommit,
+  openWorkspaceFromCommandCenter,
+} from "./helpers/command-center-workspace-actions";
+import { seedWorkspace } from "./helpers/seed-client";
+
+test("workspace actions use the Git policy and dispatch through the active workspace", async ({
+  page,
+}) => {
+  const title = "Command Center Workspace Actions";
+  const seeded = await seedWorkspace({
+    repoPrefix: "command-center-workspace-actions-",
+    title,
+  });
+
+  try {
+    await makeWorkspacePrimaryGitActionCommit(seeded);
+    await gotoAppShell(page);
+    await openWorkspaceFromCommandCenter(page, seeded, title);
+
+    const panel = await openCommandCenter(page);
+    await expectDefaultWorkspaceActions(panel);
+    await expectWorkspaceActionsAvailableThroughSearch(panel);
+    await createTerminalFromCommandCenter(page, panel);
+  } finally {
+    await seeded.cleanup();
+  }
+});
@@ -0,0 +1,167 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+interface CommandCenterScrollSample {
+  scrollTop: number;
+  firstResultTop: number;
+  viewportTop: number;
+}
+
+interface CommandCenterScrollObservation {
+  done: boolean;
+  samples: CommandCenterScrollSample[];
+}
+
+type ScrollOracleWindow = Window & {
+  __commandCenterScrollObservation?: CommandCenterScrollObservation;
+};
+
+export async function observeCommandCenterScroll(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const oracleWindow = window as ScrollOracleWindow;
+    oracleWindow.__commandCenterScrollObservation = { done: false, samples: [] };
+
+    const discoverPanel = new MutationObserver(() => {
+      const panel = document.querySelector<HTMLElement>('[data-testid="command-center-panel"]');
+      const firstResult = panel?.querySelector<HTMLElement>('[role="button"]');
+      if (!panel || !firstResult) return;
+
+      let viewport = firstResult.parentElement;
+      while (viewport && viewport !== panel && viewport.scrollHeight <= viewport.clientHeight) {
+        viewport = viewport.parentElement;
+      }
+      if (!viewport || viewport === panel) return;
+
+      discoverPanel.disconnect();
+      let frame = 0;
+      const sample = () => {
+        const observation = oracleWindow.__commandCenterScrollObservation;
+        if (!observation) return;
+        const firstResultBounds = firstResult.getBoundingClientRect();
+        const viewportBounds = viewport.getBoundingClientRect();
+        observation.samples.push({
+          scrollTop: viewport.scrollTop,
+          firstResultTop: firstResultBounds.top,
+          viewportTop: viewportBounds.top,
+        });
+        frame += 1;
+        if (frame < 60) {
+          requestAnimationFrame(sample);
+          return;
+        }
+        observation.done = true;
+      };
+      requestAnimationFrame(sample);
+    });
+
+    discoverPanel.observe(document.body, { childList: true, subtree: true });
+  });
+}
+
+export async function openCommandCenterWithKeyboard(page: Page): Promise<Locator> {
+  await expect(page.getByTestId("sidebar-command-center-search")).toBeVisible({ timeout: 30_000 });
+  await page.keyboard.press("Meta+K");
+  const panel = page.getByTestId("command-center-panel");
+  await expect(panel).toBeVisible({ timeout: 30_000 });
+  return panel;
+}
+
+export async function expectCommandCenterToRemainAtTheTop(page: Page): Promise<void> {
+  await page.waitForFunction(
+    () => (window as ScrollOracleWindow).__commandCenterScrollObservation?.done === true,
+  );
+  const samples = await page.evaluate(
+    () => (window as ScrollOracleWindow).__commandCenterScrollObservation?.samples ?? [],
+  );
+
+  expect(samples.length).toBeGreaterThan(0);
+  expect(
+    Math.min(...samples.map((sample) => sample.firstResultTop - sample.viewportTop)),
+  ).toBeGreaterThanOrEqual(0);
+  expect(Math.max(...samples.map((sample) => sample.scrollTop))).toBe(0);
+}
+
+export async function expectPrimaryCommandCenterActions(panel: Locator): Promise<void> {
+  const expectedActions = [
+    { title: "New workspace", shortcut: "⌘N" },
+    { title: "History" },
+    { title: "Schedules" },
+    { title: "Settings", shortcut: "⌘," },
+    { title: "Keyboard shortcuts", shortcut: "?" },
+  ] as const;
+
+  for (const action of expectedActions) {
+    const row = panel.getByRole("button").filter({ hasText: action.title });
+    await expect(row).toBeVisible();
+    if ("shortcut" in action) await expect(row).toContainText(action.shortcut);
+  }
+
+  await expect(panel.getByRole("button").filter({ hasText: "Add project" })).toHaveCount(0);
+  await expect(panel.getByRole("button").filter({ hasText: "Home" })).toHaveCount(0);
+
+  const input = panel.getByTestId("command-center-input");
+  await input.fill("add project");
+  await expect(panel.getByRole("button").filter({ hasText: "Add project" })).toBeVisible();
+  await expect(panel.getByRole("button").filter({ hasText: "Home" })).toHaveCount(0);
+  await input.fill("home");
+  await expect(panel.getByRole("button").filter({ hasText: "Home" })).toBeVisible();
+  await expect(panel.getByRole("button").filter({ hasText: "Add project" })).toHaveCount(0);
+  await input.fill("");
+}
+
+export async function expectVisibleKeyboardNavigationNotToScroll(
+  page: Page,
+  panel: Locator,
+): Promise<void> {
+  for (let index = 0; index < 4; index += 1) await page.keyboard.press("ArrowDown");
+
+  const scrollSamples = await panel
+    .getByRole("button")
+    .first()
+    .evaluate(async (firstResult) => {
+      let viewport = firstResult.parentElement;
+      while (viewport && viewport.scrollHeight <= viewport.clientHeight) {
+        viewport = viewport.parentElement;
+      }
+      if (!viewport) throw new Error("Could not find the command center scroll viewport");
+
+      const samples: number[] = [];
+      for (let frame = 0; frame < 20; frame += 1) {
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+        samples.push(viewport.scrollTop);
+      }
+      return samples;
+    });
+
+  expect(Math.max(...scrollSamples)).toBe(0);
+}
+
+export async function expectWorkspaceResultsToBeLimitedUntilSearch(panel: Locator): Promise<void> {
+  const workspaces = panel.locator(
+    '[data-testid^="command-center-workspace-"]:not([data-testid="command-center-workspace-subtitle"])',
+  );
+  const distinctWorkspaceCount = async () =>
+    new Set(
+      await workspaces.evaluateAll((elements) =>
+        elements.map((element) => element.getAttribute("data-testid")),
+      ),
+    ).size;
+
+  await expect.poll(distinctWorkspaceCount).toBe(5);
+
+  await panel.getByTestId("command-center-input").fill("Command Center Scroll");
+  await expect.poll(distinctWorkspaceCount).toBe(9);
+}
+
+export async function expectTightTwoLineResultSpacing(
+  panel: Locator,
+  title: string,
+): Promise<void> {
+  const row = panel.getByText(title, { exact: true }).locator("..");
+  const titleTop = await row
+    .getByText(title, { exact: true })
+    .evaluate((element) => element.getBoundingClientRect().top);
+  const subtitleTop = await row
+    .getByTestId("command-center-workspace-subtitle")
+    .evaluate((element) => element.getBoundingClientRect().top);
+  expect(subtitleTop - titleTop).toBeLessThanOrEqual(18);
+}
@@ -0,0 +1,66 @@
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+import { expect, type Locator, type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { openCommandCenter } from "./command-center";
+import { expectAppRoute } from "./route-assertions";
+import type { SeededWorkspace } from "./seed-client";
+import { getServerId } from "./server-id";
+import { expectTerminalTabOpen } from "./workspace-tabs";
+
+function action(panel: Locator, title: string): Locator {
+  const escapedTitle = title.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return panel.getByRole("button", { name: new RegExp(`^${escapedTitle}(?:\\s|$)`) });
+}
+
+export async function makeWorkspacePrimaryGitActionCommit(seeded: SeededWorkspace): Promise<void> {
+  writeFileSync(path.join(seeded.repoPath, "command-center-dirty.txt"), "dirty\n");
+  const refreshed = await seeded.client.checkoutRefresh(seeded.repoPath);
+  if (!refreshed.success) {
+    throw new Error(`Failed to refresh checkout: ${JSON.stringify(refreshed.error)}`);
+  }
+}
+
+export async function openWorkspaceFromCommandCenter(
+  page: Page,
+  seeded: SeededWorkspace,
+  title: string,
+): Promise<void> {
+  const panel = await openCommandCenter(page);
+  await panel.getByTestId("command-center-input").fill(title);
+  await page.keyboard.press("Enter");
+  await expectAppRoute(page, buildHostWorkspaceRoute(getServerId(), seeded.workspaceId), {
+    timeout: 30_000,
+  });
+}
+
+export async function expectDefaultWorkspaceActions(panel: Locator): Promise<void> {
+  await expect(panel.getByText("Workspace actions", { exact: true })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(action(panel, "New agent")).toBeVisible();
+  await expect(action(panel, "Commit")).toBeVisible();
+  await expect(action(panel, "Push")).toHaveCount(0);
+  await expect(action(panel, "New terminal")).toHaveCount(0);
+  await expect(action(panel, "Split pane right")).toHaveCount(0);
+  await expect(action(panel, "Home")).toHaveCount(0);
+  await expect(action(panel, "Add project")).toHaveCount(0);
+}
+
+export async function expectWorkspaceActionsAvailableThroughSearch(panel: Locator): Promise<void> {
+  const input = panel.getByTestId("command-center-input");
+  await input.fill("push");
+  await expect(action(panel, "Push")).toBeVisible();
+
+  await input.fill("home");
+  await expect(action(panel, "Home")).toBeVisible();
+
+  await input.fill("git");
+  await expect.poll(() => panel.getByRole("button").count()).toBeGreaterThan(1);
+}
+
+export async function createTerminalFromCommandCenter(page: Page, panel: Locator): Promise<void> {
+  await panel.getByTestId("command-center-input").fill("terminal");
+  await page.keyboard.press("Enter");
+  await expectTerminalTabOpen(page);
+}
@@ -156,6 +156,7 @@ test.describe("provider settings overlay stack", () => {

      await page.keyboard.press("ControlOrMeta+K");
      await expect(commandCenter).toBeVisible({ timeout: 10_000 });
+      await commandCenter.getByTestId("command-center-input").fill("add project");
      await commandCenter.getByText("Add project", { exact: true }).click();
      const addProject = page.getByTestId("add-project-flow");
      await expect(addProject).toBeVisible({ timeout: 10_000 });