@sleep2agi/agent-network-dashboard 0.6.3-preview.51 → 0.6.3-preview.52

package/tests/e2e-messages-spec-visual-align.spec.ts

@@ -0,0 +1,244 @@
+import { test, expect, Page, BrowserContext } from '@playwright/test';
+
+// /messages visual-alignment guardrail — pins the numbers that SPEC.md
+// §2/§5/§6 dictate for the chat area.
+//
+// Method (per 07-31 通信龙 判据 "断言事实，不是声明"):
+//   values are read from getComputedStyle() on the real rendered DOM,
+//   NOT from any data-* attribute that would just restate the class
+//   value. If the visual token drifts, the number drifts, the assertion
+//   goes red — assertion side is same-source with reality (the browser's
+//   computed style), not with the declaration (the Tailwind class).
+//
+// Witnessed-red discipline (per 07-31 通信龙 判据 "一条一条打，不是整体打"):
+//   each assertion is its own `test(...)` block so witnessed-red on any
+//   ONE token (revert only that class, re-run) turns exactly ONE test
+//   red. If reverting shell bg turned two assertions red, that would
+//   prove they're coupled — not each guarding its own thing.
+
+const BASE = process.env.TEST_URL || 'http://localhost:3200';
+
+const MOCK_MESSAGES = {
+  messages: [
+    // First bubble in the list — outgoing task alpha→beta, so bubble
+    // background hits the SPEC #1E3A5F "self" color.
+    {
+      id: 'm1',
+      type: 'task',
+      from_alias: 'alpha',
+      to_alias: 'beta',
+      priority: 'normal',
+      content: 'ALPHA_TO_BETA_BODY',
+      created_at: '2026-07-31 12:00:00',
+      task_id: 't1',
+    },
+    // Second — incoming reply from beta→alpha, so we can also probe
+    // the SPEC #1E293B "other" color separately.
+    {
+      id: 'm2',
+      type: 'reply',
+      from_alias: 'beta',
+      to_alias: 'alpha',
+      priority: 'normal',
+      content: 'BETA_TO_ALPHA_BODY',
+      created_at: '2026-07-31 12:00:05',
+    },
+    // Third — broadcast, verifies the SPEC §5 "left 2px accent bar"
+    // pattern that we reused for broadcast distinction.
+    {
+      id: 'm3',
+      type: 'broadcast',
+      from_alias: 'admin',
+      priority: 'high',
+      content: 'BROADCAST_BODY',
+      created_at: '2026-07-31 12:00:10',
+    },
+  ],
+};
+
+// Rate-limit avoidance (10/15min/IP): one login per worker, reuse the
+// cookie across all tests in this file. With --workers=1 the module
+// var is truly shared. If the first login gets 429 (limit exhausted),
+// throw immediately — otherwise every subsequent test would re-attempt
+// and burn budget further while all failing the same way.
+let cachedSessionCookie: string | null = null;
+let loginErr: Error | null = null;
+async function login(context: BrowserContext) {
+  if (loginErr) throw loginErr;
+  if (!cachedSessionCookie) {
+    const res = await context.request.post(`${BASE}/api/auth/login`, {
+      data: { password: process.env.ANET_DASHBOARD_PASSWORD || 'admin123' },
+    });
+    if (res.status() === 429) {
+      loginErr = new Error(
+        'Login rate-limited (10/15min). Restart dev to clear the counter.',
+      );
+      throw loginErr;
+    }
+    // playwright merges multi-value headers with newlines in headers();
+    // set-cookie is often multi-value so parse from headersArray instead.
+    const headers = res.headersArray();
+    const cookies = headers.filter((h) => h.name.toLowerCase() === 'set-cookie');
+    for (const c of cookies) {
+      const m = c.value.match(/anet_dashboard_session=([^;]+)/);
+      if (m) {
+        cachedSessionCookie = decodeURIComponent(m[1]);
+        break;
+      }
+    }
+    if (!cachedSessionCookie) {
+      loginErr = new Error(
+        `login 200 but no anet_dashboard_session cookie in headers: ${JSON.stringify(cookies)}`,
+      );
+      throw loginErr;
+    }
+  }
+  await context.addCookies([
+    {
+      name: 'anet_dashboard_session',
+      value: cachedSessionCookie,
+      domain: new URL(BASE).hostname,
+      path: '/',
+    },
+  ]);
+}
+
+async function mockAll(page: Page) {
+  await page.route('**/api/hub/messages**', (r) =>
+    r.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(MOCK_MESSAGES),
+    }),
+  );
+  await page.route('**/api/hub/status**', (r) =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: '{"sessions":[]}' }),
+  );
+  await page.route('**/api/hub/nodes**', (r) =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: '{"nodes":[]}' }),
+  );
+  await page.route('**/api/hub/health', (r) =>
+    r.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: '{"ok":true,"sse_sessions":{}}',
+    }),
+  );
+}
+
+async function gotoMessages(page: Page) {
+  await login(page.context());
+  await mockAll(page);
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(`${BASE}/messages`, { waitUntil: 'domcontentloaded' });
+  // Wait for the actual mocked message content — NOT just any
+  // rounded-2xl, because the loading skeleton is also rounded-2xl
+  // (h-20 rounded-2xl bg-gray-800/20). Waiting for the literal
+  // mock body text pins that SWR has settled and rendered.
+  // See feedback_checker_scope_bug_vacuous_pass.md.
+  await page.waitForFunction(
+    () => document.body.textContent?.includes('ALPHA_TO_BETA_BODY') || false,
+    undefined,
+    // Turbopack sometimes rebuilds after a source edit — first mount
+    // can take 10-20s. Give the ceiling headroom for CI-cold dev servers.
+    { timeout: 25_000 },
+  );
+}
+
+// Read computedStyle from the bubble that contains a known mock text.
+// Text-anchored so the query is stable against other rounded-2xl chrome
+// (headers, nav, etc.) — and independent of DOM ordering.
+async function bubbleStyleByContent(page: Page, needle: string) {
+  return await page.evaluate((n) => {
+    const bubbles = Array.from(document.querySelectorAll('div.rounded-2xl'));
+    const bubble = bubbles.find(
+      (el) =>
+        (el.textContent || '').includes(n) &&
+        Array.from(el.classList).some((c) => c.startsWith('bg-')),
+    );
+    if (!bubble) return null;
+    const cs = getComputedStyle(bubble);
+    return {
+      maxWidth: cs.maxWidth,
+      backgroundColor: cs.backgroundColor,
+      borderLeftColor: cs.borderLeftColor,
+      borderLeftWidth: cs.borderLeftWidth,
+    };
+  }, needle);
+}
+
+async function broadcastBubbleStyle(page: Page) {
+  return bubbleStyleByContent(page, 'BROADCAST_BODY');
+}
+
+test.describe('/messages · SPEC visual alignment', () => {
+  // ── 1. SHELL BG · SPEC §2 chat area #141826 ──────────────────
+  test('shell bg is SPEC #141826 (rgb 20,24,38)', async ({ page }) => {
+    await gotoMessages(page);
+    const bg = await page.evaluate(() => {
+      const shell = document.querySelector('[data-testid="messages-shell"]');
+      if (!shell) return null;
+      return getComputedStyle(shell).backgroundColor;
+    });
+    // #141826 rendered as computed rgb(20, 24, 38) by every browser.
+    expect(bg).toBe('rgb(20, 24, 38)');
+  });
+
+  // ── 2. BUBBLE MAX-WIDTH · SPEC §5 min(640px, 65%) ───────────
+  test('bubble max-width is SPEC min(640px, 65%)', async ({ page }) => {
+    await gotoMessages(page);
+    // Non-broadcast bubble — mock m1 body "ALPHA_TO_BETA_BODY".
+    const s = await bubbleStyleByContent(page, 'ALPHA_TO_BETA_BODY');
+    expect(s).not.toBeNull();
+    // Browser normalizes without spaces around the comma.
+    expect(s!.maxWidth).toBe('min(640px, 65%)');
+  });
+
+  // ── 3. BUBBLE BG · SPEC §6 tokens (either #1E3A5F self or #1E293B other) ──
+  test('bubble bg is one of the SPEC bubble tokens', async ({ page }) => {
+    await gotoMessages(page);
+    // Non-broadcast bubble — mock m1 body "ALPHA_TO_BETA_BODY".
+    const s = await bubbleStyleByContent(page, 'ALPHA_TO_BETA_BODY');
+    expect(s).not.toBeNull();
+    // Accept-set = exactly the SPEC-defined bubble bg tokens; NOT a
+    // shape match, NOT "any dark color" (see
+    // feedback_tolerant_assertion_accepts_noncompliance.md +
+    // feedback_allowlist_must_be_exact_value_not_shape_match.md).
+    expect(['rgb(30, 41, 59)', 'rgb(30, 58, 95)']).toContain(s!.backgroundColor);
+  });
+
+  // ── 4. BROADCAST · SPEC §5 left 2px accent bar #7DD3FC ──────
+  test('broadcast bubble has 2px left accent bar (#7DD3FC)', async ({ page }) => {
+    await gotoMessages(page);
+    const s = await broadcastBubbleStyle(page);
+    expect(s).not.toBeNull();
+    // #1E293B = the "other" bubble token — broadcast is not self.
+    expect(s!.backgroundColor).toBe('rgb(30, 41, 59)');
+    // 2px accent bar in SPEC accent color #7DD3FC = rgb(125, 211, 252).
+    expect(s!.borderLeftWidth).toBe('2px');
+    expect(s!.borderLeftColor).toBe('rgb(125, 211, 252)');
+  });
+
+  // ── 5. TIMESTAMP · SPEC §5 11px / #64748B ───────────────────
+  test('timestamp is 11px in SPEC #64748B', async ({ page }) => {
+    await gotoMessages(page);
+    // The timestamp span sits at the end of each bubble header — pinned
+    // by its ml-auto + text-[11px] combo. Query by containing formatted
+    // time text ("ago" wording from timeAgo). We assert on ANY such
+    // span — pipeline gives us multiple.
+    const stamp = await page.evaluate(() => {
+      const spans = Array.from(document.querySelectorAll('span'));
+      // Pick the first span whose Tailwind class list includes the
+      // 11px arbitrary utility. That class is set only by the
+      // timestamp render sites we changed.
+      const el = spans.find((s) => s.className.includes('text-[11px]'));
+      if (!el) return null;
+      const cs = getComputedStyle(el);
+      return { fontSize: cs.fontSize, color: cs.color };
+    });
+    expect(stamp).not.toBeNull();
+    expect(stamp!.fontSize).toBe('11px');
+    // #64748B rendered as rgb(100, 116, 139).
+    expect(stamp!.color).toBe('rgb(100, 116, 139)');
+  });
+});

