From ecbe33596013416efbcd24cf5bf5a66625ab6b7d Mon Sep 17 00:00:00 2001
From: Pedram Amini <pedram.amini@gmail.com>
Date: Fri, 12 Dec 2025 13:02:46 -0600
Subject: [PATCH] ## CHANGES
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unread messages now show iPhone-style red notification badge 🔴
- Badge overlaps top-right corner of status indicator beautifully 📍
- Removed separate pulsing green dot for cleaner interface ✨
- Unified notification system across all session view modes 🎯
- Red badge provides better visibility than previous green dot 👁️
- Consistent positioning using absolute CSS for perfect alignment 📐
- Badge appears only on non-active sessions with unread messages 💬
- Smaller 1.5px size creates subtle yet noticeable alert 🎪
- Updated README to reflect new red badge notification style 📝
- Cleaner visual hierarchy with single indicator per session 🧹
---
 README.md                               |   2 +-
 src/renderer/components/SessionList.tsx | 164 +++++++++++++-----------
 2 files changed, 87 insertions(+), 79 deletions(-)

diff --git a/README.md b/README.md
index 37fc8fad..64c2aa62 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ Each session shows a color-coded status indicator:
 - 🟡 **Yellow** - Agent is thinking
 - 🔴 **Red** - No connection with agent
 - 🟠 **Pulsing Orange** - Attempting to establish connection
-- 🟢 **Pulsing Green** - Unread messages (appears next to status dot for non-active sessions)
+- 🔴 **Red Badge** - Unread messages (small red dot overlapping top-right of status indicator, iPhone-style)
 
 ## Screenshots
 All these screenshots were captured in the them "Pedurple". For screenshots of other themes, see [THEMES.md](THEMES.md). Also note that these screenshots are probably dated as the project is evolving rapidly.
diff --git a/src/renderer/components/SessionList.tsx b/src/renderer/components/SessionList.tsx
index 5270c8ce..ec605bac 100644
--- a/src/renderer/components/SessionList.tsx
+++ b/src/renderer/components/SessionList.tsx
@@ -1468,31 +1468,33 @@ export function SessionList(props: SessionListProps) {
                               AUTO
                             </div>
                           )}
-                          {/* AI Status Indicator */}
-                          <div
-                            className={`w-2 h-2 rounded-full ${session.state === 'connecting' ? 'animate-pulse' : ''}`}
-                            style={
-                              session.toolType === 'claude' && !session.claudeSessionId
-                                ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
-                                : { backgroundColor: getStatusColor(session.state, theme) }
-                            }
-                            title={
-                              session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' :
-                              session.state === 'idle' ? 'Ready and waiting' :
-                              session.state === 'busy' ? (session.cliActivity ? `CLI: Running playbook "${session.cliActivity.playbookName}"` : 'Agent is thinking') :
-                              session.state === 'connecting' ? 'Attempting to establish connection' :
-                              session.state === 'error' ? 'No connection with agent' :
-                              'Waiting for input'
-                            }
-                          />
-                          {/* Unread Message Indicator */}
-                          {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                          {/* AI Status Indicator with Unread Badge */}
+                          <div className="relative">
                             <div
-                              className="w-2 h-2 rounded-full animate-pulse"
-                              style={{ backgroundColor: theme.colors.success }}
-                              title="Unread messages"
+                              className={`w-2 h-2 rounded-full ${session.state === 'connecting' ? 'animate-pulse' : ''}`}
+                              style={
+                                session.toolType === 'claude' && !session.claudeSessionId
+                                  ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
+                                  : { backgroundColor: getStatusColor(session.state, theme) }
+                              }
+                              title={
+                                session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' :
+                                session.state === 'idle' ? 'Ready and waiting' :
+                                session.state === 'busy' ? (session.cliActivity ? `CLI: Running playbook "${session.cliActivity.playbookName}"` : 'Agent is thinking') :
+                                session.state === 'connecting' ? 'Attempting to establish connection' :
+                                session.state === 'error' ? 'No connection with agent' :
+                                'Waiting for input'
+                              }
                             />
-                          )}
+                            {/* Unread Notification Badge */}
+                            {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                              <div
+                                className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
+                                style={{ backgroundColor: theme.colors.error }}
+                                title="Unread messages"
+                              />
+                            )}
+                          </div>
                         </div>
                       </div>
                     );
@@ -1764,31 +1766,33 @@ export function SessionList(props: SessionListProps) {
                                 AUTO
                               </div>
                             )}
