feat: improve realtime log detail UI with voice, transport, and audio tokens

[danpiths]

Summary

Improves the realtime log detail sheet view with voice, transport, session
metadata, and audio token breakdown for realtime turns.

Changes

• Realtime header badges: Shows WebSocket or WebRTC transport badge and
  voice name badge (e.g. "marin", "alloy") when viewing realtime turn logs
• Voice hero stat: The 5th hero stat card shows the configured voice and
  transport source for realtime turns instead of "Tools available"
• Realtime session details: New section in Request Details shows Bifrost
  session ID, provider session ID (both with copy buttons), transport source,
  and trigger event type in mono font
• Audio token breakdown: For realtime turns, the Tokens section always shows
  Input Text / Input Audio / Output Text / Output Audio token split with
  defaults of 0, plus reasoning tokens when > 0
• Turn source labels: Raw "ei" / "lm" metadata values now display as
  "Event Initiated" / "Language Model"
• Metadata deduplication: Realtime-specific keys are excluded from the
  generic Metadata section to avoid showing them twice

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

1. Open the Bifrost UI and go to Logs
2. Open a realtime turn log entry
3. Verify: transport badge (WebSocket/WebRTC) and voice badge appear in the
   header
4. Verify: hero stat shows voice name with transport as sub-label
5. Verify: "Realtime Session" section shows session IDs, source, and trigger
   event
6. Verify: Tokens section shows audio/text token split
7. Verify: "More Details" metadata section doesn't duplicate realtime keys

Screenshots/Recordings

N/A

Breaking changes

• Yes
• No

Related issues

N/A

Security considerations

No security implications. UI-only changes reading existing metadata fields.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[danpiths]

• feat: improve realtime log detail UI with voice, transport, and audio tokens #3336 👈 (View in Graphite)
• feat: enrich realtime routing, logging, cost, and session tracking #3335
• feat: add Azure realtime provider and nested model normalization #3334
• fix: wrap Makefile subshell cd commands in parentheses #3333
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[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.}

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added transport and voice information badges to realtime log details
  • Added Voice stat to the log detail view, replacing the previous Tools stat
  • Enhanced realtime logs with additional detail fields including session IDs, provider information, and trigger event types
  • Improved token count display for realtime logs with separate tracking for text, audio, and reasoning tokens
  • Updated metadata filtering for realtime log entries

Walkthrough

LogDetailView detects realtime turn logs via log.object === 'realtime.turn' and conditionally renders distinct UI elements throughout: realtime transport/voice badges in the header, a Voice hero stat replacing Tools available, realtime-specific detail fields (session IDs, transport, voice, turn source, trigger event), split text/audio token counts with optional reasoning tokens, and extended metadata filtering for realtime-related keys.

Changes

Realtime Log Detail View

Layer / File(s)	Summary
Realtime Detection ui/app/workspace/logs/sheets/logDetailView.tsx	Introduces isRealtimeTurn detector based on log.object === 'realtime.turn' for conditional rendering.
Header UI Elements ui/app/workspace/logs/sheets/logDetailView.tsx	Adds transport and voice badges for realtime turns; conditionally renders Voice hero stat instead of Tools available.
More Details Section ui/app/workspace/logs/sheets/logDetailView.tsx	Injects realtime-specific fields: session ID, provider session ID, transport, voice, turn source, and trigger event type.
Token and Metadata Rendering ui/app/workspace/logs/sheets/logDetailView.tsx	Updates token section to display split text/audio/reasoning tokens for realtime; gates cache/completion details behind !isRealtimeTurn; extends metadata filtering for realtime keys.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A turn is born, both old and new,
Real-time whispers, what's the truth?
Badges gleam, tokens split in two,
Voice and transport, here's the proof!
Details dance, metadata too—
One component, one clever view! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: realtime log UI improvements focusing on voice, transport, and audio tokens.
Description check	✅ Passed	The description is comprehensive and well-structured, covering all template sections including summary, changes, type, affected areas, testing steps, and checklist items.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/05-08-feat_improve_realtime_log_detail_ui_with_voice_transport_and_audio_tokens

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Confidence Score: 5/5

UI-only change reading existing metadata fields for display; no data mutations, no new API calls, safe to merge.

All changes are purely presentational. The helper functions handle unknown values gracefully with fallbacks, the isRealtimeTurn guard is a simple string equality check, and the audio token arithmetic is straightforward. The duplicated exclusion-key list is a future-maintenance concern but not a current defect.

No files require special attention.

Important Files Changed

Filename	Overview
ui/app/workspace/logs/sheets/logDetailView.tsx	Adds realtime-turn UI enhancements (transport/voice badges, hero stat, session details section, audio token breakdown, metadata deduplication). Logic is correct; the realtime metadata exclusion list is duplicated in both the visibility guard and the render filter, which is a minor maintenance concern.

