[AgentOps] session page support ui & backend

[shirleyai-co]

Summary

Add sessions feature — list and detail pages for viewing grouped traces by session ID.

#413
#414

Type of Change

• feat - A new feature
• fix - A bug fix
• docs - Documentation only changes
• style - Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor - A code change that neither fixes a bug nor adds a feature
• perf - A code change that improves performance
• test - Adding missing tests or correcting existing tests
• build - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci - Changes to our Cl configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore - Other changes that don't modify sc or test files
• revert - Reverts a previous commit
• security - A security fix or improvement
• github - Changes to our GitHub configuration files and scripts
• other (please describe):

Details

Backend

• New endpoints: GET /api/v1/projects/{project_id}/sessions (list) and GET /api/v1/projects/{project_id}/sessions/{session_id} (detail)
• Service layer: Added list_sessions() and get_session() to TraceReaderService, with ClickHouse queries that GROUP BY session_id and aggregate trace/token stats
• Span-level I/O fallback: When trace-level input/output is empty ({} or NULL), the service backfills from span data using argMin/argMax
• Schemas: New Pydantic response models (SessionListItem, SessionDetailResponse, etc.)
• Tests: 11 unit tests covering list/detail endpoints, pagination, search, date range filtering, error handling, and chronological ordering

Frontend

• Sessions list page: Table with columns (Timestamp, ID, User IDs, Traces, Input, Output, Latency, Tokens) — column order and styling aligned with the Traces list page
• Session detail page: Chronological trace cards, each with an inline header (trace name/ID link, timestamp, duration, status) and collapsible Input/Output sections
• Custom JSON tree viewer: Replaced react18-json-view with a lightweight custom tree renderer — displays JSON as indented key-value pairs with collapsible nodes, no curly braces (collapsed previews show {3 keys} / Array(2))
• API client & hooks: getSessions(), getSession(), useSessions(), useSession()

Screenshots / Recordings (if applicable)

Checklist

• I have read the CONTRIBUTING.md
• I have added/updated tests where applicable
• I have added screenshots or recordings for UI changes (if applicable)
• I have updated documentation where necessary

[greptile-apps]

Greptile Summary

Added sessions feature that groups traces by session_id and displays them in list and detail views, enabling users to view conversation-style interactions across multiple traces.

Key Changes:

• Backend API endpoints for listing sessions with aggregated stats (trace count, tokens, duration) and retrieving session details with chronological traces
• ClickHouse queries with span-level I/O fallback when trace-level input/output is empty
• Custom JSON tree viewer component replaced react18-json-view dependency
• Session detail panel shows traces as cards with expandable input/output sections
• Comprehensive test coverage (11 unit tests) for pagination, search, filtering, and error handling
• Centralized buildUrlWithFilters() utility to preserve date filters across page navigation

Confidence Score: 4/5

• This PR is safe to merge with minor attention needed for SQL operator precedence clarity
• Score reflects well-tested implementation with comprehensive unit tests, proper error handling, and consistent patterns. The SQL queries use correct logic but could benefit from explicit parentheses for clarity (already acknowledged by developer).
• backend/rest/services/trace_reader.py - consider adding parentheses in SQL WHERE clauses (lines 329, 427) for improved readability

Important Files Changed

Filename	Overview
backend/rest/routers/sessions.py	added two new endpoints for listing and retrieving session details with proper error handling and authentication
backend/rest/services/trace_reader.py	added list_sessions() and get_session() methods with ClickHouse queries, aggregations, and span-level I/O fallback logic
tests/rest/test_sessions_router.py	comprehensive unit tests covering list/detail endpoints, pagination, search, date filtering, and error cases
frontend/ui/src/app/projects/[projectId]/sessions/page.tsx	implemented sessions list page with table view, pagination, search/filtering, and side panel integration
frontend/ui/src/features/traces/components/SessionDetailPanel.tsx	created session detail panel showing chronological trace cards with expandable input/output sections and navigation controls
frontend/ui/src/components/ui/json-view.tsx	implemented custom JSON tree viewer with collapsible nodes, color-coded values, and deep parsing support

Sequence Diagram

sequenceDiagram
    participant User
    participant SessionsPage as Sessions Page
    participant useSessions as useSessions Hook
    participant API as Sessions API
    participant Router as Sessions Router
    participant Service as TraceReaderService
    participant CH as ClickHouse

    User->>SessionsPage: Navigate to /sessions
    SessionsPage->>useSessions: Fetch sessions list
    useSessions->>API: getSessions(projectId, options)
    API->>Router: GET /api/v1/projects/{id}/sessions
    Router->>Service: list_sessions(project_id, page, filters)
    Service->>CH: Query traces grouped by session_id
    CH-->>Service: Aggregated session data
    Service->>CH: Backfill I/O from spans (if needed)
    CH-->>Service: Span I/O data
    Service-->>Router: Session list with metadata
    Router-->>API: SessionListResponse
    API-->>useSessions: Session data
    useSessions-->>SessionsPage: Render table

    User->>SessionsPage: Click session row
    SessionsPage->>SessionDetailPanel: Open panel with sessionId
    SessionDetailPanel->>API: getSession(projectId, sessionId)
    API->>Router: GET /api/v1/projects/{id}/sessions/{sessionId}
    Router->>Service: get_session(project_id, session_id)
    Service->>CH: Query all traces for session
    CH-->>Service: Trace list
    Service->>CH: Backfill trace I/O from spans (if empty)
    CH-->>Service: Span I/O data
    Service->>CH: Get token totals from spans
    CH-->>Service: Token counts
    Service-->>Router: Session detail with traces
    Router-->>API: SessionDetailResponse
    API-->>SessionDetailPanel: Display traces chronologically

Loading

_{Last reviewed commit: 7e6a3d2}

[greptile-apps]

_{20 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[XinweiHe]

@greptile review