Files
paseo/packages/app/e2e/helpers/command-center-agent-controls.ts
T
35f985baff 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>
2026-07-31 17:37:04 +02:00

96 lines
3.1 KiB
TypeScript

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);
}