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

package/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { formatUptime } from './components/utils';
+import { formatUptime, previewContent } from './components/utils';
 import { StatsBar } from './components/StatsBar';
 import { BroadcastBar } from './components/BroadcastBar';
 import { TopoGraph } from './components/TopoGraph';
@@ -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>
-                <span className="text-gray-500 truncate flex-1">{t.content?.slice(0, 40) || '--'}</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" title={t.content || ''}>{previewContent(t.content).slice(0, 60)}</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,43 +117,76 @@ 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>
+          {/* Round 86: dropped the {logs.length} header chip — r84 added
+              `all <count>` to the filter strip just below, so this duplicated
+              the value within 40px of itself. */}
+          <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>
 
       <div className="flex items-center gap-3 mb-3">
         <div className="flex items-center gap-1 text-xs">
-          {(['all', 'log', 'info', 'warn', 'error'] as const).map(lv => (
-            <button
-              key={lv}
-              onClick={() => setFilterLevel(lv)}
-              className={`px-2.5 py-1 rounded border ${
-                filterLevel === lv
-                  ? 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40'
-                  : 'bg-[#11111c] text-gray-400 border-[#2a2a4a] hover:bg-[#1a1a2a]'
-              }`}
-            >
-              {lv}{lv !== 'all' && counts[lv as LogLine['level']] > 0 ? ` (${counts[lv as LogLine['level']]})` : ''}
-            </button>
-          ))}
+          {/* Round 84: every chip shows its count (matches Tasks r56 +
+              Audit Log r43); zero-count non-active chips are disabled
+              + muted so the eye lands on the levels that actually have
+              entries. */}
+          {(['all', 'log', 'info', 'warn', 'error'] as const).map(lv => {
+            const count = lv === 'all' ? logs.length : counts[lv as LogLine['level']];
+            const isActive = filterLevel === lv;
+            const isEmpty = lv !== 'all' && count === 0 && !isActive;
+            return (
+              <button
+                key={lv}
+                onClick={() => setFilterLevel(lv)}
+                disabled={isEmpty}
+                className={`px-2.5 py-1 rounded border flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed ${
+                  isActive
+                    ? 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40'
+                    : 'bg-[#11111c] text-gray-400 border-[#2a2a4a] hover:bg-[#1a1a2a]'
+                }`}
+              >
+                <span>{lv}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'opacity-80' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          })}
         </div>
         <input
           value={search}
@@ -182,12 +239,27 @@ 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>
+                {/* Round 85: CommHub stamps each log line with a `[HH:MM:SS]`
+                    prefix, but the row already shows shortTime(l.ts) in its
+                    own 100px column on the left. Strip the duplicate
+                    prefix at display time so the message starts directly
+                    with the alias / agent / action. */}
+                <span className={`break-all whitespace-pre-wrap ${LEVEL_COLOR[l.level]}`}>
+                  {highlightSearch(l.line.replace(/^\[\d{2}:\d{2}:\d{2}\]\s*/, ''), search)}
+                </span>
               </div>
             ))}
           </div>

package/app/settings/networks/page.tsx

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

package/app/settings/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useAnetConfig, useHealth, useLicense } from '../lib/hooks';
+import { DASHBOARD_VERSION } from '../lib/version';
 
 export default function SettingsPage() {
   const { config } = useAnetConfig();
@@ -18,12 +19,31 @@ export default function SettingsPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <h1 className="text-2xl font-bold text-white mb-6 lg:ml-0 ml-10">Settings</h1>
+      <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Settings</h1>
 
-      <div className="max-w-2xl space-y-8">
+      {/* Section anchor nav (round 28) — jump to a group instead of scrolling
+          through the whole page. Mirrors the section headers below; pages
+          with 7+ cards benefit from a visible table-of-contents. */}
+      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+        {[
+          { href: '#connection', label: 'Connection' },
+          { href: '#account',    label: 'Account' },
+          { href: '#resources',  label: 'Resources' },
+        ].map(a => (
+          <a key={a.href} href={a.href}
+            className="rounded-md px-2.5 py-1 text-gray-500 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            {a.label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="max-w-2xl space-y-10">
         {/* ── Group: Connection ─────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Connection</div>
+        <div id="connection" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Connection</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* CommHub Connection */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -72,7 +92,7 @@ export default function SettingsPage() {
               <span className={`text-gray-300 ${valueClass}`}>{health?.sessions ?? '--'}</span>
             </div>
             <div className={rowClass}>
-              <span className="text-gray-500">SSE Connections</span>
+              <span className="text-gray-500">SSE streams <span className="text-gray-600">· server</span></span>
               <span className={`text-gray-300 ${valueClass}`}>{health?.sse_connections ?? '--'}</span>
             </div>
             <div className={rowClass}>
@@ -88,7 +108,9 @@ export default function SettingsPage() {
           <div className="space-y-3 text-sm">
             <div className={rowClass}>
               <span className="text-gray-500">Version</span>
-              <span className={`text-gray-300 ${valueClass}`}>V2.1</span>
+              <span className={`text-gray-300 font-mono ${valueClass}`} title="From package.json @sleep2agi/agent-network-dashboard">
+                {DASHBOARD_VERSION}
+              </span>
             </div>
             <div className={rowClass}>
               <span className="text-gray-500">Data Layer</span>
@@ -96,15 +118,18 @@ export default function SettingsPage() {
             </div>
             <div className={rowClass}>
               <span className="text-gray-500">Pages</span>
-              <span className={`text-gray-300 ${valueClass}`}>Overview, Tasks, Nodes, Messages, Settings</span>
+              <span className={`text-gray-300 ${valueClass}`}>Overview, Tasks, Nodes, Messages, Networks, Audit, Server Logs, Admin, Settings</span>
             </div>
           </div>
         </section>
         </div>
 
         {/* ── Group: Account ────────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Account</div>
+        <div id="account" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Account</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* License */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -232,8 +257,11 @@ export default function SettingsPage() {
         </div>
 
         {/* ── Group: Resources ──────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Resources</div>
+        <div id="resources" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Resources</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* API Tokens + Networks */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

package/app/tasks/[id]/page.tsx

@@ -4,6 +4,7 @@ import { use } from 'react';
 import Link from 'next/link';
 import useSWR from 'swr';
 import { timeAgo } from '../../components/utils';
+import { STATUS_CHIP_CLASS } from '../../lib/status';
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -55,18 +56,6 @@ function Timeline({ steps }: { steps: TimelineStep[] }) {
   );
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  created: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
-  delivered: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
-  acked: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
-  running: 'bg-green-500/10 text-green-300 border-green-500/20',
-  replied: 'bg-purple-500/10 text-purple-300 border-purple-500/20',
-  closed: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
-  failed: 'bg-red-500/10 text-red-300 border-red-500/20',
-  cancelled: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
-  expired: 'bg-orange-500/10 text-orange-300 border-orange-500/20',
-};
-
 export default function TaskDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
   const { data, isLoading } = useSWR(
@@ -105,7 +94,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
     );
   }
 
-  const statusColor = STATUS_COLORS[task.status] || STATUS_COLORS.created;
+  const statusColor = STATUS_CHIP_CLASS[task.status] || STATUS_CHIP_CLASS.created;
   const steps: TimelineStep[] = [
     { label: 'Created', time: task.created_at, color: 'text-gray-400' },
     { label: 'Delivered', time: task.delivered_at, color: 'text-blue-400' },