@sleep2agi/agent-network-dashboard 0.4.5-preview.2 → 0.4.5-preview.21

package/app/components/CommandPalette.tsx

@@ -22,6 +22,9 @@ interface Command {
   group: 'Recents' | 'Agents' | 'Tasks' | 'Actions' | 'Navigate';
   icon: React.ReactNode;
   perform: (router: ReturnType<typeof useRouter>) => void;
+  /** Matched char indices (set by fuzzy filter for highlight render). */
+  _titleHi?: number[];
+  _hintHi?: number[];
 }
 
 interface SessionRow { alias?: string; status?: string; agent?: string }
@@ -46,19 +49,21 @@ function pushRecent(id: string) {
   } catch {}
 }
 
-/** Fuzzy match: returns a score (higher = better) if every char in `needle`
- *  appears in `hay` in order (consecutive bonus), else -1. Case-insensitive.
- *  Round 18 — replaces literal `String.includes` so `stg` matches `Settings`. */
-function fuzzyScore(hay: string, needle: string): number {
-  if (!needle) return 0;
+/** Fuzzy match: returns score + matched char positions in `hay`. -1 score
+ *  means no match. Round 18 introduced fuzzy; round 20 returns indices so
+ *  the UI can highlight matched chars (Linear / Raycast style). */
+interface FuzzyResult { score: number; indices: number[]; }
+function fuzzyMatch(hay: string, needle: string): FuzzyResult {
+  if (!needle) return { score: 0, indices: [] };
   const H = hay.toLowerCase();
   const N = needle.toLowerCase();
   let hi = 0, ni = 0, score = 0, streak = 0;
+  const indices: number[] = [];
   while (hi < H.length && ni < N.length) {
     if (H[hi] === N[ni]) {
-      score += 2 + streak; // streak bonus rewards contiguous matches
+      score += 2 + streak;
       streak++;
-      // Word-start bonus
+      indices.push(hi);
       if (hi === 0 || /[\s·:_/-]/.test(H[hi - 1])) score += 4;
       ni++;
     } else {
@@ -66,9 +71,25 @@ function fuzzyScore(hay: string, needle: string): number {
     }
     hi++;
   }
-  if (ni < N.length) return -1; // not all needle chars matched
-  // Shorter strings rank slightly higher (preferring exact hits)
-  return score - Math.max(0, H.length - N.length) * 0.05;
+  if (ni < N.length) return { score: -1, indices: [] };
+  return { score: score - Math.max(0, H.length - N.length) * 0.05, indices };
+}
+
+/** Renders `text` with the chars at `indices` wrapped in <mark>. Handles
+ *  unicode (Chinese aliases, emoji) by iterating code points via Array.from. */
+function Highlight({ text, indices }: { text: string; indices: number[] }) {
+  if (!indices.length) return <>{text}</>;
+  const set = new Set(indices);
+  const chars = Array.from(text);
+  return (
+    <>
+      {chars.map((ch, i) =>
+        set.has(i)
+          ? <mark key={i} className="anet-cmdk-mark">{ch}</mark>
+          : <span key={i}>{ch}</span>
+      )}
+    </>
+  );
 }
 
 function NavIcon({ d }: { d: string }) {
@@ -237,21 +258,27 @@ export function CommandPalette() {
     }
     // Fuzzy match — `stg` matches `Settings`, `taska` matches `Task all-time`.
     // Score against title (weight 1.0), hint (0.6), id (0.3). Drop unmatched.
+    // Round 20: keep matched indices for title + hint so we can highlight.
     const scored = pool
       .map(c => {
-        const sTitle = fuzzyScore(c.title, query);
-        const sHint = c.hint ? fuzzyScore(c.hint, query) : -1;
-        const sId = fuzzyScore(c.id, query);
+        const mt = fuzzyMatch(c.title, query);
+        const mh = c.hint ? fuzzyMatch(c.hint, query) : { score: -1, indices: [] };
+        const mi = fuzzyMatch(c.id, query);
         const best = Math.max(
-          sTitle >= 0 ? sTitle * 1.0 : -Infinity,
-          sHint  >= 0 ? sHint  * 0.6 : -Infinity,
-          sId    >= 0 ? sId    * 0.3 : -Infinity,
+          mt.score >= 0 ? mt.score * 1.0 : -Infinity,
+          mh.score >= 0 ? mh.score * 0.6 : -Infinity,
+          mi.score >= 0 ? mi.score * 0.3 : -Infinity,
         );
-        return { c, score: best };
+        return {
+          c,
+          score: best,
+          _titleHi: mt.score >= 0 ? mt.indices : [],
+          _hintHi: mh.score >= 0 ? mh.indices : [],
+        };
       })
       .filter(x => x.score > -Infinity);
     scored.sort((a, b) => b.score - a.score);
-    return scored.map(x => x.c);
+    return scored.map(x => ({ ...x.c, _titleHi: x._titleHi, _hintHi: x._hintHi }));
   }, [query, recentIds, dynamic]);
 
   // Clamp selected when results shrink
@@ -332,8 +359,14 @@ export function CommandPalette() {
                     >
                       <span className={isActive ? 'text-cyan-400' : 'text-gray-500'}>{c.icon}</span>
                       <span className="flex-1 min-w-0">
-                        <span className="block truncate">{c.title}</span>
-                        {c.hint && <span className="block text-[11px] text-gray-600 truncate">{c.hint}</span>}
+                        <span className="block truncate">
+                          <Highlight text={c.title} indices={c._titleHi || []} />
+                        </span>
+                        {c.hint && (
+                          <span className="block text-[11px] text-gray-600 truncate">
+                            <Highlight text={c.hint} indices={c._hintHi || []} />
+                          </span>
+                        )}
                       </span>
                       {isActive && <span className="text-[10px] text-gray-500">↵</span>}
                     </button>

package/app/components/HelpOverlay.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { useRouter } from 'next/navigation';
 
 /** Help overlay — press `?` to see keyboard shortcuts.
  *  Restrained: no animation noise, single column, all global keys in one
@@ -23,29 +24,52 @@ const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
     ],
   },
   {
-    group: 'Command palette',
+    group: 'Navigate (vim-style)',
     items: [
-      { keys: ['↑', '↓'], label: 'Move selection' },
-      { keys: ['↵'], label: 'Activate selected command' },
-      { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
+      { keys: ['g', 'o'], label: 'Go to Overview' },
+      { keys: ['g', 't'], label: 'Go to Tasks' },
+      { keys: ['g', 'n'], label: 'Go to Nodes' },
+      { keys: ['g', 'm'], label: 'Go to Messages' },
+      { keys: ['g', 'w'], label: 'Go to Networks' },
+      { keys: ['g', 'a'], label: 'Go to Admin' },
+      { keys: ['g', 'l'], label: 'Go to Audit Log' },
+      { keys: ['g', 's'], label: 'Go to Settings' },
     ],
   },
   {
-    group: 'Pages',
+    group: 'Command palette',
     items: [
-      { keys: ['click', 'sidebar logo'], label: 'Back to Overview' },
-      { keys: ['Cmd+K', 'Go to agent X'], label: 'Jump straight to a node' },
+      { keys: ['↑', '↓'], label: 'Move selection' },
+      { keys: ['↵'], label: 'Activate selected command' },
+      { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
     ],
   },
 ];
 
+const GO_TARGETS: Record<string, string> = {
+  o: '/',
+  t: '/tasks',
+  n: '/nodes',
+  m: '/messages',
+  w: '/settings/networks',
+  a: '/admin',
+  l: '/logs',
+  s: '/settings',
+};
+
 export function HelpOverlay() {
   const [open, setOpen] = useState(false);
+  const router = useRouter();
+  /** Timestamp when `g` was last pressed. The next single letter within
+   *  1500ms is interpreted as the target page. vim-style `g o`, `g t`, etc. */
+  const gAtRef = useRef<number>(0);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
+      const tag = document.activeElement?.tagName;
+      const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || (document.activeElement as HTMLElement | null)?.isContentEditable;
       // `?` toggles — Shift+/ on US layout. Only when no input is focused.
-      if (e.key === '?' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
+      if (e.key === '?' && !inInput) {
         e.preventDefault();
         setOpen(prev => !prev);
         return;
@@ -53,10 +77,26 @@ export function HelpOverlay() {
       if (e.key === 'Escape' && open) {
         setOpen(false);
       }
+      // Vim-style `g + letter` route shortcuts (round 35). Skip when modifier
+      // keys are held (g is a perfectly fine letter when ⌘ is involved) and
+      // when typing into a field.
+      if (inInput || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key === 'g') {
+        gAtRef.current = Date.now();
+        return;
+      }
+      if (Date.now() - gAtRef.current < 1500) {
+        const target = GO_TARGETS[e.key.toLowerCase()];
+        if (target) {
+          e.preventDefault();
+          gAtRef.current = 0;
+          router.push(target);
+        }
+      }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open]);
+  }, [open, router]);
 
   if (!open) return null;
 

package/app/components/Sidebar.tsx

@@ -51,11 +51,12 @@ export function Sidebar() {
           href={item.href}
           prefetch={false}
           onClick={() => setMobileOpen(false)}
+          title={collapsed ? item.label : undefined}
           className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#1a1a3a] ${
             isActive(item.href)
               ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-nav-active'
               : 'text-gray-400 hover:text-gray-200 hover:bg-[#1a1a2a]'
-          } ${collapsed ? 'justify-center' : ''}`}
+          } ${collapsed ? 'justify-center px-0' : ''}`}
         >
           <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
             <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
