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

package/app/components/TaskChatPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { timeAgo } from './utils';
+import { AliasAvatar } from './AliasAvatar';
 
 interface ChatTask {
   task_id: string;
@@ -386,7 +387,10 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               {m.result && (
                 <div className="flex justify-start">
                   <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
-                    <div className="text-[10px] text-green-400 font-medium mb-1.5">{m.to_name}</div>
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                      {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
+                      <span className="text-[10px] text-gray-200 font-medium">{m.to_name}</span>
+                    </div>
                     <div className="text-[13px] text-gray-200">
                       <MarkdownContent text={m.result} />
                     </div>
@@ -422,7 +426,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   {filteredMentions.map(node => (
                     <button key={node} onClick={() => insertMention(node)}
                       className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-cyan-500/10 transition-colors">
-                      <span className="w-2 h-2 rounded-full bg-cyan-400 shrink-0" />
+                      <AliasAvatar alias={node} size={16} />
                       <span className="text-gray-300">{node}</span>
                     </button>
                   ))}
@@ -471,14 +475,12 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/30 z-40 lg:hidden" onClick={onClose} />
+      <div className="fixed inset-0 bg-black/30 z-40 lg:hidden 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 animate-slide-in">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-[#2a2a4a] bg-[#0d0d1a]">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500/30 to-blue-500/30 flex items-center justify-center text-xs font-bold text-cyan-300">
-              {alias.slice(0, 2)}
-            </div>
+            <AliasAvatar alias={alias} size={32} />
             <div>
               <div className="text-sm font-semibold text-white">{alias}</div>
               <div className="text-[10px] text-gray-500">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
@@ -492,10 +494,6 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         </div>
         {chatContent}
       </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/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,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/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,63 @@
+/** 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',
+};
+
+/** 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;