@sleep2agi/agent-network-dashboard 0.4.5-preview.9 → 0.4.5-preview.91

package/app/components/Sidebar.tsx

@@ -25,6 +25,8 @@ interface SidebarNetwork {
   network_id: string;
   network_name: string;
   role?: string;
+  /** Round 107: live agent count, derived from /api/status sessions. */
+  agentCount?: number;
 }
 
 const ROLE_ICON: Record<string, string> = { owner: '⭐', admin: '🔧', member: '👤', viewer: '👁' };
@@ -35,7 +37,26 @@ export function Sidebar() {
   const [mobileOpen, setMobileOpen] = useState(false);
   const { networkId, setNetworkId } = useNetworkId();
   const { data: netData } = useSWR<{ networks: SidebarNetwork[] }>('/api/hub/networks', networkFetcher, { refreshInterval: 15000, dedupingInterval: 10000 });
-  const networks = netData?.networks || [];
+  // Round 107 (issue #92): /api/networks can be scope-limited (a hub owner's
+  // token may only list "default" even when agents live in other networks).
+  // The unfiltered /api/status response carries every visible session with
+  // its network_id, so derive networks from there and merge them in — the
+  // admin can then switch to any network that actually has agents.
+  const { data: statusData } = useSWR<StatusData>(
+    '/api/hub/status', statusFetcher, { refreshInterval: 15000, dedupingInterval: 10000 },
+  );
+  const apiNetworks = netData?.networks || [];
+  const networks: SidebarNetwork[] = (() => {
+    const agentCount = new Map<string, number>();
+    for (const s of statusData?.sessions || []) {
+      if (s.network_id) agentCount.set(s.network_id, (agentCount.get(s.network_id) || 0) + 1);
+    }
+    const known = new Set(apiNetworks.map(n => n.network_id));
+    const derived: SidebarNetwork[] = [...agentCount.keys()]
+      .filter(id => !known.has(id))
+      .map(id => ({ network_id: id, network_name: id }));
+    return [...apiNetworks, ...derived].map(n => ({ ...n, agentCount: agentCount.get(n.network_id) || 0 }));
+  })();
 
   const isActive = (href: string) => {
     if (href === '/') return pathname === '/';
@@ -51,11 +72,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} />
@@ -81,10 +103,11 @@ export function Sidebar() {
         </svg>
       </button>
 
-      {/* Mobile overlay */}
+      {/* Mobile overlay — round 47: fades in via anet-fade-in (150ms ease-out)
+          matching the TaskDrawer / TaskChatPanel backdrop. */}
       {mobileOpen && (
         <div
-          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
+          className="fixed inset-0 bg-black/50 z-30 lg:hidden anet-fade-in"
           onClick={() => setMobileOpen(false)}
         />
       )}
@@ -93,13 +116,15 @@ export function Sidebar() {
           but in light/mint we want a distinct surface, so we layer
           `lg:bg-white` / `lg:dark:bg-[#0d0d1a]` via the theme attribute.
           The CSS shim in globals.css upgrades sidebar bg to bg-secondary
-          in light themes so the sidebar reads as its own card. */}
+          in light themes so the sidebar reads as its own card.
+          Round 47: explicit ease-out curve + slight shadow so the drawer
+          edge "leaves a trail" as it slides in. */}
       <aside data-anet-sidebar="true" className={`
         fixed top-0 left-0 h-full z-40 bg-[#0d0d1a] border-r border-[#2a2a4a]
-        transition-all duration-200
+        transition-transform duration-200 ease-out
         ${collapsed ? 'w-16' : 'w-52'}
-        ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
-        lg:translate-x-0 lg:static lg:shrink-0
+        ${mobileOpen ? 'translate-x-0 shadow-2xl shadow-black/40 lg:shadow-none' : '-translate-x-full'}
+        lg:translate-x-0 lg:static lg:shrink-0 lg:shadow-none
       `}>
         {/* Brand header — round 4: 3-node mesh mark matches /login,
             with an inline live "online" pulse so every page surfaces
@@ -116,6 +141,7 @@ export function Sidebar() {
                 <button
                   key={n.network_id}
                   onClick={() => { setNetworkId(n.network_id); setMobileOpen(false); }}
+                  title={n.network_id}
                   className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors text-left ${
                     networkId === n.network_id
                       ? 'bg-cyan-500/10 text-cyan-300'
@@ -123,7 +149,14 @@ export function Sidebar() {
                   }`}
                 >
                   <span>{ROLE_ICON[n.role || 'member'] || '👤'}</span>
-                  <span className="truncate">{n.network_name}</span>
+                  <span className="truncate flex-1">{n.network_name}</span>
+                  {/* Round 107 (issue #92): show live agent count so an
+                      admin can spot which network actually has agents —
+                      the whole point of the bug was a network with 30
+                      agents being invisible. */}
+                  {n.agentCount ? (
+                    <span className="shrink-0 tabular-nums text-[10px] text-gray-600">{n.agentCount}</span>
+                  ) : null}
                 </button>
               ))}
             </div>
