@sleep2agi/agent-network-dashboard 0.4.5-preview.6 → 0.4.5-preview.61

package/app/settings/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useAnetConfig, useHealth, useLicense } from '../lib/hooks';
+import { DASHBOARD_VERSION } from '../lib/version';
 
 export default function SettingsPage() {
   const { config } = useAnetConfig();
@@ -18,12 +19,31 @@ export default function SettingsPage() {
 
   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">Settings</h1>
+      <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Settings</h1>
 
-      <div className="max-w-2xl space-y-8">
+      {/* Section anchor nav (round 28) — jump to a group instead of scrolling
+          through the whole page. Mirrors the section headers below; pages
+          with 7+ cards benefit from a visible table-of-contents. */}
+      <nav className="mb-8 flex flex-wrap gap-1 text-xs">
+        {[
+          { href: '#connection', label: 'Connection' },
+          { href: '#account',    label: 'Account' },
+          { href: '#resources',  label: 'Resources' },
+        ].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-2xl space-y-10">
         {/* ── Group: Connection ─────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Connection</div>
+        <div id="connection" 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">Connection</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* CommHub Connection */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -72,7 +92,7 @@ export default function SettingsPage() {
               <span className={`text-gray-300 ${valueClass}`}>{health?.sessions ?? '--'}</span>
             </div>
             <div className={rowClass}>
-              <span className="text-gray-500">SSE Connections</span>
+              <span className="text-gray-500">SSE streams <span className="text-gray-600">· server</span></span>
               <span className={`text-gray-300 ${valueClass}`}>{health?.sse_connections ?? '--'}</span>
             </div>
             <div className={rowClass}>
@@ -88,7 +108,9 @@ export default function SettingsPage() {
           <div className="space-y-3 text-sm">
             <div className={rowClass}>
               <span className="text-gray-500">Version</span>
-              <span className={`text-gray-300 ${valueClass}`}>V2.1</span>
+              <span className={`text-gray-300 font-mono ${valueClass}`} title="From package.json @sleep2agi/agent-network-dashboard">
+                {DASHBOARD_VERSION}
+              </span>
             </div>
             <div className={rowClass}>
               <span className="text-gray-500">Data Layer</span>
@@ -96,15 +118,18 @@ export default function SettingsPage() {
             </div>
             <div className={rowClass}>
               <span className="text-gray-500">Pages</span>
-              <span className={`text-gray-300 ${valueClass}`}>Overview, Tasks, Nodes, Messages, Settings</span>
+              <span className={`text-gray-300 ${valueClass}`}>Overview, Tasks, Nodes, Messages, Networks, Audit, Server Logs, Admin, Settings</span>
             </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>
+        <div id="account" 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">Account</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* License */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
@@ -232,8 +257,11 @@ export default function SettingsPage() {
         </div>
 
         {/* ── Group: Resources ──────────────────────────────────── */}
-        <div className="space-y-4">
-          <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 px-1">Resources</div>
+        <div id="resources" 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">Resources</div>
+            <div className="flex-1 h-px bg-[#2a2a4a]" />
+          </div>
 
         {/* API Tokens + Networks */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

package/app/tasks/[id]/page.tsx

@@ -4,6 +4,7 @@ import { use } from 'react';
 import Link from 'next/link';
 import useSWR from 'swr';
 import { timeAgo } from '../../components/utils';
+import { STATUS_CHIP_CLASS } from '../../lib/status';
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -55,18 +56,6 @@ function Timeline({ steps }: { steps: TimelineStep[] }) {
   );
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  created: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
-  delivered: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
-  acked: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
-  running: 'bg-green-500/10 text-green-300 border-green-500/20',
-  replied: 'bg-purple-500/10 text-purple-300 border-purple-500/20',
-  closed: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
-  failed: 'bg-red-500/10 text-red-300 border-red-500/20',
-  cancelled: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
-  expired: 'bg-orange-500/10 text-orange-300 border-orange-500/20',
-};
-
 export default function TaskDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
   const { data, isLoading } = useSWR(
@@ -105,7 +94,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
     );
   }
 
-  const statusColor = STATUS_COLORS[task.status] || STATUS_COLORS.created;
+  const statusColor = STATUS_CHIP_CLASS[task.status] || STATUS_CHIP_CLASS.created;
   const steps: TimelineStep[] = [
     { label: 'Created', time: task.created_at, color: 'text-gray-400' },
     { label: 'Delivered', time: task.delivered_at, color: 'text-blue-400' },

package/app/tasks/page.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link';
 import { useNetworkId } from '../lib/network-context';
 import { TaskDrawer } from '../components/TaskDrawer';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
+import { TASK_STATUSES, STATUS_CHIP_CLASS, STATUS_DOT_HEX, STATUS_BAR_CLASS } from '../lib/status';
 
 interface Task {
   task_id: string;
@@ -23,48 +25,8 @@ interface Task {
   expires_at: string;
 }
 
-const STATUS_OPTIONS = [
-  '',
-  'created',
-  'delivered',
-  'acked',
-  'running',
-  'replied',
-  'closed',
-  'failed',
-  'cancelled',
-  'expired',
-];
-
-const STATUS_COLORS: Record<string, string> = {
-  created: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
-  delivered: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
-  acked: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
-  running: 'bg-green-500/10 text-green-300 border-green-500/20',
-  replied: 'bg-purple-500/10 text-purple-300 border-purple-500/20',
-  closed: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
-  failed: 'bg-red-500/10 text-red-300 border-red-500/20',
-  cancelled: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
-  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';
+  const color = STATUS_CHIP_CLASS[status] || 'bg-gray-500/10 text-gray-400 border-gray-500/20';
   return `text-xs px-2 py-0.5 rounded-md border ${color}`;
 }
 
@@ -149,6 +111,13 @@ function TasksContent() {
         </span>
       </div>
 
+      {/* Round 75: hide the status tab strip + From/To filter row when
+          there are no tasks at all. Each tab would show "0" and the
+          filter inputs would have nothing to act on — pure noise above
+          the empty-state CTA. When at least one task exists, the chrome
+          comes back even if the current filter happens to hide
+          everything (so users can clear filters). */}
+      {tasks.length > 0 && <>
       {/* 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
@@ -158,64 +127,96 @@ function TasksContent() {
           elements) hinting more content. */}
       <div className="anet-tabstrip-wrap mb-4">
       <div className="anet-tabstrip flex sm:flex-wrap gap-1 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 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 hover:bg-[#1a1a2a]/40'
-            }`}>
-            {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>
-        ))}
+        {(() => {
+          // Round 56: compute per-status counts so the tab strip doubles as a
+          // status distribution dashboard. Matches Audit Log (r43) + Overview
+          // agent filter (r34) chip-with-count pattern.
+          const counts: Record<string, number> = {};
+          tasks.forEach(t => { counts[t.status] = (counts[t.status] || 0) + 1; });
+          return ['', ...TASK_STATUSES].map(s => {
+            const count = s === '' ? tasks.length : counts[s] || 0;
+            const isActive = filterStatus === s;
+            return (
+              <button
+                key={s}
+                onClick={() => setFilterStatus(s)}
+                disabled={count === 0 && s !== '' && !isActive}
+                className={`px-3 py-1.5 rounded-md text-xs transition-colors flex items-center gap-1.5 shrink-0 whitespace-nowrap disabled:opacity-30 disabled:cursor-not-allowed ${
+                  isActive
+                    ? `${STATUS_CHIP_CLASS[s] || 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'} border`
+                    : 'text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]/40'
+                }`}
+              >
+                {s && (
+                  <span
+                    aria-hidden
+                    className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                    style={{ backgroundColor: STATUS_DOT_HEX[s] || '#6b7280' }}
+                  />
+                )}
+                <span>{s || 'All'}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'opacity-80' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          });
+        })()}
       </div>
       </div>
 
-      {/* From/To Filters */}
-      <div className="flex flex-wrap gap-3 mb-6">
-        <input
-          type="text"
-          value={filterFrom}
-          onChange={e => setFilterFrom(e.target.value)}
-          placeholder="From node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
-        <input
-          type="text"
-          value={filterTo}
-          onChange={e => setFilterTo(e.target.value)}
-          placeholder="To node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
+      {/* From/To Filters — same visual block as the status tabs above. */}
+      <div className="flex flex-wrap items-center gap-2 mb-6">
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">From</span>
+          <input
+            type="text"
+            value={filterFrom}
+            onChange={e => setFilterFrom(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">To</span>
+          <input
+            type="text"
+            value={filterTo}
+            onChange={e => setFilterTo(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        {(filterStatus || filterFrom || filterTo) && (
+          <button
+            type="button"
+            onClick={() => { setFilterStatus(''); setFilterFrom(''); setFilterTo(''); }}
+            className="rounded-lg border border-gray-700 px-2.5 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:border-gray-600"
+          >
+            Clear filters
+          </button>
+        )}
       </div>
+      </>}
 
       {/* Status distribution */}
       {tasks.length > 0 && !filterStatus && (() => {
         const stats: Record<string, number> = {};
         tasks.forEach(t => { stats[t.status] = (stats[t.status] || 0) + 1; });
         const total = tasks.length || 1;
-        const bars = [
-          { key: 'running', color: 'bg-green-500', text: 'text-green-400' },
-          { key: 'delivered', color: 'bg-blue-500', text: 'text-blue-400' },
-          { key: 'replied', color: 'bg-purple-500', text: 'text-purple-400' },
-          { key: 'failed', color: 'bg-red-500', text: 'text-red-400' },
-          { key: 'expired', color: 'bg-orange-500', text: 'text-orange-400' },
-        ].filter(b => stats[b.key]);
+        // Round 67: derive from shared TASK_STATUSES + STATUS_BAR_CLASS in
+        // app/lib/status.ts. Adding a new lifecycle status updates badge,
+        // tab dots, and bar in one edit.
+        const bars = TASK_STATUSES
+          .map(key => ({ key, color: STATUS_BAR_CLASS[key] }))
+          .filter(b => stats[b.key]);
         if (!bars.length) return null;
+        // Round 63: removed the per-status legend row beneath the bar —
+        // it duplicated the counts already shown in the tab chip strip
+        // since r56. The proportional bar stays because it adds a visual
+        // "shape of workload" that the chip numbers don't convey.
         return (
           <div className="mb-6">
             <div className="flex h-2 rounded-full overflow-hidden bg-gray-800">
-              {bars.map(b => <div key={b.key} className={b.color} style={{ width: `${(stats[b.key]/total)*100}%` }} />)}
-            </div>
-            <div className="flex flex-wrap gap-3 mt-1.5 text-[10px] text-gray-500">
-              {bars.map(b => <span key={b.key}><span className={`inline-block w-2 h-2 rounded-full ${b.color} mr-1`} />{stats[b.key]} {b.key}</span>)}
+              {bars.map(b => <div key={b.key} className={b.color} style={{ width: `${(stats[b.key]/total)*100}%` }} title={`${b.key}: ${stats[b.key]}`} />)}
             </div>
           </div>
         );
@@ -276,11 +277,13 @@ function TasksContent() {
                 <div className="col-span-1">
                   <span className={statusBadge(t.status)}>{t.status}</span>
                 </div>
-                <div className="col-span-2 text-sm text-blue-400 truncate" title={t.from_name}>
-                  {t.from_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.from_name}>
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.from_name || '--'}</span>
                 </div>
-                <div className="col-span-2 text-sm text-cyan-400 truncate" title={t.to_name}>
-                  {t.to_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.to_name}>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.to_name || '--'}</span>
                 </div>
                 <div className="col-span-4 text-xs text-gray-400 truncate" title={t.content}>
                   {t.content || '--'}
@@ -315,10 +318,12 @@ function TasksContent() {
                     </svg>
                   </div>
                 </div>
-                <div className="text-xs text-gray-500">
-                  <span className="text-blue-400">{t.from_name || '--'}</span>
-                  <span className="text-gray-600 mx-1">&rarr;</span>
-                  <span className="text-cyan-400">{t.to_name || '--'}</span>
+                <div className="flex items-center gap-1.5 text-xs text-gray-300 min-w-0">
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.from_name || '--'}</span>
+                  <span className="text-gray-600">&rarr;</span>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.to_name || '--'}</span>
                 </div>
                 <div className="text-xs text-gray-400 line-clamp-1">{t.content || '--'}</div>
                 <div className="text-xs text-gray-600">{timeAgo(t.created_at)}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.5-preview.6",
+  "version": "0.4.5-preview.61",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/loop-review.mjs

@@ -0,0 +1,224 @@
+/* Loop self-review — captures Overview in cyber+light × desktop+mobile,
+ * runs a few observable checks, prints a per-axis score. Not a regression
+ * test — the cron's "review and score then propose next round" output.
+ *
+ * Round 71: replaced the toy checks (overflow, sidebar visible, blur count)
+ * with checks that actually catch the bugs we keep shipping:
+ *   - CTA-above-fold: does the primary "Spin up" / "Get started" / etc
+ *     button live within the first viewport? (deduct 3)
+ *   - Zero-card density: how many "0" stat cards are crammed in above the
+ *     CTA? (deduct 1 per zero-card beyond the first 2)
+ *   - Whitespace gap: any element-to-element vertical gap >200px in the
+ *     top half? (deduct 1)
+ *   - Misleading-copy: "All systems go" text rendered when nodes.total=0
+ *     (deduct 2) — round-70-class bug guard
+ *   - Old: theme, horizontal overflow, sidebar, glow tell — still in
+ *
+ * Score is 10 max; deductions accumulate. The pre-r70 design that scored
+ * 10/10 here should now score ~4–5.
+ */
+
+import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+import path from 'node:path';
+
+const BASE = process.env.LOOP_REVIEW_BASE || 'http://127.0.0.1:3000';
+const TOKEN = process.env.LOOP_REVIEW_TOKEN; // utok_...
+const OUT = path.resolve(process.cwd(), 'test-results/loop-review');
+mkdirSync(OUT, { recursive: true });
+
+if (!TOKEN) {
+  console.error('LOOP_REVIEW_TOKEN env var required (utok_...)');
+  process.exit(1);
+}
+
+const viewports = [
+  { tag: 'desktop', width: 1440, height: 900 },
+  { tag: 'mobile',  width: 390,  height: 844 },
+];
+const themes = ['cyber', 'light'];
+const pages = [
+  { name: 'overview', path: '/' },
+  { name: 'nodes',    path: '/nodes' },
+  { name: 'tasks',    path: '/tasks' },
+  { name: 'messages', path: '/messages' },
+  { name: 'admin',    path: '/admin' },
+  { name: 'settings', path: '/settings' },
+  { name: 'networks', path: '/settings/networks' },
+  { name: 'logs',     path: '/logs' },
+];
+
+const matrix = [];
+for (const t of themes) for (const v of viewports) for (const p of pages) {
+  matrix.push({ theme: t, viewport: { width: v.width, height: v.height }, tag: v.tag, pageName: p.name, pagePath: p.path });
+}
+
+const browser = await chromium.launch({ headless: true });
+
+const report = [];
+
+for (const m of matrix) {
+  const ctx = await browser.newContext({
+    viewport: m.viewport,
+    deviceScaleFactor: 1,
+  });
+  await ctx.addCookies([{
+    name: 'anet_dashboard_session',
+    value: `v3:${TOKEN}`,
+    domain: '127.0.0.1',
+    path: '/',
+  }]);
+  await ctx.addInitScript((theme) => {
+    try {
+      localStorage.setItem('anet-theme', theme);
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, m.theme);
+
+  const page = await ctx.newPage();
+  await page.goto(`${BASE}${m.pagePath}`, { waitUntil: 'domcontentloaded', timeout: 15000 });
+  await page.waitForTimeout(1200);
+
+  await page.evaluate((t) => document.documentElement.setAttribute('data-theme', t), m.theme);
+  await page.waitForTimeout(300);
+
+  const file = path.join(OUT, `${m.pageName}-${m.theme}-${m.tag}.png`);
+  await page.screenshot({ path: file, fullPage: true });
+
+  const checks = await page.evaluate(() => {
+    const doc = document.documentElement;
+    const theme = doc.getAttribute('data-theme');
+    const body = document.body;
+    const bodyBg = getComputedStyle(body).backgroundColor;
+    const bodyFg = getComputedStyle(body).color;
+
+    const viewportH = window.innerHeight;
+    const viewportW = window.innerWidth;
+
+    // --- CTA-above-fold ---
+    // We treat any of these texts as the page's primary CTA:
+    //   "Spin up your first agent" — empty Overview onboarding
+    //   "Get started" — generic
+    //   "Dispatch" (when not empty) — populated state primary action
+    const ctaTextRe = /Spin up your first agent|Get started/i;
+    const ctaCandidates = [...document.querySelectorAll('h1, h2, h3, p, div, button, a')]
+      .filter(el => ctaTextRe.test(el.textContent || ''));
+    let ctaTop = null;
+    if (ctaCandidates.length) {
+      // Pick the smallest (innermost) element matching to avoid catching a wrapping section
+      const sorted = ctaCandidates.sort((a, b) => (a.textContent?.length || 0) - (b.textContent?.length || 0));
+      const r = sorted[0].getBoundingClientRect();
+      ctaTop = r.top;
+    }
+
+    // --- Zero-card density ---
+    // Count visible elements whose trimmed text === "0". These are usually
+    // big stat-card values dominating prime real estate.
+    const zeroCards = [...document.querySelectorAll('div, span')]
+      .filter(el => {
+        const t = el.textContent?.trim();
+        if (t !== '0' && t !== '0/0') return false;
+        const r = el.getBoundingClientRect();
+        return r.top >= 0 && r.top < viewportH && r.width > 20 && r.height > 20;
+      });
+
+    // --- Whitespace gap ---
+    // Look for sibling-to-sibling top gaps >200px in the page content
+    // container. AppShell wraps page children in
+    // <main><HealthBanner/><div><div class="min-h-screen ...">{page}</div></div></main>,
+    // so we walk into that inner page wrapper to read real section gaps.
+    const main = document.querySelector('main');
+    const inner = main?.querySelector(':scope > div:last-of-type > div') || main || document.body;
+    const directKids = [...inner.children].filter(el => {
+      const r = el.getBoundingClientRect();
+      return r.height > 0 && r.width > 0;
+    });
+    let maxGap = 0;
+    for (let i = 0; i + 1 < directKids.length; i++) {
+      const a = directKids[i].getBoundingClientRect();
+      const b = directKids[i + 1].getBoundingClientRect();
+      if (a.bottom < 1600 && b.top - a.bottom > maxGap) {
+        maxGap = Math.round(b.top - a.bottom);
+      }
+    }
+
+    // --- Misleading copy guard ---
+    // "All systems go" must not appear anywhere when nodes.total === 0.
+    // We can't read state directly, but if the page also shows
+    // "Waiting for first agent" then we know fleet is empty.
+    const bodyText = document.body.innerText;
+    const fleetEmpty = /Waiting for first agent/i.test(bodyText);
+    const sayingAllSystemsGo = /All systems go/i.test(bodyText);
+    const misleadingCopy = fleetEmpty && sayingAllSystemsGo;
+
+    // --- Carryover ---
+    const docWidth = doc.scrollWidth;
+    const horizontalOverflow = docWidth > viewportW + 2;
+    let glowyCount = 0;
+    for (const el of document.querySelectorAll('body *')) {
+      const cs = getComputedStyle(el);
+      if (cs.filter && cs.filter.includes('blur(') && !cs.filter.includes('blur(0px)')) glowyCount++;
+    }
+    const sidebar = document.querySelector('aside, [data-sidebar], nav');
+    const sidebarRect = sidebar?.getBoundingClientRect();
+    const sidebarVisible = !!(sidebarRect && sidebarRect.width > 0 && sidebarRect.height > 0);
+
+    return {
+      theme, bodyBg, bodyFg,
+      viewportH, viewportW,
+      ctaTop, ctaPresent: ctaCandidates.length > 0,
+      zeroCardCount: zeroCards.length,
+      maxGap,
+      fleetEmpty, sayingAllSystemsGo, misleadingCopy,
+      docWidth, horizontalOverflow,
+      glowyCount, sidebarVisible,
+    };
+  });
+
+  let score = 10;
+  const notes = [];
+  if (checks.theme !== m.theme) { score -= 3; notes.push(`theme=${checks.theme}`); }
+  if (checks.horizontalOverflow) { score -= 2; notes.push(`horiz overflow ${checks.docWidth}/${checks.viewportW}`); }
+  if (m.tag === 'desktop' && !checks.sidebarVisible) { score -= 1; notes.push('sidebar missing on desktop'); }
+  if (checks.glowyCount > 8) { score -= 1; notes.push(`${checks.glowyCount} blur-filter elements (glow tell)`); }
+
+  // New checks — the ones that would have caught r70's bug
+  if (checks.ctaPresent && checks.ctaTop !== null) {
+    if (checks.ctaTop > checks.viewportH) {
+      score -= 3;
+      notes.push(`CTA below fold (top=${Math.round(checks.ctaTop)} > vh=${checks.viewportH})`);
+    } else if (checks.ctaTop > checks.viewportH * 0.7) {
+      score -= 1;
+      notes.push(`CTA low in fold (top=${Math.round(checks.ctaTop)})`);
+    }
+  }
+  if (checks.zeroCardCount > 4) {
+    const extra = Math.min(checks.zeroCardCount - 4, 3);
+    score -= extra;
+    notes.push(`${checks.zeroCardCount} zero-value cards above fold`);
+  }
+  if (checks.maxGap > 200) {
+    score -= 1;
+    notes.push(`whitespace gap ${checks.maxGap}px`);
+  }
+  if (checks.misleadingCopy) {
+    score -= 2;
+    notes.push(`'All systems go' shown while fleet empty`);
+  }
+
+  report.push({ ...m, file, checks, score: Math.max(score, 0), notes });
+
+  await page.close();
+  await ctx.close();
+}
+
+await browser.close();
+
+console.log('\n=== Loop self-review (harness r73) ===\n');
+for (const r of report) {
+  console.log(`${r.pageName.padEnd(8)} ${r.theme}/${r.tag.padEnd(7)} score=${r.score}/10`);
+  console.log(`  cta_top=${r.checks.ctaTop !== null ? Math.round(r.checks.ctaTop) : '--'}  zero_cards=${r.checks.zeroCardCount}  max_gap=${r.checks.maxGap}px  fleet_empty=${r.checks.fleetEmpty}`);
+  if (r.notes.length) console.log(`  notes: ${r.notes.join(' · ')}`);
+}
+const avg = report.reduce((s, r) => s + r.score, 0) / report.length;
+console.log(`\noverall avg = ${avg.toFixed(1)}/10 across ${report.length} captures`);