Docs/Studio/Detail Panel

Detail Panel

Deep dive into step-by-step execution data with the Detail Panel.

Overview

The Detail Panel is the right sidebar (35% of screen) in the Trace Debugger that shows comprehensive information about the currently selected step.

Detail Panel with all sections visible

It provides everything you need to understand:

Panel Sections

The Detail Panel is organized into collapsible sections for easy navigation.

Step Information

Step Information section

Step Header

Shows at the very top:

Goal

The specific goal for this step:

Type 'laptop' in the search box

This is NOT the overall run goal (e.g., "Buy a laptop from Amazon"), but rather the immediate objective for this individual step.

Action Summary

One-line description of what happened:

✓ Typed "laptop" into element #168 (search input)

Or if it failed:

✗ Failed to click element #42 (button not found)

URLs Section

URLs section showing pre and post URLs

Shows the webpage state before and after the action:

Pre-Action URL

The URL before the action executed:

https://www.amazon.com/s?k=laptop&crid=62G9T2HDMCVW&sprefix=laptop%2Caps%2C161&ref=nb_sb_noss_1

Post-Action URL

The URL after the action executed:

https://www.amazon.com/HP-Micro-edge-Microsoft-14-dq0040nr-Snowflake/dp/B0947BJ67M/ref=sr_1_2?crid=62G9T2HDMCVW&dib=eyJ2IjoiMSJ9.LEInAfCt99nkoUL7kiolxZc1GWTv-Uuf0fHc9WyNcZELx8hDbLmrC5pXZM_uv-KmmcgFC0q_WA1KsoVNkMExCoSVcfKWCZ0KWlHznoxKuCt8bP9LtP7Rm_AYwcbyadcJUl2pxOQcTqa1dz7p7b64U7GO7SpCnPfPz9c_RoLqsH-vuoh9xfytRZp0Rz8-9y8vZsbzpfNhwaQeaw4tpCINz7UtWeTfpQDo2r1GtnkUQJA.7zf7QN5TeBt6PLxm-vfLuvL1ONUVZnMamF6Z8BBhHVc&dib_tag=se&keywords=laptop&qid=1767480379&sprefix=laptop%2Caps%2C161&sr=8-2

What to look for:

LLM Response Section

LLM Response section with raw text

Shows the raw output from the language model that decided what action to take.

Response Text

The exact text the LLM generated:

TYPE(168, "laptop")

This is the instruction the agent follows. Format varies by agent type:

Response Hash

SHA-256 hash of the response for caching:

sha256:2428758f8403d6f4c489184402e04a2e072e301ce6d43a6288fb9737c02bfe04

Why it matters:

Token Usage

LLM token consumption for this step:

Token usage display 
Prompt Tokens: 2,671
Completion Tokens: 13
Total Tokens: 2,684

What to look for:

Execution Details Section

Execution Details section

Shows exactly what happened when the action was executed.

Action Type

The type of action:

Target Element

Information about the target element (for click/type actions):

Target Elements ID 168 
Element ID: 168
Element Type: input
Bounding Box: { x: 280, y: 120, width: 450, height: 40 }

Bounding box shows the exact position and size of the element on the page.

Action Parameters

Specific details for the action:

For type actions:

Text: "laptop"

For click actions:

Click Coordinates: (505, 140)

For press actions:

Key: "Enter"

For scroll actions:

Direction: down
Amount: 500px

Execution Outcome

What happened when the action executed:

Success outcomes:

Failure outcomes:

Duration

How long the action took to execute:

Duration: 10,370 ms (10.37 seconds)

What's normal:

What's slow:

Error Details

If the action failed, shows the error:

Error: Element #42 not found in DOM. The element may have been removed
or the page structure changed.

Verification Section

Verification section showing signals

Shows whether the action achieved its intended goal.

Verification Status

Overall verification outcome:

Verification Signals

Specific checks that were performed:

Common signals:

url_changed:

✓ URL changed (expected for navigation)
✗ URL did not change (expected change)

dom_mutation:

✓ DOM was modified (expected for interactions)
✗ No DOM changes detected

element_visible:

✓ Target element is visible
✗ Element is hidden or removed

error_detected:

✗ JavaScript error occurred on page
✓ No errors detected

timeout:

