@sleep2agi/agent-network-dashboard 0.4.5-preview.7 → 0.4.5-preview.71

package/app/login/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { FormEvent, useState } from 'react';
+import { DASHBOARD_VERSION } from '../lib/version';
 
 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 +70,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,22 +97,51 @@ 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>
 
         <p className="text-center text-[11px] text-gray-700 mt-6">
           Sleep2AGI · Apache-2.0 · <a href="https://anet.sh" className="hover:text-gray-500 transition-colors">anet.sh</a>
+          <span className="mx-1 text-gray-800">·</span>
+          <span className="font-mono" title="@sleep2agi/agent-network-dashboard">v{DASHBOARD_VERSION}</span>
         </p>
       </div>
     </main>

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,50 @@ 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>
+        {/* Round 87: dropped {logs.length} header chip — r43 added
+            `All <count>` to the action-filter strip below, which
+            duplicated this value 40px away. Matches r86 /server-logs. */}
       </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 +163,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 +191,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

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from 'react';
 import { useMessages } from '../lib/hooks';
-import { timeAgo } from '../components/utils';
+import { timeAgo, previewContent } from '../components/utils';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 
@@ -129,6 +129,11 @@ export default function MessagesPage() {
         )}
       </div>
 
+      {/* Round 76: hide search + type filter + view toggle + Debug button
+          when there are no messages at all. Same r70-class fix carried
+          across /nodes (r74) and /tasks (r75). When at least one message
+          exists, the chrome reappears so users can still clear filters. */}
+      {messages.length > 0 && (
       <div className="flex flex-wrap gap-3 mb-3">
         <input
           type="text"
@@ -165,6 +170,7 @@ export default function MessagesPage() {
           {debug ? 'Debug ON' : 'Debug'}
         </button>
       </div>
+      )}
 
       {quickFromChips.length > 0 && (
         <div className="mb-6 flex flex-wrap gap-2">
@@ -206,17 +212,20 @@ 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>
-                    <span className="text-gray-400 flex-1">{m.content?.slice(0, 120) || '--'}</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 truncate" title={m.content || ''}>{previewContent(m.content).slice(0, 120)}</span>
                     <span className="text-[9px] text-gray-600 shrink-0">{timeAgo(m.created_at || '')}</span>
                   </div>
                 ))}
@@ -264,7 +273,11 @@ export default function MessagesPage() {
                         {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">
+                      {/* Round 79: break-words + overflow-wrap:anywhere so
+                          long unbroken runs (URLs, ASCII rules like
+                          `═══════════════`) wrap instead of pushing the
+                          chat bubble past the mobile viewport. */}
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
                     </div>
@@ -295,7 +308,11 @@ export default function MessagesPage() {
                         </div>
                       )}
 
-                      <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
+                      {/* Round 79: break-words + overflow-wrap:anywhere so
+                          long unbroken runs (URLs, ASCII rules like
+                          `═══════════════`) wrap instead of pushing the
+                          chat bubble past the mobile viewport. */}
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </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>
@@ -299,13 +316,16 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   );
 }
 
