@sleep2agi/agent-network-dashboard 0.5.7-preview.6 → 0.5.7-preview.66

package/app/node/page.tsx

@@ -60,7 +60,7 @@ function TmuxViewer({ tmuxName }: { tmuxName: string }) {
   };
 
   return (
-    <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+    <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
       <div className="flex items-center justify-between mb-2">
         <h2 className="text-sm font-semibold text-gray-300">Terminal ({tmuxName})</h2>
         <div className="flex gap-2">
@@ -76,7 +76,7 @@ function TmuxViewer({ tmuxName }: { tmuxName: string }) {
         </div>
       </div>
       {output && (
-        <pre className={`text-[11px] text-green-300 bg-[#050510] rounded-lg px-3 py-2 border border-[#1a1a2a] overflow-x-auto whitespace-pre font-mono ${expanded ? 'max-h-96' : 'max-h-32'} overflow-y-auto`}>
+        <pre className={`text-[11px] text-green-300 bg-[#060607] rounded-lg px-3 py-2 border border-[#1c1c1f] overflow-x-auto whitespace-pre font-mono ${expanded ? 'max-h-96' : 'max-h-32'} overflow-y-auto`}>
           {output}
         </pre>
       )}
@@ -142,7 +142,7 @@ function NodeDetailContent() {
 
   if (!alias) {
     return (
-      <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono flex items-center justify-center">
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-6 flex items-center justify-center">
         <p className="text-gray-500">No alias specified. <Link href="/" className="text-blue-400 hover:underline">Back to dashboard</Link></p>
       </div>
     );
@@ -153,7 +153,7 @@ function NodeDetailContent() {
   const statusColor = SESSION_STATUS_TEXT_CLASS[session?.status || ''] || SESSION_STATUS_TEXT_CLASS.offline;
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       {/* Header — round 40: avatar joins the alias for cross-page hue
           consistency; agent type lives in a subtitle so users know what
           kind of node they're looking at. */}
@@ -203,10 +203,10 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   }, [tab, eventsLoaded]);
 
   return (
-    <div className="bg-[#0d0d1a] border border-[#2a2a4a] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
+    <div className="bg-[#111113] border border-[#26262b] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
       {/* Tab bar — round 40: emoji icons (💬 📋 📊) replaced with stroke
           SVG to drop the "AI generated" tell. */}
-      <div className="flex border-b border-[#2a2a4a] bg-[#0a0a15] shrink-0">
+      <div className="flex border-b border-[#26262b] bg-[#0e0e10] shrink-0">
         {([
           { id: 'chat',   label: 'Chat',   icon: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' },
           { id: 'events', label: 'Events', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
@@ -241,7 +241,7 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
 
         {tab === 'info' && (
           <div className="p-4 overflow-y-auto h-full space-y-4 max-w-2xl">
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-3">Node Info</h2>
             <div className="space-y-2 text-xs">
               {[
@@ -278,7 +278,7 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
 
           {/* Current Task */}
           {session?.task && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-2">Current Task</h2>
               <p className="text-xs text-gray-400 whitespace-pre-wrap">{session.task}</p>
             </div>
@@ -286,14 +286,14 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
 
           {/* Output */}
           {session?.output && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-2">Last Output</h2>
               <p className="text-xs text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">{session.output}</p>
             </div>
           )}
 
           {/* Send Task */}
-          <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+          <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
             <h2 className="text-sm font-semibold text-gray-300 mb-2">Send Task</h2>
             <div className="flex gap-2">
               <input
@@ -302,12 +302,12 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
                 onChange={e => setSendMsg(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && sendTask()}
                 placeholder={`Send task to ${alias}...`}
-                className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded px-3 py-2 text-xs text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none"
+                className="flex-1 bg-[#0e0e10] border border-[#26262b] rounded px-3 py-2 text-base sm:text-xs text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none"
               />
               <button
                 onClick={sendTask}
                 disabled={sending || !sendMsg.trim()}
-                className="px-3 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 text-white text-xs rounded transition-colors"
+                className="inline-flex min-h-[44px] items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 text-white text-xs rounded transition-colors"
               >
                 {sending ? '...' : 'Send'}
               </button>
@@ -354,11 +354,11 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
   return (
     <div className="p-4 overflow-y-auto h-full space-y-4">
       {[...groups.entries()].map(([taskId, taskEvents]) => (
-        <div key={taskId} className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+        <div key={taskId} className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
           <div className="text-[10px] text-gray-600 mb-3 truncate">Task: {taskId.slice(0, 20)}...</div>
           <div className="relative pl-6">
             {/* Vertical line */}
-            <div className="absolute left-[9px] top-2 bottom-2 w-0.5 bg-[#1a1a2a]" />
+            <div className="absolute left-[9px] top-2 bottom-2 w-0.5 bg-[#1c1c1f]" />
 
             {taskEvents.map((e, i) => {
               const cfg = EVENT_COLORS[e.to_status] || EVENT_COLORS.created;
@@ -366,8 +366,8 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
                 <div key={e.id} className="relative pb-4 last:pb-0">
                   {/* Dot on line — round 59: emoji icons replaced with
                       a 10px stroke SVG path matching event type. */}
-                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#111128]`}>
-                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0a0a15" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#161618]`}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0e0e10" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                       <path d={cfg.path} />
                     </svg>
                   </div>
@@ -398,7 +398,17 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
 
 export default function NodePage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono">Loading...</div>}>
+    <Suspense fallback={
+      // #209 R36: same pattern R30 fixed on /tasks — bare "Loading..."
+      // string used p-6 (no mobile padding tighten) + no left indent,
+      // so the fixed top-3 left-3 mobile hamburger covered the "Loa".
+      // Match the loaded layout: p-4 sm:p-6 + lg:ml-0 ml-10 mobile
+      // indent on the text. Loading state now visually maps to the
+      // populated /node detail page.
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+        <div className="lg:ml-0 ml-10 text-gray-500 text-sm">Loading…</div>
+      </div>
+    }>
       <NodeDetailContent />
     </Suspense>
   );

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>
             );