Switch reasoning, mode, plan, and fast from the Command Center (#2274)

* Switch reasoning, mode, plan, and fast from the Command Center

Extend the Command Center (Cmd-K) with selectors for a focused agent's
Thinking (reasoning effort), access Mode, Plan mode, and Fast mode,
mirroring the model switcher. Typing surfaces tiered "<Setting> › <Value>"
breadcrumb rows with icons and a check on the current value, for both a
running agent and a new draft tab. Rows only appear while typing, so the
default palette is unchanged.

- Thinking and Mode are multi-option selects; Plan mode and Fast mode are
  On/Off toggles.
- Plan mode is dual-natured: a permission mode for Claude/Copilot/OpenCode
  (excluded from the Mode list, given its own toggle) and the plan_mode
  feature for Codex. Fast mode drives the fast_mode feature (model-gated).
- All logic lives in command-center/agent-setting-contributions.ts as pure,
  unit-tested builders, with a small icon helper and a hook that registers
  the running-agent selectors; the draft registers from its composer tab.
  No changes to the command palette component and no protocol changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Unify Command Center agent controls

* refactor: clarify agent control ownership

* refactor(app): tighten command center agent controls

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>

packages/app/e2e/command-center-agent-controls.spec.ts

@@ -0,0 +1,110 @@
+import { test } from "./fixtures";
+import { closeCommandCenter, openCommandCenter } from "./helpers/command-center";
+import {
+  applyCommandCenterAgentControls,
+  chooseCommandCenterAgentControl,
+  expectCommandCenterAgentControlSelected,
+  expectFocusedAgentControls,
+  expectWorkspaceAgentConfiguration,
+  submitDraftAgent,
+  waitForDraftComposer,
+} from "./helpers/command-center-agent-controls";
+import { clickNewChat, gotoWorkspace } from "./helpers/launcher";
+import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+import { seedWorkspace } from "./helpers/seed-client";
+import { getServerId } from "./helpers/server-id";
+
+const CREATE_AGENT_PREFERENCES_KEY = "@paseo:create-agent-preferences";
+
+async function seedMockDraftPreferences(page: import("@playwright/test").Page): Promise<void> {
+  await page.addInitScript(
+    ({ preferencesKey, serverId }) => {
+      localStorage.setItem(
+        preferencesKey,
+        JSON.stringify({
+          serverId,
+          provider: "mock",
+          providerPreferences: {
+            mock: {
+              model: "five-minute-stream",
+              mode: "load-test",
+            },
+          },
+        }),
+      );
+    },
+    { preferencesKey: CREATE_AGENT_PREFERENCES_KEY, serverId: getServerId() },
+  );
+}
+
+test.describe("Command Center agent controls", () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test("changes a running agent setting and preserves its selected row", async ({ page }) => {
+    const workspace = await seedMockAgentWorkspace({
+      repoPrefix: "command-center-live-controls-",
+      title: "Command Center live controls",
+      model: "five-minute-stream",
+    });
+    try {
+      // A stale runtime mode makes selecting the provider's supported mode
+      // exercise the live setting RPC instead of the selected-row no-op.
+      await workspace.client.setAgentMode(workspace.agentId, "legacy-mode");
+      await openAgentRoute(page, {
+        workspaceId: workspace.workspaceId,
+        agentId: workspace.agentId,
+      });
+      await openCommandCenter(page);
+      await chooseCommandCenterAgentControl({
+        page,
+        query: "load test",
+        choice: "Mode › Load test",
+      });
+      await expectWorkspaceAgentConfiguration(workspace, {
+        id: workspace.agentId,
+        provider: "mock",
+        model: "five-minute-stream",
+        modeId: "load-test",
+      });
+      await openCommandCenter(page);
+      await expectCommandCenterAgentControlSelected({
+        page,
+        query: "load test",
+        choice: "Mode › Load test",
+      });
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("applies draft model and setting choices to the created agent", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "command-center-draft-controls-" });
+    await seedMockDraftPreferences(page);
+
+    try {
+      await openDraftComposer(page, workspace.workspaceId);
+      await applyCommandCenterAgentControls(page, DRAFT_AGENT_CONTROL_CHOICES);
+      await closeCommandCenter(page);
+      await submitDraftAgent(page, "Create an agent with Command Center draft choices");
+      await expectFocusedAgentControls(page, DRAFT_AGENT_CONTROL_CHOICES);
+      await expectWorkspaceAgentConfiguration(workspace, {
+        provider: "mock",
+        model: "ten-second-stream",
+        modeId: "load-test",
+      });
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+});
+
+const DRAFT_AGENT_CONTROL_CHOICES = [
+  { query: "ten second stream", choice: "Model › Mock Load Test › Ten second stream" },
+  { query: "load test", choice: "Mode › Load test" },
+] as const;
+
+async function openDraftComposer(page: import("@playwright/test").Page, workspaceId: string) {
+  await gotoWorkspace(page, workspaceId);
+  await clickNewChat(page);
+  await waitForDraftComposer(page);
+}

packages/app/e2e/helpers/command-center-agent-controls.ts

@@ -0,0 +1,95 @@
+import { expect, type Page } from "@playwright/test";
+import type { SeededWorkspace } from "./seed-client";
+import { openCommandCenter } from "./command-center";
+
+export interface CommandCenterAgentControlChoice {
+  query: string;
+  choice: string;
+}
+
+export async function chooseCommandCenterAgentControl(input: {
+  page: Page;
+  query: string;
+  choice: string;
+}): Promise<void> {
+  const panel = input.page.getByTestId("command-center-panel");
+  await panel.getByRole("textbox").fill(input.query);
+  const choice = panel.getByRole("button", { name: input.choice });
+  await expect(choice).toBeVisible({ timeout: 30_000 });
+  await choice.click();
+}
+
+export async function expectCommandCenterAgentControlSelected(input: {
+  page: Page;
+  query: string;
+  choice: string;
+}): Promise<void> {
+  const panel = input.page.getByTestId("command-center-panel");
+  await panel.getByRole("textbox").fill(input.query);
+  const choice = panel.getByRole("button", { name: input.choice });
+  await expect(choice).toHaveRole("button");
+  await expect(choice).toHaveAttribute("aria-pressed", "true");
+}
+
+export async function applyCommandCenterAgentControls(
+  page: Page,
+  choices: readonly CommandCenterAgentControlChoice[],
+): Promise<void> {
+  for (const choice of choices) {
+    await openCommandCenter(page);
+    await chooseCommandCenterAgentControl({ page, ...choice });
+  }
+}
+
+export async function expectFocusedAgentControls(
+  page: Page,
+  choices: readonly CommandCenterAgentControlChoice[],
+): Promise<void> {
+  await openCommandCenter(page);
+  for (const choice of choices) {
+    await expectCommandCenterAgentControlSelected({ page, ...choice });
+  }
+}
+
+export async function submitDraftAgent(page: Page, prompt: string): Promise<void> {
+  const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+  await expect(composer).toBeEditable({ timeout: 30_000 });
+  await composer.fill(prompt);
+  await composer.press("Enter");
+  await expect(page.getByText(prompt, { exact: true }).first()).toBeVisible({ timeout: 30_000 });
+}
+
+export async function waitForDraftComposer(page: Page): Promise<void> {
+  await expect(page.getByRole("textbox", { name: "Message agent..." }).first()).toBeEditable({
+    timeout: 30_000,
+  });
+}
+
+export async function expectWorkspaceAgentConfiguration(
+  workspace: Pick<SeededWorkspace, "client" | "workspaceId">,
+  expected: { id?: string; provider: string; model: string | null; modeId: string | null },
+): Promise<void> {
+  await expect
+    .poll(
+      async () => {
+        const entries = (await workspace.client.fetchAgents({ scope: "active" })).entries;
+        const agent = entries
+          .map((entry) => entry.agent)
+          .find(
+            (candidate) =>
+              candidate.workspaceId === workspace.workspaceId &&
+              (expected.id === undefined || candidate.id === expected.id),
+          );
+        return agent
+          ? {
+              id: agent.id,
+              provider: agent.provider,
+              model: agent.model,
+              modeId: agent.currentModeId,
+            }
+          : null;
+      },
+      { timeout: 30_000 },
+    )
+    .toMatchObject(expected);
+}

packages/app/e2e/helpers/command-center.ts

@@ -7,3 +7,8 @@ export async function openCommandCenter(page: Page): Promise<Locator> {
   await expect(panel).toBeVisible({ timeout: 30_000 });
   return panel;
 }
+
+export async function closeCommandCenter(page: Page): Promise<void> {
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("command-center-panel")).not.toBeVisible();
+}

packages/app/e2e/helpers/seed-client.ts

@@ -129,6 +129,7 @@ export interface SeedDaemonClient {
     }>;
   }>;
   updateAgent(agentId: string, updates: { name?: string }): Promise<void>;
+  setAgentMode(agentId: string, modeId: string): Promise<unknown>;
   waitForAgentUpsert(
     agentId: string,
     predicate: (snapshot: { status: string }) => boolean,