Development environment setup

[ishaan-jaff]

[Feat] Realtime API show logs / session runs

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have Added testing in the tests/litellm/ directory, Adding at least 1 test is a hard requirement - see details
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

CI (LiteLLM team)

CI status guideline:

• 50-55 passing tests: main is stable with minor issues.
• 45-49 passing tests: acceptable but needs attention
• <= 40 passing tests: unstable; be careful with your merges and assess the risk.

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🆕 New Feature
✅ Test

Changes

This PR introduces a "Pretty View" for realtime API logs within the LiteLLM dashboard, improving readability over the raw JSON display.

• New RealtimePrettyView component: Renders structured information for realtime logs, including session configuration (model, voice, modalities, temperature, instructions) and conversation turns (status, transcripts, detailed token breakdowns for text, audio, image, and cached tokens).
• Realtime response detection: Added an isRealtimeResponse() helper function to identify realtime API responses based on specific event types (session.created, response.done) in the results array.
• Integration with PrettyMessagesView: The existing PrettyMessagesView now automatically detects realtime responses and delegates rendering to the new RealtimePrettyView component.
• Comprehensive testing: Added 27 new unit tests (24 for RealtimePrettyView and 3 for PrettyMessagesView) to ensure correct rendering, interaction, collapse behavior, token display, and edge case handling.
• Visual validation: Confirmed functionality with a live E2E demo on the LiteLLM Logs page, demonstrating the toggle between the new Pretty view and the raw JSON view.

---

  

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 26, 2026 7:14am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

This PR adds a "Pretty View" for OpenAI Realtime API logs in the LiteLLM dashboard, rendering structured session configuration, conversation turns, and token usage instead of raw JSON.

• New RealtimePrettyView component with session card (model, voice, modalities, instructions) and conversation card (turns with status, transcripts, token breakdowns)
• isRealtimeResponse() detection function routes realtime API responses to the specialized view from PrettyMessagesView
• SectionHeader extended with optional turnCount prop for realtime output sections
• Comprehensive tests (27 tests across two test files) covering rendering, interactions, collapse behavior, and edge cases
• Logic issue: isRealtimeResponse() detects event types (response.audio.done, conversation.item.created) that RealtimePrettyView doesn't actually render, which could cause valid realtime responses to show a misleading fallback message

Confidence Score: 3/5

• This PR is a UI-only addition with good test coverage but has a detection/rendering mismatch that could cause display issues for some realtime response types.
• Score of 3 reflects that while the PR is well-structured with comprehensive tests and clean component architecture, the mismatch between isRealtimeResponse() detection and actual rendering could cause edge-case display regressions where valid realtime events show a fallback message instead of the standard view.
• RealtimePrettyView.tsx needs attention — specifically the isRealtimeResponse() function should be aligned with the event types the component actually renders.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.tsx	New component for rendering realtime API logs. Has a mismatch between event types detected by isRealtimeResponse() and those actually rendered, which can cause fallback display for valid realtime responses.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/PrettyMessagesView.tsx	Clean integration — detects realtime responses early and delegates to the new specialized view. The routing correctness depends on isRealtimeResponse being accurate.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/SectionHeader.tsx	Minimal change adding an optional turnCount prop displayed in the header. Clean and backwards-compatible.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.test.tsx	Comprehensive test suite covering rendering, interactions, edge cases, and token display. Follows AGENTS.md testing conventions well.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/PrettyMessagesView.test.tsx	Good integration tests verifying routing between standard and realtime views. Tests follow project conventions.
ui/litellm-dashboard/package-lock.json	Lock file changes removing dev: true flags from some dependencies. Auto-generated, no functional risk.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[PrettyMessagesView] -->|response| B{isRealtimeResponse?}
    B -->|true| C[RealtimePrettyView]
    B -->|false| D[Standard InputCard + OutputCard]
    C --> E{Parse events}
    E -->|session.created / session.updated| F[SessionCard]
    E -->|response.done| G[ConversationCard]
    E -->|No matching events| H["Fallback: No recognized events"]
    G --> I[ResponseTurn per response]
    I --> J[OutputMessage with transcripts]
    I --> K[TokenBreakdown details]
    F --> L[ConfigRow grid + Instructions]

Loading

_{Last reviewed commit: 1f0cb47}

[greptile-apps]

_{6 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Detection/rendering event type mismatch

isRealtimeResponse() recognizes five event types (session.created, session.updated, response.done, response.audio.done, conversation.item.created), but RealtimePrettyView only renders session.created/session.updated and response.done. If a realtime response contains only response.audio.done or conversation.item.created events, isRealtimeResponse returns true and PrettyMessagesView routes to this component, but it will display "No recognized realtime events found" instead of the standard chat view.

Either the detection function should only match event types that the view actually handles, or the view should handle all the detected types.

Suggested change

	export function isRealtimeResponse(response: any): boolean {
	if (!response || !response.results || !Array.isArray(response.results) || response.results.length === 0) {
	return false;
	}
	return response.results.some(
	(r: any) =>
	r.type === 'session.created' ||
	r.type === 'session.updated' ||
	r.type === 'response.done' ||
	r.type === 'response.audio.done' ||
	r.type === 'conversation.item.created'
	);
	}
	export function isRealtimeResponse(response: any): boolean {
	if (!response || !response.results || !Array.isArray(response.results) || response.results.length === 0) {
	return false;
	}
	return response.results.some(
	(r: any) =>
	r.type === 'session.created' ||
	r.type === 'session.updated' ||
	r.type === 'response.done'
	);
	}

[greptile-apps]

Always-true condition in ternary

index >= 0 is always true since array .map() indices start at 0, making the : 0 branch unreachable dead code. If the intent was to skip margin on the last item, this should compare against the total count. As-is, it's equivalent to just marginBottom: 12.

Suggested change

	marginBottom: index >= 0 ? 12 : 0,
	marginBottom: 12,