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

package/app/components/TopoGraph.tsx

@@ -33,10 +33,14 @@ const cy = 330;
 const onlineRadius = 220;
 const offlineRadius = 315;
 
-function polarPoint(index: number, total: number, radius: number) {
+/** Polar coordinate for a node on a ring. `rotateBy` lets the caller offset
+ *  the whole ring so two stacked rings don't align radially (round 25: the
+ *  offline ring gets a half-step rotation so its nodes sit in the gaps
+ *  between online ones). */
+function polarPoint(index: number, total: number, radius: number, rotateBy = 0) {
   const spread = total <= 2 ? Math.PI : Math.PI * 1.78;
   const start = -Math.PI / 2 - spread / 2;
-  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1);
+  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1) + rotateBy;
   return {
     x: cx + radius * Math.cos(angle),
     y: cy + radius * Math.sin(angle),
@@ -248,8 +252,17 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
       positions[s.alias] = polarPoint(index, Math.max(online.length, 1), onlineRadius);
     });
 
+    // Offset the offline ring radially by half the online step so offline
+    // bubbles sit in the angular gaps between online bubbles instead of
+    // stacking directly behind them. Also push the outer ring further when
+    // there are many offline nodes so labels don't crowd the legend.
+    const spread = online.length <= 2 ? Math.PI : Math.PI * 1.78;
+    const onlineStep = online.length > 1 ? spread / (online.length - 1) : 0;
+    const offlineRotation = online.length > 0 ? onlineStep / 2 : 0;
+    const offlineR = offlineRadius + Math.max(0, offline.length - 4) * 6;
+
     offline.forEach((s, index) => {
-      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineRadius);
+      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineR, offlineRotation);
     });
 
     const links = buildFlowLinks(messages, positions);
@@ -320,15 +333,85 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             <marker id="topo-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
               <path d="M 0 0 L 10 5 L 0 10 z" fill={pal.arrowFill} />
             </marker>
+            {/* Round 45: radial radar sweep gradient — bright at center
+                (where it meets the hub) fading to leading edge. */}
+            <radialGradient id="topo-sweep" cx="0%" cy="50%" r="100%">
+              <stop offset="0%"  stopColor={isLight ? '#0d9488' : '#22d3ee'} stopOpacity={isLight ? 0.18 : 0.32} />
+              <stop offset="70%" stopColor={isLight ? '#0d9488' : '#22d3ee'} stopOpacity={isLight ? 0.10 : 0.18} />
+              <stop offset="100%" stopColor={isLight ? '#0d9488' : '#22d3ee'} stopOpacity="0" />
+            </radialGradient>
           </defs>
 
           <rect width="1000" height="680" fill="url(#topo-panel)" />
           <circle cx={cx} cy={cy} r="330" fill="url(#topo-radar)" />
 
+          {/* Round 45: subtle star field — 24 deterministic dots scattered
+              across the canvas give the radar bg some depth. Skipped on
+              light theme so the white surface stays clean. */}
+          {!isLight && (
+            <g opacity="0.5">
+              {Array.from({ length: 28 }).map((_, i) => {
+                // Deterministic pseudo-random scatter so positions are
+                // stable between renders (no JS hydration mismatch).
+                const seed = i * 9301 + 49297;
+                const x = ((seed * 13) % 1000);
+                const y = ((seed * 7) % 680);
+                const r = (i % 3 === 0) ? 1.2 : 0.7;
+                return <circle key={i} cx={x} cy={y} r={r} fill="#a5b4fc" opacity={0.35 + (i % 4) * 0.05} />;
+              })}
+            </g>
+          )}
+
+          {/* Round 45: rotating radar sweep — a 40° wedge with a soft
+              leading-edge gradient. Slow 6s rotation reads as a radar
+              scan without being noisy. Inline transform-origin on the
+              <g> wrapper ensures Chrome / Firefox rotate around (cx,cy)
+              instead of the SVG viewBox corner. */}
+          <g
+            style={{
+              transformOrigin: `${cx}px ${cy}px`,
+              transformBox: 'view-box',
+            }}
+            className="anet-topo-sweep"
+            opacity={isLight ? 0.7 : 1}
+          >
+            <path
+              d={`M ${cx} ${cy} L ${cx + 330} ${cy} A 330 330 0 0 0 ${cx + 330 * Math.cos(-Math.PI / 4.5)} ${cy + 330 * Math.sin(-Math.PI / 4.5)} Z`}
+              fill="url(#topo-sweep)"
+            />
+          </g>
+
           {/* radar rings */}
           {[90, 170, 250, 330].map(radius => (
             <circle key={radius} cx={cx} cy={cy} r={radius} fill="none" stroke={pal.ringStroke} strokeWidth="1" opacity={isLight ? 0.6 : 0.35} />
           ))}