@@ -134,45 +167,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'}
             >
@@ -188,7 +225,7 @@ export function Sidebar() {
 }
 
 interface StatusData {
-  sessions?: Array<{ status?: string; alias?: string }>;
+  sessions?: Array<{ status?: string; alias?: string; network_id?: string }>;
 }
 
 const statusFetcher = (url: string) =>

package/app/components/StatsBar.tsx

@@ -10,9 +10,10 @@ interface StatsBarProps {
 
 export function StatsBar({ online, working, total, version, uptime }: StatsBarProps) {
   const onlinePercent = total > 0 ? Math.round((online / total) * 100) : 0;
+  const fleetEmpty = total === 0;
 
   return (
-    <div className="mb-8">
+    <div className={fleetEmpty ? 'mb-4' : 'mb-8'}>
       {/* Title row */}
       <div className="flex flex-wrap items-center gap-3 mb-4">
         <h1 className="text-2xl font-bold text-white tracking-tight">Agent Network</h1>
@@ -21,41 +22,63 @@ export function StatsBar({ online, working, total, version, uptime }: StatsBarPr
         </span>
       </div>
 
-      {/* Stats grid */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        <StatCard
-          value={online}
-          label="Online"
-          sub={`${onlinePercent}% of fleet`}
-          color="text-green-400"
-          accent="from-green-500/20 to-green-500/0"
-          border="border-green-500/15"
-        />
-        <StatCard
-          value={working}
-          label="Working"
-          sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
-          color="text-cyan-400"
-          accent="from-cyan-500/20 to-cyan-500/0"
-          border="border-cyan-500/15"
-        />
-        <StatCard
-          value={total - online}
-          label="Offline"
-          sub={total - online === 0 ? 'All systems go' : `${total - online} disconnected`}
-          color="text-gray-400"
-          accent="from-gray-500/10 to-gray-500/0"
-          border="border-gray-500/15"
-        />
-        <StatCard
-          value={total}
-          label="Total"
-          sub="Registered nodes"
-          color="text-white"
-          accent="from-blue-500/15 to-blue-500/0"
-          border="border-blue-500/15"
-        />
-      </div>
+      {fleetEmpty ? (
+        /* Round 72: thin status strip replaces the 4-card grid when fleet
+           is empty. Saves ~280px on mobile (CTA y=650 → ~370) and keeps
+           the same data visible in a single inline row. */
+        <div className="anet-stat-strip flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 border-t border-b border-[#2a2a4a] py-2">
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> online
+          </span>
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> working
+          </span>
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-300 tabular-nums">0</span> registered
+          </span>
+        </div>
+      ) : (
+        /* Populated state — full 4-card grid as before */
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <StatCard
+            value={online}
+            label="Online"
+            sub={`${onlinePercent}% of fleet`}
+            color="text-green-400"
+            accent="from-green-500/20 to-green-500/0"
+            border="border-green-500/15"
+          />
+          <StatCard
+            value={working}
+            label="Working"
+            sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
+            color="text-cyan-400"
+            accent="from-cyan-500/20 to-cyan-500/0"
+            border="border-cyan-500/15"
+          />
+          <StatCard
+            value={total - online}
+            label="Offline"
+            sub={total - online === 0 ? 'All systems go' : `${total - online} disconnected`}
+            color="text-gray-400"
+            accent="from-gray-500/10 to-gray-500/0"
+            border="border-gray-500/15"
+          />
+          <StatCard
+            value={total}
+            label="Total"
+            sub="Registered nodes"
+            color="text-white"
+            accent="from-blue-500/15 to-blue-500/0"
+            border="border-blue-500/15"
+          />
+        </div>
+      )}
     </div>
   );
 }

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>
     </>
   );
 }