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

package/app/components/NodeSettingsPanel.tsx

@@ -311,7 +311,20 @@ function NumberField({ label, value, onChange, placeholder }: { label: string; v
   );
 }
 
-export function NodeSettingsPanel({ session: s, onClose }: { session: Session; onClose: () => void }) {
+export function NodeSettingsPanel({ session: s, onClose, positioning = 'fixed' }: {
+  session: Session;
+  onClose: () => void;
+  /** 07-31 通信龙 判定: 'fixed' (default) is the legacy fullscreen
+   *  drawer used by AgentCard (covers whole viewport). 'absolute'
+   *  scopes the drawer to its nearest positioned ancestor + shrinks
+   *  to 360px, used by ChatPane so it only covers the chat column
+   *  (SPEC §12: settings should not steal from the reclaimed 1104px
+   *  chat width; fourth-column would push chat back to 664px).
+   *  Absolute mode also drops the black backdrop — clicking outside
+   *  the drawer inside the chat pane still closes, but the rest of
+   *  the app stays interactive. */
+  positioning?: 'fixed' | 'absolute';
+}) {
   const runtime = s.runtime || '—';
   const initialModel = s.model || s.agent || '';
   // imageCapable: read-only, auto from model (MiniMax-M3 / Claude = yes).
@@ -640,14 +653,27 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
     }
   }
 
