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

package/app/components/NodeList.tsx

@@ -1,11 +1,21 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
 import { AliasAvatar } from './AliasAvatar';
 import { useChatUnread } from '../lib/chat-unread';
 import { useHasDraft } from '../lib/chat-drafts';
+import { usePinned } from '../lib/chat-pin';
+import { useMuted } from '../lib/chat-mute';
+import { NodeListContextMenu } from './NodeListContextMenu';
 import type { Session } from './types';
 import { t } from '../lib/ui-lang';
 
+// Batch (07-31 通信龙): wire chat-pin / chat-mute into the rail. Pattern
+// copied from AgentCard.tsx (usePinned + useMuted per row) so behavior
+// matches the existing table view — pinned rows sort first (inherited
+// from NodesView's sort chain), and muted rows suppress the unread
+// badge (but keep the underlying count correct — muted ≠ marked-read).
+
 // #Stage A (dashboard 3-col): persistent narrow node list rail —
 // WeChat-style entries (avatar + alias + activity preview + unread badge)
 // that stay visible while user reads/interacts with the table on the
@@ -48,6 +58,111 @@ export interface NodeListProps {
   onSearchChange: (v: string) => void;
 }
 
+// Extracted so per-row hooks (usePinned / useMuted / useHasDraft) attach
+// per-alias. Rules-of-hooks means we can't call them inside a .map()
+// callback conditionally; each row is its own component so React
+// mounts a fresh hook state per alias.
+interface NodeListRowProps {
+  session: SessionRow;
+  selected: boolean;
+  unread: number;
+  onSelect: (alias: string) => void;
+  onContextMenu: (alias: string, e: React.MouseEvent) => void;
+}
+function NodeListRow({ session: s, selected, unread, onSelect, onContextMenu }: NodeListRowProps) {
+  const pinned = usePinned(s.alias);
+  const muted = useMuted(s.alias);
+  return (
+    <button
+      key={s.alias}
+      type="button"
+      data-node-list-item
+      data-node-list-alias={s.alias}
+      data-selected={selected ? 'true' : 'false'}
+      data-node-pinned={pinned ? 'true' : undefined}
+      data-node-muted={muted ? 'true' : undefined}
+      onClick={() => onSelect(s.alias)}
+      onContextMenu={e => onContextMenu(s.alias, e)}
+      // SPEC §11.1: pinned row = whole-row light background
+      // rgba(125,211,252,0.04) (hover 0.08); no pin ICON (Feishu
+      // pattern). Selected wins over both.
+      className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-left transition-colors border-b border-[#1a1a1d] ${
+        selected
+          ? 'bg-cyan-500/8'
+          : pinned
+            ? 'bg-[rgba(125,211,252,0.04)] hover:bg-[rgba(125,211,252,0.08)]'
+            : 'hover:bg-[#161618]'
+      }`}
+    >
+      <div className="relative shrink-0">
+        <AliasAvatar alias={s.alias} size={32} />
+        {s.online && (
+          <span
+            aria-hidden
+            className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-green-400 ring-2 ring-[#0F1320]"
+          />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2">
+          {/* SPEC §11: alias + optional bell-slash icon at RIGHT of
+              alias when muted (12×12, #64748B). NO pin icon — pinned
+              state is signaled by row background per §11.1. */}
+          <span className={`text-[13px] truncate flex items-center gap-1.5 min-w-0 ${selected ? 'text-cyan-200 font-medium' : 'text-gray-200'}`}>
+            <span className="truncate">{s.alias}</span>
+            {muted && (
+              <svg
+                aria-label={t('已免打扰', 'Muted')}
+                data-mute-icon
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#64748B"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="shrink-0"
+              >
+                <path d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 00-4-5.7" />
+                <path d="M6 8v3.2c0 .5-.2 1-.6 1.4L4 14h9" />
+                <path d="M13.7 21a2 2 0 01-3.4 0" />
+                <path d="M3 3l18 18" />
+              </svg>
+            )}
+          </span>
+          {/* SPEC §11.3: unread badge color depends on mute:
+              - not-muted → red (#EF4444 / white)
+              - muted    → gray (#475569 / #CBD5E1) — count still shown,
+                           per "static + silent" (mute ≠ mark-read).
+              Kept as one <span> with data-unread-badge on both
+              variants so tests can find it regardless of state. */}
+          {unread > 0 && (
+            <span
+              aria-label={muted
+                ? t(`已免打扰，未读 ${unread}`, `Muted, ${unread} unread`)
+                : t(`${unread} 条未读`, `${unread} unread`)
+              }
+              data-unread-badge
+              data-badge-variant={muted ? 'muted' : 'default'}
+              className={`shrink-0 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-semibold leading-4 text-center ${
+                muted
+                  ? 'bg-[#475569] text-[#CBD5E1]'
+                  : 'bg-[#EF4444] text-white'
+              }`}
+            >
+              {unread > 99 ? '99+' : unread}
+            </span>
+          )}
+        </div>
+        <div className="mt-0.5 flex items-center gap-1.5">
+          <LastLine alias={s.alias} session={s} />
+        </div>
+      </div>
+    </button>
+  );
+}
+
 function LastLine({ alias, session }: { alias: string; session: SessionRow }) {
   const draft = useHasDraft(alias);
   if (draft) {
@@ -68,6 +183,69 @@ function LastLine({ alias, session }: { alias: string; session: SessionRow }) {
 
 export function NodeList({ sessions, selectedAlias, onSelect, search, onSearchChange }: NodeListProps) {
   const { unreadCount } = useChatUnread();
+  // Batch (07-31) segment 2: right-click context menu state. `null` when
+  // closed; `{alias, x, y}` when open. Positioning is at the mouse
+  // coords from the contextmenu event so the menu appears where the
+  // user right-clicked, not at a static offset.
+  const [menu, setMenu] = useState<{ alias: string; x: number; y: number } | null>(null);
+
+  // Batch (07-31) segment 3: keyboard ↑↓ walks the list, Enter opens
+  // the focused entry (URL changes via parent's onSelect → router.push).
+  //
+  // Focus discipline: window-level keydown, guarded to skip when the
+  // user is typing in a text control — the "chat input" case Vincent
+  // explicitly named, plus any generic input/textarea/contenteditable
+  // so we don't hijack keystrokes anywhere in the app.
+  //
+  // Ref pattern: parent's `onSelect` and `sessions` change reference
+  // every render (arrow fn / filtered array). If we used them in the
+  // deps array, the effect would re-attach the listener on every
+  // render — brief windows with no listener could miss keydowns.
+  // Instead: attach ONCE (empty deps), read latest values via ref.
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stateRef = useRef({ sessions, selectedAlias, onSelect });
+  stateRef.current = { sessions, selectedAlias, onSelect };
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'Enter') return;
+      const active = document.activeElement as HTMLElement | null;
+      if (active) {
+        const tag = active.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+        if (active.isContentEditable) return;
+      }
+      const { sessions: s, selectedAlias: sel, onSelect: pick } = stateRef.current;
+      if (s.length === 0) return;
+      const currentIdx = sel ? s.findIndex(x => x.alias === sel) : -1;
+      if (e.key === 'Enter') {
+        if (currentIdx === -1) {
+          e.preventDefault();
+          pick(s[0].alias);
+        }
+        return;
+      }
+      e.preventDefault();
+      const nextIdx = currentIdx === -1
+        ? (e.key === 'ArrowDown' ? 0 : s.length - 1)
+        : (e.key === 'ArrowDown'
+            ? Math.min(s.length - 1, currentIdx + 1)
+            : Math.max(0, currentIdx - 1));
+      if (nextIdx !== currentIdx) pick(s[nextIdx].alias);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // Auto-scroll: after selection change, bring the selected entry into
+  // the rail's viewport. Runs on every render — cheap and safe. Uses
+  // scrollIntoView block:'nearest' so it doesn't jerk the list when
+  // the selected entry is already visible.
+  useEffect(() => {
+    if (!selectedAlias) return;
+    const el = scrollRef.current?.querySelector(`[data-node-list-alias="${CSS.escape(selectedAlias)}"]`) as HTMLElement | null;
+    if (el) el.scrollIntoView({ block: 'nearest' });
+  }, [selectedAlias]);
 
   return (
     <div
@@ -90,7 +268,15 @@ export function NodeList({ sessions, selectedAlias, onSelect, search, onSearchCh
       <div className="px-3 py-2 text-[11px] text-gray-500 tracking-wide uppercase border-b border-[#1e1e22] shrink-0">
         {t(`节点 ${sessions.length}`, `Nodes · ${sessions.length}`)}
       </div>
-      <div data-testid="node-list-scroll" className="flex-1 min-h-0 overflow-y-auto">
+      {menu && (
+        <NodeListContextMenu
+          alias={menu.alias}
+          x={menu.x}
+          y={menu.y}
+          onClose={() => setMenu(null)}
+        />
+      )}
+      <div ref={scrollRef} data-testid="node-list-scroll" className="flex-1 min-h-0 overflow-y-auto">
         {sessions.length === 0 ? (
           search ? (
             /* #Stage D (Vincent ③ 判据): a no-match search MUST look
@@ -112,51 +298,17 @@ export function NodeList({ sessions, selectedAlias, onSelect, search, onSearchCh
           </div>
           )
         ) : (
-          sessions.map(s => {
-            const selected = s.alias === selectedAlias;
-            const unread = unreadCount(s.alias);
-            return (
-              <button
-                key={s.alias}
-                type="button"
-                data-node-list-item
-                data-node-list-alias={s.alias}
-                data-selected={selected ? 'true' : 'false'}
-                onClick={() => onSelect(s.alias)}
-                className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-left transition-colors border-b border-[#1a1a1d] ${
-                  selected ? 'bg-cyan-500/8' : 'hover:bg-[#161618]'
-                }`}
-              >
-                <div className="relative shrink-0">
-                  <AliasAvatar alias={s.alias} size={32} />
-                  {s.online && (
-                    <span
-                      aria-hidden
-                      className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-green-400 ring-2 ring-[#0F1320]"
-                    />
-                  )}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className={`text-[13px] truncate ${selected ? 'text-cyan-200 font-medium' : 'text-gray-200'}`}>
-                      {s.alias}
-                    </span>
-                    {unread > 0 && (
-                      <span
-                        aria-label={t(`${unread} 条未读`, `${unread} unread`)}
-                        className="shrink-0 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-4 text-center"
-                      >
-                        {unread > 99 ? '99+' : unread}
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-0.5 flex items-center gap-1.5">
-                    <LastLine alias={s.alias} session={s} />
-                  </div>
-                </div>
-              </button>
-            );
-          })
+          sessions.map(s => <NodeListRow
+            key={s.alias}
+            session={s}
+            selected={s.alias === selectedAlias}
+            unread={unreadCount(s.alias)}
+            onSelect={onSelect}
+            onContextMenu={(alias, e) => {
+              e.preventDefault();
+              setMenu({ alias, x: e.clientX, y: e.clientY });
+            }}
+          />)
         )}
       </div>
     </div>