+
+          {/* Round 50: 4 small particles slowly orbiting the outer ring
+              (r=330). Each starts at a different angle (offset 0/0.25/0.5/0.75
+              of the cycle) so they're evenly spaced. 16s per revolution is
+              slow enough to feel ambient, not noisy. Skipped on light theme
+              so the white surface stays clean. */}
+          {!isLight && [0, 0.25, 0.5, 0.75].map((phase, i) => (
+            <g key={`orbit-${i}`}>
+              <circle
+                cx={cx + 330} cy={cy}
+                r={i === 0 ? 2.8 : 2.2}
+                fill="#22d3ee"
+                opacity={0.9}
+                filter="url(#topo-glow)"
+              >
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from={`${phase * 360} ${cx} ${cy}`}
+                  to={`${phase * 360 + 360} ${cx} ${cy}`}
+                  dur="16s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </g>
+          ))}
+
           {[0, 30, 60, 90, 120, 150].map(angle => (
             <line
               key={angle}
@@ -342,21 +425,27 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             />
           ))}
 
-          {/* hub links */}
-          {onlineNodes.map(session => {
+          {/* hub links — round 46: idle spokes now have animated
+              stroke-dashoffset so dashes flow outward from the hub
+              ("command relay" feel). Active spokes carrying live message
+              flow stay as solid bright strokes. */}
+          {onlineNodes.map((session, idx) => {
             const pos = nodePositions[session.alias];
             if (!pos) return null;
             const path = curvePath({ x: cx, y: cy }, pos, 0);
+            const isActiveSpoke = activeAliases.has(session.alias);
 
             return (
               <path
                 key={`hub-${session.alias}`}
                 d={path}
                 fill="none"
-                stroke={activeAliases.has(session.alias) ? pal.spokeStroke.active : pal.spokeStroke.idle}
-                strokeWidth={activeAliases.has(session.alias) ? 2 : 1}
-                strokeDasharray={activeAliases.has(session.alias) ? 'none' : '8 10'}
-                opacity={activeAliases.has(session.alias) ? 0.65 : 0.35}
+                stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
+                strokeWidth={isActiveSpoke ? 2 : 1}
+                strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
+                opacity={isActiveSpoke ? 0.7 : 0.45}
+                className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
+                style={isActiveSpoke ? undefined : { animationDelay: `${-(idx * 0.25)}s` }}
               />
             );
           })}
@@ -399,27 +488,32 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             );
           })}
 
-          {/* center hub — 24px pulse signal source.
-              Previous design (56px filled circle + 42px animated ring +
-              `+` glyph + "DASHBOARD" / "command relay" labels) over-emphasized
-              the hub and competed with the agent nodes for visual weight.
-              The new design is a calm 12px emerald source with two outward
-              pulse rings — reads as "signal origin" without a placeholder
-              logo or label. Closes agent-network#5. */}
+          {/* center hub — round 39: enlarged from r=6 (12px) to r=10 (20px)
+              core so the "control plane" reads as the network's anchor,
+              not a stray particle. Static halo ring at r=18 grounds it
+              visually; two outward pulses keep the "signal source" idea
+              from r17. Light theme gets a paler core to avoid hot-spotting
+              the bg. */}
           <g>