+  const scoped = positioning === 'absolute';
   return (
     <>
-      <div className="fixed inset-0 bg-black/40 z-40" onClick={onClose} aria-hidden />
+      {/* Backdrop — 'fixed' mode covers the whole viewport;
+          'absolute' mode scopes to the positioned ancestor
+          (ChatPane's <aside>) so it only dims the chat column, not
+          the sidebar or rail. */}
+      <div
+        className={scoped
+          ? 'absolute inset-0 bg-black/40 z-40'
+          : 'fixed inset-0 bg-black/40 z-40'}
+        onClick={onClose}
+        aria-hidden
+      />
 
       <div
         role="dialog"
         aria-label={`${s.alias} 节点设置`}
-        className="fixed top-0 right-0 h-[100dvh] w-full sm:w-[440px] bg-[#0f0f11] border-l border-[#26262b] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in"
+        className={scoped
+          ? 'absolute top-0 right-0 h-full w-full sm:w-[360px] max-w-[360px] bg-[#0f0f11] border-l border-[#26262b] z-50 flex flex-col animate-slide-in'
+          : 'fixed top-0 right-0 h-[100dvh] w-full sm:w-[440px] bg-[#0f0f11] border-l border-[#26262b] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in'}
       >
         {/* Header */}
         <div className="flex items-center gap-2.5 px-4 py-3 border-b border-[#26262b]">

package/app/components/TaskChatPanel.tsx

@@ -315,45 +315,170 @@ function LocalFilePreview({ file, onRemove }: { file: File; onRemove: () => void
   );
 }
 
-const STATUS_STEPS = ['created', 'delivered', 'running', 'replied'];
-const STATUS_COLORS: Record<string, string> = {
-  created: 'bg-gray-400', delivered: 'bg-blue-400', running: 'bg-green-400',
-  replied: 'bg-purple-400', failed: 'bg-red-400', closed: 'bg-gray-500',
+// 通信龙 07-31 GAP 2nd tier: translate hub status codes into human
+// labels. The old form was `● ─ ● ─ ○ ─ ○  delivered` — a colored dot
+// progression + the raw English word. Nobody could tell "delivered"
+// (hub-side mark) from "acked" (node process received) from "replied"
+// (agent actually processed).
+//
+// Two things this rewrite fixes:
+//
+// 1. STATUS_STEPS was `['created','delivered','running','replied']`.
+//    Neither `created` nor `running` correspond to hub-emitted terminal
+//    statuses (`created` is client-side optimistic, `running` is READ
+//    by hub queries but never WRITTEN — grep server/src for `= 'running'`
+//    returns zero). Real hub progression is queued → delivered → acked
+//    → replied, and the old third dot literally never lit up.
+//
+// 2. `delivered` was labeled as if it meant "message reached the node".
+//    Reading hub source (server/src/index.ts:1568 + tools.ts:1080/1232)
+//    shows it's set at task-insert time — same instant as delivered_at
+//    (which is why delivered_at delay is empirically 0). The label now
+//    says "已推送" and the hover explicitly disclaims node reception.
+//
+// Vocabulary — must stay in sync with hub emits:
+//   queued / delivered / acked / replied / failed  ← the primary 5
+//   created                                        ← client-side pre-POST
+//   closed / expired / cancelled                   ← terminal, non-reply
+//   running                                        ← reserved (never written today)
+//   <anything else>                                ← fail-loudly (raw + banner)
+const STATUS_STEPS = ['queued', 'delivered', 'acked', 'replied'] as const;
+type StatusInfo = { label: string; hover: string; color: string; icon: React.ReactNode };
+const STATUS_INFO: Record<string, StatusInfo> = {
+  created:   { label: '发送中',   hover: '客户端已建消息，尚未收到 hub 回执。', color: 'text-gray-400',   icon: <IconSending /> },
+  queued:    { label: '排队中',   hover: '已入队，尚未推给节点。节点可能离线、或通道拥堵。', color: 'text-gray-400',   icon: <IconClock /> },
+  delivered: { label: '已推送',   hover: 'hub 侧已标记推送。尚未确认节点是否收到（delivered_at 是入队时刻，不代表 SSE 已到达）。', color: 'text-sky-400',    icon: <IconCheck /> },
+  acked:     { label: '已接收',   hover: '节点进程已确认收到。未必已处理——对方 agent 可能尚未唤醒。', color: 'text-gray-300',   icon: <IconCheckDouble /> },
+  replied:   { label: '已回复',   hover: '对方已针对此消息回复。', color: 'text-emerald-400', icon: <IconCheckDouble filled /> },
+  failed:    { label: '失败',     hover: '发送失败——详细原因见消息下方文本。', color: 'text-red-400',    icon: <IconWarn /> },
+  closed:    { label: '已关闭',   hover: '会话已被关闭，不再期待回复。', color: 'text-gray-500',   icon: <IconClose /> },
+  expired:   { label: '已超时',   hover: '在期限内未收到回复，任务已超时。', color: 'text-gray-500',   icon: <IconClock /> },
+  cancelled: { label: '已取消',   hover: '任务被主动取消。', color: 'text-gray-500',   icon: <IconClose /> },
+  running:   { label: '处理中',   hover: '节点进程正在处理（今日 hub 不写入此值，见组件注释）。', color: 'text-green-400',  icon: <IconClock /> },
 };
 
-function StatusBar({ status }: { status: string }) {
-  const idx = STATUS_STEPS.indexOf(status);
-  const isFailed = status === 'failed';
+function StatusBar({ status, result }: { status: string; result?: string }) {
+  const info = STATUS_INFO[status];
+  const known = !!info;
+  // Progression label list for the hover — same string appended after
+  // the per-status hover so the reader gets a compact map of the flow.
+  // Not per-step timestamps: hub doesn't expose queued_at / acked_at
+  // separately from delivered_at, so a per-step timeline would be
+  // fabricated data. See feedback_assert_the_fact_not_the_declaration.
+  const idx = STATUS_STEPS.indexOf(status as typeof STATUS_STEPS[number]);
+  const flow = STATUS_STEPS.map((s, i) => {
+    const mark = i < idx || (i === idx && idx >= 0) ? '✓' : '○';
+    return `${mark} ${STATUS_INFO[s].label}`;
+  }).join(' → ');
+  const hoverText = known
+    ? `${info.hover}\n\n进度：${flow}`
+    : `未知状态「${status}」——请报 bug。UI 词库没有匹配项，可能 hub 加了新 status 但前端没跟上。`;
+  const label = known ? info.label : status;
+  const color = known ? info.color : 'text-yellow-400';
+
+  // failed inline reason — hub has no dedicated failure_reason column
+  // (task table: task_id/from_*/to_*/status/content/result/... —
+  // grep-verified as of 2026-07-31). We show `result` first 40 chars
+  // when present. When result is empty, we explicitly say "节点未提供
+  // 原因" rather than falling back to a generic "未知错误" — that
+  // distinguishes "hub has no error field" from "reason field exists
+  // but got a bad value".
+  const failedReason = status === 'failed'
+    ? ((result && result.trim()) ? result.trim().slice(0, 40) : '节点未提供原因')
+    : null;
+
   return (
-    <div className="flex items-center gap-1 mt-1.5">
-      {STATUS_STEPS.map((s, i) => (
-        <div key={s} className="flex items-center gap-1">
-          <div className={`w-2 h-2 rounded-full transition-all duration-700 ${
-            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-[var(--border)]')
-            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-[var(--border)]'
-          }`} />
-          {i < STATUS_STEPS.length - 1 && (
-            <div className={`w-4 h-px transition-colors duration-700 ${
-              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-[var(--border)]'
-            }`} />
-          )}
-        </div>
-      ))}
-      <span className={`text-[10px] ml-1.5 font-medium ${
-        isFailed ? 'text-red-400' : status === 'replied' ? 'text-purple-400'
-        : status === 'running' ? 'text-green-400' : 'text-[var(--fg-muted)]'
-      }`}>{status}</span>
-      {(status === 'running' || status === 'delivered') && (
-        <span className="ml-1">
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse" />
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse ml-0.5" style={{ animationDelay: '0.2s' }} />
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse ml-0.5" style={{ animationDelay: '0.4s' }} />
+    <div
+      data-status-key={status}
+      data-status-known={known ? 'true' : 'false'}
+      data-status-label={label}
+      className="inline-flex flex-col gap-0.5 mt-1.5"
+    >
+      <span
+        title={hoverText}
+        aria-label={known ? info.label : `未知状态 ${status}`}
+        className={`inline-flex items-center gap-1.5 text-[11px] font-medium ${color}`}
+      >
+        {known ? info.icon : <IconQuestion />}
+        <span>{label}</span>
+        {(status === 'delivered' || status === 'created') && (
+          <span aria-hidden className="inline-flex items-center gap-0.5 ml-0.5">
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" />
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" style={{ animationDelay: '0.2s' }} />
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" style={{ animationDelay: '0.4s' }} />
+          </span>
+        )}
+      </span>
+      {failedReason !== null && (
+        <span
+          data-status-reason={failedReason}
+          className="text-[10px] text-red-400/80 max-w-[260px] truncate"
+          title={result || undefined}
+        >
+          {failedReason}
         </span>
       )}
     </div>
   );
 }
 
+// Icon primitives — inline SVG, single-color (currentColor), sized to
+// match the 11px label text. No external icon library — keeps the
+// StatusBar self-contained and avoids a Tailwind purge/tree-shake
+// dance for icons only this component uses.
+function IconClock() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+    </svg>
+  );
+}
+function IconCheck() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12l6 6L20 6" />
+    </svg>
+  );
+}
+function IconCheckDouble({ filled }: { filled?: boolean } = {}) {
+  return (
+    <svg width="14" height="12" viewBox="0 0 28 24" fill="none" stroke="currentColor" strokeWidth={filled ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2 12l6 6L18 6" />
+      <path d="M10 12l6 6L26 6" opacity={filled ? 1 : 0.7} />
+    </svg>
+  );
+}
+function IconWarn() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 2L2 20h20L12 2z" /><path d="M12 9v5" /><circle cx="12" cy="17.5" r="0.6" fill="currentColor" />
+    </svg>
+  );
+}
+function IconClose() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M8 12h8" />
+    </svg>
+  );
+}
+function IconSending() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12l16-8-6 16-3-7-7-1z" />
+    </svg>
+  );
+}
+function IconQuestion() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.5 9.5a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 3.5" />
+      <circle cx="12" cy="17" r="0.6" fill="currentColor" />
+    </svg>
+  );
+}
+
 // Full markdown rendering — handles tables, headings, lists, links, code,
 // blockquotes via react-markdown + GFM. Earlier hand-rolled parser only did
 // code blocks + bold; tables / headings showed as raw `|---|` text.
