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

package/app/components/ChatPane.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { AliasAvatar } from './AliasAvatar';
 import { TaskChatPanel } from './TaskChatPanel';
 import { NodeSettingsPanel } from './NodeSettingsPanel';
+import { ChatPaneOverflowMenu } from './ChatPaneOverflowMenu';
 import { useSessions } from '../lib/hooks';
 import { t } from '../lib/ui-lang';
 
@@ -45,6 +46,10 @@ export interface ChatPaneProps {
 
 export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPaneProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  // 07-31 通信龙 batch (SPEC §12 remaining): ⋮ opens overflow menu
+  // (not settings direct). Menu items include 会话设置 as one of four.
+  const [overflowOpen, setOverflowOpen] = useState(false);
+  const overflowAnchorRef = useRef<HTMLButtonElement | null>(null);
   // Look up session for NodeSettingsPanel — it requires the full row.
   // useSessions is SWR-cached (same key as NodesView), so no extra
   // network cost.
@@ -85,28 +90,31 @@ export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPan
           <AliasAvatar alias={alias} size={26} />
           <span className="truncate text-sm font-semibold text-white">{alias}</span>
         </div>
-        {/* SPEC §12: right-side icon row. ⋮ IS the settings entry
-            (opens NodeSettingsPanel directly rather than expanding an
-            overflow menu — spec calls for both, but MVP folds them
-            into one click since the only overflow item that has a
-            wired backend right now IS settings; other items in the
-            spec's 5-item overflow are not yet implemented, per
-            INVENTORY.md). Script accepts either
-            data-testid="chat-pane-settings" or "chat-pane-more" or
-            aria-label containing "设置" — we set testid=settings,
-            aria-label contains "设置", and add data-chat-pane-more so
-            all three script matchers hit. */}
+        {/* SPEC §12 (this batch): four header controls.
+            - ⋮ chat-pane-more     opens overflow dropdown (4 items)
+            - 📋 chat-pane-view-tasks jumps to /tasks?to_name=<alias>
+                (URL param wired via TasksView.tsx:75-76 same batch —
+                the prior `?alias=` was silently dropped in prod)
+            - 🔍 chat-pane-search  dispatches CustomEvent
+                'chat:open-search' which TaskChatPanel listens for
+                (search infra already existed; needed a header trigger)
+            - ✕ chat-pane-close    unchanged
+            NodeSettingsPanel is now inside the overflow menu as
+            'chat-pane-settings' (same testid preserved), NOT the
+            direct handler of ⋮. */}
         <div className="flex items-center gap-1 shrink-0">
           <button
+            ref={overflowAnchorRef}
             type="button"
-            onClick={() => setSettingsOpen(true)}
-            aria-label={t('打开会话设置', 'Open conversation settings')}
-            title={t('会话设置', 'Conversation settings')}
-            data-testid="chat-pane-settings"
-            data-chat-pane-more
+            onClick={() => setOverflowOpen(v => !v)}
+            aria-label={t('会话溢出菜单', 'Chat overflow menu')}
+            aria-haspopup="menu"
+            aria-expanded={overflowOpen}
+            title={t('更多', 'More')}
+            data-testid="chat-pane-more"
+            data-menu-open={overflowOpen ? 'true' : 'false'}
             className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] transition-colors"
           >
-            {/* ⋮ vertical dots — spec §12 "overflow menu" glyph. */}
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <circle cx="12" cy="5" r="1.5" fill="currentColor" />
               <circle cx="12" cy="12" r="1.5" fill="currentColor" />
@@ -114,7 +122,7 @@ export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPan
             </svg>
           </button>
           <a
-            href={`/tasks?alias=${encodeURIComponent(alias)}`}
+            href={`/tasks?to_name=${encodeURIComponent(alias)}`}
             aria-label={t(`查看 ${alias} 的任务`, `View ${alias} tasks`)}
             title={t('查看任务', 'View tasks')}
             data-testid="chat-pane-view-tasks"
