@sleep2agi/agent-network-dashboard 0.5.7-preview.3 → 0.5.7-preview.31

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

@@ -148,12 +148,12 @@ export default function MessagesPage() {
           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"
+          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-full sm:w-72"
         />
         <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>
@@ -260,19 +260,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 +292,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 +327,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

@@ -94,12 +94,12 @@ export default function NodesPage() {
           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"
+          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-full sm:w-48"
         />
         <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 +215,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 +237,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 +261,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 +286,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 || {};
@@ -328,8 +308,6 @@ export default function Dashboard() {
         ))}
       </section>
 
-      <BroadcastBar />
-
       {/* Recent Activity */}
       {tasks.length > 0 && (
         <section className="mb-6 bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
@@ -454,8 +432,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 /

package/app/server-logs/page.tsx

@@ -196,7 +196,7 @@ export default function ServerLogsPage() {
           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"
+          className="flex-1 min-w-[140px] basis-full sm:basis-0 px-3 py-1.5 text-base sm: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}
@@ -252,8 +252,15 @@ export default function ServerLogsPage() {
                   className="absolute left-0 top-0 bottom-0 w-0.5"
                   style={{ backgroundColor: LEVEL_STRIPE[l.level] }}
                 />
-                <span className="text-gray-600 shrink-0 w-[100px] text-[10px] tabular-nums">{shortTime(l.ts)}</span>
-                <span className={`shrink-0 px-1.5 rounded border text-[9px] uppercase ${LEVEL_BADGE[l.level]}`}>
+                {/* R4 of #190 mobile polish: the 100px timestamp column +
+                    32px LEVEL badge ate ~45% of a 375px row, squeezing log
+                    content into a 3-line wrap. Drop the ts column to 60px
+                    on mobile (HH:MM:SS still fits at 9px), restore 100px
+                    at sm. The 2px left rail (LEVEL_STRIPE) already
+                    encodes level visually for warn/error, so the LOG badge
+                    is redundant on mobile — hide it below sm. */}
+                <span className="text-gray-600 shrink-0 w-[60px] sm:w-[100px] text-[9px] sm:text-[10px] tabular-nums">{shortTime(l.ts)}</span>
+                <span className={`hidden sm:inline shrink-0 px-1.5 rounded border text-[9px] uppercase ${LEVEL_BADGE[l.level]}`}>
                   {l.level}
                 </span>
                 {/* Round 85: CommHub stamps each log line with a `[HH:MM:SS]`

package/app/settings/networks/page.tsx

@@ -111,9 +111,9 @@ export default function NetworksPage() {
           <h2 className="text-sm font-semibold text-gray-300 mb-3">Create Network</h2>
           <div className="space-y-3">
             <input type="text" value={newName} onChange={e => setNewName(e.target.value)} placeholder="Network name"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <input type="text" value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="Description (optional)"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={createNetwork} disabled={!newName.trim()}
               className="px-4 py-2 bg-green-600 hover:bg-green-500 disabled:bg-gray-800 text-white text-sm rounded-lg transition-colors">
               Create
@@ -199,7 +199,7 @@ export default function NetworksPage() {
                         <div className="text-xs text-gray-500 mb-2">Invite</div>
                         <div className="flex gap-2">
                           <select value={inviteRole} onChange={e => setInviteRole(e.target.value)}
-                            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white focus:outline-none">
+                            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-base sm:text-xs text-white focus:outline-none">
                             <option value="member">member</option>
                             <option value="admin">admin</option>
                             <option value="viewer">viewer</option>

package/app/settings/page.tsx

@@ -2,15 +2,12 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { useAnetConfig, useHealth, useLicense } from '../lib/hooks';
+import { useAnetConfig, useHealth } from '../lib/hooks';
 import { DASHBOARD_VERSION } from '../lib/version';
 
 export default function SettingsPage() {
   const { config } = useAnetConfig();
   const { health } = useHealth();
-  const { license: licData } = useLicense();
-  const [licKey, setLicKey] = useState('');
-  const [licResult, setLicResult] = useState('');
   const [oldPwd, setOldPwd] = useState('');
   const [newPwd, setNewPwd] = useState('');
   const [pwdResult, setPwdResult] = useState('');
@@ -23,15 +20,18 @@ export default function SettingsPage() {
 
       {/* Section anchor nav (round 28) — jump to a group instead of scrolling
           through the whole page. Mirrors the section headers below; pages
-          with 7+ cards benefit from a visible table-of-contents. */}
-      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+          with 7+ cards benefit from a visible table-of-contents.
+          R3 of #190 mobile polish: matches the /admin chip treatment
+          (preview.3) — 44px tap-target + visible border so the chips read
+          as tappable rather than as inert headings on 375–390px. */}
+      <nav className="mb-8 flex flex-wrap gap-2 text-xs">
         {[
           { href: '#connection', label: 'Connection' },
           { href: '#account',    label: 'Account' },
           { href: '#resources',  label: 'Resources' },
         ].map(a => (
           <a key={a.href} href={a.href}
-            className="rounded-md px-2.5 py-1 text-gray-500 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            className="inline-flex min-h-[44px] items-center rounded-md border border-[#2a2a4a] bg-[#0a0a15]/60 px-3 py-2 text-gray-400 hover:border-cyan-500/50 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
             {a.label}
           </a>
         ))}
@@ -131,87 +131,14 @@ export default function SettingsPage() {
             <div className="flex-1 h-px bg-[#2a2a4a]" />
           </div>
 
-        {/* License */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4 flex items-center gap-2">
-            License
-            {licData?.license && (
-              <span
-                className={`inline-flex items-center gap-1.5 text-[10px] font-medium px-2 py-0.5 rounded-full border ${
-                  licData.license.type === 'pro'
-                    ? 'text-green-300 bg-green-500/10 border-green-500/30'
-                    : licData.license.days_left <= 7
-                      ? 'text-red-300 bg-red-500/10 border-red-500/30'
-                      : 'text-amber-300 bg-amber-500/10 border-amber-500/30'
-                }`}
-              >
-                <span aria-hidden className="w-1.5 h-1.5 rounded-full bg-current" />
-                {licData.license.type}{licData.license.days_left ? ` · ${licData.license.days_left}d left` : ''}
-              </span>
-            )}
-          </h2>
-          {licData?.license ? (
-            <div className="space-y-3 text-sm">
-              {/* Type + Days Left are summarized in the inline chip in the
-                  header. Surface "expiring soon" only when relevant. */}
-              {licData.license.days_left <= 7 && (
-                <div className={rowClass}>
-                  <span className="text-red-400 font-medium">⚠ Expiring soon</span>
-                  <span className="text-red-400">{licData.license.days_left} days left</span>
-                </div>
-              )}
-              <div className={rowClass}>
-                <span className="text-gray-500">Expires</span>
-                <span className={`text-gray-300 ${valueClass}`}>{licData.license.expires_at}</span>
-              </div>
-              {licData.limits && (
-                <>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Max Agents</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_agents}</span>
-                  </div>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Max Networks</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_networks}</span>
-                  </div>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Tasks/Day</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_tasks_day}</span>
-                  </div>
-                </>
-              )}
-              <div className="pt-3 border-t border-[#2a2a4a]">
-                <div className="flex gap-2">
-                  <input type="text" value={licKey} onChange={e => setLicKey(e.target.value)}
-                    placeholder="anet-XXXX-XXXX-XXXX-XXXX"
-                    className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded px-3 py-2 text-xs text-white placeholder-gray-600 focus:outline-none" />
-                  <button onClick={async () => {
-                    if (!licKey.trim()) return;
-                    const res = await fetch('/api/hub/license', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: licKey }) });
-                    const data = await res.json();
-                    setLicResult(data.ok ? `Activated: ${data.type}` : `Failed: ${data.error}`);
-                    if (data.ok) setLicKey('');
-                    setTimeout(() => setLicResult(''), 5000);
-                  }} className="px-3 py-2 bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded transition-colors">
-                    Activate
-                  </button>
-                </div>
-                {licResult && <div className={`mt-2 text-xs ${licResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{licResult}</div>}
-              </div>
-            </div>
-          ) : (
-            <div className="text-xs text-gray-600">License info not available</div>
-          )}
-        </section>
-
         {/* Change Password */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Change Password</h2>
           <div className="space-y-3">
             <input type="password" value={oldPwd} onChange={e => setOldPwd(e.target.value)} placeholder="Current password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <input type="password" value={newPwd} onChange={e => setNewPwd(e.target.value)} placeholder="New password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={async () => {
               if (!oldPwd || !newPwd) return;
               const saved = sessionStorage.getItem('anet_v3_auth');
@@ -263,7 +190,13 @@ export default function SettingsPage() {
             <div className="flex-1 h-px bg-[#2a2a4a]" />
           </div>
 
-        {/* API Tokens + Networks */}
+        {/* #209 (per Vincent 521/522): the low-frequency pages 通信龙
+            moved out of the sidebar (Messages, Audit Log, Server Logs)
+            need a discovery surface that isn't the primary nav — folded
+            into the Settings/Resources grid alongside Tokens + Networks
+            so the page tree stays the same (pages NOT deleted), the
+            sidebar stays at 6, and users still have a one-tap way to
+            reach them without remembering URLs or opening Cmd+K. */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <Link href="/settings/tokens" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
             <h2 className="text-sm font-semibold text-gray-300">API Tokens</h2>
@@ -275,6 +208,21 @@ export default function SettingsPage() {
             <p className="text-xs text-gray-500 mt-2">Create, manage, and delete agent networks.</p>
             <span className="text-xs text-cyan-400 mt-3 inline-block">Manage &rarr;</span>
           </Link>
+          <Link href="/messages" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Messages</h2>
+            <p className="text-xs text-gray-500 mt-2">Global timeline of CommHub messages across all agents.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
+          <Link href="/logs" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Audit Log</h2>
+            <p className="text-xs text-gray-500 mt-2">Authentication, token rotations, and admin actions.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
+          <Link href="/server-logs" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Server Logs</h2>
+            <p className="text-xs text-gray-500 mt-2">Live stdout / stderr from the CommHub server.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
         </div>
         </div>
 

package/app/settings/tokens/page.tsx

@@ -80,7 +80,7 @@ export default function TokensPage() {
           <div className="flex gap-2">
             <input type="text" value={newName} onChange={e => setNewName(e.target.value)}
               placeholder="Token name (e.g. my-cli)"
-              className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={createToken} disabled={!newName.trim()}
               className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 disabled:bg-gray-800 text-white text-sm rounded-lg transition-colors">
               Create

package/app/tasks/page.tsx

@@ -180,7 +180,7 @@ function TasksContent() {
             value={filterFrom}
             onChange={e => setFilterFrom(e.target.value)}
             placeholder="any node"
-            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+            className="w-28 bg-transparent text-base sm:text-sm text-white placeholder-gray-700 focus:outline-none"
           />
         </div>
         <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
@@ -190,7 +190,7 @@ function TasksContent() {
             value={filterTo}
             onChange={e => setFilterTo(e.target.value)}
             placeholder="any node"
-            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+            className="w-28 bg-transparent text-base sm:text-sm text-white placeholder-gray-700 focus:outline-none"
           />
         </div>
         {(filterStatus || filterFrom || filterTo) && (
@@ -248,7 +248,7 @@ function TasksContent() {
             : 'Tasks will appear here when agents send them via CommHub.'}
         />
       ) : (
-        <div className="space-y-2">
+        <div className="space-y-1 sm:space-y-2">
           {/* Table header */}
           <div className="hidden sm:grid sm:grid-cols-12 gap-2 px-4 py-2 text-xs text-gray-600 uppercase">
             <div className="col-span-1">Status</div>
@@ -264,7 +264,7 @@ function TasksContent() {
             return (
             <div
               key={t.task_id}
-              className={`anet-task-row group bg-[#111128] border rounded-lg px-4 py-3 transition-all duration-200 cursor-pointer ${
+              className={`anet-task-row group bg-[#111128] border rounded-lg px-3 py-2 sm:px-4 sm:py-3 transition-all duration-200 cursor-pointer ${
                 isOpen
                   ? 'border-[#3a3a5a] shadow-lg shadow-black/20'
                   : 'border-[#2a2a4a] hover:border-[#3a3a5a] hover:bg-[#15152e]'
@@ -311,8 +311,12 @@ function TasksContent() {
                 </div>
               </div>
 
-              {/* Mobile layout */}
-              <div className="sm:hidden space-y-2">
+              {/* Mobile layout — R8 of #190 mobile polish: 4-row stack
+                  → 3-row by inlining timeAgo onto the same row as the
+                  from→to alias header (it's already 4 small atoms, has
+                  room), plus space-y-2 → space-y-1 to trim ~4px per
+                  row × 200 tasks. */}
+              <div className="sm:hidden space-y-1">
                 <div className="flex items-center justify-between">
                   <span className={statusBadge(t.status)}>{t.status}</span>
                   <div className="flex items-center gap-2">
@@ -328,13 +332,13 @@ function TasksContent() {
                 </div>
                 <div className="flex items-center gap-1.5 text-xs text-gray-300 min-w-0">
                   {t.from_name && <AliasAvatar alias={t.from_name} size={16} />}
-                  <span className="truncate max-w-[40%]">{t.from_name || '--'}</span>
+                  <span className="truncate max-w-[35%]">{t.from_name || '--'}</span>
                   <span className="text-gray-600">&rarr;</span>
                   {t.to_name && <AliasAvatar alias={t.to_name} size={16} />}
-                  <span className="truncate max-w-[40%]">{t.to_name || '--'}</span>
+                  <span className="truncate max-w-[35%]">{t.to_name || '--'}</span>
+                  <span className="ml-auto shrink-0 text-[10px] text-gray-600">{timeAgo(t.created_at)}</span>
                 </div>
                 <div className="text-xs text-gray-400 line-clamp-1" title={t.content}>{previewContent(t.content)}</div>
-                <div className="text-xs text-gray-600">{timeAgo(t.created_at)}</div>
               </div>
 
               {/* Expanded detail — always mounted; grid-rows 0fr↔1fr trick gives