@@ -1442,7 +1567,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
                     ))}
                   </div>
                   <div className="flex flex-wrap items-center justify-between mt-1.5 gap-2 sm:gap-3">
-                    <StatusBar status={m.status} />
+                    <StatusBar status={m.status} result={m.result} />
                     <div className="flex items-center gap-2 shrink-0">
                       {/* R4: WeChat send-feedback loop — spinner while the
                           optimistic bubble is still in flight; tap-to-resend

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,10 +117,15 @@ 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 {}
   };
   const closeChat = () => {
+    userClosedRef.current = true; // ③ explicit close wins over auto-select
     setChatAlias(null);
     try { window.history.pushState({}, '', '/nodes'); } catch {}
   };
@@ -157,6 +161,42 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
     ro.observe(document.body);
     return () => { window.removeEventListener('resize', apply); ro.disconnect(); };
   }, []);
+  // #Vincent 插单 (07-31): entering /nodes with nothing selected showed the
+  // management table full-bleed — "这样特别难看". Feishu opens INTO a
+  // conversation, so desktop /nodes auto-selects the first (sorted) session.
+  // Three traps, each deliberately handled:
+  //  ① URL via history.REPLACE, never push — push would trap the browser
+  //    back button (/nodes → auto-select → /nodes/x → back → /nodes →
+  //    auto-select again, forever).
+  //  ② the table is NOT gone — it's the "manage all nodes" view, reachable
+  //    via the explicit 管理视图 toggle below (localStorage-persisted; a
+  //    user who prefers the table keeps it as their default and auto-select
+  //    stays off).
+  //  ③ an explicit ✕ close must NOT be answered by an immediate re-select
+  //    (the ✕ would look broken) — userClosedRef gates auto-select off for
+  //    the rest of this mount.
+  const [manageView, setManageView] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem('anet-nodes-manage-view') === '1';
+  });
+  const autoSelectedRef = useRef(false);
+  const userClosedRef = useRef(false);
+  const toggleManageView = () => {
+    setManageView(v => {
+      const next = !v;
+      try { window.localStorage.setItem('anet-nodes-manage-view', next ? '1' : '0'); } catch {}
+      if (next) {
+        // entering manage view: drop any open chat, land on the table
+        userClosedRef.current = true;
+        if (chatAlias) closeChat();
+      } else {
+        // back to conversation view: let auto-select pick up again
+        userClosedRef.current = false;
+        autoSelectedRef.current = false;
+      }
+      return next;
+    });
+  };
   const [showCreate, setShowCreate] = useState(false);
   // #Stage A (dashboard 3-col, 07-31): persistent narrow node list rail
   // to the left of the existing table. Default on; user can hide to
@@ -230,6 +270,15 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
   // "rail count == table count" true at all times.
   const railSessions = filtered;
 
+  const firstAlias = filtered.length > 0 ? filtered[0].alias : null;
+  useEffect(() => {
+    if (!isDesktop || manageView || chatAlias || userClosedRef.current || autoSelectedRef.current) return;
+    if (!firstAlias) return; // empty list: nothing to select, no loop
+    autoSelectedRef.current = true;
+    setChatAlias(firstAlias);
+    try { window.history.replaceState({}, '', `/nodes/${encodeURIComponent(firstAlias)}`); } catch {}
+  }, [isDesktop, manageView, chatAlias, firstAlias]);
+
   // #Stage C: with a node selected on desktop, the page is LIST + CHAT —
   // the middle table does not render (通信龙 production screenshot catch:
   // rail and table were painting the same 199 nodes twice, squeezing the
@@ -249,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}
@@ -264,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}
@@ -276,13 +350,37 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
             search={search}
             onSearchChange={setSearch}
           />
+          {/* #Vincent 插单 ②: explicit doorway between conversation-first
+              and table-first ("manage all nodes") modes. Lives in the
+              aside (NodesView's JSX) — NOT in NodeList, which IM马 is
+              editing concurrently. */}
+          <button
+            type="button"
+            onClick={toggleManageView}
+            data-testid="manage-view-toggle"
+            className="shrink-0 border-t border-[rgba(255,255,255,0.06)] bg-[#0F1320] px-3 py-2 text-left text-[11px] text-gray-500 hover:text-gray-200 transition-colors"
+          >
+            {manageView ? t('≡ 对话视图', '≡ Conversation view') : t('☷ 管理视图', '☷ Manage view')}
+          </button>
         </aside>
       )}
       {/* #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
@@ -702,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/package.json

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

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: '/',
     }]);
@@ -97,6 +104,9 @@ async function login(context: Page['context'] extends () => infer C ? C : never)
 }
 
 async function mockCommon(page: Page, statusBody: object, nodesBody: object) {
+  // #Vincent auto-select (07-31): filter suite exercises the manage/table
+  // view — opt in explicitly now that /nodes defaults to conversation-first.
+  await page.addInitScript(() => window.localStorage.setItem('anet-nodes-manage-view', '1'));
   await page.route('**/api/hub/status**', r =>
     r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(statusBody) }));
   await page.route('**/api/hub/nodes**', r =>