package/tests/e2e-pin-mute-attr-always-present.spec.ts

@@ -0,0 +1,171 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE = process.env.TEST_URL || 'http://localhost:3100';
+
+// 通信龙 07-31: attribute-always-present guarantee for pin/mute.
+//
+// The wire that USED to emit `data-node-pinned="true" | undefined` made a
+// gate script that counts "rows with the attribute" indistinguishable
+// from a wire that was ripped out — both looked like zero. This spec
+// enforces the new invariant AND proves the attribute tracks real state
+// (not a hardcoded literal that would also pass the capability check).
+//
+// TWO assertions, both required:
+//   (A) capability   — every rail row emits data-node-pinned AND
+//                      data-node-muted, and the value is 'true' | 'false'
+//                      (never absent, never something else). If a future
+//                      refactor drops the emit, THIS reds.
+//   (B) real state   — toggling pin on one row flips ITS attribute from
+//                      'false' to 'true' — and leaves the others alone.
+//                      If someone hardcodes both to 'false' (would pass
+//                      A), THIS reds. Same shape for muted.
+//
+// Rate-limit guard (10 logins / 15min / IP): per-worker cachedCookie
+// (same as e2e-batch-list-actions.spec.ts).
+
+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: '/',
+    }]);
+  }
+}
+
+const FIXTURE_SESSIONS = {
+  sessions: [
+    { alias: 'node-alpha', status: 'idle', network_id: 'net_x' },
+    { alias: 'node-beta',  status: 'idle', network_id: 'net_x' },
+    { alias: 'node-gamma', status: 'idle', network_id: 'net_x' },
+  ],
+};
+const FIXTURE_NODES = {
+  nodes: [
+    { alias: 'node-alpha', node_id: 'n_alpha', team: null, tags: [], attrs_revision: 0 },
+    { alias: 'node-beta',  node_id: 'n_beta',  team: null, tags: [], attrs_revision: 0 },
+    { alias: 'node-gamma', node_id: 'n_gamma', team: null, tags: [], attrs_revision: 0 },
+  ],
+};
+
+async function stubHub(page: Page) {
+  await page.route('**/api/hub/status**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(FIXTURE_SESSIONS) }));
+  await page.route('**/api/hub/nodes**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(FIXTURE_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: [] }) }));
+  await page.route('**/api/hub/events**', r =>
+    r.fulfill({ status: 200, contentType: 'text/event-stream', body: '' }));
+  await page.route('**/api/anet/node-config**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ model: '', flags: {}, channels: [], config_revision: 0 }) }));
+}
+
+test.describe('Pin/mute attr — always present + tracks real state', () => {
+  test('every rail row emits data-node-pinned AND data-node-muted with value ∈ {true,false}', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Ensure no leftover state from prior runs would tint the "false"
+    // starting point — clear both storage keys before navigating.
+    await page.addInitScript(() => {
+      try { window.localStorage.removeItem('anet_chat_pin_v1'); } catch {}
+      try { window.localStorage.removeItem('anet_chat_mute_v1'); } catch {}
+    });
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-node-list-alias="node-alpha"]').first()).toBeVisible({ timeout: 15000 });
+
+    const rows = page.locator('[data-node-list-item]');
+    const count = await rows.count();
+    expect(count).toBeGreaterThanOrEqual(3); // premise: fixture landed
+
+    const pinnedVals: string[] = [];
+    const mutedVals: string[] = [];
+    for (let i = 0; i < count; i++) {
+      const row = rows.nth(i);
+      const pin = await row.getAttribute('data-node-pinned');
+      const mute = await row.getAttribute('data-node-muted');
+      pinnedVals.push(pin ?? '__ABSENT__');
+      mutedVals.push(mute ?? '__ABSENT__');
+    }
+    // Report cardinality alongside failure — if this reds, we want to
+    // see whether N of N were absent (wire ripped) vs 1 of N was 'foo'
+    // (someone typo'd the emit).
+    for (const v of pinnedVals) {
+      expect(v, `pinned attr values across ${count} rows: ${JSON.stringify(pinnedVals)}`)
+        .toMatch(/^(true|false)$/);
+    }
+    for (const v of mutedVals) {
+      expect(v, `muted attr values across ${count} rows: ${JSON.stringify(mutedVals)}`)
+        .toMatch(/^(true|false)$/);
+    }
+  });
+
+  test('toggling pin on node-beta flips its data-node-pinned from false to true (others unchanged)', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    await page.addInitScript(() => {
+      try { window.localStorage.removeItem('anet_chat_pin_v1'); } catch {}
+      try { window.localStorage.removeItem('anet_chat_mute_v1'); } catch {}
+    });
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-node-list-alias="node-beta"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Baseline — all three rows read 'false' on pinned.
+    // This is the PREMISE, not the conclusion — if the fixture happens
+    // to have someone already pinned, the toggle would flip 'true' →
+    // 'false' and the conclusion assert reverses direction. Assert
+    // premise first to catch that.
+    const alphaBefore = await page.locator('[data-node-list-alias="node-alpha"]').getAttribute('data-node-pinned');
+    const betaBefore = await page.locator('[data-node-list-alias="node-beta"]').getAttribute('data-node-pinned');
+    const gammaBefore = await page.locator('[data-node-list-alias="node-gamma"]').getAttribute('data-node-pinned');
+    expect(alphaBefore).toBe('false');
+    expect(betaBefore).toBe('false');
+    expect(gammaBefore).toBe('false');
+
+    // Toggle pin on node-beta via the context menu (real user path —
+    // togglePin from ../lib/chat-pin). Right-click → ctx-pin.
+    await page.locator('[data-node-list-alias="node-beta"]').click({ button: 'right' });
+    await expect(page.locator('[data-testid="node-context-menu"]')).toBeVisible({ timeout: 3000 });
+    await page.locator('[data-testid="ctx-pin"]').click();
+    // Storage event → useSyncExternalStore rerender — allow a tick.
+    await page.waitForTimeout(200);
+
+    // 🔴 Core: node-beta flipped from 'false' → 'true'. If the attribute
+    // were hardcoded to the literal 'false' (which would pass the
+    // capability test above), THIS reds precisely.
+    const alphaAfter = await page.locator('[data-node-list-alias="node-alpha"]').getAttribute('data-node-pinned');
+    const betaAfter = await page.locator('[data-node-list-alias="node-beta"]').getAttribute('data-node-pinned');
+    const gammaAfter = await page.locator('[data-node-list-alias="node-gamma"]').getAttribute('data-node-pinned');
+    expect(betaAfter).toBe('true');
+    // Others must NOT have changed — sanity that the toggle scoped to
+    // the right alias (not e.g. accidentally pinning every row).
+    expect(alphaAfter).toBe('false');
+    expect(gammaAfter).toBe('false');
+  });
+});

