@sleep2agi/agent-network-dashboard 0.5.7-preview.7 → 0.5.7-preview.73

package/app/components/EmptyState.tsx

@@ -172,7 +172,7 @@ export function EmptyState({ variant = 'generic', title, sub, cta, compact = fal
  *  floating in the content column. */
 function EmptyCard({ children }: { children: React.ReactNode }) {
   return (
-    <div className="max-w-2xl mx-auto rounded-xl border border-[#2a2a4a] bg-[#111128] shadow-lg shadow-black/20">
+    <div className="max-w-2xl mx-auto rounded-xl border border-[#26262b] bg-[#161618] shadow-lg shadow-black/20">
       {children}
     </div>
   );
@@ -246,6 +246,14 @@ export function NodesEmptyState({
         <div className="mt-4 inline-block">
           <QuickstartCommand cmd="npx --yes @sleep2agi/agent-network init" />
         </div>
+        {/* #214 F6: expectation management — without this line, users
+            copy the command and stare at an empty screen not knowing
+            what to wait for. The page polls every 5s, so the node
+            really does appear by itself. */}
+        <p className="text-gray-600 text-xs mt-3 max-w-md mx-auto">
+          Once the agent connects, it appears here automatically within a
+          few seconds — no refresh needed.
+        </p>
         <div className="mt-3">
           <a
             href="https://anet.sh"
@@ -274,13 +282,20 @@ function QuickstartCommand({ cmd }: { cmd: string }) {
     } catch {}
   };
   return (
-    <div className="anet-empty-cmd flex items-center gap-2 bg-[#0a0a15] border border-[#2a2a4a] rounded-lg pl-4 pr-1.5 py-1.5 text-xs sm:text-sm">
-      <code className="text-cyan-300 font-mono select-all">{cmd}</code>
+    <div className="anet-empty-cmd flex items-start sm:items-center gap-2 bg-[#0e0e10] border border-[#26262b] rounded-lg pl-4 pr-1.5 py-1.5 text-xs sm:text-sm">
+      {/* #209 R44: long quickstart commands (e.g. the `npm install -g …`
+          variant) overflowed the empty-state card horizontally on phones
+          because <code> defaults to white-space:pre. break-all on mobile
+          lets them wrap inside the box; sm: up restores normal wrapping
+          so desktop monospace lines stay clean. items-start on phones
+          aligns the Copy button to the top so a wrapped 2-line command
+          doesn't bottom-anchor the button. */}
+      <code className="text-cyan-300 font-mono select-all min-w-0 break-all sm:break-normal">{cmd}</code>
       <button
         type="button"
         onClick={onCopy}
         aria-label={copied ? 'Copied' : 'Copy command'}
-        className="shrink-0 rounded-md px-2 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] transition-colors"
+        className="shrink-0 rounded-md px-2 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] transition-colors"
       >
         {copied ? (
           <span className="flex items-center gap-1 text-green-400">

package/app/components/HealthBanner.tsx

@@ -3,6 +3,7 @@
 import useSWR from 'swr';
 import { useState } from 'react';
 import Link from 'next/link';
+import { parseHubTime } from '../lib/time';
 
 interface StatsResponse {
   ok?: boolean;
@@ -44,6 +45,17 @@ export function HealthBanner() {
     shouldRetryOnError: false,
   });
 
+  // #217 S4 (less is more): the amber count used the all-time `failed`
+  // total from /api/hub/stats, so the banner said "N failed recently"
+  // forever — a permanent warning is no warning. Only fetch the actual
+  // failed tasks when stats reports any, and count just the last 24 h.
+  const allTimeFailed = stats?.tasks?.by_status?.find(s => s.status === 'failed')?.count || 0;
+  const { data: failedTasks } = useSWR<{ tasks?: { created_at?: string | null; completed_at?: string | null }[] }>(
+    allTimeFailed > 0 ? '/api/hub/tasks?status=failed&limit=100' : null,
+    fetcher,
+    { refreshInterval: 60000, dedupingInterval: 30000, shouldRetryOnError: false },
+  );
+
   const [dismissed, setDismissed] = useState<boolean>(() => {
     if (typeof window === 'undefined') return false;
     return sessionStorage.getItem('anet-hb-dismissed') === '1';
@@ -53,7 +65,11 @@ export function HealthBanner() {
 
   // Determine current state — priority: red > amber > empty > green
   const hubDown = (statsErr && healthErr) || (health && health.ok === false);
-  const failed = stats?.tasks?.by_status?.find(s => s.status === 'failed')?.count || 0;
+  const dayAgo = Date.now() - 24 * 3600 * 1000;
+  const failed = (failedTasks?.tasks || []).filter(t => {
+    const at = parseHubTime(t.completed_at) ?? parseHubTime(t.created_at);
+    return at !== null && at >= dayAgo;
+  }).length;
   const fleetEmpty = stats?.nodes?.total === 0;
 
   let kind: 'red' | 'amber' | 'green';
@@ -66,7 +82,7 @@ export function HealthBanner() {
     cta = { label: 'Open Settings', href: '/settings' };
   } else if (failed > 0) {
     kind = 'amber';
-    message = `${failed} task${failed > 1 ? 's' : ''} failed recently`;
+    message = `${failed} task${failed > 1 ? 's' : ''} failed in the last 24h`;
     cta = { label: 'Review failures', href: '/tasks?status=failed' };
   } else if (fleetEmpty) {
     // Round 70 — was "All systems go" before, which is misleading when
@@ -116,11 +132,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 +155,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' },
     ],
   },
@@ -236,10 +233,10 @@ export function HelpOverlay() {
     >
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" aria-hidden />
       <div
-        className="relative w-full max-w-md rounded-xl border border-[#2a2a4a] bg-[#0d0d1a] shadow-2xl shadow-black/40 overflow-hidden"
+        className="relative w-full max-w-md rounded-xl border border-[#26262b] bg-[#111113] shadow-2xl shadow-black/40 overflow-hidden"
         onClick={e => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between border-b border-[#2a2a4a] px-4 py-2.5">
+        <div className="flex items-center justify-between border-b border-[#26262b] px-4 py-2.5">
           <div className="flex items-center gap-2 text-sm font-medium text-gray-200">
             <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" className="text-gray-500">
               <path strokeLinecap="round" strokeLinejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -264,7 +261,7 @@ export function HelpOverlay() {
                   <li key={i} className="flex items-center gap-3 text-xs">
                     <span className="flex items-center gap-1">
                       {s.keys.map((k, ki) => (
-                        <kbd key={ki} className="text-[10px] font-mono border border-[#2a2a4a] rounded px-1.5 py-0.5 text-gray-400 bg-[#1a1a2a]/40">
+                        <kbd key={ki} className="text-[10px] font-mono border border-[#26262b] rounded px-1.5 py-0.5 text-gray-400 bg-[#1c1c1f]/40">
                           {k}
                         </kbd>
                       ))}
@@ -277,7 +274,7 @@ export function HelpOverlay() {
           ))}
         </div>
 
-        <div className="border-t border-[#2a2a4a] px-4 py-1.5 text-[10px] text-gray-600 flex items-center justify-between">
+        <div className="border-t border-[#26262b] px-4 py-1.5 text-[10px] text-gray-600 flex items-center justify-between">
           <span>Press <kbd className="font-mono">?</kbd> to toggle</span>
           <span>or <kbd className="font-mono">esc</kbd> to close</span>
         </div>

package/app/components/LoadingSkeleton.tsx

@@ -13,11 +13,14 @@
  */
 export function LoadingSkeleton() {
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      {/* KPI top strip — 4 cards matching StatsBar */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8 anet-skeleton-pulse">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      {/* KPI top strip — 4 cards matching StatsBar.
+          #209 R38: mb-8 → mb-4 sm:mb-8 to track the live StatsBar
+          wrapper after R29 mobile-tighten. Without this the skeleton
+          and the loaded page jump by 16 px on mobile when data arrives. */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4 sm:mb-8 anet-skeleton-pulse">
         {[1, 2, 3, 4].map(i => (
-          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-4 py-3">
+          <div key={i} className="rounded-xl border border-[#26262b] bg-[#161618] px-4 py-3">
             <Bar w="2.5rem" h="1.75rem" />
             <Bar w="3.5rem" h="0.75rem" className="mt-2" />
             <Bar w="5rem" h="0.625rem" className="mt-1" />
@@ -25,10 +28,12 @@ export function LoadingSkeleton() {
         ))}
       </div>
 
-      {/* Dispatch + UserBar row */}
-      <div className="flex items-center gap-3 mb-3 anet-skeleton-pulse">
+      {/* Dispatch + UserBar row.
+          #209 R38: mb-3 → mb-4 — live page uses mb-4 here, skeleton
+          was 4 px tighter and triggered a small jump on load. */}
+      <div className="flex items-center gap-3 mb-4 anet-skeleton-pulse">
         <Bar w="6rem" h="2.5rem" rounded="0.75rem" />
-        <div className="flex-1 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-2.5 flex items-center gap-3">
+        <div className="flex-1 rounded-lg border border-[#26262b] bg-[#161618] px-4 py-2.5 flex items-center gap-3">
           <div className="w-8 h-8 rounded-full anet-skeleton-bar" />
           <div className="flex-1">
             <Bar w="6rem" h="0.875rem" />
@@ -37,15 +42,16 @@ export function LoadingSkeleton() {
         </div>
       </div>
 
-      {/* Config bar */}
-      <div className="mb-6 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 anet-skeleton-pulse">
+      {/* Config bar.
+          #209 R38: mb-6 → mb-4 sm:mb-6 to track the R28 mobile tighten. */}
+      <div className="mb-4 sm:mb-6 rounded-lg border border-[#26262b] bg-[#161618] px-4 py-3 anet-skeleton-pulse">
         <Bar w="14rem" h="0.875rem" />
       </div>
 
       {/* Stat strip 3 cards */}
       <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-3 anet-skeleton-pulse">
         {[1, 2, 3].map(i => (
-          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-3">
+          <div key={i} className="rounded-xl border border-[#26262b] bg-[#161618] px-3 py-3">
             <Bar w="2rem" h="1.25rem" />
             <Bar w="2.5rem" h="0.75rem" className="mt-1" />
             <Bar w="3.5rem" h="0.625rem" className="mt-px" />
@@ -53,26 +59,30 @@ export function LoadingSkeleton() {
         ))}
       </div>
 
-      {/* Nav rail 3 cards */}
-      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-6 anet-skeleton-pulse">
+      {/* Nav rail 3 cards.
+          #209 R38: mb-6 → mb-4 sm:mb-6 to track the R28 mobile tighten. */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-4 sm:mb-6 anet-skeleton-pulse">
         {[1, 2, 3].map(i => (
-          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-2.5 flex items-center justify-center gap-2">
+          <div key={i} className="rounded-xl border border-[#26262b] bg-[#161618] px-3 py-2.5 flex items-center justify-center gap-2">
             <div className="w-4 h-4 rounded anet-skeleton-bar" />
             <Bar w="4rem" h="0.75rem" />
           </div>
         ))}
       </div>
 
-      {/* Broadcast bar */}
-      <div className="mb-6 flex gap-2 anet-skeleton-pulse">
-        <div className="flex-1 h-10 rounded-lg border border-[#2a2a4a] bg-[#111128]" />
-        <div className="w-28 h-10 rounded-lg anet-skeleton-bar" />
-      </div>
+      {/* #209 R38: Broadcast bar skeleton dropped — the live page
+          removed BroadcastBar in r70's "demote zero-data noise" pass
+          (it lives behind /admin now) so the skeleton was a phantom
+          row that did not exist in the loaded page. Caused a 56 px
+          downward shift on data arrival. */}
 
-      {/* Agent card grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4 anet-skeleton-pulse">
+      {/* Agent card grid.
+          #209 R38: breakpoints synced with the live AgentCard grid
+          (R48 set lg:grid-cols-3 — skeleton was still on lg:grid-cols-2
+          which made cards rearrange under hydration on 1024-1279 px). */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4 anet-skeleton-pulse">
         {[1, 2, 3, 4].map(i => (
-          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] p-4">
+          <div key={i} className="rounded-xl border border-[#26262b] bg-[#161618] p-4">
             <div className="flex items-center gap-2 mb-3">
               <div className="w-2 h-2 rounded-full anet-skeleton-bar" />
               <Bar w="6rem" h="0.875rem" />

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">
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#26262b] bg-[#111113]/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-4 gap-1">
         {MOBILE_NAV_ITEMS.map(item => {
           const active = isActive(item.href);
           return (
@@ -28,10 +46,10 @@ 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'
-                  : 'text-gray-500 active:bg-[#1a1a3a] active:text-gray-200'
+                  ? '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-[#232327] active:text-gray-200'
               }`}
             >
               <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
@@ -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' },
 ];
@@ -74,10 +74,10 @@ export function Sidebar() {
           prefetch={false}
           onClick={() => setMobileOpen(false)}
           title={collapsed ? item.label : undefined}
-          className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#1a1a3a] ${
+          className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#232327] ${
             isActive(item.href)
               ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-nav-active'
-              : 'text-gray-400 hover:text-gray-200 hover:bg-[#1a1a2a]'
+              : 'text-gray-400 hover:text-gray-200 hover:bg-[#1c1c1f]'
           } ${collapsed ? 'justify-center px-0' : ''}`}
         >
           <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -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-[#161618] border border-[#26262b] rounded-lg p-3 min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-400 hover:text-white active:bg-[#232327]"
         aria-label="Toggle menu"
       >
         <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -113,15 +115,15 @@ export function Sidebar() {
         />
       )}
 
-      {/* Sidebar — `bg-[#0d0d1a]` resolves to var(--bg) in dark themes,
+      {/* Sidebar — `bg-[#111113]` resolves to var(--bg) in dark themes,
           but in light/mint we want a distinct surface, so we layer
-          `lg:bg-white` / `lg:dark:bg-[#0d0d1a]` via the theme attribute.
+          `lg:bg-white` / `lg:dark:bg-[#111113]` via the theme attribute.
           The CSS shim in globals.css upgrades sidebar bg to bg-secondary
           in light themes so the sidebar reads as its own card.
           Round 47: explicit ease-out curve + slight shadow so the drawer
           edge "leaves a trail" as it slides in. */}
       <aside data-anet-sidebar="true" className={`
-        fixed top-0 left-0 h-full z-40 bg-[#0d0d1a] border-r border-[#2a2a4a]
+        fixed top-0 left-0 h-full z-40 bg-[#111113] border-r border-[#26262b]
         transition-transform duration-200 ease-out
         ${collapsed ? 'w-16' : 'w-52'}
         ${mobileOpen ? 'translate-x-0 shadow-2xl shadow-black/40 lg:shadow-none' : '-translate-x-full'}
@@ -131,11 +133,11 @@ export function Sidebar() {
             with an inline live "online" pulse so every page surfaces
             fleet health without leaving for /nodes. */}
         <SidebarBrand collapsed={collapsed} />
-        <div className={`border-b border-[#2a2a4a]`} />
+        <div className={`border-b border-[#26262b]`} />
 
         {/* Network list */}
         {!collapsed && networks.length > 0 && (
-          <div className="px-2 py-3 border-b border-[#2a2a4a]">
+          <div className="px-2 py-3 border-b border-[#26262b]">
             <div className="px-3 text-[10px] text-gray-600 uppercase mb-2">Networks</div>
             <div className="space-y-0.5 max-h-32 overflow-y-auto">
               {networks.map((n: SidebarNetwork) => (
@@ -143,10 +145,10 @@ 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]'
+                      : 'text-gray-500 hover:text-gray-300 hover:bg-[#1c1c1f]'
                   }`}
                 >
                   <span>{ROLE_ICON[n.role || 'member'] || '👤'}</span>
@@ -164,21 +166,27 @@ 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>
 
         {/* Sign out + collapse — round 27: collapsed-state gets icon-only
             variants so users still have Sign out / Quick search access at
             56px width, plus title= tooltips. */}
-        <div className="absolute bottom-0 left-0 right-0 border-t border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="absolute bottom-0 left-0 right-0 border-t border-[#26262b] bg-[#111113]">
           <button
             onClick={() => {
               window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
             }}
             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'
+            className={`w-full flex items-center text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1c1c1f] transition-colors ${
+              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'}
@@ -255,7 +262,7 @@ function SidebarBrand({ collapsed }: { collapsed: boolean }) {
   return (
     <Link
       href="/"
-      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#11112a]/40 transition-colors rounded-r-xl"
+      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#161618]/40 transition-colors rounded-r-xl"
       aria-label="Agent Network — home"
     >
       <BrandMark size={32} />