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

package/tests/e2e-batch-list-actions.spec.ts

@@ -0,0 +1,234 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE = process.env.TEST_URL || 'http://localhost:3100';
+
+// 07-31 batch (通信龙): 3 hard tests for the NodeList/ChatPane batch.
+// Each test asserts an interaction that has no error surface if broken
+// (would ship as "点了没反应" / "打了草稿没了" / "菜单少两项"):
+//
+//   ① settings drawer open/close does NOT unmount TaskChatPanel
+//      (draft-in-input survives). Witnessed-red by mutating the drawer
+//      to KEY-remount the chat (parent-controlled key change → React
+//      remount → draft lost).
+//   ② keyboard focus discipline: ↓ moves URL when focus is on the
+//      rail, ↓ does NOT move URL when focus is in a text input.
+//   ③ right-click near list bottom → context menu flips upward
+//      (menu.getBoundingClientRect().bottom <= viewport.bottom).
+//
+// Not covered here (already visible in vf.mjs on prod real-data run):
+// - pin/mute badge color swap (unit-level; SPEC §11.3 tokens hardcoded)
+// - view-tasks / search buttons render (trivially visible)
+
+// Per-worker login cache — dashboard rate-limit is 10 logins / 15min / IP.
+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 },
+  ],
+};
+const FIXTURE_HEALTH = {
+  ok: true, version: '0.9.0-test', sse_connections: 3,
+  sse_sessions: {
+    'net_x:node-alpha': 1, 'net_x:node-beta': 1, 'net_x:node-gamma': 1,
+  },
+};
+
+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(FIXTURE_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.route('**/api/hub/events**', r =>
+    r.fulfill({ status: 200, contentType: 'text/event-stream', body: '' }));
+  // NodeSettingsPanel loads a per-node config snapshot — return an
+  // empty stub so the drawer mounts without console noise.
+  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('Batch — list actions (07-31)', () => {
+  test('① settings drawer open/close does NOT unmount TaskChatPanel (draft survives)', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Find the chat's text input. TaskChatPanel renders one primary
+    // <textarea> / <input> for message composition — grab the first
+    // textbox inside the chat pane.
+    const chatInput = page.locator('[data-testid="chat-pane"] textarea, [data-testid="chat-pane"] input[type="text"]').first();
+    await expect(chatInput).toBeVisible({ timeout: 10000 });
+    // Type a distinctive draft that would be hard to reproduce by accident.
+    const DRAFT = 'preserve-across-settings-toggle-abc123';
+    await chatInput.fill(DRAFT);
+    await expect(chatInput).toHaveValue(DRAFT);
+
+    // Open settings drawer → close → text MUST still be there.
+    await page.locator('[data-testid="chat-pane-settings"]').click();
+    await expect(page.locator('[role="dialog"][aria-label*="节点设置"]').first()).toBeVisible({ timeout: 5000 });
+    // Close via the backdrop (absolute-positioned inside chat pane).
+    await page.keyboard.press('Escape');
+    // Wait a tick for React to reconcile.
+    await page.waitForTimeout(200);
+
+    // 🔴 The core assertion — the input still holds the same text.
+    // If TaskChatPanel got unmounted+remounted, state resets and this
+    // reads as empty (or reset to any autosaved draft, which is
+    // different — the point is "same value, no interruption").
+    await expect(chatInput).toHaveValue(DRAFT);
+  });
+
+  test('② kbd focus discipline — ↓ moves URL from rail focus, does NOT from input focus', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Wait for rail to actually have entries — the kbd handler
+    // bails on sessions.length === 0, so pressing arrow before SWR
+    // populates would test nothing.
+    await expect(page.locator('[data-node-list-item]').first()).toBeVisible({ timeout: 10000 });
+    const railCount = await page.locator('[data-node-list-item]').count();
+    expect(railCount).toBeGreaterThanOrEqual(3);
+
+    // Capture browser console to diagnose whether the handler fires.
+    const consoleMsgs: string[] = [];
+    page.on('console', msg => consoleMsgs.push(`${msg.type()}: ${msg.text()}`));
+
+    // Phase 1 — focus a NON-editable element (a rail entry button).
+    // TaskChatPanel refocuses its textarea via setTimeout(300) on
+    // mount (TaskChatPanel.tsx:745), so we MUST wait past that
+    // window before setting our own focus — otherwise the textarea
+    // steals it back mid-test. Wait 500ms > 300ms delay, then focus
+    // the button and press the key with no interceding await so no
+    // subsequent focus event can preempt.
+    await page.waitForTimeout(500);
+    await page.locator('[data-node-list-item]').first().focus();
+    const activeTag = await page.evaluate(() => document.activeElement?.tagName);
+    expect(activeTag).toBe('BUTTON');
+
+    const beforeUrl = new URL(page.url()).pathname;
+    expect(beforeUrl).toContain('/nodes/');
+    await page.keyboard.press('ArrowDown');
+    await page.waitForTimeout(500);
+    const afterUrl = new URL(page.url()).pathname;
+    expect(afterUrl).not.toBe(beforeUrl);
+    expect(afterUrl).toContain('node-beta');
+
+    // Phase 2 — dispatch same ArrowDown but with document.activeElement
+    // pointing at a text control. My handler bails when active.tagName
+    // is INPUT/TEXTAREA. Verify URL does NOT change.
+    const chatInput = page.locator('[data-testid="chat-pane"] textarea, [data-testid="chat-pane"] input[type="text"]').first();
+    await chatInput.focus();
+    await page.waitForTimeout(100);
+    const inputUrl = new URL(page.url()).pathname;
+    // Sanity: confirm the input actually took focus BEFORE dispatching,
+    // otherwise this test would spuriously pass (URL wouldn't change
+    // because the handler THINKS active is body → moves URL, but I'd
+    // observe unchanged URL for a different reason).
+    const activeInInput = await page.evaluate(() => document.activeElement?.tagName);
+    expect(['INPUT', 'TEXTAREA']).toContain(activeInInput ?? 'NONE');
+    await page.evaluate(() => {
+      const ev = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true });
+      window.dispatchEvent(ev);
+    });
+    await page.waitForTimeout(400);
+    const stillInputUrl = new URL(page.url()).pathname;
+    expect(stillInputUrl).toBe(inputUrl);
+  });
+
+  test('③ right-click near list bottom → menu flips upward + stays in viewport', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Small viewport height so any entry the user right-clicks is
+    // "near the bottom" — a 120px menu rendered downward would
+    // overflow. This is the exact scenario the flip logic protects.
+    await page.setViewportSize({ width: 1280, height: 300 });
+    // Go to a node page (not /nodes) — the rail renders in both, but
+    // going through /nodes/<alias> exercises the exact code path
+    // tests 1 & 2 already validated the auth on. Then click the rail
+    // entry to force the "list-only" shape (chatAlias unchanged in
+    // URL is fine — the point is right-click on the last rail row).
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-node-list-alias="node-gamma"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Right-click on the last rail entry (node-gamma). Playwright's
+    // .click({button:'right'}) fires a native contextmenu with the
+    // element's center as clientX/clientY — for the last entry in a
+    // 300px-tall viewport, that lands well into the "would overflow
+    // downward" zone.
+    await page.locator('[data-node-list-alias="node-gamma"]').click({ button: 'right' });
+
+    const menu = page.locator('[data-testid="node-context-menu"]');
+    await expect(menu).toBeVisible({ timeout: 3000 });
+    // Wait for the useLayoutEffect + re-render — flip only applies
+    // after the second render. If flip did NOT fire, this attribute
+    // stays absent → the timeout below reads "expected 'true', got null"
+    // and the test reds precisely on the flip contract.
+    await expect(menu).toHaveAttribute('data-flipped-y', 'true', { timeout: 2000 });
+
+    // 🔴 Core assertion — menu is fully inside viewport (bottom edge
+    // ≤ viewport bottom). Without the flip, the menu would render
+    // from clientY down and have bottom > viewport.height.
+    const rect = await menu.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom, left: r.left, right: r.right };
+    });
+    // Read current viewport (we set it to 1280×300 above).
+    const vp = page.viewportSize()!;
+    expect(rect.bottom).toBeLessThanOrEqual(vp.height);
+    expect(rect.top).toBeGreaterThanOrEqual(0);
+    expect(rect.left).toBeGreaterThanOrEqual(0);
+    expect(rect.right).toBeLessThanOrEqual(vp.width);
+
+    // Sibling positive — the flip attribute is set (proves it took
+    // the flip branch, not just happened to fit by luck).
+    await expect(menu).toHaveAttribute('data-flipped-y', 'true');
+  });
+});

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