Polish Agent configuration and unify advanced settings

tests/e2e/cloud-agent-platform-avatars.spec.ts

@@ -137,6 +137,86 @@ async function expectImagesLoaded(page: Page, selector = 'img') {
   }))).toBe(true);
 }
 
+async function expectConfigurationBounds(page: Page) {
+  await expectNoOverflow(page);
+  await expect.poll(() => page.getByTestId('cloud-agent-editor').getByLabel('名称', { exact: true })
+    .evaluate(element => element.getBoundingClientRect().width)).toBeGreaterThanOrEqual(96);
+  // Document width alone misses controls clipped by the editor's overflow container.
+  const clipped = await page.getByTestId('cloud-agent-editor').evaluate(editor => {
+    const scroll = editor.querySelector('.agent-config-scroll')!;
+    const scrollBounds = scroll.getBoundingClientRect();
+    return [...editor.querySelectorAll('button, input, textarea, select, h2, summary, .agent-config-card')]
+      .filter(element => element.getClientRects().length > 0 && !element.classList.contains('sr-only'))
+      .flatMap(element => {
+        const bounds = element.getBoundingClientRect();
+        const insideScroll = scroll.contains(element);
+        const left = insideScroll ? scrollBounds.left : 0;
+        const right = insideScroll ? scrollBounds.right : innerWidth;
+        return bounds.left < left - 1 || bounds.right > right + 1
+          ? [{ element: element.tagName, label: element.getAttribute('aria-label') ?? element.textContent?.trim(), left: bounds.left, right: bounds.right }]
+          : [];
+      });
+  });
+  expect(clipped).toEqual([]);
+}
+
+for (const width of [375, 768, 1024, 1440]) {
+  test(`introduction cards and one-page advanced settings fit and scroll at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 850 });
+    await installFixture(page, [draftAgent]);
+    await page.goto(baseUrl);
+    await page.getByRole('button', { name: '继续制作', exact: true }).click();
+    const editor = page.getByTestId('cloud-agent-editor');
+    const tabs = editor.getByRole('tablist', { name: '编辑设置', exact: true });
+    await expect(tabs.getByRole('tab')).toHaveCount(2);
+    await expect(editor.getByRole('heading', { name: '一句话介绍', exact: true })).toBeVisible();
+    await expect(editor.getByRole('heading', { name: '提示词', exact: true })).toBeVisible();
+    await expect(editor.locator('section.agent-config-card[data-tone="blue"]')).toHaveCSS('background-color', 'rgb(241, 246, 255)');
+    await expect(editor.locator('.agent-config-prompt[data-tone="lilac"]')).toHaveCSS('background-color', 'rgb(246, 242, 255)');
+    await editor.getByLabel('一句话介绍', { exact: true }).focus();
+    await expect(editor.getByLabel('一句话介绍', { exact: true })).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(editor.getByLabel('提示词', { exact: true })).toBeFocused();
+    await expectConfigurationBounds(page);
+    if (width === 375 || width === 1440) {
+      await page.screenshot({ path: test.info().outputPath(`agent-introduction-prompt-${width}.png`), animations: 'disabled' });
+    }
+
+    await tabs.getByRole('tab', { name: '高级设置', exact: true }).click();
+    const advanced = editor.locator('.agent-advanced-settings');
+    await expect(tabs.getByRole('tab', { name: '高级设置', exact: true })).toHaveAttribute('aria-selected', 'true');
+    await expect(advanced.getByRole('navigation')).toHaveCount(0);
+    await expect(advanced.getByRole('tablist')).toHaveCount(0);
+    const headings = ['模型', '工具箱（Tool）', '做事手册（Skill）', 'MCP 服务', '子智能体', '知识库', '费用上限', '运行限制'];
+    for (const name of headings) await expect(advanced.getByRole('heading', { name, exact: true })).toBeVisible();
+    await expect(advanced.getByRole('heading').first()).toHaveText('模型');
+    await expect(advanced.getByLabel('模型', { exact: true })).toHaveAttribute('required', '');
+    await expect(advanced.getByText('选它做事时能用的工具。', { exact: true })).toBeVisible();
+    await expect(advanced.getByText('给它一本手册，照着方法做。', { exact: true })).toBeVisible();
+    await expect(advanced.getByLabel('模型', { exact: true })).toBeInViewport();
+    await expectConfigurationBounds(page);
+    if (width === 375 || width === 1440) {
+      await page.screenshot({ path: test.info().outputPath(`agent-advanced-upper-${width}.png`), animations: 'disabled' });
+    }
+    await advanced.getByLabel('单次运行时限（秒）', { exact: true }).scrollIntoViewIfNeeded();
+    await expect(advanced.getByLabel('单次运行时限（秒）', { exact: true })).toBeInViewport();
+    await expect(advanced.getByLabel('每日上限（词元点数）', { exact: true })).toBeVisible();
+    await expectConfigurationBounds(page);
+    if (width === 375 || width === 1440) {
+      await page.screenshot({ path: test.info().outputPath(`agent-advanced-lower-${width}.png`), animations: 'disabled' });
+    }
+    // Returning from the bottom resets the view to the introduction, without changing a draft.
+    await tabs.getByRole('tab', { name: '介绍与提示词', exact: true }).click();
+    await expect(editor.getByLabel('一句话介绍', { exact: true })).toBeInViewport();
+    await expect(editor.getByLabel('提示词', { exact: true })).toHaveValue(draftAgent.system_prompt);
+    const calls = await page.evaluate(() => (window as unknown as FixtureWindow).__agentAvatarFixture.calls);
+    expect(calls.filter(call => call.method === 'PATCH' || call.path === '/api/cloud-agents/avatars/preset'
+      || (call.method === 'POST' && call.path === '/api/cloud-agents/agents'))).toEqual([]);
+    expect(calls.filter(call => call.path === '/api/cloud-agents/actions')
+      .every(call => ['catalog', 'resources', 'knowledge', 'budget', 'access'].includes(String(call.input?.operation)))).toBe(true);
+  });
+}
+
 for (const width of [375, 1366]) {
   test(`pastel Agent cards and explicit chat/adjust controls remain usable at ${width}px`, async ({ page }) => {
     await page.setViewportSize({ width, height: 850 });