@sleep2agi/agent-network-dashboard 0.4.4-preview.0 → 0.4.5-preview.1

package/app/messages/page.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from 'react';
 import { useMessages } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
+import { EmptyState } from '../components/EmptyState';
 
 interface MessageItem {
   id: string;
@@ -186,11 +187,7 @@ export default function MessagesPage() {
           {[1, 2, 3, 4, 5].map(i => <div key={i} className="h-20 rounded-2xl bg-gray-800/20" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="text-gray-600 text-4xl mb-4">--</div>
-          <h3 className="text-gray-400 text-lg font-medium mb-2">No messages</h3>
-          <p className="text-gray-600 text-sm">Messages between agents will appear here.</p>
-        </div>
+        <EmptyState variant="messages" />
       ) : viewMode === 'grouped' ? (
         <div className="space-y-4">
           {conversations.map((conv, ci) => (

package/app/nodes/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useSessions, useHealth } from '../lib/hooks';
 import { TaskChatPanel } from '../components/TaskChatPanel';
+import { EmptyState } from '../components/EmptyState';
 import type { Session } from '../components/types';
 
 const STATUS_COLORS: Record<string, string> = {
@@ -163,7 +164,11 @@ export default function NodesPage() {
           {[1,2,3,4].map(i => <div key={i} className="h-16 bg-gray-800/20 rounded-lg" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <div className="text-center py-16 text-gray-600">No nodes match your filters.</div>
+        <EmptyState
+          variant="nodes"
+          title="No nodes match your filters"
+          sub="Try clearing search or status filters, or wait for an agent to register."
+        />
       ) : viewMode === 'grid' ? (
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
           {filtered.map(s => {

package/app/page.tsx

@@ -8,7 +8,8 @@ import { BroadcastBar } from './components/BroadcastBar';
 import { TopoGraph } from './components/TopoGraph';
 import { AgentCard } from './components/AgentCard';
 import { InboxPanel } from './components/InboxPanel';
-import { LoadingSkeleton, EmptyState } from './components/LoadingSkeleton';
+import { LoadingSkeleton } from './components/LoadingSkeleton';
+import { NodesEmptyState as EmptyState } from './components/EmptyState';
 import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
@@ -185,19 +186,115 @@ export default function Dashboard() {
         </section>
       )}
 
-      {/* Quick Actions */}
-      <section className="mb-6 grid grid-cols-3 sm:grid-cols-6 gap-2">
+      {/* Quick Actions — split into two distinct intents:
+          (1) Top: live stat cards (carry data, drill-in on click)
+          (2) Bottom: pure nav rail (no number, icon + label)
+          Previously these were mixed in one row of 6, mixing data cells
+          ("0/0", "--", "0") with placeholder arrows ("→ Messages").
+          Users couldn't tell which were stats vs which were navigation. */}
+      <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
+        {(() => {
+          // Build breakdown popover content per card. Pure data — pure CSS
+          // popover (no JS state) wires the hover-show transition below.
+          const idleCount = sessions.filter(s => isOnline(s) && s.status !== 'working').length;
+          const offlineCount = total - online;
+          const orderedStatuses = ['running', 'replied', 'failed', 'cancelled', 'expired', 'closed', 'created', 'delivered', 'acked'];
+          const failedRecent = tasks.filter((t: { status: string }) => t.status === 'failed').length;
+
+          const cards = [
+            {
+              href: '/nodes', label: 'Nodes',
+              value: `${online}/${total}`,
+              sub: `${total > 0 ? Math.round((online / total) * 100) : 0}% online`,
+              color: 'text-green-400 border-green-500/20',
+              popover: total === 0 ? null : [
+                { k: 'working', v: working, dot: '', color: '#4ade80' },
+                { k: 'idle', v: idleCount, dot: '', color: '#22d3ee' },
+                { k: 'offline', v: offlineCount, dot: '', color: '#9ca3af' },
+              ],
+            },
+            {
+              href: '/tasks', label: 'Tasks',
+              value: String(Object.values(taskStats).reduce((a, b) => a + b, 0) || 0),
+              sub: 'all-time',
+              color: 'text-cyan-400 border-cyan-500/20',
+              popover: Object.keys(taskStats).length === 0 ? null
+                : orderedStatuses
+                    .filter(s => taskStats[s])
+                    .map(s => {
+                      // Inline hex avoids Tailwind purging dynamic
+                      // `bg-${color}-400` class names.
+                      const hex = ({
+                        running:   '#4ade80', replied:   '#a78bfa', failed:    '#f87171',
+                        cancelled: '#facc15', expired:   '#fb923c', closed:    '#9ca3af',
+                        created:   '#9ca3af', delivered: '#60a5fa', acked:     '#22d3ee',
+                      } as Record<string, string>)[s] || '#9ca3af';
+                      return { k: s, v: taskStats[s], dot: '', color: hex };
+                    }),
+            },
+            {
+              href: '/tasks?status=failed', label: 'Failed',
+              value: String(taskStats['failed'] || 0),
+              sub: taskStats['failed'] ? 'needs review' : 'none',
+              color: taskStats['failed'] ? 'text-red-400 border-red-500/25' : 'text-gray-500 border-gray-700/30',
+              popover: !failedRecent ? [{ k: 'no failures yet', v: '', dot: '', color: '#4b5563' }]
+                : [{ k: `${failedRecent} in current view`, v: '', dot: '', color: '#f87171' }],
+            },
+          ];
+
+          return cards.map(a => (
+            <Link
+              key={a.href}
+              href={a.href}
+              prefetch={false}
+              className={`anet-stat-link group relative rounded-xl border ${a.color} bg-[#111128] px-3 py-3 transition-all hover:-translate-y-px`}
+            >
+              <div className="flex items-baseline justify-between">
+                <div className={`text-xl font-semibold tabular-nums ${a.color.split(' ')[0]}`}>{a.value}</div>
+                <div className="hidden sm:block text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors">View →</div>
+              </div>
+              <div className="text-[11px] text-gray-400 mt-0.5">{a.label}</div>
+              <div className="text-[10px] text-gray-600 mt-px">{a.sub}</div>
+
+              {/* Hover popover — CSS-only, restrained. Hidden on touch
+                  (no :hover) so mobile is unaffected. Positioned just
+                  below the card so it doesn't fight nav rail. */}
+              {a.popover && a.popover.length > 0 && (
+                <div className="anet-stat-popover hidden md:block pointer-events-none absolute left-2 right-2 top-full mt-1 z-20 rounded-lg border border-[#2a2a4a] bg-[#0d0d1a] shadow-lg shadow-black/30 px-3 py-2 opacity-0 translate-y-[-2px] group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-150 delay-100">
+                  <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-1.5">Breakdown</div>
+                  <ul className="space-y-1">
+                    {a.popover.map(row => (
+                      <li key={row.k} className="flex items-center gap-2 text-[11px]">
+                        <span
+                          className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                          style={{ backgroundColor: row.color }}
+                          aria-hidden
+                        />
+                        <span className="text-gray-400 capitalize">{row.k}</span>
+                        {row.v !== '' && <span className="ml-auto text-gray-300 tabular-nums font-medium">{row.v}</span>}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </Link>
+          ));
+        })()}
+      </section>
+
+      {/* Nav rail — pure navigation, icon + label, no data */}
+      <section className="mb-6 grid grid-cols-3 gap-2 sm:gap-3">
         {[
-          { href: '/nodes', label: 'Nodes', value: `${online}/${total}`, color: 'text-green-400 border-green-500/15' },
-          { href: '/tasks', label: 'Tasks', value: String(Object.values(taskStats).reduce((a, b) => a + b, 0) || '--'), color: 'text-cyan-400 border-cyan-500/15' },
-          { href: '/tasks?status=failed', label: 'Failed', value: String(taskStats['failed'] || 0), color: taskStats['failed'] ? 'text-red-400 border-red-500/20' : 'text-gray-600 border-gray-700/30' },
-          { href: '/messages', label: 'Messages', value: '→', color: 'text-blue-400 border-blue-500/15' },
-          { href: '/logs', label: 'Logs', value: '→', color: 'text-purple-400 border-purple-500/15' },
-          { href: '/admin', label: 'Admin', value: '→', color: 'text-gray-400 border-gray-500/15' },
+          { href: '/messages', label: 'Messages', icon: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' },
+          { href: '/logs', label: 'Audit log', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
+          { href: '/admin', label: 'Admin', icon: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2' },
         ].map(a => (
-          <Link key={a.href} href={a.href} prefetch={false} className={`text-center rounded-xl border ${a.color} bg-[#111128] px-3 py-2.5 hover:bg-[#161630] transition-colors`}>
-            <div className={`text-lg font-bold tabular-nums ${a.color.split(' ')[0]}`}>{a.value}</div>
-            <div className="text-[10px] text-gray-500">{a.label}</div>
+          <Link key={a.href} href={a.href} prefetch={false}
+            className="anet-nav-tile flex items-center justify-center gap-2 rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-2.5 text-[12px] text-gray-400 hover:text-gray-200 transition-colors">
+            <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d={a.icon} />
+            </svg>
+            <span>{a.label}</span>
           </Link>
         ))}
       </section>

package/app/settings/networks/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { timeAgo } from '../../components/utils';
+import { EmptyState } from '../../components/EmptyState';
 import useSWR from 'swr';
 
 const fetcher = (url: string) => fetch(url).then(r => r.json());
@@ -126,7 +127,11 @@ export default function NetworksPage() {
           {loading ? (
             <div className="animate-pulse space-y-2">{[1,2].map(i => <div key={i} className="h-14 bg-gray-800/20 rounded" />)}</div>
           ) : networks.length === 0 ? (
-            <div className="text-xs text-gray-600 text-center py-4">No networks found. Create one or sign in with V3 auth.</div>
+            <EmptyState
+              variant="networks"
+              compact
+              sub="Create your first network above, or sign in with V3 auth to see existing ones."
+            />
           ) : (
             <div className="space-y-3">
               {networks.map(n => (

package/app/settings/page.tsx

@@ -20,7 +20,11 @@ export default function SettingsPage() {
     <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">Settings</h1>
 
-      <div className="max-w-2xl space-y-6">
+      <div className="max-w-2xl space-y-8">
+        {/* ── Group: Connection ─────────────────────────────────── */}
+        <div className="space-y-4">
+          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Connection</div>
+
         {/* CommHub Connection */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">CommHub Connection</h2>
@@ -96,25 +100,41 @@ export default function SettingsPage() {
             </div>
           </div>
         </section>
+        </div>
+
+        {/* ── Group: Account ────────────────────────────────────── */}
+        <div className="space-y-4">
+          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Account</div>
 
         {/* License */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4">License</h2>
+          <h2 className="text-sm font-semibold text-gray-300 mb-4 flex items-center gap-2">
+            License
+            {licData?.license && (
+              <span
+                className={`inline-flex items-center gap-1.5 text-[10px] font-medium px-2 py-0.5 rounded-full border ${
+                  licData.license.type === 'pro'
+                    ? 'text-green-300 bg-green-500/10 border-green-500/30'
+                    : licData.license.days_left <= 7
+                      ? 'text-red-300 bg-red-500/10 border-red-500/30'
+                      : 'text-amber-300 bg-amber-500/10 border-amber-500/30'
+                }`}
+              >
+                <span aria-hidden className="w-1.5 h-1.5 rounded-full bg-current" />
+                {licData.license.type}{licData.license.days_left ? ` · ${licData.license.days_left}d left` : ''}
+              </span>
+            )}
+          </h2>
           {licData?.license ? (
             <div className="space-y-3 text-sm">
-              <div className={rowClass}>
-                <span className="text-gray-500">Type</span>
-                <span className={`font-medium ${licData.license.type === 'pro' ? 'text-green-400' : 'text-yellow-400'}`}>
-                  {licData.license.type}
-                </span>
-              </div>
-              <div className={rowClass}>
-                <span className="text-gray-500">Days Left</span>
-                <span className={`${licData.license.days_left <= 7 ? 'text-red-400' : 'text-gray-300'}`}>
-                  {licData.license.days_left} days
-                  {licData.license.days_left <= 7 && ' — expiring soon!'}
-                </span>
-              </div>
+              {/* Type + Days Left are summarized in the inline chip in the
+                  header. Surface "expiring soon" only when relevant. */}
+              {licData.license.days_left <= 7 && (
+                <div className={rowClass}>
+                  <span className="text-red-400 font-medium">⚠ Expiring soon</span>
+                  <span className="text-red-400">{licData.license.days_left} days left</span>
+                </div>
+              )}
               <div className={rowClass}>
                 <span className="text-gray-500">Expires</span>
                 <span className={`text-gray-300 ${valueClass}`}>{licData.license.expires_at}</span>
@@ -195,6 +215,26 @@ export default function SettingsPage() {
           {pwdResult && <div className={`mt-2 text-xs ${pwdResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{pwdResult}</div>}
         </section>
 
+        {/* Session — tone-neutral, no longer "danger zone" red */}
+        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-gray-300 mb-4">Sign out</h2>
+          <p className="text-xs text-gray-500 mb-3">Signing out clears your dashboard session cookie. You'll return to the login page.</p>
+          <button
+            onClick={async () => {
+              await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
+              window.location.assign('/login');
+            }}
+            className="px-4 py-2 bg-transparent hover:bg-[#1a1a2a] text-gray-300 text-sm rounded-lg border border-[#2a2a4a] hover:border-[#3a3a5a] transition-colors"
+          >
+            Sign out
+          </button>
+        </section>
+        </div>
+
+        {/* ── Group: Resources ──────────────────────────────────── */}
+        <div className="space-y-4">
+          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Resources</div>
+
         {/* API Tokens + Networks */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <Link href="/settings/tokens" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
@@ -208,21 +248,8 @@ export default function SettingsPage() {
             <span className="text-xs text-cyan-400 mt-3 inline-block">Manage &rarr;</span>
           </Link>
         </div>
+        </div>
 
-        {/* Danger Zone */}
-        <section className="bg-[#111128] border border-red-900/30 rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-red-400 mb-4">Session</h2>
-          <p className="text-xs text-gray-500 mb-3">Sign out will clear your dashboard session cookie.</p>
-          <button
-            onClick={async () => {
-              await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
-              window.location.assign('/login');
-            }}
-            className="px-4 py-2 bg-red-600/20 hover:bg-red-600/30 text-red-300 text-sm rounded-lg border border-red-800/30 transition-colors"
-          >
-            Sign out
-          </button>
-        </section>
       </div>
     </div>
   );

package/app/settings/tokens/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { timeAgo } from '../../components/utils';
+import { EmptyState } from '../../components/EmptyState';
 
 interface Token {
   token_id: string;
@@ -100,7 +101,11 @@ export default function TokensPage() {
           {loading ? (
             <div className="animate-pulse space-y-2">{[1,2].map(i => <div key={i} className="h-12 bg-gray-800/20 rounded" />)}</div>
           ) : tokens.length === 0 ? (
-            <div className="text-xs text-gray-600 text-center py-4">No tokens. V3 auth required.</div>
+            <EmptyState
+              variant="tokens"
+              compact
+              sub="Tokens authenticate CLI tools and external integrations. Sign in with V3 auth, then create one above."
+            />
           ) : (
             <div className="space-y-2">
               {tokens.map(t => (

package/app/tasks/page.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useNetworkId } from '../lib/network-context';
 import { TaskDrawer } from '../components/TaskDrawer';
+import { EmptyState } from '../components/EmptyState';
 
 interface Task {
   task_id: string;
@@ -47,6 +48,21 @@ const STATUS_COLORS: Record<string, string> = {
   expired: 'bg-orange-500/10 text-orange-300 border-orange-500/20',
 };
 
+/** Small colored dot per status — visible on every tab (active + inactive)
+ *  so users can scan the row at a glance. Hex inlined to avoid Tailwind
+ *  purging dynamic `bg-${family}-400` class names. */
+const STATUS_DOTS: Record<string, string> = {
+  created:   '#9ca3af',
+  delivered: '#60a5fa',
+  acked:     '#22d3ee',
+  running:   '#4ade80',
+  replied:   '#a78bfa',
+  closed:    '#6b7280',
+  failed:    '#f87171',
+  cancelled: '#facc15',
+  expired:   '#fb923c',
+};
+
 function statusBadge(status: string) {
   const color = STATUS_COLORS[status] || 'bg-gray-500/10 text-gray-400 border-gray-500/20';
   return `text-xs px-2 py-0.5 rounded-md border ${color}`;
@@ -133,16 +149,28 @@ function TasksContent() {
         </span>
       </div>
 
-      {/* Status Tabs */}
-      <div className="flex flex-wrap gap-1 mb-4 bg-[#111128] rounded-lg border border-[#2a2a4a] p-1">
+      {/* Status Tabs — color-coded dots per status family so users can
+          scan the row at a glance. Active tab gets full chip styling
+          (bg + border + text color), inactive tabs only carry the dot
+          + neutral label so the active state remains the strong cue.
+          On narrow viewports (<sm) the row scrolls horizontally with
+          subtle fade edges instead of wrapping to 2 lines. */}
+      <div className="anet-tabstrip flex sm:flex-wrap gap-1 mb-4 bg-[#111128] rounded-lg border border-[#2a2a4a] p-1 overflow-x-auto sm:overflow-x-visible scrollbar-thin">
         {['', ...STATUS_OPTIONS.filter(Boolean)].map(s => (
           <button key={s} onClick={() => setFilterStatus(s)}
-            className={`px-3 py-1.5 rounded-md text-xs transition-colors ${
+            className={`px-3 py-1.5 rounded-md text-xs transition-colors flex items-center gap-1.5 shrink-0 whitespace-nowrap ${
               filterStatus === s
                 ? `${STATUS_COLORS[s] || 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'} border`
-                : 'text-gray-500 hover:text-gray-300'
+                : 'text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]/40'
             }`}>
-            {s || 'All'}
+            {s && (
+              <span
+                aria-hidden
+                className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                style={{ backgroundColor: STATUS_DOTS[s] || '#6b7280' }}
+              />
+            )}
+            <span>{s || 'All'}</span>
           </button>
         ))}
       </div>
@@ -201,15 +229,12 @@ function TasksContent() {
           ))}
         </div>
       ) : tasks.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="text-gray-600 text-4xl mb-4">--</div>
-          <h3 className="text-gray-400 text-lg font-medium mb-2">No tasks found</h3>
-          <p className="text-gray-600 text-sm">
-            {filterStatus || filterFrom || filterTo
-              ? 'Try adjusting your filters.'
-              : 'Tasks will appear here when agents send them via CommHub.'}
-          </p>
-        </div>
+        <EmptyState
+          variant="tasks"
+          sub={(filterStatus || filterFrom || filterTo)
+            ? 'No tasks match the current filters. Try clearing them.'
+            : 'Tasks will appear here when agents send them via CommHub.'}
+        />
       ) : (
         <div className="space-y-2">
           {/* Table header */}