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

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,42 @@ 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">
         {[
-          { 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: '/nodes', label: 'Nodes', value: `${online}/${total}`, sub: `${online > 0 ? Math.round((online/total)*100) : 0}% online`, color: 'text-green-400 border-green-500/20' },
+          { 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' },
+          { 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' },
         ].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-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="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>
+          </Link>
+        ))}
+      </section>
+
+      {/* Nav rail — pure navigation, icon + label, no data */}
+      <section className="mb-6 grid grid-cols-3 gap-2 sm:gap-3">
+        {[
+          { 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="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;
@@ -201,15 +202,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 */}