@sleep2agi/agent-network-dashboard 0.5.7-preview.4 → 0.5.7-preview.40

package/app/layout.tsx

@@ -20,7 +20,26 @@ export const metadata: Metadata = {
     statusBarStyle: "black-translucent",
     title: "Agent Network",
   },
-  icons: { icon: '/favicon.svg' },
+  // R26 of #190: Next.js 16 renders `mobile-web-app-capable` (the modern
+  // standardized meta) but NOT the legacy `apple-mobile-web-app-capable`.
+  // iOS Safari < 16.4 only checks the apple-prefixed name; without it,
+  // the dashboard won't install as a web app on those iOS versions and
+  // the statusBarStyle + apple-touch-icon (R24) are silently ignored.
+  // Emit the legacy alias via metadata.other for back-compat.
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+  },
+  // R24 of #190: appleWebApp.capable above declares this is an iOS web
+  // app, but only `icon` was specified, leaving iOS Safari to fall back
+  // to a generic icon on Add-to-Home-Screen. iOS 15+ accepts SVG via
+  // `rel="apple-touch-icon" type="image/svg+xml"`; older iOS will fall
+  // back to the manifest icons (added R23) and then the generic. Reuse
+  // the existing sleep2agi-logo.svg — no new asset shipped.
+  icons: {
+    icon: [{ url: '/favicon.svg', type: 'image/svg+xml' }],
+    apple: [{ url: '/sleep2agi-logo.svg', type: 'image/svg+xml' }],
+    shortcut: '/favicon.svg',
+  },
   openGraph: {
     title: "Agent Network Dashboard",
     description: "Real-time monitoring dashboard for Agent Network nodes",
@@ -34,6 +53,13 @@ export const viewport: Viewport = {
   maximumScale: 5,
   userScalable: true,
   themeColor: "#0a0a1a",
+  // R25 of #190: metadata.appleWebApp.statusBarStyle above is
+  // "black-translucent", which renders the iOS status bar as a
+  // transparent overlay above the page (rather than reserving its own
+  // strip). Without viewportFit: "cover" the resulting safe-area-inset
+  // env() values resolve to 0, so the HealthBanner gets occluded by
+  // the clock/battery row when the user opens the installed PWA.
+  viewportFit: "cover",
 };
 
 // Inline pre-paint script to apply persisted theme before React hydrates,

package/app/lib/hooks.ts

@@ -63,11 +63,6 @@ export function useStats() {
   return { stats: data?.ok ? data : null, error };
 }
 
-export function useLicense() {
-  const { data, error } = useSWR('/api/hub/license', fetcher, { refreshInterval: 60000 });
-  return { license: data?.ok ? data : null, error };
-}
-
 export function useMessages(limit = 100) {
   const { networkId } = useNetworkId();
   const { data, error, isLoading } = useSWR(

package/app/login/page.tsx

@@ -92,7 +92,7 @@ export default function LoginPage() {
           </label>
           <input id="username" type="text" value={username} onChange={e => setUsername(e.target.value)} autoFocus
             placeholder="Enter username"
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all mb-4" />
+            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 py-3 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all mb-4" />
 
           <label htmlFor="password" className="block text-xs text-gray-500 mb-2 uppercase tracking-wider">
             Password
@@ -100,13 +100,13 @@ export default function LoginPage() {
           <div className="relative">
             <input id="password" type={showPassword ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)}
               placeholder="Enter password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 pr-11 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 pr-11 py-3 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
             <button
               type="button"
               onClick={() => setShowPassword(s => !s)}
               tabIndex={-1}
               aria-label={showPassword ? 'Hide password' : 'Show password'}
-              className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600 hover:text-gray-300 transition-colors"
+              className="absolute inset-y-0 right-0 flex items-center justify-center min-w-[44px] px-3 text-gray-600 hover:text-gray-300 transition-colors"
             >
               {showPassword ? (
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">

package/app/logs/page.tsx

@@ -162,11 +162,15 @@ export default function LogsPage() {
       ) : logs.length === 0 ? (
         <EmptyState variant="logs" />
       ) : (
-        <div className="space-y-2">
+        /* R18 of #190 mobile polish: /logs was 28,791 px on 390 px
+           mobile; same dense-card pattern that R7/R8 hit on /nodes
+           and /tasks. Tighten card padding and inter-card gap on
+           mobile, sm:-gated so desktop stays comfortable. */
+        <div className="space-y-1 sm:space-y-2">
           {logs.map(log => {
             const userName = log.username || log.user_id;
             return (
-            <div key={log.id} className="relative bg-[#111128] border border-[#2a2a4a] rounded-lg pl-4 pr-4 py-3 hover:border-[#3a3a5a] transition-colors overflow-hidden">
+            <div key={log.id} className="relative bg-[#111128] border border-[#2a2a4a] rounded-lg pl-3 pr-3 py-2 sm:pl-4 sm:pr-4 sm:py-3 hover:border-[#3a3a5a] transition-colors overflow-hidden">
               {/* 2px left rail per action (round 33) — failed logins, token
                   rotations spike out of a wall of register/login rows. */}
               <span

package/app/messages/page.tsx

@@ -5,6 +5,7 @@ import { useMessages } from '../lib/hooks';
 import { timeAgo, previewContent } from '../components/utils';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
+import { useCollapsibleSearch } from '../components/CollapsibleSearch';
 
 interface MessageItem {
   id: string;
@@ -58,6 +59,14 @@ export default function MessagesPage() {
   const [search, setSearch] = useState('');
   const [debug, setDebug] = useState(false);
   const [viewMode, setViewMode] = useState<'timeline' | 'grouped'>('timeline');
+  // #209 R33→R34: WeChat-style magnifier-toggle search hook (shared with /nodes).
+  const searchCtl = useCollapsibleSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: 'Search from/to/content or use from:alias…',
+    label: 'Search messages',
+    enabled: messages.length > 0,
+  });
 
   const quickFromChips = useMemo(() => {
     const aliases = new Set<string>();
@@ -105,55 +114,63 @@ export default function MessagesPage() {
 
   return (
     <div className="min-h-screen 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">Messages</h1>
-        {/* Round 89: filter-aware chip. When search/type filter is active
-            the visible rows are filtered.length; the total loaded is
-            messages.length (capped at 200 by useMessages). Show
-            `filtered / total` so users notice how much the filter is
-            hiding. Same pattern as r88 /tasks chip. */}
-        <span
-          className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30 tabular-nums"
-          title={filtered.length < messages.length ? `Showing ${filtered.length} of ${messages.length} messages` : undefined}
-        >
-          {filtered.length < messages.length ? `${filtered.length} / ${messages.length}` : messages.length}
-        </span>
-        {filtered.length > 0 && (
-          <button
-            onClick={() => {
-              const md = filtered.map((m: MessageItem) =>
-                `**${m.from_alias || '?'}** → ${m.to_alias || '?'} (${m.type || '?'}) — ${m.created_at || ''}\n\n${m.content || '--'}\n\n---`
-              ).join('\n\n');
-              const blob = new Blob([`# Messages Export\n\n${md}`], { type: 'text/markdown' });
-              const url = URL.createObjectURL(blob);
-              const a = document.createElement('a');
-              a.href = url; a.download = `messages-${new Date().toISOString().slice(0,10)}.md`;
-              a.click(); URL.revokeObjectURL(url);
-            }}
-            className="text-xs text-gray-500 hover:text-gray-300 border border-gray-700/50 px-2.5 py-1 rounded-lg transition-colors"
+      {/* #209 R31 (mobile vertical rhythm — same pattern as R28/R30):
+          header row + quick-from chips row both mb-6 → mb-4 sm:mb-6.
+          #209 R33: header restructured to mirror /nodes R32 — title
+          cluster left (Messages + count chip + Export MD), magnifier
+          circle right. Inline ~290 px search input was moved into the
+          collapsible row below. */}
+      <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">Messages</h1>
+          {/* Round 89: filter-aware chip. When search/type filter is active
+              the visible rows are filtered.length; the total loaded is
+              messages.length (capped at 200 by useMessages). Show
+              `filtered / total` so users notice how much the filter is
+              hiding. Same pattern as r88 /tasks chip. */}
+          <span
+            className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30 tabular-nums shrink-0"
+            title={filtered.length < messages.length ? `Showing ${filtered.length} of ${messages.length} messages` : undefined}
           >
-            Export MD
-          </button>
-        )}
+            {filtered.length < messages.length ? `${filtered.length} / ${messages.length}` : messages.length}
+          </span>
+          {filtered.length > 0 && (
+            <button
+              onClick={() => {
+                const md = filtered.map((m: MessageItem) =>
+                  `**${m.from_alias || '?'}** → ${m.to_alias || '?'} (${m.type || '?'}) — ${m.created_at || ''}\n\n${m.content || '--'}\n\n---`
+                ).join('\n\n');
+                const blob = new Blob([`# Messages Export\n\n${md}`], { type: 'text/markdown' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url; a.download = `messages-${new Date().toISOString().slice(0,10)}.md`;
+                a.click(); URL.revokeObjectURL(url);
+              }}
+              className="text-xs text-gray-500 hover:text-gray-300 border border-gray-700/50 px-2.5 py-1 rounded-lg transition-colors shrink-0"
+            >
+              Export MD
+            </button>
+          )}
+        </div>
+        <searchCtl.Button />
       </div>
 
+      {/* #209 R34: shared <CollapsibleSearch> component. enabled gate
+          handles the no-content case (button + row both hide). */}
+      <searchCtl.Row />
+
       {/* Round 76: hide search + type filter + view toggle + Debug button
           when there are no messages at all. Same r70-class fix carried
           across /nodes (r74) and /tasks (r75). When at least one message
           exists, the chrome reappears so users can still clear filters. */}
       {messages.length > 0 && (
       <div className="flex flex-wrap gap-3 mb-3">
-        <input
-          type="text"
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          placeholder="Search from/to/content or use from:alias"
-          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-full sm:w-72"
-        />
+        {/* R33: inline search input moved to the top-right magnifier
+            toggle above. Type select + view-mode toggle + Debug stay. */}
         <select
           value={filterType}
           onChange={e => setFilterType(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-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white focus:border-blue-500/50 focus:outline-none"
         >
           <option value="">All types</option>
           <option value="task">task</option>
@@ -181,7 +198,7 @@ export default function MessagesPage() {
       )}
 
       {quickFromChips.length > 0 && (
-        <div className="mb-6 flex flex-wrap gap-2">
+        <div className="mb-4 sm:mb-6 flex flex-wrap gap-2">
           {quickFromChips.map(alias => (
             <button
               key={alias}
@@ -260,19 +277,26 @@ export default function MessagesPage() {
 
             return (
               <div key={message.id}>
+                {/* R6 of #190 mobile polish: gap divider was my-4 (=16px
+                    each side), and with multi-hour message lulls it
+                    fired several times per session, eating ~32px each.
+                    Halve it on mobile. */}
                 {gapExceeded && (
-                  <div className="my-4 flex items-center gap-3">
+                  <div className="my-2 sm:my-4 flex items-center gap-3">
                     <div className="h-px flex-1 bg-[#2a2a4a]" />
                     <div className="text-[11px] text-gray-600">{formatDividerLabel(message.created_at)}</div>
                     <div className="h-px flex-1 bg-[#2a2a4a]" />
                   </div>
                 )}
 
-                {/* Broadcasts span full width — no avatar gutter. */}
+                {/* Broadcasts span full width — no avatar gutter. R6 mobile:
+                    tighter padding + tighter header margin + snug leading
+                    on the content so each bubble is ~25-30% shorter at
+                    390px. Desktop unchanged from sm: up. */}
                 {variant === 'broadcast' ? (
-                  <div className={samePrev ? 'mt-1' : 'mt-3'}>
-                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-4 py-3 shadow-sm w-full">
-                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                  <div className={samePrev ? 'mt-0.5 sm:mt-1' : 'mt-2 sm:mt-3'}>
+                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-3 py-2 sm:px-4 sm:py-3 shadow-sm w-full">
+                      <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                         <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                           {message.type || 'unknown'}
                         </span>
@@ -285,24 +309,24 @@ export default function MessagesPage() {
                           long unbroken runs (URLs, ASCII rules like
                           `═══════════════`) wrap instead of pushing the
                           chat bubble past the mobile viewport. */}
-                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
                     </div>
                   </div>
                 ) : (
-                  <div className={`${samePrev ? 'mt-1' : 'mt-3'} flex gap-2 ${variant === 'outgoing' ? 'flex-row-reverse' : 'flex-row'}`}>
+                  <div className={`${samePrev ? 'mt-0.5 sm:mt-1' : 'mt-2 sm:mt-3'} flex gap-2 ${variant === 'outgoing' ? 'flex-row-reverse' : 'flex-row'}`}>
                     {/* Avatar gutter — fixed width keeps bubble columns aligned even on streaks */}
                     <div className="w-8 shrink-0 pt-1">
                       {!samePrev && <AliasAvatar alias={fromAlias} size={32} />}
                     </div>
-                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-4 py-3 shadow-sm ${
+                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-3 py-2 sm:px-4 sm:py-3 shadow-sm ${
                       variant === 'outgoing'
                         ? 'border-green-500/20 bg-green-500/10'
                         : 'border-blue-500/20 bg-blue-500/10'
                     }`}>
                       {!samePrev && (
-                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                           <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                             {message.type || 'unknown'}
                           </span>
@@ -320,7 +344,7 @@ export default function MessagesPage() {
                           long unbroken runs (URLs, ASCII rules like
                           `═══════════════`) wrap instead of pushing the
                           chat bubble past the mobile viewport. */}
-                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
 

package/app/node/page.tsx

@@ -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-[#0a0a15] border border-[#2a2a4a] 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>

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) }))
@@ -50,16 +62,32 @@ export default function NodesPage() {
 
   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>
+      {/* #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>
 
+      {/* #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 />
+
       {/* Status bar */}
       {sessions.length > 0 && (() => {
         const working = filtered.filter(s => s.online && s.status === 'working').length;
@@ -67,7 +95,7 @@ export default function NodesPage() {
         const offline = filtered.filter(s => !s.online).length;
         const total = filtered.length || 1;
         return (
-          <div className="mb-6">
+          <div className="mb-4 sm: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}%` }} />}
@@ -88,18 +116,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-[#111128] border border-[#2a2a4a] 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>
@@ -215,7 +239,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 +261,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-[#2a2a4a] bg-[#111128] 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">
@@ -261,7 +285,14 @@ 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} />
@@ -279,7 +310,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>
             );

package/app/page.tsx

@@ -4,10 +4,8 @@ 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';
@@ -17,7 +15,6 @@ import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
 import { useSessions, useHealth, useAnetConfig, useTasks, useStats } from './lib/hooks';
 import { useSSE } from './lib/useSSE';
-import { InboxMessage } from './components/types';
 import { useSWRConfig } from 'swr';
 
 export default function Dashboard() {
@@ -40,7 +37,6 @@ export default function Dashboard() {
   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 +71,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 || {};
@@ -156,8 +136,15 @@ export default function Dashboard() {
         <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">
+      {/* anet config (collapsed by default).
+          #209 R28 (mobile vertical rhythm — goal "大幅提升移动端体验"):
+          this + Task Status + Nav rail + Recent Activity all drop their
+          24 px (mb-6) section gap to 16 px (mb-4) on phones, restoring
+          mb-6 from sm: up. Overview on mobile stacks 5-7 sections above
+          the agent grid; tightening 4 of those gaps reclaims ~32 px of
+          scroll. No content removed, no feature changed — desktop is
+          identical. */}
+      <section className="mb-4 sm: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>
@@ -189,7 +176,7 @@ export default function Dashboard() {
 
       {/* Task Status Stats */}
       {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">
+        <section className="mb-4 sm: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>
@@ -312,7 +299,7 @@ export default function Dashboard() {
       </section>
 
       {/* Nav rail — pure navigation, icon + label, no data */}
-      <section className="mb-6 grid grid-cols-3 gap-2 sm:gap-3">
+      <section className="mb-4 sm: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' },
@@ -328,11 +315,9 @@ export default function Dashboard() {
         ))}
       </section>
 
-      <BroadcastBar />
-
       {/* Recent Activity */}
       {tasks.length > 0 && (
-        <section className="mb-6 bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+        <section className="mb-4 sm: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>
@@ -454,8 +439,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 /