@sleep2agi/agent-network-dashboard 0.4.5-preview.9 → 0.4.5-preview.90

package/app/admin/page.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { useSessions, useHealth, useStats } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
+import { AliasAvatar } from '../components/AliasAvatar';
+import { STATUS_CHIP_CLASS, SESSION_STATUS_CHIP_CLASS } from '../lib/status';
 
 export default function AdminPage() {
   const { sessions } = useSessions();
@@ -72,9 +74,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>
@@ -89,7 +114,9 @@ export default function AdminPage() {
             </div>
             <div>
               <div className="text-3xl font-bold text-cyan-400 tabular-nums">{health?.sse_connections ?? '--'}</div>
-              <div className="text-xs text-gray-500">SSE Connections</div>
+              <div className="text-xs text-gray-500">
+                SSE Streams <span className="text-gray-600">· server</span>
+              </div>
             </div>
             <div>
               <div className="text-3xl font-bold text-white tabular-nums">{stats?.tasks?.total ?? '--'}</div>
@@ -97,9 +124,13 @@ export default function AdminPage() {
             </div>
           </div>
           {stats?.tasks?.by_status && stats.tasks.by_status.length > 0 && (
+            /* Round 90: adopt the shared STATUS_CHIP_CLASS palette so
+               `acked`/`replied`/`failed` here color-match the same
+               chips on /tasks, Overview r69, and /tasks/[id] r68.
+               Unknown statuses fall back to the previous flat gray. */
             <div className="mt-4 flex flex-wrap gap-2">
               {stats.tasks.by_status.map((s: { status: string; count: number }) => (
-                <span key={s.status} className="text-xs px-2 py-1 rounded bg-[#0a0a15] border border-[#1a1a2a] text-gray-400">
+                <span key={s.status} className={`text-xs px-2 py-1 rounded border ${STATUS_CHIP_CLASS[s.status] || 'bg-[#0a0a15] border-[#1a1a2a] text-gray-400'}`}>
                   {s.status}: {s.count}
                 </span>
               ))}
@@ -107,6 +138,53 @@ 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">
+                  {/* Round 91: 5-state palette via shared
+                      SESSION_STATUS_CHIP_CLASS (was working-vs-other, which
+                      rendered blocked/error identical to idle). */}
+                  <span className={`text-xs px-2 py-0.5 rounded border ${SESSION_STATUS_CHIP_CLASS[s.status] || SESSION_STATUS_CHIP_CLASS.idle}`}>{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>
+          {sessions.length === 0 ? (
+            /* Round 77: Broadcast and Send Task both require at least one
+               registered agent. Surfacing the empty cards above an empty
+               fleet is the same dead-control class as the Overview
+               Dispatch button (r70). Replace with a single inline hint. */
+            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl px-5 py-4 text-sm text-gray-500">
+              Broadcast and Send Task become available after the first agent registers.
+            </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 +245,18 @@ 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 +285,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/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';
@@ -166,24 +167,138 @@ export function EmptyState({ variant = 'generic', title, sub, cta, compact = fal
   );
 }
 
+/** Round 105 (issue #90): centered card shell so the Overview empty state
+ *  reads as an intentional, layout-aligned card instead of bare text
+ *  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">
+      {children}
+    </div>
+  );
+}
+
 /**
- * Overview-specific variant with a hint about cross-network global count.
- * Kept here so /app/page.tsx can drop in without ceremony.
+ * Overview-specific variant. Three cases:
+ *   1. network-mismatch — agents exist globally, none in this network
+ *   2. agents-offline   — 0 registered now BUT task history exists, so this
+ *      is NOT a first run (round 105 / issue #90: showing "Spin up your
+ *      first agent" next to "acked: 499" was misleading)
+ *   3. true first-run   — 0 agents, 0 history → quickstart command
  */
-export function NodesEmptyState({ hint }: { hint?: { global_count?: number; filtered_network?: string } }) {
+export function NodesEmptyState({
+  hint,
+  taskHistoryCount = 0,
+}: {
+  hint?: { global_count?: number; filtered_network?: string };
+  taskHistoryCount?: number;
+}) {
   if (hint?.global_count) {
     return (
-      <EmptyState
-        variant="nodes"
-        title="No agents in this network"
-        sub={`Server has ${hint.global_count} nodes globally, but none are registered to the current network. Switch network or contact admin.`}
-      />
+      <EmptyCard>
+        <EmptyState
+          variant="nodes"
+          title="No agents in this network"
+          sub={`Server has ${hint.global_count} nodes globally, but none are registered to the current network. Switch network or contact admin.`}
+        />
+      </EmptyCard>
     );
   }
+
+  // Round 105 (issue #90): there's task history but no agents online right
+  // now — they finished or disconnected. Don't pitch a first-run setup;
+  // point at the history instead.
+  if (taskHistoryCount > 0) {
+    return (
+      <EmptyCard>
+        <EmptyState
+          variant="nodes"
+          title="No agents online"
+          sub={`Every agent in this network is currently offline. ${taskHistoryCount.toLocaleString()} task${taskHistoryCount === 1 ? '' : 's'} in history — they may have finished their work or disconnected.`}
+          cta={{ label: 'View task history', href: '/tasks' }}
+        />
+      </EmptyCard>
+    );
+  }
+
+  // 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' }}
-    />
+    <EmptyCard>
+      <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>
+    </EmptyCard>
+  );
+}
+
+/** 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>