@sleep2agi/agent-network-dashboard 0.4.5-preview.7 → 0.4.5-preview.71

package/app/components/BroadcastBar.tsx

@@ -48,16 +48,34 @@ export function BroadcastBar() {
           onClick={sendBroadcast}
           disabled={broadcasting || !broadcastMsg.trim()}
           aria-label="Send broadcast"
-          className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-800 disabled:text-gray-600 text-white text-sm rounded-lg transition-all font-medium cursor-pointer disabled:cursor-not-allowed"
+          className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-800 disabled:text-gray-600 text-white text-sm rounded-lg transition-all font-medium cursor-pointer disabled:cursor-not-allowed"
         >
-          {broadcasting ? 'Sending...' : 'Broadcast'}
+          {broadcasting ? (
+            <>
+              <svg aria-hidden className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
+                <path d="M4 12a8 8 0 018-8" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+              </svg>
+              <span>Sending…</span>
+            </>
+          ) : (
+            <>
+              {/* Megaphone icon — "broadcast to all" affordance */}
+              <svg aria-hidden className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M3 11v3a1 1 0 0 0 1 1h2l3.29 3.29a1 1 0 0 0 1.71-.71V7.42a1 1 0 0 0-1.71-.71L6 10H4a1 1 0 0 0-1 1Z" />
+                <path d="M16 8a5 5 0 0 1 0 6" opacity="0.7" />
+                <path d="M19 5a9 9 0 0 1 0 12" opacity="0.45" />
+              </svg>
+              <span>Broadcast</span>
+            </>
+          )}
         </button>
       </div>
       {broadcastMsg.length > 0 && (
-        <div className="text-right text-xs text-gray-600 mt-1">{broadcastMsg.length}/500</div>
+        <div className="text-right text-xs text-gray-600 mt-1 tabular-nums">{broadcastMsg.length}/500</div>
       )}
       {broadcastResult && (
-        <div className={`mt-3 text-sm text-center ${broadcastResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400/80'} animate-fade-in`}>
+        <div className={`mt-3 text-sm text-center anet-fade-in ${broadcastResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400/80'}`}>
           {broadcastResult}
         </div>
       )}

package/app/components/DispatchPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Session } from './types';
+import { AliasAvatar } from './AliasAvatar';
 
 interface DispatchPanelProps {
   sessions: Session[];
@@ -71,8 +72,8 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/50 z-40" onClick={onClose} />
-      <div className="fixed inset-4 lg:inset-x-[15%] lg:inset-y-[5%] bg-[#0a0a1a] border border-[#2a2a4a] rounded-2xl z-50 flex flex-col shadow-2xl shadow-black/70 overflow-hidden">
+      <div className="fixed inset-0 bg-black/50 z-40 anet-fade-in" onClick={onClose} />
+      <div className="fixed inset-4 lg:inset-x-[15%] lg:inset-y-[5%] bg-[#0a0a1a] border border-[#2a2a4a] 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>
@@ -108,7 +109,8 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
                   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]'
                   }`}>
-                  <div className={`w-2 h-2 rounded-full shrink-0 ${s.status === 'working' ? 'bg-green-400' : s.status === 'idle' ? 'bg-cyan-400' : 'bg-gray-500'}`} />
+                  <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'}`} />
                   <span className="truncate flex-1">{s.alias}</span>
                   <span className="text-[9px] text-gray-600">{s.agent || '--'}</span>
                 </button>