✗ Operation timed out
✓ Completed within timeout

Custom Signals

Some agents may provide custom verification signals:

shopping_cart_updated: true
item_count_increased: true
price_displayed: true

Performance Metrics Section

Performance metrics

Additional performance data:

Step Duration Breakdown

LLM Call: 2,450 ms
Action Execution: 10,370 ms
Verification: 1,200 ms
Total: 14,020 ms

Network Activity

Requests: 8
Data Transferred: 1.2 MB

Memory Usage

Heap Size: 45 MB
DOM Nodes: 1,247

Understanding Step Status

The status badge at the top tells you the overall outcome:

Success (Green)

Both action execution AND verification passed:

✓ Action: Succeeded
✓ Verification: Passed

Example:

Partial (Yellow)

Action succeeded BUT verification failed:

✓ Action: Succeeded
✗ Verification: Failed

Example:

Common causes:

Failed (Red)

Action execution failed:

✗ Action: Failed
- Verification: Not performed (action failed)

Example:

Common causes:

Reading Execution Data

Successful Step Example

Successful step details 
Step 3: Type 'laptop' in search box
✓ Success

URLs:
  Pre:  https://www.amazon.com/
  Post: https://www.amazon.com/ (unchanged)

LLM Response:
  TYPE(168, "laptop")
  Tokens: 1,257

Execution:
  Action: type
  Element: #168 (input)
  Text: "laptop"
  Outcome: dom_updated
  Duration: 10,370 ms

Verification:
  ✓ Passed
  Signals:
    ✓ dom_mutation: true
    ✓ element_visible: true
    ✓ error_detected: false

What this tells you:

  1. Agent decided to type "laptop" into element #168
  2. Action succeeded and updated the DOM
  3. Verification confirmed the input is visible and no errors occurred
  4. Took 10.37 seconds (normal for typing with rendering)

Failed Step Example

Step 7: Click "Add to Cart" button
✗ Failed

URLs:
  Pre:  https://www.amazon.com/dp/B08N5WRWNW
  Post: https://www.amazon.com/dp/B08N5WRWNW (unchanged)

LLM Response:
  CLICK(42)
  Tokens: 1,445

Execution:
  Action: click
  Element: #42 (button)
  Outcome: element_not_found
  Duration: 5,000 ms (timeout)
  Error: Element #42 not found in DOM

Verification:
  - Not performed (action failed)

What this tells you:

  1. Agent tried to click element #42 ("Add to Cart" button)
  2. Element was not found on the page
  3. Action timed out after 5 seconds searching for it
  4. Verification couldn't run because action failed

Next steps:

Partial Success Example

Partial success details 
Step 5: Click "Search" button
⚠ Partial

URLs:
  Pre:  https://www.amazon.com/
  Post: https://www.amazon.com/ (unchanged)

LLM Response:
  CLICK(89)
  Tokens: 1,123

Execution:
  ✓ Action: click
  Element: #89 (button)
  Outcome: dom_updated
  Duration: 1,250 ms

Verification:
  ✗ Failed
  Signals:
    ✗ url_changed: false (expected true)
    ✓ dom_mutation: true
    ✓ element_visible: true

What this tells you:

  1. Agent clicked element #89 successfully
  2. DOM was updated (something changed on page)
  3. But URL didn't change (expected navigation to search results)
  4. Button is still visible after click

Possible issues:

Common Debugging Patterns

Pattern 1: Element Not Found

Symptoms:

Check:

  1. View screenshot - Is element visible?
  2. Check previous step - Did page structure change?
  3. Enable bounding box overlay - Was correct element targeted?
  4. Check URL - Are we on the right page?

Solutions:

Pattern 2: Action Succeeded, Nothing Happened

Symptoms:

Check:

  1. Enable diff overlay - Did anything change?
  2. Check LLM response - Was correct action chosen?
  3. Check element - Is it the right target?
  4. Check verification signals - What failed?

Solutions:

Pattern 3: Slow Execution

Symptoms:

Check:

  1. Check duration breakdown - Where is time spent?
  2. Check network activity - Large downloads?
  3. Check screenshot - Page loading spinner visible?
  4. Compare to similar steps - Is this step always slow?

Solutions:

Next Steps

Previous
Trace Debugger
Next
Trace List