-                            {/* AI Status Indicator */}
-                            <div
-                              className={`w-2 h-2 rounded-full ${session.state === 'connecting' ? 'animate-pulse' : ''}`}
-                              style={
-                                session.toolType === 'claude' && !session.claudeSessionId
-                                  ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
-                                  : { backgroundColor: getStatusColor(session.state, theme) }
-                              }
-                              title={
-                                session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' :
-                                session.state === 'idle' ? 'Ready and waiting' :
-                                session.state === 'busy' ? (session.cliActivity ? `CLI: Running playbook "${session.cliActivity.playbookName}"` : 'Agent is thinking') :
-                                session.state === 'connecting' ? 'Attempting to establish connection' :
-                                session.state === 'error' ? 'No connection with agent' :
-                                'Waiting for input'
-                              }
-                            />
-                            {/* Unread Message Indicator */}
-                            {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                            {/* AI Status Indicator with Unread Badge */}
+                            <div className="relative">
                               <div
-                                className="w-2 h-2 rounded-full animate-pulse"
-                                style={{ backgroundColor: theme.colors.success }}
-                                title="Unread messages"
+                                className={`w-2 h-2 rounded-full ${session.state === 'connecting' ? 'animate-pulse' : ''}`}
+                                style={
+                                  session.toolType === 'claude' && !session.claudeSessionId
+                                    ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
+                                    : { backgroundColor: getStatusColor(session.state, theme) }
+                                }
+                                title={
+                                  session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' :
+                                  session.state === 'idle' ? 'Ready and waiting' :
+                                  session.state === 'busy' ? (session.cliActivity ? `CLI: Running playbook "${session.cliActivity.playbookName}"` : 'Agent is thinking') :
+                                  session.state === 'connecting' ? 'Attempting to establish connection' :
+                                  session.state === 'error' ? 'No connection with agent' :
+                                  'Waiting for input'
+                                }
                               />
-                            )}
+                              {/* Unread Notification Badge */}
+                              {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                                <div
+                                  className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
+                                  style={{ backgroundColor: theme.colors.error }}
+                                  title="Unread messages"
+                                />
+                              )}
+                            </div>
                           </div>
                         </div>
                       );
@@ -2014,24 +2018,26 @@ export function SessionList(props: SessionListProps) {
                           AUTO
                         </div>
                       )}
-                      {/* AI Status Indicator */}
-                      <div
-                        className={`w-2 h-2 rounded-full ${session.state === 'busy' ? 'animate-pulse' : ''}`}
-                        style={
-                          session.toolType === 'claude' && !session.claudeSessionId
-                            ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
-                            : { backgroundColor: getStatusColor(session.state, theme) }
-                        }
-                        title={session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' : undefined}
-                      />
-                      {/* Unread Message Indicator */}
-                      {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                      {/* AI Status Indicator with Unread Badge */}
+                      <div className="relative">
                         <div
-                          className="w-2 h-2 rounded-full animate-pulse"
-                          style={{ backgroundColor: theme.colors.success }}
-                          title="Unread messages"
+                          className={`w-2 h-2 rounded-full ${session.state === 'busy' ? 'animate-pulse' : ''}`}
+                          style={
+                            session.toolType === 'claude' && !session.claudeSessionId
+                              ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
+                              : { backgroundColor: getStatusColor(session.state, theme) }
+                          }
+                          title={session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' : undefined}
                         />
-                      )}
+                        {/* Unread Notification Badge */}
+                        {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                          <div
+                            className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
+                            style={{ backgroundColor: theme.colors.error }}
+                            title="Unread messages"
+                          />
+                        )}
+                      </div>
                     </div>
                   </div>
                 );
@@ -2175,24 +2181,26 @@ export function SessionList(props: SessionListProps) {
                         AUTO
                       </div>
                     )}
-                    {/* AI Status Indicator */}
-                    <div
-                      className={`w-2 h-2 rounded-full ${session.state === 'busy' ? 'animate-pulse' : ''}`}
-                      style={
-                        session.toolType === 'claude' && !session.claudeSessionId
-                          ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
-                          : { backgroundColor: getStatusColor(session.state, theme) }
-                      }
-                      title={session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' : undefined}
-                    />
-                    {/* Unread Message Indicator */}
-                    {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                    {/* AI Status Indicator with Unread Badge */}
+                    <div className="relative">
                       <div
-                        className="w-2 h-2 rounded-full animate-pulse"
-                        style={{ backgroundColor: theme.colors.success }}
-                        title="Unread messages"
+                        className={`w-2 h-2 rounded-full ${session.state === 'busy' ? 'animate-pulse' : ''}`}
+                        style={
+                          session.toolType === 'claude' && !session.claudeSessionId
+                            ? { border: `1.5px solid ${theme.colors.textDim}`, backgroundColor: 'transparent' }
+                            : { backgroundColor: getStatusColor(session.state, theme) }
+                        }
+                        title={session.toolType === 'claude' && !session.claudeSessionId ? 'No active Claude session' : undefined}
                       />
-                    )}
+                      {/* Unread Notification Badge */}
+                      {activeSessionId !== session.id && session.aiTabs?.some(tab => tab.hasUnread) && (
+                        <div
+                          className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
+                          style={{ backgroundColor: theme.colors.error }}
+                          title="Unread messages"
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
                   );