From b54dcc5a0a6ed9a3fdd2e309e14082232673f962 Mon Sep 17 00:00:00 2001
From: openclaw-consensus-bot <openclaw-consensus-bot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 20:02:24 -0400
Subject: [PATCH] feat(ui): show event count + relative time in lane; evict
 stale tails
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AgentListItem: active agents show current "doing" text; idle agents
  fall back to "N events · Xm ago" so the lane is never blank
- formatRelativeTime: new helper (just now / Xm / Xh / Xd ago)
- AgentLane: show 3 animated skeleton items while WS is connecting
  instead of an empty list
- evictStaleTails: remove tail state entries for session paths no
  longer seen in the scan, matching the cleanup pattern already used
  for activityCache / pidSessionCache / opencodeSessionByPidCache
- scan.ts: call evictStaleTails(tailTargets) at end of each full scan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/src/App.tsx                      |  1 +
 public/src/components/AgentLane.tsx     | 19 ++++++++++++++--
 public/src/components/AgentListItem.tsx | 10 +++++++--
 public/src/lib/format.ts                |  9 ++++++++
 public/style.css                        | 29 +++++++++++++++++++++++++
 src/codexLogs.ts                        |  8 +++++++
 src/scan.ts                             |  2 ++
 7 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/public/src/App.tsx b/public/src/App.tsx
