Update Playground documentation with current UI screenshots

features/playground.mdx

@@ -7,46 +7,46 @@
 
 <DarkLightImage
   lightSrc="/images/playground-light.png"
-  caption="Playground overview."
-  alt="Screenshot of the playground in the UI."
+  darkSrc="/images/playground-dark.png"
+  caption="Playground overview showing the three-panel interface."
+  alt="Screenshot of the Playground showing testset selection, prompt editing, and preview panels."
 />
 
 ## Getting Started
 
 ### 1. Select Your Test Data (Left Panel)
 
 **Choose a Testset:**
-- Click the testset dropdown at the top of the left panel
+- Click the "Choose Testset" dropdown at the top left
 - Select a testset that contains the data you want to test your prompt against
-- If no testsets exist, click "Create testset" to create one directly from the Playground
-- The first testcase will be automatically selected
+- If no testsets exist, create one from the [Testsets](/features/testsets) page first
+- Once selected, testcases from the testset will appear in the left panel
 
 **Select Testcases:**
 - Click on individual testcases to select them
 - Hold Shift and click to select multiple testcases
-- Selected testcases have a blue left border
+- Selected testcases have a highlighted left border
 - Hover over the info icon to see the full testcase data
-- Testcases with a green flask icon have been tested
 
 ### 2. Edit Your Prompt (Middle Panel)
 
 **Choose a Prompt:**
-- Select a prompt from the dropdown in the header
-- If no prompts exist, click "Create prompt" to create one directly from the Playground
+- Select a prompt from the "Prompt" dropdown at the top of the middle panel
+- If no prompts exist, create one from the [Prompts](/features/prompts) page first
 
 **Work with Prompt Versions:**
-- The left sidebar shows all versions of your selected prompt
+- The "Prompt Versions" section shows all versions of your selected prompt
 - Click any version to switch to it
-- Versions with unsaved changes show a save indicator
-- The production version is marked with a badge
+- The status indicator shows "All changes saved" when there are no pending changes
+- The production version is marked with a "Production" badge
 
 **Edit Prompt Templates:**
 - Use the "Prompt Templates" tab to write your prompts
-- The editor supports **Jinja syntax** for dynamic content
-- Insert variables from your testcase data like `{{variable_name}}`
-- Add multiple messages by clicking "+ Add Message"
-- Set message roles (System, User, Assistant) using the dropdown
-- Remove messages with the trash can icon
+- The editor supports [Jinja syntax](https://jinja.palletsprojects.com/) for dynamic content
+- Insert variables from your testcase data like `{{variable_name}}` or use `{{allInputs}}` for all inputs
+- Add multiple messages by clicking "+ ADD MESSAGE"
+- Set message roles (System, User, Assistant) using the role dropdown
+- Remove messages with the trash icon
 
 **Configure Model Settings:**
 - Switch to the "Model Settings" tab
@@ -58,16 +58,16 @@
 
 **Template Preview:**
 - The "Template Preview" tab shows how your prompt looks with real data
 - Variables are automatically replaced with values from selected testcases
 - This helps you verify your Jinja templating is working correctly
 
 **Run Tests:**
 - Click "Try" to test your prompt on selected testcases
 - Click "Kickoff Run" to create a full run for the entire testset, which will appear in your run history
 - Results appear in the "Results" tab automatically
 
 **View Results:**
 - The "Results" tab shows AI responses for each testcase
 - See response time, token count, and full output
 - Click the completion badge to open a detailed results modal
 - Green indicates successful completion, yellow shows partial results
@@ -81,15 +81,15 @@
 ```
 
 ### Multi-testcase Testing
 - Test individual testcases for quick iteration
 - Run all testcases for comprehensive evaluation
 - Kickoff full runs that are tracked in your run history
 - Compare results across different prompt versions
 
 ### Version Management
-- Save new versions of your prompts with the "Save" button
-- Switch between versions to compare performance
-- Publish versions to production when ready
+- Save new versions of your prompts with the "SAVE" button in the header
+- Switch between versions in the "Prompt Versions" panel to compare performance
+- Mark versions as production when ready to deploy
 
 ### Real-time Preview
 - See exactly how your prompt will look with real data
@@ -98,9 +98,9 @@
 
 ## Best Practices
 
 1. **Start Small**: Select one testcase first to quickly iterate on your prompt
 2. **Use Variables**: Leverage Jinja templating to make prompts dynamic and reusable
 3. **Test Thoroughly**: Run all testcases before publishing to production
 4. **Save Versions**: Create new versions when making significant changes
 5. **Monitor Results**: Check response times and token usage to optimize costs
 
@@ -108,11 +108,11 @@
 
 **Quick Testing:**
 
 Select a testcase → Edit prompt → Preview → Try → Review results
 
 **Comprehensive Evaluation:**
 
 Select all testcases → Edit prompt → Try All → Analyze results modal
 
 **Version Comparison:**
 
@@ -120,5 +120,5 @@
 
 **Full Run Creation:**
 
 Select testset → Edit prompt → Kickoff Run → Monitor in run history