@@ -159,10 +161,12 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
                 </div>
                 <div className="flex flex-wrap gap-1.5">
                   {results.map(r => (
-                    <span key={r.alias} className={`text-[10px] px-2 py-0.5 rounded-full border ${
+                    <span key={r.alias} className={`flex items-center gap-1.5 text-[10px] pl-1 pr-2 py-0.5 rounded-full border ${
                       r.ok ? 'text-green-300 border-green-500/20 bg-green-500/5' : 'text-red-300 border-red-500/20 bg-red-500/5'
                     }`}>
-                      {r.alias}: {r.ok ? '✓' : r.error || '✗'}
+                      <AliasAvatar alias={r.alias} size={14} />
+                      <span>{r.alias}</span>
+                      <span aria-hidden>{r.ok ? '✓' : r.error || '✗'}</span>
                     </span>
                   ))}
                 </div>

package/app/components/EmptyState.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
 
 export type EmptyVariant = 'nodes' | 'tasks' | 'messages' | 'logs' | 'tokens' | 'networks' | 'generic';
@@ -180,10 +181,82 @@ export function NodesEmptyState({ hint }: { hint?: { global_count?: number; filt
       />
     );
   }
+  // Round 52: true empty state (zero agents anywhere) — show the
+  // quickstart command inline so users don't have to leave the dashboard
+  // to figure out how to spin up their first agent.
   return (
-    <EmptyState
-      variant="nodes"
-      cta={{ label: 'Run anet quickstart', href: 'https://anet.sh' }}
-    />
+    <div className="text-center py-16 px-4" role="status">
+      <div className="anet-empty-glyph inline-flex items-center justify-center mb-4 text-gray-500" aria-hidden>
+        <svg viewBox="0 0 64 64" width={56} height={56}>
+          <g stroke="currentColor" strokeWidth="1.5" fill="none">
+            <rect x="10" y="20" width="44" height="28" rx="2" />
+            <rect x="20" y="32" width="6" height="8" opacity="0.5" />
+            <rect x="32" y="32" width="6" height="8" opacity="0.5" />
+            <rect x="44" y="32" width="4" height="8" opacity="0.5" />
+            <line x1="10" y1="26" x2="54" y2="26" opacity="0.4" />
+            <circle cx="14" cy="23" r="0.8" fill="currentColor" />
+          </g>
+        </svg>
+      </div>
+      <h3 className="font-medium text-gray-300 text-base">Spin up your first agent</h3>
+      <p className="text-gray-500 text-sm mt-2 max-w-md mx-auto leading-relaxed">
+        Run this in a fresh terminal to register an agent with this CommHub:
+      </p>
+      <div className="mt-4 inline-block">
+        <QuickstartCommand cmd="npx --yes @sleep2agi/agent-network init" />
+      </div>
+      <div className="mt-3">
+        <a
+          href="https://anet.sh"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-500 hover:text-cyan-300"
+        >
+          Full quickstart guide
+          <span aria-hidden>→</span>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+/** Code block + inline copy button used by the empty-Overview first-run
+ *  CTA. State lives here so the parent stays stateless. */
+function QuickstartCommand({ cmd }: { cmd: string }) {
+  const [copied, setCopied] = useState(false);
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(cmd);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } 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>
+      <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"
+      >
+        {copied ? (
+          <span className="flex items-center gap-1 text-green-400">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+            Copied
+          </span>
+        ) : (
+          <span className="flex items-center gap-1">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+            Copy
+          </span>
+        )}
+      </button>
+    </div>
   );
 }

package/app/components/HealthBanner.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 interface StatsResponse {
   ok?: boolean;
   tasks?: { by_status?: { status: string; count: number }[] };
+  nodes?: { total?: number };
   health?: { version?: string };
   error?: string;
 }
@@ -50,9 +51,10 @@ export function HealthBanner() {
 
   if (dismissed) return null;
 
-  // Determine current state — priority: red > amber > green
+  // 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 fleetEmpty = stats?.nodes?.total === 0;
 
   let kind: 'red' | 'amber' | 'green';
   let message: string;
@@ -66,6 +68,13 @@ export function HealthBanner() {
     kind = 'amber';
     message = `${failed} task${failed > 1 ? 's' : ''} failed recently`;
     cta = { label: 'Review failures', href: '/tasks?status=failed' };
+  } else if (fleetEmpty) {
+    // Round 70 — was "All systems go" before, which is misleading when
+    // the fleet is empty. Reuses the green palette (it's not a failure
+    // state) but with onboarding copy + CTA-less for restraint.
+    kind = 'green';
+    message = 'Waiting for first agent';
+    cta = null;
   } else {
     kind = 'green';
     message = 'All systems go';
@@ -92,7 +101,7 @@ export function HealthBanner() {
   return (
     <div
       role="status"
-      className={`anet-health-banner border-b ${styles} pl-14 pr-3 sm:px-6 py-1.5 text-[12px] flex items-center justify-between gap-3`}
+      className={`anet-health-banner sticky top-0 z-30 border-b ${styles} pl-14 pr-3 sm:px-6 py-1.5 text-[12px] flex items-center justify-between gap-3 backdrop-blur-sm`}
     >
       <div className="flex items-center gap-2 min-w-0">
         <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} aria-hidden />

package/app/components/HelpOverlay.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { useRouter } from 'next/navigation';
 
 /** Help overlay — press `?` to see keyboard shortcuts.
  *  Restrained: no animation noise, single column, all global keys in one
@@ -23,29 +24,52 @@ const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
     ],
   },
   {
-    group: 'Command palette',
+    group: 'Navigate (vim-style)',
     items: [
-      { keys: ['↑', '↓'], label: 'Move selection' },
-      { keys: ['↵'], label: 'Activate selected command' },
-      { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
+      { 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' },
     ],
   },
   {
-    group: 'Pages',
+    group: 'Command palette',
     items: [
-      { keys: ['click', 'sidebar logo'], label: 'Back to Overview' },
-      { keys: ['Cmd+K', 'Go to agent X'], label: 'Jump straight to a node' },
+      { keys: ['↑', '↓'], label: 'Move selection' },
+      { keys: ['↵'], label: 'Activate selected command' },
+      { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
     ],
   },
 ];
 
+const GO_TARGETS: Record<string, string> = {
+  o: '/',
+  t: '/tasks',
+  n: '/nodes',
+  m: '/messages',
+  w: '/settings/networks',
+  a: '/admin',
+  l: '/logs',
+  s: '/settings',
+};
+
 export function HelpOverlay() {
   const [open, setOpen] = useState(false);
+  const router = useRouter();
+  /** Timestamp when `g` was last pressed. The next single letter within
+   *  1500ms is interpreted as the target page. vim-style `g o`, `g t`, etc. */
+  const gAtRef = useRef<number>(0);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
+      const tag = document.activeElement?.tagName;
+      const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || (document.activeElement as HTMLElement | null)?.isContentEditable;
       // `?` toggles — Shift+/ on US layout. Only when no input is focused.
-      if (e.key === '?' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
+      if (e.key === '?' && !inInput) {
         e.preventDefault();
         setOpen(prev => !prev);
         return;
@@ -53,10 +77,26 @@ export function HelpOverlay() {
       if (e.key === 'Escape' && open) {
         setOpen(false);
       }
+      // Vim-style `g + letter` route shortcuts (round 35). Skip when modifier
+      // keys are held (g is a perfectly fine letter when ⌘ is involved) and
+      // when typing into a field.
+      if (inInput || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key === 'g') {
+        gAtRef.current = Date.now();
+        return;
+      }
+      if (Date.now() - gAtRef.current < 1500) {
+        const target = GO_TARGETS[e.key.toLowerCase()];
+        if (target) {
+          e.preventDefault();
+          gAtRef.current = 0;
+          router.push(target);
+        }
+      }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open]);
+  }, [open, router]);
 
   if (!open) return null;
 

package/app/components/InboxPanel.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { InboxMessage } from './types';
+import { AliasAvatar } from './AliasAvatar';
+import { timeAgo, previewContent } from './utils';
 
 interface InboxPanelProps {
   messages: InboxMessage[];
@@ -20,11 +22,12 @@ export function InboxPanel({ messages }: InboxPanelProps) {
       <div className="space-y-2 max-h-96 overflow-y-auto pr-1 scrollbar-thin">
         {messages.map(m => (
           <div key={m.id} className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 text-sm transition-colors hover:border-[#3a3a5a]">
-            <div className="flex justify-between text-xs text-gray-500 mb-1.5">
-              <span className="text-blue-400 font-medium">{m.from_session}</span>
-              <span>{m.created_at}</span>
+            <div className="flex items-center gap-2 text-xs mb-1.5">
+              {m.from_session && <AliasAvatar alias={m.from_session} size={16} />}
+              <span className="text-gray-200 font-medium truncate">{m.from_session}</span>
+              <span className="ml-auto text-gray-600 shrink-0" title={m.created_at}>{timeAgo(m.created_at)}</span>
             </div>
-            <div className="text-gray-300 leading-relaxed">{m.content}</div>
+            <div className="text-gray-300 leading-relaxed line-clamp-3" title={m.content || ''}>{previewContent(m.content)}</div>
           </div>
         ))}
       </div>

package/app/components/Sidebar.tsx

@@ -51,11 +51,12 @@ export function Sidebar() {
           href={item.href}
           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] ${
             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]'
-          } ${collapsed ? 'justify-center' : ''}`}
+          } ${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}>
             <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
@@ -81,10 +82,11 @@ export function Sidebar() {
         </svg>
       </button>
 
-      {/* Mobile overlay */}
+      {/* Mobile overlay — round 47: fades in via anet-fade-in (150ms ease-out)
+          matching the TaskDrawer / TaskChatPanel backdrop. */}
       {mobileOpen && (
         <div
-          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
+          className="fixed inset-0 bg-black/50 z-30 lg:hidden anet-fade-in"
           onClick={() => setMobileOpen(false)}
         />
       )}
@@ -93,13 +95,15 @@ export function Sidebar() {
           but in light/mint we want a distinct surface, so we layer
           `lg:bg-white` / `lg:dark:bg-[#0d0d1a]` 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. */}
+          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]
-        transition-all duration-200
+        transition-transform duration-200 ease-out
         ${collapsed ? 'w-16' : 'w-52'}
-        ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
-        lg:translate-x-0 lg:static lg:shrink-0
+        ${mobileOpen ? 'translate-x-0 shadow-2xl shadow-black/40 lg:shadow-none' : '-translate-x-full'}
+        lg:translate-x-0 lg:static lg:shrink-0 lg:shadow-none
       `}>
         {/* Brand header — round 4: 3-node mesh mark matches /login,
             with an inline live "online" pulse so every page surfaces
@@ -134,45 +138,49 @@ export function Sidebar() {
           {nav}
         </div>
 
-        {/* Sign out + collapse */}
+        {/* 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]">
-          {!collapsed && (
-            <button
-              onClick={async () => {
-                await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
-                sessionStorage.removeItem('anet_v3_auth');
-                window.location.assign('/login');
-              }}
-              className="w-full flex items-center gap-3 px-5 py-3 text-xs text-gray-500 hover:text-red-400 hover:bg-red-500/5 transition-colors"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+          <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'
+            }`}
+            aria-label="Open command palette"
+          >
+            <span className={`flex items-center ${collapsed ? '' : 'gap-2'}`}>
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
-              Sign out
-            </button>
-          )}
-          {!collapsed && (
-            <button
-              onClick={() => {
-                // Dispatch a synthetic keypress so the global Cmd+K listener fires
-                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
-              }}
-              className="w-full flex items-center justify-between gap-2 px-5 py-2 text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors"
-              aria-label="Open command palette"
-            >
-              <span className="flex items-center gap-2">
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                Quick search
-              </span>
-              <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>
-            </button>
-          )}
-          <div className={`flex items-center gap-2 px-3 py-2 ${collapsed ? 'justify-center' : 'justify-between'}`}>
+              {!collapsed && 'Quick search'}
+            </span>
+            {!collapsed && <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>}
+          </button>
+          <button
+            onClick={async () => {
+              await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
+              sessionStorage.removeItem('anet_v3_auth');
+              window.location.assign('/login');
+            }}
+            title={collapsed ? 'Sign out' : undefined}
+            className={`w-full flex items-center text-xs text-gray-500 hover:text-red-400 hover:bg-red-500/5 transition-colors ${
+              collapsed ? 'justify-center px-0 py-2.5' : 'gap-3 px-5 py-3'
+            }`}
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+            </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} />
             <button
               onClick={() => setCollapsed(!collapsed)}