index ca15ab3..a531b93 100644
--- a/public/src/App.tsx
+++ b/public/src/App.tsx
@@ -85,6 +85,7 @@ function App() {
       
       <AgentLane
         agents={displayAgents}
+        status={status}
         selectedId={selectedId}
         searchQuery={searchQuery}
         onSelect={select}
diff --git a/public/src/components/AgentLane.tsx b/public/src/components/AgentLane.tsx
index 58389e4..9ce3aeb 100644
--- a/public/src/components/AgentLane.tsx
+++ b/public/src/components/AgentLane.tsx
@@ -1,11 +1,14 @@
-import type { AgentSnapshot } from '../types';
+import type { AgentSnapshot, WsStatus } from '../types';
 import { isServerKind } from '../lib/palette';
 import { agentIdentity } from '../lib/format';
 import { sortAgentsForLane } from '../lib/agents';
 import { AgentListItem } from './AgentListItem';
 
+const SKELETON_COUNT = 3;
+
 interface AgentLaneProps {
   agents: AgentSnapshot[];
+  status: WsStatus;
   selectedId: string | null;
   searchQuery: string;
   onSelect: (agent: AgentSnapshot) => void;
@@ -14,6 +17,7 @@ interface AgentLaneProps {
 
 export function AgentLane({
   agents,
+  status,
   selectedId,
   searchQuery,
   onSelect,
@@ -27,6 +31,7 @@ export function AgentLane({
   );
   const visibleAgents = agentNodes;
   const visibleServers = serverNodes;
+  const isLoading = (status === 'connecting') && agentNodes.length === 0;
 
   const agentTitle = searchQuery ? 'search results' : 'agents';
   const serverTitle = searchQuery ? 'server results' : 'servers';
@@ -44,7 +49,17 @@ export function AgentLane({
       />
       
       <div id="active-list">
-        {visibleAgents.length === 0 ? (
+        {isLoading ? (
+          Array.from({ length: SKELETON_COUNT }, (_, i) => (
+            <div key={i} className="lane-item is-skeleton" aria-hidden="true">
+              <div className="lane-pill idle" />
+              <div className="lane-copy">
+                <div className="lane-label lane-skel" />
+                <div className="lane-meta lane-skel lane-skel-short" />
+              </div>
+            </div>
+          ))
+        ) : visibleAgents.length === 0 ? (
           <div className="lane-meta">No agents detected.</div>
         ) : (
           visibleAgents.map((agent) => (
diff --git a/public/src/components/AgentListItem.tsx b/public/src/components/AgentListItem.tsx
index 0f1a09d..1aa64b0 100644
--- a/public/src/components/AgentListItem.tsx
+++ b/public/src/components/AgentListItem.tsx
@@ -1,5 +1,5 @@
 import type { AgentSnapshot } from '../types';
-import { agentIdentity, labelFor, truncate } from '../lib/format';
+import { agentIdentity, labelFor, truncate, formatRelativeTime } from '../lib/format';
 import { accentFor, accentSoftFor, cliForAgent } from '../lib/palette';
 
 interface AgentListItemProps {
@@ -12,6 +12,12 @@ export function AgentListItem({ agent, isSelected, onClick }: AgentListItemProps
   const doingRaw = agent.summary?.current || agent.doing || agent.cmdShort || '';
   const doing = truncate(doingRaw, 80);
   const label = labelFor(agent);
+  const eventCount = agent.events?.length ?? 0;
+  const relTime = formatRelativeTime(agent.lastActivityAt ?? agent.lastEventAt);
+  const meta = doing || [
+    eventCount > 0 ? `${eventCount} events` : null,
+    relTime,
+  ].filter((x): x is string => x !== null).join(' · ');
   const accent = accentFor(agent);
   const accentGlow = accentSoftFor(agent);
   const cli = cliForAgent(agent);
@@ -36,7 +42,7 @@ export function AgentListItem({ agent, isSelected, onClick }: AgentListItemProps
       <div className={`lane-pill ${agent.state}`} />
       <div className="lane-copy">
         <div className="lane-label">{label}</div>
-        <div className="lane-meta">{doing}</div>
+        <div className="lane-meta">{meta}</div>
       </div>
     </button>
   );
diff --git a/public/src/lib/format.ts b/public/src/lib/format.ts
index 955bd8c..e4ae540 100644
--- a/public/src/lib/format.ts
+++ b/public/src/lib/format.ts
@@ -78,3 +78,12 @@ export function formatDateFull(timestamp: number | undefined): string | null {
   if (!timestamp) return null;
   return new Date(timestamp * 1000).toLocaleString();
 }
+
+export function formatRelativeTime(ts: number | undefined): string | null {
+  if (!ts) return null;
+  const ageMs = Date.now() - ts;
+  if (ageMs < 60_000) return 'just now';
+  if (ageMs < 3_600_000) return `${Math.floor(ageMs / 60_000)}m ago`;
+  if (ageMs < 86_400_000) return `${Math.floor(ageMs / 3_600_000)}h ago`;
+  return `${Math.floor(ageMs / 86_400_000)}d ago`;
+}
diff --git a/public/style.css b/public/style.css
index dd5a1b6..a50a169 100644
--- a/public/style.css
+++ b/public/style.css
@@ -407,6 +407,35 @@ body {
   }
 }
 
+.lane-item.is-skeleton {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.lane-skel {
+  border-radius: 4px;
+  background: rgba(62, 78, 89, 0.5);
+  animation: laneSkelPulse 1.5s ease-in-out infinite;
+  height: 13px;
+  width: 75%;
+}
+
+.lane-skel-short {
+  width: 50%;
+  height: 11px;
+}
+
+@keyframes laneSkelPulse {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 0.7; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lane-skel {
+    animation: none;
+  }
+}
+
 .lane-copy {
   display: flex;
   flex-direction: column;
diff --git a/src/codexLogs.ts b/src/codexLogs.ts
index 908105a..1b08f20 100644
--- a/src/codexLogs.ts
+++ b/src/codexLogs.ts
@@ -191,6 +191,14 @@ export function getTailState(sessionPath: string): TailState | undefined {
   return tailStates.get(sessionPath);
 }
 
+export function evictStaleTails(activePaths: Set<string>): void {
+  for (const key of tailStates.keys()) {
+    if (!activePaths.has(key)) {
+      tailStates.delete(key);
+    }
+  }
+}
+
 export function consumeRecentEvents(sessionPath: string): CodexEventLite[] {
   const state = tailStates.get(sessionPath);
   if (!state?.recentEvents || state.recentEvents.length === 0) return [];
diff --git a/src/scan.ts b/src/scan.ts
index 388f19a..bbb9ddc 100644
--- a/src/scan.ts
+++ b/src/scan.ts
@@ -23,6 +23,7 @@ import {
   updateTail,
   getTailState,
   getSessionStartMsFromPath,
+  evictStaleTails,
 } from "./codexLogs.js";
 import {
   deriveCodexSessionIdentity,
@@ -2478,6 +2479,7 @@ export async function scanCodexProcesses(options: ScanOptions = {}): Promise<Sna
         activityCache.delete(id);
       }
     }
+    evictStaleTails(tailTargets);
   }
   for (const pid of pidSessionCache.keys()) {
     if (!codexPidSet.has(pid)) {