@sleep2agi/agent-network-dashboard 0.4.5-preview.3 → 0.4.5-preview.30

package/app/components/TaskDrawer.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { timeAgo } from './utils';
 import Link from 'next/link';
+import { AliasAvatar } from './AliasAvatar';
 
 interface TaskDetail {
   task_id: string;
@@ -58,12 +59,20 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
     })();
   }, [taskId]);
 
+  /** Timeline steps — same 4 hops every task goes through. `time` is set
+   *  when the hop has happened; missing time means pending. Round 36 adds
+   *  `key` for the "current step" highlight + the `done` flag for layout. */
   const timeline = task ? [
-    { label: 'Created', time: task.created_at, color: 'bg-gray-400' },
-    { label: 'Delivered', time: task.delivered_at, color: 'bg-blue-400' },
-    { label: 'Started', time: task.started_at, color: 'bg-green-400' },
-    { label: 'Completed', time: task.completed_at, color: 'bg-purple-400' },
-  ] : [];
+    { key: 'created',   label: 'Created',   time: task.created_at,    color: 'bg-gray-400'  },
+    { key: 'delivered', label: 'Delivered', time: task.delivered_at,  color: 'bg-blue-400'  },
+    { key: 'started',   label: 'Started',   time: task.started_at,    color: 'bg-green-400' },
+    { key: 'completed', label: 'Completed', time: task.completed_at,  color: 'bg-purple-400'},
+  ].map(s => ({ ...s, done: !!s.time })) : [];
+
+  /** Index of the highest-completed step. The step *after* this index is
+   *  the "current" one (in-progress). When all are done, currentIdx = -1. */
+  const currentStepIdx = timeline.findIndex(s => !s.done);
+  const isActive = task && task.status !== 'completed' && task.status !== 'failed' && task.status !== 'expired' && task.status !== 'cancelled';
 
   const duration = task?.started_at && task?.completed_at
     ? Math.round((new Date(task.completed_at).getTime() - new Date(task.started_at).getTime()) / 1000)
@@ -71,7 +80,7 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/30 z-40" onClick={onClose} />
+      <div className="fixed inset-0 bg-black/30 z-40 anet-fade-in" onClick={onClose} />
       <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 overflow-y-auto animate-slide-in">
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-[#2a2a4a] bg-[#0d0d1a] sticky top-0">
@@ -105,29 +114,68 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
               )}
             </div>
 
-            {/* From → To */}
-            <div className="flex items-center gap-2 text-sm">
-              <span className="text-blue-400 font-medium">{task.from_name || '--'}</span>
-              <span className="text-gray-600">→</span>
-              <span className="text-cyan-400 font-medium">{task.to_name || '--'}</span>
+            {/* From → To — round 41: use AliasAvatar so from/to colours
+                match the rest of the app instead of the legacy blue/cyan
+                hardcode. */}
+            <div className="flex items-center gap-2 text-sm flex-wrap">
+              {task.from_name && <AliasAvatar alias={task.from_name} size={18} />}
+              <span className="text-gray-200 font-medium">{task.from_name || '--'}</span>
+              <span className="text-gray-600">&rarr;</span>
+              {task.to_name && <AliasAvatar alias={task.to_name} size={18} />}
+              <span className="text-gray-200 font-medium">{task.to_name || '--'}</span>
             </div>
 
-            {/* Timeline */}
+            {/* Timeline — round 36 polish: relative timestamps, current-step
+                pulse if task is still in flight, full ISO in title=. */}
             <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
-              <div className="text-xs text-gray-500 uppercase mb-3">Timeline</div>
+              <div className="flex items-center justify-between mb-3">
+                <div className="text-xs text-gray-500 uppercase tracking-wide">Timeline</div>
+                {duration !== null && (
+                  <div className="text-[10px] text-gray-600">
+                    {duration < 60 ? `${duration}s` : `${Math.floor(duration/60)}m ${duration%60}s`} runtime
+                  </div>
+                )}
+              </div>
               <div className="space-y-3">
