@sleep2agi/agent-network-dashboard 0.4.5-preview.5 → 0.4.5-preview.50

package/app/logs/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useNetworkId } from '../lib/network-context';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface AuditLog {
   id: string;
@@ -26,6 +27,18 @@ const ACTION_COLORS: Record<string, string> = {
   send_task: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
 };
 
+/** 2px left-rail stripe color per audit action — reuses the r32 server-logs
+ *  pattern so failed logins / token rotations spike out of a wall of
+ *  registers and logins without users reading every chip. Inline hex
+ *  prevents Tailwind v4 from purging dynamic class names. */
+const ACTION_STRIPE: Record<string, string> = {
+  register: '#4ade80',
+  login: '#60a5fa',
+  login_failed: '#ef4444',
+  create_network: '#a78bfa',
+  send_task: '#22d3ee',
+};
+
 export default function LogsPage() {
   const { networkId } = useNetworkId();
   const [logs, setLogs] = useState<AuditLog[]>([]);
@@ -64,25 +77,52 @@ export default function LogsPage() {
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="flex items-center gap-4 mb-6">
-        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Logs</h1>
-        <span className="text-xs bg-gray-900/30 text-gray-400 px-2 py-0.5 rounded-full border border-gray-800/30">
-          Audit Log
-        </span>
+        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Audit Log</h1>
+        {logs.length > 0 && (
+          <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30">
+            {logs.length}
+          </span>
+        )}
       </div>
 
-      <div className="flex flex-wrap gap-3 mb-6">
-        <select
-          value={filterAction}
-          onChange={e => setFilterAction(e.target.value)}
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500/50 focus:outline-none"
-        >
-          <option value="">All actions</option>
-          <option value="register">register</option>
-          <option value="login">login</option>
-          <option value="login_failed">login_failed</option>
-          <option value="create_network">create_network</option>
-          <option value="send_task">send_task</option>
-        </select>
+      {/* Action filter chips (round 43) — same chip pattern as Tasks
+          status tabs / Overview agent filter. Each chip carries its
+          ACTION_STRIPE dot so the visual key matches the per-row left
+          rail. Counts come from the currently loaded log set. */}
+      <div className="mb-6 flex flex-wrap items-center gap-1 anet-tabstrip-wrap overflow-x-auto sm:overflow-x-visible">
+        {(() => {
+          const counts: Record<string, number> = {};
+          logs.forEach(l => { counts[l.action] = (counts[l.action] || 0) + 1; });
+          const chips: { key: string; label: string; dot?: string }[] = [
+            { key: '',                label: 'All' },
+            { key: 'login',           label: 'login',           dot: ACTION_STRIPE.login },
+            { key: 'login_failed',    label: 'login_failed',    dot: ACTION_STRIPE.login_failed },
+            { key: 'register',        label: 'register',        dot: ACTION_STRIPE.register },
+            { key: 'create_network',  label: 'create_network',  dot: ACTION_STRIPE.create_network },
+            { key: 'send_task',       label: 'send_task',       dot: ACTION_STRIPE.send_task },
+          ];
+          return chips.map(c => {
+            const count = c.key === '' ? logs.length : counts[c.key] || 0;
+            const isActive = filterAction === c.key;
+            return (
+              <button
+                key={c.key || 'all'}
+                type="button"
+                onClick={() => setFilterAction(c.key)}
+                disabled={count === 0 && c.key !== ''}
+                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 whitespace-nowrap ${
+                  isActive
+                    ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                    : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                }`}
+              >
+                {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                <span>{c.label}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'text-cyan-400' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          });
+        })()}
       </div>
 
       {error && (() => {
@@ -125,13 +165,23 @@ export default function LogsPage() {
         <EmptyState variant="logs" />
       ) : (
         <div className="space-y-2">
-          {logs.map(log => (
-            <div key={log.id} className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 hover:border-[#3a3a5a] transition-colors">
+          {logs.map(log => {
+            const userName = log.username || log.user_id;
+            return (
+            <div key={log.id} className="relative bg-[#111128] border border-[#2a2a4a] rounded-lg pl-4 pr-4 py-3 hover:border-[#3a3a5a] transition-colors overflow-hidden">
+              {/* 2px left rail per action (round 33) — failed logins, token
+                  rotations spike out of a wall of register/login rows. */}
+              <span
+                aria-hidden
+                className="absolute left-0 top-0 bottom-0 w-0.5"
+                style={{ backgroundColor: ACTION_STRIPE[log.action] || 'transparent' }}
+              />
               <div className="flex flex-wrap items-center gap-2 mb-1">
                 <span className={`text-xs px-2 py-0.5 rounded-md border ${ACTION_COLORS[log.action] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                   {log.action}
                 </span>
-                <span className="text-sm text-blue-400 font-medium">{log.username || log.user_id}</span>
+                {userName && <AliasAvatar alias={userName} size={16} />}
+                <span className="text-sm text-gray-200 font-medium">{userName}</span>
                 {log.target_type && (
                   <>
                     <span className="text-xs text-gray-600">&rarr;</span>
@@ -143,7 +193,8 @@ export default function LogsPage() {
               {log.detail && <div className="text-xs text-gray-500">{log.detail}</div>}
               {log.ip && log.ip !== 'unknown' && <div className="text-[10px] text-gray-700">IP: {log.ip}</div>}
             </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

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,26 +41,6 @@ function bubbleVariant(message: MessageItem) {
   return 'incoming';
 }
 
-/** Stable color hash for sender avatars — same alias always gets the same
- *  ring, so users learn the colors over time. 8 hues, evenly spread. */
-const AVATAR_HUES = [180, 200, 220, 270, 300, 330, 30, 90];
-function avatarColors(alias: string): { bg: string; ring: string; text: string } {
-  let h = 0;
-  for (let i = 0; i < alias.length; i++) h = (h * 31 + alias.charCodeAt(i)) >>> 0;
-  const hue = AVATAR_HUES[h % AVATAR_HUES.length];
-  return {
-    bg: `hsl(${hue} 55% 22%)`,
-    ring: `hsl(${hue} 60% 45%)`,
-    text: `hsl(${hue} 80% 78%)`,
-  };
-}
-function avatarInitial(alias?: string): string {
-  if (!alias) return '·';
-  // Strip non-letter prefix, take first non-ws char; handle CJK directly.
-  const ch = alias.trim().match(/[\p{L}\p{N}]/u)?.[0] || alias.trim()[0] || '·';
-  return ch.toUpperCase();
-}
-
 /** 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) {
@@ -225,16 +206,19 @@ export default function MessagesPage() {
             <div key={ci} className="bg-[#111128] border border-[#2a2a4a] rounded-xl overflow-hidden">
               <div className="px-4 py-2.5 border-b border-[#2a2a4a] flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-cyan-300 font-medium">{conv.participants[0]}</span>
+                  <AliasAvatar alias={conv.participants[0]} size={16} />
+                  <span className="text-sm text-gray-200 font-medium">{conv.participants[0]}</span>
                   <span className="text-gray-600 text-xs">↔</span>
-                  <span className="text-sm text-green-300 font-medium">{conv.participants[1]}</span>
+                  <AliasAvatar alias={conv.participants[1]} size={16} />
+                  <span className="text-sm text-gray-200 font-medium">{conv.participants[1]}</span>
                 </div>
                 <span className="text-[10px] text-gray-600">{conv.messages.length} messages</span>
               </div>
               <div className="px-4 py-2 space-y-2 max-h-64 overflow-y-auto">
                 {conv.messages.map(m => (
                   <div key={m.id} className="flex items-start gap-2 text-xs py-1">
-                    <span className={`shrink-0 font-medium ${m.from_alias === conv.participants[0] ? 'text-cyan-400' : 'text-green-400'}`}>{m.from_alias}</span>
+                    {m.from_alias && <AliasAvatar alias={m.from_alias} size={14} />}
+                    <span className="shrink-0 font-medium text-gray-200">{m.from_alias}</span>
                     <span className="text-gray-400 flex-1">{m.content?.slice(0, 120) || '--'}</span>
                     <span className="text-[9px] text-gray-600 shrink-0">{timeAgo(m.created_at || '')}</span>
                   </div>
@@ -259,7 +243,6 @@ export default function MessagesPage() {
               && (previous.from_alias || '') === (message.from_alias || '')
               && (previous.to_alias || '') === (message.to_alias || '');
             const fromAlias = message.from_alias || '?';
-            const avColors = avatarColors(fromAlias);
 
             return (
               <div key={message.id}>
@@ -293,15 +276,7 @@ export default function MessagesPage() {
                   <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 && (
-                        <div
-                          className="flex h-8 w-8 items-center justify-center rounded-full border text-[11px] font-semibold"
-                          style={{ backgroundColor: avColors.bg, borderColor: avColors.ring, color: avColors.text }}
-                          title={fromAlias}
-                        >
-                          {avatarInitial(fromAlias)}
-                        </div>
-                      )}
+                      {!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'

package/app/node/page.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import { TaskChatPanel } from '../components/TaskChatPanel';
 import { timeAgo } from '../components/utils';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface SessionDetail {
   resume_id: string;
@@ -150,15 +151,23 @@ function NodeDetailContent() {
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      {/* Header */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link href="/nodes" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Nodes</Link>
-        <div className="flex items-center gap-3">
-          <span className={`inline-block w-3 h-3 rounded-full ${
-            sse > 0 ? (session?.status === 'working' ? 'bg-green-500 animate-pulse' : 'bg-emerald-400') : 'bg-gray-500'
-          }`} />
-          <h1 className="text-2xl font-bold text-white">{alias}</h1>
-          <span className={`text-sm ${statusColor}`}>{session?.status || 'unknown'}</span>
+      {/* Header — round 40: avatar joins the alias for cross-page hue
+          consistency; agent type lives in a subtitle so users know what
+          kind of node they're looking at. */}
+      <div className="flex items-center gap-3 mb-6 lg:ml-0 ml-10">
+        <Link href="/nodes" className="text-gray-500 hover:text-gray-300 text-sm shrink-0">&larr; Nodes</Link>
+        <AliasAvatar alias={alias} size={32} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h1 className="text-xl sm:text-2xl font-bold text-white truncate">{alias}</h1>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${
+              sse > 0 ? (session?.status === 'working' ? 'bg-green-500 animate-pulse' : 'bg-emerald-400') : 'bg-gray-500'
+            }`} />
+            <span className={`text-[10px] uppercase tracking-wide font-semibold ${statusColor}`}>{session?.status || 'unknown'}</span>
+          </div>
+          {session?.agent && (
+            <div className="text-xs text-gray-500 truncate">{session.agent}{session.server ? <> <span className="text-gray-700 mx-1">·</span> {session.server}</> : null}</div>
+          )}
         </div>
       </div>
 
@@ -190,14 +199,22 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
 
   return (
     <div className="bg-[#0d0d1a] border border-[#2a2a4a] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
-      {/* Tab bar */}
+      {/* Tab bar — round 40: emoji icons (💬 📋 📊) replaced with stroke
+          SVG to drop the "AI generated" tell. */}
       <div className="flex border-b border-[#2a2a4a] bg-[#0a0a15] shrink-0">
-        {(['chat', 'events', 'info'] as const).map(t => (
-          <button key={t} onClick={() => setTab(t)}
-            className={`px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
-              tab === t ? 'border-cyan-400 text-cyan-300' : 'border-transparent text-gray-500 hover:text-gray-300'
+        {([
+          { id: 'chat',   label: 'Chat',   icon: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' },
+          { id: 'events', label: 'Events', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
+          { id: 'info',   label: 'Info',   icon: 'M12 21a9 9 0 100-18 9 9 0 000 18z M12 8h.01 M11 12h1v4h1' },
+        ] as const).map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)}
+            className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
+              tab === t.id ? 'border-cyan-400 text-cyan-300' : 'border-transparent text-gray-500 hover:text-gray-300'
             }`}>
-            {t === 'chat' ? '💬 Chat' : t === 'events' ? '📋 Events' : '📊 Info'}
+            <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d={t.icon} />
+            </svg>
+            <span>{t.label}</span>
           </button>
         ))}
       </div>
@@ -299,13 +316,16 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   );
 }
 
-const EVENT_COLORS: Record<string, { dot: string; line: string; icon: string }> = {
-  delivered: { dot: 'bg-blue-400', line: 'bg-blue-500/30', icon: '📬' },
-  acked: { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', icon: '✅' },
-  running: { dot: 'bg-green-400', line: 'bg-green-500/30', icon: '⚡' },
-  replied: { dot: 'bg-purple-400', line: 'bg-purple-500/30', icon: '💬' },
-  failed: { dot: 'bg-red-400', line: 'bg-red-500/30', icon: '❌' },
-  created: { dot: 'bg-gray-400', line: 'bg-gray-500/30', icon: '📝' },
+/** Round 59: emoji icons replaced with stroke SVG paths to drop the
+ *  "AI generated" tell. Each path is sized to fit inside the 18px
+ *  colored event dot. */
+const EVENT_COLORS: Record<string, { dot: string; line: string; path: string }> = {
+  delivered: { dot: 'bg-blue-400',   line: 'bg-blue-500/30',   path: 'M12 5v14 M5 12l7 7 7-7' },                   // down arrow
+  acked:     { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', path: 'M20 6 9 17l-5-5' },                          // check
+  running:   { dot: 'bg-green-400',  line: 'bg-green-500/30',  path: 'M13 2L4 14h6l-1 8 10-12h-6l1-8z' },         // bolt
+  replied:   { dot: 'bg-purple-400', line: 'bg-purple-500/30', path: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' }, // chat bubble
+  failed:    { dot: 'bg-red-400',    line: 'bg-red-500/30',    path: 'M18 6 6 18 M6 6l12 12' },                    // X
+  created:   { dot: 'bg-gray-400',   line: 'bg-gray-500/30',   path: 'M12 5v14 M5 12h14' },                       // plus
 };
 
 function EventsTimeline({ events, loading }: { events: Array<{ id: number; event_type: string; from_status: string; to_status: string; detail: string; created_at: string; task_id?: string }>; loading: boolean }) {
@@ -334,9 +354,12 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
               const cfg = EVENT_COLORS[e.to_status] || EVENT_COLORS.created;
               return (
                 <div key={e.id} className="relative pb-4 last:pb-0">
-                  {/* Dot on line */}
-                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center text-[9px] z-10 border-2 border-[#111128]`}>
-                    {cfg.icon.length <= 2 ? cfg.icon : ''}
+                  {/* Dot on line — round 59: emoji icons replaced with
+                      a 10px stroke SVG path matching event type. */}
+                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#111128]`}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0a0a15" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                      <path d={cfg.path} />
+                    </svg>
                   </div>
                   {/* Content */}
                   <div className="ml-2">

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,8 @@ 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 { STATUS_DOT_HEX, STATUS_CHIP_CLASS } from './lib/status';
 import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
@@ -40,6 +42,7 @@ export default function Dashboard() {
   const cmd = useCommandCenter();
   const [showDispatch, setShowDispatch] = useState(false);
   const [inbox, setInbox] = useState<InboxMessage[]>([]);
+  const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
   const { mutate } = useSWRConfig();
 
   // SSE: instant revalidation on CommHub events
@@ -120,7 +123,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 +192,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
@@ -311,15 +314,18 @@ export default function Dashboard() {
           <div className="space-y-2 max-h-40 overflow-y-auto">
             {tasks.slice(0, 5).map((t: { task_id: string; from_name: string; to_name: string; status: string; content: string; created_at: string }) => (
               <div key={t.task_id} className="flex items-center gap-2 text-xs">
-                <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>
+                <span
+                  className="w-1.5 h-1.5 rounded-full shrink-0"
+                  style={{ backgroundColor: STATUS_DOT_HEX[t.status] || '#6b7280' }}
+                />
+                {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'
+                  STATUS_CHIP_CLASS[t.status] || 'text-gray-500 border-gray-700/30'
                 }`}>{t.status}</span>
               </div>
             ))}
@@ -356,13 +362,67 @@ export default function Dashboard() {
 
       {sessions.length === 0 && !sessError ? (
         <EmptyState hint={sessHint} />
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
-          {sortedSessions.map(s => (
-            <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
-          ))}
-        </div>
-      )}
+      ) : (() => {
+        const counts = {
+          all: sortedSessions.length,
+          working: sortedSessions.filter(s => isOnline(s) && s.status === 'working').length,
+          idle: sortedSessions.filter(s => isOnline(s) && s.status !== 'working').length,
+          offline: sortedSessions.filter(s => !isOnline(s)).length,
+        };
+        const filtered = sortedSessions.filter(s => {
+          if (agentFilter === 'all') return true;
+          if (agentFilter === 'offline') return !isOnline(s);
+          if (agentFilter === 'working') return isOnline(s) && s.status === 'working';
+          if (agentFilter === 'idle') return isOnline(s) && s.status !== 'working';
+          return true;
+        });
+        // Filter chip color keyed to status (round 34): working=green, idle=cyan,
+        // offline=gray, all=neutral. Inline hex dots avoid Tailwind v4 purge.
+        const chips: { key: typeof agentFilter; label: string; dot?: string }[] = [
+          { key: 'all',     label: 'All' },
+          { key: 'working', label: 'Working', dot: '#4ade80' },
+          { key: 'idle',    label: 'Idle',    dot: '#22d3ee' },
+          { key: 'offline', label: 'Offline', dot: '#6b7280' },
+        ];
+        return (
+          <>
+            <div className="mb-3 flex flex-wrap items-center gap-1">
+              {chips.map(c => (
+                <button
+                  key={c.key}
+                  type="button"
+                  onClick={() => setAgentFilter(c.key)}
+                  disabled={counts[c.key] === 0 && c.key !== 'all'}
+                  className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
+                    agentFilter === c.key
+                      ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                      : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                  }`}
+                >
+                  {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                  <span>{c.label}</span>
+                  <span className={`text-[10px] tabular-nums ${agentFilter === c.key ? 'text-cyan-400' : 'text-gray-600'}`}>{counts[c.key]}</span>
+                </button>
+              ))}
+            </div>
+            {/* Round 48: previous breakpoints had `lg:grid-cols-2 xl:grid-cols-3`
+                which kept lg (1024-1279px) at only 2 columns even though
+                each AgentCard is fine ≥260px wide. With the sidebar (208px),
+                main area at lg is ~816px so 3 cols at ~272px each fits.
+                xl breakpoint auto-inherits lg=3 cols; 2xl bumps to 4. */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
+              {filtered.map(s => (
+                <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
+              ))}
+            </div>
+            {filtered.length === 0 && (
+              <div className="mt-4 text-center text-xs text-gray-600">
+                No agents match "{agentFilter}" — <button onClick={() => setAgentFilter('all')} className="underline hover:text-gray-400">Show all</button>
+              </div>
+            )}
+          </>
+        );
+      })()}
 
       <InboxPanel messages={inbox} />