@@ -126,11 +134,12 @@ export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPan
           </a>
           <button
             type="button"
-            disabled
-            aria-label={t('会话内搜索（即将支持）', 'In-chat search (coming soon)')}
-            title={t('即将支持', 'Coming soon')}
+            onClick={() => window.dispatchEvent(new CustomEvent('chat:open-search', { detail: { alias } }))}
+            aria-label={t('会话内搜索', 'In-chat search')}
+            title={t('搜索（⌘/Ctrl+F）', 'Search (⌘/Ctrl+F)')}
             data-testid="chat-pane-search"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-700 cursor-not-allowed"
+            data-search-enabled="true"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] transition-colors"
           >
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -168,6 +177,14 @@ export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPan
           positioning="absolute"
         />
       )}
+      {overflowOpen && (
+        <ChatPaneOverflowMenu
+          alias={alias}
+          anchorRef={overflowAnchorRef}
+          onClose={() => setOverflowOpen(false)}
+          onOpenSettings={() => setSettingsOpen(true)}
+        />
+      )}
     </aside>
   );
 }

package/app/components/ChatPaneOverflowMenu.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { togglePin, usePinned } from '../lib/chat-pin';
+import { t } from '../lib/ui-lang';
+
+// SPEC §12: chat header ⋮ opens an overflow menu. Container reuses the
+// same visual tokens as NodeListContextMenu (SPEC §10): 200px width,
+// 32px item height, #1E293B background, 1px border, no shadow, edge-
+// flip on overflow. Portal to body so overflow-y-auto ancestors don't
+// clip us.
+//
+// Items:
+//   - 添加标签页 / 移除标签页  → togglePin(alias)  (label swaps by state)
+//   - 查看任务                 → navigate /tasks?to_name=<alias>
+//   - 会话设置                 → open NodeSettingsPanel (via onOpenSettings)
+//   - ─                       → separator (visual only, non-interactive)
+//
+// 清空历史 is intentionally absent — hub has no clear-history endpoint
+// (see issue #66); rendering it as pure-client setChatEvents([]) would
+// "hide until next fetch", which is worse than not offering it.
+
+export interface ChatPaneOverflowMenuProps {
+  alias: string;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+  onOpenSettings: () => void;
+}
+
+const EDGE = 8;
+
+export function ChatPaneOverflowMenu({ alias, anchorRef, onClose, onOpenSettings }: ChatPaneOverflowMenuProps) {
+  const pinned = usePinned(alias);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; flippedY: boolean; flippedX: boolean }>({
+    top: 0, left: 0, flippedY: false, flippedX: false,
+  });
+
+  // Position below the anchor (⋮ button) by default; flip up if would
+  // overflow bottom, flip left if would overflow right. Same logic as
+  // NodeListContextMenu but anchored to an element instead of a cursor.
+  useLayoutEffect(() => {
+    if (!anchorRef.current || !menuRef.current) return;
+    const a = anchorRef.current.getBoundingClientRect();
+    const m = menuRef.current.getBoundingClientRect();
+    const vh = window.innerHeight;
+    const vw = window.innerWidth;
+    let top = a.bottom + 4;
+    let left = a.right - m.width;
+    let flippedY = false;
+    let flippedX = false;
+    if (top + m.height + EDGE > vh) {
+      top = Math.max(EDGE, a.top - m.height - 4);
+      flippedY = true;
+    }
+    if (left < EDGE) {
+      left = a.left;
+      flippedX = true;
+    }
+    top = Math.max(EDGE, Math.min(top, vh - m.height - EDGE));
+    left = Math.max(EDGE, Math.min(left, vw - m.width - EDGE));
+    setPos({ top, left, flippedY, flippedX });
+  }, [anchorRef]);
+
+  // Close on click-outside (excluding the anchor button itself, which
+  // has its own toggle handler) and Escape.
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (menuRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('mousedown', onDown, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown, true);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [anchorRef, onClose]);
+
+  if (typeof window === 'undefined') return null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label={t('会话溢出菜单', 'Chat overflow menu')}
+      data-testid="chat-pane-overflow-menu"
+      data-flipped-y={pos.flippedY ? 'true' : undefined}
+      data-flipped-x={pos.flippedX ? 'true' : undefined}
+      style={{ position: 'fixed', top: pos.top, left: pos.left, width: 200, zIndex: 200 }}
+      className="rounded-md border border-[rgba(255,255,255,0.08)] bg-[#1E293B] py-1 text-[13px] text-gray-100"
+    >
+      <MenuItem
+        testid="chat-pane-overflow-pin"
+        onClick={() => { togglePin(alias); onClose(); }}
+      >
+        {pinned ? t('移除标签页', 'Remove tab') : t('添加标签页', 'Add as tab')}
+      </MenuItem>
+      <MenuItemLink
+        testid="chat-pane-overflow-view-tasks"
+        href={`/tasks?to_name=${encodeURIComponent(alias)}`}
+        onClick={onClose}
+      >
+        {t('查看任务', 'View tasks')}
+      </MenuItemLink>
+      <MenuItem
+        testid="chat-pane-settings"
+        onClick={() => { onOpenSettings(); onClose(); }}
+      >
+        {t('会话设置', 'Conversation settings')}
+      </MenuItem>
+      <div
+        role="separator"
+        data-testid="chat-pane-overflow-separator"
+        className="my-1 h-px bg-[rgba(255,255,255,0.08)]"
+      />
+    </div>,
+    document.body,
+  );
+}
+
+function MenuItem({ children, onClick, testid }: { children: React.ReactNode; onClick: () => void; testid: string }) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      data-testid={testid}
+      onClick={onClick}
+      className="flex h-8 w-full items-center px-3 text-left hover:bg-[rgba(125,211,252,0.08)] focus:bg-[rgba(125,211,252,0.08)] focus:outline-none"
+    >
+      {children}
+    </button>
+  );
+}
+
+function MenuItemLink({ children, href, onClick, testid }: { children: React.ReactNode; href: string; onClick: () => void; testid: string }) {
+  return (
+    <a
+      role="menuitem"
+      data-testid={testid}
+      href={href}
+      onClick={onClick}
+      className="flex h-8 w-full items-center px-3 text-left hover:bg-[rgba(125,211,252,0.08)] focus:bg-[rgba(125,211,252,0.08)] focus:outline-none"
+    >
+      {children}
+    </a>
+  );
+}

