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

package/app/node/page.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import { TaskChatPanel } from '../components/TaskChatPanel';
 import { timeAgo } from '../components/utils';
+import { AliasAvatar } from '../components/AliasAvatar';
+import { SESSION_STATUS_TEXT_CLASS } from '../lib/status';
 
 interface SessionDetail {
   resume_id: string;
@@ -145,20 +147,29 @@ function NodeDetailContent() {
     );
   }
 
-  const statusColor = session?.status === 'working' ? 'text-green-400' :
-    session?.status === 'idle' ? 'text-blue-400' : 'text-gray-500';
+  /* Round 92: shared 5-state palette (was working / idle / other,
+     collapsed blocked + error into gray). */
+  const statusColor = SESSION_STATUS_TEXT_CLASS[session?.status || ''] || SESSION_STATUS_TEXT_CLASS.offline;
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      {/* Header */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link href="/nodes" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Nodes</Link>
-        <div className="flex items-center gap-3">
-          <span className={`inline-block w-3 h-3 rounded-full ${
-            sse > 0 ? (session?.status === 'working' ? 'bg-green-500 animate-pulse' : 'bg-emerald-400') : 'bg-gray-500'
-          }`} />
-          <h1 className="text-2xl font-bold text-white">{alias}</h1>
-          <span className={`text-sm ${statusColor}`}>{session?.status || 'unknown'}</span>
+      {/* Header — round 40: avatar joins the alias for cross-page hue
+          consistency; agent type lives in a subtitle so users know what
+          kind of node they're looking at. */}
+      <div className="flex items-center gap-3 mb-6 lg:ml-0 ml-10">
+        <Link href="/nodes" className="text-gray-500 hover:text-gray-300 text-sm shrink-0">&larr; Nodes</Link>
+        <AliasAvatar alias={alias} size={32} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h1 className="text-xl sm:text-2xl font-bold text-white truncate">{alias}</h1>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${
+              sse > 0 ? (session?.status === 'working' ? 'bg-green-500 animate-pulse' : 'bg-emerald-400') : 'bg-gray-500'
+            }`} />
+            <span className={`text-[10px] uppercase tracking-wide font-semibold ${statusColor}`}>{session?.status || 'unknown'}</span>
+          </div>
+          {session?.agent && (
+            <div className="text-xs text-gray-500 truncate">{session.agent}{session.server ? <> <span className="text-gray-700 mx-1">·</span> {session.server}</> : null}</div>
+          )}
         </div>
       </div>
 
@@ -190,14 +201,22 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
 
   return (
     <div className="bg-[#0d0d1a] border border-[#2a2a4a] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
-      {/* Tab bar */}
+      {/* Tab bar — round 40: emoji icons (💬 📋 📊) replaced with stroke
+          SVG to drop the "AI generated" tell. */}
       <div className="flex border-b border-[#2a2a4a] bg-[#0a0a15] shrink-0">
-        {(['chat', 'events', 'info'] as const).map(t => (
-          <button key={t} onClick={() => setTab(t)}
-            className={`px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
-              tab === t ? 'border-cyan-400 text-cyan-300' : 'border-transparent text-gray-500 hover:text-gray-300'
+        {([
+          { id: 'chat',   label: 'Chat',   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' },
+          { id: 'events', label: 'Events', 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' },
+          { id: 'info',   label: 'Info',   icon: 'M12 21a9 9 0 100-18 9 9 0 000 18z M12 8h.01 M11 12h1v4h1' },
+        ] as const).map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)}
+            className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
+              tab === t.id ? 'border-cyan-400 text-cyan-300' : 'border-transparent text-gray-500 hover:text-gray-300'
             }`}>
-            {t === 'chat' ? '💬 Chat' : t === 'events' ? '📋 Events' : '📊 Info'}
+            <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={t.icon} />
+            </svg>
+            <span>{t.label}</span>
           </button>
         ))}
       </div>
@@ -299,13 +318,16 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   );
 }
 
-const EVENT_COLORS: Record<string, { dot: string; line: string; icon: string }> = {
-  delivered: { dot: 'bg-blue-400', line: 'bg-blue-500/30', icon: '📬' },
-  acked: { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', icon: '✅' },
-  running: { dot: 'bg-green-400', line: 'bg-green-500/30', icon: '⚡' },
-  replied: { dot: 'bg-purple-400', line: 'bg-purple-500/30', icon: '💬' },
-  failed: { dot: 'bg-red-400', line: 'bg-red-500/30', icon: '❌' },
-  created: { dot: 'bg-gray-400', line: 'bg-gray-500/30', icon: '📝' },
+/** Round 59: emoji icons replaced with stroke SVG paths to drop the
+ *  "AI generated" tell. Each path is sized to fit inside the 18px
+ *  colored event dot. */
+const EVENT_COLORS: Record<string, { dot: string; line: string; path: string }> = {
+  delivered: { dot: 'bg-blue-400',   line: 'bg-blue-500/30',   path: 'M12 5v14 M5 12l7 7 7-7' },                   // down arrow
+  acked:     { dot: 'bg-yellow-400', line: 'bg-yellow-500/30', path: 'M20 6 9 17l-5-5' },                          // check
+  running:   { dot: 'bg-green-400',  line: 'bg-green-500/30',  path: 'M13 2L4 14h6l-1 8 10-12h-6l1-8z' },         // bolt
+  replied:   { dot: 'bg-purple-400', line: 'bg-purple-500/30', path: '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' }, // chat bubble
+  failed:    { dot: 'bg-red-400',    line: 'bg-red-500/30',    path: 'M18 6 6 18 M6 6l12 12' },                    // X
+  created:   { dot: 'bg-gray-400',   line: 'bg-gray-500/30',   path: 'M12 5v14 M5 12h14' },                       // plus
 };
 
 function EventsTimeline({ events, loading }: { events: Array<{ id: number; event_type: string; from_status: string; to_status: string; detail: string; created_at: string; task_id?: string }>; loading: boolean }) {
@@ -334,9 +356,12 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
               const cfg = EVENT_COLORS[e.to_status] || EVENT_COLORS.created;
               return (
                 <div key={e.id} className="relative pb-4 last:pb-0">
-                  {/* Dot on line */}
-                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center text-[9px] z-10 border-2 border-[#111128]`}>
-                    {cfg.icon.length <= 2 ? cfg.icon : ''}
+                  {/* Dot on line — round 59: emoji icons replaced with
+                      a 10px stroke SVG path matching event type. */}
+                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#111128]`}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0a0a15" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                      <path d={cfg.path} />
+                    </svg>
                   </div>
                   {/* Content */}
                   <div className="ml-2">

