## Interface Overview

### Top Bar Elements
![](image-3.png)
1. **Search Bar**
   - "Search Test Suites..." input field.
   - Quick access to specific tests.

2. **Action Buttons**
   - "Run All": Execute all tests.
   - "Generate Assertions for All Tests": Automated assertion creation.

![](image-4.png)
3. **Test Status Summary**
   - Located in the top-right corner.
   - Format: "X Passed Y Failed".
   - Passed Count (Green pill)
     * Shows the number of successful tests.
     * Updates in real-time during execution.
     * Displays with checkmark icon.
   - Failed Count (Red pill)
     * Shows the number of failed tests.
     * Updates in real-time during execution.
     * Displays with X icon.
   - Example: "6 Passed 2 Failed"

4. **Test Execution Counter**
   - Shows "N/N TESTS EXECUTED".
   - Updates in real-time.
   - Displays progress during batch runs.

5. **Page Navigation**
   - Shows current page (e.g., "Page 1 of 2").
   - Navigation arrows for multiple pages.
   - Quick page jumping.

## Main Interface Panels

### REQUEST Panel
1. **Test Information**
   - Test name and description.
   - Request configuration.
   - JSON editor with syntax highlighting.

2. **Request Structure**
```json
{
  "method": "GET",
  "url": "https://example.com",
  "headers": {},
  "path_params": {},
  "query_params": {
    "page_size": "100"
  },
  "json_body": {}
}
```

### RESPONSE Panel
1. **Status Information**
   - Status code (e.g., "200 OK", "405 Method Not Allowed")
   - Execution time (e.g., "6ms", "911ms")

2. **Response Details**
```json
{
  "headers": {
    "accept-ranges": "bytes",
    "cache-control": "max-age=604800",
    "content-encoding": "gzip",
    "content-type": "text/html; charset=UTF-8"
  },
  "statusCode": 200,
  "testCaseId": "e8c724ea-7428-4656-a3bd-c4da53ef7e89",
  "elapsedTime": "6ms"
}
```

### ASSERTIONS Panel
1. **Visual Indicators**
   - Green dot: Passed assertion.
   - Red dot: Failed assertion.

2. **Common Assertions**
```javascript
expect(response.response, "response should exist").to.exist;
expect(response.response, "response should be a string").to.be.a('string');
expect(response.statusCode, "statusCode should exist").to.exist;
expect(response.statusCode, "statusCode should be a number").to.be.a('number');
expect(response.statusCode, "statusCode should equal 200").to.equal(200);
```