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

package/app/components/CollapsibleSearch.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+/**
+ * CollapsibleSearch
+ * ──────────────────
+ * #209 R34 — Reusable WeChat-style search-toggle pattern.
+ *
+ * Two pieces of UI from one component:
+ *   1. A magnifier button (`w-9 h-9 rounded-full`) that lives in a page
+ *      header — render it via `Button`.
+ *   2. A collapsible search row that reveals below the header on open —
+ *      render it via `Row`.
+ *
+ * Used together they replicate WeChat's chat-list search affordance:
+ * the search field is hidden by default behind a small circle at the
+ * top-right of the page header. Tapping it slides the input open,
+ * autofocuses, and lets Escape clear + close. A cyan dot appears in
+ * the corner of the icon when there is an active search term but the
+ * row is collapsed, so the user always knows a filter is in effect.
+ *
+ * Owner of the search string is the parent (this component is
+ * uncontrolled w.r.t. value — pure UI). That keeps the filter logic
+ * with the page so it's easy to plumb additional behaviour like
+ * `from:alias` shortcuts or highlight rendering.
+ *
+ * Shipped as a single component with two named children so callers
+ * can place `<Button>` inside their existing header flex row and
+ * `<Row>` just after, without restructuring around a tighter API.
+ *
+ * First adopters: /nodes (R32), /messages (R33). R34 ships
+ * /nodes + /messages migrated to use this component; future pages
+ * can add search by importing it instead of copy-pasting the JSX.
+ */
+
+import { useState, useCallback } from 'react';
+
+interface CollapsibleSearchAPI {
+  /** Round magnifier button. Place in your page header (e.g. right edge). */
+  Button: () => React.JSX.Element;
+  /** Collapsible search input row. Place immediately after the header. */
+  Row: () => React.JSX.Element | null;
+  /** Current search value — pass to your filter logic. */
+  value: string;
+  /** Programmatically clear + close (useful for "no results" reset link). */
+  reset: () => void;
+}
+
+interface UseCollapsibleSearchProps {
+  /** Controlled value + setter from the parent — owns the search string. */
+  value: string;
+  onChange: (next: string) => void;
+  /** Input placeholder. */
+  placeholder?: string;
+  /** Accessible label for the button (also drives `title=`). */
+  label?: string;
+  /** Hide everything when false (e.g. when there is nothing to search). */
+  enabled?: boolean;
+}
+
+export function useCollapsibleSearch({
+  value,
+  onChange,
+  placeholder = 'Search…',
+  label = 'Search',
+  enabled = true,
+}: UseCollapsibleSearchProps): CollapsibleSearchAPI {
+  const [open, setOpen] = useState(false);
+
+  const reset = useCallback(() => {
+    onChange('');
+    setOpen(false);
+  }, [onChange]);
+
+  const Button = useCallback(() => {
+    if (!enabled) return <></>;
+    const active = open || value;
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        aria-label={open ? `Close ${label.toLowerCase()}` : `Open ${label.toLowerCase()}`}
+        aria-pressed={open}
+        title={open ? `Close ${label.toLowerCase()}` : label}
+        className={`relative shrink-0 inline-flex items-center justify-center rounded-full border w-9 h-9 transition-colors ${
+          active
+            ? 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300'
+            : 'border-[#26262b] bg-[#161618] text-gray-400 hover:text-gray-200 hover:border-[#3a3a41]'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        {value && !open && (
+          <span aria-hidden className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-cyan-400 ring-2 ring-[#0b0b0d]" />
+        )}
+      </button>
+    );
+  }, [open, value, label, enabled]);
+
+  const Row = useCallback(() => {
+    if (!enabled) return null;
+    if (!open && !value) return null;
+    return (
+      <div className="mb-3 sm:mb-4 flex items-center gap-2">
+        <input
+          type="text"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Escape') reset(); }}
+          placeholder={placeholder}
+          autoFocus={open}
+          className="flex-1 bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
+        />
+        <button
+          type="button"
+          onClick={reset}
+          className="shrink-0 text-xs text-gray-500 hover:text-gray-300 px-2 py-2"
+          aria-label="Clear and close search"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }, [open, value, onChange, placeholder, reset, enabled]);
+
+  return { Button, Row, value, reset };
+}

package/app/components/CommandCenter.tsx

@@ -26,9 +26,9 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
       <div className="fixed inset-0 bg-black/30 z-40 lg:hidden" onClick={onClose} />
 
       {/* Panel */}
-      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
+      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[#0b0b0d] border-l border-[#26262b] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
         {/* Tab bar */}
-        <div className="flex items-center border-b border-[#2a2a4a] bg-[#0d0d1a] overflow-x-auto">
+        <div className="flex items-center border-b border-[#26262b] bg-[#111113] overflow-x-auto">
           <div className="flex-1 flex min-w-0">
             {tabs.map(alias => (
               <button
@@ -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-[#26262b]">
             <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

@@ -426,10 +426,10 @@ export function CommandPalette() {
     >
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" aria-hidden />
       <div
-        className="relative w-full max-w-xl rounded-xl border border-[#2a2a4a] bg-[#0d0d1a] shadow-2xl shadow-black/40 overflow-hidden"
+        className="relative w-full max-w-xl rounded-xl border border-[#26262b] bg-[#111113] shadow-2xl shadow-black/40 overflow-hidden"
         onClick={e => e.stopPropagation()}
       >
-        <div className="flex items-center gap-2 border-b border-[#2a2a4a] px-3 py-2.5">
+        <div className="flex items-center gap-2 border-b border-[#26262b] px-3 py-2.5">
           <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" className="text-gray-500 shrink-0">
             <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
@@ -438,9 +438,9 @@ 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>
+          <kbd className="text-[10px] text-gray-600 border border-[#26262b] rounded px-1.5 py-0.5 font-mono">esc</kbd>
         </div>
 
         <div className="max-h-[60vh] overflow-y-auto py-2">
@@ -461,7 +461,7 @@ export function CommandPalette() {
                       onMouseEnter={() => setSelected(idx)}
                       onClick={() => { pushRecent(c.id); c.perform(router); setOpen(false); }}
                       className={`anet-cmdk-row w-full flex items-center gap-3 px-3 py-2 text-left text-sm ${
-                        isActive ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-300 hover:bg-[#1a1a2a]/50'
+                        isActive ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-300 hover:bg-[#1c1c1f]/50'
                       }`}
                     >
                       <span className={isActive ? 'text-cyan-400' : 'text-gray-500'}>{c.icon}</span>
@@ -484,7 +484,7 @@ export function CommandPalette() {
           )}
         </div>
 
-        <div className="border-t border-[#2a2a4a] px-3 py-1.5 flex items-center justify-between text-[10px] text-gray-600">
+        <div className="border-t border-[#26262b] px-3 py-1.5 flex items-center justify-between text-[10px] text-gray-600">
           <span className="flex items-center gap-3">
             <span><kbd className="font-mono">↑↓</kbd> navigate</span>
             <span><kbd className="font-mono">↵</kbd> select</span>

package/app/components/DispatchPanel.tsx

@@ -73,14 +73,17 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
   return (
     <>
       <div className="fixed inset-0 bg-black/50 z-40 anet-fade-in" onClick={onClose} />
-      <div className="fixed inset-x-3 inset-y-3 max-h-[calc(100dvh-1.5rem)] lg:inset-x-[15%] lg:inset-y-[5%] lg:max-h-none bg-[#0a0a1a] border border-[#2a2a4a] rounded-2xl z-50 flex flex-col shadow-2xl shadow-black/70 overflow-hidden anet-fade-in">
+      <div className="fixed inset-x-3 inset-y-3 max-h-[calc(100dvh-1.5rem)] lg:inset-x-[15%] lg:inset-y-[5%] lg:max-h-none bg-[#0b0b0d] border border-[#26262b] rounded-2xl z-50 flex flex-col shadow-2xl shadow-black/70 overflow-hidden anet-fade-in">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[#26262b] bg-[#111113]">
           <div>
             <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-[#1c1c1f]">
             <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>
@@ -89,12 +92,12 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
 
         <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
           {/* Left: Node selection */}
-          <div className="lg:w-[280px] border-b lg:border-b-0 lg:border-r border-[#2a2a4a] flex flex-col">
-            <div className="px-4 py-3 border-b border-[#2a2a4a]">
+          <div className="lg:w-[280px] border-b lg:border-b-0 lg:border-r border-[#26262b] flex flex-col">
+            <div className="px-4 py-3 border-b border-[#26262b]">
               <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-[#161618] border border-[#26262b] 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">
@@ -107,7 +110,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               {filtered.map(s => (
                 <button key={s.alias} onClick={() => toggleNode(s.alias)}
                   className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-left transition-colors ${
-                    selected.has(s.alias) ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 'text-gray-400 hover:bg-[#1a1a2a]'
+                    selected.has(s.alias) ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 'text-gray-400 hover:bg-[#1c1c1f]'
                   }`}>
                   <AliasAvatar alias={s.alias} size={16} />
                   <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${s.status === 'working' ? 'bg-green-400' : s.status === 'idle' ? 'bg-cyan-400' : 'bg-gray-500'}`} />
@@ -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-[#161618] border border-[#26262b] 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-[#161618] border border-[#26262b] 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>
@@ -155,7 +158,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
 
             {/* Results */}
             {results.length > 0 && (
-              <div className="px-6 py-3 border-t border-[#2a2a4a] bg-[#0d0d1a]">
+              <div className="px-6 py-3 border-t border-[#26262b] bg-[#111113]">
                 <div className="text-xs text-gray-500 mb-2">
                   {successCount}/{results.length} dispatched successfully
                 </div>

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