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

package/app/admin/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useSessions, useHealth, useStats } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 export default function AdminPage() {
   const { sessions } = useSessions();
@@ -72,9 +73,32 @@ export default function AdminPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <h1 className="text-2xl font-bold text-white mb-6 lg:ml-0 ml-10">Admin</h1>
+      <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Admin</h1>
+
+      {/* Section anchor nav — same pattern as Settings r28. */}
+      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+        {[
+          { href: '#status',  label: 'Status' },
+          { href: '#actions', label: 'Actions' },
+          { href: '#users',   label: 'Users' },
+        ].map(a => (
+          <a key={a.href} href={a.href}
+            className="rounded-md px-2.5 py-1 text-gray-500 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            {a.label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="max-w-6xl space-y-10">
+
+        {/* ── Group: Status ─────────────────────────────────────── */}
+        <div id="status" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Status</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl">
         {/* Server Overview */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Server Overview</h2>
@@ -107,6 +131,43 @@ export default function AdminPage() {
           )}
         </section>
 
+        {/* Online Sessions — pulled into Status group (was below Send Task) */}
+        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-gray-300 mb-4">
+            Online Sessions <span className="text-gray-600">({onlineNodes.length})</span>
+          </h2>
+          <div className="space-y-2 max-h-80 overflow-y-auto">
+            {onlineNodes.length === 0 ? (
+              <div className="text-xs text-gray-600 text-center py-4">No online sessions</div>
+            ) : onlineNodes.map(s => (
+              <div key={s.alias} className="flex items-center gap-3 bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
+                <AliasAvatar alias={s.alias} size={20} />
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm text-white font-medium truncate">{s.alias}</div>
+                  <div className="text-xs text-gray-500 truncate">{s.agent || '--'} · {s.task || 'idle'}</div>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <span className={`text-xs px-2 py-0.5 rounded border ${
+                    s.status === 'working' ? 'bg-green-900/30 text-green-300 border-green-800/30' : 'bg-blue-900/30 text-blue-300 border-blue-800/30'
+                  }`}>{s.status}</span>
+                  <span className="text-[10px] text-gray-600">{timeAgo(s.updated_at)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+          </div>
+        </div>
+
+        {/* ── Group: Actions ────────────────────────────────────── */}
+        <div id="actions" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Actions</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
         {/* Broadcast */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Broadcast</h2>
@@ -167,30 +228,17 @@ export default function AdminPage() {
           {taskResult && <div className={`mt-2 text-xs ${taskResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{taskResult}</div>}
         </section>
 
-        {/* Online Sessions */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4">
-            Online Sessions <span className="text-gray-600">({onlineNodes.length})</span>
-          </h2>
-          <div className="space-y-2 max-h-80 overflow-y-auto">
-            {onlineNodes.length === 0 ? (
-              <div className="text-xs text-gray-600 text-center py-4">No online sessions</div>
-            ) : onlineNodes.map(s => (
-              <div key={s.alias} className="flex items-center justify-between bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
-                <div className="min-w-0">
-                  <div className="text-sm text-white font-medium truncate">{s.alias}</div>
-                  <div className="text-xs text-gray-500 truncate">{s.agent || '--'} · {s.task || 'idle'}</div>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  <span className={`text-xs px-2 py-0.5 rounded border ${
-                    s.status === 'working' ? 'bg-green-900/30 text-green-300 border-green-800/30' : 'bg-blue-900/30 text-blue-300 border-blue-800/30'
-                  }`}>{s.status}</span>
-                  <span className="text-[10px] text-gray-600">{timeAgo(s.updated_at)}</span>
-                </div>
-              </div>
-            ))}
           </div>
-        </section>
+        </div>
+
+        {/* ── Group: Users ──────────────────────────────────────── */}
+        <div id="users" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Users</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
         {/* User Management (V3 Auth) */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Register User (V3)</h2>
@@ -219,6 +267,10 @@ export default function AdminPage() {
           </div>
           {regResult && <div className={`mt-2 text-xs ${regResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{regResult}</div>}
         </section>
+
+          </div>
+        </div>
+
       </div>
     </div>
   );

package/app/components/AgentCard.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { Session } from './types';
 import { timeAgo } from './utils';
+import { AliasAvatar } from './AliasAvatar';
 
 interface AgentCardProps {
   session: Session;
@@ -27,17 +28,20 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
-      className={`block rounded-xl border p-4 transition-all duration-300 cursor-pointer ${
+      className={`anet-agent-card group relative block rounded-xl border p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
         hasSse
           ? `bg-[#111128] border-[#2a2a4a] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
           : 'bg-[#0d0d1a] border-[#1a1a2a] opacity-40'
       }`}
     >
-      {/* Header: name + status */}
+      {/* Header: avatar + name + status. Avatar carries the alias→hue map
+          shared with Messages/Nodes/Tasks/Overview; the live status dot
+          stays as a small pulse-capable indicator. */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2 min-w-0">
-          <span className={`inline-block w-2 h-2 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
+          <AliasAvatar alias={s.alias} size={22} />
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
+          <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
         </div>
         <span className={`text-[11px] px-2 py-0.5 rounded-md border shrink-0 ${cfg.bg} ${cfg.text}`}>
           {hasSse ? s.status : 'offline'}
@@ -79,9 +83,12 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         </div>
       )}
 
-      {/* Footer: time + chat */}
+      {/* Footer: time + chat + hover chevron affordance (round 44).
+          The card is a <Link> so it's clickable everywhere, but with no
+          visible cue users may not realise. Chevron appears on hover and
+          slides right ~2px for a "drill in" hint. */}
       <div className="mt-3 flex justify-between items-center text-[10px] text-gray-600">
-        <span>{s.server || '--'}</span>
+        <span className="truncate" title={s.server || ''}>{s.server || '--'}</span>
         <div className="flex items-center gap-2">
           {onChat && hasSse && (
             <button
@@ -92,6 +99,13 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
             </button>
           )}
           <span>{timeAgo(s.updated_at)}</span>
+          <svg
+            aria-hidden
+            className="w-3 h-3 text-gray-700 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
         </div>
       </div>
     </Link>

package/app/components/AliasAvatar.tsx

@@ -0,0 +1,51 @@
+/** Hue-hashed avatar pill for agent aliases. Same alias → same color across
+ *  every page (Messages, Nodes, TopoGraph). Use the `size` prop for inline
+ *  pills (16/20) vs card headers (28). Round 21 introduced the palette;
+ *  round 22 promotes it from app/messages to a shared component. */
+
+const AVATAR_HUES = [180, 200, 220, 270, 300, 330, 30, 90];
+
+export function aliasAvatarColors(alias: string): { bg: string; ring: string; text: string } {
+  let h = 0;
+  for (let i = 0; i < alias.length; i++) h = (h * 31 + alias.charCodeAt(i)) >>> 0;
+  const hue = AVATAR_HUES[h % AVATAR_HUES.length];
+  return {
+    bg: `hsl(${hue} 55% 22%)`,
+    ring: `hsl(${hue} 60% 45%)`,
+    text: `hsl(${hue} 80% 78%)`,
+  };
+}
+
+export function aliasInitial(alias?: string): string {
+  if (!alias) return '·';
+  const ch = alias.trim().match(/[\p{L}\p{N}]/u)?.[0] || alias.trim()[0] || '·';
+  return ch.toUpperCase();
+}
+
+interface AliasAvatarProps {
+  alias: string;
+  size?: number;
+  className?: string;
+}
+
+export function AliasAvatar({ alias, size = 28, className = '' }: AliasAvatarProps) {
+  const c = aliasAvatarColors(alias);
+  const fs = Math.max(9, Math.round(size * 0.42));
+  return (
+    <span
+      className={`anet-alias-avatar inline-flex items-center justify-center rounded-full border shrink-0 font-semibold ${className}`}
+      style={{
+        width: size,
+        height: size,
+        fontSize: fs,
+        backgroundColor: c.bg,
+        borderColor: c.ring,
+        color: c.text,
+      }}
+      title={alias}
+      aria-hidden
+    >
+      {aliasInitial(alias)}
+    </span>
+  );
+}

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