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

package/app/server-logs/page.tsx

@@ -23,6 +23,30 @@ const LEVEL_BADGE: Record<LogLine['level'], string> = {
   error: 'bg-red-500/10 text-red-300 border-red-500/30',
 };
 
+/** Left-rail strip color per log level — gives the eye a vertical guide
+ *  when scanning long log walls. Plain hex so Tailwind purge can't drop it. */
+const LEVEL_STRIPE: Record<LogLine['level'], string> = {
+  log: 'transparent',
+  info: '#22d3ee',
+  warn: '#f59e0b',
+  error: '#ef4444',
+};
+
+/** Highlight search-matched substring inside a log line. Case-insensitive
+ *  first-match wrap; mark inherits color so log-level coloring stays. */
+function highlightSearch(line: string, q: string) {
+  if (!q) return line;
+  const idx = line.toLowerCase().indexOf(q.toLowerCase());
+  if (idx < 0) return line;
+  return (
+    <>
+      {line.slice(0, idx)}
+      <mark className="bg-yellow-500/30 text-yellow-100 rounded-sm px-0.5">{line.slice(idx, idx + q.length)}</mark>
+      {line.slice(idx + q.length)}
+    </>
+  );
+}
+
 function shortTime(iso: string) {
   try {
     const d = new Date(iso);
@@ -93,49 +117,86 @@ export default function ServerLogsPage() {
 
   return (
     <div className="p-6 max-w-[1600px] mx-auto">
-      <div className="flex items-baseline justify-between mb-4">
-        <div className="flex items-baseline gap-3">
+      <div className="flex items-center justify-between mb-4 gap-3">
+        <div className="flex items-center gap-3 min-w-0">
           <h1 className="text-2xl font-bold text-white">Server Logs</h1>
-          <span className="text-xs text-gray-500">CommHub stdout/stderr · 最新在上</span>
+          {/* Round 86: dropped the {logs.length} header chip — r84 added
+              `all <count>` to the filter strip just below, so this duplicated
+              the value within 40px of itself. */}
+          <span className="text-xs text-gray-500 hidden sm:inline">CommHub stdout/stderr</span>
         </div>
-        <div className="flex items-center gap-2 text-xs">
+        <div className="flex items-center gap-2 text-xs shrink-0">
           <button
             onClick={() => setPaused(p => !p)}
-            className={`px-3 py-1 rounded border ${paused ? 'bg-amber-500/10 text-amber-300 border-amber-500/30' : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30'}`}
+            className={`flex items-center gap-1.5 px-3 py-1 rounded border ${paused ? 'bg-amber-500/10 text-amber-300 border-amber-500/30' : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30'}`}
           >
-            {paused ? '▶ Resume' : '⏸ Pause'}
+            {paused ? (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M8 5v14l11-7z" /></svg>
+                Resume
+              </>
+            ) : (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                  <rect x="6" y="5" width="4" height="14" rx="0.5" />
+                  <rect x="14" y="5" width="4" height="14" rx="0.5" />
+                </svg>
+                Pause
+              </>
+            )}
           </button>
           <label className="flex items-center gap-1 text-gray-400 select-none">
             <input type="checkbox" checked={autoRefresh} onChange={e => setAutoRefresh(e.target.checked)} className="accent-cyan-500" />
-            auto-refresh
+            <span className="hidden sm:inline">auto-refresh</span>
           </label>
-          <button onClick={() => fetchLogs(true)} className="px-3 py-1 rounded border bg-gray-500/10 text-gray-300 border-gray-500/20 hover:bg-gray-500/20">
-            ↻ Reload
+          <button onClick={() => fetchLogs(true)} className="flex items-center gap-1.5 px-3 py-1 rounded border bg-gray-500/10 text-gray-300 border-gray-500/20 hover:bg-gray-500/20">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M3 12a9 9 0 0 1 15.5-6.4L21 8" />
+              <path d="M21 3v5h-5" />
+              <path d="M21 12a9 9 0 0 1-15.5 6.4L3 16" />
+              <path d="M3 21v-5h5" />
+            </svg>
+            <span className="hidden sm:inline">Reload</span>
           </button>
         </div>
       </div>
 
-      <div className="flex items-center gap-3 mb-3">
-        <div className="flex items-center gap-1 text-xs">
-          {(['all', 'log', 'info', 'warn', 'error'] as const).map(lv => (
-            <button
-              key={lv}
-              onClick={() => setFilterLevel(lv)}
-              className={`px-2.5 py-1 rounded border ${
-                filterLevel === lv
-                  ? 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40'
-                  : 'bg-[#11111c] text-gray-400 border-[#2a2a4a] hover:bg-[#1a1a2a]'
-              }`}
-            >
-              {lv}{lv !== 'all' && counts[lv as LogLine['level']] > 0 ? ` (${counts[lv as LogLine['level']]})` : ''}
-            </button>
-          ))}
+      {/* Round 95: flex-wrap + min-w-0 on the search wrapper so the
+          search input drops below the chip strip on mobile instead of
+          overflowing past the viewport. Desktop layout (single row)
+          unchanged because the row has room. */}
+      <div className="flex flex-wrap items-center gap-3 mb-3">
+        <div className="flex items-center gap-1 text-xs flex-wrap">
+          {/* Round 84: every chip shows its count (matches Tasks r56 +
+              Audit Log r43); zero-count non-active chips are disabled
+              + muted so the eye lands on the levels that actually have
+              entries. */}
+          {(['all', 'log', 'info', 'warn', 'error'] as const).map(lv => {
+            const count = lv === 'all' ? logs.length : counts[lv as LogLine['level']];
+            const isActive = filterLevel === lv;
+            const isEmpty = lv !== 'all' && count === 0 && !isActive;
+            return (
+              <button
+                key={lv}
+                onClick={() => setFilterLevel(lv)}
+                disabled={isEmpty}
+                className={`px-2.5 py-1 rounded border flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed ${
+                  isActive
+                    ? 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40'
+                    : 'bg-[#11111c] text-gray-400 border-[#2a2a4a] hover:bg-[#1a1a2a]'
+                }`}
+              >
+                <span>{lv}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'opacity-80' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          })}
         </div>
         <input
           value={search}
           onChange={e => setSearch(e.target.value)}
           placeholder="搜索关键字 (alias / task_id / error message)"
-          className="flex-1 px-3 py-1.5 text-xs bg-[#11111c] border border-[#2a2a4a] rounded text-gray-200 focus:outline-none focus:border-cyan-500/40"
+          className="flex-1 min-w-[140px] basis-full sm:basis-0 px-3 py-1.5 text-xs bg-[#11111c] border border-[#2a2a4a] rounded text-gray-200 focus:outline-none focus:border-cyan-500/40"
         />
         <span className="text-[10px] text-gray-600">
           {filtered.length} / {logs.length}
@@ -182,12 +243,27 @@ export default function ServerLogsPage() {
         ) : (
           <div className="divide-y divide-[#0d0d18] max-h-[calc(100vh-260px)] overflow-y-auto">
             {filtered.map((l, i) => (
-              <div key={`${l.ts}-${i}`} className="px-3 py-1 hover:bg-[#0a0a14] flex gap-3">
-                <span className="text-gray-600 shrink-0 w-[110px] text-[10px]">{shortTime(l.ts)}</span>
+              <div key={`${l.ts}-${i}`} className="relative pl-3 pr-3 py-1 hover:bg-[#0a0a14] flex gap-3">
+                {/* Round 32: 2px left rail keyed to level. Makes warn/error
+                    spike visible in a wall of `log` lines without users having
+                    to read the level chip on every row. */}
+                <span
+                  aria-hidden
+                  className="absolute left-0 top-0 bottom-0 w-0.5"
+                  style={{ backgroundColor: LEVEL_STRIPE[l.level] }}
+                />
+                <span className="text-gray-600 shrink-0 w-[100px] text-[10px] tabular-nums">{shortTime(l.ts)}</span>
                 <span className={`shrink-0 px-1.5 rounded border text-[9px] uppercase ${LEVEL_BADGE[l.level]}`}>
                   {l.level}
                 </span>
-                <span className={`break-all whitespace-pre-wrap ${LEVEL_COLOR[l.level]}`}>{l.line}</span>
+                {/* Round 85: CommHub stamps each log line with a `[HH:MM:SS]`
+                    prefix, but the row already shows shortTime(l.ts) in its
+                    own 100px column on the left. Strip the duplicate
+                    prefix at display time so the message starts directly
+                    with the alias / agent / action. */}
+                <span className={`break-all whitespace-pre-wrap ${LEVEL_COLOR[l.level]}`}>
+                  {highlightSearch(l.line.replace(/^\[\d{2}:\d{2}:\d{2}\]\s*/, ''), search)}
+                </span>
               </div>
             ))}
           </div>

package/app/settings/networks/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { timeAgo } from '../../components/utils';
 import { EmptyState } from '../../components/EmptyState';
+import { AliasAvatar } from '../../components/AliasAvatar';
 import useSWR from 'swr';
 
 const fetcher = (url: string) => fetch(url).then(r => r.json());
@@ -99,9 +100,9 @@ export default function NetworksPage() {
       <div className="flex items-center gap-4 mb-6">
         <Link href="/settings" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Settings</Link>
         <h1 className="text-2xl font-bold text-white">Networks</h1>
-        <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30">
-          {networks.length}
-        </span>
+        {/* Round 93: dropped {networks.length} header chip — the
+            My Networks panel below already carries `<N> total` in its
+            own subhead. Matches r86/r87 pattern. */}
       </div>
 
       <div className="max-w-2xl space-y-6">
@@ -123,7 +124,12 @@ export default function NetworksPage() {
 
         {/* List */}
         <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-3">My Networks</h2>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-semibold text-gray-300">My Networks</h2>
+            {networks.length > 0 && (
+              <span className="text-[10px] text-gray-600 uppercase tracking-wide">{networks.length} total</span>
+            )}
+          </div>
           {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 ? (
@@ -136,11 +142,14 @@ export default function NetworksPage() {
             <div className="space-y-3">
               {networks.map(n => (
                 <div key={n.network_id} className="bg-[#0a0a15] rounded-lg px-4 py-3 border border-[#1a1a2a]">
-                  <div className="flex items-center justify-between">
-                    <div className="min-w-0">
-                      <div className="text-sm text-white font-medium">{n.network_name}</div>
-                      <div className="text-[10px] text-gray-500">{n.network_id} · {timeAgo(n.created_at)}</div>
-                      {n.description && <div className="text-xs text-gray-400 mt-1">{n.description}</div>}
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start gap-3 min-w-0">
+                      <AliasAvatar alias={n.network_name} size={28} />
+                      <div className="min-w-0">
+                        <div className="text-sm text-white font-medium truncate">{n.network_name}</div>
+                        <div className="text-[10px] text-gray-500 font-mono truncate" title={n.network_id}>{n.network_id} · {timeAgo(n.created_at)}</div>
+                        {n.description && <div className="text-xs text-gray-400 mt-1">{n.description}</div>}
+                      </div>
                     </div>
                     <div className="flex gap-2 shrink-0">
                       <button onClick={() => {
@@ -169,14 +178,20 @@ export default function NetworksPage() {
                       {(members[n.network_id] || []).length === 0 ? (
                         <div className="text-[10px] text-gray-600">No members or V3 auth required</div>
                       ) : (
-                        (members[n.network_id] || []).map(m => (
-                          <div key={m.user_id} className="flex items-center justify-between text-xs py-1">
-                            <span className="text-gray-300">{m.username || m.display_name}</span>
-                            <span className={`px-1.5 py-0.5 rounded border text-[10px] ${
+                        (members[n.network_id] || []).map(m => {
+                          const name = m.username || m.display_name || '?';
+                          return (
+                          <div key={m.user_id} className="flex items-center gap-2 justify-between text-xs py-1">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <AliasAvatar alias={name} size={16} />
+                              <span className="text-gray-300 truncate">{name}</span>
+                            </div>
+                            <span className={`px-1.5 py-0.5 rounded border text-[10px] shrink-0 ${
                               m.role === 'owner' ? 'text-yellow-300 border-yellow-500/20' : 'text-gray-400 border-gray-600/20'
                             }`}>{m.role}</span>
                           </div>
-                        ))
+                          );
+                        })
                       )}
 
                       {/* Invite */}
@@ -196,8 +211,17 @@ export default function NetworksPage() {
                         </div>
                         {inviteCode && (
                           <div className="mt-2 bg-green-500/5 border border-green-500/20 rounded px-3 py-2">
-                            <div className="text-[10px] text-green-400 mb-1">Invite code:</div>
-                            <code className="text-xs text-green-300 select-all">{inviteCode}</code>
+                            <div className="flex items-center justify-between mb-1">
+                              <div className="text-[10px] text-green-400 uppercase tracking-wide">Invite code</div>
+                              <button
+                                type="button"
+                                onClick={() => { navigator.clipboard?.writeText(inviteCode).catch(() => {}); }}
+                                className="text-[10px] text-green-300 hover:text-green-200 px-1.5 py-0.5 rounded border border-green-500/20 hover:bg-green-500/10"
+                              >
+                                Copy
+                              </button>
+                            </div>
+                            <code className="text-xs text-green-300 select-all break-all">{inviteCode}</code>
                           </div>
                         )}
                       </div>

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

@@ -7,6 +7,8 @@ import { useNetworkId } from '../lib/network-context';
 import { TaskDrawer } from '../components/TaskDrawer';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
+import { previewContent } from '../components/utils';
+import { TASK_STATUSES, STATUS_CHIP_CLASS, STATUS_DOT_HEX, STATUS_BAR_CLASS } from '../lib/status';
 
 interface Task {
   task_id: string;
@@ -24,48 +26,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}`;
 }
 
@@ -145,11 +107,25 @@ function TasksContent() {
       {/* Header */}
       <div className="flex items-center gap-4 mb-6">
         <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Tasks</h1>
-        <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30">
-          {count}
+        {/* Round 88: pagination-aware chip. When tasks.length < count
+            the API has more rows than the current limit=100 slice;
+            show `loaded / total` so users notice. Otherwise just the
+            single total — matches r87 /logs pattern. */}
+        <span
+          className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30 tabular-nums"
+          title={tasks.length < count ? `Showing ${tasks.length} of ${count} tasks` : undefined}
+        >
+          {tasks.length < count ? `${tasks.length} / ${count}` : count}
         </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
@@ -159,23 +135,39 @@ 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>
 
@@ -211,27 +203,28 @@ function TasksContent() {
           </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>
         );
@@ -301,7 +294,7 @@ function TasksContent() {
                   <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 || '--'}
+                  {previewContent(t.content)}
                 </div>
                 <div className="col-span-1">
                   <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
@@ -340,7 +333,7 @@ function TasksContent() {
                   {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-400 line-clamp-1" title={t.content}>{previewContent(t.content)}</div>
                 <div className="text-xs text-gray-600">{timeAgo(t.created_at)}</div>
               </div>
 

package/package.json

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