@sleep2agi/agent-network-dashboard 0.4.5-preview.6 → 0.4.5-preview.61

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,7 +5,7 @@ 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';
 
@@ -121,6 +121,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"
@@ -159,17 +165,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 => {

package/app/page.tsx

@@ -10,6 +10,8 @@ import { AgentCard } from './components/AgentCard';
 import { InboxPanel } from './components/InboxPanel';
 import { LoadingSkeleton } from './components/LoadingSkeleton';
 import { NodesEmptyState as EmptyState } from './components/EmptyState';
+import { AliasAvatar } from './components/AliasAvatar';
+import { STATUS_DOT_HEX, STATUS_CHIP_CLASS } from './lib/status';
 import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
@@ -40,6 +42,7 @@ export default function Dashboard() {
   const cmd = useCommandCenter();
   const [showDispatch, setShowDispatch] = useState(false);
   const [inbox, setInbox] = useState<InboxMessage[]>([]);
+  const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
   const { mutate } = useSWRConfig();
 
   // SSE: instant revalidation on CommHub events
@@ -113,18 +116,27 @@ export default function Dashboard() {
     return bWorking - aWorking;
   });
 
+  /** Round 70: when the fleet is empty, the Overview reorders to lead with
+   *  the "Spin up your first agent" CTA and hides the Quick Navigation /
+   *  Nav rail / Broadcast bar that would otherwise occupy prime real estate
+   *  with zeros and dead-end links. Computed once, used as a gate below. */
+  const fleetEmpty = sessions.length === 0 && !sessError;
+
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="lg:ml-0 ml-10">
         <StatsBar online={online} working={working} total={total} version={version} uptime={uptime} />
       </div>
 
-      {/* Dispatch + User Bar */}
-      <div className="flex items-center gap-3 mb-2">
-        <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
-        </button>
+      {/* Dispatch + User Bar — Dispatch hidden when fleet empty (nothing to
+          dispatch to); UserBar still useful (account/sign-out menu). */}
+      <div className="flex items-center gap-3 mb-4">
+        {!fleetEmpty && (
+          <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
+          </button>
+        )}
         <div className="flex-1"><UserBar /></div>
       </div>
 
@@ -167,18 +179,15 @@ export default function Dashboard() {
             <Link href="/tasks" prefetch={false} className="text-xs text-cyan-400 hover:text-cyan-300">View all &rarr;</Link>
           </div>
           <div className="flex flex-wrap gap-2">
-            {[
-              { key: 'running', color: 'bg-green-500/10 text-green-300 border-green-500/20' },
-              { key: 'delivered', color: 'bg-blue-500/10 text-blue-300 border-blue-500/20' },
-              { key: 'acked', color: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20' },
-              { key: 'replied', color: 'bg-purple-500/10 text-purple-300 border-purple-500/20' },
-              { key: 'failed', color: 'bg-red-500/10 text-red-300 border-red-500/20' },
-              { key: 'cancelled', color: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20' },
-              { key: 'expired', color: 'bg-orange-500/10 text-orange-300 border-orange-500/20' },
-              { key: 'closed', color: 'bg-gray-500/10 text-gray-500 border-gray-500/20' },
-            ].filter(({ key }) => taskStats[key])
-              .map(({ key, color }) => (
-                <Link key={key} href={`/tasks?status=${key}`} prefetch={false} className={`px-2.5 py-1 rounded-md border text-xs ${color} hover:opacity-80 transition-opacity`}>
+            {/* Round 69: order is "hot first" — active flow before terminal
+                states — intentionally different from the lifecycle order on
+                /tasks. Colors come from shared STATUS_CHIP_CLASS so a
+                palette tweak in app/lib/status.ts updates here too.
+                'created' added in r69 (was missing — enum-coverage bug). */}
+            {(['running', 'delivered', 'acked', 'replied', 'created', 'failed', 'cancelled', 'expired', 'closed'] as const)
+              .filter((key) => taskStats[key])
+              .map((key) => (
+                <Link key={key} href={`/tasks?status=${key}`} prefetch={false} className={`px-2.5 py-1 rounded-md border text-xs ${STATUS_CHIP_CLASS[key]} hover:opacity-80 transition-opacity`}>
                   {key}: {taskStats[key]}
                 </Link>
               ))}
@@ -189,9 +198,13 @@ 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.
+          Round 70 — entire Quick Nav + Nav rail + Broadcast + Recent
+          Activity block is hidden when the fleet is empty so the
+          onboarding CTA gets the page above the fold. */}
+      {!fleetEmpty && <>
+      <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 mb-2">Quick navigation</div>
       <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
         {(() => {
           // Build breakdown popover content per card. Pure data — pure CSS
@@ -311,21 +324,25 @@ export default function Dashboard() {
           <div className="space-y-2 max-h-40 overflow-y-auto">
             {tasks.slice(0, 5).map((t: { task_id: string; from_name: string; to_name: string; status: string; content: string; created_at: string }) => (
               <div key={t.task_id} className="flex items-center gap-2 text-xs">
-                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${
-                  t.status === 'replied' ? 'bg-purple-400' : t.status === 'running' ? 'bg-green-400' : t.status === 'failed' ? 'bg-red-400' : 'bg-blue-400'
-                }`} />
-                <span className="text-blue-400 shrink-0">{t.from_name || '?'}</span>
+                <span
+                  className="w-1.5 h-1.5 rounded-full shrink-0"
+                  style={{ backgroundColor: STATUS_DOT_HEX[t.status] || '#6b7280' }}
+                />
+                {t.from_name && <AliasAvatar alias={t.from_name} size={14} />}
+                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.from_name || '?'}</span>
                 <span className="text-gray-600">&rarr;</span>
-                <span className="text-cyan-400 shrink-0">{t.to_name || '?'}</span>
+                {t.to_name && <AliasAvatar alias={t.to_name} size={14} />}
+                <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.to_name || '?'}</span>
                 <span className="text-gray-500 truncate flex-1">{t.content?.slice(0, 40) || '--'}</span>
                 <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] border ${
-                  t.status === 'replied' ? 'text-purple-300 border-purple-500/20' : t.status === 'failed' ? 'text-red-300 border-red-500/20' : 'text-gray-500 border-gray-700/30'
+                  STATUS_CHIP_CLASS[t.status] || 'text-gray-500 border-gray-700/30'
                 }`}>{t.status}</span>
               </div>
             ))}
           </div>
         </section>
       )}
+      </>}
 
       {sessError && (
         <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-4 py-3 rounded-lg mb-6 text-sm flex items-center justify-between" role="alert">
@@ -356,13 +373,67 @@ export default function Dashboard() {
 
       {sessions.length === 0 && !sessError ? (
         <EmptyState hint={sessHint} />
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
-          {sortedSessions.map(s => (
-            <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
-          ))}
-        </div>
-      )}
+      ) : (() => {
+        const counts = {
+          all: sortedSessions.length,
+          working: sortedSessions.filter(s => isOnline(s) && s.status === 'working').length,
+          idle: sortedSessions.filter(s => isOnline(s) && s.status !== 'working').length,
+          offline: sortedSessions.filter(s => !isOnline(s)).length,
+        };
+        const filtered = sortedSessions.filter(s => {
+          if (agentFilter === 'all') return true;
+          if (agentFilter === 'offline') return !isOnline(s);
+          if (agentFilter === 'working') return isOnline(s) && s.status === 'working';
+          if (agentFilter === 'idle') return isOnline(s) && s.status !== 'working';
+          return true;
+        });
+        // Filter chip color keyed to status (round 34): working=green, idle=cyan,
+        // offline=gray, all=neutral. Inline hex dots avoid Tailwind v4 purge.
+        const chips: { key: typeof agentFilter; label: string; dot?: string }[] = [
+          { key: 'all',     label: 'All' },
+          { key: 'working', label: 'Working', dot: '#4ade80' },
+          { key: 'idle',    label: 'Idle',    dot: '#22d3ee' },
+          { key: 'offline', label: 'Offline', dot: '#6b7280' },
+        ];
+        return (
+          <>
+            <div className="mb-3 flex flex-wrap items-center gap-1">
+              {chips.map(c => (
+                <button
+                  key={c.key}
+                  type="button"
+                  onClick={() => setAgentFilter(c.key)}
+                  disabled={counts[c.key] === 0 && c.key !== 'all'}
+                  className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
+                    agentFilter === c.key
+                      ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                      : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                  }`}
+                >
+                  {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                  <span>{c.label}</span>
+                  <span className={`text-[10px] tabular-nums ${agentFilter === c.key ? 'text-cyan-400' : 'text-gray-600'}`}>{counts[c.key]}</span>
+                </button>
+              ))}
+            </div>
+            {/* Round 48: previous breakpoints had `lg:grid-cols-2 xl:grid-cols-3`
+                which kept lg (1024-1279px) at only 2 columns even though
+                each AgentCard is fine ≥260px wide. With the sidebar (208px),
+                main area at lg is ~816px so 3 cols at ~272px each fits.
+                xl breakpoint auto-inherits lg=3 cols; 2xl bumps to 4. */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
+              {filtered.map(s => (
+                <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
+              ))}
+            </div>
+            {filtered.length === 0 && (
+              <div className="mt-4 text-center text-xs text-gray-600">
+                No agents match "{agentFilter}" — <button onClick={() => setAgentFilter('all')} className="underline hover:text-gray-400">Show all</button>
+              </div>
+            )}
+          </>
+        );
+      })()}
 
       <InboxPanel messages={inbox} />
 

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);
@@ -93,24 +117,48 @@ export default function ServerLogsPage() {
 
   return (
     <div className="p-6 max-w-[1600px] mx-auto">
-      <div className="flex items-baseline justify-between mb-4">
-        <div className="flex items-baseline gap-3">
+      <div className="flex items-center justify-between mb-4 gap-3">
+        <div className="flex items-center gap-3 min-w-0">
           <h1 className="text-2xl font-bold text-white">Server Logs</h1>
-          <span className="text-xs text-gray-500">CommHub stdout/stderr · 最新在上</span>
+          {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 tabular-nums">
+              {logs.length}
+            </span>
+          )}
+          <span className="text-xs text-gray-500 hidden sm:inline">CommHub stdout/stderr</span>
         </div>
-        <div className="flex items-center gap-2 text-xs">
+        <div className="flex items-center gap-2 text-xs shrink-0">
           <button
             onClick={() => setPaused(p => !p)}
-            className={`px-3 py-1 rounded border ${paused ? 'bg-amber-500/10 text-amber-300 border-amber-500/30' : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30'}`}
+            className={`flex items-center gap-1.5 px-3 py-1 rounded border ${paused ? 'bg-amber-500/10 text-amber-300 border-amber-500/30' : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30'}`}
           >
-            {paused ? '▶ Resume' : '⏸ Pause'}
+            {paused ? (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M8 5v14l11-7z" /></svg>
+                Resume
+              </>
+            ) : (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                  <rect x="6" y="5" width="4" height="14" rx="0.5" />
+                  <rect x="14" y="5" width="4" height="14" rx="0.5" />
+                </svg>
+                Pause
+              </>
+            )}
           </button>
           <label className="flex items-center gap-1 text-gray-400 select-none">
             <input type="checkbox" checked={autoRefresh} onChange={e => setAutoRefresh(e.target.checked)} className="accent-cyan-500" />
-            auto-refresh
+            <span className="hidden sm:inline">auto-refresh</span>
           </label>
-          <button onClick={() => fetchLogs(true)} className="px-3 py-1 rounded border bg-gray-500/10 text-gray-300 border-gray-500/20 hover:bg-gray-500/20">
-            ↻ Reload
+          <button onClick={() => fetchLogs(true)} className="flex items-center gap-1.5 px-3 py-1 rounded border bg-gray-500/10 text-gray-300 border-gray-500/20 hover:bg-gray-500/20">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M3 12a9 9 0 0 1 15.5-6.4L21 8" />
+              <path d="M21 3v5h-5" />
+              <path d="M21 12a9 9 0 0 1-15.5 6.4L3 16" />
+              <path d="M3 21v-5h5" />
+            </svg>
+            <span className="hidden sm:inline">Reload</span>
           </button>
         </div>
       </div>
@@ -182,12 +230,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>