@@ -134,45 +135,49 @@ export function Sidebar() {
           {nav}
         </div>
 
-        {/* Sign out + collapse */}
+        {/* Sign out + collapse — round 27: collapsed-state gets icon-only
+            variants so users still have Sign out / Quick search access at
+            56px width, plus title= tooltips. */}
         <div className="absolute bottom-0 left-0 right-0 border-t border-[#2a2a4a] bg-[#0d0d1a]">
-          {!collapsed && (
-            <button
-              onClick={async () => {
-                await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
-                sessionStorage.removeItem('anet_v3_auth');
-                window.location.assign('/login');
-              }}
-              className="w-full flex items-center gap-3 px-5 py-3 text-xs text-gray-500 hover:text-red-400 hover:bg-red-500/5 transition-colors"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+          <button
+            onClick={() => {
+              window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
+            }}
+            title={collapsed ? 'Quick search (⌘K)' : undefined}
+            className={`w-full flex items-center text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors ${
+              collapsed ? 'justify-center px-0 py-2.5' : 'justify-between gap-2 px-5 py-2'
+            }`}
+            aria-label="Open command palette"
+          >
+            <span className={`flex items-center ${collapsed ? '' : 'gap-2'}`}>
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
-              Sign out
-            </button>
-          )}
-          {!collapsed && (
-            <button
-              onClick={() => {
-                // Dispatch a synthetic keypress so the global Cmd+K listener fires
-                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
-              }}
-              className="w-full flex items-center justify-between gap-2 px-5 py-2 text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors"
-              aria-label="Open command palette"
-            >
-              <span className="flex items-center gap-2">
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                Quick search
-              </span>
-              <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>
-            </button>
-          )}
-          <div className={`flex items-center gap-2 px-3 py-2 ${collapsed ? 'justify-center' : 'justify-between'}`}>
+              {!collapsed && 'Quick search'}
+            </span>
+            {!collapsed && <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>}
+          </button>
+          <button
+            onClick={async () => {
+              await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
+              sessionStorage.removeItem('anet_v3_auth');
+              window.location.assign('/login');
+            }}
+            title={collapsed ? 'Sign out' : undefined}
+            className={`w-full flex items-center text-xs text-gray-500 hover:text-red-400 hover:bg-red-500/5 transition-colors ${
+              collapsed ? 'justify-center px-0 py-2.5' : 'gap-3 px-5 py-3'
+            }`}
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+            </svg>
+            {!collapsed && 'Sign out'}
+          </button>
+          <div className={`flex items-center gap-2 ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-between'}`}>
             <ThemeSwitcher compact={collapsed} />
             <button
               onClick={() => setCollapsed(!collapsed)}
+              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
               className="hidden lg:flex p-1.5 rounded text-gray-600 hover:text-gray-400 transition-colors"
               aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
             >

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

@@ -58,12 +58,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 +79,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">
@@ -112,22 +120,57 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
               <span className="text-cyan-400 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 +215,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);