@sleep2agi/agent-network-dashboard 0.4.5-preview.1 → 0.4.5-preview.11

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} />
@@ -134,45 +135,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/TaskChatPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { timeAgo } from './utils';
+import { AliasAvatar } from './AliasAvatar';
 
 interface ChatTask {
   task_id: string;
@@ -386,7 +387,10 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               {m.result && (
                 <div className="flex justify-start">
                   <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
-                    <div className="text-[10px] text-green-400 font-medium mb-1.5">{m.to_name}</div>
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                      {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
+                      <span className="text-[10px] text-gray-200 font-medium">{m.to_name}</span>
+                    </div>
                     <div className="text-[13px] text-gray-200">
                       <MarkdownContent text={m.result} />
                     </div>
@@ -422,7 +426,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   {filteredMentions.map(node => (
                     <button key={node} onClick={() => insertMention(node)}
                       className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-cyan-500/10 transition-colors">
-                      <span className="w-2 h-2 rounded-full bg-cyan-400 shrink-0" />
+                      <AliasAvatar alias={node} size={16} />
                       <span className="text-gray-300">{node}</span>
                     </button>
                   ))}
@@ -476,9 +480,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-[#2a2a4a] bg-[#0d0d1a]">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500/30 to-blue-500/30 flex items-center justify-center text-xs font-bold text-cyan-300">
-              {alias.slice(0, 2)}
-            </div>
+            <AliasAvatar alias={alias} size={32} />
             <div>
               <div className="text-sm font-semibold text-white">{alias}</div>
               <div className="text-[10px] text-gray-500">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>

package/app/components/TopoGraph.tsx

@@ -33,10 +33,14 @@ const cy = 330;
 const onlineRadius = 220;
 const offlineRadius = 315;
 
-function polarPoint(index: number, total: number, radius: number) {
+/** Polar coordinate for a node on a ring. `rotateBy` lets the caller offset
+ *  the whole ring so two stacked rings don't align radially (round 25: the
+ *  offline ring gets a half-step rotation so its nodes sit in the gaps
+ *  between online ones). */
+function polarPoint(index: number, total: number, radius: number, rotateBy = 0) {
   const spread = total <= 2 ? Math.PI : Math.PI * 1.78;
   const start = -Math.PI / 2 - spread / 2;
-  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1);
+  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1) + rotateBy;
   return {
     x: cx + radius * Math.cos(angle),
     y: cy + radius * Math.sin(angle),
@@ -248,8 +252,17 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
       positions[s.alias] = polarPoint(index, Math.max(online.length, 1), onlineRadius);
     });
 
+    // Offset the offline ring radially by half the online step so offline
+    // bubbles sit in the angular gaps between online bubbles instead of
+    // stacking directly behind them. Also push the outer ring further when
+    // there are many offline nodes so labels don't crowd the legend.
+    const spread = online.length <= 2 ? Math.PI : Math.PI * 1.78;
+    const onlineStep = online.length > 1 ? spread / (online.length - 1) : 0;
+    const offlineRotation = online.length > 0 ? onlineStep / 2 : 0;
+    const offlineR = offlineRadius + Math.max(0, offline.length - 4) * 6;
+
     offline.forEach((s, index) => {
-      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineRadius);
+      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineR, offlineRotation);
     });
 
     const links = buildFlowLinks(messages, positions);

package/app/globals.css

@@ -577,6 +577,30 @@ body {
   box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12);
 }
 
+/* Task row hover bg (round 19) — dark hex would land on a white card and
+   look like a stripe. Re-map to a faint accent tint per theme. */
+[data-theme="light"] .anet-task-row:hover {
+  background-color: #f5f7fb !important;
+}
+[data-theme="mint"] .anet-task-row:hover {
+  background-color: #ecf6f1 !important;
+}
+[data-theme="sunset"] .anet-task-row:hover {
+  background-color: #fff4ec !important;
+}
+/* Open state — slightly stronger fill so users can see "this one is the
+   open row" while scrolling. */
+[data-theme="light"] .anet-task-row[aria-expanded="true"] {
+  background-color: #fafbfd !important;
+  box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.14) !important;
+}
+[data-theme="mint"] .anet-task-row[aria-expanded="true"] {
+  background-color: #f3faf6 !important;
+}
+[data-theme="sunset"] .anet-task-row[aria-expanded="true"] {
+  background-color: #fff8f1 !important;
+}
+
 /* ─────────────────────────────────────────────────────────────────────
    Login surface (round 1 polish)
    Restrained, minimal — first impression for new Agent Network users.
@@ -684,6 +708,45 @@ body {
   background-color: rgba(0, 158, 126, 0.08) !important;
 }
 
+/* Round 20 — matched-char highlight inside cmdk titles/hints. Inherits
+   line color (`color`) instead of forcing one — keeps text readable on
+   both inactive (gray) and active (cyan-300) rows. <mark> default is a
+   garish yellow block, which we override. */
+.anet-cmdk-mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 600;
+  /* Subtle underline so the mark stays visible even on the active row
+     where the background tint matches the accent color. */
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-skip-ink: none;
+}
+/* Cyber: accent the matched glyph color so it pops on the dark bg. */
+[data-theme="cyber"] .anet-cmdk-mark,
+:root:not([data-theme]) .anet-cmdk-mark {
+  color: #22d3ee;
+}
+/* Light/mint: use the brand teal — undertone matches the active row. */
+[data-theme="light"] .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-mark {
+  color: #0d9488;
+}
+[data-theme="sunset"] .anet-cmdk-mark {
+  color: #ea580c;
+}
+/* On the active (cyan-tinted) row, the title is already cyan-300 — use
+   white-with-underline so the highlight reads as emphasis, not redundancy. */
+.anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #f0fdff;
+}
+[data-theme="light"] .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #064e3b;
+}
+
 /* Help overlay — same white-card-with-shadow treatment as cmdk on light */
 [data-theme="light"] .anet-help > div:not([aria-hidden]),
 [data-theme="mint"]  .anet-help > div:not([aria-hidden]) {
@@ -692,6 +755,47 @@ body {
               0 2px 6px -2px rgba(15, 23, 42, 0.10);
 }
 
+/* Tasks tab strip horizontal scroll fade — gradient overlays at left/right
+   edges hint that there's more content when the row overflows. Only
+   applied on <sm (where the strip actually scrolls). The wrapper is
+   `position: relative` and the fades are absolute siblings. */
+.anet-tabstrip-wrap {
+  position: relative;
+}
+.anet-tabstrip-wrap::before,
+.anet-tabstrip-wrap::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 20px;
+  pointer-events: none;
+  z-index: 1;
+}
+.anet-tabstrip-wrap::before {
+  left: 0;
+  background: linear-gradient(to right, #111128, transparent);
+  border-radius: 8px 0 0 8px;
+}
+.anet-tabstrip-wrap::after {
+  right: 0;
+  background: linear-gradient(to left, #111128, transparent);
+  border-radius: 0 8px 8px 0;
+}
+@media (min-width: 640px) {
+  /* sm: stops scrolling, hide the fades */
+  .anet-tabstrip-wrap::before,
+  .anet-tabstrip-wrap::after { display: none; }
+}
+[data-theme="light"] .anet-tabstrip-wrap::before,
+[data-theme="mint"]  .anet-tabstrip-wrap::before {
+  background: linear-gradient(to right, var(--bg-secondary), transparent);
+}
+[data-theme="light"] .anet-tabstrip-wrap::after,
+[data-theme="mint"]  .anet-tabstrip-wrap::after {
+  background: linear-gradient(to left, var(--bg-secondary), transparent);
+}
+
 /* P0-3 baseline: error / warning chip colors for light themes.
    The component-level copy (replacing raw JSON with human text) is fixed
    in the Logs / Server-Logs page components separately. */

package/app/messages/page.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { useMessages } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface MessageItem {
   id: string;
@@ -40,6 +41,17 @@ function bubbleVariant(message: MessageItem) {
   return 'incoming';
 }
 
+/** Render message content, highlighting the search match inline (skips the
+ *  `from:` filter prefix since it filters by sender, not by content). */
+function renderHighlighted(content: string | undefined, search: string) {
+  const text = content || '--';
+  const q = search.trim();
+  if (!q || q.startsWith('from:')) return text;
+  const idx = text.toLowerCase().indexOf(q.toLowerCase());
+  if (idx < 0) return text;
+  return <>{text.slice(0, idx)}<mark className="bg-yellow-500/30 text-yellow-200 rounded px-0.5">{text.slice(idx, idx + q.length)}</mark>{text.slice(idx + q.length)}</>;
+}
+
 export default function MessagesPage() {
   const { messages, isLoading } = useMessages(200);
   const [filterType, setFilterType] = useState('');
@@ -213,13 +225,21 @@ export default function MessagesPage() {
           ))}
         </div>
       ) : (
-        <div className="space-y-3">
+        <div className="space-y-1">
           {filtered.map((message: MessageItem, index) => {
             const previous = filtered[index - 1];
             const gapExceeded = previous
               ? normalizeDate(message.created_at) - normalizeDate(previous.created_at) > 5 * 60 * 1000
               : false;
             const variant = bubbleVariant(message);
+            // Cluster: same sender + same direction + same to_alias and no
+            // time-gap divider → tighter spacing and hide repeated header.
+            const samePrev = !!previous
+              && !gapExceeded
+              && bubbleVariant(previous) === variant
+              && (previous.from_alias || '') === (message.from_alias || '')
+              && (previous.to_alias || '') === (message.to_alias || '');
+            const fromAlias = message.from_alias || '?';
 
             return (
               <div key={message.id}>
@@ -231,60 +251,71 @@ export default function MessagesPage() {
                   </div>
                 )}
 
-                <div className={
-                  variant === 'broadcast'
-                    ? ''
-                    : variant === 'outgoing'
-                      ? 'flex justify-end'
-                      : 'flex justify-start'
-                }>
-                  <div className={`rounded-2xl border px-4 py-3 shadow-sm ${
-                    variant === 'broadcast'
-                      ? 'w-full border-purple-500/20 bg-purple-500/10'
-                      : variant === 'outgoing'
-                        ? 'max-w-3xl border-green-500/20 bg-green-500/10'
-                        : 'max-w-3xl border-blue-500/20 bg-blue-500/10'
-                  }`}>
-                    <div className="mb-2 flex flex-wrap items-center gap-2">
-                      <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
-                        {message.type || 'unknown'}
-                      </span>
-                      <span className={`text-sm font-medium ${variant === 'outgoing' ? 'text-green-300' : variant === 'broadcast' ? 'text-purple-200' : 'text-blue-300'}`}>
-                        {message.from_alias || '--'}
-                      </span>
-                      {variant !== 'broadcast' && (
-                        <>
+                {/* Broadcasts span full width — no avatar gutter. */}
+                {variant === 'broadcast' ? (
+                  <div className={samePrev ? 'mt-1' : 'mt-3'}>
+                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-4 py-3 shadow-sm w-full">
+                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
+                          {message.type || 'unknown'}
+                        </span>
+                        <span className="text-sm font-medium text-purple-200">{fromAlias}</span>
+                        {message.to_alias && <span className="text-xs text-purple-200/80">to {message.to_alias}</span>}
+                        {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
+                        <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
+                      </div>
+                      <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
+                        {renderHighlighted(message.content, search)}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className={`${samePrev ? 'mt-1' : 'mt-3'} flex gap-2 ${variant === 'outgoing' ? 'flex-row-reverse' : 'flex-row'}`}>
+                    {/* Avatar gutter — fixed width keeps bubble columns aligned even on streaks */}
+                    <div className="w-8 shrink-0 pt-1">
+                      {!samePrev && <AliasAvatar alias={fromAlias} size={32} />}
+                    </div>
+                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-4 py-3 shadow-sm ${
+                      variant === 'outgoing'
+                        ? 'border-green-500/20 bg-green-500/10'
+                        : 'border-blue-500/20 bg-blue-500/10'
+                    }`}>
+                      {!samePrev && (
+                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                          <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
+                            {message.type || 'unknown'}
+                          </span>
+                          <span className={`text-sm font-medium ${variant === 'outgoing' ? 'text-green-300' : 'text-blue-300'}`}>
+                            {fromAlias}
+                          </span>
                           <span className="text-xs text-gray-600">&rarr;</span>
                           <span className="text-sm text-gray-300">{message.to_alias || '--'}</span>
-                        </>
+                          {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
+                          <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
+                        </div>
                       )}
-                      {variant === 'broadcast' && message.to_alias && (
-                        <span className="text-xs text-purple-200/80">to {message.to_alias}</span>
+
+                      <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
+                        {renderHighlighted(message.content, search)}
+                      </div>
+
+                      {/* When in a streak, surface the timestamp inline-right so users still know cadence */}
+                      {samePrev && (
+                        <div className="mt-1 text-[10px] text-gray-600 text-right">
+                          {message.created_at ? timeAgo(message.created_at) : ''}
+                        </div>
                       )}
-                      {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
-                      <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
-                    </div>
 
-                    <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
-                      {(() => {
-                        const text = message.content || '--';
-                        const q = search.trim();
-                        if (!q || q.startsWith('from:')) return text;
-                        const idx = text.toLowerCase().indexOf(q.toLowerCase());
-                        if (idx < 0) return text;
-                        return <>{text.slice(0, idx)}<mark className="bg-yellow-500/30 text-yellow-200 rounded px-0.5">{text.slice(idx, idx + q.length)}</mark>{text.slice(idx + q.length)}</>;
-                      })()}
+                      {debug && (
+                        <div className="mt-3 border-t border-white/10 pt-3 text-xs text-gray-500 space-y-1">
+                          <div>ID: {message.id}</div>
+                          {message.task_id && <div>Task ID: {message.task_id}</div>}
+                          <div>Created: {message.created_at}</div>
+                        </div>
+                      )}
                     </div>
-
-                    {debug && (
-                      <div className="mt-3 border-t border-white/10 pt-3 text-xs text-gray-500 space-y-1">
-                        <div>ID: {message.id}</div>
-                        {message.task_id && <div>Task ID: {message.task_id}</div>}
-                        <div>Created: {message.created_at}</div>
-                      </div>
-                    )}
                   </div>
-                </div>
+                )}
               </div>
             );
           })}

package/app/nodes/page.tsx

@@ -6,6 +6,7 @@ import { timeAgo } from '../components/utils';
 import { useSessions, useHealth } from '../lib/hooks';
 import { TaskChatPanel } from '../components/TaskChatPanel';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 import type { Session } from '../components/types';
 
 const STATUS_COLORS: Record<string, string> = {
@@ -188,14 +189,18 @@ export default function NodesPage() {
                     </span>
                   </div>
                 )}
-                <div className="flex items-start justify-between gap-3">
+                <div className="flex items-start gap-3">
+                  <AliasAvatar alias={s.alias} size={36} />
                   <Link href={`/node?alias=${encodeURIComponent(s.alias)}`} className="min-w-0 flex-1 hover:text-cyan-300">
                     <div className="flex items-center gap-2">
                       <span className="truncate text-base font-semibold text-white">{s.alias}</span>
-                      <span className={`shrink-0 rounded-md border px-2 py-0.5 text-[11px] ${STATUS_COLORS[statusKey] || STATUS_COLORS.offline}`}>
+                      <span className={`shrink-0 rounded-md border px-2 py-0.5 text-[10px] uppercase tracking-wide ${STATUS_COLORS[statusKey] || STATUS_COLORS.offline}`}>
                         {statusKey}
                       </span>
                     </div>
+                    <div className="mt-0.5 truncate text-xs text-gray-500">
+                      {(s.agent || '—')}<span className="text-gray-700 mx-1.5">·</span>{(s.server || '—')}
+                    </div>
                   </Link>
                   <div className="flex gap-1.5 shrink-0">
                     <button type="button" onClick={() => setChatAlias(s.alias)}
@@ -209,25 +214,16 @@ export default function NodesPage() {
                   </div>
                 </div>
 
-                <div className="mt-3 space-y-2 text-xs text-gray-500">
-                  <div className="flex justify-between gap-3">
-                    <span>Agent</span>
-                    <span className="truncate text-gray-300">{s.agent || '--'}</span>
-                  </div>
-                  <div className="flex justify-between gap-3">
-                    <span>Server</span>
-                    <span className="truncate text-gray-300">{s.server || '--'}</span>
+                <div className="mt-3 rounded-lg border border-[#1a1a2a] bg-[#0a0a15] px-3 py-2 text-xs">
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="text-[10px] uppercase tracking-wide text-gray-600">Current task</span>
+                    <span className="text-[10px] text-gray-600">{timeAgo(s.last_seen_at || s.updated_at)}</span>
                   </div>
-                  <div className="flex justify-between gap-3">
-                    <span>Updated</span>
-                    <span className="text-gray-300">{timeAgo(s.last_seen_at || s.updated_at)}</span>
+                  <div className={`mt-1 line-clamp-2 ${s.task ? 'text-gray-300' : 'text-gray-600 italic'}`}>
+                    {s.task || 'No current task'}
                   </div>
                 </div>
 
-                <div className="mt-3 rounded-lg border border-[#1a1a2a] bg-[#0a0a15] px-3 py-2 text-xs text-gray-400">
-                  {s.task ? s.task : 'No current task'}
-                </div>
-
                 {progress > 0 && progress < 100 && (
                   <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-gray-800">
                     <div className="h-1.5 rounded-full bg-cyan-400 transition-all" style={{ width: `${progress}%` }} />
@@ -297,8 +293,9 @@ export default function NodesPage() {
                     </span>
                   </div>
                   <div className="col-span-2 min-w-0">
-                    <Link href={`/node?alias=${encodeURIComponent(s.alias)}`} className="truncate text-sm font-medium text-white hover:text-cyan-300">
-                      {s.alias}
+                    <Link href={`/node?alias=${encodeURIComponent(s.alias)}`} className="flex items-center gap-2 min-w-0 hover:text-cyan-300">
+                      <AliasAvatar alias={s.alias} size={20} />
+                      <span className="truncate text-sm font-medium text-white">{s.alias}</span>
                     </Link>
                   </div>
                   <div className="col-span-2 truncate text-xs text-gray-400">{s.agent || '--'}</div>
@@ -317,15 +314,16 @@ export default function NodesPage() {
                   </div>
                 </div>
                 <div className="sm:hidden space-y-2">
-                  <div className="flex items-center justify-between gap-3">
-                    <Link href={`/node?alias=${encodeURIComponent(s.alias)}`} className="truncate text-sm font-medium text-white hover:text-cyan-300">
-                      {s.alias}
+                  <div className="flex items-center gap-2.5">
+                    <AliasAvatar alias={s.alias} size={28} />
+                    <Link href={`/node?alias=${encodeURIComponent(s.alias)}`} className="min-w-0 flex-1 hover:text-cyan-300">
+                      <div className="truncate text-sm font-medium text-white">{s.alias}</div>
+                      <div className="truncate text-[10px] text-gray-500">{s.agent || '—'} · {timeAgo(s.last_seen_at || s.updated_at)}</div>
                     </Link>
                     <span className={`shrink-0 text-xs px-2 py-0.5 rounded-md border ${STATUS_COLORS[statusKey] || STATUS_COLORS.offline}`}>
                       {statusKey}
                     </span>
                   </div>
-                  <div className="text-xs text-gray-500">{s.agent || '--'} · {timeAgo(s.last_seen_at || s.updated_at)}</div>
                   {s.task && <div className="truncate text-xs text-gray-500">{s.task}</div>}
                   <div className="flex gap-2">
                     <button type="button" onClick={() => setChatAlias(s.alias)}

package/app/page.tsx

@@ -10,6 +10,7 @@ import { AgentCard } from './components/AgentCard';
 import { InboxPanel } from './components/InboxPanel';
 import { LoadingSkeleton } from './components/LoadingSkeleton';
 import { NodesEmptyState as EmptyState } from './components/EmptyState';
+import { AliasAvatar } from './components/AliasAvatar';
 import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
@@ -120,7 +121,7 @@ export default function Dashboard() {
       </div>
 
       {/* Dispatch + User Bar */}
-      <div className="flex items-center gap-3 mb-2">
+      <div className="flex items-center gap-3 mb-4">
         <button onClick={() => setShowDispatch(true)}
           className="px-4 py-2 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white text-sm font-medium rounded-xl shadow-lg shadow-cyan-500/10 transition-all active:scale-95 shrink-0">
           ⚡ Dispatch
@@ -189,9 +190,9 @@ export default function Dashboard() {
       {/* Quick Actions — split into two distinct intents:
           (1) Top: live stat cards (carry data, drill-in on click)
           (2) Bottom: pure nav rail (no number, icon + label)
-          Previously these were mixed in one row of 6, mixing data cells
-          ("0/0", "--", "0") with placeholder arrows ("→ Messages").
-          Users couldn't tell which were stats vs which were navigation. */}
+          Round 24 — wrap both in a labelled block so the rhythm reads as
+          "here are the main jumps" instead of two disconnected strips. */}
+      <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 mb-2">Quick navigation</div>
       <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
         {(() => {
           // Build breakdown popover content per card. Pure data — pure CSS
@@ -314,9 +315,11 @@ export default function Dashboard() {
                 <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${
                   t.status === 'replied' ? 'bg-purple-400' : t.status === 'running' ? 'bg-green-400' : t.status === 'failed' ? 'bg-red-400' : 'bg-blue-400'
                 }`} />
-                <span className="text-blue-400 shrink-0">{t.from_name || '?'}</span>
+                {t.from_name && <AliasAvatar alias={t.from_name} size={14} />}
+                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.from_name || '?'}</span>
                 <span className="text-gray-600">&rarr;</span>
-                <span className="text-cyan-400 shrink-0">{t.to_name || '?'}</span>
+                {t.to_name && <AliasAvatar alias={t.to_name} size={14} />}
+                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.to_name || '?'}</span>
                 <span className="text-gray-500 truncate flex-1">{t.content?.slice(0, 40) || '--'}</span>
                 <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] border ${
                   t.status === 'replied' ? 'text-purple-300 border-purple-500/20' : t.status === 'failed' ? 'text-red-300 border-red-500/20' : 'text-gray-500 border-gray-700/30'