_{Reviews (8): Last reviewed commit: "feat: improve realtime log detail UI wit..." | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/app/workspace/logs/sheets/logDetailView.tsx (1)

2847-2849: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update unsupported-type toast copy to include realtime in supported list.

copyRequestBody now supports realtime turns, but the message still lists the old set of supported types.

Suggested fix

- "Copy request body is only available for chat, responses, speech, text completion, and embedding requests",
+ "Copy request body is only available for chat, responses, realtime, speech, text completion, and embedding requests",

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/app/workspace/logs/sheets/logDetailView.tsx` around lines 2847 - 2849,
Update the unsupported-type toast message used when invoking copyRequestBody by
adding "realtime" to the supported list; locate the toast.error call (the string
currently: "Copy request body is only available for chat, responses, speech,
text completion, and embedding requests") and modify the text to include
"realtime" among the supported types (e.g., "...chat, responses, realtime,
speech, text completion, and embedding requests").

🧹 Nitpick comments (1)

ui/app/workspace/logs/sheets/logDetailView.tsx (1)

1744-1756: ⚡ Quick win

Deduplicate realtime metadata filtering to avoid drift.

The same exclusion list is duplicated in two filters. A single helper keeps behavior synchronized and reduces future regressions.

Suggested refactor

+  const hiddenRealtimeMetadataKeys = new Set([
+    "realtime_session_id",
+    "provider_session_id",
+    "realtime_source",
+    "realtime_event_type",
+    "realtime_transport",
+    "realtime_voice",
+    "realtime",
+  ]);
+  const shouldShowMetadataKey = (key: string) =>
+    key !== "isAsyncRequest" &&
+    !(isRealtimeTurn && hiddenRealtimeMetadataKeys.has(key));

-Object.keys(log.metadata).filter((k) => {
-  if (k === "isAsyncRequest") return false;
-  if (isRealtimeTurn && [...].includes(k)) return false;
-  return true;
-}).length > 0
+Object.keys(log.metadata).filter(shouldShowMetadataKey).length > 0

- .filter(([key]) => {
-   if (key === "isAsyncRequest") return false;
-   if (isRealtimeTurn && [...].includes(key)) return false;
-   return true;
- })
+ .filter(([key]) => shouldShowMetadataKey(key))

Also applies to: 1763-1775

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/app/workspace/logs/sheets/logDetailView.tsx` around lines 1744 - 1756, The
metadata filtering duplicates the same realtime exclusion list in two places;
create a single helper (e.g., shouldShowMetadataKey(key: string, isRealtimeTurn:
boolean) or filterMetadataKeys(metadata: Record<string, any>, isRealtimeTurn:
boolean)) that encapsulates the logic (skip "isAsyncRequest" always; skip the
realtime keys when isRealtimeTurn is true) and use that helper in place of both
inline filters around log.metadata so behavior stays synchronized and easier to
maintain (update the two occurrences that currently test isRealtimeTurn and the
same array of realtime keys).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/workspace/logs/sheets/logDetailView.tsx`:
- Around line 825-836: The current rendering logic in the isRealtimeTurn Badge
(and similar mappings) treats any non-'websocket' realtime_transport as 'WebRTC'
and any non-'ei' source as 'Language Model', which can silently mislabel
unexpected values; update the logic in the Badge rendering that reads
log.metadata.realtime_transport and the source-to-label mapping to explicitly
handle known values (e.g., 'websocket' and 'webrtc' or 'ei') and otherwise
render the raw log.metadata value or a clear "Unknown" label; adjust the
conditional in the isRealtimeTurn Badge and the equivalent source-label code
paths to use explicit comparisons or a small switch/map so unknown values fall
through to the raw/Unknown display instead of being coerced to the other known
type.
- Around line 1299-1314: The two new copy controls inside LogEntryDetailsView
for realtime_session_id and provider_session_id need data-testid attributes so
E2E tests can target them; update the CopyInlineButton instances (and/or their
wrapping <span>) used where log.metadata.realtime_session_id and
log.metadata.provider_session_id are rendered to include distinct data-testid
values (e.g., data-testid="copy-realtime-session-id" and
data-testid="copy-provider-session-id") while keeping the components and label
props unchanged; ensure the change is applied in the JSX that renders
LogEntryDetailsView so tests can reliably select the interactive buttons.
- Around line 1453-1471: The derived token counts for the LogEntryDetailsView
entries "Input Text Tokens" and "Output Text Tokens" can become negative when
provider details are missing or partial; update the value calculations in the
LogEntryDetailsView instances (the ones computing from
log.token_usage?.prompt_tokens, prompt_tokens_details?.audio_tokens,
completion_tokens, completion_tokens_details?.audio_tokens, and
completion_tokens_details?.reasoning_tokens) to clamp results to a minimum of
zero (e.g., replace the raw subtraction with a non-negative expression such as
Math.max(0, ...)) so the UI never renders negative token values.

---

Outside diff comments:
In `@ui/app/workspace/logs/sheets/logDetailView.tsx`:
- Around line 2847-2849: Update the unsupported-type toast message used when
invoking copyRequestBody by adding "realtime" to the supported list; locate the
toast.error call (the string currently: "Copy request body is only available for
chat, responses, speech, text completion, and embedding requests") and modify
the text to include "realtime" among the supported types (e.g., "...chat,
responses, realtime, speech, text completion, and embedding requests").

---

Nitpick comments:
In `@ui/app/workspace/logs/sheets/logDetailView.tsx`:
- Around line 1744-1756: The metadata filtering duplicates the same realtime
exclusion list in two places; create a single helper (e.g.,
shouldShowMetadataKey(key: string, isRealtimeTurn: boolean) or
filterMetadataKeys(metadata: Record<string, any>, isRealtimeTurn: boolean)) that
encapsulates the logic (skip "isAsyncRequest" always; skip the realtime keys
when isRealtimeTurn is true) and use that helper in place of both inline filters
around log.metadata so behavior stays synchronized and easier to maintain
(update the two occurrences that currently test isRealtimeTurn and the same
array of realtime keys).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f1dd8e87-19a5-46bd-8bbb-c65dc3f25936

📥 Commits

Reviewing files that changed from the base of the PR and between df8eea6 and d1503cc.

📒 Files selected for processing (1)

• ui/app/workspace/logs/sheets/logDetailView.tsx

[danpiths]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[danpiths]

@coderabbitai resolve

[coderabbitai]

✅ Actions performed

Comments resolved and changes approved.

[akshaydeo]

Merge activity

• May 14, 1:58 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 14, 2:02 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.