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

package/app/components/AgentCard.tsx

@@ -28,7 +28,7 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
-      className={`anet-agent-card group relative block rounded-xl border p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
+      className={`anet-agent-card group relative block rounded-xl border p-3 sm:p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
         hasSse
           ? `bg-[#111128] border-[#2a2a4a] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
           : 'bg-[#0d0d1a] border-[#1a1a2a] opacity-40'
@@ -36,8 +36,10 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     >
       {/* Header: avatar + name + status. Avatar carries the alias→hue map
           shared with Messages/Nodes/Tasks/Overview; the live status dot
-          stays as a small pulse-capable indicator. */}
-      <div className="flex items-center justify-between mb-3">
+          stays as a small pulse-capable indicator. R5 of #190 mobile
+          polish: trim mb-3 → mb-2 sm:mb-3 so the card's vertical rhythm
+          tightens on narrow viewports. */}
+      <div className="flex items-center justify-between mb-2 sm:mb-3">
         <div className="flex items-center gap-2 min-w-0">
           <AliasAvatar alias={s.alias} size={22} />
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
@@ -48,8 +50,11 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         </span>
       </div>
 
-      {/* Agent type badge */}
-      <div className="flex items-center gap-2 mb-3">
+      {/* Agent type badge — hidden below sm because the runtime
+          (`claude-code` / `codex`) repeats across nearly every card and
+          chews ~28px per card × 99 sessions on Overview mobile. The
+          agent type stays one tap away on /node detail. */}
+      <div className="hidden sm:flex items-center gap-2 mb-3">
         <span className="text-xs text-gray-600 bg-[#0a0a15] px-2 py-0.5 rounded border border-[#1a1a2a]">
           {s.agent || 'unknown'}
         </span>
@@ -58,18 +63,23 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         )}
       </div>
 
-      {/* Task */}
+      {/* Task. Mobile: line-clamp-1 (one-liner) instead of two, and a
+          single-line padding (px-2 py-1) so the task strip is ~28px
+          rather than ~56px. The full task is still in the title
+          tooltip and on /node detail. */}
       {s.task ? (
-        <div className="text-xs text-gray-400 bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a] line-clamp-2" title={s.task}>
+        <div className="text-xs text-gray-400 bg-[#0a0a15] rounded-lg px-2 sm:px-3 py-1 sm:py-2 border border-[#1a1a2a] line-clamp-1 sm:line-clamp-2" title={s.task}>
           {s.task}
         </div>
       ) : (
         <div className="text-xs text-gray-700 italic">No active task</div>
       )}
 
-      {/* Progress bar */}
+      {/* Progress bar — hidden below sm so an empty 0% bar doesn't
+          occupy 20px on every idle card. Visible from sm up where space
+          is no longer the constraint. */}
       {s.progress > 0 && (
-        <div className="mt-3">
+        <div className="hidden sm:block mt-3">
           <div className="flex justify-between text-[10px] mb-1">
             <span className="text-gray-600">Progress</span>
             <span className={cfg.text}>{s.progress}%</span>

package/app/components/AppShell.tsx

@@ -20,7 +20,13 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-[100dvh] max-w-full overflow-x-hidden">
       <Sidebar />
-      <main className="flex-1 min-w-0 max-w-full overflow-x-hidden flex flex-col">
+      {/* R25 of #190: pair the existing bottom safe-area padding with a
+          top one so the HealthBanner clears the iOS status bar when
+          launched as an installed PWA (statusBarStyle: black-translucent
+          + viewportFit: cover, see app/layout.tsx). On non-PWA contexts
+          env(safe-area-inset-top) is 0, so this is a no-op for browser
+          tab visits. */}
+      <main className="flex-1 min-w-0 max-w-full overflow-x-hidden flex flex-col pt-[env(safe-area-inset-top)]">
         <HealthBanner />
         <div className="flex-1 min-w-0 max-w-full overflow-x-hidden pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0">{children}</div>
       </main>

package/app/components/ChatPopover.tsx

@@ -191,7 +191,7 @@ export function ChatPopover({ alias, onClose }: ChatPopoverProps) {
           // Chromium retargets the click to the header — the button never fires.
           onPointerDown={(e) => e.stopPropagation()}
           aria-label="Close chat"
-          className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] shrink-0"
+          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)] shrink-0"
         >
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />

package/app/components/CommandCenter.tsx

@@ -42,16 +42,26 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
               >
                 <div className={`w-2 h-2 rounded-full ${activeTab === alias ? 'bg-cyan-400' : 'bg-gray-600'}`} />
                 <span className="max-w-[80px] truncate">{alias}</span>
+                {/* R21 of #190 mobile a11y: nested close had no aria-label
+                    (screen-readers spoke just "button") and an ~8 px
+                    tap target (p-0.5 + text "×"). Both fixed; nested
+                    <button> inside <button> remains invalid HTML but
+                    is browser-tolerated and refactoring to role="tab"
+                    is out of scope for this round. */}
                 <button
                   onClick={e => { e.stopPropagation(); onCloseTab(alias); }}
-                  className="ml-1 text-gray-600 hover:text-gray-300 p-0.5"
+                  aria-label={`Close ${alias} chat tab`}
+                  className="ml-1 inline-flex h-7 w-7 items-center justify-center text-gray-600 hover:text-gray-300 rounded-md hover:bg-white/5"
                 >
                   ×
                 </button>
               </button>
             ))}
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white px-3 py-2.5 shrink-0 border-l border-[#2a2a4a]">
+          {/* R21 mobile a11y: outer command-center close was SVG-only
+              and screen-reader silent; also bumped to 44 x 44 hit zone
+              from 32 x ~36. */}
+          <button onClick={onClose} aria-label="Close command center" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-gray-500 hover:text-white shrink-0 border-l border-[#2a2a4a]">
             <svg className="w-4 h-4" 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/CommandPalette.tsx

@@ -438,7 +438,7 @@ export function CommandPalette() {
             value={query}
             onChange={e => { setQuery(e.target.value); setSelected(0); }}
             placeholder="Type a command or search…"
-            className="flex-1 bg-transparent text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
+            className="flex-1 bg-transparent text-base sm:text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
           />
           <kbd className="text-[10px] text-gray-600 border border-[#2a2a4a] rounded px-1.5 py-0.5 font-mono">esc</kbd>
         </div>

package/app/components/DispatchPanel.tsx

@@ -80,7 +80,10 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
             <h2 className="text-lg font-bold text-white">Dispatch Task</h2>
             <p className="text-xs text-gray-500 mt-0.5">Send a task to one or more agents</p>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          {/* R22 of #190: same SVG-only-no-aria-label pattern that R16
+              fixed on TaskChatPanel/TaskDrawer/ChatPopover; DispatchPanel
+              missed that pass. ~32 px hit zone + silent on screen-reader. */}
+          <button onClick={onClose} aria-label="Close dispatch panel" 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>
@@ -94,7 +97,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               <input
                 type="text" value={filter} onChange={e => setFilter(e.target.value)}
                 placeholder="Filter agents..."
-                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
+                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
               />
               <div className="flex items-center justify-between mt-2">
                 <button onClick={selectAll} className="text-[10px] text-cyan-400 hover:text-cyan-300">
@@ -126,12 +129,12 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               <textarea
                 value={prompt} onChange={e => setPrompt(e.target.value)}
                 placeholder="Enter the task you want to dispatch..."
-                className="flex-1 min-h-[120px] bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
+                className="flex-1 min-h-[120px] bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-3 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
               />
 
               <div className="flex items-center gap-3 mt-4">
                 <select value={priority} onChange={e => setPriority(e.target.value)}
-                  className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-xs text-white focus:outline-none">
+                  className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-xs text-white focus:outline-none">
                   <option value="normal">Normal priority</option>
                   <option value="high">High priority</option>
                   <option value="low">Low priority</option>

package/app/components/HealthBanner.tsx

@@ -116,11 +116,19 @@ export function HealthBanner() {
             {cta.label} →
           </Link>
         )}
+        {/* R9 of #190 mobile polish: the inline `→` CTA and the `×`
+            dismiss were ~14px tap targets — below iOS 44px and worst
+            for the right-edge dismiss where a thumb-miss either does
+            nothing or fires the CTA next to it. The banner is
+            intentionally 28px tall (design comment above), so make the
+            tap area larger without making the banner taller: an
+            invisible `::before` pseudo-element extends the hit zone to
+            ~44×40px around each control. Visual size stays as is. */}
         {cta && (
           <Link
             href={cta.href}
             aria-label={cta.label}
-            className="sm:hidden text-[11px] font-medium opacity-90 hover:opacity-100"
+            className="sm:hidden text-[13px] font-medium opacity-90 hover:opacity-100 relative leading-none px-1.5 before:absolute before:inset-y-[-10px] before:inset-x-[-8px] before:content-['']"
           >
             →
           </Link>
@@ -131,7 +139,7 @@ export function HealthBanner() {
             try { sessionStorage.setItem('anet-hb-dismissed', '1'); } catch {}
           }}
           aria-label="Dismiss banner"
-          className="opacity-50 hover:opacity-100 leading-none px-1"
+          className="opacity-60 hover:opacity-100 leading-none px-1.5 text-base relative rounded-md hover:bg-white/5 before:absolute before:inset-y-[-10px] before:inset-x-[-8px] before:content-['']"
         >
           ×
         </button>

package/app/components/HelpOverlay.tsx

@@ -29,10 +29,7 @@ const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
       { keys: ['g', 'o'], label: 'Go to Overview' },
       { keys: ['g', 't'], label: 'Go to Tasks' },
       { keys: ['g', 'n'], label: 'Go to Nodes' },
-      { keys: ['g', 'm'], label: 'Go to Messages' },
-      { keys: ['g', 'w'], label: 'Go to Networks' },
       { keys: ['g', 'a'], label: 'Go to Admin' },
-      { keys: ['g', 'l'], label: 'Go to Audit Log' },
       { keys: ['g', 's'], label: 'Go to Settings' },
     ],
   },

package/app/components/MobileNav.tsx

@@ -3,23 +3,41 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+// #209 R25 (Vincent msg 529 "command 留着干嘛" / 530 "Agents 放到最前面？"
+// / 531 "设置放到最后面" / 533+534 "A / 加一个设置啊"):
+//   - drop the synthetic-Cmd+K Command tap (no Cmd/Ctrl key on phone — the
+//     palette functions it surfaced are reachable from Settings on touch:
+//     theme switch, sign-out, navigation to Messages/Logs are all there)
+//   - reorder so Agents is the first-thumb tap (Vincent's primary surface)
+//   - put Settings rightmost as the consolidated secondary-destinations hub
+//     (R16 absorbed Messages / Audit Log / Server Logs into the Resources
+//     card grid there, so /settings is the legitimate "everything else"
+//     leaf on mobile)
+// Stays at 4 cells (R24's grid-cols-4) — same width per tab.
+// Settings icon path is copied from app/components/Sidebar.tsx:22 so the
+// icon shape matches the desktop sidebar entry.
 const MOBILE_NAV_ITEMS = [
+  { href: '/nodes', label: 'Agents', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
-  { href: '/nodes', label: 'Agents', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
-  { href: '/messages', label: 'Chats', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
+  { href: '/settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ];
 
 export function MobileNav() {
   const pathname = usePathname();
-  const isActive = (href: string) => href === '/' ? pathname === '/' : pathname.startsWith(href);
-  const openCommand = () => {
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
+  // Match Sidebar.tsx isActive — /settings must be exact-match because
+  // Settings subpages (/settings/tokens, /settings/networks) have their
+  // own headers; startsWith would keep the bottom-nav highlighted there
+  // and steal back-affordance from the user.
+  const isActive = (href: string) => {
+    if (href === '/') return pathname === '/';
+    if (href === '/settings') return pathname === '/settings';
+    return pathname.startsWith(href);
   };
 
   return (
     <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#2a2a4a] bg-[#0d0d1a]/95 px-1 pb-[calc(env(safe-area-inset-bottom)+0.35rem)] pt-1.5 backdrop-blur lg:hidden">
-      <div className="mx-auto grid max-w-md grid-cols-5 gap-1">
+      <div className="mx-auto grid max-w-md grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map(item => {
           const active = isActive(item.href);
           return (
@@ -28,9 +46,9 @@ export function MobileNav() {
               href={item.href}
               prefetch={false}
               aria-current={active ? 'page' : undefined}
-              className={`flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] transition-colors ${
+              className={`relative flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] transition-colors ${
                 active
-                  ? 'bg-cyan-500/12 text-cyan-300'
+                  ? 'bg-cyan-500/12 text-cyan-300 before:absolute before:top-0 before:left-3 before:right-3 before:h-0.5 before:rounded-full before:bg-cyan-400'
                   : 'text-gray-500 active:bg-[#1a1a3a] active:text-gray-200'
               }`}
             >
@@ -41,17 +59,6 @@ export function MobileNav() {
             </Link>
           );
         })}
