feat(web): show session status indicators in sidebar

Add visual dot indicators after the timestamp in the session list:
- busy: green pulsing dot (animate-pulse)
- unread: blue static dot (completed while user was viewing another session)
- idle: no dot (default)

Track unread sessions via busy→idle transitions from both WebSocket
status events and API refresh polling. Clear unread on session select.

Author: xiejin

web/src/App.tsx

@@ -102,6 +102,10 @@ function App() {
 
   const [streamStatus, setStreamStatus] = useState<ChatStatus>("ready");
 
+  // Track sessions with unread results (completed a turn while user wasn't viewing)
+  const [unreadSessionIds, setUnreadSessionIds] = useState<Set<string>>(new Set());
+  const prevSessionStatusRef = useRef<Map<string, string>>(new Map());
+
   useEffect(() => {
     const token = consumeAuthTokenFromUrl();
     if (token) {
@@ -266,10 +270,48 @@ function App() {
     setStreamStatus(nextStatus);
   }, []);
 
+  // Detect busy→idle transitions from API refresh to mark sessions as unread
+  useEffect(() => {
+    const prev = prevSessionStatusRef.current;
+    const next = new Map<string, string>();
+    const newUnread: string[] = [];
+
+    for (const session of sessions) {
+      const state = session.status?.state ?? null;
+      if (state) {
+        next.set(session.sessionId, state);
+      }
+      const prevState = prev.get(session.sessionId);
+      // Detect busy → non-busy (idle, stopped, null/gone) for non-selected sessions
+      if (prevState === "busy" && state !== "busy" && session.sessionId !== selectedSessionId) {
+        newUnread.push(session.sessionId);
+      }
+    }
+
+    prevSessionStatusRef.current = next;
+
+    if (newUnread.length > 0) {
+      setUnreadSessionIds((prev) => {
+        const updated = new Set(prev);
+        for (const id of newUnread) updated.add(id);
+        return updated;
+      });
+    }
+  }, [sessions, selectedSessionId]);
+
   const handleSessionStatus = useCallback(
     (status: SessionStatus) => {
       applySessionStatus(status);
 
+      // Mark as unread when a non-selected session finishes (becomes non-busy)
+      if (status.state !== "busy" && status.sessionId !== selectedSessionId) {
+        setUnreadSessionIds((prev) => {
+          const next = new Set(prev);
+          next.add(status.sessionId);
+          return next;
+        });
+      }
+
       if (status.state !== "idle") {
         return;
       }
@@ -291,7 +333,7 @@ function App() {
       );
       refreshSession(status.sessionId);
     },
-    [applySessionStatus, refreshSession],
+    [applySessionStatus, refreshSession, selectedSessionId],
   );
 
   const handleCreateSession = useCallback(
@@ -319,6 +361,13 @@ function App() {
     (sessionId: string) => {
       selectSession(sessionId);
       setIsMobileSidebarOpen(false);
+      // Clear unread status when user views the session
+      setUnreadSessionIds((prev) => {
+        if (!prev.has(sessionId)) return prev;
+        const next = new Set(prev);
+        next.delete(sessionId);
+        return next;
+      });
     },
     [selectSession],
   );
@@ -343,8 +392,10 @@ function App() {
         updatedAt: formatRelativeTime(session.lastUpdated),
         workDir: session.workDir,
         lastUpdated: session.lastUpdated,
+        statusState: session.status?.state ?? null,
+        isUnread: unreadSessionIds.has(session.sessionId),
       })),
-    [sessions],
+    [sessions, unreadSessionIds],
   );
 
   // Transform archived Session[] to SessionSummary[] for sidebar
@@ -356,6 +407,8 @@ function App() {
         updatedAt: formatRelativeTime(session.lastUpdated),
         workDir: session.workDir,
         lastUpdated: session.lastUpdated,
+        statusState: session.status?.state ?? null,
+        isUnread: false,
       })),
     [archivedSessions],
   );

web/src/features/sessions/sessions.tsx

@@ -53,7 +53,8 @@ import {
   CollapsibleContent,
 } from "@/components/ui/collapsible";
 import { hasPlatformModifier, isMacOS } from "@/hooks/utils";
-import { cn, } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
 
 // Top-level regex constants for performance
 const NEWLINE_REGEX = /\r\n|\r|\n/;
@@ -65,6 +66,10 @@ type SessionSummary = {
   updatedAt: string;
   workDir?: string | null;
   lastUpdated: Date;
+  /** Runtime session state: busy, idle, stopped, etc. */
+  statusState?: string | null;
+  /** Whether this session has unread results */
+  isUnread?: boolean;
 };
 
 type ViewMode = "list" | "grouped";
@@ -87,6 +92,38 @@ function shortenPath(path: string, maxLen = 30): string {
   return ".../" + parts.slice(-2).join("/");
 }
 
+/**
+ * Small dot indicator for session status, rendered after the timestamp.
+ * - busy: green dot with outward pulse animation (matches the bottom status indicator)
+ * - unread: static blue dot
+ * - idle/default: no dot
+ */
+function SessionStatusDot({ statusState, isUnread }: { statusState?: string | null; isUnread?: boolean }) {
+  if (statusState === "busy") {
+    return (
+      <span className="relative inline-flex size-3 shrink-0 items-center justify-center" aria-label="Running">
+        <motion.span
+          className="absolute size-2.5 rounded-full bg-green-500/50"
+          animate={{
+            scale: [1, 1.8, 1],
+            opacity: [0.6, 0, 0.6],
+          }}
+          transition={{
+            duration: 1.5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "easeInOut",
+          }}
+        />
+        <span className="relative inline-block size-1.5 rounded-full bg-green-500" />
+      </span>
+    );
+  }
+  if (isUnread) {
+    return <span className="inline-block size-1.5 shrink-0 rounded-full bg-blue-500" aria-label="Unread" />;
+  }
+  return null;
+}
+
 type SessionsSidebarProps = {
   sessions: SessionSummary[];
   archivedSessions?: SessionSummary[];
@@ -936,8 +973,9 @@ export const SessionsSidebar = memo(function SessionsSidebarComponent({
                                           </Tooltip>
                                         )}
                                         {!isEditing && (
-                                          <span className="text-[10px] text-muted-foreground mt-1 block">
+                                          <span className="inline-flex items-center gap-1.5 text-[10px] text-muted-foreground mt-1">
                                             {session.updatedAt}
+                                            <SessionStatusDot statusState={session.statusState} isUnread={session.isUnread} />
                                           </span>
                                         )}
                                       </button>
@@ -1055,8 +1093,9 @@ export const SessionsSidebar = memo(function SessionsSidebarComponent({
                                 {normalizeTitle(session.title)}
                               </TooltipContent>
                             </Tooltip>
-                            <span className="text-[10px] text-muted-foreground shrink-0">
+                            <span className="inline-flex items-center gap-1.5 text-[10px] text-muted-foreground shrink-0">
                               {session.updatedAt}
+                              <SessionStatusDot statusState={session.statusState} isUnread={session.isUnread} />
                             </span>
                           </div>
                         )}