@sleep2agi/agent-network-dashboard 0.4.5-preview.4 → 0.4.5-preview.40

package/app/lib/version.ts

@@ -0,0 +1,7 @@
+/** Dashboard package version sourced from package.json at build time.
+ *  Importing JSON requires `resolveJsonModule: true` in tsconfig, which
+ *  Next sets by default. Bumping is automated by the publish flow, so this
+ *  surfaces the real preview number in Settings → Dashboard. */
+import pkg from '../../package.json' assert { type: 'json' };
+
+export const DASHBOARD_VERSION: string = pkg.version;

package/app/login/page.tsx

@@ -6,6 +6,7 @@ export default function LoginPage() {
   const [mode, setMode] = useState<'login' | 'register'>('login');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   const [pending, setPending] = useState(false);
 
@@ -68,7 +69,9 @@ export default function LoginPage() {
           </div>
           <h1 className="text-[22px] sm:text-2xl font-semibold text-white tracking-tight">Agent Network</h1>
           <p className="text-[13px] text-gray-500 mt-1.5 leading-snug">
-            One control plane for your AI agents · <span className="text-gray-600">Tasks · Mesh · Messages</span>
+            {mode === 'login'
+              ? <>Welcome back · <span className="text-gray-600">Tasks · Mesh · Messages</span></>
+              : <>Create your account · <span className="text-gray-600">Free preview · no credit card</span></>}
           </p>
         </div>
 
@@ -93,17 +96,44 @@ export default function LoginPage() {
           <label htmlFor="password" className="block text-xs text-gray-500 mb-2 uppercase tracking-wider">
             Password
           </label>
-          <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
-            placeholder="Enter password"
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
+          <div className="relative">
+            <input id="password" type={showPassword ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)}
+              placeholder="Enter password"
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 pr-11 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
+            <button
+              type="button"
+              onClick={() => setShowPassword(s => !s)}
+              tabIndex={-1}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600 hover:text-gray-300 transition-colors"
+            >
+              {showPassword ? (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                  <line x1="1" y1="1" x2="23" y2="23" />
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>
+              )}
+            </button>
+          </div>
 
           {error && (
             <div className="mt-3 text-sm text-red-300 bg-red-500/5 border border-red-500/10 rounded-lg px-3 py-2">{error}</div>
           )}
 
-          <button type="submit" disabled={pending || !password}
-            className="mt-5 w-full px-4 py-3 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 disabled:from-gray-800 disabled:to-gray-800 disabled:text-gray-600 text-white text-sm font-medium rounded-lg transition-all shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/20 disabled:shadow-none">
-            {pending ? (mode === 'login' ? 'Signing in...' : 'Registering...') : (mode === 'login' ? 'Sign in' : 'Create account')}
+          <button type="submit" disabled={pending || !password || !username.trim()}
+            className="mt-5 w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 disabled:from-gray-800 disabled:to-gray-800 disabled:text-gray-600 text-white text-sm font-medium rounded-lg transition-all shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/20 disabled:shadow-none">
+            {pending && (
+              <svg aria-hidden className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
+                <path d="M4 12a8 8 0 018-8" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+              </svg>
+            )}
+            <span>{pending ? (mode === 'login' ? 'Signing in…' : 'Registering…') : (mode === 'login' ? 'Sign in' : 'Create account')}</span>
           </button>
         </form>
 

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

package/app/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>

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)}