WildDragonLLC/claudecodeui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
claudecodeui/docs/superpowers/specs/2026-05-30-session-status-indicators-design.md

1.7 KiB
Raw Blame History

Session Status Indicators - Design

Date: 2026-05-30 Status: Approved (3-distinct-states)

Problem

Sidebar session indicator is an animated green dot driven purely by timestamp (isActive: diffInMinutes < 10 in sidebar/utils/utils.ts). It lights up for any session touched in the last 10 min regardless of whether an agent is running. The real processing state (processingSessions Set, event-driven) is only shown in the chat-area status bar, never in the sidebar.

Three States

  • Processing: processingSessions.has(session.id) -> amber dot, animate-ping halo + solid core. Title "Agent running".
  • Recently active: sessionView.isActive && !isProcessing -> static sky-blue dot. Title "Recently active".
  • Idle: neither -> no indicator.

Data flow (new threading, parallel to currentTime)

AppContent -> useProjectsState({processingSessions}) -> sidebarSharedProps -> Sidebar (SidebarProps) -> projectListProps -> SidebarProjectList -> SidebarProjectItem -> SidebarProjectSessions -> SidebarSessionItem. processingSessions optional in leaf types -> graceful degrade.

Files

  1. app/AppContent.tsx - pass processingSessions into useProjectsState
  2. hooks/useProjectsState.ts - accept + sidebarSharedProps + deps
  3. sidebar/types/types.ts - SidebarProps gains processingSessions
  4. sidebar/view/Sidebar.tsx - destructure + projectListProps
  5. sidebar/view/subcomponents/SidebarProjectList.tsx - type + passthrough
  6. sidebar/view/subcomponents/SidebarProjectItem.tsx - type + passthrough
  7. sidebar/view/subcomponents/SidebarProjectSessions.tsx - type + passthrough
  8. sidebar/view/subcomponents/SidebarSessionItem.tsx - 3-state indicator

Risk: low, additive prop threading + presentational swap. Feature branch, no deploy until reviewed.