@sleep2agi/agent-network-dashboard 0.4.5-preview.8 → 0.4.5-preview.80

package/app/components/TopoGraph.tsx

@@ -31,12 +31,28 @@ interface FlowLink {
 const cx = 500;
 const cy = 330;
 const onlineRadius = 220;
-const offlineRadius = 315;
-
-function polarPoint(index: number, total: number, radius: number) {
+// Round 97 (issue #50): tier into two rings when N > 8; round 98
+// (issue #61): tier into three rings when N > 14. At N=22 (Vincent's
+// network) two rings still leave 11 nodes per ring → inner chord of
+// 88px can't fit a 100px label; three rings give ~⌈N/3⌉ per ring so
+// every tier has enough arc room.
+const onlineTierThreshold = 8;
+const onlineTripleThreshold = 14;
+const onlineInnerRadius = 175;
+const onlineOuterRadius = 260;
+const onlineTripleInnerR = 145;
+const onlineTripleMidR = 215;
+const onlineTripleOuterR = 285;
+const offlineRadius = 325;
+
+/** 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),
@@ -244,12 +260,63 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
     const offline = sessions.filter(s => s.status === 'offline' && !sseCount(s));
     const positions: Record<string, Point> = {};
 
-    online.forEach((s, index) => {
-      positions[s.alias] = polarPoint(index, Math.max(online.length, 1), onlineRadius);
-    });
+    // Round 97 (issue #50) + 98 (issue #61): three layout modes by N.
+    //   N ≤ 8         → single ring (r=220)
+    //   8 < N ≤ 14    → two rings (inner r=175, outer r=260, half-step rot)
+    //   N > 14        → three rings (r=145/215/285, ⌈N/3⌉ per ring)
+    // Each ring's spread is 1.78π so its node count drives chord length:
+    // labels are 100px wide so each ring needs ≥110px chord per node.
+    const tripleTier = online.length > onlineTripleThreshold;
+    const dualTier = !tripleTier && online.length > onlineTierThreshold;
+    let outerOnlineCount = online.length;
+    if (tripleTier) {
+      const per = Math.ceil(online.length / 3);
+      const r1 = online.slice(0, per);
+      const r2 = online.slice(per, 2 * per);
+      const r3 = online.slice(2 * per);
+      r1.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(r1.length, 1), onlineTripleInnerR);
+      });
+      const r1Spread = r1.length <= 2 ? Math.PI : Math.PI * 1.78;
+      const r1Step = r1.length > 1 ? r1Spread / (r1.length - 1) : 0;
+      r2.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(r2.length, 1), onlineTripleMidR, r1Step / 2);
+      });
+      r3.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(r3.length, 1), onlineTripleOuterR);
+      });
+      outerOnlineCount = r3.length;
+    } else if (dualTier) {
+      const innerCount = Math.ceil(online.length / 2);
+      const outerCount = online.length - innerCount;
+      const innerNodes = online.slice(0, innerCount);
+      const outerNodes = online.slice(innerCount);
+      innerNodes.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(innerCount, 1), onlineInnerRadius);
+      });
+      const innerSpread = innerCount <= 2 ? Math.PI : Math.PI * 1.78;
+      const innerStep = innerCount > 1 ? innerSpread / (innerCount - 1) : 0;
+      outerNodes.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(outerCount, 1), onlineOuterRadius, innerStep / 2);
+      });
+      outerOnlineCount = outerCount;
+    } else {
+      online.forEach((s, index) => {
+        positions[s.alias] = polarPoint(index, Math.max(online.length, 1), onlineRadius);
+      });
+    }
+
+    // Offset the offline ring radially by half the outermost 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 outerSpreadBase = outerOnlineCount <= 2 ? Math.PI : Math.PI * 1.78;
+    const outerStep = outerOnlineCount > 1 ? outerSpreadBase / (outerOnlineCount - 1) : 0;
+    const offlineRotation = outerOnlineCount > 0 ? outerStep / 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 +387,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 +479,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 +542,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 +589,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}
@@ -459,10 +607,14 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                   </path>
                 )}
 
+                {/* Round 98 (issue #61): label rect 124px → 100px so a
+                    3-ring layout (inner r=145, 8 nodes) still has room for
+                    the label without overlapping a neighbour. Truncate
+                    tightened from 14 → 12 chars to match. */}
                 <g transform={`translate(${pos.x}, ${pos.y + radius + 22})`}>
-                  <rect x="-62" y="-14" width="124" height="42" rx="6" fill={pal.labelBox.fill} stroke={pal.labelBox.stroke} opacity={isLight ? 1 : 0.94} />
+                  <rect x="-50" y="-14" width="100" height="42" rx="6" fill={pal.labelBox.fill} stroke={pal.labelBox.stroke} opacity={isLight ? 1 : 0.94} />
                   <text x="0" y="1" textAnchor="middle" fill={status.text} fontSize="12" fontFamily="monospace" fontWeight="700">
-                    {truncate(session.alias, 14)}
+                    {truncate(session.alias, 12)}
                   </text>
                   <text x="0" y="17" textAnchor="middle" fill={status.primary} fontSize="9" fontFamily="monospace">
                     {status.label}{isOnline && sseCountFor != null ? ` sse:${sseCountFor}` : ''}

package/app/components/utils.ts

@@ -1,3 +1,16 @@
+/** Round 82: strip the most common markdown markup from agent-to-agent
+ *  task / message bodies so single-line table previews read cleanly.
+ *  Full original content stays in the expanded row / drawer / title=. */
+export function previewContent(raw: string | null | undefined): string {
+  if (!raw) return '--';
+  return raw
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')   // images: ![alt](src) → alt
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')    // links:  [text](href) → text
+    .replace(/`([^`]+)`/g, '$1')                // inline code: `x` → x
+    .replace(/\s+/g, ' ')                       // collapse whitespace
+    .trim() || '--';
+}
+
 export function timeAgo(dateStr: string): string {
   if (!dateStr) return '--';
   const diff = Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime();

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/status.ts

@@ -0,0 +1,85 @@
+/** Single source of truth for task status colors. Both `/tasks` (chip
+ *  strip, badge, distribution bar) and the Overview Recent Activity row
+ *  used to ship their own incomplete maps; round 66 consolidates them
+ *  here so adding a new status updates every consumer at once.
+ *
+ *  Order in `TASK_STATUSES` is chronological-ish: lifecycle progress on
+ *  the left, terminal-good (`closed`) in the middle, terminal-bad
+ *  (`failed`/`cancelled`/`expired`) on the right. */
+
+export const TASK_STATUSES = [
+  'created',
+  'delivered',
+  'acked',
+  'running',
+  'replied',
+  'closed',
+  'failed',
+  'cancelled',
+  'expired',
+] as const;
+
+export type TaskStatus = typeof TASK_STATUSES[number];
+
+/** Pill / chip background+text+border. Tailwind classes, not inlined hex,
+ *  because chips are static class names safe from purge. */
+export const STATUS_CHIP_CLASS: 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',
+};
+
+/** Inline hex dots — used wherever Tailwind would purge dynamic class
+ *  names (`bg-${family}-400`). Style attribute carries the color. */
+export const STATUS_DOT_HEX: Record<string, string> = {
+  created:   '#9ca3af',
+  delivered: '#60a5fa',
+  acked:     '#22d3ee',
+  running:   '#4ade80',
+  replied:   '#a78bfa',
+  closed:    '#6b7280',
+  failed:    '#f87171',
+  cancelled: '#facc15',
+  expired:   '#fb923c',
+};
+
+/** Session lifecycle (distinct from task lifecycle above). Shared by
+ *  /nodes status pills and /admin Online Sessions row chips so an
+ *  agent in `blocked` state reads the same color everywhere.
+ *  Round 91 — extracted from app/nodes/page.tsx. */
+export const SESSION_STATUS_CHIP_CLASS: Record<string, string> = {
+  working: 'bg-green-500/10 text-green-300 border-green-500/20',
+  idle:    'bg-blue-500/10 text-blue-300 border-blue-500/20',
+  blocked: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
+  error:   'bg-red-500/10 text-red-300 border-red-500/20',
+  offline: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+};
+
+/** Text-only color for session status. Used where a chip background
+ *  would be too heavy — e.g. /node detail header status label. */
+export const SESSION_STATUS_TEXT_CLASS: Record<string, string> = {
+  working: 'text-green-400',
+  idle:    'text-blue-400',
+  blocked: 'text-yellow-400',
+  error:   'text-red-400',
+  offline: 'text-gray-500',
+};
+
+/** Solid bar segment background for the Tasks distribution bar. */
+export const STATUS_BAR_CLASS: Record<string, string> = {
+  created:   'bg-gray-500',
+  delivered: 'bg-blue-500',
+  acked:     'bg-cyan-500',
+  running:   'bg-green-500',
+  replied:   'bg-purple-500',
+  closed:    'bg-gray-600',
+  failed:    'bg-red-500',
+  cancelled: 'bg-yellow-500',
+  expired:   'bg-orange-500',
+};

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

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