+              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
               className="hidden lg:flex p-1.5 rounded text-gray-600 hover:text-gray-400 transition-colors"
               aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
             >

package/app/components/StatsBar.tsx

@@ -10,9 +10,10 @@ interface StatsBarProps {
 
 export function StatsBar({ online, working, total, version, uptime }: StatsBarProps) {
   const onlinePercent = total > 0 ? Math.round((online / total) * 100) : 0;
+  const fleetEmpty = total === 0;
 
   return (
-    <div className="mb-8">
+    <div className={fleetEmpty ? 'mb-4' : 'mb-8'}>
       {/* Title row */}
       <div className="flex flex-wrap items-center gap-3 mb-4">
         <h1 className="text-2xl font-bold text-white tracking-tight">Agent Network</h1>
@@ -21,41 +22,63 @@ export function StatsBar({ online, working, total, version, uptime }: StatsBarPr
         </span>
       </div>
 
-      {/* Stats grid */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        <StatCard
-          value={online}
-          label="Online"
-          sub={`${onlinePercent}% of fleet`}
-          color="text-green-400"
-          accent="from-green-500/20 to-green-500/0"
-          border="border-green-500/15"
-        />
-        <StatCard
-          value={working}
-          label="Working"
-          sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
-          color="text-cyan-400"
-          accent="from-cyan-500/20 to-cyan-500/0"
-          border="border-cyan-500/15"
-        />
-        <StatCard
-          value={total - online}
-          label="Offline"
-          sub={total - online === 0 ? 'All systems go' : `${total - online} disconnected`}
-          color="text-gray-400"
-          accent="from-gray-500/10 to-gray-500/0"
-          border="border-gray-500/15"
-        />
-        <StatCard
-          value={total}
-          label="Total"
-          sub="Registered nodes"
-          color="text-white"
-          accent="from-blue-500/15 to-blue-500/0"
-          border="border-blue-500/15"
-        />
-      </div>
+      {fleetEmpty ? (
+        /* Round 72: thin status strip replaces the 4-card grid when fleet
+           is empty. Saves ~280px on mobile (CTA y=650 → ~370) and keeps
+           the same data visible in a single inline row. */
+        <div className="anet-stat-strip flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 border-t border-b border-[#2a2a4a] py-2">
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> online
+          </span>
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> working
+          </span>
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> registered
+          </span>
+        </div>
+      ) : (
+        /* Populated state — full 4-card grid as before */
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <StatCard
+            value={online}
+            label="Online"
+            sub={`${onlinePercent}% of fleet`}
+            color="text-green-400"
+            accent="from-green-500/20 to-green-500/0"
+            border="border-green-500/15"
+          />
+          <StatCard
+            value={working}
+            label="Working"
+            sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
+            color="text-cyan-400"
+            accent="from-cyan-500/20 to-cyan-500/0"
+            border="border-cyan-500/15"
+          />
+          <StatCard
+            value={total - online}
+            label="Offline"
+            sub={total - online === 0 ? 'All systems go' : `${total - online} disconnected`}
+            color="text-gray-400"
+            accent="from-gray-500/10 to-gray-500/0"
+            border="border-gray-500/15"
+          />
+          <StatCard
+            value={total}
+            label="Total"
+            sub="Registered nodes"
+            color="text-white"
+            accent="from-blue-500/15 to-blue-500/0"
+            border="border-blue-500/15"
+          />
+        </div>
+      )}
     </div>
   );
 }