fix(app): decouple unread indicator from the running status dot

The session-list status dot is overloaded: a session with unread results
was overridden to a solid blue dot — the same color as the "thinking"
(running) state, differing only by a pulse. A finished, idle session
therefore looked like it was still running, and only reverted to its true
green "online" dot after you opened it (which clears the unread flag).

Decouple the two signals: the status dot now always reflects true liveness
(disconnected/thinking/waiting/permission), and unread is shown separately
as a bold title plus a small trailing accent dot. Blue is once again
reserved exclusively for "running". Applies to both the session list rows
and the compact active-sessions group.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

Author: 3 people

packages/happy-app/sources/components/ActiveSessionsGroupCompact.tsx

@@ -225,12 +225,16 @@ export function ActiveSessionsGroupCompact({ sessions, selectedSessionId }: Acti
 export const CompactSessionRow = React.memo(({ session, selected, showBorder }: { session: SessionRowData; selected?: boolean; showBorder?: boolean }) => {
     const styles = stylesheet;
     const { theme } = useUnistyles();
-    const baseStatus = STATUS_CONFIG[session.state];
+    // Status dot reflects true liveness only, never reusing the blue
+    // "thinking/running" color for unread.
+    const status = STATUS_CONFIG[session.state];
+    // A session the agent is waiting on still owns the dot — that is attention,
+    // not unread.
     const needsUserAction = session.state === 'permission_required' || session.state === 'input_required';
-    // User action stays orange and pulsing even when the request also marked the session unread.
-    const status = session.hasUnread && !needsUserAction
-        ? { ...baseStatus, color: '#007AFF', dotColor: '#007AFF', isPulsing: false, isConnected: baseStatus.isConnected }
-        : baseStatus;
+    // Unread is shown as a bold title, but only once the agent has stopped —
+    // never while it's still running (thinking), so a re-activated session
+    // doesn't read as unread mid-turn.
+    const showUnreadTitle = session.hasUnread && session.state !== 'thinking';
     const navigateToSession = useNavigateToSession();
     const swipeableRef = React.useRef<Swipeable | null>(null);
     const swipeEnabled = Platform.OS !== 'web';
@@ -274,8 +278,6 @@ export const CompactSessionRow = React.memo(({ session, selected, showBorder }:
 
         if (needsUserAction) {
             indicator = <StatusDot color={status.dotColor} isPulsing={status.isPulsing} />;
-        } else if (session.hasUnread) {
-            indicator = <StatusDot color={status.dotColor} isPulsing={false} />;
         } else if (session.state === 'waiting' && session.hasDraft) {
             indicator = (
                 <Ionicons
@@ -312,7 +314,8 @@ export const CompactSessionRow = React.memo(({ session, selected, showBorder }:
                     <Text
                         style={[
                             styles.sessionTitle,
-                            status.isConnected ? styles.sessionTitleConnected : styles.sessionTitleDisconnected
+                            status.isConnected ? styles.sessionTitleConnected : styles.sessionTitleDisconnected,
+                            showUnreadTitle && styles.sessionTitleUnread
                         ]}
                         numberOfLines={2}
                     >
@@ -510,6 +513,13 @@ const stylesheet = StyleSheet.create((theme) => ({
     sessionTitleDisconnected: {
         color: theme.colors.textSecondary,
     },
+    sessionTitleUnread: {
+        // Bold via the SemiBold face, not fontWeight: web sets
+        // `font-synthesis: none` and bundles no Bold(700) face, so a numeric
+        // fontWeight would render identically to the regular title.
+        ...Typography.default('semiBold'),
+        color: theme.colors.text,
+    },
     // 18 wide so the dot's center lines up with the center of the project
     // header's "+" button above the card, on both platform paddings.
     trailingIndicatorSlot: {

packages/happy-app/sources/components/SessionsList.tsx

@@ -199,9 +199,8 @@ const stylesheet = StyleSheet.create((theme) => ({
     },
     sessionTitle: {
         fontSize: 15,
-        fontWeight: '500',
         flex: 1,
-        ...Typography.default('semiBold'),
+        ...Typography.default('regular'),
     },
     sessionShortcutBadge: {
         flexShrink: 0,
@@ -213,6 +212,13 @@ const stylesheet = StyleSheet.create((theme) => ({
     sessionTitleDisconnected: {
         color: theme.colors.textSecondary,
     },
+    sessionTitleUnread: {
+        // Bold via the SemiBold face, not fontWeight: web sets
+        // `font-synthesis: none` and bundles no Bold(700) face, so a numeric
+        // fontWeight would render identically to the regular title.
+        ...Typography.default('semiBold'),
+        color: theme.colors.text,
+    },
     sessionSubtitleRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -612,28 +618,29 @@ const SessionItem = React.memo(({ session, selected, isFirst, isLast, isSingle }
     const styles = stylesheet;
     const navigateToSession = useNavigateToSession();
     const [actionsAnchor, setActionsAnchor] = React.useState<SessionActionsAnchor | null>(null);
-    const baseStatus = STATUS_CONFIG[session.state];
-    const needsUserAction = session.state === 'permission_required' || session.state === 'input_required';
-    // User action stays orange and pulsing even when the request also marked the session unread.
-    const status = session.hasUnread && !needsUserAction
-        ? { ...baseStatus, color: '#007AFF', dotColor: '#007AFF', isPulsing: false, isConnected: baseStatus.isConnected }
-        : baseStatus;
+    // Status dot reflects true liveness only, never reusing the blue
+    // "thinking/running" color for unread.
+    const status = STATUS_CONFIG[session.state];
+    // Unread is shown as a bold title, but only once the agent has stopped —
+    // never while it's still running (thinking), so a re-activated session
+    // doesn't read as unread mid-turn.
+    const showUnreadTitle = session.hasUnread && session.state !== 'thinking';
 
     const vibingMessage = React.useMemo(() => {
         return vibingMessages[Math.floor(Math.random() * vibingMessages.length)].toLowerCase() + '…';
     }, [session.state]);
 
+    // No 'unread' status text: unread is carried by the bold title instead, so
+    // the status line keeps reporting what the session is actually doing.
     const statusText = session.state === 'input_required'
         ? t('status.inputRequired')
         : session.state === 'permission_required'
             ? t('status.permissionRequired')
-            : session.hasUnread
-                ? t('status.unread')
-                : session.state === 'thinking'
-                    ? vibingMessage
-                    : session.state === 'disconnected'
-                        ? t('status.lastSeen', { time: formatLastSeen(session.activeAt!, false) })
-                        : t('status.online');
+            : session.state === 'thinking'
+                ? vibingMessage
+                : session.state === 'disconnected'
+                    ? t('status.lastSeen', { time: formatLastSeen(session.activeAt!, false) })
+                    : t('status.online');
 
     const handlePress = React.useCallback(() => {
         navigateToSession(session.id);
@@ -690,7 +697,8 @@ const SessionItem = React.memo(({ session, selected, isFirst, isLast, isSingle }
                 <View style={styles.sessionTitleRow}>
                     <Text style={[
                         styles.sessionTitle,
-                        status.isConnected ? styles.sessionTitleConnected : styles.sessionTitleDisconnected
+                        status.isConnected ? styles.sessionTitleConnected : styles.sessionTitleDisconnected,
+                        showUnreadTitle && styles.sessionTitleUnread
                     ]} numberOfLines={1}>
                         {session.name}
                     </Text>