@sleep2agi/agent-network-dashboard 0.6.3-preview.49 → 0.6.3-preview.50

package/tests/e2e-sidebar-icon-rail.spec.ts

@@ -0,0 +1,261 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE = process.env.TEST_URL || 'http://localhost:3100';
+
+// Sidebar 3rd mode ('icon-rail', Feishu-style) — 3 tests per 通信龙 brief:
+//   1. Renders correctly (mode attr + width class + no text + aria-labels)
+//   2. Toggle cycles expanded → collapsed → icon-rail → expanded AND
+//      localStorage persists across a fresh page context
+//   3. Unread badge appears on the correct nav item when there are
+//      unread messages (data pulled from mocked /api/hub/messages —
+//      useChatUnread's real data path)
+//
+// NOT touched here — #492 / Stage A / Stage B tests. This file is
+// scoped to Sidebar only; if any assertion needs an existing testid,
+// it uses the ones already declared on the Sidebar element itself.
+
+// Login cache — the dashboard's rate-limit is 10 logins / 15 min / IP
+// (通信龙 07-31). Every test in this file logs in once per worker, and
+// subsequent tests reuse the cached cookie value via context.addCookies.
+// A per-file suite of 4 tests × 1 login each was fine on cold cache but
+// combined with rerun-during-dev-iteration it walked us straight into
+// the ceiling. Module-level var scopes per-Playwright-worker (each
+// worker = fresh Node process), so parallel workers still each get one
+// login. Cap workers via CLI to avoid parallel bursts.
+let cachedCookie: string | undefined;
+
+async function login(context: Page['context'] extends () => infer C ? C : never) {
+  if (cachedCookie) {
+    await context.addCookies([{
+      name: 'anet_dashboard_session',
+      value: cachedCookie,
+      domain: new URL(BASE).hostname,
+      path: '/',
+    }]);
+    return;
+  }
+  const res = await context.request.post(`${BASE}/api/auth/login`, {
+    data: { password: process.env.ANET_DASHBOARD_PASSWORD || 'admin123' },
+  });
+  const setCookie = res.headers()['set-cookie'] || '';
+  const m = setCookie.match(/anet_dashboard_session=([^;]+)/);
+  if (m) {
+    cachedCookie = decodeURIComponent(m[1]);
+    await context.addCookies([{
+      name: 'anet_dashboard_session',
+      value: cachedCookie,
+      domain: new URL(BASE).hostname,
+      path: '/',
+    }]);
+  }
+}
+
+async function stubHub(page: Page, messages: object[] = []) {
+  // Minimum surface — Sidebar itself doesn't need most of these but
+  // pages it's mounted next to might, and we want the page to render
+  // past the loading skeleton so the sidebar is measurable.
+  await page.route('**/api/hub/status**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ sessions: [] }) }));
+  await page.route('**/api/hub/nodes**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ nodes: [] }) }));
+  await page.route('**/api/hub/networks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ networks: [{ network_id: 'net_x', network_name: 'net_x' }] }) }));
+  await page.route('**/api/hub/health', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, version: '0.9.0-test', sse_connections: 0, sse_sessions: {} }) }));
+  await page.route('**/api/hub/tasks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks: [] }) }));
+  await page.route('**/api/hub/stats**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) }));
+  await page.route('**/api/hub/messages**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ messages }) }));
+}
+
+test.describe('Sidebar icon-rail (3rd mode)', () => {
+  test('icon-rail mode renders w-14 + no text labels + aria-labels on every nav item', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Pre-set mode BEFORE navigation so we test the render path
+    // straight into icon-rail, not the cycle path.
+    await page.addInitScript(() => window.localStorage.setItem('anet-sidebar-mode', 'icon-rail'));
+    await page.goto(`${BASE}/`);
+    // Sidebar always renders; the mode attribute is the switch.
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'icon-rail', { timeout: 15000 });
+    // Width — Tailwind w-14 = 3.5rem = 56px at default root size.
+    // Assert numerically rather than by class to survive class-name
+    // refactors.
+    const w = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    expect(w).toBeGreaterThanOrEqual(48);
+    expect(w).toBeLessThanOrEqual(64);
+    // No visible text labels on nav items — icon-only. Test asserts
+    // that the aria-label carries semantic name (accessibility) while
+    // the visible text of each item is empty/whitespace.
+    const navItems = page.locator('[data-nav-item][data-nav-href]');
+    const count = await navItems.count();
+    expect(count).toBeGreaterThanOrEqual(6);  // Overview/Tasks/Nodes/Servers/Providers/Admin at minimum
+    for (let i = 0; i < count; i++) {
+      const item = navItems.nth(i);
+      const aria = await item.getAttribute('aria-label');
+      expect(aria, `nav item #${i} must have aria-label`).toBeTruthy();
+      const visibleText = (await item.innerText()).trim();
+      // "innerText" for a link with only an <svg> child returns empty
+      // or newline — assert it's not the visible label text.
+      expect(visibleText.length).toBeLessThanOrEqual(3);  // '', or a badge digit
+    }
+  });
+
+  test('cycle toggle: expanded → collapsed → icon-rail → expanded, and localStorage updates', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Seed the starting point explicitly instead of relying on the
+    // default. 07-31 flipped the default from 'expanded' to
+    // 'icon-rail' — this test asserts the CYCLE mechanic (walks the
+    // three modes and updates localStorage), not the default choice,
+    // so we seed 'expanded' up front to keep the assertion sequence
+    // stable across default flips.
+    await page.addInitScript(() => window.localStorage.setItem('anet-sidebar-mode', 'expanded'));
+    await page.goto(`${BASE}/`);
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'expanded', { timeout: 15000 });
+
+    // Click 1 → collapsed
+    await page.locator('[data-testid="sidebar-mode-cycle"]').click();
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'collapsed');
+    expect(await page.evaluate(() => window.localStorage.getItem('anet-sidebar-mode'))).toBe('collapsed');
+
+    // Click 2 → icon-rail
+    await page.locator('[data-testid="sidebar-mode-cycle"]').click();
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'icon-rail');
+    expect(await page.evaluate(() => window.localStorage.getItem('anet-sidebar-mode'))).toBe('icon-rail');
+
+    // Click 3 → back to expanded (cycle wraps)
+    await page.locator('[data-testid="sidebar-mode-cycle"]').click();
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'expanded');
+    expect(await page.evaluate(() => window.localStorage.getItem('anet-sidebar-mode'))).toBe('expanded');
+  });
+
+  test('unread badge appears on /nodes nav only in icon-rail mode, and matches badgeLabel(totalUnread)', async ({ page, context }) => {
+    await login(context);
+    // 3 unread messages from a non-self alias — useChatUnread reads
+    // /api/hub/messages, filters out self-sent and already-read
+    // (localStorage is empty → nothing read yet), then sums into
+    // totalUnread. Fresh localStorage means all 3 count.
+    // useChatUnread uses from_alias / to_alias (NOT from_session), and
+    // the message MUST be addressed TO a userish name ('admin' /
+    // 'dashboard' / '') and FROM a non-userish alias — this is the
+    // "message for the current operator, not fleet-chatter" filter.
+    //
+    // 🔴 Also: readStoredMap auto-seeds a `__baseline` = new Date() on
+    // first read (chat-unread.ts:55-63 — synchronous "first-visit
+    // floor" to prevent a badge storm on first login). If our mock
+    // messages have `created_at <= baseline`, they'd be treated as
+    // "already read". So future-date them by 1 minute — well past the
+    // baseline set during hook init.
+    const futureIso = new Date(Date.now() + 60_000).toISOString();
+    const msgs = [
+      { id: 'm1', from_alias: 'peer-a', to_alias: 'admin', created_at: futureIso, content: 'ping 1' },
+      { id: 'm2', from_alias: 'peer-b', to_alias: 'admin', created_at: futureIso, content: 'ping 2' },
+      { id: 'm3', from_alias: 'peer-a', to_alias: 'admin', created_at: futureIso, content: 'ping 3' },
+    ];
+    await stubHub(page, msgs);
+    await page.addInitScript(() => {
+      window.localStorage.setItem('anet-sidebar-mode', 'icon-rail');
+      // Clear any stray chat-read baselines so all mock messages count.
+      Object.keys(window.localStorage)
+        .filter(k => k.startsWith('anet_chat_read_v1:'))
+        .forEach(k => window.localStorage.removeItem(k));
+    });
+    await page.goto(`${BASE}/`);
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'icon-rail', { timeout: 15000 });
+
+    // Give the SWR fetch + unread computation a moment.
+    await page.waitForTimeout(1500);
+
+    // Badge attribute on the /nodes nav item — count as data-badge.
+    // Also assert the visible red pill exists with the right label.
+    const nodesNav = page.locator('[data-nav-item][data-nav-href="/nodes"]');
+    const badgeAttr = await nodesNav.getAttribute('data-badge');
+    expect(badgeAttr, 'nodes nav should carry data-badge in icon-rail with unread > 0').toBe('3');
+    const badge = nodesNav.locator('[data-nav-badge]');
+    await expect(badge).toHaveText('3');
+
+    // Sibling assertion: an entry with NO unread (e.g. /admin) MUST
+    // NOT carry the data-badge attribute. This is the exclusion side
+    // of the coverage — without it, a bug that puts the badge on all
+    // items would pass the badge=3 check silently.
+    const adminNav = page.locator('[data-nav-item][data-nav-href="/admin"]');
+    expect(await adminNav.getAttribute('data-badge')).toBeNull();
+    expect(await adminNav.locator('[data-nav-badge]').count()).toBe(0);
+  });
+
+  // 通信龙 07-31 round-1 feedback — "断言'名字文本不可见'是弱的，组件
+  // 整个没渲染出来那条也会绿。必配同源正向断言 (feedback_silent_
+  // failure_needs_independent_review)." This test is that companion:
+  // in EXPANDED mode the labels ARE visible with the exact text
+  // ("Overview" / "Tasks" / ...) AND the sidebar is measurably WIDER
+  // than icon-rail. Without this, test 1 could pass on a bug where
+  // the whole nav failed to mount (0 items = 0 visible labels = pass).
+  test('symmetry — expanded shows labels visibly, icon-rail hides them, widths ordered, item count preserved', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+
+    // Round 1 — start EXPANDED, count items + assert labels visible.
+    await page.addInitScript(() => window.localStorage.setItem('anet-sidebar-mode', 'expanded'));
+    await page.goto(`${BASE}/`);
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'expanded', { timeout: 15000 });
+
+    const expandedWidth = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    const expandedItemCount = await page.locator('[data-nav-item]').count();
+    // Sanity — expected 7 items in NAV_ITEMS (Overview through Settings).
+    expect(expandedItemCount).toBeGreaterThanOrEqual(6);
+    // Positive label visibility — at least one KNOWN label must be
+    // present in the visible text of its nav item. This kills the
+    // "nav failed to mount" false green.
+    const overviewNav = page.locator('[data-nav-item][data-nav-href="/"]');
+    await expect(overviewNav).toContainText('Overview');
+    const tasksNav = page.locator('[data-nav-item][data-nav-href="/tasks"]');
+    await expect(tasksNav).toContainText('Tasks');
+
+    // Round 2 — cycle to icon-rail via the toggle button (2 clicks:
+    // expanded → collapsed → icon-rail). page.reload() would re-run
+    // addInitScript and clobber the localStorage we set, so we use
+    // in-place mode changes instead.
+    await page.locator('[data-testid="sidebar-mode-cycle"]').click();
+    await page.locator('[data-testid="sidebar-mode-cycle"]').click();
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'icon-rail', { timeout: 15000 });
+
+    const railWidth = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    const railItemCount = await page.locator('[data-nav-item]').count();
+    // Transitivity: same nav items exist, just collapsed. Kills the
+    // "icon-rail dropped nav items" bug that would otherwise render
+    // as "text absent" (which the "no visible text" assertion would
+    // spuriously interpret as success).
+    expect(railItemCount).toBe(expandedItemCount);
+    // Width delta must be REAL — >100px difference is the min anyone
+    // could reasonably call "narrower". Numeric assertion so a bug
+    // that leaves the class but breaks the width still reds.
+    expect(expandedWidth - railWidth).toBeGreaterThan(100);
+    // 🔴 Counting assertion FIRST (通信龙 07-31 R3 feedback: witnessed-
+    // red should show numbers, not just "expected true got false").
+    // Count how many nav items in icon-rail mode have any of the
+    // known labels visible in their rendered innerText.
+    //   correct value  = 0
+    //   mutation "labels leak back" = N (== nav item count)
+    // Fires BEFORE the substring assertion below so a "labels leaked"
+    // regression reds here with the exact leak count, not with a
+    // substring hit that hides the magnitude.
+    const KNOWN_LABELS = ['Overview', 'Tasks', 'Nodes', 'Servers', 'Providers', 'Admin', 'Settings'];
+    const visibleLabelCount = await page.locator('[data-nav-item]').evaluateAll((nodes, labels) => {
+      return nodes.filter(n => {
+        const text = (n as HTMLElement).innerText.trim();
+        return (labels as string[]).some(l => text.includes(l));
+      }).length;
+    }, KNOWN_LABELS);
+    expect(visibleLabelCount).toBe(0);
+
+    // Substring narrow-check on a single well-known item — same
+    // invariant, redundant but useful signal on which item leaked.
+    const nodesNav = page.locator('[data-nav-item][data-nav-href="/nodes"]');
+    const visibleText = (await nodesNav.innerText()).trim();
+    expect(visibleText).not.toContain('Nodes');
+    expect(await nodesNav.getAttribute('aria-label')).toBe('Nodes');
+  });
+});