package/app/nodes/page.tsx

@@ -5,17 +5,18 @@ 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 { EmptyState, NodesEmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 import type { Session } from '../components/types';
+import { SESSION_STATUS_CHIP_CLASS as STATUS_COLORS } from '../lib/status';
 
-const STATUS_COLORS: Record<string, string> = {
-  working: 'bg-green-500/10 text-green-300 border-green-500/20',
-  idle: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
-  blocked: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
-  error: 'bg-red-500/10 text-red-300 border-red-500/20',
-  offline: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
-};
+/** Round 81: shorten long server hostnames (Alibaba `iZ…oyZ` style)
+ *  for table display. Returns the original string unchanged when ≤12
+ *  chars. Full value should stay in `title=` for hover + screen-readers. */
+function shortServer(server: string | null | undefined): string {
+  if (!server) return '—';
+  return server.length > 12 ? `${server.slice(0, 8)}…` : server;
+}
 
 type ViewMode = 'list' | 'grid';
 type SessionRow = Session & { online: boolean };
@@ -121,6 +122,12 @@ export default function NodesPage() {
         );
       })()}
 
+      {/* Round 74: hide the filter+view chrome when there are no nodes
+          anywhere — these controls have nothing to act on, and they only
+          push the onboarding CTA further down. When at least one session
+          exists, the chrome is back even if the current filter happens
+          to hide everything (so users can clear filters). */}
+      {sessions.length > 0 && (
       <div className="flex flex-wrap gap-3 mb-6">
         <input
           type="text"
@@ -142,7 +149,11 @@ export default function NodesPage() {
           <option value="blocked">Blocked</option>
           <option value="error">Error</option>
         </select>
-        <div className="ml-auto flex rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 text-sm">
+        {/* Round 80: List/Grid toggle hidden on mobile — Grid uses
+            grid-cols-1 below `md` and List degrades to the same single
+            column, so the toggle has no visual effect under sm and only
+            steals a row of vertical space. */}
+        <div className="hidden sm:flex ml-auto rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 text-sm">
           {(['list', 'grid'] as const).map(mode => (
             <button
               key={mode}
@@ -159,17 +170,27 @@ export default function NodesPage() {
           ))}
         </div>
       </div>
+      )}
 
       {loading ? (
         <div className="animate-pulse space-y-2">
           {[1,2,3,4].map(i => <div key={i} className="h-16 bg-gray-800/20 rounded-lg" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <EmptyState
-          variant="nodes"
-          title="No nodes match your filters"
-          sub="Try clearing search or status filters, or wait for an agent to register."
-        />
+        sessions.length === 0 ? (
+          /* Round 73: first-run case — no agents anywhere. Use the same
+             onboarding empty state as the Overview (NodesEmptyState
+             includes the `npx … init` quickstart command). Previously this
+             was the "No nodes match your filters" copy, which was wrong
+             for new users who have no filters applied. */
+          <NodesEmptyState />
+        ) : (
+          <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 => {
@@ -199,7 +220,7 @@ export default function NodesPage() {
                       </span>
                     </div>
                     <div className="mt-0.5 truncate text-xs text-gray-500">
-                      {(s.agent || '—')}<span className="text-gray-700 mx-1.5">·</span>{(s.server || '—')}
+                      {(s.agent || '—')}<span className="text-gray-700 mx-1.5">·</span><span title={s.server || ''}>{shortServer(s.server)}</span>
                     </div>
                   </Link>
                   <div className="flex gap-1.5 shrink-0">
@@ -268,12 +289,14 @@ export default function NodesPage() {
         </div>
       ) : (
         <div className="space-y-2">
+          {/* Round 94: AGENT + SERVER merged into one `agent · server`
+              cell; the freed 2 columns expand CURRENT TASK so long task
+              content lines wrap less. Total still 12: 1+2+2+4+1+2. */}
           <div className="hidden sm:grid sm:grid-cols-12 gap-2 px-4 py-2 text-xs text-gray-600 uppercase">
             <div className="col-span-1">Status</div>
             <div className="col-span-2">Alias</div>
-            <div className="col-span-2">Agent</div>
-            <div className="col-span-2">Server</div>
-            <div className="col-span-2">Current Task</div>
+            <div className="col-span-2">Agent · Server</div>
+            <div className="col-span-4">Current Task</div>
             <div className="col-span-1">Updated</div>
             <div className="col-span-2 text-right">Actions</div>
           </div>
@@ -298,9 +321,10 @@ export default function NodesPage() {
                       <span className="truncate text-sm font-medium text-white">{s.alias}</span>
                     </Link>
                   </div>
-                  <div className="col-span-2 truncate text-xs text-gray-400">{s.agent || '--'}</div>
-                  <div className="col-span-2 truncate text-xs text-gray-400">{s.server || '--'}</div>
-                  <div className="col-span-2 truncate text-xs text-gray-500">{s.task || '--'}</div>
+                  <div className="col-span-2 truncate text-xs text-gray-400" title={s.server || ''}>
+                    {s.agent || '--'}<span className="text-gray-700 mx-1.5">·</span>{shortServer(s.server)}
+                  </div>
+                  <div className="col-span-4 truncate text-xs text-gray-500" title={s.task || ''}>{s.task || '--'}</div>
                   <div className="col-span-1 text-xs text-gray-500">{timeAgo(s.last_seen_at || s.updated_at)}</div>
                   <div className="col-span-2 flex justify-end gap-1.5">
                     <button type="button" onClick={() => setChatAlias(s.alias)}

package/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { formatUptime } from './components/utils';
+import { formatUptime, previewContent } from './components/utils';
 import { StatsBar } from './components/StatsBar';
 import { BroadcastBar } from './components/BroadcastBar';
 import { TopoGraph } from './components/TopoGraph';
@@ -11,6 +11,7 @@ import { InboxPanel } from './components/InboxPanel';
 import { LoadingSkeleton } from './components/LoadingSkeleton';
 import { NodesEmptyState as EmptyState } from './components/EmptyState';
 import { AliasAvatar } from './components/AliasAvatar';
+import { STATUS_DOT_HEX, STATUS_CHIP_CLASS } from './lib/status';
 import { UserBar } from './components/UserBar';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { DispatchPanel } from './components/DispatchPanel';
@@ -41,6 +42,7 @@ export default function Dashboard() {
   const cmd = useCommandCenter();
   const [showDispatch, setShowDispatch] = useState(false);
   const [inbox, setInbox] = useState<InboxMessage[]>([]);
+  const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
   const { mutate } = useSWRConfig();
 
   // SSE: instant revalidation on CommHub events
@@ -114,18 +116,27 @@ export default function Dashboard() {
     return bWorking - aWorking;
   });
 
+  /** Round 70: when the fleet is empty, the Overview reorders to lead with
+   *  the "Spin up your first agent" CTA and hides the Quick Navigation /
+   *  Nav rail / Broadcast bar that would otherwise occupy prime real estate
+   *  with zeros and dead-end links. Computed once, used as a gate below. */
+  const fleetEmpty = sessions.length === 0 && !sessError;
+
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="lg:ml-0 ml-10">
         <StatsBar online={online} working={working} total={total} version={version} uptime={uptime} />
       </div>
 
-      {/* Dispatch + User Bar */}
+      {/* Dispatch + User Bar — Dispatch hidden when fleet empty (nothing to
+          dispatch to); UserBar still useful (account/sign-out menu). */}
       <div className="flex items-center gap-3 mb-4">
-        <button onClick={() => setShowDispatch(true)}
-          className="px-4 py-2 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white text-sm font-medium rounded-xl shadow-lg shadow-cyan-500/10 transition-all active:scale-95 shrink-0">
-          ⚡ Dispatch
-        </button>
+        {!fleetEmpty && (
+          <button onClick={() => setShowDispatch(true)}
+            className="px-4 py-2 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white text-sm font-medium rounded-xl shadow-lg shadow-cyan-500/10 transition-all active:scale-95 shrink-0">
+            ⚡ Dispatch
+          </button>
+        )}
         <div className="flex-1"><UserBar /></div>
       </div>
 
@@ -168,18 +179,15 @@ export default function Dashboard() {
             <Link href="/tasks" prefetch={false} className="text-xs text-cyan-400 hover:text-cyan-300">View all &rarr;</Link>
           </div>
           <div className="flex flex-wrap gap-2">
-            {[
-              { key: 'running', color: 'bg-green-500/10 text-green-300 border-green-500/20' },
-              { key: 'delivered', color: 'bg-blue-500/10 text-blue-300 border-blue-500/20' },
-              { key: 'acked', color: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20' },
-              { key: 'replied', color: 'bg-purple-500/10 text-purple-300 border-purple-500/20' },
-              { key: 'failed', color: 'bg-red-500/10 text-red-300 border-red-500/20' },
-              { key: 'cancelled', color: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20' },
-              { key: 'expired', color: 'bg-orange-500/10 text-orange-300 border-orange-500/20' },
-              { key: 'closed', color: 'bg-gray-500/10 text-gray-500 border-gray-500/20' },
-            ].filter(({ key }) => taskStats[key])
-              .map(({ key, color }) => (
-                <Link key={key} href={`/tasks?status=${key}`} prefetch={false} className={`px-2.5 py-1 rounded-md border text-xs ${color} hover:opacity-80 transition-opacity`}>
+            {/* Round 69: order is "hot first" — active flow before terminal
+                states — intentionally different from the lifecycle order on
+                /tasks. Colors come from shared STATUS_CHIP_CLASS so a
+                palette tweak in app/lib/status.ts updates here too.
+                'created' added in r69 (was missing — enum-coverage bug). */}
+            {(['running', 'delivered', 'acked', 'replied', 'created', 'failed', 'cancelled', 'expired', 'closed'] as const)
+              .filter((key) => taskStats[key])
+              .map((key) => (
+                <Link key={key} href={`/tasks?status=${key}`} prefetch={false} className={`px-2.5 py-1 rounded-md border text-xs ${STATUS_CHIP_CLASS[key]} hover:opacity-80 transition-opacity`}>
                   {key}: {taskStats[key]}
                 </Link>
               ))}
@@ -191,7 +199,11 @@ export default function Dashboard() {
           (1) Top: live stat cards (carry data, drill-in on click)
           (2) Bottom: pure nav rail (no number, icon + label)
           Round 24 — wrap both in a labelled block so the rhythm reads as
-          "here are the main jumps" instead of two disconnected strips. */}
+          "here are the main jumps" instead of two disconnected strips.
+          Round 70 — entire Quick Nav + Nav rail + Broadcast + Recent
+          Activity block is hidden when the fleet is empty so the
+          onboarding CTA gets the page above the fold. */}
+      {!fleetEmpty && <>
       <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 mb-2">Quick navigation</div>
       <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
         {(() => {
@@ -312,23 +324,25 @@ export default function Dashboard() {
           <div className="space-y-2 max-h-40 overflow-y-auto">
             {tasks.slice(0, 5).map((t: { task_id: string; from_name: string; to_name: string; status: string; content: string; created_at: string }) => (
               <div key={t.task_id} className="flex items-center gap-2 text-xs">
-                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${
-                  t.status === 'replied' ? 'bg-purple-400' : t.status === 'running' ? 'bg-green-400' : t.status === 'failed' ? 'bg-red-400' : 'bg-blue-400'
-                }`} />
+                <span
+                  className="w-1.5 h-1.5 rounded-full shrink-0"
+                  style={{ backgroundColor: STATUS_DOT_HEX[t.status] || '#6b7280' }}
+                />
                 {t.from_name && <AliasAvatar alias={t.from_name} size={14} />}
                 <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.from_name || '?'}</span>
                 <span className="text-gray-600">&rarr;</span>
                 {t.to_name && <AliasAvatar alias={t.to_name} size={14} />}
                 <span className="text-gray-300 shrink-0 max-w-[20%] truncate">{t.to_name || '?'}</span>
-                <span className="text-gray-500 truncate flex-1">{t.content?.slice(0, 40) || '--'}</span>
+                <span className="text-gray-500 truncate flex-1" title={t.content || ''}>{previewContent(t.content).slice(0, 60)}</span>
                 <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] border ${
-                  t.status === 'replied' ? 'text-purple-300 border-purple-500/20' : t.status === 'failed' ? 'text-red-300 border-red-500/20' : 'text-gray-500 border-gray-700/30'
+                  STATUS_CHIP_CLASS[t.status] || 'text-gray-500 border-gray-700/30'
                 }`}>{t.status}</span>
               </div>
             ))}
           </div>
         </section>
       )}
+      </>}
 
       {sessError && (
         <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-4 py-3 rounded-lg mb-6 text-sm flex items-center justify-between" role="alert">
@@ -358,14 +372,71 @@ export default function Dashboard() {
       {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} />}
 
       {sessions.length === 0 && !sessError ? (
-        <EmptyState hint={sessHint} />
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
-          {sortedSessions.map(s => (
-            <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
-          ))}
-        </div>
-      )}
+        <EmptyState
+          hint={sessHint}
+          taskHistoryCount={Object.values(taskStats).reduce((a, b) => a + b, 0)}
+        />
+      ) : (() => {
+        const counts = {
+          all: sortedSessions.length,
+          working: sortedSessions.filter(s => isOnline(s) && s.status === 'working').length,
+          idle: sortedSessions.filter(s => isOnline(s) && s.status !== 'working').length,
+          offline: sortedSessions.filter(s => !isOnline(s)).length,
+        };
+        const filtered = sortedSessions.filter(s => {
+          if (agentFilter === 'all') return true;
+          if (agentFilter === 'offline') return !isOnline(s);
+          if (agentFilter === 'working') return isOnline(s) && s.status === 'working';
+          if (agentFilter === 'idle') return isOnline(s) && s.status !== 'working';
+          return true;
+        });
+        // Filter chip color keyed to status (round 34): working=green, idle=cyan,
+        // offline=gray, all=neutral. Inline hex dots avoid Tailwind v4 purge.
+        const chips: { key: typeof agentFilter; label: string; dot?: string }[] = [
+          { key: 'all',     label: 'All' },
+          { key: 'working', label: 'Working', dot: '#4ade80' },
+          { key: 'idle',    label: 'Idle',    dot: '#22d3ee' },
+          { key: 'offline', label: 'Offline', dot: '#6b7280' },
+        ];
+        return (
+          <>
+            <div className="mb-3 flex flex-wrap items-center gap-1">
+              {chips.map(c => (
+                <button
+                  key={c.key}
+                  type="button"
+                  onClick={() => setAgentFilter(c.key)}
+                  disabled={counts[c.key] === 0 && c.key !== 'all'}
+                  className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
+                    agentFilter === c.key
+                      ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                      : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                  }`}
+                >
+                  {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                  <span>{c.label}</span>
+                  <span className={`text-[10px] tabular-nums ${agentFilter === c.key ? 'text-cyan-400' : 'text-gray-600'}`}>{counts[c.key]}</span>
+                </button>
+              ))}
+            </div>
+            {/* Round 48: previous breakpoints had `lg:grid-cols-2 xl:grid-cols-3`
+                which kept lg (1024-1279px) at only 2 columns even though
+                each AgentCard is fine ≥260px wide. With the sidebar (208px),
+                main area at lg is ~816px so 3 cols at ~272px each fits.
+                xl breakpoint auto-inherits lg=3 cols; 2xl bumps to 4. */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
+              {filtered.map(s => (
+                <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
+              ))}
+            </div>
+            {filtered.length === 0 && (
+              <div className="mt-4 text-center text-xs text-gray-600">
+                No agents match "{agentFilter}" — <button onClick={() => setAgentFilter('all')} className="underline hover:text-gray-400">Show all</button>
+              </div>
+            )}
+          </>
+        );
+      })()}
 
       <InboxPanel messages={inbox} />