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

package/app/page.tsx

@@ -2,22 +2,14 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { formatUptime, previewContent } from './components/utils';
 import { StatsBar } from './components/StatsBar';
-import { BroadcastBar } from './components/BroadcastBar';
 import { TopoGraph } from './components/TopoGraph';
 import { AgentCard } from './components/AgentCard';
-import { InboxPanel } from './components/InboxPanel';
 import { LoadingSkeleton } from './components/LoadingSkeleton';
 import { NodesEmptyState as EmptyState } from './components/EmptyState';
-import { AliasAvatar } from './components/AliasAvatar';
-import { STATUS_DOT_HEX, STATUS_CHIP_CLASS } from './lib/status';
-import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
-import { DispatchPanel } from './components/DispatchPanel';
-import { useSessions, useHealth, useAnetConfig, useTasks, useStats } from './lib/hooks';
+import { useSessions, useHealth, useTasks, useStats } from './lib/hooks';
 import { useSSE } from './lib/useSSE';
-import { InboxMessage } from './components/types';
 import { useSWRConfig } from 'swr';
 
 export default function Dashboard() {
@@ -33,14 +25,10 @@ export default function Dashboard() {
 
   const { sessions, hint: sessHint, error: sessError, isLoading } = useSessions();
   const { health } = useHealth();
-  const { config: anetConfig } = useAnetConfig();
   const { tasks } = useTasks({ limit: '500' });
   const { stats } = useStats();
   const [showTopo, setShowTopo] = useState(typeof window !== 'undefined' && window.innerWidth >= 1024);
-  const [showConfig, setShowConfig] = useState(false);
   const cmd = useCommandCenter();
-  const [showDispatch, setShowDispatch] = useState(false);
-  const [inbox, setInbox] = useState<InboxMessage[]>([]);
   const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
   // #84: last node.renamed event — passed to TopoGraph so an open chat
   // popover follows the rename instead of pointing at a dead alias. `ts`
@@ -75,22 +63,6 @@ export default function Dashboard() {
     },
   });
 
-  // Fetch inbox (not in SWR since it accumulates)
-  useEffect(() => {
-    const fetchInbox = () => {
-      fetch('/api/hub/inbox').then(r => r.json()).then(data => {
-        if (data.messages?.length) setInbox(prev => {
-          const ids = new Set(prev.map(m => m.id));
-          const newMsgs = data.messages.filter((m: { id: string }) => !ids.has(m.id));
-          return [...newMsgs, ...prev].slice(0, 100);
-        });
-      }).catch(() => {});
-    };
-    fetchInbox();
-    const interval = setInterval(fetchInbox, 10000);
-    return () => clearInterval(interval);
-  }, []);
-
   if (isLoading) return <LoadingSkeleton />;
 
   const sseSessions = health?.sse_sessions || {};