package/tests/e2e-stage-b-chat-pane.spec.ts

@@ -221,3 +221,289 @@ test.describe('Stage B — persistent chat pane + /nodes/[alias] routing', () =>
     await expect(page.locator('[data-node-card]')).toHaveCount(0);
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────
+// Stage D — the page never scrolls; each column scrolls itself.
+// 通信龙's production measurement after Stage C: page height 11806px,
+// rail 11775px (199 rows, no own scroll), chat-pane sticky top=-791px —
+// sticky referenced ancestors with overflow auto while the DOCUMENT was
+// the actual scroller, so the pane scrolled away and the chat looked
+// dead. Fix under test: root h-[100dvh] overflow-hidden, rail + middle
+// + chat each overflow-y-auto, sticky gone. Wide fixture (60 nodes) so
+// the assertions actually discriminate — with 3 nodes the page was
+// never tall enough to fail.
+// Plus SPEC.md §2 column base colors: list #0F1320, chat #141826,
+// 1px rgba(255,255,255,0.06) between them.
+// ─────────────────────────────────────────────────────────────────────
+const WIDE_N = 60;
+const WIDE_STATUS = {
+  sessions: Array.from({ length: WIDE_N }, (_, i) => ({
+    alias: `stage-d-${i + 1}`, status: 'idle', network_id: 'net_x',
+  })),
+};
+const WIDE_NODES = {
+  nodes: Array.from({ length: WIDE_N }, (_, i) => ({
+    alias: `stage-d-${i + 1}`, team: null, tags: [],
+  })),
+};
+const WIDE_HEALTH = {
+  ok: true, version: '0.9.0-test', sse_connections: WIDE_N,
+  sse_sessions: Object.fromEntries(
+    Array.from({ length: WIDE_N }, (_, i) => [`net_x:stage-d-${i + 1}`, 1]),
+  ),
+};
+
+async function mockWide(page: Page) {
+  await page.route('**/api/hub/status**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(WIDE_STATUS) }));
+  await page.route('**/api/hub/nodes**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(WIDE_NODES) }));
+  await page.route('**/api/hub/health', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(WIDE_HEALTH) }));
+  await page.route('**/api/hub/tasks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks: [] }) }));
+  await page.route('**/api/hub/stats**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) }));
+  await page.route('**/api/hub/messages**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ messages: [] }) }));
+}
+
+test.describe('Stage D — per-column scrolling, page never scrolls', () => {
+  test('selected + 60 nodes: document does not scroll; rail scrolls to the last node; pane stays put; composer visible', async ({ page, context }) => {
+    await login(context);
+    await mockWide(page);
+    await page.goto(`${BASE}/nodes/stage-d-1`);
+    await expect(pane(page)).toBeVisible({ timeout: 15000 });
+    await expect(page.locator('[data-node-list-item]')).toHaveCount(WIDE_N);
+
+    // 1. The DOCUMENT is not the scroller: page height ≈ viewport height.
+    const { scrollH, innerH } = await page.evaluate(() => ({
+      scrollH: document.documentElement.scrollHeight, innerH: window.innerHeight,
+    }));
+    expect(scrollH).toBeLessThanOrEqual(innerH + 2);
+
+    // Capture the pane's resting position BEFORE any rail scrolling —
+    // the invariant is "does not move", not "sits at literal 0": the
+    // AppShell HealthBanner keeps ~28px in flow above the page, so the
+    // pane's top equals the banner height, and asserting a hardcoded 0
+    // would encode the banner out of existence.
+    const paneTop0 = await pane(page).evaluate(el => el.getBoundingClientRect().top);
+    expect(paneTop0).toBeGreaterThanOrEqual(0);
+    expect(paneTop0).toBeLessThanOrEqual(40);
+
+    // 2. The RAIL is a real scroller (positive direction: it genuinely
+    //    overflows — otherwise "can scroll" would be vacuous)…
+    const railScroll = page.locator('[data-testid="node-list-scroll"]');
+    const { railSH, railCH } = await railScroll.evaluate(el => ({ railSH: el.scrollHeight, railCH: el.clientHeight }));
+    expect(railSH).toBeGreaterThan(railCH + 200);
+    // …and it reaches the LAST node (通信龙 判据: don't swap "page can't
+    //    scroll" in for "rail can't scroll either").
+    await railScroll.evaluate(el => { el.scrollTop = el.scrollHeight; });
+    await expect(page.locator(`[data-node-list-item][data-node-list-alias="stage-d-${WIDE_N}"]`)).toBeInViewport();
+
+    // 3. With the rail scrolled to the bottom, the chat pane has not moved.
+    const paneTop = await pane(page).evaluate(el => el.getBoundingClientRect().top);
+    expect(paneTop).toBe(paneTop0);
+
+    // 4. Composer stays inside the viewport.
+    const box = await pane(page).locator('textarea').boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.y + box!.height).toBeLessThanOrEqual(innerH);
+  });
+
+  test('unselected + 60 nodes: document still does not scroll; the MIDDLE column scrolls to the last card', async ({ page, context }) => {
+    await login(context);
+    await mockWide(page);
+    await page.goto(`${BASE}/nodes`);
+    await expect(page.locator('[data-node-card]')).toHaveCount(WIDE_N, { timeout: 15000 });
+
+    const { scrollH, innerH } = await page.evaluate(() => ({
+      scrollH: document.documentElement.scrollHeight, innerH: window.innerHeight,
+    }));
+    expect(scrollH).toBeLessThanOrEqual(innerH + 2);
+
+    // The table view must still reach node 60 via its own scroller —
+    // the same both-directions discipline as Stage C.
+    const last = page.locator(`[data-node-card][data-node-alias="stage-d-${WIDE_N}"]`);
+    await last.scrollIntoViewIfNeeded();
+    await expect(last).toBeInViewport();
+  });
+
+  test('SPEC §2 colors: list #0F1320, chat #141826, 1px rgba(255,255,255,0.06) between', async ({ page, context }) => {
+    await login(context);
+    await mockCommon(page);
+    await page.goto(`${BASE}/nodes/stage-b-1`);
+    await expect(pane(page)).toBeVisible({ timeout: 15000 });
+
+    const railBg = await page.locator('[data-node-list-rail]').evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(railBg).toBe('rgb(15, 19, 32)'); // #0F1320
+    const paneBg = await pane(page).evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(paneBg).toBe('rgb(20, 24, 38)'); // #141826
+    const railBorder = await page.locator('[data-node-list-rail]').evaluate(el => {
+      const cs = getComputedStyle(el);
+      return { color: cs.borderRightColor, width: cs.borderRightWidth };
+    });
+    expect(railBorder.width).toBe('1px');
+    expect(railBorder.color).toBe('rgba(255, 255, 255, 0.06)');
+    // Exactly ONE line between list and chat: the pane must not add its own left border.
+    const paneLeft = await pane(page).evaluate(el => getComputedStyle(el).borderLeftWidth);
+    expect(paneLeft).toBe('0px');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// Stage D ③ (Vincent's red box) — rail-top node search, persistent in
+// the SELECTED state (where the middle table + its magnifier search no
+// longer render, so without this the user couldn't search at all).
+// Backed by the same search state + pinyinMatch chain as the table.
+// ─────────────────────────────────────────────────────────────────────
+const PAY_ALIAS = '支付助手';
+const SEARCH_STATUS = {
+  sessions: [
+    { alias: PAY_ALIAS, status: 'idle', network_id: 'net_x' },
+    { alias: 'stage-e-1', status: 'idle', network_id: 'net_x' },
+    { alias: 'stage-e-2', status: 'working', network_id: 'net_x' },
+  ],
+};
+const SEARCH_NODES = { nodes: SEARCH_STATUS.sessions.map(s => ({ alias: s.alias, team: null, tags: [] })) };
+const SEARCH_HEALTH = {
+  ok: true, version: '0.9.0-test', sse_connections: 3,
+  sse_sessions: Object.fromEntries(SEARCH_STATUS.sessions.map(s => [`net_x:${s.alias}`, 1])),
+};
+
+async function mockSearch(page: Page) {
+  await page.route('**/api/hub/status**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_STATUS) }));
+  await page.route('**/api/hub/nodes**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_NODES) }));
+  await page.route('**/api/hub/health', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_HEALTH) }));
+  await page.route('**/api/hub/tasks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks: [] }) }));
+  await page.route('**/api/hub/stats**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) }));
+  await page.route('**/api/hub/messages**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ messages: [] }) }));
+}
+
+test.describe('Stage D ③ — rail-top node search', () => {
+  const items = (page: Page) => page.locator('[data-node-list-item]');
+  const railSearch = (page: Page) => page.locator('[data-testid="rail-search"]');
+
+  test('search box exists in the SELECTED state and filters by pinyin initials ("zf" → 支付助手)', async ({ page, context }) => {
+    await login(context);
+    await mockSearch(page);
+    await page.goto(`${BASE}/nodes/stage-e-1`);
+    await expect(pane(page)).toBeVisible({ timeout: 15000 });
+    // The whole point: the table (and its magnifier search) is gone here,
+    // but the rail search is present.
+    await expect(page.locator('[data-node-card]')).toHaveCount(0);
+    await expect(railSearch(page)).toBeVisible();
+
+    await railSearch(page).fill('zf');
+    await expect(items(page)).toHaveCount(1, { timeout: 10000 }); // pinyin dict loads lazily
+    await expect(page.locator(`[data-node-list-item][data-node-list-alias="${PAY_ALIAS}"]`)).toBeVisible();
+
+    await railSearch(page).fill('');
+    await expect(items(page)).toHaveCount(3);
+  });
+
+  test('filters by Chinese substring ("支付" → 支付助手)', async ({ page, context }) => {
+    await login(context);
+    await mockSearch(page);
+    await page.goto(`${BASE}/nodes/stage-e-1`);
+    await expect(railSearch(page)).toBeVisible({ timeout: 15000 });
+
+    await railSearch(page).fill('支付');
+    await expect(items(page)).toHaveCount(1, { timeout: 10000 });
+    await expect(page.locator(`[data-node-list-item][data-node-list-alias="${PAY_ALIAS}"]`)).toBeVisible();
+  });
+
+  test('no-match search shows count 0 PLUS an empty-state hint echoing the query', async ({ page, context }) => {
+    await login(context);
+    await mockSearch(page);
+    await page.goto(`${BASE}/nodes/stage-e-1`);
+    await expect(railSearch(page)).toBeVisible({ timeout: 15000 });
+
+    await railSearch(page).fill('zzz-no-such-node-999');
+    await expect(items(page)).toHaveCount(0);
+    // 通信龙 判据: "search broke and returned nothing" must be
+    // distinguishable from "genuinely no match" — the hint echoes the query.
+    await expect(page.locator('[data-testid="rail-search-empty"]')).toBeVisible();
+    await expect(page.locator('[data-testid="rail-search-empty"]')).toContainText('zzz-no-such-node-999');
+  });
+
+  test('unselected state: rail search filters rail AND table together (Stage A invariant holds)', async ({ page, context }) => {
+    await login(context);
+    await mockSearch(page);
+    await page.goto(`${BASE}/nodes`);
+    await expect(page.locator('[data-node-card]')).toHaveCount(3, { timeout: 15000 });
+
+    await railSearch(page).fill('支付');
+    await expect(items(page)).toHaveCount(1, { timeout: 10000 });
+    await expect(page.locator('[data-node-card]')).toHaveCount(1);
+    await expect(page.locator(`[data-node-card][data-node-alias="${PAY_ALIAS}"]`)).toBeVisible();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// Stage D — Vincent's exact scroll spec, BOTH halves pinned:
+// "右侧不能上下滑动" = no PAGE-level scroll from the chat column. It
+// does NOT mean the message history can't scroll — that would delete
+// the feature (and "page doesn't scroll" assertions alone would stay
+// green for that regression, 通信龙 判据). So this test loads enough
+// messages to overflow and asserts: page fixed + column fixed + the
+// MESSAGE AREA scrolls internally + composer never leaves the viewport.
+// ─────────────────────────────────────────────────────────────────────
+test.describe('Stage D — chat column fixed, message area scrolls inside', () => {
+  test('30 messages: page & pane do not move; history scrolls to the earliest message; composer stays visible', async ({ page, context }) => {
+    await login(context);
+    const tasks = Array.from({ length: 30 }, (_, i) => ({
+      task_id: `t-${i + 1}`,
+      from_name: 'dashboard',
+      to_name: 'stage-e-1',
+      status: 'replied',
+      priority: 'normal',
+      content: `chat msg ${i + 1}`,
+      result: `reply ${i + 1}`,
+      created_at: `2026-07-31 10:${String(10 + Math.floor(i / 2)).padStart(2, '0')}:${String((i % 2) * 30).padStart(2, '0')}`,
+    }));
+    await page.route('**/api/hub/status**', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_STATUS) }));
+    await page.route('**/api/hub/nodes**', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_NODES) }));
+    await page.route('**/api/hub/health', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(SEARCH_HEALTH) }));
+    await page.route('**/api/hub/tasks**', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks }) }));
+    await page.route('**/api/hub/stats**', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) }));
+    await page.route('**/api/hub/messages**', r =>
+      r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ messages: [] }) }));
+
+    await page.goto(`${BASE}/nodes/stage-e-1`);
+    await expect(pane(page)).toBeVisible({ timeout: 15000 });
+    const ms = page.locator('[data-testid="chat-messages-scroll"]');
+    await expect(ms.getByText('chat msg 30').first()).toBeVisible({ timeout: 15000 });
+
+    // Page level: nothing scrolls.
+    const { scrollH, innerH } = await page.evaluate(() => ({
+      scrollH: document.documentElement.scrollHeight, innerH: window.innerHeight,
+    }));
+    expect(scrollH).toBeLessThanOrEqual(innerH + 2);
+    const paneTop0 = await pane(page).evaluate(el => el.getBoundingClientRect().top);
+
+    // Message area level: it DOES scroll (positive half — it genuinely overflows)…
+    const { msSH, msCH } = await ms.evaluate(el => ({ msSH: el.scrollHeight, msCH: el.clientHeight }));
+    expect(msSH).toBeGreaterThan(msCH + 200);
+    // …and scrolling to the top reveals the EARLIEST message…
+    await ms.evaluate(el => { el.scrollTop = 0; });
+    await expect(ms.getByText('chat msg 1').first()).toBeVisible();
+    // …while the column itself has not moved and the composer is still on screen.
+    const paneTop1 = await pane(page).evaluate(el => el.getBoundingClientRect().top);
+    expect(paneTop1).toBe(paneTop0);
+    const box = await pane(page).locator('textarea').boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.y + box!.height).toBeLessThanOrEqual(innerH);
+  });
+});