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

package/app/messages/page.tsx

@@ -146,7 +146,7 @@ export default function MessagesPage() {
   }, [filtered]);
 
   return (
-    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+    <div data-testid="messages-shell" className="min-h-screen bg-[#141826] text-gray-100 p-4 sm:p-6">
       {/* #209 R31 (mobile vertical rhythm — same pattern as R28/R30):
           header row + quick-from chips row both mb-6 → mb-4 sm:mb-6.
           #209 R33: header restructured to mirror /nodes R32 — title
@@ -253,7 +253,7 @@ export default function MessagesPage() {
             <button
               type="button"
               onClick={() => setSearch('')}
-              className="shrink-0 rounded-full border border-gray-700 px-3 py-1 text-xs text-gray-500 hover:text-gray-200"
+              className="shrink-0 rounded-full border border-gray-700 px-3 py-1 text-[11px] text-[#64748B] hover:text-gray-200"
             >
               Clear
             </button>
@@ -336,9 +336,9 @@ export default function MessagesPage() {
                     Halve it on mobile. */}
                 {gapExceeded && (
                   <div className="my-2 sm:my-4 flex items-center gap-3">
-                    <div className="h-px flex-1 bg-[#26262b]" />
-                    <div className="text-[11px] text-gray-600">{formatDividerLabel(message.created_at)}</div>
-                    <div className="h-px flex-1 bg-[#26262b]" />
+                    <div className="h-px flex-1 bg-white/[0.06]" />
+                    <div className="text-[13px] font-medium text-[#94A3B8]">{formatDividerLabel(message.created_at)}</div>
+                    <div className="h-px flex-1 bg-white/[0.06]" />
                   </div>
                 )}
 
@@ -348,21 +348,21 @@ export default function MessagesPage() {
                     390px. Desktop unchanged from sm: up. */}
                 {variant === 'broadcast' ? (
                   <div className={samePrev ? 'mt-0.5 sm:mt-1' : 'mt-2 sm:mt-3'}>
-                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-3 py-2 sm:px-4 sm:py-3 shadow-sm w-full">
+                    <div className="rounded-2xl border border-white/[0.06] border-l-2 border-l-[#7DD3FC] bg-[#1E293B] px-3 py-2 sm:px-4 sm:py-3 shadow-sm w-full">
                       <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                         <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                           {message.type || 'unknown'}
                         </span>
-                        <span className="text-sm font-medium text-purple-200">{fromAlias}</span>
-                        {message.to_alias && <span className="text-xs text-purple-200/80">to {message.to_alias}</span>}
-                        {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
-                        <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
+                        <span className="text-sm font-medium text-[#E2E8F0]">{fromAlias}</span>
+                        {message.to_alias && <span className="text-xs text-[#CBD5E1]">to {message.to_alias}</span>}
+                        {message.priority === 'high' && <span className="text-xs text-[#EF4444]">HIGH</span>}
+                        <span className="ml-auto text-[11px] text-[#64748B]">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
                       </div>
                       {/* Round 79: break-words + overflow-wrap:anywhere so
                           long unbroken runs (URLs, ASCII rules like
                           `═══════════════`) wrap instead of pushing the
                           chat bubble past the mobile viewport. */}
-                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-[#E2E8F0]">
                         {renderHighlighted(message.content, search)}
                       </div>
                       {/* #492: broadcast may carry attachments too. */}
@@ -377,23 +377,23 @@ export default function MessagesPage() {
                     <div className="w-8 shrink-0 pt-1">
                       {!samePrev && <AliasAvatar alias={fromAlias} size={32} />}
                     </div>
-                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-3 py-2 sm:px-4 sm:py-3 shadow-sm ${
+                    <div className={`min-w-0 max-w-[min(640px,65%)] rounded-2xl border border-white/[0.06] px-3 py-2 sm:px-4 sm:py-3 shadow-sm ${
                       variant === 'outgoing'
-                        ? 'border-green-500/20 bg-green-500/10'
-                        : 'border-blue-500/20 bg-blue-500/10'
+                        ? 'bg-[#1E3A5F]'
+                        : 'bg-[#1E293B]'
                     }`}>
                       {!samePrev && (
                         <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                           <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                             {message.type || 'unknown'}
                           </span>
-                          <span className={`text-sm font-medium ${variant === 'outgoing' ? 'text-green-300' : 'text-blue-300'}`}>
+                          <span className={`text-sm font-medium ${variant === 'outgoing' ? 'text-[#F1F5F9]' : 'text-[#E2E8F0]'}`}>
                             {fromAlias}
                           </span>
-                          <span className="text-xs text-gray-600">&rarr;</span>
-                          <span className="text-sm text-gray-300">{message.to_alias || '--'}</span>
-                          {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
-                          <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
+                          <span className="text-xs text-[#64748B]">&rarr;</span>
+                          <span className="text-sm text-[#CBD5E1]">{message.to_alias || '--'}</span>
+                          {message.priority === 'high' && <span className="text-xs text-[#EF4444]">HIGH</span>}
+                          <span className="ml-auto text-[11px] text-[#64748B]">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
                         </div>
                       )}
 
@@ -401,7 +401,7 @@ export default function MessagesPage() {
                           long unbroken runs (URLs, ASCII rules like
                           `═══════════════`) wrap instead of pushing the
                           chat bubble past the mobile viewport. */}
-                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-[#E2E8F0]">
                         {renderHighlighted(message.content, search)}
                       </div>
 
@@ -417,13 +417,13 @@ export default function MessagesPage() {
 
                       {/* When in a streak, surface the timestamp inline-right so users still know cadence */}
                       {samePrev && (
-                        <div className="mt-1 text-[10px] text-gray-600 text-right">
+                        <div className="mt-1 text-[11px] text-[#64748B] text-right">
                           {message.created_at ? timeAgo(message.created_at) : ''}
                         </div>
                       )}
 
                       {debug && (
-                        <div className="mt-3 border-t border-white/10 pt-3 text-xs text-gray-500 space-y-1">
+                        <div className="mt-3 border-t border-white/10 pt-3 text-[11px] text-[#64748B] space-y-1">
                           <div>ID: {message.id}</div>
                           {message.task_id && <div>Task ID: {message.task_id}</div>}
                           <div>Created: {message.created_at}</div>

package/app/nodes/NodesView.tsx

@@ -4,7 +4,6 @@ import { useState, useRef, useEffect, useSyncExternalStore } from 'react';
 import { timeAgo } from '../components/utils';
 import { useSessions, useHealth, useNodeLifecycle } from '../lib/hooks';
 import { useSWRConfig } from 'swr';
-import { TaskChatPanel } from '../components/TaskChatPanel';
 import { CreateNodeWizard } from '../components/CreateNodeWizard';
 import { NodeLifecycleMenu } from '../components/NodeLifecycleMenu';
 import { EmptyState, NodesEmptyState } from '../components/EmptyState';
@@ -118,6 +117,10 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
   const [chatAlias, setChatAlias] = useState<string | null>(initialAlias);
   const isDesktop = useIsDesktop();
   const selectNode = (alias: string) => {
+    try {
+      const el = document.querySelector('[data-testid="node-list-scroll"]');
+      if (el) savedListScrollRef.current = el.scrollTop;
+    } catch {}
     setChatAlias(alias);
     try { window.history.pushState({}, '', `/nodes/${encodeURIComponent(alias)}`); } catch {}
   };
@@ -295,6 +298,31 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
   //     column rendered.
   const chatOpenDesktop = !!chatAlias && isDesktop && sessions.length > 0;
 
+  // #Mobile two-level nav (Feishu phone form, 通信龙 07-31, breakpoint md
+  // per my own ruling — no third media query):
+  //   < md unselected  = conversation LIST fullscreen (not the table)
+  //   < md selected    = chat as a full PAGE with a back arrow
+  //   manage mode      = the old table, reachable via the same toggle
+  // Desktop auto-selects; mobile deliberately does NOT (the list IS the
+  // first screen — auto-select effect above is gated on isDesktop).
+  const mobileListLevel = !isDesktop && !chatAlias && !manageView && sessions.length > 0;
+  const mobileChatLevel = !isDesktop && !!chatAlias;
+
+  // #Mobile back restores the list scroll position (判据: enter from row
+  // ~50, come back, offset ≤200px — snapping to top is the annoying bug).
+  // Saved at selection time; restored when the list level remounts.
+  // Desktop is exempt: its rail never unmounts while chatting, and the
+  // user may have scrolled it meanwhile.
+  const savedListScrollRef = useRef(0);
+  useEffect(() => {
+    if (isDesktop || chatAlias) return;
+    const id = requestAnimationFrame(() => {
+      const el = document.querySelector('[data-testid="node-list-scroll"]');
+      if (el) el.scrollTop = savedListScrollRef.current;
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isDesktop, chatAlias]);
+
   return (
     <div
       ref={rootRef}
@@ -310,10 +338,10 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
           #Stage C: a selected node FORCES the rail on (even for dense-view
           users with showRail=false) — in the list+chat layout the rail is
           the only way to switch nodes, so it must be there. */}
-      {(showRail || chatOpenDesktop) && sessions.length > 0 && (
+      {(mobileListLevel || (isDesktop && (showRail || chatOpenDesktop) && sessions.length > 0)) && (
         <aside
           data-testid="node-list-rail"
-          className="hidden sm:flex sm:flex-col w-[280px] shrink-0 h-full min-h-0 bg-[#0F1320]"
+          className="flex flex-col w-full md:w-[280px] shrink-0 h-full min-h-0 bg-[#0F1320]"
         >
           <NodeList
             sessions={railSessions}
@@ -339,8 +367,20 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
       {/* #Stage C: middle column (header + filters + table/grid) renders
           only when NO node is selected on desktop — see chatOpenDesktop
           note above. Mobile keeps it always (chat is an overlay there). */}
-      {!chatOpenDesktop && (
-      <div className="flex-1 min-w-0 max-w-full h-full overflow-y-auto overflow-x-hidden p-4 sm:p-6">
+      {(isDesktop ? !chatOpenDesktop : (manageView && !chatAlias)) && (
+      <div className="flex-1 min-w-0 max-w-full h-full overflow-y-auto overflow-x-hidden p-4 sm:p-6 pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-6">
+      {/* #Mobile manage mode: way back to the conversation list — the rail
+          (which hosts the toggle) is hidden at this level on phones. */}
+      {!isDesktop && manageView && (
+        <button
+          type="button"
+          onClick={toggleManageView}
+          data-testid="manage-view-toggle-mobile"
+          className="md:hidden mb-3 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#0F1320] px-3 py-1.5 text-[12px] text-gray-400 hover:text-gray-200"
+        >
+          {t('≡ 返回对话视图', '≡ Back to conversations')}
+        </button>
+      )}
       {/* #209 R31 (mobile vertical rhythm — goal "大幅提升移动端体验",
           extending R28's Overview pattern + R30's /tasks pattern):
           this header row + the status-bar wrapper + the filter row
@@ -760,18 +800,19 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
         </div>
       )}
 
-      {/* #Stage B: below md the chat keeps the pre-B behavior — a
-          full-screen overlay push (TaskChatPanel's own fixed shell).
-          On md+ the persistent right pane below renders instead; the
-          two are mutually exclusive via isDesktop so only ONE
-          TaskChatPanel is ever mounted (no double SSE / mark-read). */}
-      {chatAlias && !isDesktop && <TaskChatPanel alias={chatAlias} onClose={closeChat} />}
+      {/* (#Stage B's mobile overlay is gone — < md chat is now a full
+          PAGE, rendered as ChatPane variant="page" below. isDesktop
+          still guarantees only ONE chat body is ever mounted.) */}
       </div>
       )}
       {/* #Stage B: persistent right chat column (md+) — see ChatPane.tsx
           (ChatPopover minus the floating shell; TaskChatPanel inline body).
           Switching nodes swaps `alias` in place (no remount). */}
       {chatAlias && isDesktop && <ChatPane alias={chatAlias} onClose={closeChat} />}
+      {/* #Mobile two-level nav: chat is a full PAGE (not the old overlay).
+          Back arrow and browser back both land on the list (closeChat /
+          popstate) — 判据: 行为一致. */}
+      {mobileChatLevel && <ChatPane alias={chatAlias!} variant="page" onBack={closeChat} onClose={closeChat} />}
     </div>
   );
 }

package/app/tasks/TasksView.tsx

@@ -72,8 +72,16 @@ function TasksViewInner({ initialSelectedId = null }: { initialSelectedId?: stri
   const [error, setError] = useState('');
 
   const [filterStatus, setFilterStatus] = useState(searchParams.get('status') || '');
-  const [filterFrom, setFilterFrom] = useState('');
-  const [filterTo, setFilterTo] = useState('');
+  // 07-31 通信龙 dispatch (临时开放此文件): let ChatPane's "查看任务"
+  // button prefill the from/to filters via URL. Before this, the /tasks
+  // link on ChatPane header carried `?alias=` which was silently ignored
+  // (both filters init'd to '' regardless of URL) — user tapped, saw the
+  // full unfiltered list, thought "that's all the tasks for this alias".
+  // See feedback_verify_both_directions_with_real_data — this is a
+  // silent-half-broken feature that already shipped in preview.51 and
+  // needs both prefill directions.
+  const [filterFrom, setFilterFrom] = useState(searchParams.get('from_name') || '');
+  const [filterTo, setFilterTo] = useState(searchParams.get('to_name') || '');
 
   // #Stage-tasks: selection is seeded from /tasks/[id] URL, then plain
   // client state kept in sync with pushState (shallow — no route remount,
@@ -226,6 +234,7 @@ function TasksViewInner({ initialSelectedId = null }: { initialSelectedId?: stri
                     value={filterFrom}
                     onChange={(e) => setFilterFrom(e.target.value)}
                     placeholder="any"
+                    data-testid="tasks-filter-from"
                     className="w-16 bg-transparent text-xs text-white placeholder-gray-700 focus:outline-none"
                   />
                 </div>
@@ -236,6 +245,7 @@ function TasksViewInner({ initialSelectedId = null }: { initialSelectedId?: stri
                     value={filterTo}
                     onChange={(e) => setFilterTo(e.target.value)}
                     placeholder="any"
+                    data-testid="tasks-filter-to"
                     className="w-16 bg-transparent text-xs text-white placeholder-gray-700 focus:outline-none"
                   />
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.6.3-preview.51",
+  "version": "0.6.3-preview.53",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "main": "apps/desktop/electron/main.cjs",
   "scripts": {

package/proxy.ts

@@ -18,6 +18,55 @@ export function proxy(request: NextRequest) {
   return NextResponse.next();
 }
 
+// ROUTE GATE — read carefully before editing.
+//
+// This is NOT authentication. It's a cookie-presence redirect:
+// `request.cookies.has(SESSION_COOKIE)` at line 8 checks only that
+// the cookie EXISTS, not that its value is valid. Any garbage
+// (e.g. `anet_dashboard_session=xyz`) passes this gate and lands
+// on the page. Real authentication lives in the /api/hub layer,
+// which validates the token content when the page tries to fetch
+// data.
+//
+// So this matcher's job is narrower than it looks: it decides
+// which paths bounce no-cookie visitors to /login for a nicer UX.
+// It does NOT prevent access to page bytes by a visitor who
+// forges any cookie value ("has a cookie" is not "is authenticated").
+// Do not write code that trusts this gate for authorization —
+// always call the hub for data and check the response.
+//
+// 07-31 通信龙 catch: `/nodes/:path*` was missing. Every other
+// page route with a dynamic child had it (`/tasks/:path*`,
+// `/settings/:path*`), so this was a slip, not a design choice.
+// Verified in prod: a no-session-cookie GET to `/nodes/<alias>`
+// was REACHABLE — returned 200 with the full 36KB shell; every
+// other matcher entry returned 307 → /login as intended.
+//
+// Blast radius today: /nodes/[alias] page happens to not run a
+// server-side data fetch — 通信龙 hit it with a nonexistent alias
+// `ZZZ-not-a-real-agent-9999` and got 200 + 36108 bytes back (only
+// 16 bytes bigger = the alias-length difference echoed in the
+// shell). Since the page doesn't query, no DB row leaks. This is
+// STRUCTURAL, not sensitive: if the page ever gains a server-side
+// data fetch, the leak begins immediately. Fix now, don't wait.
+//
+// If you add a new page route with a dynamic child, add its
+// `:path*` variant here AND add its bare path to the test list
+// in `tests/e2e-proxy-auth-boundary.spec.ts` — the test
+// enumerates matcher entries and asserts each redirects the
+// no-cookie case, so it catches this class of miss for the next
+// time. (The test's filename says "auth-boundary" for continuity
+// with #69; the actual behavior it tests is cookie-presence,
+// same as this comment describes.)
 export const config = {
-  matcher: ['/', '/node', '/tasks', '/tasks/:path*', '/nodes', '/messages', '/logs', '/settings', '/settings/:path*', '/admin'],
+  matcher: [
+    '/',
+    '/node',
+    '/tasks', '/tasks/:path*',
+    '/nodes', '/nodes/:path*',
+    '/messages',
+    '/logs',
+    '/settings', '/settings/:path*',
+    '/admin',
+  ],
 };

package/tests/e2e-9-nodes-team-tag-filter.spec.ts

@@ -80,16 +80,23 @@ const HUB_HEALTH_EMPTY = {
   sse_sessions: {},
 };
 
+// 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-batch-list-actions.spec.ts

@@ -110,6 +110,12 @@ test.describe('Batch — list actions (07-31)', () => {
     await expect(chatInput).toHaveValue(DRAFT);
 
     // Open settings drawer → close → text MUST still be there.
+    // 07-31 SPEC §12 batch: ⋮ now opens overflow menu (not settings
+    // direct). "会话设置" is one of four menu items and still carries
+    // data-testid="chat-pane-settings" so this assertion's target is
+    // preserved — but the click flow is now two steps.
+    await page.locator('[data-testid="chat-pane-more"]').click();
+    await expect(page.locator('[data-testid="chat-pane-overflow-menu"]')).toBeVisible({ timeout: 3000 });
     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).

package/tests/e2e-chatpane-header-menu.spec.ts

@@ -0,0 +1,259 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE = process.env.TEST_URL || 'http://localhost:3100';
+
+// 通信龙 07-31 SPEC §12 remaining — ChatPane header ⋮/📋/🔍 wire-up.
+//
+// Each test double-asserts (positive + negative) per 通信龙 discipline
+// "接上了（正向）+ 该不生效时不生效（反向）", and each will have a
+// dedicated witnessed-red mutation applied after this file lands green.
+//
+// Covered:
+//   ① ⋮ opens overflow menu with 4 items (add tab / view tasks /
+//     settings / separator). Menu container reuses SPEC §10 tokens.
+//     Reverse: outside click closes the menu.
+//   ② 🔍 dispatches chat:open-search → TaskChatPanel search UI shows.
+//     Reverse: no click → search UI hidden.
+//   ③ 📋 link href resolves to `/tasks?to_name=<alias>` (URL param
+//     name must match TasksView's useSearchParams keys — 'to_name',
+//     not 'alias').
+//   ④ /tasks?from_name=<alias> filters list to matching from_name
+//     entries only. Reverse: without the param, list is unfiltered.
+//   ⑤ overflow "添加标签页" → row acquires data-node-pinned="true".
+//     Reverse: before click, attr is "false".
+
+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: '/', httpOnly: true, sameSite: 'Lax' }]);
+    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: '/', httpOnly: true, sameSite: 'Lax' }]);
+  }
+}
+
+const FIXTURE_SESSIONS = {
+  sessions: [
+    { alias: 'node-alpha', status: 'idle', network_id: 'net_x' },
+    { alias: 'node-beta',  status: 'idle', network_id: 'net_x' },
+  ],
+};
+const FIXTURE_NODES = {
+  nodes: [
+    { alias: 'node-alpha', node_id: 'n_a', team: null, tags: [], attrs_revision: 0 },
+    { alias: 'node-beta',  node_id: 'n_b', team: null, tags: [], attrs_revision: 0 },
+  ],
+};
+
+// For /tasks filter test: 6 tasks total — 2 from node-alpha, 2 from
+// node-beta, 2 with a third from_name. This makes "带 from_name 筛"
+// vs "不带 → 全量" measurably different (2 vs 6).
+const FIXTURE_TASKS_ALL = [
+  { task_id: 't1', from_name: 'node-alpha', to_name: 'node-beta',  status: 'replied',   content: 'a1', result: 'ok', created_at: '2026-07-31T10:00:00', priority: 'normal' },
+  { task_id: 't2', from_name: 'node-alpha', to_name: 'node-gamma', status: 'delivered', content: 'a2', result: '',   created_at: '2026-07-31T10:01:00', priority: 'normal' },
+  { task_id: 't3', from_name: 'node-beta',  to_name: 'node-alpha', status: 'acked',     content: 'b1', result: '',   created_at: '2026-07-31T10:02:00', priority: 'normal' },
+  { task_id: 't4', from_name: 'node-beta',  to_name: 'node-alpha', status: 'replied',   content: 'b2', result: 'ok', created_at: '2026-07-31T10:03:00', priority: 'normal' },
+  { task_id: 't5', from_name: 'node-omega', to_name: 'node-alpha', status: 'queued',    content: 'o1', result: '',   created_at: '2026-07-31T10:04:00', priority: 'normal' },
+  { task_id: 't6', from_name: 'node-omega', to_name: 'node-beta',  status: 'failed',    content: 'o2', result: 'x',  created_at: '2026-07-31T10:05:00', priority: 'normal' },
+];
+
+async function stubHubBase(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/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 }) }));
+}
+
+// /api/hub/tasks stub that honors from_name/to_name query params —
+// mirrors what the real hub does. If our tested URL-param wiring is
+// wrong, the filter won't be applied and the test reds.
+async function stubTasks(page: Page) {
+  await page.route('**/api/hub/tasks**', r => {
+    const url = new URL(r.request().url());
+    const from = url.searchParams.get('from_name');
+    const to = url.searchParams.get('to_name');
+    let out = FIXTURE_TASKS_ALL.slice();
+    if (from) out = out.filter(t => t.from_name === from);
+    if (to) out = out.filter(t => t.to_name === to);
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks: out, total: out.length }) });
+  });
+}
+
+test.describe('ChatPane header — overflow menu / search event / /tasks URL params', () => {
+  test('① ⋮ opens overflow menu with 4 items; outside click closes it', async ({ page, context }) => {
+    await login(context);
+    await stubHubBase(page);
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    const more = page.locator('[data-testid="chat-pane-more"]').first();
+    await expect(more).toBeVisible();
+
+    // Reverse: menu is NOT open before we click. If a prior render
+    // leaked open state, "click → check open" would still pass.
+    await expect(page.locator('[data-testid="chat-pane-overflow-menu"]')).toHaveCount(0);
+
+    await more.click();
+    const menu = page.locator('[data-testid="chat-pane-overflow-menu"]');
+    await expect(menu).toBeVisible({ timeout: 3000 });
+
+    // All 4 menu items are present. Each check pulls a distinct
+    // testid — if two collapsed (e.g. only 3 items rendered because
+    // one is conditional), this reds precisely on the missing one.
+    // Locale-agnostic assertions: Playwright defaults to en-US and
+    // t(zh, en) returns en. Accept both — the test is proving "this
+    // item exists with a non-empty user-facing label", not policing
+    // the exact copy (that job belongs to a separate copy-review).
+    await expect(menu.locator('[data-testid="chat-pane-overflow-pin"]')).toHaveText(/添加标签页|移除标签页|Add as tab|Remove tab/);
+    await expect(menu.locator('[data-testid="chat-pane-overflow-view-tasks"]')).toHaveText(/查看任务|View tasks/);
+    await expect(menu.locator('[data-testid="chat-pane-settings"]')).toHaveText(/会话设置|Conversation settings/);
+    await expect(menu.locator('[data-testid="chat-pane-overflow-separator"]')).toHaveCount(1);
+
+    // Reverse: outside click closes.
+    await page.mouse.click(10, 10);
+    await expect(page.locator('[data-testid="chat-pane-overflow-menu"]')).toHaveCount(0);
+  });
+
+  test('② 🔍 dispatches chat:open-search → TaskChatPanel search UI mounts; without click stays hidden', async ({ page, context }) => {
+    await login(context);
+    await stubHubBase(page);
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Reverse: search input is NOT present before click. TaskChatPanel
+    // has a search input (searchInputRef) that mounts only when
+    // searchOpen is true. Its DOM presence is our signal.
+    // We look for input[placeholder*="搜索"] scoped to the chat pane.
+    const searchInput = page.locator('[data-testid="chat-pane"] input[placeholder*="搜索"], [data-testid="chat-pane"] input[placeholder*="Search"]').first();
+    await expect(searchInput).toHaveCount(0);
+
+    // Confirm the header button is enabled (previously disabled).
+    const searchBtn = page.locator('[data-testid="chat-pane-search"]').first();
+    await expect(searchBtn).toBeVisible();
+    await expect(searchBtn).toBeEnabled();
+    await expect(searchBtn).toHaveAttribute('data-search-enabled', 'true');
+
+    await searchBtn.click();
+    // TaskChatPanel schedules focus with setTimeout(50); allow it.
+    await expect(searchInput).toBeVisible({ timeout: 3000 });
+  });
+
+  test('③ 📋 view-tasks link points to /tasks?to_name=<alias> (encoded)', async ({ page, context }) => {
+    await login(context);
+    await stubHubBase(page);
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    const link = page.locator('[data-testid="chat-pane-view-tasks"]').first();
+    await expect(link).toBeVisible();
+    // Assert the EXACT href, not just contains: catches both wrong
+    // param name (?alias= would still contain the alias) and wrong
+    // scheme/path (something like /tasks/#... won't match).
+    const href = await link.getAttribute('href');
+    expect(href).toBe('/tasks?to_name=node-alpha');
+  });
+
+  test('④ /tasks reads from_name / to_name URL params → prefills filter inputs', async ({ page, context }) => {
+    // The wire we're testing is TasksView.tsx:75-76 —
+    //   useState(searchParams.get('from_name') || '')
+    // The most direct fact-side check is: after navigating to
+    // /tasks?from_name=X, the visible "From" input's value === X.
+    // We DO NOT depend on the /api/hub/tasks fetch/response
+    // (previous version did — /tasks has a client-side "401 →
+    // /login" redirect in TasksView.tsx:126 that got tripped by
+    // rate-limit flakiness in local dev, red-herring for this
+    // wire). The input value assertion catches the exact bug M4
+    // targets: silent drop of URL param.
+    await login(context);
+    await stubHubBase(page);
+    await stubTasks(page);
+
+    // (a) Baseline — no URL param → both inputs empty.
+    await page.goto(`${BASE}/tasks`);
+    // Filter inputs render early in TasksView (not gated on a
+    // successful fetch), so waiting on them avoids the auth-redirect
+    // race entirely.
+    const fromInput = page.locator('[data-testid="tasks-filter-from"]');
+    const toInput = page.locator('[data-testid="tasks-filter-to"]');
+    await expect(fromInput).toBeVisible({ timeout: 15000 });
+    await expect(fromInput).toHaveValue('');
+    await expect(toInput).toHaveValue('');
+
+    // (b) With ?from_name=node-alpha → From input prefilled, To empty.
+    await page.goto(`${BASE}/tasks?from_name=node-alpha`);
+    await expect(fromInput).toBeVisible({ timeout: 15000 });
+    await expect(fromInput).toHaveValue('node-alpha');
+    await expect(toInput).toHaveValue('');
+
+    // (c) With ?to_name=node-beta → To input prefilled, From empty.
+    // This is the direction ChatPane's link uses (`?to_name=<alias>`),
+    // so both directions must work — not just one.
+    await page.goto(`${BASE}/tasks?to_name=node-beta`);
+    await expect(fromInput).toBeVisible({ timeout: 15000 });
+    await expect(toInput).toHaveValue('node-beta');
+    await expect(fromInput).toHaveValue('');
+
+    // (d) Both — belt and suspenders.
+    await page.goto(`${BASE}/tasks?from_name=node-alpha&to_name=node-beta`);
+    await expect(fromInput).toBeVisible({ timeout: 15000 });
+    await expect(fromInput).toHaveValue('node-alpha');
+    await expect(toInput).toHaveValue('node-beta');
+  });
+
+  test('⑤ overflow "添加标签页" toggles pin (data-node-pinned false→true)', async ({ page, context }) => {
+    await login(context);
+    await stubHubBase(page);
+    // Clear localStorage so we start from unpinned.
+    await page.addInitScript(() => {
+      try { window.localStorage.removeItem('anet_chat_pin_v1'); } catch {}
+    });
+    await page.goto(`${BASE}/nodes/node-alpha`);
+    await expect(page.locator('[data-testid="chat-pane"]').first()).toBeVisible({ timeout: 15000 });
+
+    // Premise: node-alpha's rail row starts unpinned (attr === 'false').
+    const alphaRow = page.locator('[data-node-list-alias="node-alpha"]').first();
+    await expect(alphaRow).toHaveAttribute('data-node-pinned', 'false');
+
+    await page.locator('[data-testid="chat-pane-more"]').click();
+    await expect(page.locator('[data-testid="chat-pane-overflow-menu"]')).toBeVisible({ timeout: 3000 });
+    // "添加标签页" — label depends on state; assert menu item then click.
+    const pinItem = page.locator('[data-testid="chat-pane-overflow-pin"]');
+    // Locale-agnostic: could be zh or en; premise is "starts in the
+    // ADD (not REMOVE) state" — we cleared localStorage above so it
+    // should be Add. Assert against both language forms.
+    await expect(pinItem).toHaveText(/添加标签页|Add as tab/);
+    await pinItem.click();
+
+    // Menu should have auto-closed via onClose in the handler.
+    await expect(page.locator('[data-testid="chat-pane-overflow-menu"]')).toHaveCount(0);
+
+    // 🔴 Core: the rail row's data-node-pinned flipped to 'true'.
+    // useSyncExternalStore reacts to the storage event; give it a tick.
+    await expect(alphaRow).toHaveAttribute('data-node-pinned', 'true', { timeout: 2000 });
+  });
+});