package/tests/e2e-stage-a-node-list.spec.ts

@@ -40,16 +40,23 @@ const HUB_HEALTH = {
   },
 };
 
+// Login rate limit is 10/15min/IP (app/lib/rate-limit.ts): with 4 spec
+// files in one combined run, per-test logins blow the budget and late
+// tests land on the sign-in page (false red). Login once per worker.
+let cachedSessionCookie: string | null = null;
 async function login(context: Page['context'] extends () => infer C ? C : never) {
-  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) {
+  if (!cachedSessionCookie) {
+    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) cachedSessionCookie = decodeURIComponent(m[1]);
+  }
+  if (cachedSessionCookie) {
     await context.addCookies([{
       name: 'anet_dashboard_session',
-      value: decodeURIComponent(m[1]),
+      value: cachedSessionCookie,
       domain: new URL(BASE).hostname,
       path: '/',
     }]);

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

@@ -153,22 +153,86 @@ test.describe('Stage B — persistent chat pane + /nodes/[alias] routing', () =>
     await expect(page).toHaveURL(`${BASE}/nodes`);
   });
 
-  test('< 768px: no right pane — chat opens as the full-screen overlay push', async ({ page, context }) => {
+  test('< 768px: two-level nav — list fullscreen, tap opens chat as a PAGE (no overlay), URL-addressable', async ({ page, context }) => {
     await login(context);
     await mockCommon(page);
+    await page.addInitScript(() => window.localStorage.setItem('anet-nodes-manage-view', '0'));
     await page.setViewportSize({ width: 390, height: 844 });
     await page.goto(`${BASE}/nodes`);
-    await expect(card(page, 'stage-b-1')).toBeVisible({ timeout: 15000 });
+    // Level 1: conversation list fullscreen; the table does NOT render;
+    // and mobile does NOT auto-select (desktop-only behavior — 通信龙:
+    // two correct behaviors, don't test one shape with the other's
+    // assertions). URL must stay /nodes.
+    const rail = page.locator('[data-testid="node-list-rail"]');
+    await expect(rail).toBeVisible({ timeout: 15000 });
+    await page.waitForTimeout(900);
+    await expect(page).toHaveURL(`${BASE}/nodes`);
+    const railBox = await rail.boundingBox();
+    expect(Math.abs(railBox!.width - 390)).toBeLessThanOrEqual(2);
+    await expect(page.locator('[data-node-card]')).toHaveCount(0);
+    await expect(page.locator('[data-node-list-item]')).toHaveCount(3);
 
-    await card(page, 'stage-b-1').click();
-    // Overlay shell (fixed drawer) mounts; persistent pane does not.
-    await expect(page.locator('.animate-slide-in')).toHaveCount(1);
-    await expect(pane(page)).toHaveCount(0);
-    // #Stage C only reshapes DESKTOP: the mobile middle column (with its
-    // node rows) keeps rendering under the overlay.
-    await expect(page.locator('[data-node-card]')).toHaveCount(3);
-    // Still URL-addressable on mobile.
+    // Level 2: tap → chat page (not overlay), back arrow present.
+    await page.locator('[data-node-list-item][data-node-list-alias="stage-b-1"]').click();
+    await expect(pane(page)).toBeVisible();
+    await expect(page.locator('.animate-slide-in')).toHaveCount(0);
+    const paneBox = await pane(page).boundingBox();
+    expect(Math.abs(paneBox!.width - 390)).toBeLessThanOrEqual(2);
+    await expect(rail).toHaveCount(0); // one level at a time
+    await expect(page.locator('[data-testid="chat-back"]')).toBeVisible();
     await expect(page).toHaveURL(`${BASE}/nodes/stage-b-1`);
+
+    // Back arrow returns to the list.
+    await page.locator('[data-testid="chat-back"]').click();
+    await expect(rail).toBeVisible();
+    await expect(page).toHaveURL(`${BASE}/nodes`);
+  });
+
+  test('< 768px: back (arrow AND browser) restores list scroll position within 200px', async ({ page, context }) => {
+    await login(context);
+    await mockWide(page); // 60 nodes — enough to have a real scroll offset
+    await page.addInitScript(() => window.localStorage.setItem('anet-nodes-manage-view', '0'));
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(`${BASE}/nodes`);
+    const scroll = page.locator('[data-testid="node-list-scroll"]');
+    await expect(page.locator('[data-node-list-item]')).toHaveCount(60, { timeout: 15000 });
+
+    const target = page.locator('[data-node-list-item][data-node-list-alias="stage-d-50"]');
+    await target.scrollIntoViewIfNeeded();
+    const before = await scroll.evaluate(el => el.scrollTop);
+    expect(before).toBeGreaterThan(500); // sanity: we really are deep in the list
+
+    await target.click();
+    await expect(pane(page)).toBeVisible();
+    await page.locator('[data-testid="chat-back"]').click();
+    await expect(scroll).toBeVisible();
+    const afterArrow = await scroll.evaluate(el => el.scrollTop);
+    expect(Math.abs(afterArrow - before)).toBeLessThanOrEqual(200);
+
+    // Browser back behaves the same (判据: 行为一致).
+    await target.click();
+    await expect(pane(page)).toBeVisible();
+    await page.goBack();
+    await expect(scroll).toBeVisible();
+    const afterBack = await scroll.evaluate(el => el.scrollTop);
+    expect(Math.abs(afterBack - before)).toBeLessThanOrEqual(200);
+  });
+
+  test('< 768px: manage mode still reaches the table, with a way back to conversations', async ({ page, context }) => {
+    await login(context);
+    await mockCommon(page);
+    await page.addInitScript(() => window.localStorage.setItem('anet-nodes-manage-view', '1'));
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(`${BASE}/nodes`);
+    // Fact-side positive: the table is genuinely there in manage mode
+    // (guards against "mobile hides table" being green because the table
+    // broke everywhere).
+    await expect(page.locator('[data-node-card]')).toHaveCount(3, { timeout: 15000 });
+    await expect(page.locator('[data-testid="manage-view-toggle-mobile"]')).toBeVisible();
+
+    await page.locator('[data-testid="manage-view-toggle-mobile"]').click();
+    await expect(page.locator('[data-testid="node-list-rail"]')).toBeVisible();
+    await expect(page.locator('[data-node-card]')).toHaveCount(0);
   });
 
   test('slow-load regression: 1.5s-delayed first /api/hub/status on a deep link → no crash page', async ({ page, context }) => {