-        <button
-          type="button"
-          onClick={openCommand}
-          className="flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] text-gray-500 transition-colors active:bg-[#1a1a3a] active:text-gray-200"
-          aria-label="Open command palette"
-        >
-          <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v3m0 12v3m9-9h-3M6 12H3m15.364-6.364l-2.121 2.121M7.757 16.243l-2.121 2.121m12.728 0l-2.121-2.121M7.757 7.757L5.636 5.636M12 8.5A3.5 3.5 0 1112 15.5 3.5 3.5 0 0112 8.5z" />
-          </svg>
-          <span className="max-w-full truncate">Command</span>
-        </button>
       </div>
     </nav>
   );

package/app/components/Sidebar.tsx

@@ -5,19 +5,19 @@ import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import useSWR from 'swr';
 import { useNetworkId } from '../lib/network-context';
-import { ThemeSwitcher } from './ThemeSwitcher';
 
 const networkFetcher = (url: string) => fetch(url).then(r => r.ok ? r.json() : { networks: [] });
 
+// Cleanup (issue #4): sidebar collapsed to the 6 core destinations. The
+// low-frequency / unverified entries (Messages, Networks, Audit Log,
+// Server Logs) were removed from primary nav — those pages still exist
+// and stay reachable via direct URL and the command palette (⌘K); they
+// were just cluttering the main rail. Restore here if usage warrants.
 const NAV_ITEMS = [
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
   { href: '/nodes', label: 'Nodes', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
   { href: '/servers', label: 'Servers', icon: 'M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v1A2.5 2.5 0 0117.5 10h-11A2.5 2.5 0 014 7.5v-1zM4 16.5A2.5 2.5 0 016.5 14h11a2.5 2.5 0 012.5 2.5v1a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-1zM7 7h.01M7 17h.01' },
-  { href: '/messages', label: 'Messages', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
-  { href: '/settings/networks', label: 'Networks', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
-  { href: '/logs', label: 'Audit Log', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
-  { href: '/server-logs', label: 'Server Logs', icon: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' },
   { href: '/admin', label: 'Admin', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
   { href: '/settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ];
@@ -91,10 +91,12 @@ export function Sidebar() {
 
   return (
     <>
-      {/* Mobile hamburger */}
+      {/* Mobile hamburger — R13 of #190: was p-2.5 = ~40px tap target,
+          just below the iOS 44px guideline. Bump padding and add an
+          explicit min-w/min-h so it can never be miss-tapped. */}
       <button
         onClick={() => setMobileOpen(!mobileOpen)}
-        className="fixed top-4 left-3 z-50 lg:hidden bg-[#111128] border border-[#2a2a4a] rounded-lg p-2.5 text-gray-400 hover:text-white active:bg-[#1a1a3a]"
+        className="fixed top-3 left-3 z-50 lg:hidden bg-[#111128] border border-[#2a2a4a] rounded-lg p-3 min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-400 hover:text-white active:bg-[#1a1a3a]"
         aria-label="Toggle menu"
       >
         <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -143,7 +145,7 @@ export function Sidebar() {
                   key={n.network_id}
                   onClick={() => { setNetworkId(n.network_id); setMobileOpen(false); }}
                   title={n.network_id}
-                  className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors text-left ${
+                  className={`w-full flex items-center gap-2 px-3 py-2.5 lg:py-1.5 rounded-md text-xs transition-colors text-left ${
                     networkId === n.network_id
                       ? 'bg-cyan-500/10 text-cyan-300'
                       : 'text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]'
@@ -164,7 +166,13 @@ export function Sidebar() {
           </div>
         )}
 
-        <div className="pb-20">
+        {/* #209 R26 (Vincent msg 540 screenshot — "设置页面没展示全"): the
+            absolute-bottom footer below stacks 3 rows (Quick search /
+            Sign out / collapse) ≈ 92-100px tall, but this spacer was
+            pb-20 (80px), so the last nav entry (Settings on /settings)
+            was being eaten by the footer overlay. Bump to pb-28 (112px)
+            to clear the actual footer height. */}
+        <div className="pb-28">
           {nav}
         </div>
 
@@ -178,7 +186,7 @@ export function Sidebar() {
             }}
             title={collapsed ? 'Quick search (⌘K)' : undefined}
             className={`w-full flex items-center text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors ${
-              collapsed ? 'justify-center px-0 py-2.5' : 'justify-between gap-2 px-5 py-2'
+              collapsed ? 'justify-center px-0 py-2.5' : 'justify-between gap-2 px-5 py-3 lg:py-2'
             }`}
             aria-label="Open command palette"
           >
@@ -206,8 +214,7 @@ export function Sidebar() {
             </svg>
             {!collapsed && 'Sign out'}
           </button>
-          <div className={`flex items-center gap-2 ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-between'}`}>
-            <ThemeSwitcher compact={collapsed} />
+          <div className={`flex items-center ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-end'}`}>
             <button
               onClick={() => setCollapsed(!collapsed)}
               title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}

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/ThemeSwitcher.tsx

@@ -1,89 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-const THEMES = [
-  { id: 'cyber',  label: 'Cyber',  emoji: '🌃', desc: '默认深色' },
-  { id: 'light',  label: 'Light',  emoji: '☀️',  desc: '浅色简洁' },
-  { id: 'mint',   label: 'Mint',   emoji: '🌿', desc: '薄荷绿' },
-  { id: 'sunset', label: 'Sunset', emoji: '🌅', desc: '暖色橙紫' },
-] as const;
+// Cleanup (issue #4) — less is more. The dashboard is designed dark/cyber;
+// the light / mint / sunset themes were never verified and the picker just
+// added a knob nobody validated. We lock to the single cyber theme and drop
+// the switcher control. (The unused [data-theme] CSS branches in globals.css
+// are now dead but harmless — left for a later dedicated CSS sweep.)
 
-type ThemeId = typeof THEMES[number]['id'];
-const THEME_KEY = 'anet-theme';
-
-function applyTheme(theme: ThemeId) {
-  if (typeof document !== 'undefined') {
-    document.documentElement.setAttribute('data-theme', theme);
-  }
-}
+const THEME = 'cyber';
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  // Apply persisted theme on first render so we don't flash dark before
-  // user-selected light. Initial value comes from cookie/localStorage.
   useEffect(() => {
-    const stored = (localStorage.getItem(THEME_KEY) as ThemeId) || 'cyber';
-    applyTheme(stored);
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', THEME);
+    }
   }, []);
   return <>{children}</>;
 }
-
-export function ThemeSwitcher({ compact = false }: { compact?: boolean }) {
-  const [theme, setTheme] = useState<ThemeId>('cyber');
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const stored = (localStorage.getItem(THEME_KEY) as ThemeId) || 'cyber';
-    setTheme(stored);
-    applyTheme(stored);
-  }, []);
-
-  function pick(next: ThemeId) {
-    setTheme(next);
-    localStorage.setItem(THEME_KEY, next);
-    applyTheme(next);
-    setOpen(false);
-  }
-
-  const current = THEMES.find(t => t.id === theme) || THEMES[0];
-
-  return (
-    <div className="relative">
-      <button
-        aria-label="切换主题"
-        onClick={() => setOpen(!open)}
-        className="px-2.5 py-1.5 rounded-md text-xs flex items-center gap-1.5 hover:opacity-80 transition-opacity"
-        style={{ background: 'var(--bg-elevated)', color: 'var(--fg)', border: '1px solid var(--border)' }}
-      >
-        <span aria-hidden>{current.emoji}</span>
-        {!compact && <span>{current.label}</span>}
-      </button>
-      {open && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div
-            className="absolute right-0 top-full mt-1 z-50 rounded-md min-w-[160px] py-1 shadow-lg"
-            style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border)' }}
-          >
-            {THEMES.map(t => (
-              <button
-                key={t.id}
-                onClick={() => pick(t.id)}
-                className="w-full px-3 py-2 text-left text-xs flex items-center gap-2 hover:opacity-80"
-                style={{
-                  background: t.id === theme ? 'var(--bg-elevated)' : 'transparent',
-                  color: 'var(--fg)',
-                }}
-              >
-                <span aria-hidden>{t.emoji}</span>
-                <span className="flex-1">{t.label}</span>
-                <span style={{ color: 'var(--fg-dim)' }} className="text-[10px]">{t.desc}</span>
-                {t.id === theme && <span style={{ color: 'var(--accent)' }}>•</span>}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

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