package/app/components/NodeListContextMenu.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { togglePin, usePinned } from '../lib/chat-pin';
+import { toggleMute, useMuted } from '../lib/chat-mute';
+import { markChatRead, useChatUnread } from '../lib/chat-unread';
+import { useNetworkId } from '../lib/network-context';
+import { t } from '../lib/ui-lang';
+
+// SPEC §10 (dashboard-ui-ref/SPEC.md): right-click context menu for
+// NodeList rail entries. Actions: 置顶 / 免打扰 / 标记已读.
+//
+// Positioning (SPEC §10 "贴边行为"):
+//   - default: right-and-down of cursor
+//   - if rect.bottom + menuHeight > viewport.bottom → flip up
+//   - if rect.right  + menuWidth  > viewport.right  → flip left
+//   - at least 8px margin from every viewport edge
+//   - useLayoutEffect measures menu then adjusts position (menu size
+//     is bounded but not fixed — item labels change per state)
+//
+// Deep-styling: NO shadow (SPEC §2 conclusion — dark theme shadow
+// renders as gray haze). Use brighter bg (#1E293B vs chat's #141826)
+// + 1px border for shape.
+//
+// Test-hook contract:
+//   - Root: data-testid="node-context-menu", data-target-alias, role="menu"
+//   - Items: data-testid="ctx-pin"|"ctx-mute"|"ctx-mark-read", role="menuitem"
+//   - data-flipped-{y,x}="true" when position was flipped for tests.
+
+export interface NodeListContextMenuProps {
+  alias: string;
+  x: number;  // cursor clientX at right-click
+  y: number;  // cursor clientY at right-click
+  onClose: () => void;
+}
+
+const MENU_W = 200;   // SPEC §10: 200px fixed width
+const EDGE = 8;       // SPEC §10: ≥8px margin from viewport edge
+
+export function NodeListContextMenu({ alias, x, y, onClose }: NodeListContextMenuProps) {
+  const pinned = usePinned(alias);
+  const muted = useMuted(alias);
+  const { networkId } = useNetworkId();
+  const { unreadCount } = useChatUnread();
+  const unread = unreadCount(alias);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; flippedY: boolean; flippedX: boolean }>({
+    top: y,
+    left: x,
+    flippedY: false,
+    flippedX: false,
+  });
+
+  // SPEC §10 "贴边行为" — measure after paint, flip axis if would
+  // overflow. useLayoutEffect so users don't see a paint at the
+  // wrong location before the flip.
+  useLayoutEffect(() => {
+    if (typeof window === 'undefined') return;
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const menuH = rect.height || 120;  // fallback if getBoundingClientRect races
+    const menuW = MENU_W;
+    const vh = window.innerHeight;
+    const vw = window.innerWidth;
+    let top = y;
+    let left = x;
+    let flippedY = false;
+    let flippedX = false;
+    if (y + menuH + EDGE > vh) {
+      top = Math.max(EDGE, y - menuH);
+      flippedY = true;
+    }
+    if (x + menuW + EDGE > vw) {
+      left = Math.max(EDGE, x - menuW);
+      flippedX = true;
+    }
+    // Final clamp — in case the flip still overflows on tiny viewports.
+    top = Math.max(EDGE, Math.min(top, vh - menuH - EDGE));
+    left = Math.max(EDGE, Math.min(left, vw - menuW - EDGE));
+    setPos({ top, left, flippedY, flippedX });
+  }, [x, y]);
+
+  useEffect(() => {
+    // mousedown-capture so a right-click INSIDE the menu doesn't dismiss.
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onClose(); }
+    };
+    document.addEventListener('mousedown', onClick, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onClick, true);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  const runAndClose = (fn: () => void) => () => { fn(); onClose(); };
+
+  // SPEC §10 三态色值 (Tailwind can't do arbitrary custom hex on
+  // pseudo-classes easily; the group-hover + `data-*` selectors on the
+  // Menu item below drive the state colors via inline CSS variables to
+  // keep both bg + text + icon flipping together on hover.)
+  const itemCls =
+    'group w-full text-left flex items-center gap-2.5 px-2.5 py-1.5 text-[13px] font-medium text-[#E2E8F0] ' +
+    'hover:bg-[rgba(125,211,252,0.10)] hover:text-white active:bg-[rgba(125,211,252,0.18)] ' +
+    'disabled:text-[#475569] disabled:cursor-not-allowed disabled:hover:bg-transparent';
+
+  const menu = (
+    <div
+      ref={ref}
+      role="menu"
+      aria-label={t(`节点 ${alias} 操作菜单`, `Actions for node ${alias}`)}
+      data-testid="node-context-menu"
+      data-target-alias={alias}
+      data-flipped-y={pos.flippedY ? 'true' : undefined}
+      data-flipped-x={pos.flippedX ? 'true' : undefined}
+      style={{ position: 'fixed', top: pos.top, left: pos.left, width: MENU_W, zIndex: 60 }}
+      className="rounded-lg border border-[rgba(255,255,255,0.10)] bg-[#1E293B] py-1"
+      onContextMenu={e => e.preventDefault()}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        data-testid="ctx-pin"
+        onClick={runAndClose(() => togglePin(alias))}
+        className={itemCls}
+      >
+        <IconPin className="shrink-0 w-5 h-5 text-[#94A3B8] group-hover:text-[#7DD3FC]" />
+        {pinned ? t('取消置顶', 'Unpin') : t('置顶会话', 'Pin conversation')}
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        data-testid="ctx-mute"
+        onClick={runAndClose(() => toggleMute(alias))}
+        className={itemCls}
+      >
+        <IconBell muted className="shrink-0 w-5 h-5 text-[#94A3B8] group-hover:text-[#7DD3FC]" />
+        {muted ? t('取消免打扰', 'Unmute') : t('免打扰', 'Mute')}
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        data-testid="ctx-mark-read"
+        onClick={runAndClose(() => markChatRead(alias, networkId))}
+        disabled={unread === 0}
+        className={itemCls}
+      >
+        <IconCheck className="shrink-0 w-5 h-5 text-[#94A3B8] group-hover:text-[#7DD3FC] group-disabled:text-[#475569]" />
+        {t(unread > 0 ? `标记已读 (${unread})` : '标记已读', unread > 0 ? `Mark ${unread} read` : 'Mark read')}
+      </button>
+    </div>
+  );
+
+  if (typeof document === 'undefined') return null;
+  return createPortal(menu, document.body);
+}
+
+function IconPin({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 17v5" />
+      <path d="M5 10l7 7 7-7" />
+      <path d="M5 10l3-8h8l3 8z" />
+    </svg>
+  );
+}
+function IconBell({ className, muted }: { className?: string; muted?: boolean }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 00-12 0v3.2c0 .5-.2 1-.6 1.4L4 17h5" />
+      <path d="M13.7 21a2 2 0 01-3.4 0" />
+      {muted && <path d="M3 3l18 18" />}
+    </svg>
+  );
+}
+function IconCheck({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}

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/nodes/NodesView.tsx

@@ -122,6 +122,7 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
     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 +158,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 +267,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
@@ -276,6 +322,18 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.6.3-preview.50",
+  "version": "0.6.3-preview.51",
   "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

@@ -97,6 +97,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 =>