+            {/* static grounding halo — sits underneath, low opacity */}
+            <circle
+              cx={cx} cy={cy} r="18"
+              fill={isLight ? '#d1fae5' : '#10b981'}
+              opacity={isLight ? 0.35 : 0.10}
+            />
             {/* outer pulse 1 */}
-            <circle cx={cx} cy={cy} r="6" fill="none" stroke="#10b981" strokeWidth="1.5">
-              <animate attributeName="r" values="6;28;6" dur="2.4s" repeatCount="indefinite" />
+            <circle cx={cx} cy={cy} r="10" fill="none" stroke="#10b981" strokeWidth="1.5">
+              <animate attributeName="r" values="10;38;10" dur="2.4s" repeatCount="indefinite" />
               <animate attributeName="opacity" values="0.55;0;0.55" dur="2.4s" repeatCount="indefinite" />
             </circle>
             {/* outer pulse 2 (delayed 1.2s) */}
-            <circle cx={cx} cy={cy} r="6" fill="none" stroke="#10b981" strokeWidth="1.5" opacity="0">
-              <animate attributeName="r" values="6;28;6" dur="2.4s" begin="1.2s" repeatCount="indefinite" />
+            <circle cx={cx} cy={cy} r="10" fill="none" stroke="#10b981" strokeWidth="1.5" opacity="0">
+              <animate attributeName="r" values="10;38;10" dur="2.4s" begin="1.2s" repeatCount="indefinite" />
               <animate attributeName="opacity" values="0.45;0;0.45" dur="2.4s" begin="1.2s" repeatCount="indefinite" />
             </circle>
-            {/* core dot — 12px diameter (r=6), emerald with inner highlight */}
-            <circle cx={cx} cy={cy} r="6" fill="#10b981" />
-            <circle cx={cx} cy={cy} r="3" fill="#d1fae5" opacity="0.9" />
+            {/* core — 20px diameter, larger inner highlight reads as a "lit lamp" */}
+            <circle cx={cx} cy={cy} r="10" fill={isLight ? '#059669' : '#10b981'} />
+            <circle cx={cx} cy={cy} r="5" fill="#d1fae5" opacity="0.9" />
           </g>
 
           {/* agent nodes */}
@@ -441,7 +535,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                     <animate attributeName="opacity" values={isLight ? '0.12;0.02;0.12' : '0.18;0.04;0.18'} dur="2.4s" repeatCount="indefinite" />
                   </circle>
                 )}
-                <circle cx={pos.x} cy={pos.y} r={radius + 8} fill={status.halo} opacity={isOnline ? (isLight ? 0.85 : 0.55) : (isLight ? 0.4 : 0.25)} />
+                <circle cx={pos.x} cy={pos.y} r={radius + 8} fill={status.halo} opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.4 : 0.25)} />
                 <circle
                   cx={pos.x}
                   cy={pos.y}

package/app/globals.css

@@ -811,3 +811,93 @@ body {
   color: #92400e !important;
   border-color: rgba(217, 119, 6, 0.28) !important;
 }
