feat(ui): introduce each teacher with an individual welcome bubble

tests/e2e/teacher-preview-layout.spec.ts

@@ -4,7 +4,7 @@ import { resolve } from 'node:path';
 
 let server: ViteDevServer;
 let baseUrl: string;
-test.use({ channel: process.env.MAKELORE_LAYOUT_BROWSER_CHANNEL, video: 'off' });
+test.use({ headless: true, channel: process.env.MAKELORE_LAYOUT_BROWSER_CHANNEL, video: 'off' });
 test.beforeAll(async () => {
   server = await createServer({
     configFile: false,
@@ -35,6 +35,50 @@ test.beforeAll(async () => {
 });
 test.afterAll(async () => { await server?.close(); });
 
+for (const width of [375, 768, 1280]) {
+  test(`all teacher introductions fit at ${width}px and keep the native preview clear`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 });
+    await page.goto(baseUrl + '?agents=3&welcomes');
+    const group = page.getByTestId('teacher-welcomes');
+    await expect(group.locator('.teacher-welcome-card')).toHaveCount(3);
+    await expect(group).toBeInViewport({ ratio: 1 });
+    for (const card of await group.locator('.teacher-welcome-card').all()) {
+      await expect(card).toBeInViewport({ ratio: 1 });
+      expect(await card.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
+    }
+    await expect.poll(async () => {
+      const [bubble, viewport] = await Promise.all([group.boundingBox(), page.getByTestId('agent-browser-viewport').boundingBox()]);
+      return !!bubble && !!viewport && viewport.y >= bubble.y + bubble.height;
+    }).toBe(true);
+    await page.screenshot({ path: test.info().outputPath(`teacher-introductions-${width}.png`) });
+    await group.getByRole('button', { name: '收起智能体2的介绍' }).click();
+    await expect(group.locator('.teacher-welcome-card')).toHaveCount(2);
+    await group.getByRole('button', { name: '和智能体3聊聊' }).click();
+    await expect(page.getByRole('button', { name: '与智能体3聊天' })).toHaveAttribute('aria-pressed', 'true');
+    await expect(group).toHaveCount(0);
+    await page.getByRole('button', { name: '关闭智能体栏' }).click();
+    await expect(group.locator('.teacher-welcome-card')).toHaveCount(1);
+    await group.getByRole('button', { name: '先自己试试' }).click();
+    await expect(group).toHaveCount(0);
+  });
+}
+
+test('many teacher introductions remain scrollable and honor reduced motion', async ({ page }) => {
+  await page.setViewportSize({ width: 520, height: 600 });
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.goto(baseUrl + '?agents=8&welcomes');
+  const group = page.getByTestId('teacher-welcomes');
+  await expect(group).toBeInViewport({ ratio: 1 });
+  await expect(group.locator('.teacher-welcome-card')).toHaveCount(8);
+  await expect(group.locator('.teacher-welcome-card').first()).toHaveCSS('animation-name', 'none');
+  const last = group.getByRole('button', { name: '和智能体8聊聊' });
+  await last.scrollIntoViewIfNeeded();
+  await expect(last).toBeInViewport({ ratio: 1 });
+  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(520);
+  await group.getByRole('button', { name: '先自己试试' }).click();
+  await expect(group).toHaveCount(0);
+});
+
 for (const width of [520, 1000]) {
   test(`distributed agent tabs scroll inside the title bar at ${width}px`, async ({ page }) => {
     await page.setViewportSize({ width, height: 800 });