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

package/app/components/CommandPalette.tsx

@@ -22,6 +22,9 @@ interface Command {
   group: 'Recents' | 'Agents' | 'Tasks' | 'Actions' | 'Navigate';
   icon: React.ReactNode;
   perform: (router: ReturnType<typeof useRouter>) => void;
+  /** Matched char indices (set by fuzzy filter for highlight render). */
+  _titleHi?: number[];
+  _hintHi?: number[];
 }
 
 interface SessionRow { alias?: string; status?: string; agent?: string }
@@ -46,6 +49,49 @@ function pushRecent(id: string) {
   } catch {}
 }
 
+/** Fuzzy match: returns score + matched char positions in `hay`. -1 score
+ *  means no match. Round 18 introduced fuzzy; round 20 returns indices so
+ *  the UI can highlight matched chars (Linear / Raycast style). */
+interface FuzzyResult { score: number; indices: number[]; }
+function fuzzyMatch(hay: string, needle: string): FuzzyResult {
+  if (!needle) return { score: 0, indices: [] };
+  const H = hay.toLowerCase();
+  const N = needle.toLowerCase();
+  let hi = 0, ni = 0, score = 0, streak = 0;
+  const indices: number[] = [];
+  while (hi < H.length && ni < N.length) {
+    if (H[hi] === N[ni]) {
+      score += 2 + streak;
+      streak++;
+      indices.push(hi);
+      if (hi === 0 || /[\s·:_/-]/.test(H[hi - 1])) score += 4;
+      ni++;
+    } else {
+      streak = 0;
+    }
+    hi++;
+  }
+  if (ni < N.length) return { score: -1, indices: [] };
+  return { score: score - Math.max(0, H.length - N.length) * 0.05, indices };
+}
+
+/** Renders `text` with the chars at `indices` wrapped in <mark>. Handles
+ *  unicode (Chinese aliases, emoji) by iterating code points via Array.from. */
+function Highlight({ text, indices }: { text: string; indices: number[] }) {
+  if (!indices.length) return <>{text}</>;
+  const set = new Set(indices);
+  const chars = Array.from(text);
+  return (
+    <>
+      {chars.map((ch, i) =>
+        set.has(i)
+          ? <mark key={i} className="anet-cmdk-mark">{ch}</mark>
+          : <span key={i}>{ch}</span>
+      )}
+    </>
+  );
+}
+
 function NavIcon({ d }: { d: string }) {
   return (
     <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
@@ -107,6 +153,12 @@ const COMMANDS: Command[] = [
       try { sessionStorage.removeItem('anet_v3_auth'); } catch {}
       window.location.assign('/login');
     } },
+  { id: 'act-help', title: 'Show keyboard shortcuts', hint: 'press ? — works on mobile too', group: 'Actions',
+    icon: <NavIcon d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />,
+    perform: () => {
+      // Dispatch synthetic `?` keydown so HelpOverlay's global listener opens
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: '?' }));
+    } },
 ];
 
 export function CommandPalette() {
@@ -204,12 +256,29 @@ export function CommandPalette() {
       // until user actually types — keeps the empty-search list short).
       return [...recentCmds, ...COMMANDS.filter(c => !restIds.has(c.id))];
     }
-    const q = query.toLowerCase();
-    return pool.filter(c =>
-      c.title.toLowerCase().includes(q) ||
-      c.hint?.toLowerCase().includes(q) ||
-      c.id.toLowerCase().includes(q)
-    );
+    // Fuzzy match — `stg` matches `Settings`, `taska` matches `Task all-time`.
+    // Score against title (weight 1.0), hint (0.6), id (0.3). Drop unmatched.
+    // Round 20: keep matched indices for title + hint so we can highlight.
+    const scored = pool
+      .map(c => {
+        const mt = fuzzyMatch(c.title, query);
+        const mh = c.hint ? fuzzyMatch(c.hint, query) : { score: -1, indices: [] };
+        const mi = fuzzyMatch(c.id, query);
+        const best = Math.max(
+          mt.score >= 0 ? mt.score * 1.0 : -Infinity,
+          mh.score >= 0 ? mh.score * 0.6 : -Infinity,
+          mi.score >= 0 ? mi.score * 0.3 : -Infinity,
+        );
+        return {
+          c,
+          score: best,
+          _titleHi: mt.score >= 0 ? mt.indices : [],
+          _hintHi: mh.score >= 0 ? mh.indices : [],
+        };
+      })
+      .filter(x => x.score > -Infinity);
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map(x => ({ ...x.c, _titleHi: x._titleHi, _hintHi: x._hintHi }));
   }, [query, recentIds, dynamic]);
 
   // Clamp selected when results shrink
@@ -290,8 +359,14 @@ export function CommandPalette() {
                     >
                       <span className={isActive ? 'text-cyan-400' : 'text-gray-500'}>{c.icon}</span>
                       <span className="flex-1 min-w-0">
-                        <span className="block truncate">{c.title}</span>
-                        {c.hint && <span className="block text-[11px] text-gray-600 truncate">{c.hint}</span>}
+                        <span className="block truncate">
+                          <Highlight text={c.title} indices={c._titleHi || []} />
+                        </span>
+                        {c.hint && (
+                          <span className="block text-[11px] text-gray-600 truncate">
+                            <Highlight text={c.hint} indices={c._hintHi || []} />
+                          </span>
+                        )}
                       </span>
                       {isActive && <span className="text-[10px] text-gray-500">↵</span>}
                     </button>

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'