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

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.21",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/.next/server/chunks/ssr/[root-of-the-server]__0_jnflc._.js

@@ -1,3 +0,0 @@
-module.exports=[50227,(a,b,c)=>{b.exports=a.x("node:path",()=>require("node:path"))},43515,a=>{"use strict";a.s(["formatUptime",0,function(a){let b=Math.floor(a/3600),c=Math.floor(a%3600/60);return b>0?`${b}h ${c}m`:`${c}m`},"timeAgo",0,function(a){if(!a)return"--";let b=Math.floor((Date.now()-new Date(a.replace(" ","T")+"Z").getTime())/1e3);return b<60?`${b}s ago`:b<3600?`${Math.floor(b/60)}m ago`:b<86400?`${Math.floor(b/3600)}h ago`:`${Math.floor(b/86400)}d ago`}])},53142,a=>{"use strict";var b=a.i(87924),c=a.i(38246);let d={nodes:{title:"No agents in this network",sub:"Agent sessions will appear here once they connect to the CommHub."},tasks:{title:"No tasks yet",sub:"Tasks will appear here when agents send them via CommHub."},messages:{title:"No messages",sub:"Messages between agents will appear here."},logs:{title:"No audit logs",sub:"Events will appear here when users register, login, or perform actions."},tokens:{title:"No API tokens",sub:"Create one to authenticate CLI tools and external integrations."},networks:{title:"No networks found",sub:"Create one or sign in with V3 auth to see your networks."},generic:{title:"Nothing here yet",sub:"Data will appear here once available."}};function e({variant:a,size:c}){let d={width:c,height:c},f={fill:"none",stroke:"currentColor",strokeWidth:1.25,strokeLinecap:"round",strokeLinejoin:"round"};switch(a){case"nodes":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("circle",{cx:"32",cy:"14",r:"4"}),(0,b.jsx)("circle",{cx:"14",cy:"44",r:"4"}),(0,b.jsx)("circle",{cx:"50",cy:"44",r:"4"}),(0,b.jsx)("line",{x1:"32",y1:"18",x2:"14",y2:"40",strokeDasharray:"3 3",opacity:"0.6"}),(0,b.jsx)("line",{x1:"32",y1:"18",x2:"50",y2:"40",strokeDasharray:"3 3",opacity:"0.6"}),(0,b.jsx)("line",{x1:"18",y1:"44",x2:"46",y2:"44",strokeDasharray:"3 3",opacity:"0.6"})]})});case"tasks":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("rect",{x:"14",y:"14",width:"36",height:"6",rx:"1.5"}),(0,b.jsx)("rect",{x:"14",y:"26",width:"36",height:"6",rx:"1.5",opacity:"0.6"}),(0,b.jsx)("rect",{x:"14",y:"38",width:"36",height:"6",rx:"1.5",opacity:"0.35"})]})});case"messages":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("path",{d:"M14 18 h36 a3 3 0 0 1 3 3 v18 a3 3 0 0 1 -3 3 h-18 l-8 6 v-6 h-10 a3 3 0 0 1 -3 -3 v-18 a3 3 0 0 1 3 -3 z"}),(0,b.jsx)("line",{x1:"22",y1:"28",x2:"42",y2:"28",opacity:"0.5"}),(0,b.jsx)("line",{x1:"22",y1:"34",x2:"36",y2:"34",opacity:"0.5"})]})});case"logs":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("path",{d:"M18 12 h22 l8 8 v32 a2 2 0 0 1 -2 2 h-28 a2 2 0 0 1 -2 -2 v-38 a2 2 0 0 1 2 -2 z"}),(0,b.jsx)("path",{d:"M40 12 v8 h8",opacity:"0.6"}),(0,b.jsx)("line",{x1:"24",y1:"32",x2:"40",y2:"32",opacity:"0.55"}),(0,b.jsx)("line",{x1:"24",y1:"38",x2:"40",y2:"38",opacity:"0.4"}),(0,b.jsx)("line",{x1:"24",y1:"44",x2:"34",y2:"44",opacity:"0.25"})]})});case"tokens":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("circle",{cx:"22",cy:"32",r:"8"}),(0,b.jsx)("line",{x1:"30",y1:"32",x2:"54",y2:"32"}),(0,b.jsx)("line",{x1:"44",y1:"32",x2:"44",y2:"38"}),(0,b.jsx)("line",{x1:"50",y1:"32",x2:"50",y2:"40"})]})});case"networks":return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("circle",{cx:"32",cy:"32",r:"18"}),(0,b.jsx)("ellipse",{cx:"32",cy:"32",rx:"18",ry:"9",opacity:"0.55"}),(0,b.jsx)("line",{x1:"14",y1:"32",x2:"50",y2:"32",opacity:"0.55"}),(0,b.jsx)("line",{x1:"32",y1:"14",x2:"32",y2:"50",opacity:"0.55"})]})});default:return(0,b.jsx)("svg",{viewBox:"0 0 64 64",...d,children:(0,b.jsxs)("g",{...f,children:[(0,b.jsx)("circle",{cx:"32",cy:"32",r:"14",strokeDasharray:"3 3",opacity:"0.6"}),(0,b.jsx)("circle",{cx:"32",cy:"32",r:"3"})]})})}}function f({variant:a="generic",title:g,sub:h,cta:i,compact:j=!1}){let k=d[a],l=g??k.title,m=h??k.sub;return(0,b.jsxs)("div",{className:`text-center ${j?"py-8":"py-16"} px-4`,role:"status",children:[(0,b.jsx)("div",{className:"anet-empty-glyph inline-flex items-center justify-center mb-4 text-gray-500","aria-hidden":!0,children:(0,b.jsx)(e,{variant:a,size:j?40:56})}),(0,b.jsx)("h3",{className:`font-medium text-gray-300 ${j?"text-sm":"text-base"}`,children:l}),m&&(0,b.jsx)("p",{className:`text-gray-500 ${j?"text-xs mt-1.5":"text-sm mt-2"} max-w-md mx-auto leading-relaxed`,children:m}),i&&(0,b.jsx)("div",{className:"mt-4",children:i.href?(0,b.jsxs)(c.default,{href:i.href,className:"inline-flex items-center gap-1.5 text-sm font-medium text-cyan-400 hover:text-cyan-300",children:[i.label,(0,b.jsx)("span",{"aria-hidden":!0,children:"→"})]}):(0,b.jsxs)("button",{onClick:i.onClick,className:"inline-flex items-center gap-1.5 text-sm font-medium text-cyan-400 hover:text-cyan-300",children:[i.label,(0,b.jsx)("span",{"aria-hidden":!0,children:"→"})]})})]})}a.s(["EmptyState",0,f,"NodesEmptyState",0,function({hint:a}){return a?.global_count?(0,b.jsx)(f,{variant:"nodes",title:"No agents in this network",sub:`Server has ${a.global_count} nodes globally, but none are registered to the current network. Switch network or contact admin.`}):(0,b.jsx)(f,{variant:"nodes",cta:{label:"Run anet quickstart",href:"https://anet.sh"}})}])},44332,a=>{"use strict";var b=a.i(72596),c=a.i(22397);let d=async a=>{let b=await fetch(a);if(401===b.status)throw window.location.assign("/login"),Error("unauthorized");return b.json()},e={refreshInterval:5e3,dedupingInterval:3e3};function f(a,b){if(!b)return a;let c=a.includes("?")?"&":"?";return`${a}${c}network_id=${encodeURIComponent(b)}`}a.s(["useAnetConfig",0,function(){let{data:a}=(0,b.default)("/api/anet/config",d,{refreshInterval:3e4});return{config:a||null}},"useHealth",0,function(){let{data:a,error:c}=(0,b.default)("/api/hub/health",d,e);return{health:a||null,error:c}},"useLicense",0,function(){let{data:a,error:c}=(0,b.default)("/api/hub/license",d,{refreshInterval:6e4});return{license:a?.ok?a:null,error:c}},"useMessages",0,function(a=100){let{networkId:g}=(0,c.useNetworkId)(),{data:h,error:i,isLoading:j}=(0,b.default)(f(`/api/hub/messages?limit=${a}`,g),d,e);return{messages:h?.messages||[],error:i,isLoading:j}},"useSessions",0,function(){let{networkId:a}=(0,c.useNetworkId)(),{data:g,error:h,isLoading:i}=(0,b.default)(f("/api/hub/status",a),d,e);return{sessions:g?.sessions||[],hint:g?._hint,error:h,isLoading:i}},"useStats",0,function(){let{networkId:a}=(0,c.useNetworkId)(),{data:g,error:h}=(0,b.default)(f("/api/hub/stats",a),d,e);return{stats:g?.ok?g:null,error:h}},"useTasks",0,function(a){let{networkId:g}=(0,c.useNetworkId)(),h=new URLSearchParams({limit:"100",...a}).toString(),{data:i,error:j,isLoading:k}=(0,b.default)(f(`/api/hub/tasks?${h}`,g),d,e);return{tasks:i?.tasks||[],count:i?.count??0,source:i?.source,error:j,isLoading:k}}])},54826,(a,b,c)=>{},15299,(a,b,c)=>{a.r(54826);var d=a.r(72131),e=d&&"object"==typeof d&&"default"in d?d:{default:d},f="u">typeof process&&process.env&&!0,g=function(a){return"[object String]"===Object.prototype.toString.call(a)},h=function(){function a(a){var b=void 0===a?{}:a,c=b.name,d=void 0===c?"stylesheet":c,e=b.optimizeForSpeed,h=void 0===e?f:e;i(g(d),"`name` must be a string"),this._name=d,this._deletedRulePlaceholder="#"+d+"-deleted-rule____{}",i("boolean"==typeof h,"`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=h,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0,this._nonce=null}var b,c=a.prototype;return c.setOptimizeForSpeed=function(a){i("boolean"==typeof a,"`setOptimizeForSpeed` accepts a boolean"),i(0===this._rulesCount,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=a,this.inject()},c.isOptimizeForSpeed=function(){return this._optimizeForSpeed},c.inject=function(){var a=this;i(!this._injected,"sheet already injected"),this._injected=!0,this._serverSheet={cssRules:[],insertRule:function(b,c){return"number"==typeof c?a._serverSheet.cssRules[c]={cssText:b}:a._serverSheet.cssRules.push({cssText:b}),c},deleteRule:function(b){a._serverSheet.cssRules[b]=null}}},c.getSheetForTag=function(a){if(a.sheet)return a.sheet;for(var b=0;b<document.styleSheets.length;b++)if(document.styleSheets[b].ownerNode===a)return document.styleSheets[b]},c.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},c.insertRule=function(a,b){return i(g(a),"`insertRule` accepts only strings"),"number"!=typeof b&&(b=this._serverSheet.cssRules.length),this._serverSheet.insertRule(a,b),this._rulesCount++},c.replaceRule=function(a,b){this._optimizeForSpeed;var c=this._serverSheet;if(b.trim()||(b=this._deletedRulePlaceholder),!c.cssRules[a])return a;c.deleteRule(a);try{c.insertRule(b,a)}catch(d){f||console.warn("StyleSheet: illegal rule: \n\n"+b+"\n\nSee https://stackoverflow.com/q/20007992 for more info"),c.insertRule(this._deletedRulePlaceholder,a)}return a},c.deleteRule=function(a){this._serverSheet.deleteRule(a)},c.flush=function(){this._injected=!1,this._rulesCount=0,this._serverSheet.cssRules=[]},c.cssRules=function(){return this._serverSheet.cssRules},c.makeStyleTag=function(a,b,c){b&&i(g(b),"makeStyleTag accepts only strings as second parameter");var d=document.createElement("style");this._nonce&&d.setAttribute("nonce",this._nonce),d.type="text/css",d.setAttribute("data-"+a,""),b&&d.appendChild(document.createTextNode(b));var e=document.head||document.getElementsByTagName("head")[0];return c?e.insertBefore(d,c):e.appendChild(d),d},b=[{key:"length",get:function(){return this._rulesCount}}],function(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}(a.prototype,b),a}();function i(a,b){if(!a)throw Error("StyleSheet: "+b+".")}var j=function(a){for(var b=5381,c=a.length;c;)b=33*b^a.charCodeAt(--c);return b>>>0},k={};function l(a,b){if(!b)return"jsx-"+a;var c=String(b),d=a+c;return k[d]||(k[d]="jsx-"+j(a+"-"+c)),k[d]}function m(a,b){var c=a+(b=b.replace(/\/style/gi,"\\/style"));return k[c]||(k[c]=b.replace(/__jsx-style-dynamic-selector/g,a)),k[c]}var n=function(){function a(a){var b=void 0===a?{}:a,c=b.styleSheet,d=void 0===c?null:c,e=b.optimizeForSpeed,f=void 0!==e&&e;this._sheet=d||new h({name:"styled-jsx",optimizeForSpeed:f}),this._sheet.inject(),d&&"boolean"==typeof f&&(this._sheet.setOptimizeForSpeed(f),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var b=a.prototype;return b.add=function(a){var b=this;void 0===this._optimizeForSpeed&&(this._optimizeForSpeed=Array.isArray(a.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed());var c=this.getIdAndRules(a),d=c.styleId,e=c.rules;if(d in this._instancesCounts){this._instancesCounts[d]+=1;return}var f=e.map(function(a){return b._sheet.insertRule(a)}).filter(function(a){return -1!==a});this._indices[d]=f,this._instancesCounts[d]=1},b.remove=function(a){var b=this,c=this.getIdAndRules(a).styleId;if(function(a,b){if(!a)throw Error("StyleSheetRegistry: "+b+".")}(c in this._instancesCounts,"styleId: `"+c+"` not found"),this._instancesCounts[c]-=1,this._instancesCounts[c]<1){var d=this._fromServer&&this._fromServer[c];d?(d.parentNode.removeChild(d),delete this._fromServer[c]):(this._indices[c].forEach(function(a){return b._sheet.deleteRule(a)}),delete this._indices[c]),delete this._instancesCounts[c]}},b.update=function(a,b){this.add(b),this.remove(a)},b.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},b.cssRules=function(){var a=this,b=this._fromServer?Object.keys(this._fromServer).map(function(b){return[b,a._fromServer[b]]}):[],c=this._sheet.cssRules();return b.concat(Object.keys(this._indices).map(function(b){return[b,a._indices[b].map(function(a){return c[a].cssText}).join(a._optimizeForSpeed?"":"\n")]}).filter(function(a){return!!a[1]}))},b.styles=function(a){var b,c;return b=this.cssRules(),void 0===(c=a)&&(c={}),b.map(function(a){var b=a[0],d=a[1];return e.default.createElement("style",{id:"__"+b,key:"__"+b,nonce:c.nonce?c.nonce:void 0,dangerouslySetInnerHTML:{__html:d}})})},b.getIdAndRules=function(a){var b=a.children,c=a.dynamic,d=a.id;if(c){var e=l(d,c);return{styleId:e,rules:Array.isArray(b)?b.map(function(a){return m(e,a)}):[m(e,b)]}}return{styleId:l(d),rules:Array.isArray(b)?b:[b]}},b.selectFromServer=function(){return Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')).reduce(function(a,b){return a[b.id.slice(2)]=b,a},{})},a}(),o=d.createContext(null);function p(){return new n}function q(){return d.useContext(o)}function r(a){var b=q();return b&&b.add(a),null}o.displayName="StyleSheetContext",e.default.useInsertionEffect||e.default.useLayoutEffect,r.dynamic=function(a){return a.map(function(a){return l(a[0],a[1])}).join(" ")},c.StyleRegistry=function(a){var b=a.registry,c=a.children,f=d.useContext(o),g=d.useState(function(){return f||b||p()})[0];return e.default.createElement(o.Provider,{value:g},c)},c.createStyleRegistry=p,c.style=r,c.useStyleRegistry=q},31626,(a,b,c)=>{b.exports=a.r(15299).style}];
-
-//# sourceMappingURL=%5Broot-of-the-server%5D__0_jnflc._.js.map