@sleep2agi/agent-network-dashboard 0.4.5-preview.2 → 0.4.5-preview.20

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';
@@ -40,6 +41,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 +122,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 +191,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 +316,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'
@@ -356,13 +360,62 @@ 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>
+            <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">
+              {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} />
 

package/app/server-logs/page.tsx

@@ -23,6 +23,30 @@ const LEVEL_BADGE: Record<LogLine['level'], string> = {
   error: 'bg-red-500/10 text-red-300 border-red-500/30',
 };
 
+/** Left-rail strip color per log level — gives the eye a vertical guide
+ *  when scanning long log walls. Plain hex so Tailwind purge can't drop it. */
+const LEVEL_STRIPE: Record<LogLine['level'], string> = {
+  log: 'transparent',
+  info: '#22d3ee',
+  warn: '#f59e0b',
+  error: '#ef4444',
+};
+
+/** Highlight search-matched substring inside a log line. Case-insensitive
+ *  first-match wrap; mark inherits color so log-level coloring stays. */
+function highlightSearch(line: string, q: string) {
+  if (!q) return line;
+  const idx = line.toLowerCase().indexOf(q.toLowerCase());
+  if (idx < 0) return line;
+  return (
+    <>
+      {line.slice(0, idx)}
+      <mark className="bg-yellow-500/30 text-yellow-100 rounded-sm px-0.5">{line.slice(idx, idx + q.length)}</mark>
+      {line.slice(idx + q.length)}
+    </>
+  );
+}
+
 function shortTime(iso: string) {
   try {
     const d = new Date(iso);
@@ -182,12 +206,22 @@ export default function ServerLogsPage() {
         ) : (
           <div className="divide-y divide-[#0d0d18] max-h-[calc(100vh-260px)] overflow-y-auto">
             {filtered.map((l, i) => (
-              <div key={`${l.ts}-${i}`} className="px-3 py-1 hover:bg-[#0a0a14] flex gap-3">
-                <span className="text-gray-600 shrink-0 w-[110px] text-[10px]">{shortTime(l.ts)}</span>
+              <div key={`${l.ts}-${i}`} className="relative pl-3 pr-3 py-1 hover:bg-[#0a0a14] flex gap-3">
+                {/* Round 32: 2px left rail keyed to level. Makes warn/error
+                    spike visible in a wall of `log` lines without users having
+                    to read the level chip on every row. */}
+                <span
+                  aria-hidden
+                  className="absolute left-0 top-0 bottom-0 w-0.5"
+                  style={{ backgroundColor: LEVEL_STRIPE[l.level] }}
+                />
+                <span className="text-gray-600 shrink-0 w-[100px] text-[10px] tabular-nums">{shortTime(l.ts)}</span>
                 <span className={`shrink-0 px-1.5 rounded border text-[9px] uppercase ${LEVEL_BADGE[l.level]}`}>
                   {l.level}
                 </span>
-                <span className={`break-all whitespace-pre-wrap ${LEVEL_COLOR[l.level]}`}>{l.line}</span>
+                <span className={`break-all whitespace-pre-wrap ${LEVEL_COLOR[l.level]}`}>
+                  {highlightSearch(l.line, search)}
+                </span>
               </div>
             ))}
           </div>

package/app/settings/networks/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { timeAgo } from '../../components/utils';
 import { EmptyState } from '../../components/EmptyState';
+import { AliasAvatar } from '../../components/AliasAvatar';
 import useSWR from 'swr';
 
 const fetcher = (url: string) => fetch(url).then(r => r.json());
@@ -123,7 +124,12 @@ export default function NetworksPage() {
 
         {/* List */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-3">My Networks</h2>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-semibold text-gray-300">My Networks</h2>
+            {networks.length > 0 && (
+              <span className="text-[10px] text-gray-600 uppercase tracking-wide">{networks.length} total</span>
+            )}
+          </div>
           {loading ? (
             <div className="animate-pulse space-y-2">{[1,2].map(i => <div key={i} className="h-14 bg-gray-800/20 rounded" />)}</div>
           ) : networks.length === 0 ? (
@@ -136,11 +142,14 @@ export default function NetworksPage() {
             <div className="space-y-3">
               {networks.map(n => (
                 <div key={n.network_id} className="bg-[#0a0a15] rounded-lg px-4 py-3 border border-[#1a1a2a]">
-                  <div className="flex items-center justify-between">
-                    <div className="min-w-0">
-                      <div className="text-sm text-white font-medium">{n.network_name}</div>
-                      <div className="text-[10px] text-gray-500">{n.network_id} · {timeAgo(n.created_at)}</div>
-                      {n.description && <div className="text-xs text-gray-400 mt-1">{n.description}</div>}
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start gap-3 min-w-0">
+                      <AliasAvatar alias={n.network_name} size={28} />
+                      <div className="min-w-0">
+                        <div className="text-sm text-white font-medium truncate">{n.network_name}</div>
+                        <div className="text-[10px] text-gray-500 font-mono truncate" title={n.network_id}>{n.network_id} · {timeAgo(n.created_at)}</div>
+                        {n.description && <div className="text-xs text-gray-400 mt-1">{n.description}</div>}
+                      </div>
                     </div>
                     <div className="flex gap-2 shrink-0">
                       <button onClick={() => {
@@ -169,14 +178,20 @@ export default function NetworksPage() {
                       {(members[n.network_id] || []).length === 0 ? (
                         <div className="text-[10px] text-gray-600">No members or V3 auth required</div>
                       ) : (
-                        (members[n.network_id] || []).map(m => (
-                          <div key={m.user_id} className="flex items-center justify-between text-xs py-1">
-                            <span className="text-gray-300">{m.username || m.display_name}</span>
-                            <span className={`px-1.5 py-0.5 rounded border text-[10px] ${
+                        (members[n.network_id] || []).map(m => {
+                          const name = m.username || m.display_name || '?';
+                          return (
+                          <div key={m.user_id} className="flex items-center gap-2 justify-between text-xs py-1">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <AliasAvatar alias={name} size={16} />
+                              <span className="text-gray-300 truncate">{name}</span>
+                            </div>
+                            <span className={`px-1.5 py-0.5 rounded border text-[10px] shrink-0 ${
                               m.role === 'owner' ? 'text-yellow-300 border-yellow-500/20' : 'text-gray-400 border-gray-600/20'
                             }`}>{m.role}</span>
                           </div>
-                        ))
+                          );
+                        })
                       )}
 
                       {/* Invite */}
@@ -196,8 +211,17 @@ export default function NetworksPage() {
                         </div>
                         {inviteCode && (
                           <div className="mt-2 bg-green-500/5 border border-green-500/20 rounded px-3 py-2">
-                            <div className="text-[10px] text-green-400 mb-1">Invite code:</div>
-                            <code className="text-xs text-green-300 select-all">{inviteCode}</code>
+                            <div className="flex items-center justify-between mb-1">
+                              <div className="text-[10px] text-green-400 uppercase tracking-wide">Invite code</div>
+                              <button
+                                type="button"
+                                onClick={() => { navigator.clipboard?.writeText(inviteCode).catch(() => {}); }}
+                                className="text-[10px] text-green-300 hover:text-green-200 px-1.5 py-0.5 rounded border border-green-500/20 hover:bg-green-500/10"
+                              >
+                                Copy
+                              </button>
+                            </div>
+                            <code className="text-xs text-green-300 select-all break-all">{inviteCode}</code>
                           </div>
                         )}
                       </div>

package/app/settings/page.tsx

@@ -18,12 +18,31 @@ export default function SettingsPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <h1 className="text-2xl font-bold text-white mb-6 lg:ml-0 ml-10">Settings</h1>
+      <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Settings</h1>
 
-      <div className="max-w-2xl space-y-8">
+      {/* Section anchor nav (round 28) — jump to a group instead of scrolling
+          through the whole page. Mirrors the section headers below; pages
+          with 7+ cards benefit from a visible table-of-contents. */}
+      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+        {[
+          { href: '#connection', label: 'Connection' },
+          { href: '#account',    label: 'Account' },
+          { href: '#resources',  label: 'Resources' },
+        ].map(a => (
+          <a key={a.href} href={a.href}
+            className="rounded-md px-2.5 py-1 text-gray-500 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            {a.label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="max-w-2xl space-y-10">
         {/* ── Group: Connection ─────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Connection</div>
+        <div id="connection" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Connection</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* CommHub Connection */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -103,8 +122,11 @@ export default function SettingsPage() {
         </div>
 
         {/* ── Group: Account ────────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Account</div>
+        <div id="account" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Account</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* License */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -232,8 +254,11 @@ export default function SettingsPage() {
         </div>
 
         {/* ── Group: Resources ──────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Resources</div>
+        <div id="resources" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Resources</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* API Tokens + Networks */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

package/app/tasks/page.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useNetworkId } from '../lib/network-context';
 import { TaskDrawer } from '../components/TaskDrawer';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface Task {
   task_id: string;
@@ -178,22 +179,37 @@ function TasksContent() {
       </div>
       </div>
 
-      {/* From/To Filters */}
-      <div className="flex flex-wrap gap-3 mb-6">
-        <input
-          type="text"
-          value={filterFrom}
-          onChange={e => setFilterFrom(e.target.value)}
-          placeholder="From node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
-        <input
-          type="text"
-          value={filterTo}
-          onChange={e => setFilterTo(e.target.value)}
-          placeholder="To node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
+      {/* From/To Filters — same visual block as the status tabs above. */}
+      <div className="flex flex-wrap items-center gap-2 mb-6">
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">From</span>
+          <input
+            type="text"
+            value={filterFrom}
+            onChange={e => setFilterFrom(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">To</span>
+          <input
+            type="text"
+            value={filterTo}
+            onChange={e => setFilterTo(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        {(filterStatus || filterFrom || filterTo) && (
+          <button
+            type="button"
+            onClick={() => { setFilterStatus(''); setFilterFrom(''); setFilterTo(''); }}
+            className="rounded-lg border border-gray-700 px-2.5 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:border-gray-600"
+          >
+            Clear filters
+          </button>
+        )}
       </div>
 
       {/* Status distribution */}
@@ -250,22 +266,39 @@ function TasksContent() {
             <div className="col-span-2">Time</div>
           </div>
 
-          {tasks.map(t => (
+          {tasks.map(t => {
+            const isOpen = expanded.has(t.task_id);
+            return (
             <div
               key={t.task_id}
-              className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 hover:border-[#3a3a5a] transition-colors cursor-pointer"
+              className={`anet-task-row group bg-[#111128] border rounded-lg px-4 py-3 transition-all duration-200 cursor-pointer ${
+                isOpen
+                  ? 'border-[#3a3a5a] shadow-lg shadow-black/20'
+                  : 'border-[#2a2a4a] hover:border-[#3a3a5a] hover:bg-[#15152e]'
+              }`}
               onClick={() => toggleExpand(t.task_id)}
+              role="button"
+              tabIndex={0}
+              aria-expanded={isOpen}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  toggleExpand(t.task_id);
+                }
+              }}
             >
               {/* Desktop row */}
               <div className="hidden sm:grid sm:grid-cols-12 gap-2 items-center">
                 <div className="col-span-1">
                   <span className={statusBadge(t.status)}>{t.status}</span>
                 </div>
-                <div className="col-span-2 text-sm text-blue-400 truncate" title={t.from_name}>
-                  {t.from_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.from_name}>
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.from_name || '--'}</span>
                 </div>
-                <div className="col-span-2 text-sm text-cyan-400 truncate" title={t.to_name}>
-                  {t.to_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.to_name}>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.to_name || '--'}</span>
                 </div>
                 <div className="col-span-4 text-xs text-gray-400 truncate" title={t.content}>
                   {t.content || '--'}
@@ -273,8 +306,15 @@ function TasksContent() {
                 <div className="col-span-1">
                   <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
                 </div>
-                <div className="col-span-2 text-xs text-gray-500" title={t.created_at}>
-                  {timeAgo(t.created_at)}
+                <div className="col-span-2 text-xs text-gray-500 flex items-center justify-between gap-2" title={t.created_at}>
+                  <span className="truncate">{timeAgo(t.created_at)}</span>
+                  <svg
+                    aria-hidden
+                    className={`shrink-0 text-gray-600 group-hover:text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                    width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                  </svg>
                 </div>
               </div>
 
@@ -282,20 +322,38 @@ function TasksContent() {
               <div className="sm:hidden space-y-2">
                 <div className="flex items-center justify-between">
                   <span className={statusBadge(t.status)}>{t.status}</span>
-                  <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
+                  <div className="flex items-center gap-2">
+                    <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
+                    <svg
+                      aria-hidden
+                      className={`text-gray-600 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                      width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                    </svg>
+                  </div>
                 </div>
-                <div className="text-xs text-gray-500">
-                  <span className="text-blue-400">{t.from_name || '--'}</span>
-                  <span className="text-gray-600 mx-1">&rarr;</span>
-                  <span className="text-cyan-400">{t.to_name || '--'}</span>
+                <div className="flex items-center gap-1.5 text-xs text-gray-300 min-w-0">
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.from_name || '--'}</span>
+                  <span className="text-gray-600">&rarr;</span>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.to_name || '--'}</span>
                 </div>
-                <div className="text-xs text-gray-400 truncate">{t.content || '--'}</div>
+                <div className="text-xs text-gray-400 line-clamp-1">{t.content || '--'}</div>
                 <div className="text-xs text-gray-600">{timeAgo(t.created_at)}</div>
               </div>
 
-              {/* Expanded detail */}
-              {expanded.has(t.task_id) && (
-                <div className="mt-3 pt-3 border-t border-[#2a2a4a] space-y-3">
+              {/* Expanded detail — always mounted; grid-rows 0fr↔1fr trick gives
+                  content-aware smooth max-height animation without measuring DOM. */}
+              <div
+                className={`grid transition-all duration-300 ease-out ${
+                  isOpen ? 'grid-rows-[1fr] opacity-100 mt-3' : 'grid-rows-[0fr] opacity-0'
+                }`}
+                aria-hidden={!isOpen}
+              >
+                <div className="overflow-hidden">
+                <div className="pt-3 border-t border-[#2a2a4a] space-y-3">
                   {t.content && (
                     <div>
                       <div className="text-xs text-gray-600 mb-1">Content</div>
@@ -357,9 +415,11 @@ function TasksContent() {
                     </div>
                   </div>
                 </div>
-              )}
+                </div>
+              </div>
             </div>
-          ))}
+            );
+          })}
         </div>
       )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.5-preview.2",
+  "version": "0.4.5-preview.20",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",