+
+/* Round 30 — global drawer entrance keyframes so TaskDrawer, TaskChatPanel,
+   and any future right-side panel share one source. Previously the
+   keyframe lived inside TaskChatPanel's <style jsx global>; if that
+   component never mounted, the keyframe was missing for TaskDrawer. */
+@keyframes anet-slide-in {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0);    }
+}
+.animate-slide-in { animation: anet-slide-in 0.2s ease-out; }
+
+@keyframes anet-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+.anet-fade-in { animation: anet-fade-in 0.15s ease-out; }
+
+/* Round 36 — current-step ring pulse on TaskDrawer timeline. Halo gently
+   breathes around the active step's dot so users can spot "task is here". */
+@keyframes anet-current-step-pulse-kf {
+  0%, 100% { transform: scale(1);   opacity: 0.6; }
+  50%      { transform: scale(1.25); opacity: 0.0; }
+}
+.anet-current-step-pulse {
+  animation: anet-current-step-pulse-kf 1.6s ease-in-out infinite;
+}
+
+/* Round 45 — TopoGraph rotating radar sweep wedge. 6s slow rotation
+   gives the topology canvas a real "radar scan" feel without distracting
+   from the agent nodes. */
+@keyframes anet-topo-sweep-kf {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.anet-topo-sweep {
+  animation: anet-topo-sweep-kf 6s linear infinite;
+}
+
+/* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
+   gets a small animationDelay (set inline) so the dashes don't all flow
+   in sync — reads as "command relay" pulse rather than a metronome. */
+@keyframes anet-topo-spoke-flow-kf {
+  from { stroke-dashoffset: 0;   }
+  to   { stroke-dashoffset: -40; }
+}
+.anet-topo-spoke-flow {
+  animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+   Round 29 — prefers-reduced-motion a11y sweep
+
+   Rounds 19~27 accumulated a lot of small animations: Tasks row 0fr↔1fr
+   expand, chevron rotate, hover bg shifts, Cmd+K popover, TaskChatPanel
+   slide-in, brand/skeleton pulses already had their own guards.
+
+   For users who set system "reduce motion": neutralise everything in one
+   pass. Don't kill state changes outright — only their durations and
+   keyframes. Hover and focus colours still apply, just instantly.
+   ───────────────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* Skeleton pulse already has its own guard; harden in case the bar
+     class is reused without anet-skeleton-pulse. */
+  .anet-skeleton-bar {
+    animation: none !important;
+  }
+  /* Brand pulse hidden — green/red dot still indicates state via color. */
+  .anet-brand-pulse {
+    animation: none !important;
+  }
+  /* Drawer entrance kills — keyframes promoted to globals in r30. */
+  .animate-slide-in,
+  .anet-fade-in,
+  .anet-current-step-pulse,
+  .anet-topo-sweep,
+  .anet-topo-spoke-flow {
+    animation: none !important;
+  }
+  /* Tasks row grid 0fr↔1fr keep working (it's the toggle mechanism),
+     but the smooth transition just snaps. Already handled via the
+     blanket transition-duration override above. */
+}

package/app/lib/version.ts

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

package/app/login/page.tsx

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

package/app/logs/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useNetworkId } from '../lib/network-context';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface AuditLog {
   id: string;
@@ -26,6 +27,18 @@ const ACTION_COLORS: Record<string, string> = {
   send_task: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
 };
 
+/** 2px left-rail stripe color per audit action — reuses the r32 server-logs
+ *  pattern so failed logins / token rotations spike out of a wall of
+ *  registers and logins without users reading every chip. Inline hex
+ *  prevents Tailwind v4 from purging dynamic class names. */
+const ACTION_STRIPE: Record<string, string> = {
+  register: '#4ade80',
+  login: '#60a5fa',
+  login_failed: '#ef4444',
+  create_network: '#a78bfa',
+  send_task: '#22d3ee',
+};
+
 export default function LogsPage() {
   const { networkId } = useNetworkId();
   const [logs, setLogs] = useState<AuditLog[]>([]);
@@ -64,25 +77,52 @@ export default function LogsPage() {
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="flex items-center gap-4 mb-6">
-        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Logs</h1>
-        <span className="text-xs bg-gray-900/30 text-gray-400 px-2 py-0.5 rounded-full border border-gray-800/30">
-          Audit Log
-        </span>
+        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Audit Log</h1>
+        {logs.length > 0 && (
+          <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30">
+            {logs.length}
+          </span>
+        )}
       </div>
 
-      <div className="flex flex-wrap gap-3 mb-6">
-        <select
-          value={filterAction}
-          onChange={e => setFilterAction(e.target.value)}
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500/50 focus:outline-none"
-        >
-          <option value="">All actions</option>
-          <option value="register">register</option>
-          <option value="login">login</option>
-          <option value="login_failed">login_failed</option>
-          <option value="create_network">create_network</option>
-          <option value="send_task">send_task</option>
-        </select>
+      {/* Action filter chips (round 43) — same chip pattern as Tasks
+          status tabs / Overview agent filter. Each chip carries its
+          ACTION_STRIPE dot so the visual key matches the per-row left
+          rail. Counts come from the currently loaded log set. */}
+      <div className="mb-6 flex flex-wrap items-center gap-1 anet-tabstrip-wrap overflow-x-auto sm:overflow-x-visible">
+        {(() => {
+          const counts: Record<string, number> = {};
+          logs.forEach(l => { counts[l.action] = (counts[l.action] || 0) + 1; });
+          const chips: { key: string; label: string; dot?: string }[] = [
+            { key: '',                label: 'All' },
+            { key: 'login',           label: 'login',           dot: ACTION_STRIPE.login },
+            { key: 'login_failed',    label: 'login_failed',    dot: ACTION_STRIPE.login_failed },
+            { key: 'register',        label: 'register',        dot: ACTION_STRIPE.register },
+            { key: 'create_network',  label: 'create_network',  dot: ACTION_STRIPE.create_network },
+            { key: 'send_task',       label: 'send_task',       dot: ACTION_STRIPE.send_task },
+          ];
+          return chips.map(c => {
+            const count = c.key === '' ? logs.length : counts[c.key] || 0;
+            const isActive = filterAction === c.key;
+            return (
+              <button
+                key={c.key || 'all'}
+                type="button"
+                onClick={() => setFilterAction(c.key)}
+                disabled={count === 0 && c.key !== ''}
+                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 whitespace-nowrap ${
+                  isActive
+                    ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                    : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                }`}
+              >
+                {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                <span>{c.label}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'text-cyan-400' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          });
+        })()}
       </div>
 
       {error && (() => {
@@ -125,13 +165,23 @@ export default function LogsPage() {
         <EmptyState variant="logs" />
       ) : (
         <div className="space-y-2">
-          {logs.map(log => (
-            <div key={log.id} className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 hover:border-[#3a3a5a] transition-colors">
+          {logs.map(log => {
+            const userName = log.username || log.user_id;
+            return (
+            <div key={log.id} className="relative bg-[#111128] border border-[#2a2a4a] rounded-lg pl-4 pr-4 py-3 hover:border-[#3a3a5a] transition-colors overflow-hidden">
+              {/* 2px left rail per action (round 33) — failed logins, token
+                  rotations spike out of a wall of register/login rows. */}
+              <span
+                aria-hidden
+                className="absolute left-0 top-0 bottom-0 w-0.5"
+                style={{ backgroundColor: ACTION_STRIPE[log.action] || 'transparent' }}
+              />
               <div className="flex flex-wrap items-center gap-2 mb-1">
                 <span className={`text-xs px-2 py-0.5 rounded-md border ${ACTION_COLORS[log.action] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                   {log.action}
                 </span>
-                <span className="text-sm text-blue-400 font-medium">{log.username || log.user_id}</span>
+                {userName && <AliasAvatar alias={userName} size={16} />}
+                <span className="text-sm text-gray-200 font-medium">{userName}</span>
                 {log.target_type && (
                   <>
                     <span className="text-xs text-gray-600">&rarr;</span>
@@ -143,7 +193,8 @@ export default function LogsPage() {
               {log.detail && <div className="text-xs text-gray-500">{log.detail}</div>}
               {log.ip && log.ip !== 'unknown' && <div className="text-[10px] text-gray-700">IP: {log.ip}</div>}
             </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>