@@ -103,14 +75,6 @@ export default function Dashboard() {
   const online = sessions.filter(isOnline).length;
   const total = sessions.length;
   const working = sessions.filter(s => s.status === 'working').length;
-  const uptime = health ? formatUptime(health.uptime) : '--';
-  const version = health?.version || '--';
-  const configHealthy = Boolean(anetConfig?.hub && anetConfig.tokenConfigured);
-  const configSourceLabel =
-    anetConfig?.source === 'file' ? 'Local config'
-    : anetConfig?.source === 'runtime-env' ? 'Runtime env'
-    : 'Config missing';
-
   // Task stats: prefer /api/stats, fallback to manual
   const taskStats: Record<string, number> = {};
   if (stats?.tasks?.by_status?.length) {
@@ -132,233 +96,37 @@ export default function Dashboard() {
     return bWorking - aWorking;
   });
 
-  /** Round 70: when the fleet is empty, the Overview reorders to lead with
-   *  the "Spin up your first agent" CTA and hides the Quick Navigation /
-   *  Nav rail / Broadcast bar that would otherwise occupy prime real estate
-   *  with zeros and dead-end links. Computed once, used as a gate below. */
-  const fleetEmpty = sessions.length === 0 && !sessError;
-
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <div className="lg:ml-0 ml-10">
-        <StatsBar online={online} working={working} total={total} version={version} uptime={uptime} />
-      </div>
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      <StatsBar online={online} working={working} total={total} />
 
-      {/* Dispatch + User Bar — Dispatch hidden when fleet empty (nothing to
-          dispatch to); UserBar still useful (account/sign-out menu). */}
-      <div className="flex items-center gap-3 mb-4">
-        {!fleetEmpty && (
-          <button onClick={() => setShowDispatch(true)}
-            className="px-4 py-2 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white text-sm font-medium rounded-xl shadow-lg shadow-cyan-500/10 transition-all active:scale-95 shrink-0">
-            ⚡ Dispatch
-          </button>
-        )}
-        <div className="flex-1"><UserBar /></div>
-      </div>
-
-      {/* anet config (collapsed by default) */}
-      <section className="mb-6 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 shadow-lg shadow-black/20">
-        <button onClick={() => setShowConfig(!showConfig)} className="w-full flex items-center justify-between text-left">
-          <div className="flex items-center gap-2 text-xs">
-            <span className="uppercase text-gray-600">Config</span>
-            <span className={`w-2 h-2 rounded-full ${configHealthy ? 'bg-green-400' : 'bg-red-400'}`} />
-            <span className="text-gray-500">{configSourceLabel}</span>
-          </div>
-          <svg className={`w-4 h-4 text-gray-600 transition-transform ${showConfig ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        {showConfig && (
-          <div className="mt-3 pt-3 border-t border-[#2a2a4a]">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="min-w-0">
-                <div className="text-gray-100 truncate text-sm" title={anetConfig?.hub || undefined}>
-                  Hub: <span className={anetConfig?.hub ? 'text-cyan-300' : 'text-red-300'}>{anetConfig?.hub?.trim() || 'not configured'}</span>
-                </div>
-              </div>
-              <div className="flex flex-wrap gap-2 text-xs">
-                <span className={`px-2.5 py-1 rounded-md border ${anetConfig?.tokenConfigured ? 'bg-blue-500/5 text-blue-300 border-blue-500/20' : 'bg-gray-500/5 text-gray-400 border-gray-500/20'}`}>
-                  Token: {anetConfig?.tokenPreview || 'not configured'}
-                </span>
-              </div>
-            </div>
-            {anetConfig?.error && <div className="mt-2 text-xs text-gray-600">{anetConfig.error}</div>}
-          </div>
-        )}
-      </section>
+      {/* #217 S5 (Vincent: "极简极简，这些都可以放到设置里面去"): the
+          Dispatch button and UserBar row are gone from Overview.
+          Dispatch lives in /admin (Send Task panel); sign-out lives in
+          Settings and the sidebar; network switching lives in the
+          sidebar. */}
 
-      {/* Task Status Stats */}
+      {/* Task summary. #217 S5 (Vincent: "乱七八糟的东西太多"): the
+          9-status colored chip wall is now a single quiet line — the
+          only two numbers that drive action are running and failed;
+          everything else lives on /tasks. */}
       {Object.keys(taskStats).length > 0 && (
-        <section className="mb-6 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 shadow-lg shadow-black/20">
-          <div className="flex items-center justify-between mb-2">
-            <div className="text-xs uppercase text-gray-600">Task Status</div>
-            <Link href="/tasks" prefetch={false} className="text-xs text-cyan-400 hover:text-cyan-300">View all &rarr;</Link>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {/* Round 69: order is "hot first" — active flow before terminal
-                states — intentionally different from the lifecycle order on
-                /tasks. Colors come from shared STATUS_CHIP_CLASS so a
-                palette tweak in app/lib/status.ts updates here too.
-                'created' added in r69 (was missing — enum-coverage bug). */}
-            {(['running', 'delivered', 'acked', 'replied', 'created', 'failed', 'cancelled', 'expired', 'closed'] as const)
-              .filter((key) => taskStats[key])
-              .map((key) => (
-                <Link key={key} href={`/tasks?status=${key}`} prefetch={false} className={`px-2.5 py-1 rounded-md border text-xs ${STATUS_CHIP_CLASS[key]} hover:opacity-80 transition-opacity`}>
-                  {key}: {taskStats[key]}
-                </Link>
-              ))}
+        <section className="mb-4 sm:mb-6 flex items-center justify-between rounded-lg border border-[#26262b] bg-[#161618] px-4 py-2.5 text-xs">
+          <div className="text-gray-400 tabular-nums">
+            <span className={taskStats['running'] ? 'text-green-400' : 'text-gray-500'}>{taskStats['running'] || 0} running</span>
+            <span className="text-gray-600"> &middot; </span>
+            <span className={taskStats['failed'] ? 'text-red-400' : 'text-gray-500'}>{taskStats['failed'] || 0} failed</span>
           </div>
+          <Link href="/tasks" prefetch={false} className="text-cyan-400 hover:text-cyan-300">View all &rarr;</Link>
         </section>
       )}
 
-      {/* Quick Actions — split into two distinct intents:
-          (1) Top: live stat cards (carry data, drill-in on click)
-          (2) Bottom: pure nav rail (no number, icon + label)
-          Round 24 — wrap both in a labelled block so the rhythm reads as
-          "here are the main jumps" instead of two disconnected strips.
-          Round 70 — entire Quick Nav + Nav rail + Broadcast + Recent
-          Activity block is hidden when the fleet is empty so the
-          onboarding CTA gets the page above the fold. */}
-      {!fleetEmpty && <>
-      <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 mb-2">Quick navigation</div>
-      <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
-        {(() => {
-          // Build breakdown popover content per card. Pure data — pure CSS
-          // popover (no JS state) wires the hover-show transition below.
-          const idleCount = sessions.filter(s => isOnline(s) && s.status !== 'working').length;
-          const offlineCount = total - online;
-          const orderedStatuses = ['running', 'replied', 'failed', 'cancelled', 'expired', 'closed', 'created', 'delivered', 'acked'];
-          const failedRecent = tasks.filter((t: { status: string }) => t.status === 'failed').length;
-
-          const cards = [
-            {
-              href: '/nodes', label: 'Nodes',
-              value: `${online}/${total}`,
-              sub: `${total > 0 ? Math.round((online / total) * 100) : 0}% online`,
-              color: 'text-green-400 border-green-500/20',
-              popover: total === 0 ? null : [
-                { k: 'working', v: working, dot: '', color: '#4ade80' },
-                { k: 'idle', v: idleCount, dot: '', color: '#22d3ee' },
-                { k: 'offline', v: offlineCount, dot: '', color: '#9ca3af' },
-              ],
-            },
-            {
-              href: '/tasks', label: 'Tasks',
-              value: String(Object.values(taskStats).reduce((a, b) => a + b, 0) || 0),
-              sub: 'all-time',
-              color: 'text-cyan-400 border-cyan-500/20',
-              popover: Object.keys(taskStats).length === 0 ? null
-                : orderedStatuses
-                    .filter(s => taskStats[s])
-                    .map(s => {
-                      // Inline hex avoids Tailwind purging dynamic
-                      // `bg-${color}-400` class names.
-                      const hex = ({
-                        running:   '#4ade80', replied:   '#a78bfa', failed:    '#f87171',
-                        cancelled: '#facc15', expired:   '#fb923c', closed:    '#9ca3af',
-                        created:   '#9ca3af', delivered: '#60a5fa', acked:     '#22d3ee',
-                      } as Record<string, string>)[s] || '#9ca3af';
-                      return { k: s, v: taskStats[s], dot: '', color: hex };
-                    }),
-            },
-            {
-              href: '/tasks?status=failed', label: 'Failed',
-              value: String(taskStats['failed'] || 0),
-              sub: taskStats['failed'] ? 'needs review' : 'none',
-              color: taskStats['failed'] ? 'text-red-400 border-red-500/25' : 'text-gray-500 border-gray-700/30',
-              popover: !failedRecent ? [{ k: 'no failures yet', v: '', dot: '', color: '#4b5563' }]
-                : [{ k: `${failedRecent} in current view`, v: '', dot: '', color: '#f87171' }],
-            },
-          ];
-
-          return cards.map(a => (
-            <Link
-              key={a.href}
-              href={a.href}
-              prefetch={false}
-              className={`anet-stat-link group relative rounded-xl border ${a.color} bg-[#111128] px-3 py-3 transition-all hover:-translate-y-px`}
-            >
-              <div className="flex items-baseline justify-between">
-                <div className={`text-xl font-semibold tabular-nums ${a.color.split(' ')[0]}`}>{a.value}</div>
-                <div className="hidden sm:block text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors">View →</div>
-              </div>
-              <div className="text-[11px] text-gray-400 mt-0.5">{a.label}</div>
-              <div className="text-[10px] text-gray-600 mt-px">{a.sub}</div>
-
-              {/* Hover popover — CSS-only, restrained. Hidden on touch
-                  (no :hover) so mobile is unaffected. Positioned just
-                  below the card so it doesn't fight nav rail. */}
-              {a.popover && a.popover.length > 0 && (
-                <div className="anet-stat-popover hidden md:block pointer-events-none absolute left-2 right-2 top-full mt-1 z-20 rounded-lg border border-[#2a2a4a] bg-[#0d0d1a] shadow-lg shadow-black/30 px-3 py-2 opacity-0 translate-y-[-2px] group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-150 delay-100">
-                  <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-1.5">Breakdown</div>
-                  <ul className="space-y-1">
-                    {a.popover.map(row => (
-                      <li key={row.k} className="flex items-center gap-2 text-[11px]">
-                        <span
-                          className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
-                          style={{ backgroundColor: row.color }}
-                          aria-hidden
-                        />
-                        <span className="text-gray-400 capitalize">{row.k}</span>
-                        {row.v !== '' && <span className="ml-auto text-gray-300 tabular-nums font-medium">{row.v}</span>}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </Link>
-          ));
-        })()}
-      </section>
-
-      {/* Nav rail — pure navigation, icon + label, no data */}
-      <section className="mb-6 grid grid-cols-3 gap-2 sm:gap-3">
-        {[
-          { href: '/messages', label: 'Messages', 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' },
-          { href: '/logs', label: 'Audit log', 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' },
-          { href: '/admin', label: 'Admin', icon: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2' },
-        ].map(a => (
-          <Link key={a.href} href={a.href} prefetch={false}
-            className="anet-nav-tile flex items-center justify-center gap-2 rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-2.5 text-[12px] text-gray-400 hover:text-gray-200 transition-colors">
-            <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d={a.icon} />
-            </svg>
-            <span>{a.label}</span>
-          </Link>
-        ))}
-      </section>
-
-      <BroadcastBar />
-
-      {/* Recent Activity */}
-      {tasks.length > 0 && (
-        <section className="mb-6 bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
-          <div className="flex items-center justify-between mb-3">
-            <h2 className="text-sm font-semibold text-gray-300">Recent Activity</h2>
-            <Link href="/tasks" className="text-xs text-cyan-400 hover:text-cyan-300">All tasks &rarr;</Link>
-          </div>
-          <div className="space-y-2 max-h-40 overflow-y-auto">
-            {tasks.slice(0, 5).map((t: { task_id: string; from_name: string; to_name: string; status: string; content: string; created_at: string }) => (
-              <div key={t.task_id} className="flex items-center gap-2 text-xs">
-                <span
-                  className="w-1.5 h-1.5 rounded-full shrink-0"
-                  style={{ backgroundColor: STATUS_DOT_HEX[t.status] || '#6b7280' }}
-                />
-                {t.from_name && <AliasAvatar alias={t.from_name} size={14} />}
-                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.from_name || '?'}</span>
-                <span className="text-gray-600">&rarr;</span>
-                {t.to_name && <AliasAvatar alias={t.to_name} size={14} />}
-                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.to_name || '?'}</span>
-                <span className="text-gray-500 truncate flex-1" title={t.content || ''}>{previewContent(t.content).slice(0, 60)}</span>
-                <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] border ${
-                  STATUS_CHIP_CLASS[t.status] || 'text-gray-500 border-gray-700/30'
-                }`}>{t.status}</span>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-      </>}
+      {/* #217 S5 (less is more): Quick Navigation stat cards, the nav
+          rail, and Recent Activity are deleted. Every route they linked
+          to is one tap away in the bottom tab bar (mobile) or sidebar
+          (desktop), the headline numbers already live in the KPI cards
+          and the task summary line, and recent tasks live on /tasks.
+          Restore path: git revert this commit. */}
 
       {sessError && (
         <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-4 py-3 rounded-lg mb-6 text-sm flex items-center justify-between" role="alert">
@@ -378,15 +146,21 @@ export default function Dashboard() {
         </div>
       )}
 
-      {/* Mobile hint when topo hidden */}
-      {!showTopo && sessions.length > 0 && (
-        <div className="lg:hidden text-center text-xs text-gray-600 mb-4">
-          Topology hidden on mobile for better readability
+      {showTopo && sessions.length > 0 && (
+        // #209 R41: mobile-only soft cap on the rendered TopoGraph.
+        // Default behaviour on desktop is unchanged (lg: drops the cap
+        // entirely). On phones the SVG card was free to claim ~600+ px
+        // of vertical real-estate, which on a 667-844 px viewport meant
+        // tapping "Show Topology" pushed the agent grid completely off
+        // screen. Capping to 70 vh with overflow-y-auto keeps the graph
+        // interactive (the SVG already does its own pan + zoom inside
+        // the viewport) while letting the page below stay reachable
+        // with a single ordinary scroll past the cap.
+        <div className="lg:max-h-none lg:overflow-visible max-h-[70vh] overflow-y-auto rounded-xl border border-transparent lg:border-0">
+          <TopoGraph sessions={sessions} sseSessions={sseSessions} renameSignal={renameSignal} />
         </div>
       )}
 
-      {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} renameSignal={renameSignal} />}
-
       {sessions.length === 0 && !sessError ? (
         <EmptyState
           hint={sessHint}
@@ -426,12 +200,14 @@ export default function Dashboard() {
                   className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
                     agentFilter === c.key
                       ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
-                      : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                      : 'text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] border border-transparent'
                   }`}
                 >
                   {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                  {/* #217 D5: counts dropped — the KPI cards directly above
+                      already carry 53/100/153; repeating them here doubled
+                      every number on the first screen. */}
                   <span>{c.label}</span>
-                  <span className={`text-[10px] tabular-nums ${agentFilter === c.key ? 'text-cyan-400' : 'text-gray-600'}`}>{counts[c.key]}</span>
                 </button>
               ))}
             </div>
@@ -454,8 +230,6 @@ export default function Dashboard() {
         );
       })()}
 
-      <InboxPanel messages={inbox} />
-
       {/* Round 111 (issue #82): dropped the license badge — "trial (12d
           left)" read like a paywall countdown on an open-source dashboard
           and Vincent flagged it as misleading more than once. The SSE /
@@ -470,9 +244,6 @@ export default function Dashboard() {
         )}
       </div>
 
-      {/* Dispatch Panel */}
-      {showDispatch && <DispatchPanel sessions={sessions} onClose={() => setShowDispatch(false)} />}
-
       {/* Command Center (multi-tab chat) */}
       {cmd.tabs.length > 0 && (
         <CommandCenter

package/app/server-logs/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef, useCallback } from 'react';
+import { useCollapsibleSearch } from '@/app/components/CollapsibleSearch';
 import Link from 'next/link';
 
 interface LogLine {
@@ -63,6 +64,16 @@ export default function ServerLogsPage() {
   const [filterLevel, setFilterLevel] = useState<'all' | LogLine['level']>('all');
   const [search, setSearch] = useState('');
   const [autoRefresh, setAutoRefresh] = useState(true);
+  // #209 R35: adopt the shared CollapsibleSearch hook (R34) so the
+  // inline 全宽 search input collapses behind a magnifier circle in
+  // the toolbar — same WeChat-style affordance as /nodes /messages.
+  const searchCtl = useCollapsibleSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: '搜索关键字 (alias / task_id / error message)',
+    label: 'Search logs',
+    enabled: true,
+  });
   const lastTsRef = useRef<string>('');
 
   const fetchLogs = useCallback(async (initial = false) => {
@@ -116,10 +127,17 @@ export default function ServerLogsPage() {
   for (const l of logs) counts[l.level]++;
 
   return (
-    <div className="p-6 max-w-[1600px] mx-auto">
+    // #209 R35: p-6 → p-4 sm:p-6 mobile-tighten (matches /tasks, /nodes,
+    // /messages, /overview convention). Saves 16 px of L/R padding on phones.
+    <div className="p-4 sm:p-6 max-w-[1600px] mx-auto">
       <div className="flex items-center justify-between mb-4 gap-3">
         <div className="flex items-center gap-3 min-w-0">
-          <h1 className="text-2xl font-bold text-white">Server Logs</h1>
+          {/* #209 R35: lg:ml-0 ml-10 burger-clearance — without it the
+              fixed top-3 left-3 mobile hamburger sat right on top of the
+              "Se" of "Server Logs". Caught by playwright mobile shot. */}
+          {/* #217 D8: text-xl + nowrap on phones — at text-2xl the title
+              wrapped to two lines under the 4-control toolbar. */}
+          <h1 className="text-xl sm:text-2xl font-bold text-white lg:ml-0 ml-10 whitespace-nowrap">Server Logs</h1>
           {/* Round 86: dropped the {logs.length} header chip — r84 added
               `all <count>` to the filter strip just below, so this duplicated
               the value within 40px of itself. */}
@@ -158,9 +176,17 @@ export default function ServerLogsPage() {
             </svg>
             <span className="hidden sm:inline">Reload</span>
           </button>
+          {/* #209 R35: magnifier-toggle search (WeChat-style, via the
+              shared CollapsibleSearch hook). Lives at the tail of the
+              toolbar so it sits at the right edge of the header. */}
+          <searchCtl.Button />
         </div>
       </div>
 
+      {/* R35: collapsible search row — sits above the filter chip strip
+          so toggling it doesn't shift the chip layout. */}
+      <searchCtl.Row />
+
       {/* Round 95: flex-wrap + min-w-0 on the search wrapper so the
           search input drops below the chip strip on mobile instead of
           overflowing past the viewport. Desktop layout (single row)
@@ -183,7 +209,7 @@ export default function ServerLogsPage() {
                 className={`px-2.5 py-1 rounded border flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed ${
                   isActive
                     ? 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40'
-                    : 'bg-[#11111c] text-gray-400 border-[#2a2a4a] hover:bg-[#1a1a2a]'
+                    : 'bg-[#161618] text-gray-400 border-[#26262b] hover:bg-[#1c1c1f]'
                 }`}
               >
                 <span>{lv}</span>
@@ -192,15 +218,15 @@ export default function ServerLogsPage() {
             );
           })}
         </div>
-        <input
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          placeholder="搜索关键字 (alias / task_id / error message)"
-          className="flex-1 min-w-[140px] basis-full sm:basis-0 px-3 py-1.5 text-xs bg-[#11111c] border border-[#2a2a4a] rounded text-gray-200 focus:outline-none focus:border-cyan-500/40"
-        />
-        <span className="text-[10px] text-gray-600">
-          {filtered.length} / {logs.length}
-        </span>
+        {/* #217 D8 (same rule as the D6 /tasks chip): the counter only
+            renders when it carries unique info — a filter or search is
+            actually narrowing the list. "500 / 500" duplicated the
+            `all 500` chip 20px to its left. */}
+        {filtered.length < logs.length && (
+          <span className="text-[10px] text-gray-600 ml-auto tabular-nums">
+            {filtered.length} / {logs.length}
+          </span>
+        )}
       </div>
 
       {error && (() => {
@@ -235,7 +261,7 @@ export default function ServerLogsPage() {
         );
       })()}
 
-      <div className="rounded border border-[#1a1a2a] bg-[#050510] font-mono text-[11px] leading-relaxed overflow-hidden">
+      <div className="rounded border border-[#1c1c1f] bg-[#060607] font-mono text-[11px] leading-relaxed overflow-hidden">
         {filtered.length === 0 ? (
           <div className="p-8 text-center text-gray-600">
             {error ? '加载失败' : logs.length === 0 ? '加载中...' : '没有匹配的日志'}
@@ -243,7 +269,7 @@ export default function ServerLogsPage() {
         ) : (
           <div className="divide-y divide-[#0d0d18] max-h-[calc(100vh-260px)] overflow-y-auto">
             {filtered.map((l, i) => (
-              <div key={`${l.ts}-${i}`} className="relative pl-3 pr-3 py-1 hover:bg-[#0a0a14] flex gap-3">
+              <div key={`${l.ts}-${i}`} className="relative pl-3 pr-3 py-1 hover:bg-[#0e0e10] flex gap-3">
                 {/* Round 32: 2px left rail keyed to level. Makes warn/error
                     spike visible in a wall of `log` lines without users having
                     to read the level chip on every row. */}

package/app/servers/page.tsx

@@ -4,24 +4,45 @@ import { ServersPanel } from '../components/ServersDrawer';
 
 export default function ServersPage() {
   return (
-    <main className="min-h-screen bg-[#0a0a1a] px-4 py-5 text-gray-100 sm:px-6 lg:px-8">
+    <main className="min-h-screen bg-[#0b0b0d] px-4 py-5 text-gray-100 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-5xl space-y-5">
-        <header className="rounded-2xl border border-[#2a2a4a] bg-[#111128] p-5 shadow-lg shadow-black/20">
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-            <div>
-              <p className="text-[11px] uppercase tracking-[0.18em] text-cyan-300/70">Infrastructure</p>
-              <h1 className="mt-2 text-2xl font-semibold text-white">Servers</h1>
-              <p className="mt-2 max-w-2xl text-sm leading-6 text-gray-400">
-                Host-level health, disk, memory, CPU history, and agent rollups from CommHub telemetry.
-              </p>
+        {/* #209 R37: header card compressed for mobile. Original layout
+            stacked 4 things vertically on phones (INFRASTRUCTURE eyebrow,
+            big h1, 3-line description, full-width "live" chip) eating
+            ~50% of the iPhone viewport before any server card appeared.
+            New shape:
+              row 1: h1 "Servers" + tiny live chip (inline on every width)
+              row 2: optional desc line, single-truncate on mobile so it
+                     fits without wrapping; full text via title= on hover.
+              eyebrow: kept but inlined with h1 as small uppercase prefix
+                       (sm: up) — drops out on phones for density.
+            p-5 → p-4 sm:p-5 also tightens the inner padding.
+            Zero feature removed; the eyebrow + desc still render where
+            there is room. */}
+        <header className="rounded-2xl border border-[#26262b] bg-[#161618] p-4 sm:p-5 shadow-lg shadow-black/20">
+          <div className="flex items-center justify-between gap-3 lg:ml-0 ml-10">
+            <div className="flex items-baseline gap-2 min-w-0">
+              <span className="hidden sm:inline text-[11px] uppercase tracking-[0.18em] text-cyan-300/70 shrink-0">
+                Infrastructure
+              </span>
+              <span className="hidden sm:inline text-gray-700">·</span>
+              <h1 className="text-xl sm:text-2xl font-semibold text-white truncate">Servers</h1>
             </div>
-            <div className="rounded-xl border border-cyan-500/20 bg-cyan-500/10 px-3 py-2 text-xs font-mono text-cyan-200">
-              live · refreshes every 5s
+            <div className="shrink-0 rounded-full border border-cyan-500/20 bg-cyan-500/10 px-2.5 py-1 text-[11px] font-mono text-cyan-200 inline-flex items-center gap-1.5">
+              <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+              <span className="hidden sm:inline">live · refreshes every 5s</span>
+              <span className="sm:hidden">live</span>
             </div>
           </div>
+          <p
+            className="mt-2 max-w-2xl text-xs sm:text-sm leading-snug sm:leading-6 text-gray-400 truncate sm:whitespace-normal lg:ml-0 ml-10"
+            title="Host-level health, disk, memory, CPU history, and agent rollups from CommHub telemetry."
+          >
+            Host-level health, disk, memory, CPU history, and agent rollups from CommHub telemetry.
+          </p>
         </header>
 
-        <section className="rounded-2xl border border-[#2a2a4a] bg-[#111128] p-3 shadow-lg shadow-black/20">
+        <section className="rounded-2xl border border-[#26262b] bg-[#161618] p-3 shadow-lg shadow-black/20">
           <ServersPanel className="max-h-none overflow-visible" />
         </section>
       </div>