-const EVENT_COLORS: Record<string, { dot: string; line: string; icon: string }> = {
-  delivered: { dot: 'bg-blue-400', line: 'bg-blue-500/30', icon: '📬' },
-  acked: { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', icon: '✅' },
-  running: { dot: 'bg-green-400', line: 'bg-green-500/30', icon: '⚡' },
-  replied: { dot: 'bg-purple-400', line: 'bg-purple-500/30', icon: '💬' },
-  failed: { dot: 'bg-red-400', line: 'bg-red-500/30', icon: '❌' },
-  created: { dot: 'bg-gray-400', line: 'bg-gray-500/30', icon: '📝' },
+/** Round 59: emoji icons replaced with stroke SVG paths to drop the
+ *  "AI generated" tell. Each path is sized to fit inside the 18px
+ *  colored event dot. */
+const EVENT_COLORS: Record<string, { dot: string; line: string; path: string }> = {
+  delivered: { dot: 'bg-blue-400',   line: 'bg-blue-500/30',   path: 'M12 5v14 M5 12l7 7 7-7' },                   // down arrow
+  acked:     { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', path: 'M20 6 9 17l-5-5' },                          // check
+  running:   { dot: 'bg-green-400',  line: 'bg-green-500/30',  path: 'M13 2L4 14h6l-1 8 10-12h-6l1-8z' },         // bolt
+  replied:   { dot: 'bg-purple-400', line: 'bg-purple-500/30', path: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' }, // chat bubble
+  failed:    { dot: 'bg-red-400',    line: 'bg-red-500/30',    path: 'M18 6 6 18 M6 6l12 12' },                    // X
+  created:   { dot: 'bg-gray-400',   line: 'bg-gray-500/30',   path: 'M12 5v14 M5 12h14' },                       // plus
 };
 
 function EventsTimeline({ events, loading }: { events: Array<{ id: number; event_type: string; from_status: string; to_status: string; detail: string; created_at: string; task_id?: string }>; loading: boolean }) {
@@ -334,9 +354,12 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
               const cfg = EVENT_COLORS[e.to_status] || EVENT_COLORS.created;
               return (
                 <div key={e.id} className="relative pb-4 last:pb-0">
-                  {/* Dot on line */}
-                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center text-[9px] z-10 border-2 border-[#111128]`}>
-                    {cfg.icon.length <= 2 ? cfg.icon : ''}
+                  {/* Dot on line — round 59: emoji icons replaced with
+                      a 10px stroke SVG path matching event type. */}
+                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#111128]`}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0a0a15" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                      <path d={cfg.path} />
+                    </svg>
                   </div>
                   {/* Content */}
                   <div className="ml-2">

package/app/nodes/page.tsx

@@ -5,10 +5,18 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useSessions, useHealth } from '../lib/hooks';
 import { TaskChatPanel } from '../components/TaskChatPanel';
-import { EmptyState } from '../components/EmptyState';
+import { EmptyState, NodesEmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 import type { Session } from '../components/types';
 
+/** Round 81: shorten long server hostnames (Alibaba `iZ…oyZ` style)
+ *  for table display. Returns the original string unchanged when ≤12
+ *  chars. Full value should stay in `title=` for hover + screen-readers. */
+function shortServer(server: string | null | undefined): string {
+  if (!server) return '—';
+  return server.length > 12 ? `${server.slice(0, 8)}…` : server;
+}
+
 const STATUS_COLORS: Record<string, string> = {
   working: 'bg-green-500/10 text-green-300 border-green-500/20',
   idle: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
@@ -121,6 +129,12 @@ export default function NodesPage() {
         );
       })()}
 
+      {/* Round 74: hide the filter+view chrome when there are no nodes
+          anywhere — these controls have nothing to act on, and they only
+          push the onboarding CTA further down. When at least one session
+          exists, the chrome is back even if the current filter happens
+          to hide everything (so users can clear filters). */}
+      {sessions.length > 0 && (
       <div className="flex flex-wrap gap-3 mb-6">
         <input
           type="text"
@@ -142,7 +156,11 @@ export default function NodesPage() {
           <option value="blocked">Blocked</option>
           <option value="error">Error</option>
         </select>
-        <div className="ml-auto flex rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 text-sm">
+        {/* Round 80: List/Grid toggle hidden on mobile — Grid uses
+            grid-cols-1 below `md` and List degrades to the same single
+            column, so the toggle has no visual effect under sm and only
+            steals a row of vertical space. */}
+        <div className="hidden sm:flex ml-auto rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 text-sm">
           {(['list', 'grid'] as const).map(mode => (
             <button
               key={mode}
@@ -159,17 +177,27 @@ export default function NodesPage() {
           ))}
         </div>
       </div>
+      )}
 
       {loading ? (
         <div className="animate-pulse space-y-2">
           {[1,2,3,4].map(i => <div key={i} className="h-16 bg-gray-800/20 rounded-lg" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <EmptyState
-          variant="nodes"
-          title="No nodes match your filters"
-          sub="Try clearing search or status filters, or wait for an agent to register."
-        />
+        sessions.length === 0 ? (
+          /* Round 73: first-run case — no agents anywhere. Use the same
+             onboarding empty state as the Overview (NodesEmptyState
+             includes the `npx … init` quickstart command). Previously this
+             was the "No nodes match your filters" copy, which was wrong
+             for new users who have no filters applied. */
+          <NodesEmptyState />
+        ) : (
+          <EmptyState
+            variant="nodes"
+            title="No nodes match your filters"
+            sub="Try clearing search or status filters, or wait for an agent to register."
+          />
+        )
       ) : viewMode === 'grid' ? (
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
           {filtered.map(s => {
@@ -199,7 +227,7 @@ export default function NodesPage() {
                       </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 || '—')}
+                      {(s.agent || '—')}<span className="text-gray-700 mx-1.5">·</span><span title={s.server || ''}>{shortServer(s.server)}</span>
                     </div>
                   </Link>
                   <div className="flex gap-1.5 shrink-0">
@@ -299,7 +327,7 @@ export default function NodesPage() {
                     </Link>
                   </div>
                   <div className="col-span-2 truncate text-xs text-gray-400">{s.agent || '--'}</div>
-                  <div className="col-span-2 truncate text-xs text-gray-400">{s.server || '--'}</div>
+                  <div className="col-span-2 truncate text-xs text-gray-400" title={s.server || ''}>{shortServer(s.server)}</div>
                   <div className="col-span-2 truncate text-xs text-gray-500">{s.task || '--'}</div>
                   <div className="col-span-1 text-xs text-gray-500">{timeAgo(s.last_seen_at || s.updated_at)}</div>
                   <div className="col-span-2 flex justify-end gap-1.5">