@sleep2agi/agent-network-dashboard 0.5.7-preview.7 → 0.5.7-preview.73

package/app/nodes/page.tsx

@@ -6,6 +6,7 @@ import { useSessions, useHealth } from '../lib/hooks';
 import { TaskChatPanel } from '../components/TaskChatPanel';
 import { EmptyState, NodesEmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
+import { useCollapsibleSearch } from '../components/CollapsibleSearch';
 import type { Session } from '../components/types';
 import { SESSION_STATUS_CHIP_CLASS as STATUS_COLORS } from '../lib/status';
 import { useChatUnread } from '../lib/chat-unread';
@@ -34,6 +35,17 @@ export default function NodesPage() {
   const [search, setSearch] = useState('');
   const [viewMode, setViewMode] = useState<ViewMode>('list');
   const [chatAlias, setChatAlias] = useState<string | null>(null);
+  // #209 R32→R34: the WeChat-style magnifier-toggle search was hand-rolled
+  // inline in R32. R34 extracted it to a shared hook so /nodes, /messages,
+  // and any future search surface stay visually + behaviourally identical.
+  // The hook returns a Button (place in header) + Row (place after header).
+  const searchCtl = useCollapsibleSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: 'Search nodes…',
+    label: 'Search nodes',
+    enabled: sessions.length > 0,
+  });
 
   const filtered: SessionRow[] = sessions
     .map(s => ({ ...s, online: !!sseFor(s) }))