package/app/components/TaskChatPanel.tsx

@@ -711,6 +711,22 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
     window.addEventListener('keydown', onKey, true);
     return () => window.removeEventListener('keydown', onKey, true);
   }, [isActive]);
+  // 07-31 通信龙 batch (SPEC §12 header 🔍): ChatPane's search button
+  // dispatches `chat:open-search` (detail.alias). Same effect as
+  // Cmd/Ctrl+F, but reachable by pointer users. Filter on detail.alias
+  // === alias so a search click on chat A doesn't accidentally open
+  // search on chat B if both were somehow mounted.
+  useEffect(() => {
+    if (!isActive) return;
+    const onEvent = (e: Event) => {
+      const detail = (e as CustomEvent<{ alias?: string }>).detail;
+      if (detail?.alias && detail.alias !== alias) return;
+      setSearchOpen(true);
+      setTimeout(() => searchInputRef.current?.focus(), 50);
+    };
+    window.addEventListener('chat:open-search', onEvent);
+    return () => window.removeEventListener('chat:open-search', onEvent);
+  }, [isActive, alias]);
   const lightboxOpenerRef = useRef<HTMLElement | null>(null);
   const openLightbox = useCallback((url: string) => {
     lightboxOpenerRef.current = document.activeElement as HTMLElement | null;

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.52",
+  "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-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).