feat: add filter to show only currently running sessions#292
feat: add filter to show only currently running sessions#292adelin-b wants to merge 1 commit intositeboon:mainfrom
Conversation
Add a toggle button (lightning icon) next to the search filter that allows users to filter the project list to show only projects with actively running Claude, Cursor, or Codex sessions. Changes: - Backend: Add `?running=true` query param support to `/api/projects` endpoint - Frontend: Add showRunningOnly toggle state and Zap icon button in Sidebar - API: Update projects() to accept options object with running filter - UX: Show loading state and specific empty states for running filter
WalkthroughThis PR implements a "running only" filter for projects. The backend endpoint Changes
Sequence DiagramsequenceDiagram
participant User
participant UI as Sidebar.jsx
participant API as api.js
participant Server as server/index.js
participant DB as Sessions DB
User->>UI: Click "running only" toggle
UI->>UI: Update showRunningOnly state
UI->>API: projects({running: true})
API->>API: Build query string
API->>Server: GET /api/projects?running=true
Server->>DB: Query active sessions
DB-->>Server: Return Claude, Cursor, Codex sessions
Server->>Server: Filter projects with active sessions
Server-->>API: Return filtered projects
API-->>UI: Resolve with filtered data
UI->>UI: Update runningProjects state
UI->>User: Display filtered project list
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/Sidebar.jsx (3)
187-207: Add response status check and consider refresh handling.Two concerns:
Missing response status check: The API response isn't validated before parsing JSON. If the server returns an error status (4xx/5xx),
response.json()may fail or return unexpected data.Stale data on refresh: When
showRunningOnlyis active and the user clicks the refresh button, the running projects won't be refetched since the effect only depends onshowRunningOnly. Consider addingonRefreshhandling or a refresh trigger.Proposed fix for response validation
const fetchRunning = async () => { setIsLoadingRunning(true); try { const response = await api.projects({ running: true }); + if (!response.ok) { + throw new Error(`Failed to fetch running projects: ${response.status}`); + } const data = await response.json(); setRunningProjects(data); } catch (error) { console.error('Error fetching running projects:', error); setRunningProjects([]); } finally { setIsLoadingRunning(false); } };
740-749: Consider more inclusive empty state messaging.The empty state message says "Start a Claude session to see it here", but this feature also shows running Cursor and Codex sessions. Consider updating the message to be more inclusive.
Suggested copy update
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">No running sessions</h3> <p className="text-sm text-muted-foreground"> - Start a Claude session to see it here + Start a session to see it here </p>
730-739: Same inclusive messaging note applies here.The loading message "Checking for active Claude sessions" should also mention Cursor/Codex, or use generic language like "Checking for active sessions".
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
server/index.jssrc/components/Sidebar.jsxsrc/utils/api.js
🧰 Additional context used
🧬 Code graph analysis (2)
server/index.js (3)
server/projects.js (3)
projects(385-385)project(408-415)project(489-499)server/claude-sdk.js (1)
activeSessions(22-22)server/openai-codex.js (1)
getActiveCodexSessions(341-355)
src/components/Sidebar.jsx (2)
src/utils/api.js (2)
api(27-183)api(27-183)src/lib/utils.js (1)
cn(4-6)
🔇 Additional comments (7)
server/index.js (2)
367-401: LGTM on the overall endpoint structure.The endpoint correctly handles the optional
runningquery parameter and filters projects accordingly. The conditional logic to return either filtered or all projects is clean.
380-390: No issue found - the code correctly handles different return types.
getActiveClaudeSDKSessions()andgetActiveCursorSessions()return arrays of session ID strings, whilegetActiveCodexSessions()returns an array of objects with{id, status, startedAt}structure. The filtering logic correctly uses.includes(s.id)for the ID arrays and.some(c => c.id === s.id)for the object array, so the implementation is correct.src/utils/api.js (1)
47-52: LGTM!Clean implementation using
URLSearchParamsthat follows the established patterns in this file. The conditional query string construction is correct.src/components/Sidebar.jsx (4)
80-82: LGTM!Good state design - using
nullforrunningProjectsallows distinguishing between "not yet fetched" and "fetched but empty", which is correctly leveraged in thebaseProjectslogic at line 283.
209-211: LGTM!Correctly uses functional state update pattern.
282-286: LGTM!The conditional logic correctly uses
runningProjectsonly when both the filter is active and data has been fetched (not null).
687-702: LGTM!Good UX implementation with:
- Clear visual distinction for active state (green styling)
- Loading spinner feedback during fetch
- Descriptive title for accessibility
- Appropriate use of
cn()for conditional styling
|
@adelin-b If you have already turned on "running filter button" and then continue a session, the session won't be listed in the Sessions panel on the right. I have attached an example with the image. |
2 participants
Summary
?running=truequery param on/api/projectsendpointChanges
server/index.js: Addrunningquery param support to/api/projects, filters projects using existinggetActive*Sessions()functionssrc/components/Sidebar.jsx: AddshowRunningOnlystate, toggle button with Zap icon, loading states, and empty state messagingsrc/utils/api.js: Updateprojects()to accept options object withrunningfilterTest plan
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.