@@ -49,38 +61,37 @@ export default function NodesPage() {
   const onlineCount = sessions.filter(s => sseFor(s)).length;
 
   return (
-    <div className="min-h-screen max-w-full overflow-x-hidden bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <div className="flex items-center gap-4 mb-6">
-        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Nodes</h1>
-        <span className="text-xs bg-green-900/30 text-green-400 px-2 py-0.5 rounded-full border border-green-800/30">
-          {onlineCount} online
-        </span>
-        <span className="text-xs bg-gray-900/30 text-gray-400 px-2 py-0.5 rounded-full border border-gray-800/30">
-          {sessions.length} total
-        </span>
+    <div className="min-h-screen max-w-full overflow-x-hidden bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      {/* #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
+          below all drop mb-6 → mb-4 sm:mb-6. Three spots × 8 px =
+          ~24 px scroll reclaim on /nodes before the first card.
+          #209 R32: search affordance moved to top-right magnifier
+          button (Vincent WeChat ref msg 563). justify-between makes
+          the title cluster hug left, button hugs right. */}
+      <div className="flex items-center gap-4 mb-4 sm:mb-6">
+        <div className="flex items-center gap-3 min-w-0 flex-1">
+          <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Nodes</h1>
+          <span className="text-xs bg-green-900/30 text-green-400 px-2 py-0.5 rounded-full border border-green-800/30 shrink-0">
+            {onlineCount} online
+          </span>
+          <span className="text-xs bg-gray-900/30 text-gray-400 px-2 py-0.5 rounded-full border border-gray-800/30 shrink-0">
+            {sessions.length} total
+          </span>
+        </div>
+        <searchCtl.Button />
       </div>
 
-      {/* Status bar */}
-      {sessions.length > 0 && (() => {
-        const working = filtered.filter(s => s.online && s.status === 'working').length;
-        const idle = filtered.filter(s => s.online && s.status === 'idle').length;
-        const offline = filtered.filter(s => !s.online).length;
-        const total = filtered.length || 1;
-        return (
-          <div className="mb-6">
-            <div className="flex h-2 rounded-full overflow-hidden bg-gray-800">
-              {working > 0 && <div className="bg-green-500" style={{ width: `${(working/total)*100}%` }} />}
-              {idle > 0 && <div className="bg-cyan-500" style={{ width: `${(idle/total)*100}%` }} />}
-              {offline > 0 && <div className="bg-gray-600" style={{ width: `${(offline/total)*100}%` }} />}
-            </div>
-            <div className="flex gap-4 mt-1.5 text-[10px] text-gray-500">
-              {working > 0 && <span><span className="inline-block w-2 h-2 rounded-full bg-green-500 mr-1" />{working} working</span>}
-              {idle > 0 && <span><span className="inline-block w-2 h-2 rounded-full bg-cyan-500 mr-1" />{idle} idle</span>}
-              {offline > 0 && <span><span className="inline-block w-2 h-2 rounded-full bg-gray-600 mr-1" />{offline} offline</span>}
-            </div>
-          </div>
-        );
-      })()}
+      {/* #209 R34: shared <CollapsibleSearch> component handles row reveal,
+          autofocus, Escape, and Cancel. enabled=sessions.length>0 hides
+          everything until there's content to search. */}
+      <searchCtl.Row />
+
+      {/* #217 D6 (less is more): the status distribution bar + its
+          working/idle/offline legend duplicated the header chips
+          (N online / N total) and the per-card status pills right
+          below. One count display per screen — the bar is gone. */}
 
       {/* Round 74: hide the filter+view chrome when there are no nodes
           anywhere — these controls have nothing to act on, and they only
@@ -88,18 +99,14 @@ export default function NodesPage() {
           exists, the chrome is back even if the current filter happens
           to hide everything (so users can clear filters). */}
       {sessions.length > 0 && (
-      <div className="flex flex-wrap gap-3 mb-6">
-        <input
-          type="text"
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          placeholder="Search nodes..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-48"
-        />
+      <div className="flex flex-wrap gap-3 mb-4 sm:mb-6">
+        {/* R32: the inline search input was moved to the top-right
+            magnifier toggle above. The status select + List/Grid
+            toggle stay here. */}
         <select
           value={filterStatus}
           onChange={e => setFilterStatus(e.target.value)}
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500/50 focus:outline-none"
+          className="bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white focus:border-blue-500/50 focus:outline-none"
         >
           <option value="">All</option>
           <option value="online">Online</option>
@@ -113,7 +120,7 @@ export default function NodesPage() {
             grid-cols-1 below `md` and List degrades to the same single
             column, so the toggle has no visual effect under sm and only
             steals a row of vertical space. */}
-        <div className="hidden sm:flex ml-auto rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 text-sm">
+        <div className="hidden sm:flex ml-auto rounded-lg border border-[#26262b] bg-[#161618] p-1 text-sm">
           {(['list', 'grid'] as const).map(mode => (
             <button
               key={mode}
@@ -165,7 +172,7 @@ export default function NodesPage() {
                 tabIndex={0}
                 onClick={() => setChatAlias(s.alias)}
                 onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setChatAlias(s.alias); } }}
-                className={`relative min-w-0 max-w-full overflow-hidden rounded-xl border border-[#2a2a4a] bg-[#111128] p-4 transition-colors hover:border-cyan-500/40 cursor-pointer ${!s.online ? 'opacity-60' : ''}`}
+                className={`relative min-w-0 max-w-full overflow-hidden rounded-xl border border-[#26262b] bg-[#161618] p-4 transition-colors hover:border-cyan-500/40 cursor-pointer ${!s.online ? 'opacity-60' : ''}`}
               >
                 {!s.online && (
                   <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
@@ -177,7 +184,7 @@ export default function NodesPage() {
                 <div className="flex items-start gap-3">
                   <div className="relative shrink-0">
                     <AliasAvatar alias={s.alias} size={36} />
-                    {unread && <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-[#111128] bg-red-500" />}
+                    {unread && <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-[#161618] bg-red-500" />}
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
@@ -194,7 +201,7 @@ export default function NodesPage() {
                   <span className="hidden shrink-0 rounded-lg border border-cyan-500/15 bg-cyan-500/5 px-2 py-1 text-[10px] text-cyan-300/70 sm:inline">Tap to chat</span>
                 </div>
 
-                <div className="mt-3 rounded-lg border border-[#1a1a2a] bg-[#0a0a15] px-3 py-2 text-xs">
+                <div className="mt-3 rounded-lg border border-[#1c1c1f] bg-[#0e0e10] px-3 py-2 text-xs">
                   <div className="flex items-center justify-between gap-3">
                     <span className="text-[10px] uppercase tracking-wide text-gray-600">Current task</span>
                     <span className="text-[10px] text-gray-600">{timeAgo(s.last_seen_at || s.updated_at)}</span>
@@ -215,7 +222,7 @@ export default function NodesPage() {
           })}
         </div>
       ) : (
-        <div className="space-y-2">
+        <div className="space-y-1 sm:space-y-2">
           {/* Round 94: AGENT + SERVER merged into one `agent · server`
               cell. Round mobile-command: node row itself opens chat, so
               the old Chat / Send Task action column is gone. */}
@@ -237,7 +244,7 @@ export default function NodesPage() {
                 tabIndex={0}
                 onClick={() => setChatAlias(s.alias)}
                 onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setChatAlias(s.alias); } }}
-                className={`rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 transition-colors hover:border-cyan-500/40 cursor-pointer ${!s.online ? 'opacity-50' : ''}`}
+                className={`rounded-lg border border-[#26262b] bg-[#161618] px-3 py-2 sm:px-4 sm:py-3 transition-colors hover:border-cyan-500/40 cursor-pointer ${!s.online ? 'opacity-50' : ''}`}
               >
                 <div className="hidden sm:grid sm:grid-cols-10 gap-2 items-center">
                   <div className="col-span-1">
@@ -249,7 +256,7 @@ export default function NodesPage() {
                     <div className="flex items-center gap-2 min-w-0">
                       <div className="relative shrink-0">
                         <AliasAvatar alias={s.alias} size={20} />
-                        {unread && <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full border border-[#111128] bg-red-500" />}
+                        {unread && <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full border border-[#161618] bg-red-500" />}
                       </div>
                       <span className="truncate text-sm font-medium text-white">{s.alias}</span>
                       {unread && <span className="shrink-0 rounded-full bg-red-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-red-300">New</span>}
@@ -261,11 +268,18 @@ export default function NodesPage() {
                   <div className="col-span-4 truncate text-xs text-gray-500" title={s.task || ''}>{s.task || '--'}</div>
                   <div className="col-span-1 text-xs text-gray-500">{timeAgo(s.last_seen_at || s.updated_at)}</div>
                 </div>
-                <div className="sm:hidden space-y-2">
+                {/* R7 of #190: mobile node row was ~340px tall × ~150
+                    rows = the 51k page. Wins this round, in priority
+                    order: (1) drop the per-row "Tap anywhere to chat"
+                    hint — useful once, redundant 149 times; the cyan
+                    border on hover/focus still teaches it. (2) tighten
+                    space-y-2 → space-y-1 so the avatar/task gap is
+                    4px tighter on every row. */}
+                <div className="sm:hidden space-y-1">
                   <div className="flex items-center gap-2.5">
                     <div className="relative shrink-0">
                       <AliasAvatar alias={s.alias} size={28} />
-                      {unread && <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-[#111128] bg-red-500" />}
+                      {unread && <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-[#161618] bg-red-500" />}
                     </div>
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2 min-w-0">
@@ -279,7 +293,6 @@ export default function NodesPage() {
                     </span>
                   </div>
                   {s.task && <div className="truncate text-xs text-gray-500">{s.task}</div>}
-                  <div className="text-[10px] text-cyan-300/70">Tap anywhere to chat</div>
                 </div>
               </div>
             );