@sleep2agi/agent-network-dashboard 0.4.5-preview.4 → 0.4.5-preview.40

package/app/admin/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useSessions, useHealth, useStats } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 export default function AdminPage() {
   const { sessions } = useSessions();
@@ -72,9 +73,32 @@ export default function AdminPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <h1 className="text-2xl font-bold text-white mb-6 lg:ml-0 ml-10">Admin</h1>
+      <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Admin</h1>
+
+      {/* Section anchor nav — same pattern as Settings r28. */}
+      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+        {[
+          { href: '#status',  label: 'Status' },
+          { href: '#actions', label: 'Actions' },
+          { href: '#users',   label: 'Users' },
+        ].map(a => (
+          <a key={a.href} href={a.href}
+            className="rounded-md px-2.5 py-1 text-gray-500 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            {a.label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="max-w-6xl space-y-10">
+
+        {/* ── Group: Status ─────────────────────────────────────── */}
+        <div id="status" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Status</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl">
         {/* Server Overview */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Server Overview</h2>
@@ -107,6 +131,43 @@ export default function AdminPage() {
           )}
         </section>
 
+        {/* Online Sessions — pulled into Status group (was below Send Task) */}
+        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-gray-300 mb-4">
+            Online Sessions <span className="text-gray-600">({onlineNodes.length})</span>
+          </h2>
+          <div className="space-y-2 max-h-80 overflow-y-auto">
+            {onlineNodes.length === 0 ? (
+              <div className="text-xs text-gray-600 text-center py-4">No online sessions</div>
+            ) : onlineNodes.map(s => (
+              <div key={s.alias} className="flex items-center gap-3 bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
+                <AliasAvatar alias={s.alias} size={20} />
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm text-white font-medium truncate">{s.alias}</div>
+                  <div className="text-xs text-gray-500 truncate">{s.agent || '--'} · {s.task || 'idle'}</div>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <span className={`text-xs px-2 py-0.5 rounded border ${
+                    s.status === 'working' ? 'bg-green-900/30 text-green-300 border-green-800/30' : 'bg-blue-900/30 text-blue-300 border-blue-800/30'
+                  }`}>{s.status}</span>
+                  <span className="text-[10px] text-gray-600">{timeAgo(s.updated_at)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+          </div>
+        </div>
+
+        {/* ── Group: Actions ────────────────────────────────────── */}
+        <div id="actions" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Actions</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
         {/* Broadcast */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Broadcast</h2>
@@ -167,30 +228,17 @@ export default function AdminPage() {
           {taskResult && <div className={`mt-2 text-xs ${taskResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{taskResult}</div>}
         </section>
 
-        {/* Online Sessions */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4">
-            Online Sessions <span className="text-gray-600">({onlineNodes.length})</span>
-          </h2>
-          <div className="space-y-2 max-h-80 overflow-y-auto">
-            {onlineNodes.length === 0 ? (
-              <div className="text-xs text-gray-600 text-center py-4">No online sessions</div>
-            ) : onlineNodes.map(s => (
-              <div key={s.alias} className="flex items-center justify-between bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
-                <div className="min-w-0">
-                  <div className="text-sm text-white font-medium truncate">{s.alias}</div>
-                  <div className="text-xs text-gray-500 truncate">{s.agent || '--'} · {s.task || 'idle'}</div>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  <span className={`text-xs px-2 py-0.5 rounded border ${
-                    s.status === 'working' ? 'bg-green-900/30 text-green-300 border-green-800/30' : 'bg-blue-900/30 text-blue-300 border-blue-800/30'
-                  }`}>{s.status}</span>
-                  <span className="text-[10px] text-gray-600">{timeAgo(s.updated_at)}</span>
-                </div>
-              </div>
-            ))}
           </div>
-        </section>
+        </div>
+
+        {/* ── Group: Users ──────────────────────────────────────── */}
+        <div id="users" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Users</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
         {/* User Management (V3 Auth) */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Register User (V3)</h2>
@@ -219,6 +267,10 @@ export default function AdminPage() {
           </div>
           {regResult && <div className={`mt-2 text-xs ${regResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{regResult}</div>}
         </section>
+
+          </div>
+        </div>
+
       </div>
     </div>
   );

package/app/components/AgentCard.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { Session } from './types';
 import { timeAgo } from './utils';
+import { AliasAvatar } from './AliasAvatar';
 
 interface AgentCardProps {
   session: Session;
@@ -27,17 +28,20 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
-      className={`block rounded-xl border p-4 transition-all duration-300 cursor-pointer ${
+      className={`anet-agent-card group relative block rounded-xl border p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
         hasSse
           ? `bg-[#111128] border-[#2a2a4a] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
           : 'bg-[#0d0d1a] border-[#1a1a2a] opacity-40'
       }`}
     >
-      {/* Header: name + status */}
+      {/* Header: avatar + name + status. Avatar carries the alias→hue map
+          shared with Messages/Nodes/Tasks/Overview; the live status dot
+          stays as a small pulse-capable indicator. */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2 min-w-0">
-          <span className={`inline-block w-2 h-2 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
+          <AliasAvatar alias={s.alias} size={22} />
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
+          <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
         </div>
         <span className={`text-[11px] px-2 py-0.5 rounded-md border shrink-0 ${cfg.bg} ${cfg.text}`}>
           {hasSse ? s.status : 'offline'}
@@ -79,9 +83,12 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         </div>
       )}
 
-      {/* Footer: time + chat */}
+      {/* Footer: time + chat + hover chevron affordance (round 44).
+          The card is a <Link> so it's clickable everywhere, but with no
+          visible cue users may not realise. Chevron appears on hover and
+          slides right ~2px for a "drill in" hint. */}
       <div className="mt-3 flex justify-between items-center text-[10px] text-gray-600">
-        <span>{s.server || '--'}</span>
+        <span className="truncate" title={s.server || ''}>{s.server || '--'}</span>
         <div className="flex items-center gap-2">
           {onChat && hasSse && (
             <button
@@ -92,6 +99,13 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
             </button>
           )}
           <span>{timeAgo(s.updated_at)}</span>
+          <svg
+            aria-hidden
+            className="w-3 h-3 text-gray-700 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
         </div>
       </div>
     </Link>

package/app/components/AliasAvatar.tsx

@@ -0,0 +1,51 @@
+/** Hue-hashed avatar pill for agent aliases. Same alias → same color across
+ *  every page (Messages, Nodes, TopoGraph). Use the `size` prop for inline
+ *  pills (16/20) vs card headers (28). Round 21 introduced the palette;
+ *  round 22 promotes it from app/messages to a shared component. */
+
+const AVATAR_HUES = [180, 200, 220, 270, 300, 330, 30, 90];
+
+export function aliasAvatarColors(alias: string): { bg: string; ring: string; text: string } {
+  let h = 0;
+  for (let i = 0; i < alias.length; i++) h = (h * 31 + alias.charCodeAt(i)) >>> 0;
+  const hue = AVATAR_HUES[h % AVATAR_HUES.length];
+  return {
+    bg: `hsl(${hue} 55% 22%)`,
+    ring: `hsl(${hue} 60% 45%)`,
+    text: `hsl(${hue} 80% 78%)`,
+  };
+}
+
+export function aliasInitial(alias?: string): string {
+  if (!alias) return '·';
+  const ch = alias.trim().match(/[\p{L}\p{N}]/u)?.[0] || alias.trim()[0] || '·';
+  return ch.toUpperCase();
+}
+
+interface AliasAvatarProps {
+  alias: string;
+  size?: number;
+  className?: string;
+}
+
+export function AliasAvatar({ alias, size = 28, className = '' }: AliasAvatarProps) {
+  const c = aliasAvatarColors(alias);
+  const fs = Math.max(9, Math.round(size * 0.42));
+  return (
+    <span
+      className={`anet-alias-avatar inline-flex items-center justify-center rounded-full border shrink-0 font-semibold ${className}`}
+      style={{
+        width: size,
+        height: size,
+        fontSize: fs,
+        backgroundColor: c.bg,
+        borderColor: c.ring,
+        color: c.text,
+      }}
+      title={alias}
+      aria-hidden
+    >
+      {aliasInitial(alias)}
+    </span>
+  );
+}

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

@@ -92,7 +92,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;