-                {timeline.map((step, i) => (
-                  <div key={step.label} className="flex items-center gap-3">
-                    <div className="flex flex-col items-center">
-                      <div className={`w-3 h-3 rounded-full ${step.time ? step.color : 'bg-gray-700'}`} />
-                      {i < timeline.length - 1 && <div className={`w-0.5 h-4 mt-1 ${step.time && timeline[i+1]?.time ? 'bg-gray-600' : 'bg-gray-800'}`} />}
+                {timeline.map((step, i) => {
+                  const isCurrent = isActive && i === currentStepIdx;
+                  const isNextDone = !!timeline[i+1]?.done;
+                  return (
+                    <div key={step.key} className="flex items-start gap-3">
+                      <div className="flex flex-col items-center pt-0.5">
+                        <span
+                          className={`relative w-3 h-3 rounded-full shrink-0 ${
+                            step.done ? step.color : 'bg-gray-700'
+                          }`}
+                        >
+                          {isCurrent && (
+                            <span
+                              aria-hidden
+                              className="absolute -inset-1 rounded-full border border-current opacity-60 anet-current-step-pulse"
+                              style={{ borderColor: 'currentColor' }}
+                            />
+                          )}
+                        </span>
+                        {i < timeline.length - 1 && (
+                          <div className={`w-0.5 h-5 mt-1 ${
+                            step.done && isNextDone ? 'bg-gray-500' : step.done ? 'bg-gradient-to-b from-gray-500 to-gray-800' : 'bg-gray-800'
+                          }`} />
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className={`text-xs font-medium flex items-center gap-2 ${
+                          step.done ? 'text-gray-200' : isCurrent ? 'text-cyan-300' : 'text-gray-600'
+                        }`}>
+                          <span>{step.label}</span>
+                          {isCurrent && <span className="text-[9px] uppercase tracking-wide text-cyan-400">in&nbsp;progress</span>}
+                        </div>
+                        <div className="text-[10px] text-gray-500" title={step.time || undefined}>
+                          {step.time ? timeAgo(step.time) : isCurrent ? '—' : 'Pending'}
+                        </div>
+                      </div>
                     </div>
-                    <div className="flex-1">
-                      <div className={`text-xs font-medium ${step.time ? 'text-gray-300' : 'text-gray-600'}`}>{step.label}</div>
-                      <div className="text-[10px] text-gray-500">{step.time || 'Pending'}</div>
-                    </div>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
             </div>
 
@@ -172,10 +220,6 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
           </div>
         )}
       </div>
-      <style jsx global>{`
-        @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
-        .animate-slide-in { animation: slide-in 0.2s ease-out; }
-      `}</style>
     </>
   );
 }

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,11 +333,54 @@ 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} />
@@ -342,21 +398,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 +461,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 +508,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

@@ -708,6 +708,45 @@ body {
   background-color: rgba(0, 158, 126, 0.08) !important;
 }
 
+/* Round 20 — matched-char highlight inside cmdk titles/hints. Inherits
+   line color (`color`) instead of forcing one — keeps text readable on
+   both inactive (gray) and active (cyan-300) rows. <mark> default is a
+   garish yellow block, which we override. */
+.anet-cmdk-mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 600;
+  /* Subtle underline so the mark stays visible even on the active row
+     where the background tint matches the accent color. */
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-skip-ink: none;
+}
+/* Cyber: accent the matched glyph color so it pops on the dark bg. */
+[data-theme="cyber"] .anet-cmdk-mark,
+:root:not([data-theme]) .anet-cmdk-mark {
+  color: #22d3ee;
+}
+/* Light/mint: use the brand teal — undertone matches the active row. */
+[data-theme="light"] .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-mark {
+  color: #0d9488;
+}
+[data-theme="sunset"] .anet-cmdk-mark {
+  color: #ea580c;
+}
+/* On the active (cyan-tinted) row, the title is already cyan-300 — use
+   white-with-underline so the highlight reads as emphasis, not redundancy. */
+.anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #f0fdff;
+}
+[data-theme="light"] .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #064e3b;
+}
+
 /* Help overlay — same white-card-with-shadow treatment as cmdk on light */
 [data-theme="light"] .anet-help > div:not([aria-hidden]),
 [data-theme="mint"]  .anet-help > div:not([aria-hidden]) {
@@ -772,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/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>