@sleep2agi/agent-network-dashboard 0.5.7-preview.2 → 0.5.7-preview.20

package/app/components/TaskChatPanel.tsx

@@ -483,7 +483,14 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   const chatContent = (
     <>
         {/* Messages area */}
-        <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-3 sm:space-y-4">
+        {/* R12 of #190 mobile polish: the chat scroll surface used
+            space-y-3 between task+reply pairs at mobile = 12 px, which
+            in a long thread (the panel's bread-and-butter use case)
+            adds up to a significant scroll length. Drop to space-y-2 at
+            mobile and the per-pair grouping (line 540) from space-y-2
+            to space-y-1.5 so messages read denser without losing the
+            speaker-turn rhythm. Desktop unchanged at sm: and up. */}
+        <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-2 sm:space-y-4">
           {!historyLoaded && (
             <div className="flex justify-center py-8">
               <div className="w-5 h-5 border-2 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" />
@@ -537,7 +544,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               );
             }
             return (
-            <div key={`${m.task_id}:task`} className="space-y-2">
+            <div key={`${m.task_id}:task`} className="space-y-1.5 sm:space-y-2">
               {/* Outgoing task — labeled with origin so peer-forwarded tasks are obvious */}
               <div className="flex justify-end">
                 <div className="max-w-[92%] sm:max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-3 py-2.5 sm:px-4 shadow-sm">
@@ -626,8 +633,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 </select>
               </div>
             </div>
-            <button onClick={send} disabled={sending || (!input.trim() && attachedFiles.length === 0)}
-              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
+            {/* R17 of #190: send button was p-2.5 + w-5 icon = ~40 x 40
+                hit zone, 4 px short of the iOS 44 px guideline on
+                the short axis. Bump to inline-flex + min-h/w 44. */}
+            <button onClick={send} aria-label="Send message" disabled={sending || (!input.trim() && attachedFiles.length === 0)}
+              className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
               {sending ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
               ) : (
@@ -673,7 +683,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               <div className="text-[10px] text-[var(--fg-muted)]">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
             </div>
           </div>
-          <button onClick={onClose} className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)]">
+          {/* R16 of #190: was p-1.5 + w-5 h-5 svg = ~32 px tap target.
+              The chat panel close is high-frequency on mobile (user
+              dismisses to scroll the underlying page); bump to a
+              uniform 44 x 44 hit zone via inline-flex + min-h/w. */}
+          <button onClick={onClose} aria-label="Close chat" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)] rounded-lg hover:bg-[var(--bg-elevated)]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

package/app/components/TaskDrawer.tsx

@@ -88,7 +88,9 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
             <div className="text-sm font-semibold text-white">Task Detail</div>
             <div className="text-[10px] text-gray-500 mt-0.5">{taskId.slice(0, 16)}...</div>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          {/* R16 of #190: same chat-panel close pattern — was ~32 px
+              tap target; lift to a uniform 44 x 44 hit zone. */}
+          <button onClick={onClose} aria-label="Close task drawer" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-gray-500 hover:text-white rounded-lg hover:bg-[#1a1a2a]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

package/app/components/UserBar.tsx

@@ -133,7 +133,7 @@ export function UserBar() {
               setNetworkId(e.target.value);
               sessionStorage.setItem('anet_v3_auth', JSON.stringify(updated));
             }}
-            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"
           >
             {auth.networks.map(n => (
               <option key={n.network_id} value={n.network_id}>{n.network_name}</option>
@@ -160,9 +160,9 @@ export function UserBar() {
       {editing && (
         <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#2a2a4a]">
           <input type="text" value={editName} onChange={e => setEditName(e.target.value)} placeholder="Display name"
-            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white placeholder-gray-600 focus:outline-none w-32" />
+            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-base sm:text-xs text-white placeholder-gray-600 focus:outline-none w-32" />
           <input type="email" value={editEmail} onChange={e => setEditEmail(e.target.value)} placeholder="Email"
-            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white placeholder-gray-600 focus:outline-none w-40" />
+            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-base sm:text-xs text-white placeholder-gray-600 focus:outline-none w-40" />
           <button onClick={updateProfile} className="px-2 py-1 bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded">Save</button>
         </div>
       )}

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/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

@@ -23,15 +23,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>
         ))}
@@ -209,9 +212,9 @@ export default function SettingsPage() {
           <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');

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.7-preview.2",
+  "version": "0.5.7-preview.20",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "main": "apps/desktop/electron/main.cjs",
   "scripts": {