feat: unread message count badges in sidebar sessions

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pinchchat",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pinchchat",
-      "version": "1.59.0",
+      "version": "1.60.0",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinchchat",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "description": "A sleek, dark-themed webchat UI for OpenClaw — monitor sessions, stream responses, and inspect tool calls in real-time.",
   "type": "module",
   "repository": {

src/components/Sidebar.tsx

@@ -466,7 +466,9 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, onSplit,
                       <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(168,85,247,0.7)] animate-pulse" />
                     )}
                     {s.hasUnread && !isActive && (
-                      <span className="absolute -top-0.5 -left-0.5 h-2 w-2 rounded-full bg-[var(--pc-accent)] shadow-[0_0_8px_rgba(34,211,238,0.7)]" />
+                      <span className="absolute -top-1.5 -left-1.5 min-w-[16px] h-4 flex items-center justify-center rounded-full bg-[var(--pc-accent)] text-[9px] font-bold text-zinc-900 leading-none px-1 shadow-[0_0_8px_rgba(34,211,238,0.5)]">
+                        {(s.unreadCount || 1) > 99 ? '99+' : (s.unreadCount || 1)}
+                      </span>
                     )}
                   </div>
                   <div className="flex-1 min-w-0">

src/hooks/useGateway.ts

@@ -53,7 +53,7 @@ export function useGateway() {
   useEffect(() => { activeSessionRef.current = activeSession; }, [activeSession]);
   const currentRunIdRef = useRef<string | null>(null);
   const [activeSessions, setActiveSessions] = useState<Set<string>>(new Set());
-  const [unreadSessions, setUnreadSessions] = useState<Set<string>>(new Set());
+  const [unreadSessions, setUnreadSessions] = useState<Map<string, number>>(new Map());
   const [agentIdentity, setAgentIdentity] = useState<AgentIdentity | null>(null);
   /** Map of runId → generation duration (ms), preserved across loadHistory reloads */
   const generationTimesRef = useRef<Map<string, number>>(new Map());
@@ -337,9 +337,8 @@ export function useGateway() {
         // Mark non-active sessions as unread when they receive a final message
         if (state === 'final' && evtSession) {
           setUnreadSessions(prev => {
-            if (prev.has(evtSession)) return prev;
-            const next = new Set(prev);
-            next.add(evtSession);
+            const next = new Map(prev);
+            next.set(evtSession, (prev.get(evtSession) || 0) + 1);
             return next;
           });
         }
@@ -483,7 +482,7 @@ export function useGateway() {
     setMessages([]);
     setUnreadSessions(prev => {
       if (!prev.has(key)) return prev;
-      const next = new Set(prev);
+      const next = new Map(prev);
       next.delete(key);
       return next;
     });
@@ -538,6 +537,7 @@ export function useGateway() {
     ...s,
     isActive: activeSessions.has(s.key),
     hasUnread: unreadSessions.has(s.key),
+    unreadCount: unreadSessions.get(s.key) || 0,
   }));
 
   const getClient = useCallback(() => clientRef.current, []);

src/types/index.ts

@@ -33,6 +33,7 @@ export interface Session {
   messageCount?: number;
   isActive?: boolean;
   hasUnread?: boolean;
+  unreadCount?: number;
   totalTokens?: number;
   contextTokens?: number;
   inputTokens?: number;