Adding duration, step number, token counts, and nested structure to gradio UI

[yvrjsharma]

New Feature: Enhanced Gradio Agent UI with Nested Thoughts and Step metrics

Motivation

The current Gradio UI for displaying agent outputs doesn't take full advantage of Gradio's new agentic UI features, which makes it harder to understand agent reasoning and track performance. Specifically:

1. Tool calls and their results (execution logs, errors) are displayed as separate messages instead of being properly nested
2. There's no clear display of time taken by each step
3. Important metrics like token counts and step numbers are not visible

Feature Description

This PR enhances the Gradio UI to:

1. Properly nest execution logs and errors under their parent tool calls using Gradio's parent_id metadata
2. Display duration for each agent step/tool call
3. Show step numbers and token counts for tracking
4. add full height mode and share mode by default
5. Improve overall readability of agent outputs

Layout Example

Before this PR, agent outputs looked like:

🛠️ Used tool python_interpreter
Code execution failed...

After this PR, outputs are properly nested with metrics:

🛠️ Used tool python_interpreter (Step 3 | Input-tokens: 1,234 Output-tokens: 567) 1.6s
└─ 📝 Execution Logs
└─ 💥 Error (if any)

[albertvillanova]

Thanks for the enhancement, @yvrjsharma.

Please note there are some conflicts with the main branch that need to be addressed.

[yvrjsharma]

Yes, looking into this now, thanks for pointing it out @albertvillanova

Please note there are some conflicts with the main branch that need to be addressed.

[yvrjsharma]

I observed that the latest code updates lack input_token_count and output_token_count in the step_log. Is my observation accurate, @aymeric-roucher? I'm a bit confused because I can still find the token counts in the generated logs, but they're absent in the ActionStepLog.